@janbox/storefront-ui 2.0.26 → 2.0.28

package/dist/lib/grid/cell/cell.js

@@ -1,28 +1,39 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isNumber } from "lodash-es";
 import { getCellProps } from "./helpers.js";
-import { mediaQuery } from "../../../theme/screens.js";
-import "../../../theme/palette.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const Cell = ({ children, ref, ..._props }) => {
-  const { colSpan, sm, md, lg, sx, ...rest } = getCellProps(_props);
-  const css = [
-    createStyle({ colSpan }),
+  var _a, _b, _c;
+  const { colSpan, sm, md, lg, ...rest } = getCellProps(_props);
+  return /* @__PURE__ */ jsx(
+    Primitive,
     {
-      [mediaQuery("sm")]: createStyle(sm),
-      [mediaQuery("md")]: createStyle(md),
-      [mediaQuery("lg")]: createStyle(lg)
-    },
-    createSxInterpolation(sx)
-  ];
-  return /* @__PURE__ */ jsx("div", { css, ...rest, ref, children });
+      ...rest,
+      sx: {
+        ...createStyle({ colSpan }),
+        ...rest.sx,
+        sm: {
+          ...createStyle(sm),
+          ...(_a = rest.sx) == null ? void 0 : _a.sm
+        },
+        md: {
+          ...createStyle(md),
+          ...(_b = rest.sx) == null ? void 0 : _b.md
+        },
+        lg: {
+          ...createStyle(lg),
+          ...(_c = rest.sx) == null ? void 0 : _c.lg
+        }
+      },
+      ref,
+      children
+    }
+  );
 };
 const createStyle = ({ colSpan } = {}) => {
-  return [
-    {
-      gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan
-    }
-  ];
+  return {
+    gridColumn: isNumber(colSpan) ? `span ${colSpan}` : colSpan
+  };
 };
 export {
   Cell

package/dist/lib/grid/cell/helpers.d.ts

@@ -1,3 +1,2 @@
 import { CellProps } from './types';
 export declare const getCellProps: (extended: CellProps) => CellProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/grid/cell/index.d.ts

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

package/dist/lib/grid/cell/types.d.ts

@@ -1,9 +1,7 @@
 import { JSX } from 'react';
-import { PropsWithSx, ShallowMerge, ToResponsiveProps } from '../../../types';
+import { ToResponsiveProps } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export interface CellResponsiveProps {
     colSpan?: number;
 }
-type CellExtendedProps = PropsWithSx<ToResponsiveProps<CellResponsiveProps>>;
-export type CellProps = ShallowMerge<JSX.IntrinsicElements['div'], CellExtendedProps>;
-export {};
-//# sourceMappingURL=types.d.ts.map
+export type CellProps = PrimitiveProps<JSX.IntrinsicElements['div'] & ToResponsiveProps<CellResponsiveProps>>;

package/dist/lib/grid/grid/grid.d.ts

@@ -2,4 +2,3 @@ import { GridProps } from './types';
 export declare const GRID_MINIMUM_COLS = 1;
 export declare const GRID_MAXIMUM_COLS = 24;
 export declare const Grid: ({ children, ref, ..._props }: GridProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=grid.d.ts.map

package/dist/lib/grid/grid/helpers.d.ts

@@ -1,3 +1,2 @@
 import { GridProps } from './types';
 export declare const getGridProps: (extended: GridProps) => GridProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/grid/grid/index.d.ts

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

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

@@ -8,4 +8,3 @@ type GridExtendedProps = PropsWithSx<ToResponsiveProps<GridResponsiveProps> & {
 }>;
 export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/grid/index.d.ts

@@ -1,3 +1,2 @@
 export * from './grid';
 export * from './cell';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/highlight-words/highlight-words.d.ts

@@ -1,3 +1,2 @@
 import { HighlightWordsProps } from './types';
 export declare const HighlightWords: ({ highlightClassName, ...props }: HighlightWordsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=highlight-words.d.ts.map

package/dist/lib/highlight-words/highlight-words.js

@@ -1,13 +1,13 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Fragment } from "react";
 import { findAll } from "highlight-words-core";
-import { cn } from "../../utils/stylesheet.js";
+import { clsx } from "clsx";
 const HighlightWords = ({ highlightClassName, ...props }) => {
   const chunks = findAll(props);
   return /* @__PURE__ */ jsx(Fragment, { children: chunks.map((chunk, index) => {
     const { end, highlight, start } = chunk;
     const text = props.textToHighlight.substring(start, end);
-    return /* @__PURE__ */ jsx(Fragment, { children: highlight ? /* @__PURE__ */ jsx("span", { css: { fontWeight: 500 }, className: cn(highlightClassName), children: text }) : text }, index);
+    return /* @__PURE__ */ jsx(Fragment, { children: highlight ? /* @__PURE__ */ jsx("span", { css: { fontWeight: 500 }, className: clsx(highlightClassName), children: text }) : text }, index);
   }) });
 };
 export {

package/dist/lib/highlight-words/index.d.ts

@@ -1,3 +1,2 @@
 export * from './highlight-words';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/highlight-words/types.d.ts

@@ -3,4 +3,3 @@ import { ShallowMerge } from '../../types';
 export type HighlightWordsProps = ShallowMerge<FindAllArgs, {
     highlightClassName?: string;
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/icon/helpers.d.ts

@@ -1,3 +1,2 @@
 import { IconProps } from './types';
 export declare const getIconProps: (extended: IconProps) => IconProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/icon/icon.d.ts

@@ -1,3 +1,2 @@
 import { IconProps } from './types';
 export declare const Icon: ({ children: _children, ref, ..._props }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=icon.d.ts.map

package/dist/lib/icon/index.d.ts

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

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

@@ -9,4 +9,3 @@ export type IconExtendedProps = PropsWithSx<ToResponsiveProps<IconResponsiveProp
 }>;
 export type IconProps = ShallowMerge<IconHTMLProps, IconExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,3 +1,2 @@
 import { IconButtonProps } from './types';
 export declare const getIconButtonProps: (extended: IconButtonProps) => IconButtonProps;
-//# sourceMappingURL=helpers.d.ts.map

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

@@ -1,3 +1,2 @@
 import { IconButtonProps } from './types';
 export declare const IconButton: ({ children, ref, ..._props }: IconButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=icon-button.d.ts.map

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

@@ -1,9 +1,6 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useRef } from "react";
-import { useMergeRefs } from "@floating-ui/react";
 import { getIconButtonProps } from "./helpers.js";
-import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
-import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
+import { createSxInterpolation } 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";
@@ -11,6 +8,7 @@ import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.
 import { animateSpinStyle } from "../../constants/emotion.js";
 import { ensureBoolean } from "../../utils/common.js";
 import { Icon } from "../icon/icon.js";
+import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 const IconButton = ({ children, ref, ..._props }) => {
   const { size, color, variant, icon, isLoading, sx, sm, md, lg, ...rest } = getIconButtonProps(_props);
   const {
@@ -22,15 +20,13 @@ const IconButton = ({ children, ref, ..._props }) => {
     ariaDisabledSurface,
     ariaDisabledText
   } = getColorShadesByVariant(color);
-  const buttonRef = useRef(null);
-  const { className } = useRippleEffect(buttonRef);
-  const mergedRef = useMergeRefs([ref, buttonRef]);
   const css = [
     {
       display: "flex",
       width: "fit-content",
       height: "fit-content",
       position: "relative",
+      overflow: "hidden",
       justifyContent: "center",
       alignItems: "center",
       pointerEvents: ensureBoolean(rest["aria-disabled"]) ? "none" : void 0,
@@ -101,7 +97,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     var _a;
     (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsxs("button", { css, ...rest, className: cn(rest.className, className), onClick, ref: mergedRef, children: [
+  return /* @__PURE__ */ jsxs("button", { css, ...rest, onClick, ref, children: [
     !!icon && /* @__PURE__ */ jsx(
       Icon,
       {
@@ -129,7 +125,8 @@ const IconButton = ({ children, ref, ..._props }) => {
         css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" },
         children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(RippleEffect, {})
   ] });
 };
 const createStyle = ({ size } = {}) => {

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

@@ -1,4 +1,3 @@
 export * from './icon-button';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

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

@@ -12,4 +12,3 @@ type IconButtonExtendedProps = PropsWithSx<ToResponsiveProps<IconButtonResponsiv
 }>;
 export type IconButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], IconButtonExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,3 +1,2 @@
 import { ImageProps } from './types';
 export declare const getImageProps: (extended: ImageProps) => ImageProps;
-//# sourceMappingURL=helpers.d.ts.map

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

@@ -1,3 +1,2 @@
 import { ImageProps } from './types';
-export declare const Image: ({ ref, ..._props }: ImageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=image.d.ts.map
+export declare const Image: ({ ref, ..._props }: ImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/image/image.js

@@ -1,21 +1,15 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { isString } from "lodash-es";
 import { getImageProps } from "./helpers.js";
 import IMAGE_PLACEHOLDER from "../../assets/svg/image-placeholder.svg.js";
-import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { Primitive } from "../primitive/primitive.js";
 const Image = ({ ref, ..._props }) => {
-  const { sx, fallback = true, src, ...rest } = getImageProps(_props);
+  const { fallback = true, src, ...rest } = getImageProps(_props);
   const fallbackSrc = useMemo(() => {
     if (isString(fallback)) return fallback;
     return fallback ? IMAGE_PLACEHOLDER : void 0;
   }, [fallback]);
-  const css = [
-    {
-      maxHeight: "100%"
-    },
-    createSxInterpolation(sx)
-  ];
   const onError = (e) => {
     var _a;
     if (fallbackSrc) {
@@ -23,7 +17,21 @@ const Image = ({ ref, ..._props }) => {
     }
     (_a = rest.onError) == null ? void 0 : _a.call(rest, e);
   };
-  return /* @__PURE__ */ jsx("img", { src: src || fallbackSrc, alt: "", css, ...rest, ref, onError });
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      src: src || fallbackSrc,
+      alt: "",
+      ...rest,
+      sx: {
+        maxHeight: "100%",
+        ...rest.sx
+      },
+      ref,
+      onError,
+      as: "img"
+    }
+  );
 };
 export {
   Image

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

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

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

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

package/dist/lib/index.d.ts

@@ -60,4 +60,4 @@ export * from './primitive';
 export * from './price-label';
 export * from './avatar';
 export * from './suspense-query';
-//# sourceMappingURL=index.d.ts.map
+export * from './ripple-effect';

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

@@ -1,3 +1,2 @@
 import { InputProps } from './types';
 export declare const getInputProps: (extended: InputProps) => InputProps;
-//# sourceMappingURL=helpers.d.ts.map

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

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

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

@@ -1,3 +1,2 @@
 import { InputProps } from './types';
 export declare const Input: ({ ref, ..._props }: InputProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=input.d.ts.map

package/dist/lib/input/input.js

@@ -3,12 +3,10 @@ import { useRef, useState } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import { isString } from "lodash-es";
 import { getInputProps } from "./helpers.js";
-import classes from "./input.module.scss.js";
-import { cn } 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 "../../theme/palette.js";
+import { getColorVar } from "../../theme/palette.js";
 import { getTypographyVar } from "../../theme/typography.js";
 import { FormHelperText } from "../form-helper-text/form-helper-text.js";
 import { Primitive } from "../primitive/primitive.js";
@@ -25,7 +23,6 @@ const Input = ({ ref, ..._props }) => {
     suffix,
     containerProps,
     mainProps,
-    className,
     helperText,
     error,
     startIcon,
@@ -91,113 +88,170 @@ const Input = ({ ref, ..._props }) => {
     e.stopPropagation();
     setShowPassword((prev) => !prev);
   };
-  return /* @__PURE__ */ jsxs(Primitive, { className: cn(classes.input__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsxs(
-      Primitive,
-      {
-        ...mainProps,
-        className: cn(
-          classes.input__main,
+  return /* @__PURE__ */ jsxs(
+    Primitive,
+    {
+      ...containerProps,
+      sx: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        ...containerProps == null ? void 0 : containerProps.sx
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Primitive,
           {
-            [classes.input__main_error]: error
-          },
-          mainProps == null ? void 0 : mainProps.className
-        ),
-        sx: {
-          ...createStyle({ size }),
-          ...mainProps == null ? void 0 : mainProps.sx,
-          sm: {
-            ...createStyle(sm),
-            ...(_a = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _a.sm
-          },
-          md: {
-            ...createStyle(md),
-            ...(_b = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _b.md
-          },
-          lg: {
-            ...createStyle(lg),
-            ...(_c = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _c.lg
-          }
-        },
-        children: [
-          prefix,
-          !!startIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: getSizeVariantState(size).iconSize,
-              ...startIcon,
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...startIcon.sm
+            ...mainProps,
+            sx: {
+              width: "100%",
+              display: "flex",
+              overflow: "hidden",
+              alignItems: "center",
+              gap: 8,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              backgroundColor: getColorVar("surface.default"),
+              "&:hover": {
+                borderColor: getColorVar("primary.300")
               },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...startIcon.md
+              "&:has(input:focus:not(:read-only))": {
+                borderColor: getColorVar("primary.600"),
+                boxShadow: `0 1px 3px 0 ${getColorVar("primary.300")}, 0 1px 2px -1px ${getColorVar("primary.300")}`
               },
-              lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-                ...startIcon.lg
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Primitive,
-            {
-              "data-error": error,
-              type: type === "password" && showPassword ? "text" : type,
-              className: cn(classes.input__control, className),
-              ...rest,
-              value: typingValue ?? value,
-              ref: mergedRefs,
-              onChange,
-              onBlur,
-              onFocus,
-              as: "input"
-            }
-          ),
-          !!endIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: getSizeVariantState(size).iconSize,
-              ...endIcon,
-              sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-                ...endIcon.sm
+              "&:has(input:read-only)": {
+                pointerEvents: "none"
               },
-              md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-                ...endIcon.md
+              "&:has(input:disabled)": {
+                backgroundColor: getColorVar("neutral.300"),
+                color: getColorVar("neutral.500"),
+                borderColor: getColorVar("neutral.300"),
+                pointerEvents: "none"
               },
-              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,
+              ...error && { borderColor: getColorVar("red.600") },
+              ...createStyle({ size }),
+              ...mainProps == null ? void 0 : mainProps.sx,
               sm: {
-                size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+                ...createStyle(sm),
+                ...(_a = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _a.sm
               },
               md: {
-                size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+                ...createStyle(md),
+                ...(_b = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _b.md
               },
               lg: {
-                size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
-              },
-              source: showPassword ? EyeVisible : EyeHidden
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
-  ] });
+                ...createStyle(lg),
+                ...(_c = mainProps == null ? void 0 : mainProps.sx) == null ? void 0 : _c.lg
+              }
+            },
+            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
+                  },
+                  sx: {
+                    flexShrink: 0,
+                    ...startIcon == null ? void 0 : startIcon.sx
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Primitive,
+                {
+                  "data-error": error,
+                  type: type === "password" && showPassword ? "text" : type,
+                  ...rest,
+                  value: typingValue ?? value,
+                  ref: mergedRefs,
+                  onChange,
+                  onBlur,
+                  onFocus,
+                  as: "input",
+                  sx: {
+                    flex: "1 1 0%",
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    backgroundColor: "transparent",
+                    ":focus": {
+                      outline: "none"
+                    },
+                    "::placeholder": {
+                      color: getColorVar("neutral.400")
+                    }
+                  }
+                }
+              ),
+              !!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
+                  },
+                  sx: {
+                    flexShrink: 0,
+                    ...endIcon == null ? void 0 : endIcon.sx
+                  }
+                }
+              ),
+              suffix,
+              type === "password" && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  onClick: toggleShowPassword,
+                  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,
+                  sx: {
+                    cursor: "pointer",
+                    flexShrink: 0
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
 };
 const createStyle = ({ size } = {}) => {
   const { inputPaddingX, inputSize, textVariant } = getSizeVariantState(size);

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

@@ -23,4 +23,3 @@ interface InputExtendedProps extends PropsWithSx<ToResponsiveProps<InputResponsi
 }
 export type InputProps = ShallowMerge<JSX.IntrinsicElements['input'], InputExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

@@ -1,3 +1,2 @@
 import { InputMaskProps } from './types';
 export declare const getInputMaskProps: (extended: InputMaskProps) => InputMaskProps;
-//# sourceMappingURL=helpers.d.ts.map