@janbox/storefront-ui 1.0.27 → 2.0.0

package/dist/lib/icon-button/icon-button.js

@@ -3,17 +3,16 @@ import { forwardRef, useRef } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { getIconButtonProps } from "./helpers.js";
 import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
-import { getColorShadesByVariant, getSizeVariantState, omitResponsiveProps } from "../../utils/index.js";
+import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
 import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
+import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
 import { animateSpinStyle } from "../../constants/emotion.js";
 import { ensureBoolean } from "../../utils/common.js";
 import { Icon } from "../icon/icon.js";
-import { cn } from "../../utils/stylesheet.js";
 const IconButton = forwardRef((_props, ref) => {
-  var _a, _b, _c, _d;
-  const { color, variant, children, icon, isLoading, ...rest } = getIconButtonProps(_props);
+  const { size, color, variant, children, icon, isLoading, sx, sm, md, lg, ...rest } = getIconButtonProps(_props);
   const {
     dark,
     light,
@@ -26,10 +25,6 @@ const IconButton = forwardRef((_props, ref) => {
   const buttonRef = useRef(null);
   const { className } = useRippleEffect(buttonRef);
   const mergedRef = useMergeRefs([ref, buttonRef]);
-  const createStyle = (screen) => {
-    const { css: css2 } = rest[screen] ?? {};
-    return [css2];
-  };
   const css = [
     {
       display: "flex",
@@ -94,60 +89,58 @@ const IconButton = forwardRef((_props, ref) => {
     rest["aria-disabled"] && {
       pointerEvents: "none"
     },
-    createStyle("xs"),
+    createStyle({ size }),
     {
-      [mediaQuery("sm")]: createStyle("sm"),
-      [mediaQuery("md")]: createStyle("md")
-    }
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    },
+    createSxInterpolation(sx)
   ];
   const onClick = (e) => {
-    var _a2;
-    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
+    var _a;
+    (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsxs("button", { css, className: cn(rest.className, className), onClick, ref: mergedRef, children: [
+    !!icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...icon,
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...icon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...icon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...icon.lg
+        }
+      }
+    ),
+    children,
+    isLoading && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-loading": true,
+        css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
+        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+      }
+    )
+  ] });
+});
+const createStyle = ({ size } = {}) => {
+  const { inputSize } = getSizeVariantState(size);
+  return [
     {
-      css,
-      ...omitResponsiveProps(rest),
-      className: cn(rest.className, className),
-      onClick,
-      ref: mergedRef,
-      children: [
-        !!icon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            ...icon,
-            xs: {
-              size: getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
-              ...icon.xs
-            },
-            sm: {
-              size: getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
-              ...icon.sm
-            },
-            md: {
-              size: getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
-              ...icon.md
-            },
-            lg: {
-              size: getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
-              ...icon.lg
-            }
-          }
-        ),
-        children,
-        isLoading && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-loading": true,
-            css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
-            children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
-          }
-        )
-      ]
+      minHeight: inputSize,
+      minWidth: inputSize
     }
-  );
-});
+  ];
+};
 export {
   IconButton
 };

package/dist/lib/icon-button/types.d.ts

@@ -1,15 +1,15 @@
 import { JSX } from 'react';
 import { IconProps } from '../icon';
-import { ButtonVariant, ColorVariant, PropsWithCSS, ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types';
-export type IconButtonResponsiveProps = PropsWithCSS<{
+import { ButtonVariant, ColorVariant, SizeVariant, ShallowMerge, PropsWithSx, ToResponsiveProps } from '../../types';
+export type IconButtonResponsiveProps = {
     size?: SizeVariant;
-}>;
-type IconButtonExtendedProps = ResponsiveDesign<IconButtonResponsiveProps> & {
+};
+type IconButtonExtendedProps = PropsWithSx<ToResponsiveProps<IconButtonResponsiveProps> & {
     color?: ColorVariant;
     variant?: ButtonVariant;
     icon?: IconProps;
     isLoading?: boolean;
-};
-export type IconButtonProps = ShallowMerge<JSX.IntrinsicElements["button"], IconButtonExtendedProps>;
+}>;
+export type IconButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], IconButtonExtendedProps>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/icon-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC;IACnD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,GAAG;IAC3E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,uBAAuB,CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG,WAAW,CACxC,iBAAiB,CAAC,yBAAyB,CAAC,GAAG;IAC7C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

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

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

package/dist/lib/image/helpers.js

@@ -1,10 +1,8 @@
 import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
   loading: "lazy",
-  xs: {
-    css: {
-      objectFit: "cover"
-    }
+  sx: {
+    objectFit: "cover"
   }
 };
 const getImageProps = (extended) => {

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/lib/image/image.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,KAAK,sHA6BhB,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/lib/image/image.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,eAAO,MAAM,KAAK,sHAwBhB,CAAC"}

package/dist/lib/image/image.js

@@ -3,10 +3,9 @@ import { forwardRef, useMemo } from "react";
 import { isString } from "lodash-es";
 import { getImageProps } from "./helpers.js";
 import IMAGE_PLACEHOLDER from "../../assets/svg/image-placeholder.svg.js";
-import { mediaQuery } from "../../theme/screens.js";
-import "../../theme/palette.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
 const Image = forwardRef((_props, ref) => {
-  const { xs, sm, md, lg, fallback = true, src, ...rest } = getImageProps(_props);
+  const { sx, fallback = true, src, ...rest } = getImageProps(_props);
   const fallbackSrc = useMemo(() => {
     if (isString(fallback)) return fallback;
     return fallback ? IMAGE_PLACEHOLDER : void 0;
@@ -15,12 +14,7 @@ const Image = forwardRef((_props, ref) => {
     {
       maxHeight: "100%"
     },
-    xs == null ? void 0 : xs.css,
-    {
-      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [mediaQuery("md")]: md == null ? void 0 : md.css,
-      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
+    createSxInterpolation(sx)
   ];
   const onError = (e) => {
     var _a;

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
-import { ResponsiveDesign, PropsWithCSS, ShallowMerge } from '../../types';
+import { PropsWithSx, ShallowMerge } from '../../types';
 type ImageExtendedProps = {
     fallback?: string | boolean;
-} & ResponsiveDesign<PropsWithCSS>;
-export type ImageProps = ShallowMerge<JSX.IntrinsicElements["img"], ImageExtendedProps>;
+};
+export type ImageProps = ShallowMerge<JSX.IntrinsicElements['img'], PropsWithSx<ImageExtendedProps>>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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/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"}