@activecollab/components 1.0.72 → 1.0.75

package/dist/esm/components/ComboBox/ComboBox.js

@@ -10,9 +10,9 @@ import { Popper } from "../Popper";
 import { RemoveScroll } from "react-remove-scroll";
 import { SpinnerLoader } from "../Loaders/Spinner/SpinnerLoader";
 import { OptionContent } from "../Select/OptionContent/OptionContent";
-import { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxWrapper } from "./Styles";
+import { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxControls } from "./Styles";
 export var ComboBox = function ComboBox(_ref) {
-  var _formRef$current;
+  var _comboBoxRef$current;
 
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
@@ -25,7 +25,8 @@ export var ComboBox = function ComboBox(_ref) {
       handleEmptyAction = _ref.handleEmptyAction,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      size = _ref.size,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "regular" : _ref$size,
       prop = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var selectedName = useMemo(function () {
@@ -79,7 +80,6 @@ export var ComboBox = function ComboBox(_ref) {
       e.stopPropagation();
     }
   }, [open, selectedName]);
-  var formRef = useRef(null);
   useEffect(function () {
     open && (childNode == null ? void 0 : childNode.focus());
     !open && (childNode == null ? void 0 : childNode.blur());
@@ -140,29 +140,26 @@ export var ComboBox = function ComboBox(_ref) {
     className: "c-combo-box",
     $open: open,
     $loading: loading,
-    $size: size,
-    ref: comboBoxRef
-  }, /*#__PURE__*/React.createElement(StyledComboBoxWrapper, {
+    ref: comboBoxRef,
     onClick: onOpen,
-    onFocus: onOpen,
-    ref: formRef,
-    $loading: loading
+    onFocus: onOpen
   }, /*#__PURE__*/React.createElement(StyledComboBoxInput, {
     ref: handleRef,
     value: loading && loadingText ? loadingText : value,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
     placeholder: placeholder,
-    disabled: disabled
-  }), !disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
+    disabled: disabled,
+    size: size
+  }), !disabled ? /*#__PURE__*/React.createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,
     variant: "text gray",
     size: "small"
   }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
-  })) : null), !disabled ? /*#__PURE__*/React.createElement(Popper, {
-    anchorEl: formRef.current,
+  })) : null, !disabled ? /*#__PURE__*/React.createElement(Popper, {
+    anchorEl: comboBoxRef.current,
     open: open,
     placement: "bottom",
     style: {
@@ -172,7 +169,7 @@ export var ComboBox = function ComboBox(_ref) {
     noIsolation: true,
     allowPinchZoom: true
   }, /*#__PURE__*/React.createElement(StyledComboBoxList, {
-    $width: (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.clientWidth
+    $width: (_comboBoxRef$current = comboBoxRef.current) == null ? void 0 : _comboBoxRef$current.clientWidth
   }, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
     inputEl: childNode,
     selected: selected,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  const formRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <StyledComboBox\n      className=\"c-combo-box\"\n      $open={open}\n      $loading={loading}\n      $size={size}\n      ref={comboBoxRef}\n    >\n      <StyledComboBoxWrapper\n        onClick={onOpen}\n        onFocus={onOpen}\n        ref={formRef}\n        $loading={loading}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n        {!disabled ? (\n          <>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n                size=\"small\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </>\n        ) : null}\n      </StyledComboBoxWrapper>\n      {!disabled ? (\n        <Popper\n          anchorEl={formRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={formRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </StyledComboBox>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxControls","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <StyledComboBox\n      className=\"c-combo-box\"\n      $open={open}\n      $loading={loading}\n      ref={comboBoxRef}\n      onClick={onOpen}\n      onFocus={onOpen}\n    >\n      <StyledComboBoxInput\n        ref={handleRef}\n        value={loading && loadingText ? loadingText : value}\n        onKeyDown={handleOnKeyDown}\n        onChange={handleOnChange}\n        placeholder={placeholder}\n        disabled={disabled}\n        size={size}\n      />\n      {!disabled ? (\n        <StyledComboBoxControls>\n          {loading ? (\n            <SpinnerLoader />\n          ) : selected ? (\n            <Button\n              onMouseDown={handleMouseDown}\n              onClick={handleDeselect}\n              variant=\"text gray\"\n              size=\"small\"\n            >\n              <StyledComboBoxCloseSmallIcon />\n            </Button>\n          ) : null}\n          <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n        </StyledComboBoxControls>\n      ) : null}\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </StyledComboBox>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

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

@@ -5,9 +5,7 @@ interface StyledComboBoxProps {
     $size?: string;
 }
 export declare const StyledComboBox: import("styled-components").StyledComponent<"div", any, StyledComboBoxProps, never>;
-export declare const StyledComboBoxWrapper: import("styled-components").StyledComponent<"div", any, {
-    $loading?: boolean | undefined;
-}, never>;
+export declare const StyledComboBoxControls: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledComboBoxCloseSmallIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const StyledComboBoxCollapseExpandSingleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {
     $open?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAMA,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,qFAkC1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAWjC,CAAC;AASF,eAAO,MAAM,4BAA4B,wqPAWxC,CAAC;AAIF,eAAO,MAAM,sCAAsC;;SAalD,CAAC;AAKF,eAAO,MAAM,mBAAmB,qYAM/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,qFAW1B,CAAC;AAIF,eAAO,MAAM,sBAAsB,oEAQlC,CAAC;AASF,eAAO,MAAM,4BAA4B,wqPAWxC,CAAC;AAIF,eAAO,MAAM,sCAAsC;;SAalD,CAAC;AAKF,eAAO,MAAM,mBAAmB,qYAS/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}

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

@@ -6,28 +6,20 @@ import { FontStyle } from "../FontStyle";
 export var StyledComboBox = styled.div.withConfig({
   displayName: "Styles__StyledComboBox",
   componentId: "sc-5qvkpb-0"
-})(["height:34px;border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
-  return props.$open && css(["border-color:var(--color-primary);"]);
-}, function (props) {
+})(["position:relative;cursor:text;", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
   return props.$loading && css(["cursor:progress;"]);
-}, function (props) {
-  return props.$size == "small" && css(["height:26px;"]);
-}, function (props) {
-  return props.$size == "big" && css(["height:42px;"]);
 });
 StyledComboBox.displayName = "StyledComboBox";
-export var StyledComboBoxWrapper = styled.div.withConfig({
-  displayName: "Styles__StyledComboBoxWrapper",
+export var StyledComboBoxControls = styled.div.withConfig({
+  displayName: "Styles__StyledComboBoxControls",
   componentId: "sc-5qvkpb-1"
-})(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
-  return props.$loading && css(["pointer-events:none;"]);
-});
-StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+})(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
+StyledComboBoxControls.displayName = "StyledComboBoxControls";
 var StyledIconDefaults = css(["flex-shrink:0;cursor:pointer;"]);
 export var StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon).withConfig({
   displayName: "Styles__StyledComboBoxCloseSmallIcon",
   componentId: "sc-5qvkpb-2"
-})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
 StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 export var StyledComboBoxCollapseExpandSingleIcon = styled(CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
@@ -39,7 +31,9 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
 export var StyledComboBoxInput = styled(Input).withConfig({
   displayName: "Styles__StyledComboBoxInput",
   componentId: "sc-5qvkpb-4"
-})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+})(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
+  "borderColor": "var(--color-primary)"
+});
 StyledComboBoxInput.displayName = "StyledComboBoxInput";
 export var StyledComboBoxList = styled.div.withConfig({
   displayName: "Styles__StyledComboBoxList",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","BoxSizingStyle","FontStyle","StyledComboBox","div","props","$open","$loading","$size","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","$width"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,EAAmCC,cAAnC,QAAyD,qBAAzD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAQA,OAAO,IAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,mNAQvBF,SARuB,EASvBD,cATuB,EAWvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,wCADA;AAAA,CAXuB,EAiBvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,sBADA;AAAA,CAjBuB,EAuBvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,IAAe,OAAf,IACAX,GADA,kBADA;AAAA,CAvBuB,EA6BvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,IAAe,KAAf,IACAX,GADA,kBADA;AAAA,CA7BuB,CAApB;AAoCPM,cAAc,CAACM,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMC,qBAAqB,GAAGd,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,0BADA;AAAA,CAN8B,CAA3B;AAaPa,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,GAAGd,GAAH,mCAAxB;AAKA,OAAO,IAAMe,4BAA4B,GAAGhB,MAAM,CAACG,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCY,kBADqC,EAOrCD,qBAPqC,CAAlC;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEA,OAAO,IAAMI,sCAAsC,GAAGjB,MAAM,CAC1DE,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/Ca,kBAH+C,EAQ/C,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,6BADA;AAAA,CAR+C,CAA5C;AAePgB,sCAAsC,CAACJ,WAAvC,GACE,wCADF;AAGA,OAAO,IAAMK,mBAAmB,GAAGlB,MAAM,CAACI,KAAD,CAAT;AAAA;AAAA;AAAA,mGAAzB;AAQPc,mBAAmB,CAACL,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMM,kBAAkB,GAAGnB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACC,KAAD;AAAA,SAAcA,KAAK,CAACW,MAApB;AAAA,CAPoB,CAAxB;AAUPD,kBAAkB,CAACN,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  height: 34px;\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  background-color: var(--input-background-color);\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$open &&\n    css`\n      border-color: var(--color-primary);\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.$size == \"small\" &&\n    css`\n      height: 26px;\n    `}\n\n  ${(props) =>\n    props.$size == \"big\" &&\n    css`\n      height: 42px;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxWrapper = styled.div<{ $loading?: boolean }>`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      pointer-events: none;\n    `}\n`;\n\nStyledComboBoxWrapper.displayName = \"StyledComboBoxWrapper\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","BoxSizingStyle","FontStyle","StyledComboBox","div","props","$loading","displayName","StyledComboBoxControls","StyledIconDefaults","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","$open","StyledComboBoxInput","StyledComboBoxList","$width"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,EAAmCC,cAAnC,QAAyD,qBAAzD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AASA,OAAO,IAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,qDAGvBF,SAHuB,EAIvBD,cAJuB,EAMvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAT,GADA,sBADA;AAAA,CANuB,CAApB;AAaPM,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMC,sBAAsB,GAAGZ,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,2GAA5B;AAUPI,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;AAEA,IAAME,kBAAkB,GAAGZ,GAAH,mCAAxB;AAKA,OAAO,IAAMa,4BAA4B,GAAGd,MAAM,CAACG,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCU,kBADqC,EAOrCN,cAPqC,CAAlC;AAaPO,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEA,OAAO,IAAMI,sCAAsC,GAAGf,MAAM,CAC1DE,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/CW,kBAH+C,EAQ/C,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACO,KAAN,IACAf,GADA,6BADA;AAAA,CAR+C,CAA5C;AAePc,sCAAsC,CAACJ,WAAvC,GACE,wCADF;AAGA,OAAO,IAAMM,mBAAmB,GAAGjB,MAAM,CAACI,KAAD,CAAT;AAAA;AAAA;AAAA,gGAM5BG,cAN4B,EAOxB;AAAA;AAAA,CAPwB,CAAzB;AAWPU,mBAAmB,CAACN,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMO,kBAAkB,GAAGlB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACC,KAAD;AAAA,SAAcA,KAAK,CAACU,MAApB;AAAA,CAPoB,CAAxB;AAUPD,kBAAkB,CAACP,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  position: relative;\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledComboBoxControls.displayName = \"StyledComboBoxControls\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBox}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  padding-right: 80px;\n\n  ${StyledComboBox}:hover & {\n    ${tw`tw-border-primary`}\n  }\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGA8TvB,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGA8UvB,CAAC"}

package/dist/esm/components/GlobalStyle.js

@@ -1,3 +1,3 @@
 import { createGlobalStyle } from "styled-components";
-export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
+export var GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
 //# sourceMappingURL=GlobalStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,mjNAAjB","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n`;\n"],"file":"GlobalStyle.js"}
+{"version":3,"sources":["../../../src/components/GlobalStyle.ts"],"names":["createGlobalStyle","GlobalStyle"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,mBAAlC;AAEA,OAAO,IAAMC,WAAW,GAAGD,iBAAH,2uOAAjB","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --red-alert: rgb(237, 97, 97);\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n`;\n"],"file":"GlobalStyle.js"}

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

@@ -4,10 +4,14 @@ import { FontStyle } from "../FontStyle";
 export var StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-0"
-})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], FontStyle, BoxSizingStyle, function (props) {
+})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
+  "fontSize": "0.875rem"
+}, FontStyle, BoxSizingStyle, function (props) {
   return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
 }, function (props) {
-  return props.$size === "big" && css(["height:40px;font-size:16px;"]);
+  return props.$size === "big" && css(["", " height:40px;"], {
+    "fontSize": "1rem"
+  });
 }, function (props) {
   return props.disabled ? css(["", ""], {
     "cursor": "not-allowed",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,2TAcpBF,SAdoB,EAepBD,cAfoB,EAiBpB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,oCADA;AAAA,CAjBoB,EAwBpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,IACAN,GADA,iCADA;AAAA,CAxBoB,EA+BpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,GACIP,GADJ,WAEU;AAAA;AAAA;AAAA;AAAA,GAFV,IAIIA,GAJJ,+CAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;AAuDPG,WAAW,CAACK,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\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      font-size: 16px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledInput","input","props","$size","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAV;AAAA;AAAA;AAAA,iTAGlB;AAAA;AAAA,CAHkB,EAcpBF,SAdoB,EAepBD,cAfoB,EAiBpB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,IACAN,GADA,oCADA;AAAA,CAjBoB,EAwBpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,IACAN,GADA,wBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAxBoB,EA+BpB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,GACIP,GADJ,WAEU;AAAA;AAAA;AAAA;AAAA,GAFV,IAIIA,GAJJ,+CAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;AAuDPG,WAAW,CAACK,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\n  ${tw`tw-text-body-2`}\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\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      ${tw`tw-text-body-1`}\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

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

@@ -4,7 +4,9 @@ import { FontStyle } from "../FontStyle";
 export var StyledTextarea = styled.textarea.withConfig({
   displayName: "Styles__StyledTextarea",
   componentId: "sc-m6jqw8-0"
-})(["border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;padding:4px 10px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{color:var(--color-theme-600);}", ""], FontStyle, BoxSizingStyle, function (props) {
+})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{color:var(--color-theme-600);}", ""], {
+  "fontSize": "0.875rem"
+}, FontStyle, BoxSizingStyle, function (props) {
   return !props.disabled && css(["&:hover{outline:none !important;", "}"], {
     "borderColor": "var(--color-primary)"
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","props","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAV;AAAA;AAAA;AAAA,+XAWvBF,SAXuB,EAYvBD,cAZuB,EAcvB,UAACI,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,IACAN,GADA,4CAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAduB,EAyBnB;AAAA;AAAA,CAzBmB,EAoCvB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAN,GADA,qEAGM;AAAA;AAAA;AAAA;AAAA,GAHN,CADA;AAAA,CApCuB,CAApB;AAgDPG,cAAc,CAACI,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  padding: 4px 10px 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  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    !props.disabled &&\n    css`\n      &:hover {\n        outline: none !important;\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &:active, &:focus {\n    outline: none !important;\n    ${tw`tw-border-primary`}\n  }\n\n  &:focus {\n    box-shadow: none;\n  }\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      outline: none;\n      ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n\n      &:hover {\n        border-color: var(--border-primary);\n      }\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","props","disabled","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAOA,OAAO,IAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAV;AAAA;AAAA;AAAA,qXACrB;AAAA;AAAA,CADqB,EAWvBF,SAXuB,EAYvBD,cAZuB,EAcvB,UAACI,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,IACAN,GADA,4CAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAduB,EAyBnB;AAAA;AAAA,CAzBmB,EAoCvB,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAN,GADA,qEAGM;AAAA;AAAA;AAAA;AAAA,GAHN,CADA;AAAA,CApCuB,CAApB;AAgDPG,cAAc,CAACI,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  ${tw`tw-text-body-2`}\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  padding: 4px 10px 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  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    !props.disabled &&\n    css`\n      &:hover {\n        outline: none !important;\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &:active, &:focus {\n    outline: none !important;\n    ${tw`tw-border-primary`}\n  }\n\n  &:focus {\n    box-shadow: none;\n  }\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      outline: none;\n      ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n\n      &:hover {\n        border-color: var(--border-primary);\n      }\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}

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

@@ -12,8 +12,7 @@ var colors = {
     "color": "var(--color-theme-600)"
   },
   quaternary: {
-    "color": "var(--color-theme-600)",
-    "opacity": "0.5"
+    "color": "var(--color-theme-transparent-500)"
   },
   "theme-primary": {
     "color": "var(--color-primary)"
@@ -43,35 +42,61 @@ export var StyledTypography = styled.div.withConfig({
 })(["", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
   return colors[props.$color];
 }, function (props) {
-  return props.$variant === "Title 1" && css(["font-size:2rem;"]);
+  return props.$variant === "Title 1" && css(["", ""], {
+    "fontSize": "2rem"
+  });
 }, function (props) {
-  return props.$variant === "Title 2" && css(["font-size:1.625rem;"]);
+  return props.$variant === "Title 2" && css(["", ""], {
+    "fontSize": "1.675rem"
+  });
 }, function (props) {
-  return props.$variant === "Header 2" && css(["font-size:1.125rem;"]);
+  return props.$variant === "Header 2" && css(["", ""], {
+    "fontSize": "1.125rem"
+  });
 }, function (props) {
-  return (props.$variant === "Header 3" || props.$variant === "Body 1") && css(["font-size:1rem;"]);
+  return (props.$variant === "Header 3" || props.$variant === "Body 1") && css(["", ""], {
+    "fontSize": "1rem"
+  });
 }, function (props) {
-  return props.$variant === "Body 2" && css(["font-size:0.875rem;"]);
+  return props.$variant === "Body 2" && css(["", ""], {
+    "fontSize": "0.875rem"
+  });
 }, function (props) {
-  return props.$variant === "Caption 1" && css(["font-size:0.75rem;"]);
+  return props.$variant === "Caption 1" && css(["", ""], {
+    "fontSize": "0.75rem"
+  });
 }, function (props) {
-  return props.$variant === "Caption 2" && css(["font-size:0.625rem;"]);
+  return props.$variant === "Caption 2" && css(["", ""], {
+    "fontSize": "0.625rem"
+  });
 }, function (props) {
   return props.$italic ? css(["font-style:italic;"]) : css(["font-style:normal;"]);
 }, function (props) {
   return props.$tabularNums ? css(["font-variant-numeric:tabular-nums;"]) : css(["font-variant-numeric:normal;"]);
 }, function (props) {
-  return props.$letterSpacing === "regular" && css(["letter-spacing:0.02em;"]);
+  return props.$letterSpacing === "regular" && css(["", ""], {
+    "letterSpacing": "0.02em"
+  });
 }, function (props) {
-  return props.$letterSpacing === "tight" && css(["letter-spacing:0em;"]);
+  return props.$letterSpacing === "tight" && css(["", ""], {
+    "letterSpacing": "0em"
+  });
 }, function (props) {
-  return props.$letterSpacing === "wide" && css(["letter-spacing:0.08em;"]);
+  return props.$letterSpacing === "wide" && css(["", ""], {
+    "letterSpacing": "0.08em"
+  });
 }, function (props) {
-  return props.$lineHeight === "regular" && css(["line-height:1.375;"]);
+  return props.$lineHeight === "regular" && css(["", ""], {
+    "lineHeight": "1.375"
+  });
 }, function (props) {
-  return props.$lineHeight === "tight" && css(["line-height:1;"]);
+  return props.$lineHeight === "tight" && css(["", ""], {
+    "lineHeight": "1"
+  });
 }, function (props) {
-  return props.$lineHeight === "loose" && css(["line-height:1.625;"]);
+  return props.$lineHeight === "loose" && css(["", ""], {
+    "lineHeight": "1.625"
+  });
 }, function (props) {
   return props.$align === "left" && css(["text-align:left;"]);
 }, function (props) {
@@ -119,13 +144,21 @@ export var StyledTypography = styled.div.withConfig({
 }, function (props) {
   return props.$wordBreak === "all" && css(["word-break:break-all;"]);
 }, function (props) {
-  return props.$weight === "regular" && css(["font-weight:400;"]);
+  return props.$weight === "regular" && css(["", ""], {
+    "fontWeight": "400"
+  });
 }, function (props) {
-  return props.$weight === "light" && css(["font-weight:300;"]);
+  return props.$weight === "light" && css(["", ""], {
+    "fontWeight": "300"
+  });
 }, function (props) {
-  return props.$weight === "medium" && css(["font-weight:500;"]);
+  return props.$weight === "medium" && css(["", ""], {
+    "fontWeight": "500"
+  });
 }, function (props) {
-  return props.$weight === "bold" && css(["font-weight:700;"]);
+  return props.$weight === "bold" && css(["", ""], {
+    "fontWeight": "700"
+  });
 });
 StyledTypography.displayName = "StyledTypography";
 //# sourceMappingURL=Styles.js.map