fix: remove size utility (#183)

packages/system/src/styles/sizing.ts

@@ -70,34 +70,6 @@ export const height = style({
   themeGet: getSize,
 })
 
-type SizeProp<T extends ITheme> = SystemProp<
-  SizeGetter<T> | (CSS.Property.Width & CSS.Property.Height),
-  T
->
-export interface SizeProps<T extends ITheme = Theme> {
-  size?: SizeProp<T>
-  motionSafeSize?: SizeProp<T>
-  motionReduceSize?: SizeProp<T>
-  firstSize?: SizeProp<T>
-  lastSize?: SizeProp<T>
-  oddSize?: SizeProp<T>
-  evenSize?: SizeProp<T>
-  visitedSize?: SizeProp<T>
-  checkedSize?: SizeProp<T>
-  focusWithinSize?: SizeProp<T>
-  hoverSize?: SizeProp<T>
-  focusSize?: SizeProp<T>
-  focusVisibleSize?: SizeProp<T>
-  activeSize?: SizeProp<T>
-  disabledSize?: SizeProp<T>
-  placeholderSize?: SizeProp<T>
-}
-export const size = style({
-  prop: 'size',
-  cssProperty: ['width', 'height'],
-  themeGet: getSize,
-})
-
 type MaxWidthProp<T extends ITheme> = SystemProp<
   SizeGetter<T> | CSS.Property.MaxWidth,
   T
@@ -209,15 +181,13 @@ export const minHeight = style({
 export interface SizingProps<T extends ITheme = Theme>
   extends WidthProps<T>,
     HeightProps<T>,
-    SizeProps<T>,
     MaxWidthProps<T>,
     MaxHeightProps<T>,
     MinWidthProps<T>,
     MinHeightProps<T> {}
 export const sizing = compose(
   width,
   height,
-  size,
   maxWidth,
   maxHeight,
   minWidth,

website/pages/docs/getting-started/upgrade-guide.mdx

@@ -83,6 +83,14 @@ To reduce conflict between image attributes `width` and `height`, only `w` and `
 
 Replace it by `w` and `h`.
 
+### No more `size` utility
+
+To reduce conflict between [input attribute `size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-size), size .
+
+- **If you use `size` in your project:**
+
+Replace it by `w` + `h`.
+
 ### No more `forwardedAs`
 
 Everything is now simplified, you don't have to worry about `forwardedAs` any more, `as` works everywhere.