@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/esm/components/icon/Icon.styles.js

@@ -1,78 +1,65 @@
 import styled, { css } from 'styled-components';
 export const StyledIconWrapper = styled.span`
     align-items: center;
-    cursor: ${_ref => {
-  let {
-    $isDisabled,
-    $isOnClick
-  } = _ref;
-  return $isOnClick && !$isDisabled ? 'pointer' : 'inherit';
-}};
+    cursor: ${({
+  $isDisabled,
+  $isOnClick
+}) => $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};
     display: inline-flex;
-    min-height: ${_ref2 => {
-  let {
-    $size
-  } = _ref2;
-  return `${$size}px`;
-}};
+    min-height: ${({
+  $size
+}) => `${$size}px`};
     justify-content: center;
-    opacity: ${_ref3 => {
-  let {
-    $isDisabled
-  } = _ref3;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
     position: relative;
     transition: opacity 0.3s ease;
-    min-width: ${_ref4 => {
-  let {
-    $size
-  } = _ref4;
-  return `${$size}px`;
-}};
+    min-width: ${({
+  $size
+}) => `${$size}px`};
 
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {
         height: fit-content;
         width: fit-content;
-        line-height: ${_ref5 => {
-  let {
-    $size
-  } = _ref5;
-  return $size;
-}}px;
+        line-height: ${({
+  $size
+}) => $size}px;
     }
 `;
 export const StyledIcon = styled.i`
-    color: ${_ref6 => {
-  let {
-    $color,
-    theme
-  } = _ref6;
-  return $color || theme.headline;
-}};
-    display: ${_ref7 => {
-  let {
-    $isStacked
-  } = _ref7;
-  return $isStacked ? undefined : 'inline-flex';
-}};
-    font-size: ${_ref8 => {
-  let {
-    $fontSize
-  } = _ref8;
-  return `${$fontSize}px`;
-}};
+    color: ${({
+  $color,
+  theme
+}) => $color || theme.iconColor || theme.text};
+    display: ${({
+  $isStacked
+}) => $isStacked ? undefined : 'inline-flex'};
+    font-size: ${({
+  $fontSize
+}) => `${$fontSize}px`};
 
-    ${_ref9 => {
-  let {
-    $fontSize,
-    $size
-  } = _ref9;
-  return $fontSize !== $size && css`
+    ${({
+  $fontSize,
+  $size
+}) => $fontSize !== $size && css`
             top: 50%;
             transform: translateY(-50%);
-        `;
-}}
+        `}
+`;
+export const StyledUnicodeIcon = styled.i`
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: ${({
+  theme
+}) => theme.iconColor || theme.headline};
+
+    &:before {
+        content: ${({
+  $icon
+}) => `"\\${$icon}"`};
+    }
 `;
 //# sourceMappingURL=Icon.styles.js.map

package/lib/esm/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","_ref","$isDisabled","$isOnClick","_ref2","$size","_ref3","_ref4","_ref5","StyledIcon","i","_ref6","$color","theme","headline","_ref7","$isStacked","undefined","_ref8","$fontSize","_ref9"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.headline};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAAA,OAClCE,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA;AAC1D;AACA,kBAAkBE,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,KAAK,IAAI;AAAA;AAC7C;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAY,CAAC,GAAAI,KAAA;EAAA,OAAMJ,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,iBAAiBK,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OAAK,GAAGF,KAAK,IAAI;AAAA;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuBG,KAAA;EAAA,IAAC;IAAEH;EAAM,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK;AAAA;AAC3C;AACA,CAAC;AASD,OAAO,MAAMI,UAAU,GAAGZ,MAAM,CAACa,CAAkB;AACnD,aAAaC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC;EAAuB,CAAC,GAAAF,KAAA;EAAA,OAAKC,MAAM,IAAIC,KAAK,CAACC,QAAQ;AAAA;AAC7E,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAGC,SAAS,GAAG,aAAa;AAAA,CAAC;AAC3E,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAK,GAAGC,SAAS,IAAI;AAAA;AACpD;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,SAAS;IAAEd;EAAM,CAAC,GAAAe,KAAA;EAAA,OACnBD,SAAS,KAAKd,KAAK,IACnBP,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAID,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACQ,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/input/Input.js

@@ -1,51 +1,56 @@
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
-import { useElementSize } from '../../hooks/useElementSize';
+import { useElementSize } from '../../hooks/element';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
 import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
+import { ContentCardType } from '../../types/contentCard';
+import { useCursorRepaint } from '../../hooks/resize';
+import Tooltip from '../tooltip/Tooltip';
 export let InputSize = /*#__PURE__*/function (InputSize) {
   InputSize["Small"] = "small";
   InputSize["Medium"] = "medium";
   return InputSize;
 }({});
-const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    leftElement,
-    inputMode,
-    isDisabled,
-    onBlur,
-    onChange,
-    onFocus,
-    onKeyDown,
-    onPaste,
-    placeholder,
-    rightElement,
-    shouldShowOnlyBottomBorder,
-    shouldRemainPlaceholder = false,
-    shouldShowClearIcon = false,
-    shouldShowCenteredContent = false,
-    size = InputSize.Medium,
-    type = 'text',
-    value,
-    shouldUseAutoFocus = false,
-    isInvalid = false,
-    shouldPreventPlaceholderAnimation = false,
-    id
-  } = _ref;
+const Input = /*#__PURE__*/forwardRef(({
+  leftElement,
+  inputMode,
+  isDisabled,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onPaste,
+  placeholder,
+  rightElement,
+  shouldShowOnlyBottomBorder,
+  shouldRemainPlaceholder = false,
+  shouldShowClearIcon = false,
+  shouldShowCenteredContent = false,
+  size = InputSize.Medium,
+  type = 'text',
+  value,
+  disabledHint,
+  shouldUseAutoFocus = false,
+  isInvalid = false,
+  shouldPreventPlaceholderAnimation = false,
+  id,
+  shouldShowTransparentBackground = false,
+  autoComplete
+}, ref) => {
   const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');
   const [placeholderWidth, setPlaceholderWidth] = useState(0);
   const areaProvider = useContext(AreaContext);
   const theme = useTheme();
   const inputRef = useRef(null);
   const placeholderRef = useRef(null);
+  useCursorRepaint(inputRef);
   const placeholderSize = useElementSize(placeholderRef);
   useEffect(() => {
     if (placeholderSize && shouldShowOnlyBottomBorder) {
       setPlaceholderWidth(placeholderSize.width + 5);
     }
   }, [placeholderSize, shouldShowOnlyBottomBorder]);
-  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const handleClearIconClick = useCallback(() => {
     if (inputRef.current) {
       inputRef.current.value = '';
@@ -67,13 +72,24 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [onChange]);
   useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus()
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur()
   }), []);
   useEffect(() => {
     if (typeof value === 'string') {
       setHasValue(value !== '');
     }
   }, [value]);
+  let backgroundColor;
+  let color;
+  if (shouldShowTransparentBackground) {
+    backgroundColor = 'transparent';
+  } else if (areaProvider.contentCardType && [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(areaProvider.contentCardType)) {
+    backgroundColor = 'white';
+    color = '#555';
+  } else if (areaProvider.shouldChangeColor) {
+    backgroundColor = theme['000'];
+  }
   const labelPosition = useMemo(() => {
     if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {
       return shouldShowOnlyBottomBorder ? {
@@ -88,11 +104,12 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       left: -1
     };
   }, [hasValue, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
-  return /*#__PURE__*/React.createElement(StyledInput, {
+  const inputElement = useMemo(() => /*#__PURE__*/React.createElement(StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
-    $shouldChangeColor: shouldChangeColor,
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
+    $backgroundColor: backgroundColor,
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -100,6 +117,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/React.createElement(StyledInputField, {
+    $color: color,
     $placeholderWidth: placeholderWidth,
     id: id,
     disabled: isDisabled,
@@ -117,6 +135,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     value: value,
     autoFocus: shouldUseAutoFocus,
     inputMode: inputMode,
+    autoComplete: autoComplete,
     $isInvalid: isInvalid,
     $shouldShowCenteredContent: shouldShowCenteredContent
   }), /*#__PURE__*/React.createElement(StyledMotionInputLabelWrapper, {
@@ -151,7 +170,16 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement));
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
+  if (isDisabled && typeof disabledHint === 'string') {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      item: {
+        text: disabledHint
+      },
+      shouldUseFullWidth: true
+    }, inputElement);
+  }
+  return inputElement;
 });
 Input.displayName = 'Input';
 export default Input;

package/lib/esm/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            onPaste={onPaste}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    type ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n    focus: VoidFunction;\n    blur: VoidFunction;\n}\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\ntype AutoComplete =\n    | 'on'\n    | 'off'\n    | 'name'\n    | 'username'\n    | 'email'\n    | 'new-password'\n    | 'current-password'\n    | 'tel'\n    | 'url'\n    | 'street-address'\n    | 'postal-code'\n    | 'country'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * If set and the input is disabled, the input will display a tooltip with this message.\n     */\n    disabledHint?: string;\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Defines the auto Complete of the input\n     */\n    autoComplete?: AutoComplete;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for an input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            disabledHint,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n            shouldShowTransparentBackground = false,\n            autoComplete,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        useCursorRepaint(inputRef);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        let backgroundColor: CSSProperties['backgroundColor'] | undefined;\n        let color: CSSProperties['color'] | undefined;\n\n        if (shouldShowTransparentBackground) {\n            backgroundColor = 'transparent';\n        } else if (\n            areaProvider.contentCardType &&\n            [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n                areaProvider.contentCardType,\n            )\n        ) {\n            backgroundColor = 'white';\n            color = '#555';\n        } else if (areaProvider.shouldChangeColor) {\n            backgroundColor = theme['000'];\n        }\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        const inputElement = useMemo(\n            () => (\n                <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                    <StyledInputContentWrapper\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $backgroundColor={backgroundColor}\n                        $isInvalid={isInvalid}\n                        $shouldRoundRightCorners={shouldShowBorder}\n                        $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        $size={size}\n                    >\n                        {leftElement && (\n                            <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n                        )}\n                        <StyledInputContent\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                        >\n                            <StyledInputField\n                                $color={color}\n                                $placeholderWidth={placeholderWidth}\n                                id={id}\n                                disabled={isDisabled}\n                                onBlur={onBlur}\n                                onChange={handleInputFieldChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n                                }}\n                                onPaste={onPaste}\n                                ref={inputRef}\n                                type={type}\n                                value={value}\n                                autoFocus={shouldUseAutoFocus}\n                                inputMode={inputMode}\n                                autoComplete={autoComplete}\n                                $isInvalid={isInvalid}\n                                $shouldShowCenteredContent={shouldShowCenteredContent}\n                            />\n                            <StyledMotionInputLabelWrapper\n                                animate={\n                                    shouldPreventPlaceholderAnimation\n                                        ? {\n                                              opacity: hasValue ? 0 : 1,\n                                          }\n                                        : {\n                                              fontSize:\n                                                  hasValue &&\n                                                  !shouldShowOnlyBottomBorder &&\n                                                  !shouldRemainPlaceholder\n                                                      ? '9px'\n                                                      : `${Number(theme.fontSize)}px`,\n                                          }\n                                }\n                                initial={false}\n                                layout\n                                ref={placeholderRef}\n                                style={{ ...labelPosition }}\n                                transition={{\n                                    type: 'tween',\n                                    duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                                }}\n                            >\n                                <StyledInputLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledInputLabel>\n                            </StyledMotionInputLabelWrapper>\n                        </StyledInputContent>\n                        {shouldShowClearIcon && (\n                            <StyledMotionInputClearIcon\n                                $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                                $size={size}\n                                animate={{ opacity: hasValue ? 1 : 0 }}\n                                initial={false}\n                                onClick={handleClearIconClick}\n                                transition={{ type: 'tween' }}\n                            >\n                                <Icon\n                                    icons={['fa fa-times']}\n                                    color={isInvalid ? theme.wrong : undefined}\n                                />\n                            </StyledMotionInputClearIcon>\n                        )}\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledInputContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledInput>\n            ),\n            [\n                autoComplete,\n                backgroundColor,\n                color,\n                handleClearIconClick,\n                handleInputFieldChange,\n                hasValue,\n                id,\n                inputMode,\n                isDisabled,\n                isInvalid,\n                labelPosition,\n                leftElement,\n                onBlur,\n                onFocus,\n                onKeyDown,\n                onPaste,\n                placeholder,\n                placeholderWidth,\n                rightElement,\n                shouldPreventPlaceholderAnimation,\n                shouldRemainPlaceholder,\n                shouldShowBorder,\n                shouldShowCenteredContent,\n                shouldShowClearIcon,\n                shouldShowOnlyBottomBorder,\n                shouldShowTransparentBackground,\n                shouldUseAutoFocus,\n                size,\n                theme.fontSize,\n                theme.wrong,\n                type,\n                value,\n            ],\n        );\n\n        if (isDisabled && typeof disabledHint === 'string') {\n            return (\n                <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n                    {inputElement}\n                </Tooltip>\n            );\n        }\n\n        return inputElement;\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,UAAU,EAKVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,WAAW,EACXC,kBAAkB,EAClBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QAC1B,gBAAgB;AACvB,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,OAAOC,OAAO,MAAM,oBAAoB;AAiCxC,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAwGrB,MAAMC,KAAK,gBAAGzB,UAAU,CACpB,CACI;EACI0B,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAGhB,SAAS,CAACiB,MAAM;EACvBC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,YAAY;EACZC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC,iCAAiC,GAAG,KAAK;EACzCC,EAAE;EACFC,+BAA+B,GAAG,KAAK;EACvCC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG9C,QAAQ,CAAC,OAAOoC,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACW,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGhD,QAAQ,CAAC,CAAC,CAAC;EAE3D,MAAMiD,YAAY,GAAGtD,UAAU,CAACQ,WAAW,CAAC;EAE5C,MAAM+C,KAAK,GAAGjD,QAAQ,CAAC,CAAU;EAEjC,MAAMkD,QAAQ,GAAGpD,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMqD,cAAc,GAAGrD,MAAM,CAAmB,IAAI,CAAC;EAErDgB,gBAAgB,CAACoC,QAAQ,CAAC;EAE1B,MAAME,eAAe,GAAGnD,cAAc,CAACkD,cAAc,CAAC;EAEtDxD,SAAS,CAAC,MAAM;IACZ,IAAIyD,eAAe,IAAIxB,0BAA0B,EAAE;MAC/CmB,mBAAmB,CAACK,eAAe,CAACC,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACD,eAAe,EAAExB,0BAA0B,CAAC,CAAC;EAEjD,MAAM0B,oBAAoB,GAAG7D,WAAW,CAAC,MAAM;IAC3C,IAAIyD,QAAQ,CAACK,OAAO,EAAE;MAClBL,QAAQ,CAACK,OAAO,CAACpB,KAAK,GAAG,EAAE;MAE3BU,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOvB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAEkC,MAAM,EAAEN,QAAQ,CAACK;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAACjC,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAMmC,gBAAgB,GAAG9B,YAAY,EAAE+B,KAAK,EAAEC,KAAK,EAAEC,eAAe,KAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAGrE,WAAW,CACrCsE,KAAoC,IAAK;IACtClB,WAAW,CAACkB,KAAK,CAACP,MAAM,CAACrB,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACyC,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACzC,QAAQ,CACb,CAAC;EAED1B,mBAAmB,CACf+C,GAAG,EACH,OAAO;IACHqB,KAAK,EAAEA,CAAA,KAAMd,QAAQ,CAACK,OAAO,EAAES,KAAK,CAAC,CAAC;IACtCC,IAAI,EAAEA,CAAA,KAAMf,QAAQ,CAACK,OAAO,EAAEU,IAAI,CAAC;EACvC,CAAC,CAAC,EACF,EACJ,CAAC;EAEDtE,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOwC,KAAK,KAAK,QAAQ,EAAE;MAC3BU,WAAW,CAACV,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAIyB,eAA6D;EACjE,IAAIM,KAAyC;EAE7C,IAAIzB,+BAA+B,EAAE;IACjCmB,eAAe,GAAG,aAAa;EACnC,CAAC,MAAM,IACHZ,YAAY,CAACmB,eAAe,IAC5B,CAACtD,eAAe,CAACuD,KAAK,EAAEvD,eAAe,CAACwD,OAAO,EAAExD,eAAe,CAACyD,OAAO,CAAC,CAACC,QAAQ,CAC9EvB,YAAY,CAACmB,eACjB,CAAC,EACH;IACEP,eAAe,GAAG,OAAO;IACzBM,KAAK,GAAG,MAAM;EAClB,CAAC,MAAM,IAAIlB,YAAY,CAACwB,iBAAiB,EAAE;IACvCZ,eAAe,GAAGX,KAAK,CAAC,KAAK,CAAC;EAClC;EAEA,MAAMwB,aAAa,GAAG5E,OAAO,CAAC,MAAM;IAChC,IAAI+C,QAAQ,IAAI,CAACf,uBAAuB,IAAI,CAACU,iCAAiC,EAAE;MAC5E,OAAOX,0BAA0B,GAC3B;QAAE8C,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE5C,IAAI,KAAKhB,SAAS,CAAC6D,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;QAAEH,KAAK,EAAE,CAAC;MAAE,CAAC;IACpE;IAEA,OAAO;MAAEI,IAAI,EAAE,CAAC;IAAE,CAAC;EACvB,CAAC,EAAE,CACClC,QAAQ,EACRL,iCAAiC,EACjCV,uBAAuB,EACvBD,0BAA0B,EAC1BI,IAAI,CACP,CAAC;EAEF,MAAM+C,YAAY,GAAGlF,OAAO,CACxB,mBACIN,KAAA,CAAAyF,aAAA,CAAC5E,WAAW;IAAC6E,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE9D;EAAW,gBAC/D7B,KAAA,CAAAyF,aAAA,CAAC1E,yBAAyB;IACtB6E,gCAAgC,EAAE1C,+BAAgC;IAClE2C,gBAAgB,EAAExB,eAAgB;IAClCyB,UAAU,EAAE/C,SAAU;IACtBgD,wBAAwB,EAAE7B,gBAAiB;IAC3C8B,2BAA2B,EAAE3D,0BAA2B;IACxD4D,KAAK,EAAExD;EAAK,GAEXd,WAAW,iBACR3B,KAAA,CAAAyF,aAAA,CAACxE,sBAAsB,QAAEU,WAAoC,CAChE,eACD3B,KAAA,CAAAyF,aAAA,CAAC3E,kBAAkB;IACfkF,2BAA2B,EAAE3D;EAA2B,gBAExDrC,KAAA,CAAAyF,aAAA,CAACzE,gBAAgB;IACbkF,MAAM,EAAEvB,KAAM;IACdwB,iBAAiB,EAAE5C,gBAAiB;IACpCN,EAAE,EAAEA,EAAG;IACPmD,QAAQ,EAAEvE,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEwC,sBAAuB;IACjCvC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBoE,OAAO,EAAG7B,KAAK,IAAK;MAChBA,KAAK,CAAC8B,cAAc,CAAC,CAAC;MACtB9B,KAAK,CAAC+B,eAAe,CAAC,CAAC;IAC3B,CAAE;IACFrE,OAAO,EAAEA,OAAQ;IACjBkB,GAAG,EAAEO,QAAS;IACdhB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACb4D,SAAS,EAAE1D,kBAAmB;IAC9BlB,SAAS,EAAEA,SAAU;IACrBuB,YAAY,EAAEA,YAAa;IAC3B2C,UAAU,EAAE/C,SAAU;IACtB0D,0BAA0B,EAAEjE;EAA0B,CACzD,CAAC,eACFxC,KAAA,CAAAyF,aAAA,CAACpE,6BAA6B;IAC1BqF,OAAO,EACH1D,iCAAiC,GAC3B;MACI2D,OAAO,EAAEtD,QAAQ,GAAG,CAAC,GAAG;IAC5B,CAAC,GACD;MACIuD,QAAQ,EACJvD,QAAQ,IACR,CAAChB,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL,GAAGuE,MAAM,CAACnD,KAAK,CAACkD,QAAQ,CAAC;IACvC,CACT;IACDE,OAAO,EAAE,KAAM;IACfC,MAAM;IACN3D,GAAG,EAAEQ,cAAe;IACpBQ,KAAK,EAAE;MAAE,GAAGc;IAAc,CAAE;IAC5B8B,UAAU,EAAE;MACRrE,IAAI,EAAE,OAAO;MACbsE,QAAQ,EAAEjE,iCAAiC,GAAG,CAAC,GAAG;IACtD;EAAE,gBAEFhD,KAAA,CAAAyF,aAAA,CAACvE,gBAAgB;IAAC4E,UAAU,EAAE/C;EAAU,GACnCZ,WACa,CACS,CACf,CAAC,EACpBI,mBAAmB,iBAChBvC,KAAA,CAAAyF,aAAA,CAACrE,0BAA0B;IACvB4E,2BAA2B,EAAE3D,0BAA2B;IACxD4D,KAAK,EAAExD,IAAK;IACZiE,OAAO,EAAE;MAAEC,OAAO,EAAEtD,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCyD,OAAO,EAAE,KAAM;IACfT,OAAO,EAAEtC,oBAAqB;IAC9BiD,UAAU,EAAE;MAAErE,IAAI,EAAE;IAAQ;EAAE,gBAE9B3C,KAAA,CAAAyF,aAAA,CAAC7E,IAAI;IACDsG,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBvC,KAAK,EAAE5B,SAAS,GAAGW,KAAK,CAACyD,KAAK,GAAG7C;EAAU,CAC9C,CACuB,CAC/B,EACAlC,YAAY,IAAI8B,gBAAgB,IAAI9B,YACd,CAAC,EAC3BA,YAAY,IAAI,CAAC8B,gBAAgB,iBAC9BlE,KAAA,CAAAyF,aAAA,CAACtE,uBAAuB,QAAEiB,YAAsC,CAE3D,CAChB,EACD,CACIe,YAAY,EACZkB,eAAe,EACfM,KAAK,EACLZ,oBAAoB,EACpBQ,sBAAsB,EACtBlB,QAAQ,EACRJ,EAAE,EACFrB,SAAS,EACTC,UAAU,EACVkB,SAAS,EACTmC,aAAa,EACbvD,WAAW,EACXG,MAAM,EACNE,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXoB,gBAAgB,EAChBnB,YAAY,EACZY,iCAAiC,EACjCV,uBAAuB,EACvB4B,gBAAgB,EAChB1B,yBAAyB,EACzBD,mBAAmB,EACnBF,0BAA0B,EAC1Ba,+BAA+B,EAC/BJ,kBAAkB,EAClBL,IAAI,EACJiB,KAAK,CAACkD,QAAQ,EACdlD,KAAK,CAACyD,KAAK,EACXxE,IAAI,EACJC,KAAK,CAEb,CAAC;EAED,IAAIf,UAAU,IAAI,OAAOgB,YAAY,KAAK,QAAQ,EAAE;IAChD,oBACI7C,KAAA,CAAAyF,aAAA,CAACjE,OAAO;MAAC4F,IAAI,EAAE;QAAEC,IAAI,EAAExE;MAAa,CAAE;MAACyE,kBAAkB;IAAA,GACpD9B,YACI,CAAC;EAElB;EAEA,OAAOA,YAAY;AACvB,CACJ,CAAC;AAED9D,KAAK,CAAC6F,WAAW,GAAG,OAAO;AAE3B,eAAe7F,KAAK","ignoreList":[]}

package/lib/esm/components/input/Input.styles.js

@@ -1,68 +1,70 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledInput = styled.div`
-    opacity: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
     display: flex;
     width: 100%;
 `;
 export const StyledInputContentWrapper = styled.div`
     align-items: center;
-    background-color: ${_ref2 => {
-  let {
-    theme,
-    $shouldChangeColor
-  } = _ref2;
-  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
-}};
-    border: 1px solid
-        ${_ref3 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref3;
-  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
-}};
-    color: ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme['006'];
-}};
+    background-color: ${({
+  theme,
+  $backgroundColor
+}) => $backgroundColor ?? theme['100']};
+    border: 1px solid transparent;
+    color: ${({
+  theme
+}) => theme['006']};
     display: flex;
     justify-content: space-between;
     width: 100%;
     transition: opacity 0.3s ease;
 
-    ${_ref5 => {
-  let {
-    $size
-  } = _ref5;
-  return $size === 'small' && css`
-            height: 32px;
+    ${({
+  theme,
+  $isInvalid,
+  $shouldShowTransparentBackground
+}) => {
+  if ($isInvalid) {
+    return css`
+                border-color: ${theme.wrong};
+            `;
+  }
+  if ($shouldShowTransparentBackground) {
+    if (theme.colorMode === 'dark') {
+      return css`
+                    border-color: rgba(255, 255, 255, 0.5);
+                `;
+    }
+    return css`
+                border-color: rgba(0, 0, 0, 0.5);
+            `;
+  }
+  return css`
+            border-color: rgba(160, 160, 160, 0.3);
         `;
 }}
 
-    ${_ref6 => {
-  let {
-    $shouldShowOnlyBottomBorder,
-    $size
-  } = _ref6;
-  return !$shouldShowOnlyBottomBorder && css`
+    ${({
+  $size
+}) => $size === 'small' && css`
+            height: 32px;
+        `}
+
+    ${({
+  $shouldShowOnlyBottomBorder,
+  $size
+}) => !$shouldShowOnlyBottomBorder && css`
             min-height: ${$size === 'medium' ? '42px' : '32px'};
-        `;
-}}
+        `}
 
-    ${_ref7 => {
-  let {
-    $shouldRoundRightCorners,
-    $shouldShowOnlyBottomBorder,
-    theme
-  } = _ref7;
+    ${({
+  $shouldRoundRightCorners,
+  $shouldShowOnlyBottomBorder,
+  theme
+}) => {
   if ($shouldShowOnlyBottomBorder) {
     return css`
                 border-top: none;
@@ -88,41 +90,30 @@ export const StyledInputContent = styled.div`
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    margin: ${_ref8 => {
-  let {
-    $shouldShowOnlyBottomBorder
-  } = _ref8;
-  return !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0';
-}};
+    margin: ${({
+  $shouldShowOnlyBottomBorder
+}) => !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};
     position: relative;
 `;
 export const StyledInputField = styled.input`
     background: none;
     border: none;
-    color: ${_ref9 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref9;
-  return $isInvalid ? theme.wrong : theme.text;
-}};
+    color: ${({
+  theme,
+  $color,
+  $isInvalid
+}) => $color ?? ($isInvalid ? theme.wrong : theme.text)};
     padding: 0;
-    width: ${_ref10 => {
-  let {
-    $placeholderWidth
-  } = _ref10;
-  return `calc(100% - ${$placeholderWidth}px)`;
-}};
+    width: ${({
+  $placeholderWidth
+}) => `calc(100% - ${$placeholderWidth}px)`};
     line-height: 1em;
 
-    ${_ref11 => {
-  let {
-    $shouldShowCenteredContent
-  } = _ref11;
-  return $shouldShowCenteredContent && css`
+    ${({
+  $shouldShowCenteredContent
+}) => $shouldShowCenteredContent && css`
             text-align: center;
-        `;
-}}
+        `}
 `;
 export const StyledMotionInputLabelWrapper = styled(motion.label)`
     align-items: center;
@@ -145,38 +136,26 @@ export const StyledInputLabel = styled.label`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${_ref12 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref12;
-  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
-}};
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
 `;
 export const StyledMotionInputClearIcon = styled(motion.div)`
     align-items: center;
-    border-left: ${_ref13 => {
-  let {
-    $shouldShowOnlyBottomBorder
-  } = _ref13;
-  return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
-}};
+    border-left: ${({
+  $shouldShowOnlyBottomBorder
+}) => $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};
     cursor: pointer;
     display: flex;
     flex: 0 0 auto;
-    height: ${_ref14 => {
-  let {
-    $size
-  } = _ref14;
-  return $size === 'medium' ? '40px' : '30px';
-}};
+    height: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
     justify-content: center;
-    width: ${_ref15 => {
-  let {
-    $size
-  } = _ref15;
-  return $size === 'medium' ? '40px' : '30px';
-}};
+    width: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
 `;
 export const StyledInputIconWrapper = styled.div`
     align-items: baseline;