@kopexa/input 3.0.9 → 4.0.0

package/dist/input-group.js

@@ -0,0 +1,43 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input-group.tsx
+var input_group_exports = {};
+__export(input_group_exports, {
+  InputGroup: () => InputGroup
+});
+module.exports = __toCommonJS(input_group_exports);
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "input-group",
+      className: (0, import_shared_utils.cn)((0, import_theme.inputGroup)(), className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputGroup
+});

package/dist/input-group.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  InputGroup
+} from "./chunk-NMA7BIPU.mjs";
+export {
+  InputGroup
+};

package/dist/input-wrapper.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputWrapperVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type InputWrapperProps = ComponentProps<"div"> & InputWrapperVariantProps;
+declare function InputWrapper({ className, size, ...props }: InputWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { InputWrapper, type InputWrapperProps };

package/dist/input-wrapper.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputWrapperVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type InputWrapperProps = ComponentProps<"div"> & InputWrapperVariantProps;
+declare function InputWrapper({ className, size, ...props }: InputWrapperProps): react_jsx_runtime.JSX.Element;
+
+export { InputWrapper, type InputWrapperProps };

package/dist/input-wrapper.js

@@ -0,0 +1,43 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input-wrapper.tsx
+var input_wrapper_exports = {};
+__export(input_wrapper_exports, {
+  InputWrapper: () => InputWrapper
+});
+module.exports = __toCommonJS(input_wrapper_exports);
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+function InputWrapper({ className, size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "input-wrapper",
+      className: (0, import_shared_utils.cn)((0, import_theme.input)({ size }), (0, import_theme.inputWrapper)({ size }), className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputWrapper
+});

package/dist/input-wrapper.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  InputWrapper
+} from "./chunk-EYVXSUHW.mjs";
+export {
+  InputWrapper
+};

package/dist/input.d.mts

@@ -1,42 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { InputVariantProps, SlotsToClasses } from '@kopexa/theme';
-import { InputSlots } from '@kopexa/theme/src/components/input';
+import { InputVariantProps } from '@kopexa/theme';
 import { ComponentProps } from 'react';
 
-type InputValue = ComponentProps<"input">["value"];
-type BaseProps = {
-    /**
-     * Element to be rendered in the left side of the input.
-     */
-    startContent?: React.ReactNode;
-    /**
-     * Element to be rendered in the right side of the input.
-     * if you pass this prop and the `onClear` prop, the passed element
-     * will have the clear button props and it will be rendered instead of the
-     * default clear button.
-     */
-    endContent?: React.ReactNode;
-    /**
-     * Classname or List of classes to change the classNames of the element.
-     * if `className` is passed, it will be added to the base slot.
-     */
-    classNames?: SlotsToClasses<InputSlots>;
-    /**
-     * Callback fired when the value is cleared.
-     * if you pass this prop, the clear button will be shown.
-     */
-    onClear?: () => void;
-    /**
-     * React aria onChange event.
-     */
-    onValueChange?: (value: InputValue) => void;
-    /**
-     * Loading state of the input.
-     * If true, the input will be disabled and a loading spinner will be shown.
-     */
-    loading?: boolean;
-};
-type InputProps = Omit<ComponentProps<"input">, "size"> & InputVariantProps & BaseProps;
+type InputProps = Omit<ComponentProps<"input">, "size"> & InputVariantProps;
 declare const Input: (props: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input, type InputProps };

package/dist/input.d.ts

@@ -1,42 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { InputVariantProps, SlotsToClasses } from '@kopexa/theme';
-import { InputSlots } from '@kopexa/theme/src/components/input';
+import { InputVariantProps } from '@kopexa/theme';
 import { ComponentProps } from 'react';
 
-type InputValue = ComponentProps<"input">["value"];
-type BaseProps = {
-    /**
-     * Element to be rendered in the left side of the input.
-     */
-    startContent?: React.ReactNode;
-    /**
-     * Element to be rendered in the right side of the input.
-     * if you pass this prop and the `onClear` prop, the passed element
-     * will have the clear button props and it will be rendered instead of the
-     * default clear button.
-     */
-    endContent?: React.ReactNode;
-    /**
-     * Classname or List of classes to change the classNames of the element.
-     * if `className` is passed, it will be added to the base slot.
-     */
-    classNames?: SlotsToClasses<InputSlots>;
-    /**
-     * Callback fired when the value is cleared.
-     * if you pass this prop, the clear button will be shown.
-     */
-    onClear?: () => void;
-    /**
-     * React aria onChange event.
-     */
-    onValueChange?: (value: InputValue) => void;
-    /**
-     * Loading state of the input.
-     * If true, the input will be disabled and a loading spinner will be shown.
-     */
-    loading?: boolean;
-};
-type InputProps = Omit<ComponentProps<"input">, "size"> & InputVariantProps & BaseProps;
+type InputProps = Omit<ComponentProps<"input">, "size"> & InputVariantProps;
 declare const Input: (props: InputProps) => react_jsx_runtime.JSX.Element;
 
 export { Input, type InputProps };

package/dist/input.js

@@ -24,146 +24,23 @@ __export(input_exports, {
   Input: () => Input
 });
 module.exports = __toCommonJS(input_exports);
-var import_icons = require("@kopexa/icons");
-var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
-var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
-var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var import_use_safe_layout_effect = require("@kopexa/use-safe-layout-effect");
-var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Input = (props) => {
-  var _a, _b, _c, _d;
-  const {
-    className,
-    size,
-    radius,
-    type = "text",
-    startContent,
-    endContent,
-    classNames,
-    value: valueProp,
-    onChange: onChangeProp,
-    onValueChange,
-    ref: refProp,
-    onClear,
-    loading,
-    isClearable: propsIsClearable,
-    ...rest
-  } = props;
-  const handleValueChange = (0, import_react.useCallback)(
-    (value) => {
-      onValueChange == null ? void 0 : onValueChange(value != null ? value : "");
-    },
-    [onValueChange]
-  );
-  const [inputValue, setInputValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
-    onChange: handleValueChange,
-    defaultValue: (_a = props.defaultValue) != null ? _a : ""
-  });
-  const domRef = (0, import_react.useRef)(null);
-  const isFileTypeInput = type === "file";
-  const isClearable = !!onClear || propsIsClearable || false;
-  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(
-    type
-  );
-  const hasUploadedFiles = ((_d = (_c = (_b = domRef == null ? void 0 : domRef.current) == null ? void 0 : _b.files) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
-  const isFilled = !(0, import_shared_utils.isEmpty)(valueProp) || isFilledByDefault || hasUploadedFiles || !!inputValue;
-  const styles = (0, import_react.useMemo)(
-    () => (0, import_theme.input)({
-      size,
-      radius,
-      isClearable
-    }),
-    [size, radius, isClearable]
-  );
-  const handleClear = (0, import_react.useCallback)(() => {
-    var _a2;
-    if (isFileTypeInput) {
-      domRef.current.value = "";
-    } else {
-      setInputValue("");
-    }
-    onClear == null ? void 0 : onClear();
-    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
-  }, [setInputValue, isFileTypeInput, onClear]);
-  const end = (0, import_react.useMemo)(() => {
-    if (isClearable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          disabled: props.disabled,
-          "aria-label": "clear input",
-          "data-slot": "clear-button",
-          className: styles.clearButton(),
-          onClick: handleClear,
-          children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
-        }
-      );
-    }
-    return endContent;
-  }, [
-    endContent,
-    props == null ? void 0 : props.disabled,
-    isClearable,
-    styles.clearButton,
-    handleClear
-  ]);
-  const onChange = (event) => {
-    if (!isFileTypeInput) {
-      setInputValue(event.target.value);
-    }
-    onChangeProp == null ? void 0 : onChangeProp(event);
-  };
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!domRef.current) return;
-    setInputValue(domRef.current.value);
-  }, [domRef.current]);
+  const { className, size, radius, type = "text", ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    "input",
     {
-      className: styles.inputWrapper({
-        className: classNames == null ? void 0 : classNames.inputWrapper
+      type,
+      "data-slot": "input",
+      "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
+      className: (0, import_theme.input)({
+        className,
+        size,
+        radius
       }),
-      "data-disabled": (0, import_shared_utils.dataAttr)(props.disabled),
-      "data-readonly": (0, import_shared_utils.dataAttr)(props.readOnly),
-      "data-hidden": (0, import_shared_utils.dataAttr)(props.hidden),
-      "data-slot": "input-wrapper",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: styles.innerWrapper({
-            className: classNames == null ? void 0 : classNames.innerWrapper
-          }),
-          "data-slot": "inner-wrapper",
-          children: [
-            startContent,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type,
-                "data-slot": "input",
-                "data-has-start-content": (0, import_shared_utils.dataAttr)(!!startContent),
-                "data-has-end-content": (0, import_shared_utils.dataAttr)(!!endContent),
-                "data-filled": (0, import_shared_utils.dataAttr)(isFilled),
-                "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
-                className: styles.input({
-                  className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.input, className)
-                }),
-                value: inputValue,
-                onChange: (0, import_shared_utils.chain)(onChangeProp, onChange),
-                ref: (0, import_react_utils.mergeRefs)(domRef, refProp),
-                ...rest
-              }
-            ),
-            loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { size: "xs" }) : end
-          ]
-        }
-      )
+      ...rest
     }
   );
 };

package/dist/input.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "./chunk-UWFWTFM3.mjs";
+} from "./chunk-GMM4E7KL.mjs";
 export {
   Input
 };

package/dist/password-input.d.mts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InputProps } from './input.mjs';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';
 
 type Props = {

package/dist/password-input.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InputProps } from './input.js';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';
 
 type Props = {

package/dist/password-input.js

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -24,199 +25,93 @@ __export(password_input_exports, {
   PasswordInput: () => PasswordInput
 });
 module.exports = __toCommonJS(password_input_exports);
-var import_icons2 = require("@kopexa/icons");
-var import_theme2 = require("@kopexa/theme");
+var import_icons = require("@kopexa/icons");
+var import_theme3 = require("@kopexa/theme");
 var import_tooltip = require("@kopexa/tooltip");
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/input.tsx
-var import_icons = require("@kopexa/icons");
-var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
-var import_spinner = require("@kopexa/spinner");
 var import_theme = require("@kopexa/theme");
-var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var import_use_safe_layout_effect = require("@kopexa/use-safe-layout-effect");
-var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Input = (props) => {
-  var _a, _b, _c, _d;
-  const {
-    className,
-    size,
-    radius,
-    type = "text",
-    startContent,
-    endContent,
-    classNames,
-    value: valueProp,
-    onChange: onChangeProp,
-    onValueChange,
-    ref: refProp,
-    onClear,
-    loading,
-    isClearable: propsIsClearable,
-    ...rest
-  } = props;
-  const handleValueChange = (0, import_react.useCallback)(
-    (value) => {
-      onValueChange == null ? void 0 : onValueChange(value != null ? value : "");
-    },
-    [onValueChange]
-  );
-  const [inputValue, setInputValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
-    onChange: handleValueChange,
-    defaultValue: (_a = props.defaultValue) != null ? _a : ""
-  });
-  const domRef = (0, import_react.useRef)(null);
-  const isFileTypeInput = type === "file";
-  const isClearable = !!onClear || propsIsClearable || false;
-  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(
-    type
-  );
-  const hasUploadedFiles = ((_d = (_c = (_b = domRef == null ? void 0 : domRef.current) == null ? void 0 : _b.files) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
-  const isFilled = !(0, import_shared_utils.isEmpty)(valueProp) || isFilledByDefault || hasUploadedFiles || !!inputValue;
-  const styles = (0, import_react.useMemo)(
-    () => (0, import_theme.input)({
-      size,
-      radius,
-      isClearable
-    }),
-    [size, radius, isClearable]
-  );
-  const handleClear = (0, import_react.useCallback)(() => {
-    var _a2;
-    if (isFileTypeInput) {
-      domRef.current.value = "";
-    } else {
-      setInputValue("");
-    }
-    onClear == null ? void 0 : onClear();
-    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
-  }, [setInputValue, isFileTypeInput, onClear]);
-  const end = (0, import_react.useMemo)(() => {
-    if (isClearable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          disabled: props.disabled,
-          "aria-label": "clear input",
-          "data-slot": "clear-button",
-          className: styles.clearButton(),
-          onClick: handleClear,
-          children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
-        }
-      );
-    }
-    return endContent;
-  }, [
-    endContent,
-    props == null ? void 0 : props.disabled,
-    isClearable,
-    styles.clearButton,
-    handleClear
-  ]);
-  const onChange = (event) => {
-    if (!isFileTypeInput) {
-      setInputValue(event.target.value);
-    }
-    onChangeProp == null ? void 0 : onChangeProp(event);
-  };
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!domRef.current) return;
-    setInputValue(domRef.current.value);
-  }, [domRef.current]);
+  const { className, size, radius, type = "text", ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    "input",
     {
-      className: styles.inputWrapper({
-        className: classNames == null ? void 0 : classNames.inputWrapper
+      type,
+      "data-slot": "input",
+      "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
+      className: (0, import_theme.input)({
+        className,
+        size,
+        radius
       }),
-      "data-disabled": (0, import_shared_utils.dataAttr)(props.disabled),
-      "data-readonly": (0, import_shared_utils.dataAttr)(props.readOnly),
-      "data-hidden": (0, import_shared_utils.dataAttr)(props.hidden),
-      "data-slot": "input-wrapper",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: styles.innerWrapper({
-            className: classNames == null ? void 0 : classNames.innerWrapper
-          }),
-          "data-slot": "inner-wrapper",
-          children: [
-            startContent,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type,
-                "data-slot": "input",
-                "data-has-start-content": (0, import_shared_utils.dataAttr)(!!startContent),
-                "data-has-end-content": (0, import_shared_utils.dataAttr)(!!endContent),
-                "data-filled": (0, import_shared_utils.dataAttr)(isFilled),
-                "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
-                className: styles.input({
-                  className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.input, className)
-                }),
-                value: inputValue,
-                onChange: (0, import_shared_utils.chain)(onChangeProp, onChange),
-                ref: (0, import_react_utils.mergeRefs)(domRef, refProp),
-                ...rest
-              }
-            ),
-            loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { size: "xs" }) : end
-          ]
-        }
-      )
+      ...rest
     }
   );
 };
 
-// src/password-input.tsx
+// src/input-wrapper.tsx
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function InputWrapper({ className, size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "input-wrapper",
+      className: (0, import_shared_utils2.cn)((0, import_theme2.input)({ size }), (0, import_theme2.inputWrapper)({ size }), className),
+      ...props
+    }
+  );
+}
+
+// src/password-input.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
   const {
     className,
     toggleLabel = "Toggle password visibility",
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
-  const styles = (0, import_theme2.passwordInput)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Input,
-    {
-      type: isVisible ? "text" : "password",
-      "data-slot": "input",
-      className,
-      endContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: toggleLabel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          "aria-label": toggleLabel,
-          type: "button",
-          onClick: () => setIsVisible(!isVisible),
-          className: styles.button(),
-          children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_icons2.EyeOffIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_icons2.EyeIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          )
-        }
-      ) }),
-      ...rest
-    }
-  );
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const styles = (0, import_theme3.passwordInput)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InputWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Input,
+      {
+        type: isVisible ? "text" : "password",
+        "data-slot": "input",
+        className,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tooltip.Tooltip, { content: toggleLabel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        "aria-label": toggleLabel,
+        type: "button",
+        onClick: () => setIsVisible(!isVisible),
+        className: styles.button(),
+        children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_icons.EyeOffIcon,
+          {
+            "aria-hidden": true,
+            focusable: false,
+            className: styles.icon()
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_icons.EyeIcon,
+          {
+            "aria-hidden": true,
+            focusable: false,
+            className: styles.icon()
+          }
+        )
+      }
+    ) })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {