@janbox/storefront-ui 1.0.27 → 2.0.1

package/dist/lib/image/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/image/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAEnC,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,kBAAkB,CACnB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/image/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,WAAW,CAAC,kBAAkB,CAAC,CAChC,CAAC"}

package/dist/lib/input/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,SAAS,CAAC;AAwB3D,eAAO,MAAM,aAAa,aAAc,UAAU,eAcjD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQrC,eAAO,MAAM,aAAa,aAAc,UAAU,eAEjD,CAAC"}

package/dist/lib/input/helpers.js

@@ -1,37 +1,9 @@
-import { screens } from "../../theme/screens.js";
-import "../../theme/palette.js";
-import { getTypographyVar } from "../../theme/typography.js";
-import { mergeComponentProps, getSizeVariantState } from "../../utils/index.js";
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
-};
-const getInputCssBySize = (size) => {
-  const { inputPaddingX, inputSize, textVariant } = getSizeVariantState(size);
-  return {
-    paddingLeft: inputPaddingX,
-    paddingRight: inputPaddingX,
-    height: inputSize,
-    fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
-    lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
-  };
+  size: "md"
 };
 const getInputProps = (extended) => {
-  return mergeComponentProps(
-    defaultProps,
-    extended,
-    ...screens.map((screen) => {
-      return (current) => {
-        var _a;
-        return {
-          [screen]: {
-            css: getInputCssBySize((_a = current[screen]) == null ? void 0 : _a.size)
-          }
-        };
-      };
-    })
-  );
+  return mergeComponentProps(defaultProps, extended);
 };
 export {
   getInputProps

package/dist/lib/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/lib/input/input.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAwB,MAAM,SAAS,CAAC;AAW3D,eAAO,MAAM,KAAK,sHA+LhB,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/lib/input/input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAwB,MAAM,SAAS,CAAC;AAa3D,eAAO,MAAM,KAAK,sHA4LhB,CAAC"}

package/dist/lib/input/input.js

@@ -4,23 +4,25 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getInputProps } from "./helpers.js";
 import classes from "./input.module.scss.js";
-import { getSizeVariantState } from "../../utils/index.js";
+import { cn, createSxInterpolation } from "../../utils/stylesheet.js";
 import EyeHidden from "../../assets/svg/eye-hidden.svg.js";
 import EyeVisible from "../../assets/svg/eye-show-visible.svg.js";
+import { getSizeVariantState } from "../../utils/index.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 import { Icon } from "../icon/icon.js";
-import { cn } from "../../utils/stylesheet.js";
 const Input = forwardRef((_props, ref) => {
   const {
     type,
-    xs,
+    size,
     sm,
     md,
     lg,
     prefix,
     suffix,
+    sx,
     containerProps,
     mainProps,
     className,
@@ -85,120 +87,130 @@ const Input = forwardRef((_props, ref) => {
       setTypingValue(void 0);
     }, debounce);
   };
-  const css = [
-    createStyle(xs),
-    {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   const toggleShowPassword = (e) => {
     e.stopPropagation();
     setShowPassword((prev) => !prev);
   };
-  return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(classes.input__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        css,
-        ...mainProps,
-        className: cn(
-          classes.input__main,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...restContainerProps,
+      css: createSxInterpolation(containerSx),
+      className: cn(classes.input__container, restContainerProps.className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            [classes.input__main_error]: error
-          },
-          mainProps == null ? void 0 : mainProps.className
-        ),
-        children: [
-          prefix,
-          !!startIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              ...startIcon,
-              xs: {
-                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-                ...startIcon.xs
-              },
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...startIcon.sm
-              },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...startIcon.md
-              },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                ...startIcon.lg
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "data-error": error,
-              type: type === "password" && showPassword ? "text" : type,
-              className: cn(classes.input__control, className),
-              ...rest,
-              value: typingValue ?? value,
-              ref: mergedRefs,
-              onChange,
-              onBlur,
-              onFocus
-            }
-          ),
-          !!endIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              ...endIcon,
-              xs: {
-                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-                ...endIcon.xs
-              },
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...endIcon.sm
+            css: createSxInterpolation(sx),
+            ...mainProps,
+            className: cn(
+              classes.input__main,
+              {
+                [classes.input__main_error]: error
               },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...endIcon.md
-              },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                ...endIcon.lg
-              }
-            }
-          ),
-          suffix,
-          type === "password" && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              onClick: toggleShowPassword,
-              css: { cursor: "pointer" },
-              xs: {
-                size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
-              },
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
-              },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
-              },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
-              },
-              source: showPassword ? EyeVisible : EyeHidden
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+              mainProps == null ? void 0 : mainProps.className
+            ),
+            children: [
+              prefix,
+              !!startIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  size: getSizeVariantState(size).iconSize,
+                  ...startIcon,
+                  sm: {
+                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                    ...startIcon.sm
+                  },
+                  md: {
+                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                    ...startIcon.md
+                  },
+                  lg: {
+                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                    ...startIcon.lg
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "data-error": error,
+                  type: type === "password" && showPassword ? "text" : type,
+                  className: cn(classes.input__control, className),
+                  ...rest,
+                  value: typingValue ?? value,
+                  ref: mergedRefs,
+                  onChange,
+                  css: [
+                    createStyle({ size }),
+                    {
+                      [mediaQuery("sm")]: createStyle(sm),
+                      [mediaQuery("md")]: createStyle(md),
+                      [mediaQuery("lg")]: createStyle(lg)
+                    }
+                  ],
+                  onBlur,
+                  onFocus
+                }
+              ),
+              !!endIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  size: getSizeVariantState(size).iconSize,
+                  ...endIcon,
+                  sm: {
+                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+                    ...endIcon.sm
+                  },
+                  md: {
+                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+                    ...endIcon.md
+                  },
+                  lg: {
+                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+                    ...endIcon.lg
+                  }
+                }
+              ),
+              suffix,
+              type === "password" && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  onClick: toggleShowPassword,
+                  sx: { cursor: "pointer" },
+                  size: getSizeVariantState(size).iconSize,
+                  sm: {
+                    size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+                  },
+                  md: {
+                    size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+                  },
+                  lg: {
+                    size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+                  },
+                  source: showPassword ? EyeVisible : EyeHidden
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 });
-const createStyle = ({ css } = {}) => {
-  return [css];
+const createStyle = ({ size } = {}) => {
+  const { inputPaddingX, inputSize, textVariant } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      height: inputSize,
+      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+    }
+  ];
 };
 export {
   Input

package/dist/lib/input/types.d.ts

@@ -1,17 +1,14 @@
 import { HTMLAttributes, JSX } from 'react';
-import { Interpolation } from '@emotion/react';
 import { IconProps } from '../icon';
-import { PropsWithCSS, SizeVariant, ResponsiveDesign, ShallowMerge } from '../../types';
-export interface InputResponsiveProps extends PropsWithCSS {
+import { PropsWithSx, SizeVariant, ShallowMerge, ToResponsiveProps } from '../../types';
+export interface InputResponsiveProps {
     size?: SizeVariant;
 }
 export type InputWrapperProps = HTMLAttributes<HTMLDivElement>;
-interface InputExtendedProps extends ResponsiveDesign<InputResponsiveProps> {
+interface InputExtendedProps extends PropsWithSx<ToResponsiveProps<InputResponsiveProps>> {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
-    containerProps?: JSX.IntrinsicElements['div'] & {
-        css?: Interpolation;
-    };
+    containerProps?: PropsWithSx<JSX.IntrinsicElements['div']>;
     mainProps?: JSX.IntrinsicElements['div'];
     helperText?: string;
     error?: boolean;

package/dist/lib/input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,UAAU,kBAAmB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,UAAU,kBAAmB,SAAQ,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACvF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/lib/input-mask/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAUzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,mBAEzD,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,mBAEzD,CAAC"}

package/dist/lib/input-mask/helpers.js

@@ -1,8 +1,6 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+  size: "md"
 };
 const getInputMaskProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

package/dist/lib/input-mask/index.d.ts

@@ -1,2 +1,4 @@
 export * from './input-mask';
+export * from './types';
+export * from './helpers';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/input-mask/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/input-mask/input-mask.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps } from 'react';
 import { InputMaskProps } from './types';
-declare const InputMask: <P extends HTMLProps<HTMLElement> = HTMLProps<HTMLElement>, E extends HTMLElement = HTMLElement>(_props: InputMaskProps<P, E>, ref?: React.ForwardedRef<E>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const InputMask: <P extends HTMLProps<HTMLElement> = HTMLProps<HTMLElement>, E extends HTMLElement = HTMLElement>(_props: InputMaskProps<P>, ref?: React.ForwardedRef<E>) => import("@emotion/react/jsx-runtime").JSX.Element;
 declare const ForwardRefInputMask: typeof InputMask;
 export { ForwardRefInputMask as InputMask };
 //# sourceMappingURL=input-mask.d.ts.map

package/dist/lib/input-mask/input-mask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-mask.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,cAAc,EAA4B,MAAM,SAAS,CAAC;AAQnE,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,CAAC,WAAW,CAAC,2BAA2B,CAAC,SAAS,WAAW,wBACzF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,QACtB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,qDAmF5B,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAuC,OAAO,SAAS,CAAC;AAEjF,OAAO,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"input-mask.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,cAAc,EAA4B,MAAM,SAAS,CAAC;AASnE,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,CAAC,WAAW,CAAC,2BAA2B,CAAC,SAAS,WAAW,wBACzF,cAAc,CAAC,CAAC,CAAC,QACnB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,qDA+E5B,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAuC,OAAO,SAAS,CAAC;AAEjF,OAAO,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC"}

package/dist/lib/input-mask/input-mask.js

@@ -4,10 +4,11 @@ import { getInputMaskProps } from "./helpers.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getSizeVariantState } from "../../utils/index.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 import { Primitive } from "../primitive/primitive.js";
 import { Icon } from "../icon/icon.js";
 const InputMask = (_props, ref) => {
-  const { prefix, suffix, children, xs, sm, md, startIcon, endIcon, lg, error, ...props } = getInputMaskProps(_props);
+  const { size, outline, prefix, suffix, sx, children, sm, md, startIcon, endIcon, lg, error, ...props } = getInputMaskProps(_props);
   const css = [
     {
       display: "flex",
@@ -30,23 +31,21 @@ const InputMask = (_props, ref) => {
         borderColor: error ? getColorVar("red.600") : void 0
       }
     },
-    createStyle(xs),
+    createStyle({ size, outline }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
       [mediaQuery("lg")]: createStyle(lg)
-    }
+    },
+    createSxInterpolation(sx)
   ];
   return /* @__PURE__ */ jsxs(Primitive, { css, ...props, ref, children: [
     prefix,
     !!startIcon && /* @__PURE__ */ jsx(
       Icon,
       {
+        size: getSizeVariantState(size).iconSize,
         ...startIcon,
-        xs: {
-          size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-          ...startIcon.xs
-        },
         sm: {
           size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
           ...startIcon.sm
@@ -65,11 +64,8 @@ const InputMask = (_props, ref) => {
     !!endIcon && /* @__PURE__ */ jsx(
       Icon,
       {
+        size: getSizeVariantState(size).iconSize,
         ...endIcon,
-        xs: {
-          size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-          ...endIcon.xs
-        },
         sm: {
           size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
           ...endIcon.sm
@@ -88,7 +84,7 @@ const InputMask = (_props, ref) => {
   ] });
 };
 const ForwardRefInputMask = forwardRef(InputMask);
-const createStyle = ({ size, css, outline } = {}) => {
+const createStyle = ({ size, outline } = {}) => {
   const { inputSize, inputPaddingX } = getSizeVariantState(size);
   return [
     {
@@ -101,8 +97,7 @@ const createStyle = ({ size, css, outline } = {}) => {
         borderBottomWidth: outline == null ? void 0 : outline.bottom,
         borderLeftWidth: outline == null ? void 0 : outline.left
       }
-    },
-    css
+    }
   ];
 };
 export {

package/dist/lib/input-mask/types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLProps } from 'react';
 import { IconProps } from '../icon';
-import { SizeVariant, ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../types';
+import { PropsWithSx, ShallowMerge, SizeVariant, ToResponsiveProps } from '../../types';
 import { PrimitiveProps } from '../primitive';
-export interface InputMaskResponsiveProps extends PropsWithCSS {
+export interface InputMaskResponsiveProps {
     size?: Exclude<SizeVariant, 'xs'>;
     outline?: {
         top?: number;
@@ -11,11 +11,11 @@ export interface InputMaskResponsiveProps extends PropsWithCSS {
         left?: number;
     };
 }
-export type InputMaskProps<P = HTMLProps<HTMLElement>, E = HTMLElement> = ShallowMerge<PrimitiveProps<P, E>, {
+export type InputMaskProps<P extends object = HTMLProps<HTMLElement>> = ShallowMerge<PrimitiveProps<P>, PropsWithSx<{
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     startIcon?: IconProps;
     endIcon?: IconProps;
     error?: boolean;
-}> & ResponsiveDesign<InputMaskResponsiveProps>;
+} & ToResponsiveProps<InputMaskResponsiveProps>>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/input-mask/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,WAAW,IAAI,YAAY,CACpF,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,EACpB;IACE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CACF,GACC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/input-mask/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,YAAY,CAClF,cAAc,CAAC,CAAC,CAAC,EACjB,WAAW,CACT;IACE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC,wBAAwB,CAAC,CAChD,CACF,CAAC"}

package/dist/lib/input-number/input-number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAY3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,qDAuHlB,CAAC"}
+{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../../src/lib/input-number/input-number.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAY3C,eAAO,MAAM,WAAW,sGAYrB,gBAAgB,qDAmHlB,CAAC"}

package/dist/lib/input-number/input-number.js

@@ -5,7 +5,6 @@ import { isNil } from "lodash-es";
 import classes from "./input-number.module.scss.js";
 import { Input } from "../input/input.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import "../../theme/palette.js";
 import { cn } from "../../utils/stylesheet.js";
 import MinusIcon from "../../assets/svg/minus.svg.js";
 import PlusIcon from "../../assets/svg/plus.svg.js";
@@ -101,9 +100,7 @@ const InputNumber = ({
         IconButton,
         {
           color: "neutral",
-          xs: {
-            size: "xs"
-          },
+          size: "xs",
           icon: { source: PlusIcon },
           onClick: onPlus,
           "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber >= max
@@ -113,9 +110,7 @@ const InputNumber = ({
         IconButton,
         {
           color: "neutral",
-          xs: {
-            size: "xs"
-          },
+          size: "xs",
           icon: { source: MinusIcon },
           onClick: onMinus,
           "aria-disabled": isNaN(valueAsNumber) ? false : valueAsNumber <= min

package/dist/lib/input-range/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAE3D,CAAC"}

package/dist/lib/input-range/helpers.js

@@ -1,8 +1,6 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+  size: "md"
 };
 const getInputRangeProps = (extended) => {
   return mergeComponentProps(defaultProps, extended);

package/dist/lib/input-range/input-range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-range.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/input-range.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,eAAe,EAA6B,MAAM,SAAS,CAAC;AAYrF,eAAO,MAAM,UAAU,WAAY,eAAe,qDA4JjD,CAAC"}
+{"version":3,"file":"input-range.d.ts","sourceRoot":"","sources":["../../../src/lib/input-range/input-range.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,eAAe,EAA6B,MAAM,SAAS,CAAC;AAarF,eAAO,MAAM,UAAU,WAAY,eAAe,qDAiJjD,CAAC"}

package/dist/lib/input-range/input-range.js

@@ -6,16 +6,16 @@ import { getSizeVariantState } from "../../utils/index.js";
 import LongArrowRightIcon from "../../assets/svg/long-arrow-right.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
 import { InputNumber } from "../input-number/input-number.js";
 import { Icon } from "../icon/icon.js";
-import { cn } from "../../utils/stylesheet.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 const InputRange = (_props) => {
   const {
     error,
     helperText,
     inputs,
-    xs,
+    size,
     md,
     sm,
     lg,
@@ -30,9 +30,7 @@ const InputRange = (_props) => {
   const containerRef = useRef(null);
   const inputRefs = useRef([]);
   const iconProps = {
-    xs: {
-      size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
-    },
+    size: getSizeVariantState(size).iconSize,
     sm: {
       size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
     },
@@ -55,7 +53,7 @@ const InputRange = (_props) => {
     (_b = (_a = inputs == null ? void 0 : inputs.at(Number(e.currentTarget.dataset.index))) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, e);
   };
   const css = [
-    createStyle(xs),
+    createStyle({ size }),
     {
       [mediaQuery("sm")]: createStyle(sm),
       [mediaQuery("md")]: createStyle(md),
@@ -68,12 +66,9 @@ const InputRange = (_props) => {
       !!startIcon && /* @__PURE__ */ jsx(
         Icon,
         {
-          ...startIcon,
           css: { flexShrink: 0 },
-          xs: {
-            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-            ...startIcon.xs
-          },
+          size: getSizeVariantState(size).iconSize,
+          ...startIcon,
           sm: {
             size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
             ...startIcon.sm
@@ -112,10 +107,7 @@ const InputRange = (_props) => {
               ...inputProps,
               onChange: onInputChange,
               onFocus: onInputFocus,
-              xs: {
-                size: xs == null ? void 0 : xs.size,
-                ...inputProps.xs
-              },
+              size,
               sm: {
                 size: sm == null ? void 0 : sm.size,
                 ...inputProps.sm
@@ -137,12 +129,9 @@ const InputRange = (_props) => {
       !!endIcon && /* @__PURE__ */ jsx(
         Icon,
         {
+          size: getSizeVariantState(size).iconSize,
           ...endIcon,
           css: { flexShrink: 0 },
-          xs: {
-            size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize,
-            ...endIcon.xs
-          },
           sm: {
             size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
             ...endIcon.sm