@sparrowengg/integrations-templates-frontend 1.9.63 → 1.9.64

package/dist/cjs/node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var stitches_config = require('../stitches.config.js');
 var box = require('../box/box.js');
 var flex = require('../flex/flex.js');
 var formHelperText = require('../form-helper-text/form-helper-text.js');
 var formLabel = require('../form-label/form-label.js');
+var stitches_config = require('../stitches.config.js');
 var text = require('../text/text.js');
 var input = require('./input.js');
 
@@ -41,82 +41,119 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const StyledError = stitches_config.styled(formHelperText.FormHelperText, {
+stitches_config.styled(formHelperText.FormHelperText, {
   color: "$negative500 !important",
   marginTop: "$2"
 });
-const FormInput = React.forwardRef((_a, ref) => {
-  var _b = _a, {
-    label,
-    showCount,
-    value,
-    error,
-    defaultValue,
-    maxLength,
-    requiredIndicator,
-    id
-  } = _b, rest = __objRest(_b, [
-    "label",
-    "showCount",
-    "value",
-    "error",
-    "defaultValue",
-    "maxLength",
-    "requiredIndicator",
-    "id"
-  ]);
-  const mergedValue = value || defaultValue;
-  const inputId = id || `form-input-${React.useId()}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(box.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      flex.Flex,
-      __spreadProps(__spreadValues({
-        alignItems: "center",
-        justifyContent: "space-between"
-      }, (showCount || label) && { css: { marginBottom: "$2" } }), {
-        children: [
-          label ? /* @__PURE__ */ jsxRuntime.jsx(
+const FormInput = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      showCount,
+      value,
+      error,
+      info,
+      defaultValue,
+      maxLength,
+      requiredIndicator,
+      helperText,
+      id,
+      renderCounter
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "showCount",
+      "value",
+      "error",
+      "info",
+      "defaultValue",
+      "maxLength",
+      "requiredIndicator",
+      "helperText",
+      "id",
+      "renderCounter"
+    ]);
+    const mergedValue = value || defaultValue;
+    const inputId = id || `form-input-${React.useId()}`;
+    const labelSize = rest.size === "xl" ? "sm" : "xs";
+    const counterElement = React.useMemo(() => {
+      if (!showCount)
+        return null;
+      if (renderCounter) {
+        return renderCounter({
+          length: (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,
+          maxLength
+        });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        text.Text,
+        {
+          css: __spreadValues({
+            color: "$neutral700"
+          }, !label ? { marginLeft: "auto" } : {}),
+          id: `${inputId}-char-count`,
+          "data-testid": "form-input-char-count",
+          size: labelSize,
+          children: [
+            (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,
+            maxLength ? `/${maxLength}` : null
+          ]
+        }
+      );
+    }, [
+      showCount,
+      label,
+      mergedValue,
+      maxLength,
+      inputId,
+      labelSize,
+      renderCounter
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(box.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        flex.Flex,
+        __spreadProps(__spreadValues({
+          alignItems: "center",
+          justifyContent: "space-between"
+        }, (showCount || label) && { css: { marginBottom: "$2" } }), {
+          children: (label || counterElement) && /* @__PURE__ */ jsxRuntime.jsx(
             formLabel.FormLabel,
             {
               as: "label",
               htmlFor: inputId,
               requiredIndicator,
               id: `${inputId}-label`,
+              info,
+              rightAddon: counterElement,
+              size: labelSize,
               children: label
             }
-          ) : null,
-          showCount ? /* @__PURE__ */ jsxRuntime.jsxs(
-            text.Text,
-            {
-              css: __spreadValues({
-                color: "$neutral700"
-              }, !label ? { marginLeft: "auto" } : {}),
-              id: `${inputId}-char-count`,
-              children: [
-                (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,
-                maxLength ? `/${maxLength}` : null
-              ]
-            }
-          ) : null
-        ]
-      })
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      input.Input,
-      __spreadValues(__spreadProps(__spreadValues({
-        value,
-        defaultValue
-      }, maxLength && {
-        maxLength
-      }), {
-        ref,
-        id: inputId
-      }), rest)
-    ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(StyledError, { size: "xs", children: error }) : null
-  ] });
-});
+          )
+        })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        __spreadValues(__spreadProps(__spreadValues({
+          value,
+          defaultValue
+        }, maxLength && {
+          maxLength
+        }), {
+          ref,
+          id: inputId
+        }), rest)
+      ),
+      error || helperText ? /* @__PURE__ */ jsxRuntime.jsx(
+        box.Box,
+        {
+          css: {
+            marginTop: ["lg", "xl"].includes(rest.size) ? "$2" : "$1"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { size: labelSize, color: error ? "error" : "info", children: error || helperText })
+        }
+      ) : null
+    ] });
+  }
+);
 
 exports.FormInput = FormInput;
-exports.StyledError = StyledError;
 //# sourceMappingURL=form-input.js.map

package/dist/cjs/node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-input.js","sources":["../../../../../../../../../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef, useId } from 'react';\nimport { styled } from '../stitches.config.js';\nimport { Box } from '../box/box.js';\nimport { Flex } from '../flex/flex.js';\nimport { FormHelperText } from '../form-helper-text/form-helper-text.js';\nimport { FormLabel } from '../form-label/form-label.js';\nimport { Text } from '../text/text.js';\nimport { Input } from './input.js';\n\nvar __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\nvar __objRest = (source, exclude) => {\n  var target = {};\n  for (var prop in source)\n    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)\n      target[prop] = source[prop];\n  if (source != null && __getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(source)) {\n      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))\n        target[prop] = source[prop];\n    }\n  return target;\n};\nconst StyledError = styled(FormHelperText, {\n  color: \"$negative500 !important\",\n  marginTop: \"$2\"\n});\nconst FormInput = forwardRef((_a, ref) => {\n  var _b = _a, {\n    label,\n    showCount,\n    value,\n    error,\n    defaultValue,\n    maxLength,\n    requiredIndicator,\n    id\n  } = _b, rest = __objRest(_b, [\n    \"label\",\n    \"showCount\",\n    \"value\",\n    \"error\",\n    \"defaultValue\",\n    \"maxLength\",\n    \"requiredIndicator\",\n    \"id\"\n  ]);\n  const mergedValue = value || defaultValue;\n  const inputId = id || `form-input-${useId()}`;\n  return /* @__PURE__ */ jsxs(Box, { children: [\n    /* @__PURE__ */ jsxs(\n      Flex,\n      __spreadProps(__spreadValues({\n        alignItems: \"center\",\n        justifyContent: \"space-between\"\n      }, (showCount || label) && { css: { marginBottom: \"$2\" } }), {\n        children: [\n          label ? /* @__PURE__ */ jsx(\n            FormLabel,\n            {\n              as: \"label\",\n              htmlFor: inputId,\n              requiredIndicator,\n              id: `${inputId}-label`,\n              children: label\n            }\n          ) : null,\n          showCount ? /* @__PURE__ */ jsxs(\n            Text,\n            {\n              css: __spreadValues({\n                color: \"$neutral700\"\n              }, !label ? { marginLeft: \"auto\" } : {}),\n              id: `${inputId}-char-count`,\n              children: [\n                (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,\n                maxLength ? `/${maxLength}` : null\n              ]\n            }\n          ) : null\n        ]\n      })\n    ),\n    /* @__PURE__ */ jsx(\n      Input,\n      __spreadValues(__spreadProps(__spreadValues({\n        value,\n        defaultValue\n      }, maxLength && {\n        maxLength\n      }), {\n        ref,\n        id: inputId\n      }), rest)\n    ),\n    error ? /* @__PURE__ */ jsx(StyledError, { size: \"xs\", children: error }) : null\n  ] });\n});\n\nexport { FormInput, StyledError };\n//# sourceMappingURL=form-input.js.map\n"],"names":["styled","FormHelperText","forwardRef","useId","jsxs","Box","Flex","jsx","FormLabel","Text","Input"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"form-input.js","sources":["../../../../../../../../../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef, useId, useMemo } from 'react';\nimport { Box } from '../box/box.js';\nimport { Flex } from '../flex/flex.js';\nimport { FormHelperText } from '../form-helper-text/form-helper-text.js';\nimport { FormLabel } from '../form-label/form-label.js';\nimport { styled } from '../stitches.config.js';\nimport { Text } from '../text/text.js';\nimport { Input } from './input.js';\n\nvar __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\nvar __objRest = (source, exclude) => {\n  var target = {};\n  for (var prop in source)\n    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)\n      target[prop] = source[prop];\n  if (source != null && __getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(source)) {\n      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))\n        target[prop] = source[prop];\n    }\n  return target;\n};\nconst StyledError = styled(FormHelperText, {\n  color: \"$negative500 !important\",\n  marginTop: \"$2\"\n});\nconst FormInput = forwardRef(\n  (_a, ref) => {\n    var _b = _a, {\n      label,\n      showCount,\n      value,\n      error,\n      info,\n      defaultValue,\n      maxLength,\n      requiredIndicator,\n      helperText,\n      id,\n      renderCounter\n    } = _b, rest = __objRest(_b, [\n      \"label\",\n      \"showCount\",\n      \"value\",\n      \"error\",\n      \"info\",\n      \"defaultValue\",\n      \"maxLength\",\n      \"requiredIndicator\",\n      \"helperText\",\n      \"id\",\n      \"renderCounter\"\n    ]);\n    const mergedValue = value || defaultValue;\n    const inputId = id || `form-input-${useId()}`;\n    const labelSize = rest.size === \"xl\" ? \"sm\" : \"xs\";\n    const counterElement = useMemo(() => {\n      if (!showCount)\n        return null;\n      if (renderCounter) {\n        return renderCounter({\n          length: (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,\n          maxLength\n        });\n      }\n      return /* @__PURE__ */ jsxs(\n        Text,\n        {\n          css: __spreadValues({\n            color: \"$neutral700\"\n          }, !label ? { marginLeft: \"auto\" } : {}),\n          id: `${inputId}-char-count`,\n          \"data-testid\": \"form-input-char-count\",\n          size: labelSize,\n          children: [\n            (mergedValue == null ? void 0 : mergedValue.toString().length) || 0,\n            maxLength ? `/${maxLength}` : null\n          ]\n        }\n      );\n    }, [\n      showCount,\n      label,\n      mergedValue,\n      maxLength,\n      inputId,\n      labelSize,\n      renderCounter\n    ]);\n    return /* @__PURE__ */ jsxs(Box, { children: [\n      /* @__PURE__ */ jsx(\n        Flex,\n        __spreadProps(__spreadValues({\n          alignItems: \"center\",\n          justifyContent: \"space-between\"\n        }, (showCount || label) && { css: { marginBottom: \"$2\" } }), {\n          children: (label || counterElement) && /* @__PURE__ */ jsx(\n            FormLabel,\n            {\n              as: \"label\",\n              htmlFor: inputId,\n              requiredIndicator,\n              id: `${inputId}-label`,\n              info,\n              rightAddon: counterElement,\n              size: labelSize,\n              children: label\n            }\n          )\n        })\n      ),\n      /* @__PURE__ */ jsx(\n        Input,\n        __spreadValues(__spreadProps(__spreadValues({\n          value,\n          defaultValue\n        }, maxLength && {\n          maxLength\n        }), {\n          ref,\n          id: inputId\n        }), rest)\n      ),\n      error || helperText ? /* @__PURE__ */ jsx(\n        Box,\n        {\n          css: {\n            marginTop: [\"lg\", \"xl\"].includes(rest.size) ? \"$2\" : \"$1\"\n          },\n          children: /* @__PURE__ */ jsx(FormHelperText, { size: labelSize, color: error ? \"error\" : \"info\", children: error || helperText })\n        }\n      ) : null\n    ] });\n  }\n);\n\nexport { FormInput, StyledError };\n//# sourceMappingURL=form-input.js.map\n"],"names":["styled","FormHelperText","forwardRef","useId","useMemo","jsxs","Text","Box","jsx","Flex","FormLabel","Input"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/cjs/node_modules/@sparrowengg/twigs-react/dist/es/input/input.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var prefixClassName = require('../utils/prefix-class-name.js');
+var clsx = require('../packages/react-components/node_modules/clsx/dist/clsx.js');
 var React = require('react');
 var box = require('../box/box.js');
 var stitches_config = require('../stitches.config.js');
@@ -36,6 +38,12 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const CLASSNAMES = {
+  inputContainer: prefixClassName.prefixClassName("input-container"),
+  input: prefixClassName.prefixClassName("input"),
+  inputWithLeftIcon: prefixClassName.prefixClassName("input--with-left-icon"),
+  inputWithRightIcon: prefixClassName.prefixClassName("input--with-right-icon")
+};
 const StyledInput = stitches_config.styled("input", {
   width: "100%",
   color: "$neutral900",
@@ -50,21 +58,22 @@ const StyledInput = stitches_config.styled("input", {
     background: "$white900",
     borderWidth: "$xs",
     borderStyle: "solid",
-    borderColorOpacity: ["$secondary500", 0.4]
+    borderColor: "$neutral400"
   },
   "&:focus, &:active:not(:disabled)": {
-    $$shadowColor: "$colors$primary300",
+    $$shadowColor: "$colors$primary200",
     outline: "none",
     background: "$white900",
     boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
   },
   "&:disabled": {
     color: "$neutral700",
-    backgroundColorOpacity: ["$neutral500", 0.06],
+    backgroundColorOpacity: ["$secondary500", 0.06],
     cursor: "not-allowed",
     borderWidth: "$xs",
     borderStyle: "solid",
-    borderColorOpacity: ["$neutral500", 0.25],
+    borderColor: "$neutral200",
+    opacity: 0.6,
     "&:hover": {
       boxShadow: "none"
     }
@@ -73,27 +82,51 @@ const StyledInput = stitches_config.styled("input", {
     size: {
       xl: {
         height: "$12",
-        borderRadius: "$lg",
+        borderRadius: "$xl",
         padding: "$6",
-        fontSize: "$md"
+        fontSize: "$md",
+        [`&.${CLASSNAMES.inputWithLeftIcon}`]: {
+          paddingInlineStart: "$18"
+        },
+        [`&.${CLASSNAMES.inputWithRightIcon}`]: {
+          paddingInlineEnd: "$18"
+        }
       },
       lg: {
         height: "$10",
         borderRadius: "$lg",
         padding: "$5 $6",
-        fontSize: "$sm"
+        fontSize: "$sm",
+        [`&.${CLASSNAMES.inputWithLeftIcon}`]: {
+          paddingInlineStart: "$18"
+        },
+        [`&.${CLASSNAMES.inputWithRightIcon}`]: {
+          paddingInlineEnd: "$18"
+        }
       },
       md: {
         height: "$8",
-        borderRadius: "$md",
+        borderRadius: "$lg",
         padding: "$3 $4",
-        fontSize: "$sm"
+        fontSize: "$sm",
+        [`&.${CLASSNAMES.inputWithLeftIcon}`]: {
+          paddingInlineStart: "$14"
+        },
+        [`&.${CLASSNAMES.inputWithRightIcon}`]: {
+          paddingInlineEnd: "$14"
+        }
       },
       sm: {
         height: "$6",
-        borderRadius: "$md",
-        padding: "$3 $4",
-        fontSize: "$xs"
+        borderRadius: "$sm",
+        padding: "$2 $4",
+        fontSize: "$xs",
+        [`&.${CLASSNAMES.inputWithLeftIcon}`]: {
+          paddingInlineStart: "$13"
+        },
+        [`&.${CLASSNAMES.inputWithRightIcon}`]: {
+          paddingInlineEnd: "$12"
+        }
       }
     },
     variant: {
@@ -101,15 +134,15 @@ const StyledInput = stitches_config.styled("input", {
         background: "$white900",
         borderWidth: "$xs",
         borderStyle: "solid",
-        borderColor: "$neutral200",
+        borderColorOpacity: ["$black900", 0.15],
         "&:hover:not(:disabled), &:focus, &:active:not(:disabled)": {
           borderWidth: "$xs",
           borderStyle: "solid",
-          borderColor: "$neutral300"
+          borderColor: "$neutral400"
         }
       },
       filled: {
-        background: "$black50"
+        backgroundColorOpacity: ["$secondary500", 0.06]
       }
     }
   },
@@ -143,19 +176,19 @@ const IconContainer = stitches_config.styled(box.Box, {
   variants: {
     size: {
       xl: {
-        width: "$6",
-        height: "$6",
+        width: "$5",
+        height: "$5",
         "& svg": {
-          width: 18,
-          height: 18
+          width: "100%",
+          height: "100%"
         }
       },
       lg: {
-        width: "$6",
-        height: "$6",
+        width: "$5",
+        height: "$5",
         "& svg": {
-          width: 18,
-          height: 18
+          width: "100%",
+          height: "100%"
         }
       },
       md: {
@@ -167,15 +200,77 @@ const IconContainer = stitches_config.styled(box.Box, {
         }
       },
       sm: {
-        width: "$3",
-        height: "$3",
+        width: "14px",
+        height: "14px",
         "& svg": {
-          width: "$3",
-          height: "$3"
+          width: "14px",
+          height: "14px"
         }
       }
+    },
+    position: {
+      left: {},
+      right: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      position: "left",
+      size: "sm",
+      css: {
+        left: "$4"
+      }
+    },
+    {
+      position: "left",
+      size: "md",
+      css: {
+        left: "$4"
+      }
+    },
+    {
+      position: "left",
+      size: "lg",
+      css: {
+        left: "$6"
+      }
+    },
+    {
+      position: "left",
+      size: "xl",
+      css: {
+        left: "$6"
+      }
+    },
+    {
+      position: "right",
+      size: "sm",
+      css: {
+        right: "$4"
+      }
+    },
+    {
+      position: "right",
+      size: "md",
+      css: {
+        right: "$4"
+      }
+    },
+    {
+      position: "right",
+      size: "lg",
+      css: {
+        right: "$6"
+      }
+    },
+    {
+      position: "right",
+      size: "xl",
+      css: {
+        right: "$6"
+      }
+    }
+  ]
 });
 const AddonContainer = stitches_config.styled(box.Box, {
   position: "absolute",
@@ -193,95 +288,89 @@ const AddonContainer = stitches_config.styled(box.Box, {
   }
 });
 const errorBorderStyles = {
-  boxShadow: "$colors$negative500 0px 1.5px 0px 0px",
-  borderBottom: "0",
-  "&:hover": {
-    borderBottom: "0"
+  boxShadow: "$colors$negative500 0px 1px 0px 0px",
+  borderBottomWidth: "0",
+  "&:not(:disabled):hover": {
+    borderBottomWidth: "0"
   },
   "&:focus,&:active": {
-    $$shadowColor: "$colors$primary300",
+    $$shadowColor: "$colors$primary200",
     borderBottom: "0",
-    boxShadow: "$colors$negative500 0px 1.5px 0px 0px,rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
+    boxShadow: "$colors$negative500 0px 1px 0px 0px,rgb(255, 255, 255) 0px 0px 0px 2px, $$shadowColor 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
   }
 };
-const Input = React.forwardRef((_a, ref) => {
-  var _b = _a, {
-    size = "md",
-    leftIcon,
-    rightIcon,
-    css,
-    rightElement,
-    leftElement,
-    errorBorder = false
-  } = _b, rest = __objRest(_b, [
-    "size",
-    "leftIcon",
-    "rightIcon",
-    "css",
-    "rightElement",
-    "leftElement",
-    "errorBorder"
-  ]);
-  const inputPaddingValue = getInputPadding(size);
-  if (leftIcon || rightIcon || rightElement || leftElement) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      box.Box,
-      {
-        css: __spreadValues({
-          display: "flex",
-          alignItems: "center",
-          position: "relative"
-        }, css),
-        children: [
-          leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            IconContainer,
-            {
-              size,
-              css: {
-                left: size === "md" ? "$4" : "$6"
-              },
-              children: React.cloneElement(leftIcon)
-            }
-          ),
-          leftElement && /* @__PURE__ */ jsxRuntime.jsx(
-            AddonContainer,
-            {
-              position: "left",
-              children: React.cloneElement(leftElement)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledInput,
-            __spreadValues({
-              ref,
-              size,
-              "data-testid": "input",
-              css: __spreadValues(__spreadValues(__spreadValues({}, leftIcon && { paddingInlineStart: inputPaddingValue }), rightIcon && { paddingInlineEnd: inputPaddingValue }), errorBorder && __spreadValues({}, errorBorderStyles))
-            }, rest)
-          ),
-          rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            IconContainer,
-            {
-              size,
-              css: {
-                right: size === "md" ? "$4" : "$6"
-              },
-              children: React.cloneElement(rightIcon)
-            }
-          ),
-          rightElement && /* @__PURE__ */ jsxRuntime.jsx(
-            AddonContainer,
-            {
-              position: "right",
-              children: React.cloneElement(rightElement)
-            }
-          )
-        ]
-      }
+const Input = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      leftIcon,
+      rightIcon,
+      css,
+      rightElement,
+      leftElement,
+      errorBorder = false
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "leftIcon",
+      "rightIcon",
+      "css",
+      "rightElement",
+      "leftElement",
+      "errorBorder"
+    ]);
+    const inputPaddingValue = getInputPadding(size);
+    if (leftIcon || rightIcon || rightElement || leftElement) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        box.Box,
+        {
+          css: __spreadValues({
+            display: "flex",
+            alignItems: "center",
+            position: "relative"
+          }, css),
+          className: CLASSNAMES.inputContainer,
+          children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { size, position: "left", children: React.cloneElement(leftIcon) }),
+            leftElement && /* @__PURE__ */ jsxRuntime.jsx(AddonContainer, { position: "left", children: React.cloneElement(leftElement) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StyledInput,
+              __spreadProps(__spreadValues({
+                ref,
+                size,
+                "data-testid": "input",
+                css: __spreadValues(__spreadValues(__spreadValues({}, leftIcon && { paddingInlineStart: inputPaddingValue }), rightIcon && { paddingInlineEnd: inputPaddingValue }), errorBorder && __spreadValues({}, errorBorderStyles))
+              }, rest), {
+                className: clsx.clsx(CLASSNAMES.input, rest.className, {
+                  [CLASSNAMES.inputWithLeftIcon]: !!leftIcon,
+                  [CLASSNAMES.inputWithRightIcon]: !!rightIcon
+                })
+              })
+            ),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              IconContainer,
+              {
+                size,
+                position: "right",
+                children: React.cloneElement(rightIcon)
+              }
+            ),
+            rightElement && /* @__PURE__ */ jsxRuntime.jsx(AddonContainer, { position: "right", children: React.cloneElement(rightElement) })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledInput,
+      __spreadProps(__spreadValues({
+        ref,
+        size,
+        "data-testid": "input"
+      }, rest), {
+        css: __spreadValues(__spreadValues({}, css), errorBorder && __spreadValues({}, errorBorderStyles))
+      })
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, __spreadProps(__spreadValues({ ref, size, "data-testid": "input" }, rest), { css: __spreadValues(__spreadValues({}, css), errorBorder && __spreadValues({}, errorBorderStyles)) }));
-});
+);
 
 exports.Input = Input;
 exports.errorBorderStyles = errorBorderStyles;