@activecollab/components 2.0.94 → 2.0.96

package/dist/esm/components/AutoResizeTextarea/AutoResizeTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useCallback","forwardRef","useRef","useEffect","classnames","StyledAutoResizeTextarea","useForkRef","AutoResizeTextarea","_ref","ref","minRows","maxRows","lineHeight","onChange","className","preventNewRowOnEnter","cursorAtTextEnd","onKeyDown","value","rest","innerRef","rows","setRows","handleRef","calcRows","elem","previousRows","currentRows","Math","floor","scrollHeight","scrollTop","current","handleOnChange","e","target","handleFocus","setSelectionRange","length","handleTextAreaKeyDown","key","preventDefault","createElement","_extends","onFocus","style","minHeight","displayName"],"sources":["../../../../src/components/AutoResizeTextarea/AutoResizeTextarea.tsx"],"sourcesContent":["import React, {\n  useState,\n  useCallback,\n  ChangeEvent,\n  KeyboardEvent,\n  FocusEvent,\n  Ref,\n  forwardRef,\n  useRef,\n  useEffect,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledAutoResizeTextarea } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\n\nexport interface IAutoResizeTextarea\n  extends React.ComponentPropsWithoutRef<\"textarea\"> {\n  minRows?: number;\n  maxRows?: number;\n  lineHeight?: number;\n  preventNewRowOnEnter?: boolean;\n  cursorAtTextEnd?: boolean;\n  value?: string;\n}\n\nexport const AutoResizeTextarea = forwardRef(\n  (\n    {\n      minRows = 1,\n      maxRows = 6,\n      lineHeight = 18,\n      onChange,\n      className,\n      preventNewRowOnEnter = false,\n      cursorAtTextEnd = false,\n      onKeyDown,\n      value,\n      ...rest\n    }: IAutoResizeTextarea,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    const innerRef = useRef<HTMLTextAreaElement | null>(null);\n    const [rows, setRows] = useState(minRows);\n\n    const handleRef = useForkRef(ref, innerRef);\n\n    const calcRows = useCallback(\n      (elem: HTMLTextAreaElement | null) => {\n        if (elem) {\n          const previousRows = elem.rows || minRows;\n\n          elem.rows = minRows;\n          const currentRows = Math.floor(elem.scrollHeight / lineHeight);\n\n          if (currentRows === previousRows) {\n            elem.rows = currentRows;\n          }\n\n          if (currentRows >= maxRows) {\n            elem.rows = maxRows;\n            elem.scrollTop = elem.scrollHeight;\n          }\n\n          setRows(currentRows < maxRows ? currentRows : maxRows);\n        }\n      },\n      [lineHeight, maxRows, minRows]\n    );\n\n    useEffect(() => {\n      calcRows(innerRef.current);\n    }, [value, calcRows]);\n\n    const handleOnChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        calcRows(e.target);\n        typeof onChange === \"function\" && onChange(e);\n      },\n      [onChange, calcRows]\n    );\n\n    const handleFocus = useCallback(\n      (e: FocusEvent<HTMLTextAreaElement>) => {\n        if (cursorAtTextEnd) {\n          e.target.setSelectionRange(\n            e.target.value.length,\n            e.target.value.length\n          );\n        }\n      },\n      [cursorAtTextEnd]\n    );\n\n    const handleTextAreaKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (preventNewRowOnEnter && e.key === \"Enter\") {\n          e.preventDefault();\n        }\n        typeof onKeyDown === \"function\" && onKeyDown(e);\n      },\n      [preventNewRowOnEnter, onKeyDown]\n    );\n\n    return (\n      <StyledAutoResizeTextarea\n        {...rest}\n        value={value}\n        ref={handleRef}\n        onChange={handleOnChange}\n        onKeyDown={handleTextAreaKeyDown}\n        onFocus={handleFocus}\n        rows={rows}\n        className={classnames(\"c-autoresizetextarea\", className)}\n        style={{\n          minHeight: `${lineHeight}px`,\n          lineHeight: `${lineHeight}px`,\n        }}\n      />\n    );\n  }\n);\n\nAutoResizeTextarea.displayName = \"AutoResizeTextarea\";\n"],"mappings":"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"}
+{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useCallback","forwardRef","useRef","useEffect","classnames","StyledAutoResizeTextarea","useForkRef","AutoResizeTextarea","_ref","ref","minRows","maxRows","lineHeight","onChange","className","preventNewRowOnEnter","cursorAtTextEnd","onKeyDown","value","mode","rest","innerRef","rows","setRows","handleRef","calcRows","elem","previousRows","currentRows","Math","floor","scrollHeight","scrollTop","current","handleOnChange","e","target","handleFocus","setSelectionRange","length","handleTextAreaKeyDown","key","preventDefault","createElement","_extends","onFocus","style","minHeight","displayName"],"sources":["../../../../src/components/AutoResizeTextarea/AutoResizeTextarea.tsx"],"sourcesContent":["import React, {\n  useState,\n  useCallback,\n  ChangeEvent,\n  KeyboardEvent,\n  FocusEvent,\n  Ref,\n  forwardRef,\n  useRef,\n  useEffect,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledAutoResizeTextarea } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface IAutoResizeTextarea\n  extends React.ComponentPropsWithoutRef<\"textarea\"> {\n  minRows?: number;\n  maxRows?: number;\n  lineHeight?: number;\n  preventNewRowOnEnter?: boolean;\n  cursorAtTextEnd?: boolean;\n  value?: string;\n  mode?: InputMode;\n}\n\nexport const AutoResizeTextarea = forwardRef(\n  (\n    {\n      minRows = 1,\n      maxRows = 6,\n      lineHeight = 18,\n      onChange,\n      className,\n      preventNewRowOnEnter = false,\n      cursorAtTextEnd = false,\n      onKeyDown,\n      value,\n      mode = \"outlined\",\n      ...rest\n    }: IAutoResizeTextarea,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    const innerRef = useRef<HTMLTextAreaElement | null>(null);\n    const [rows, setRows] = useState(minRows);\n\n    const handleRef = useForkRef(ref, innerRef);\n\n    const calcRows = useCallback(\n      (elem: HTMLTextAreaElement | null) => {\n        if (elem) {\n          const previousRows = elem.rows || minRows;\n\n          elem.rows = minRows;\n          const currentRows = Math.floor(elem.scrollHeight / lineHeight);\n\n          if (currentRows === previousRows) {\n            elem.rows = currentRows;\n          }\n\n          if (currentRows >= maxRows) {\n            elem.rows = maxRows;\n            elem.scrollTop = elem.scrollHeight;\n          }\n\n          setRows(currentRows < maxRows ? currentRows : maxRows);\n        }\n      },\n      [lineHeight, maxRows, minRows]\n    );\n\n    useEffect(() => {\n      calcRows(innerRef.current);\n    }, [value, calcRows]);\n\n    const handleOnChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        calcRows(e.target);\n        typeof onChange === \"function\" && onChange(e);\n      },\n      [onChange, calcRows]\n    );\n\n    const handleFocus = useCallback(\n      (e: FocusEvent<HTMLTextAreaElement>) => {\n        if (cursorAtTextEnd) {\n          e.target.setSelectionRange(\n            e.target.value.length,\n            e.target.value.length\n          );\n        }\n      },\n      [cursorAtTextEnd]\n    );\n\n    const handleTextAreaKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (preventNewRowOnEnter && e.key === \"Enter\") {\n          e.preventDefault();\n        }\n        typeof onKeyDown === \"function\" && onKeyDown(e);\n      },\n      [preventNewRowOnEnter, onKeyDown]\n    );\n\n    return (\n      <StyledAutoResizeTextarea\n        {...rest}\n        value={value}\n        ref={handleRef}\n        onChange={handleOnChange}\n        onKeyDown={handleTextAreaKeyDown}\n        onFocus={handleFocus}\n        rows={rows}\n        mode={mode}\n        className={classnames(\"c-autoresizetextarea\", className)}\n        style={{\n          minHeight: `${lineHeight}px`,\n          lineHeight: `${lineHeight}px`,\n        }}\n      />\n    );\n  }\n);\n\nAutoResizeTextarea.displayName = \"AutoResizeTextarea\";\n"],"mappings":"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"}

package/dist/esm/components/AutoResizeTextarea/Styles.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const StyledAutoResizeTextarea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Textarea").TextareaProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "invalid"> & import("react").RefAttributes<HTMLTextAreaElement>>, any, {}, never>;
+export declare const StyledAutoResizeTextarea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Textarea").TextareaProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../Textarea").TextareaProps> & import("react").RefAttributes<HTMLTextAreaElement>>, any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/AutoResizeTextarea/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AutoResizeTextarea/Styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,wBAAwB,sVAIpC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AutoResizeTextarea/Styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,wBAAwB,sXAIpC,CAAC"}

package/dist/esm/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, Ref, InputHTMLAttributes } from "react";
-import { InputSize } from "./types";
+import { InputMode, InputSize } from "./types";
 import { ITypographyProps } from "../Typography/Typography";
 export interface OverrideProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ref"> {
     /** Velicina inputa koja definse font-size i border radius */
@@ -10,6 +10,7 @@ export interface InputProps extends OverrideProps, Pick<ITypographyProps, "align
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
     wrapRef?: Ref<HTMLDivElement>;
+    mode?: InputMode;
     wrapperClick?: () => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACnE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,aAAa,EACnB,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,qFAkDjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACnE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,aAAa,EACnB,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,qFAsDjB,CAAC"}

package/dist/esm/components/Input/Input.js

@@ -15,6 +15,7 @@ export const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     endAdornment,
     wrapRef,
     wrapperClick,
+    mode = "outlined",
     ...rest
   } = _ref;
   const intInputRef = useRef(null);
@@ -28,6 +29,7 @@ export const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     $size: size,
     $invalid: invalid,
     $disabled: disabled,
+    $mode: mode,
     style: style,
     className: classnames("c-input-wrapper", className),
     onClick: handleWrapperClick,
@@ -39,6 +41,8 @@ export const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled: disabled,
     className: "c-input",
     "aria-invalid": invalid,
+    $invalid: invalid,
+    $mode: mode,
     "data-form-type": "other"
   }, rest)), endAdornment);
 });

package/dist/esm/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","_ref","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","_intInputRef$current","current","focus","createElement","$size","$invalid","$disabled","onClick","_extends","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport { InputSize } from \"./types\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\nexport interface OverrideProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n}\n\nexport interface InputProps\n  extends OverrideProps,\n    Pick<ITypographyProps, \"align\"> {\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAE1D,OAAOC,UAAU,MAAM,wBAAwB;AAmB/C,OAAO,MAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,CAAAC,IAAA,EAcEC,GAAG,KACA;EAAA,IAdH;IACEC,SAAS,GAAG,EAAE;IACdC,KAAK;IACLC,IAAI,GAAG,MAAM;IACbC,QAAQ,GAAG,KAAK;IAChBC,IAAI,GAAG,SAAS;IAChBC,OAAO,GAAG,KAAK;IACfC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,YAAY;IACZ,GAAGC;EACL,CAAC,GAAAZ,IAAA;EAGD,MAAMa,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,MAAMqB,SAAS,GAAGjB,UAAU,CAACI,GAAG,EAAEY,WAAW,CAAC;EAE9C,MAAME,kBAAkB,GAAGvB,WAAW,CAAC,MAAM;IAAA,IAAAwB,oBAAA;IAC3C,CAAAA,oBAAA,GAAAH,WAAW,CAACI,OAAO,aAAnBD,oBAAA,CAAqBE,KAAK,CAAC,CAAC;IAC5BP,YAAY,IAAIA,YAAY,CAAC,CAAC;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACEpB,KAAA,CAAA4B,aAAA,CAACvB,kBAAkB;IACjBwB,KAAK,EAAEd,IAAK;IACZe,QAAQ,EAAEd,OAAQ;IAClBe,SAAS,EAAEjB,QAAS;IACpBF,KAAK,EAAEA,KAAM;IACbD,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEQ,SAAS,CAAE;IACpDqB,OAAO,EAAER,kBAAmB;IAC5Bd,GAAG,EAAES;EAAQ,GAEZF,cAAc,eACfjB,KAAA,CAAA4B,aAAA,CAACxB,WAAW,EAAA6B,QAAA;IACVvB,GAAG,EAAEa,SAAU;IACfV,IAAI,EAAEA,IAAK;IACXgB,KAAK,EAAEd,IAAK;IACZD,QAAQ,EAAEA,QAAS;IACnBH,SAAS,EAAC,SAAS;IACnB,gBAAcK,OAAQ;IACtB,kBAAe;EAAO,GAClBK,IAAI,CACT,CAAC,EACDH,YACiB,CAAC;AAEzB,CACF,CAAC;AAEDX,KAAK,CAAC2B,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","_ref","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","mode","rest","intInputRef","handleRef","handleWrapperClick","_intInputRef$current","current","focus","createElement","$size","$invalid","$disabled","$mode","onClick","_extends","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport { InputMode, InputSize } from \"./types\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\nexport interface OverrideProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n}\n\nexport interface InputProps\n  extends OverrideProps,\n    Pick<ITypographyProps, \"align\"> {\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  mode?: InputMode;\n  wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      mode = \"outlined\",\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        $mode={mode}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          $invalid={invalid}\n          $mode={mode}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAE1D,OAAOC,UAAU,MAAM,wBAAwB;AAoB/C,OAAO,MAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,CAAAC,IAAA,EAeEC,GAAG,KACA;EAAA,IAfH;IACEC,SAAS,GAAG,EAAE;IACdC,KAAK;IACLC,IAAI,GAAG,MAAM;IACbC,QAAQ,GAAG,KAAK;IAChBC,IAAI,GAAG,SAAS;IAChBC,OAAO,GAAG,KAAK;IACfC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,YAAY;IACZC,IAAI,GAAG,UAAU;IACjB,GAAGC;EACL,CAAC,GAAAb,IAAA;EAGD,MAAMc,WAAW,GAAGrB,MAAM,CAAmB,IAAI,CAAC;EAClD,MAAMsB,SAAS,GAAGlB,UAAU,CAACI,GAAG,EAAEa,WAAW,CAAC;EAE9C,MAAME,kBAAkB,GAAGxB,WAAW,CAAC,MAAM;IAAA,IAAAyB,oBAAA;IAC3C,CAAAA,oBAAA,GAAAH,WAAW,CAACI,OAAO,aAAnBD,oBAAA,CAAqBE,KAAK,CAAC,CAAC;IAC5BR,YAAY,IAAIA,YAAY,CAAC,CAAC;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACEpB,KAAA,CAAA6B,aAAA,CAACxB,kBAAkB;IACjByB,KAAK,EAAEf,IAAK;IACZgB,QAAQ,EAAEf,OAAQ;IAClBgB,SAAS,EAAElB,QAAS;IACpBmB,KAAK,EAAEZ,IAAK;IACZT,KAAK,EAAEA,KAAM;IACbD,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEQ,SAAS,CAAE;IACpDuB,OAAO,EAAET,kBAAmB;IAC5Bf,GAAG,EAAES;EAAQ,GAEZF,cAAc,eACfjB,KAAA,CAAA6B,aAAA,CAACzB,WAAW,EAAA+B,QAAA;IACVzB,GAAG,EAAEc,SAAU;IACfX,IAAI,EAAEA,IAAK;IACXiB,KAAK,EAAEf,IAAK;IACZD,QAAQ,EAAEA,QAAS;IACnBH,SAAS,EAAC,SAAS;IACnB,gBAAcK,OAAQ;IACtBe,QAAQ,EAAEf,OAAQ;IAClBiB,KAAK,EAAEZ,IAAK;IACZ,kBAAe;EAAO,GAClBC,IAAI,CACT,CAAC,EACDJ,YACiB,CAAC;AAEzB,CACF,CAAC;AAEDX,KAAK,CAAC6B,WAAW,GAAG,OAAO"}

package/dist/esm/components/Input/Styles.d.ts

@@ -1,14 +1,17 @@
 import { InputProps } from "./Input";
-import { InputSize } from "./types";
+import { InputMode, InputSize } from "./types";
 interface StyledInputWrapperProps {
     $size?: InputSize;
     $invalid?: boolean;
     $disabled?: boolean;
+    $mode?: InputMode;
 }
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", any, StyledInputWrapperProps, never>;
 interface StyledInputProps extends Pick<InputProps, "align"> {
     $size?: InputSize;
     $loading?: boolean;
+    $mode?: InputMode;
+    $invalid?: boolean;
 }
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
 export declare const StyledPasswordIndicatorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/Input/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;eACF,OAAO;SA+BnB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAqE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAuDvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;eACF,OAAO;SA+BnB,CAAC"}

package/dist/esm/components/Input/Styles.js

@@ -4,12 +4,12 @@ import { FontStyle } from "../FontStyle";
 export const StyledInputWrapper = styled.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && css(["border-color:var(--red-alert);"]));
+})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "outlined" && css(["background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;"]), props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && props.$mode === "outlined" && css(["border-color:var(--red-alert);"]));
 StyledInputWrapper.displayName = "StyledInputWrapper";
 export const StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-1"
-})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", ""], props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align));
+})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align), props => props.$mode === "flat" && props.$invalid && css(["color:var(--red-alert);"]));
 StyledInput.displayName = "StyledInput";
 export const StyledPasswordIndicatorWrapper = styled.div.withConfig({
   displayName: "Styles__StyledPasswordIndicatorWrapper",

package/dist/esm/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  /* mode styling */\n  ${(props) =>\n    props.$mode === \"outlined\" &&\n    css`\n      background-color: var(--input-background-color);\n      border-color: var(--color-theme-500);\n      border-radius: 8px;\n      border-style: solid;\n      border-width: 1px;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}

package/dist/esm/components/Input/types.d.ts

@@ -1,2 +1,3 @@
 export type InputSize = "small" | "regular" | "big" | "biggest";
+export type InputMode = "outlined" | "flat";
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/Input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/dist/esm/components/Input/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\nexport type InputMode = \"outlined\" | \"flat\";\n"],"mappings":""}

package/dist/esm/components/SelectTrigger/SelectTrigger.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef } from "react";
+import { InputMode } from "../Input/types";
 import { ITypographyProps } from "../Typography/Typography";
 export type Size = "regular" | "big" | "small";
 export interface SelectTriggerProps extends ComponentPropsWithoutRef<"button"> {
@@ -7,6 +8,7 @@ export interface SelectTriggerProps extends ComponentPropsWithoutRef<"button"> {
     endAdornment?: JSX.Element;
     open?: boolean;
     typographyProps?: ITypographyProps;
+    mode?: InputMode;
 }
 export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=SelectTrigger.d.ts.map

package/dist/esm/components/SelectTrigger/SelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAc,MAAM,0BAA0B,CAAC;AAExE,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,aAAa,8FAqCzB,CAAC"}
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAc,MAAM,0BAA0B,CAAC;AAExE,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,8FAyCzB,CAAC"}

package/dist/esm/components/SelectTrigger/SelectTrigger.js

@@ -11,6 +11,7 @@ export const SelectTrigger = /*#__PURE__*/forwardRef((_ref, ref) => {
     open = false,
     endAdornment,
     typographyProps,
+    mode = "outlined",
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement(StyledSelectTrigger, _extends({
@@ -18,12 +19,15 @@ export const SelectTrigger = /*#__PURE__*/forwardRef((_ref, ref) => {
     role: "button",
     type: type,
     $size: size,
-    $invalid: invalid
+    $invalid: invalid,
+    "aria-invalid": invalid,
+    $mode: mode
   }, rest), /*#__PURE__*/React.createElement(Typography, _extends({
     as: "div",
     overflow: "truncate",
     whitespace: "no-wrap",
-    variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
+    variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
+    color: mode === "flat" && invalid ? "alert" : undefined
   }, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React.createElement(StyledCaretIcon, {
     $open: open
   }));

package/dist/esm/components/SelectTrigger/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","StyledCaretIcon","StyledSelectTrigger","Typography","SelectTrigger","_ref","ref","children","type","size","invalid","open","endAdornment","typographyProps","rest","createElement","_extends","role","$size","$invalid","as","overflow","whitespace","variant","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n  size?: Size;\n  invalid?: boolean;\n  endAdornment?: JSX.Element;\n  open?: boolean;\n  typographyProps?: ITypographyProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      children,\n      type = \"button\",\n      size = \"regular\",\n      invalid = false,\n      open = false,\n      endAdornment,\n      typographyProps,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSelectTrigger\n        ref={ref}\n        role=\"button\"\n        type={type}\n        $size={size}\n        $invalid={invalid}\n        {...rest}\n      >\n        <Typography\n          as=\"div\"\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n          {...typographyProps}\n        >\n          {children}\n        </Typography>\n\n        {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n      </StyledSelectTrigger>\n    );\n  }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AAEnE,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;AAC/D,SAA2BC,UAAU,QAAQ,0BAA0B;AAYvE,OAAO,MAAMC,aAAa,gBAAGJ,UAAU,CACrC,CAAAK,IAAA,EAWEC,GAAG,KACA;EAAA,IAXH;IACEC,QAAQ;IACRC,IAAI,GAAG,QAAQ;IACfC,IAAI,GAAG,SAAS;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,KAAK;IACZC,YAAY;IACZC,eAAe;IACf,GAAGC;EACL,CAAC,GAAAT,IAAA;EAGD,oBACEN,KAAA,CAAAgB,aAAA,CAACb,mBAAmB,EAAAc,QAAA;IAClBV,GAAG,EAAEA,GAAI;IACTW,IAAI,EAAC,QAAQ;IACbT,IAAI,EAAEA,IAAK;IACXU,KAAK,EAAET,IAAK;IACZU,QAAQ,EAAET;EAAQ,GACdI,IAAI,gBAERf,KAAA,CAAAgB,aAAA,CAACZ,UAAU,EAAAa,QAAA;IACTI,EAAE,EAAC,KAAK;IACRC,QAAQ,EAAC,UAAU;IACnBC,UAAU,EAAC,SAAS;IACpBC,OAAO,EAAEd,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG;EAAS,GAClEI,eAAe,GAElBN,QACS,CAAC,EAEZK,YAAY,GAAGA,YAAY,gBAAGb,KAAA,CAAAgB,aAAA,CAACd,eAAe;IAACuB,KAAK,EAAEb;EAAK,CAAE,CAC3C,CAAC;AAE1B,CACF,CAAC;AAEDP,aAAa,CAACqB,WAAW,GAAG,eAAe"}
+{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","StyledCaretIcon","StyledSelectTrigger","Typography","SelectTrigger","_ref","ref","children","type","size","invalid","open","endAdornment","typographyProps","mode","rest","createElement","_extends","role","$size","$invalid","$mode","as","overflow","whitespace","variant","color","undefined","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n  size?: Size;\n  invalid?: boolean;\n  endAdornment?: JSX.Element;\n  open?: boolean;\n  typographyProps?: ITypographyProps;\n  mode?: InputMode;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      children,\n      type = \"button\",\n      size = \"regular\",\n      invalid = false,\n      open = false,\n      endAdornment,\n      typographyProps,\n      mode = \"outlined\",\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSelectTrigger\n        ref={ref}\n        role=\"button\"\n        type={type}\n        $size={size}\n        $invalid={invalid}\n        aria-invalid={invalid}\n        $mode={mode}\n        {...rest}\n      >\n        <Typography\n          as=\"div\"\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n          color={mode === \"flat\" && invalid ? \"alert\" : undefined}\n          {...typographyProps}\n        >\n          {children}\n        </Typography>\n\n        {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n      </StyledSelectTrigger>\n    );\n  }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AAEnE,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;AAE/D,SAA2BC,UAAU,QAAQ,0BAA0B;AAavE,OAAO,MAAMC,aAAa,gBAAGJ,UAAU,CACrC,CAAAK,IAAA,EAYEC,GAAG,KACA;EAAA,IAZH;IACEC,QAAQ;IACRC,IAAI,GAAG,QAAQ;IACfC,IAAI,GAAG,SAAS;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,KAAK;IACZC,YAAY;IACZC,eAAe;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EACL,CAAC,GAAAV,IAAA;EAGD,oBACEN,KAAA,CAAAiB,aAAA,CAACd,mBAAmB,EAAAe,QAAA;IAClBX,GAAG,EAAEA,GAAI;IACTY,IAAI,EAAC,QAAQ;IACbV,IAAI,EAAEA,IAAK;IACXW,KAAK,EAAEV,IAAK;IACZW,QAAQ,EAAEV,OAAQ;IAClB,gBAAcA,OAAQ;IACtBW,KAAK,EAAEP;EAAK,GACRC,IAAI,gBAERhB,KAAA,CAAAiB,aAAA,CAACb,UAAU,EAAAc,QAAA;IACTK,EAAE,EAAC,KAAK;IACRC,QAAQ,EAAC,UAAU;IACnBC,UAAU,EAAC,SAAS;IACpBC,OAAO,EAAEhB,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,QAAS;IACtEiB,KAAK,EAAEZ,IAAI,KAAK,MAAM,IAAIJ,OAAO,GAAG,OAAO,GAAGiB;EAAU,GACpDd,eAAe,GAElBN,QACS,CAAC,EAEZK,YAAY,GAAGA,YAAY,gBAAGb,KAAA,CAAAiB,aAAA,CAACf,eAAe;IAAC2B,KAAK,EAAEjB;EAAK,CAAE,CAC3C,CAAC;AAE1B,CACF,CAAC;AAEDP,aAAa,CAACyB,WAAW,GAAG,eAAe"}

package/dist/esm/components/SelectTrigger/Styles.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { Size } from "./SelectTrigger";
+import { InputMode } from "../Input/types";
 export declare const StyledSelectTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, any, {
     $size?: Size | undefined;
     $invalid?: boolean | undefined;
+    $mode?: InputMode | undefined;
 }, never>;
 export declare const StyledCaretIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, any, {
     $open: boolean;

package/dist/esm/components/SelectTrigger/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAIvC,eAAO,MAAM,mBAAmB;;;SA4D/B,CAAC;AAIF,eAAO,MAAM,eAAe;WACnB,OAAO;SAWf,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,eAAO,MAAM,mBAAmB;;;;SAsE/B,CAAC;AAIF,eAAO,MAAM,eAAe;WACnB,OAAO;SAWf,CAAC"}

package/dist/esm/components/SelectTrigger/Styles.js

@@ -4,50 +4,57 @@ import { Trigger } from "../Trigger";
 export const StyledSelectTrigger = styled(Trigger).withConfig({
   displayName: "Styles__StyledSelectTrigger",
   componentId: "sc-9799p2-0"
-})(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], _ref => {
+})(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], _ref => {
   let {
-    disabled
+    $mode
   } = _ref;
-  return disabled && css(["opacity:50%;cursor:default;"]);
+  return $mode === "outlined" && css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
 }, _ref2 => {
   let {
-    $invalid,
     disabled
   } = _ref2;
-  return !$invalid && !disabled && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
+  return disabled && css(["opacity:50%;cursor:default;"]);
 }, _ref3 => {
   let {
-    $invalid
+    $invalid,
+    disabled,
+    $mode
   } = _ref3;
-  return $invalid && css(["", " &:hover{", "}"], {
+  return !$invalid && !disabled && $mode === "outlined" && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
+}, _ref4 => {
+  let {
+    $invalid,
+    $mode
+  } = _ref4;
+  return $invalid && $mode === "outlined" && css(["", " &:hover{", "}"], {
     "borderColor": "var(--red-alert)"
   }, {
     "borderColor": "var(--red-alert)"
   });
-}, _ref4 => {
-  let {
-    $size
-  } = _ref4;
-  return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
 }, _ref5 => {
   let {
     $size
   } = _ref5;
-  return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
+  return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
 }, _ref6 => {
   let {
     $size
   } = _ref6;
+  return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
+}, _ref7 => {
+  let {
+    $size
+  } = _ref7;
   return $size === "big" && css(["height:40px;border-radius:var(--ac-br-8);"]);
 });
 StyledSelectTrigger.displayName = "StyledSelectTrigger";
 export const StyledCaretIcon = styled(CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledCaretIcon",
   componentId: "sc-9799p2-1"
-})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], _ref7 => {
+})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], _ref8 => {
   let {
     $open
-  } = _ref7;
+  } = _ref8;
   return !$open && css(["transform:rotate(180deg);"]);
 });
 StyledCaretIcon.displayName = "StyledCaretIcon";

package/dist/esm/components/SelectTrigger/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","withConfig","displayName","componentId","_ref","disabled","_ref2","$invalid","_ref3","_ref4","$size","_ref5","_ref6","StyledCaretIcon","_ref7","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Size } from \"./SelectTrigger\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n  $size?: Size;\n  $invalid?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid var(--color-theme-500);\n  padding: 0 4px 0 8px;\n  width: 300px;\n  transition: border-color 0.3s ease;\n  background-color: var(--input-background-color);\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      opacity: 50%;\n      cursor: default;\n    `}\n\n  ${({ $invalid, disabled }) =>\n    !$invalid &&\n    !disabled &&\n    css`\n      &:hover,\n      &:focus {\n        border-color: var(--color-primary-700);\n      }\n    `}\n\n  ${({ $invalid }) =>\n    $invalid &&\n    css`\n      ${tw`tw-border-alert`}\n\n      &:hover {\n        ${tw`tw-border-alert`}\n      }\n    `}\n\n  ${({ $size }) =>\n    $size === \"small\" &&\n    css`\n      height: 24px;\n      border-radius: var(--ac-br-6);\n    `}\n\n  ${({ $size }) =>\n    $size === \"regular\" &&\n    css`\n      height: 32px;\n      border-radius: var(--ac-br-8);\n    `}\n\n    ${({ $size }) =>\n    $size === \"big\" &&\n    css`\n      height: 40px;\n      border-radius: var(--ac-br-8);\n    `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n  $open: boolean;\n}>`\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n\n  ${({ $open }) =>\n    !$open &&\n    css`\n      transform: rotate(180deg);\n    `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,OAAO,QAAQ,YAAY;AAEpC,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAO,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8PAa9CC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,OACbC,QAAQ,IACRR,GAAG,iCAGF;AAAA,GAEDS,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEF;EAAS,CAAC,GAAAC,KAAA;EAAA,OACvB,CAACC,QAAQ,IACT,CAACF,QAAQ,IACTR,GAAG,6DAKF;AAAA,GAEDW,KAAA;EAAA,IAAC;IAAED;EAAS,CAAC,GAAAC,KAAA;EAAA,OACbD,QAAQ,IACRV,GAAG,yBACG;IAAA;EAAgB,CAAC,EAGf;IAAA;EAAgB,CAAC,CAExB;AAAA,GAEDY,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACVC,KAAK,KAAK,OAAO,IACjBb,GAAG,+CAGF;AAAA,GAEDc,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OACVD,KAAK,KAAK,SAAS,IACnBb,GAAG,+CAGF;AAAA,GAECe,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OACZF,KAAK,KAAK,KAAK,IACfb,GAAG,+CAGF;AAAA,EACJ;AAEDG,mBAAmB,CAACE,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMW,eAAe,GAAGjB,MAAM,CAACE,wBAAwB,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2EAO3DW,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACV,CAACC,KAAK,IACNlB,GAAG,+BAEF;AAAA,EACJ;AAEDgB,eAAe,CAACX,WAAW,GAAG,iBAAiB"}
+{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","withConfig","displayName","componentId","_ref","$mode","_ref2","disabled","_ref3","$invalid","_ref4","_ref5","$size","_ref6","_ref7","StyledCaretIcon","_ref8","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Size } from \"./SelectTrigger\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { InputMode } from \"../Input/types\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n  $size?: Size;\n  $invalid?: boolean;\n  $mode?: InputMode;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4px 0 8px;\n  width: 300px;\n  transition: border-color 0.3s ease;\n  background-color: transparent;\n  border: none;\n\n  ${({ $mode }) =>\n    $mode === \"outlined\" &&\n    css`\n      border: 1px solid var(--color-theme-500);\n      background-color: var(--input-background-color);\n    `}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      opacity: 50%;\n      cursor: default;\n    `}\n\n  ${({ $invalid, disabled, $mode }) =>\n    !$invalid &&\n    !disabled &&\n    $mode === \"outlined\" &&\n    css`\n      &:hover,\n      &:focus {\n        border-color: var(--color-primary-700);\n      }\n    `}\n\n  ${({ $invalid, $mode }) =>\n    $invalid &&\n    $mode === \"outlined\" &&\n    css`\n      ${tw`tw-border-alert`}\n\n      &:hover {\n        ${tw`tw-border-alert`}\n      }\n    `}\n\n  ${({ $size }) =>\n    $size === \"small\" &&\n    css`\n      height: 24px;\n      border-radius: var(--ac-br-6);\n    `}\n\n  ${({ $size }) =>\n    $size === \"regular\" &&\n    css`\n      height: 32px;\n      border-radius: var(--ac-br-8);\n    `}\n\n    ${({ $size }) =>\n    $size === \"big\" &&\n    css`\n      height: 40px;\n      border-radius: var(--ac-br-8);\n    `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n  $open: boolean;\n}>`\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n\n  ${({ $open }) =>\n    !$open &&\n    css`\n      transform: rotate(180deg);\n    `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,wBAAwB,QAAQ,UAAU;AAEnD,SAASC,OAAO,QAAQ,YAAY;AAEpC,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAO,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qNAc9CC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OACVC,KAAK,KAAK,UAAU,IACpBR,GAAG,6FAGF;AAAA,GAEDS,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACbC,QAAQ,IACRV,GAAG,iCAGF;AAAA,GAEDW,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEF,QAAQ;IAAEF;EAAM,CAAC,GAAAG,KAAA;EAAA,OAC9B,CAACC,QAAQ,IACT,CAACF,QAAQ,IACTF,KAAK,KAAK,UAAU,IACpBR,GAAG,6DAKF;AAAA,GAEDa,KAAA;EAAA,IAAC;IAAED,QAAQ;IAAEJ;EAAM,CAAC,GAAAK,KAAA;EAAA,OACpBD,QAAQ,IACRJ,KAAK,KAAK,UAAU,IACpBR,GAAG,yBACG;IAAA;EAAgB,CAAC,EAGf;IAAA;EAAgB,CAAC,CAExB;AAAA,GAEDc,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACVC,KAAK,KAAK,OAAO,IACjBf,GAAG,+CAGF;AAAA,GAEDgB,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OACVD,KAAK,KAAK,SAAS,IACnBf,GAAG,+CAGF;AAAA,GAECiB,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OACZF,KAAK,KAAK,KAAK,IACff,GAAG,+CAGF;AAAA,EACJ;AAEDG,mBAAmB,CAACE,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMa,eAAe,GAAGnB,MAAM,CAACE,wBAAwB,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2EAO3Da,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACV,CAACC,KAAK,IACNpB,GAAG,+BAEF;AAAA,EACJ;AAEDkB,eAAe,CAACb,WAAW,GAAG,iBAAiB"}

package/dist/esm/components/Textarea/Styles.d.ts

@@ -1,6 +1,8 @@
+import { InputMode } from "../Input/types";
 interface StyledTextareaProps {
     disabled: boolean;
     $invalid: boolean;
+    $mode: InputMode;
 }
 export declare const StyledTextarea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
 export {};

package/dist/esm/components/Textarea/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,0FA+C1B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0FAgE1B,CAAC"}

package/dist/esm/components/Textarea/Styles.js

@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
 export const StyledTextarea = styled.textarea.withConfig({
   displayName: "Styles__StyledTextarea",
   componentId: "sc-m6jqw8-0"
-})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
+})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
   "fontSize": "0.875rem"
 }, {
   "color": "var(--color-theme-900)"
@@ -16,15 +16,15 @@ export const StyledTextarea = styled.textarea.withConfig({
   "fontWeight": "400"
 }, {
   "borderColor": "var(--color-theme-500)"
-}, FontStyle, BoxSizingStyle, props => props.disabled && css(["", ""], {
+}, FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["border:none;background-color:transparent;"]), props => props.disabled && css(["", ""], {
   "cursor": "not-allowed",
   "opacity": "0.5"
-}), props => !props.disabled && !props.$invalid && css(["&:active,&:focus,&:hover{", "}"], {
+}), props => !props.disabled && !props.$invalid && props.$mode === "outlined" && css(["&:active,&:focus,&:hover{", "}"], {
   "borderColor": "var(--color-primary)"
 }), {
   "color": "var(--color-theme-transparent-500)"
-}, props => !props.disabled && props.$invalid && css(["", ""], {
+}, props => !props.disabled && props.$invalid && props.$mode === "outlined" && css(["", ""], {
   "borderColor": "var(--red-alert)"
-}));
+}), props => !props.disabled && props.$invalid && props.$mode === "flat" && css(["color:var(--red-alert);"]));
 StyledTextarea.displayName = "StyledTextarea";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Textarea/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n  $invalid: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px 8px 6px 8px;\n  height: auto;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  outline: none;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    !props.$invalid &&\n    css`\n      &:active,\n      &:focus,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8RACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAGjB;EAAA;AAAoB,CAAC,EASvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACf,CAACD,KAAK,CAACE,QAAQ,IACfV,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACfD,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n  $invalid: boolean;\n  $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  border-width: 1px;\n  border-style: solid;\n  background-color: var(--input-background-color);\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px 8px 6px 8px;\n  height: auto;\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  outline: none;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      border: none;\n      background-color: transparent;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    !props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      &:active,\n      &:focus,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    props.$mode === \"flat\" &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,+CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACf,CAACF,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,6BAEF,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}

package/dist/esm/components/Textarea/Textarea.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import { InputMode } from "../Input/types";
 export interface TextareaProps {
     invalid?: boolean;
+    mode?: InputMode;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "invalid"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof TextareaProps> & React.RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/esm/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAM/C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,2NAyBpB,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,qOA4BpB,CAAC"}

package/dist/esm/components/Textarea/Textarea.js

@@ -7,12 +7,15 @@ export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
     className,
     disabled = false,
     invalid = false,
+    mode = "outlined",
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
     $invalid: invalid,
     ref: ref,
+    $mode: mode,
     disabled: disabled,
+    "aria-invalid": invalid,
     className: classnames("c-textarea", {
       "c-textarea__disabled": disabled
     }, className)

package/dist/esm/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","rest","createElement","_extends","$invalid","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\n\nexport interface TextareaProps {\n  invalid?: boolean;\n}\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      invalid = false,\n      ...rest\n    }: TextareaProps &\n      Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        $invalid={invalid}\n        ref={ref}\n        disabled={disabled}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAMzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EAQEC,GAAgD,KAC7C;EAAA,IARH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACf,GAAGC;EAEiE,CAAC,GAAAL,IAAA;EAGvE,oBACEL,KAAA,CAAAW,aAAA,CAACR,cAAc,EAAAS,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEJ,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTE,QAAQ,EAAEA,QAAS;IACnBD,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACU,WAAW,GAAG,UAAU"}
+{"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","mode","rest","createElement","_extends","$invalid","$mode","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n  invalid?: boolean;\n  mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      invalid = false,\n      mode = \"outlined\",\n      ...rest\n    }: TextareaProps &\n      Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        $invalid={invalid}\n        ref={ref}\n        $mode={mode}\n        disabled={disabled}\n        aria-invalid={invalid}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAQzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EASEC,GAAgD,KAC7C;EAAA,IATH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EAEiE,CAAC,GAAAN,IAAA;EAGvE,oBACEL,KAAA,CAAAY,aAAA,CAACT,cAAc,EAAAU,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEL,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAEL,IAAK;IACZF,QAAQ,EAAEA,QAAS;IACnB,gBAAcC,OAAQ;IACtBF,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACY,WAAW,GAAG,UAAU"}