@activecollab/components 1.0.139 → 1.0.142

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","colors","primary","secondary","tertiary","quaternary","success","alert","StyledTypography","div","props","$color","$variant","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n  $variant:\n    | \"Title 1\"\n    | \"Title 2\"\n    | \"Header 2\"\n    | \"Header 3\"\n    | \"Body 1\"\n    | \"Body 2\"\n    | \"Caption 1\"\n    | \"Caption 2\";\n  $italic: boolean;\n  $tabularNums: boolean;\n  $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n  $lineHeight: \"tight\" | \"regular\" | \"loose\";\n  $align: \"left\" | \"center\" | \"right\" | \"justify\";\n  $decoration: \"underline\" | \"line-through\" | \"none\";\n  $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n  $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n  $whitespace?:\n    | \"regular\"\n    | \"no-wrap\"\n    | \"pre\"\n    | \"pre-wrap\"\n    | \"pre-line\"\n    | \"break-spaces\";\n  $wordBreak: \"regular\" | \"smart\" | \"all\";\n  $color:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"quaternary\"\n    | \"theme-primary\"\n    | \"theme-secondary\"\n    | \"only-white\"\n    | \"only-black\"\n    | \"page-paper\"\n    | \"success\"\n    | \"alert\";\n  $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n  primary: tw`tw-text-theme-900`,\n  secondary: tw`tw-text-theme-700`,\n  tertiary: tw`tw-text-theme-600`,\n  quaternary: tw`tw-text-theme-transparent-500`,\n  \"theme-primary\": tw`tw-text-primary`,\n  \"theme-secondary\": tw`tw-text-secondary`,\n  \"page-paper\": tw`tw-text-page-paper-main`,\n  \"only-white\": tw`tw-text-only-white`,\n  \"only-black\": tw`tw-text-only-black`,\n  success: tw`tw-text-success`,\n  alert: tw`tw-text-alert`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  //color\n  ${(props) => colors[props.$color]}\n\n  //variant - font size\n  ${(props) =>\n    props.$variant === \"Title 1\" &&\n    css`\n      ${tw`tw-text-title-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Title 2\" &&\n    css`\n      ${tw`tw-text-title-2`}\n    `}\n  ${(props) =>\n    props.$variant === \"Header 2\" &&\n    css`\n      ${tw`tw-text-header-2`}\n    `}\n  ${(props) =>\n    (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Body 2\" &&\n    css`\n      ${tw`tw-text-body-2`}\n    `}\n  ${(props) =>\n    props.$variant === \"Caption 1\" &&\n    css`\n      ${tw`tw-text-caption-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Caption 2\" &&\n    css`\n      ${tw`tw-text-caption-2`}\n    `}\n\n  //italic\n  ${(props) =>\n    props.$italic\n      ? css`\n          font-style: italic;\n        `\n      : css`\n          font-style: normal;\n        `}\n\n  //tabularNums\n  ${(props) =>\n    props.$tabularNums\n      ? css`\n          font-variant-numeric: tabular-nums;\n        `\n      : css`\n          font-variant-numeric: normal;\n        `}\n\n  //letterSpacing\n  ${(props) =>\n    props.$letterSpacing === \"regular\" &&\n    css`\n      ${tw`tw-tracking-regular`}\n    `}\n  ${(props) =>\n    props.$letterSpacing === \"tight\" &&\n    css`\n      ${tw`tw-tracking-tight`}\n    `}\n  ${(props) =>\n    props.$letterSpacing === \"wide\" &&\n    css`\n      ${tw`tw-tracking-wide`}\n    `}\n\n  //lineHeight\n  ${(props) =>\n    props.$lineHeight === \"regular\" &&\n    css`\n      ${tw`tw-leading-regular`}\n    `}\n  ${(props) =>\n    props.$lineHeight === \"tight\" &&\n    css`\n      ${tw`tw-leading-tight`}\n    `}\n  ${(props) =>\n    props.$lineHeight === \"loose\" &&\n    css`\n      ${tw`tw-leading-loose`}\n    `}\n\n  //align\n  ${(props) =>\n    props.$align === \"left\" &&\n    css`\n      text-align: left;\n    `}\n  ${(props) =>\n    props.$align === \"right\" &&\n    css`\n      text-align: right;\n    `}\n  ${(props) =>\n    props.$align === \"center\" &&\n    css`\n      text-align: center;\n    `}\n  ${(props) =>\n    props.$align === \"justify\" &&\n    css`\n      text-align: justify;\n    `}\n\n  //decoration\n  ${(props) =>\n    props.$decoration === \"none\" &&\n    css`\n      text-decoration: none;\n    `}\n  ${(props) =>\n    props.$decoration === \"underline\" &&\n    css`\n      text-decoration: underline;\n    `}\n  ${(props) =>\n    props.$decoration === \"line-through\" &&\n    css`\n      text-decoration: line-through;\n    `}\n\n  //transform\n  ${(props) =>\n    props.$transform === \"regular\" &&\n    css`\n      text-transform: none;\n    `}\n  ${(props) =>\n    props.$transform === \"uppercase\" &&\n    css`\n      text-transform: uppercase;\n    `}\n  ${(props) =>\n    props.$transform === \"lowercase\" &&\n    css`\n      text-transform: lowercase;\n    `}\n  ${(props) =>\n    props.$transform === \"capitalize\" &&\n    css`\n      text-transform: capitalize;\n    `}\n\n  //overflow\n  ${(props) =>\n    props.$overflow === \"visible\" &&\n    css`\n      overflow: visible;\n    `}\n  ${(props) =>\n    props.$overflow === \"ellipsis\" &&\n    css`\n      text-overflow: ellipsis;\n    `}\n  ${(props) =>\n    props.$overflow === \"truncate\" &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n\n  //whitespace\n  ${(props) =>\n    props.$whitespace === \"regular\" &&\n    css`\n      white-space: normal;\n    `}\n  ${(props) =>\n    props.$whitespace === \"no-wrap\" &&\n    css`\n      white-space: nowrap;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre\" &&\n    css`\n      white-space: pre;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre-wrap\" &&\n    css`\n      white-space: pre-wrap;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre-line\" &&\n    css`\n      white-space: pre-line;\n    `}\n  ${(props) =>\n    props.$whitespace === \"break-spaces\" &&\n    css`\n      white-space: break-spaces;\n    `}\n\n  //wordBreak\n  ${(props) =>\n    props.$wordBreak === \"regular\" &&\n    css`\n      overflow-wrap: normal;\n      word-break: normal;\n    `}\n  ${(props) =>\n    props.$wordBreak === \"smart\" &&\n    css`\n      overflow-wrap: break-word;\n    `}\n  ${(props) =>\n    props.$wordBreak === \"all\" &&\n    css`\n      word-break: break-all;\n    `}\n\n  //weight\n  ${(props) =>\n    props.$weight === \"regular\" &&\n    css`\n      ${tw`tw-font-regular`}\n    `}\n  ${(props) =>\n    props.$weight === \"light\" &&\n    css`\n      ${tw`tw-font-light`}\n    `}\n  ${(props) =>\n    props.$weight === \"medium\" &&\n    css`\n      ${tw`tw-font-medium`}\n    `}\n  ${(props) =>\n    props.$weight === \"bold\" &&\n    css`\n      ${tw`tw-font-bold`}\n    `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Typography/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","colors","primary","secondary","tertiary","quaternary","success","alert","warning","StyledTypography","div","props","$color","$variant","$italic","$tabularNums","$letterSpacing","$lineHeight","$align","$decoration","$transform","$overflow","$whitespace","$wordBreak","$weight","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface IStyledTypographyProps {\n  $variant:\n    | \"Title 1\"\n    | \"Title 2\"\n    | \"Header 2\"\n    | \"Header 3\"\n    | \"Body 1\"\n    | \"Body 2\"\n    | \"Caption 1\"\n    | \"Caption 2\";\n  $italic: boolean;\n  $tabularNums: boolean;\n  $letterSpacing: \"tight\" | \"regular\" | \"wide\";\n  $lineHeight: \"tight\" | \"regular\" | \"loose\";\n  $align: \"left\" | \"center\" | \"right\" | \"justify\";\n  $decoration: \"underline\" | \"line-through\" | \"none\";\n  $transform: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n  $overflow: \"truncate\" | \"ellipsis\" | \"visible\";\n  $whitespace?:\n    | \"regular\"\n    | \"no-wrap\"\n    | \"pre\"\n    | \"pre-wrap\"\n    | \"pre-line\"\n    | \"break-spaces\";\n  $wordBreak: \"regular\" | \"smart\" | \"all\";\n  $color:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"quaternary\"\n    | \"theme-primary\"\n    | \"theme-secondary\"\n    | \"only-white\"\n    | \"only-black\"\n    | \"page-paper\"\n    | \"success\"\n    | \"alert\"\n    | \"warning\";\n  $weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n}\n\nconst colors = {\n  primary: tw`tw-text-theme-900`,\n  secondary: tw`tw-text-theme-700`,\n  tertiary: tw`tw-text-theme-600`,\n  quaternary: tw`tw-text-theme-transparent-500`,\n  \"theme-primary\": tw`tw-text-primary`,\n  \"theme-secondary\": tw`tw-text-secondary`,\n  \"page-paper\": tw`tw-text-page-paper-main`,\n  \"only-white\": tw`tw-text-only-white`,\n  \"only-black\": tw`tw-text-only-black`,\n  success: tw`tw-text-success`,\n  alert: tw`tw-text-alert`,\n  warning: tw`tw-text-warning`,\n};\n\nexport const StyledTypography = styled.div<IStyledTypographyProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  //color\n  ${(props) => colors[props.$color]}\n\n  //variant - font size\n  ${(props) =>\n    props.$variant === \"Title 1\" &&\n    css`\n      ${tw`tw-text-title-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Title 2\" &&\n    css`\n      ${tw`tw-text-title-2`}\n    `}\n  ${(props) =>\n    props.$variant === \"Header 2\" &&\n    css`\n      ${tw`tw-text-header-2`}\n    `}\n  ${(props) =>\n    (props.$variant === \"Header 3\" || props.$variant === \"Body 1\") &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Body 2\" &&\n    css`\n      ${tw`tw-text-body-2`}\n    `}\n  ${(props) =>\n    props.$variant === \"Caption 1\" &&\n    css`\n      ${tw`tw-text-caption-1`}\n    `}\n  ${(props) =>\n    props.$variant === \"Caption 2\" &&\n    css`\n      ${tw`tw-text-caption-2`}\n    `}\n\n  //italic\n  ${(props) =>\n    props.$italic\n      ? css`\n          font-style: italic;\n        `\n      : css`\n          font-style: normal;\n        `}\n\n  //tabularNums\n  ${(props) =>\n    props.$tabularNums\n      ? css`\n          font-variant-numeric: tabular-nums;\n        `\n      : css`\n          font-variant-numeric: normal;\n        `}\n\n  //letterSpacing\n  ${(props) =>\n    props.$letterSpacing === \"regular\" &&\n    css`\n      ${tw`tw-tracking-regular`}\n    `}\n  ${(props) =>\n    props.$letterSpacing === \"tight\" &&\n    css`\n      ${tw`tw-tracking-tight`}\n    `}\n  ${(props) =>\n    props.$letterSpacing === \"wide\" &&\n    css`\n      ${tw`tw-tracking-wide`}\n    `}\n\n  //lineHeight\n  ${(props) =>\n    props.$lineHeight === \"regular\" &&\n    css`\n      ${tw`tw-leading-regular`}\n    `}\n  ${(props) =>\n    props.$lineHeight === \"tight\" &&\n    css`\n      ${tw`tw-leading-tight`}\n    `}\n  ${(props) =>\n    props.$lineHeight === \"loose\" &&\n    css`\n      ${tw`tw-leading-loose`}\n    `}\n\n  //align\n  ${(props) =>\n    props.$align === \"left\" &&\n    css`\n      text-align: left;\n    `}\n  ${(props) =>\n    props.$align === \"right\" &&\n    css`\n      text-align: right;\n    `}\n  ${(props) =>\n    props.$align === \"center\" &&\n    css`\n      text-align: center;\n    `}\n  ${(props) =>\n    props.$align === \"justify\" &&\n    css`\n      text-align: justify;\n    `}\n\n  //decoration\n  ${(props) =>\n    props.$decoration === \"none\" &&\n    css`\n      text-decoration: none;\n    `}\n  ${(props) =>\n    props.$decoration === \"underline\" &&\n    css`\n      text-decoration: underline;\n    `}\n  ${(props) =>\n    props.$decoration === \"line-through\" &&\n    css`\n      text-decoration: line-through;\n    `}\n\n  //transform\n  ${(props) =>\n    props.$transform === \"regular\" &&\n    css`\n      text-transform: none;\n    `}\n  ${(props) =>\n    props.$transform === \"uppercase\" &&\n    css`\n      text-transform: uppercase;\n    `}\n  ${(props) =>\n    props.$transform === \"lowercase\" &&\n    css`\n      text-transform: lowercase;\n    `}\n  ${(props) =>\n    props.$transform === \"capitalize\" &&\n    css`\n      text-transform: capitalize;\n    `}\n\n  //overflow\n  ${(props) =>\n    props.$overflow === \"visible\" &&\n    css`\n      overflow: visible;\n    `}\n  ${(props) =>\n    props.$overflow === \"ellipsis\" &&\n    css`\n      text-overflow: ellipsis;\n    `}\n  ${(props) =>\n    props.$overflow === \"truncate\" &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n\n  //whitespace\n  ${(props) =>\n    props.$whitespace === \"regular\" &&\n    css`\n      white-space: normal;\n    `}\n  ${(props) =>\n    props.$whitespace === \"no-wrap\" &&\n    css`\n      white-space: nowrap;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre\" &&\n    css`\n      white-space: pre;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre-wrap\" &&\n    css`\n      white-space: pre-wrap;\n    `}\n  ${(props) =>\n    props.$whitespace === \"pre-line\" &&\n    css`\n      white-space: pre-line;\n    `}\n  ${(props) =>\n    props.$whitespace === \"break-spaces\" &&\n    css`\n      white-space: break-spaces;\n    `}\n\n  //wordBreak\n  ${(props) =>\n    props.$wordBreak === \"regular\" &&\n    css`\n      overflow-wrap: normal;\n      word-break: normal;\n    `}\n  ${(props) =>\n    props.$wordBreak === \"smart\" &&\n    css`\n      overflow-wrap: break-word;\n    `}\n  ${(props) =>\n    props.$wordBreak === \"all\" &&\n    css`\n      word-break: break-all;\n    `}\n\n  //weight\n  ${(props) =>\n    props.$weight === \"regular\" &&\n    css`\n      ${tw`tw-font-regular`}\n    `}\n  ${(props) =>\n    props.$weight === \"light\" &&\n    css`\n      ${tw`tw-font-light`}\n    `}\n  ${(props) =>\n    props.$weight === \"medium\" &&\n    css`\n      ${tw`tw-font-medium`}\n    `}\n  ${(props) =>\n    props.$weight === \"bold\" &&\n    css`\n      ${tw`tw-font-bold`}\n    `}\n`;\n\nStyledTypography.displayName = \"StyledTypography\";\n"],"file":"Styles.js"}

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react";
 import { PolymorphicComponentPropsWithRef } from "../../utils/types";
 export interface ITypographyProps extends HTMLAttributes<HTMLElement> {
-    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "theme-primary" | "theme-secondary" | "only-white" | "only-black" | "page-paper" | "success" | "alert";
+    color?: "primary" | "secondary" | "tertiary" | "quaternary" | "theme-primary" | "theme-secondary" | "only-white" | "only-black" | "page-paper" | "success" | "alert" | "warning";
     tabularNums?: boolean;
     italic?: boolean;
     letterSpacing?: "tight" | "regular" | "wide";

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAG1D,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAC3B,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAEnE,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,eAAe,GACf,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,OAAO,CAAC;IAEZ,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAE7C,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAE3C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAEhD,UAAU,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,CAAC;IAEnD,SAAS,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;IAEjE,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAE/C,UAAU,CAAC,EACP,SAAS,GACT,SAAS,GACT,KAAK,GACL,UAAU,GACV,UAAU,GACV,cAAc,CAAC;IAEnB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,WAAW,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAChD;AAED,oBAAY,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IACrD,gCAAgC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAExD,oBAAY,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACpE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KACtB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,UAAU,EAAE,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAiDlE,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAG1D,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAC3B,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAEnE,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,eAAe,GACf,iBAAiB,GACjB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IAEd,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAE7C,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAE3C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAEhD,UAAU,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,CAAC;IAEnD,SAAS,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;IAEjE,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAE/C,UAAU,CAAC,EACP,SAAS,GACT,SAAS,GACT,KAAK,GACL,UAAU,GACV,UAAU,GACV,cAAc,CAAC;IAEnB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,WAAW,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAChD;AAED,oBAAY,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IACrD,gCAAgC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAExD,oBAAY,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACpE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KACtB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,UAAU,EAAE,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAiDlE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"names":["React","forwardRef","classNames","StyledTypography","Typography","ref","variant","as","color","italic","tabularNums","letterSpacing","lineHeight","align","decoration","transform","overflow","whitespace","wordBreak","weight","className","children","props","Component","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgCC,UAAhC,QAAkD,OAAlD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAsEA,OAAO,IAAMC,UAA0D,gBACrEH,UAAU,CACR,gBAoBEI,GApBF,EAqBK;AAAA,0BAnBDC,OAmBC;AAAA,MAnBDA,OAmBC,6BAnBS,SAmBT;AAAA,MAlBDC,EAkBC,QAlBDA,EAkBC;AAAA,wBAjBDC,KAiBC;AAAA,MAjBDA,KAiBC,2BAjBO,SAiBP;AAAA,yBAhBDC,MAgBC;AAAA,MAhBDA,MAgBC,4BAhBQ,KAgBR;AAAA,8BAfDC,WAeC;AAAA,MAfDA,WAeC,iCAfa,KAeb;AAAA,gCAdDC,aAcC;AAAA,MAdDA,aAcC,mCAde,SAcf;AAAA,6BAbDC,UAaC;AAAA,MAbDA,UAaC,gCAbY,SAaZ;AAAA,wBAZDC,KAYC;AAAA,MAZDA,KAYC,2BAZO,MAYP;AAAA,6BAXDC,UAWC;AAAA,MAXDA,UAWC,gCAXY,MAWZ;AAAA,4BAVDC,SAUC;AAAA,MAVDA,SAUC,+BAVW,SAUX;AAAA,2BATDC,QASC;AAAA,MATDA,QASC,8BATU,SASV;AAAA,6BARDC,UAQC;AAAA,MARDA,UAQC,gCARY,SAQZ;AAAA,4BAPDC,SAOC;AAAA,MAPDA,SAOC,+BAPW,SAOX;AAAA,yBANDC,MAMC;AAAA,MANDA,MAMC,4BANQ,SAMR;AAAA,MALDC,SAKC,QALDA,SAKC;AAAA,MAJDC,QAIC,QAJDA,QAIC;AAAA,MAHEC,KAGF;;AACH,MAAMC,SAAS,GAAGhB,EAAE,IAAI,KAAxB;AACA,sBACE,oBAAC,gBAAD;AACE,IAAA,EAAE,EAAEgB,SADN;AAEE,IAAA,SAAS,EAAErB,UAAU,CAAC,YAAD,EAAekB,SAAf,CAFvB;AAGE,IAAA,OAAO,EAAEX,MAHX;AAIE,IAAA,YAAY,EAAEC,WAJhB;AAKE,IAAA,cAAc,EAAEC,aALlB;AAME,IAAA,WAAW,EAAEC,UANf;AAOE,IAAA,MAAM,EAAEC,KAPV;AAQE,IAAA,WAAW,EAAEC,UARf;AASE,IAAA,UAAU,EAAEC,SATd;AAUE,IAAA,SAAS,EAAEC,QAVb;AAWE,IAAA,WAAW,EAAEC,UAXf;AAYE,IAAA,UAAU,EAAEC,SAZd;AAaE,IAAA,QAAQ,EAAEZ,OAbZ;AAcE,IAAA,MAAM,EAAEE,KAdV;AAeE,IAAA,OAAO,EAAEW,MAfX;AAgBE,IAAA,GAAG,EAAEd;AAhBP,KAiBMiB,KAjBN,GAmBGD,QAnBH,CADF;AAuBD,CA/CO,CADL;AAmDPjB,UAAU,CAACoB,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledTypography } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nexport interface ITypographyProps extends HTMLAttributes<HTMLElement> {\n  /** Font color. */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"quaternary\"\n    | \"theme-primary\"\n    | \"theme-secondary\"\n    | \"only-white\"\n    | \"only-black\"\n    | \"page-paper\"\n    | \"success\"\n    | \"alert\";\n  /** Tabular numbers. */\n  tabularNums?: boolean;\n  /** Italic font style. */\n  italic?: boolean;\n  /** Font letter spacing. */\n  letterSpacing?: \"tight\" | \"regular\" | \"wide\";\n  /** Font line height. */\n  lineHeight?: \"tight\" | \"regular\" | \"loose\";\n  /** Font align. */\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Underline font style. */\n  decoration?: \"underline\" | \"line-through\" | \"none\";\n  /** Font transform. */\n  transform?: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n  /** Font overflow. */\n  overflow?: \"truncate\" | \"ellipsis\" | \"visible\";\n  /** Font whitespace. */\n  whitespace?:\n    | \"regular\"\n    | \"no-wrap\"\n    | \"pre\"\n    | \"pre-wrap\"\n    | \"pre-line\"\n    | \"break-spaces\";\n  /** Font word break. */\n  wordBreak?: \"regular\" | \"smart\" | \"all\";\n  /** Custom className for styling. */\n  className?: string;\n  /** Element variant. */\n  variant?:\n    | \"Title 1\"\n    | \"Title 2\"\n    | \"Header 2\"\n    | \"Header 3\"\n    | \"Body 1\"\n    | \"Body 2\"\n    | \"Caption 1\"\n    | \"Caption 2\";\n  /** Font weight. */\n  weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n  /** Font size. */\n  size?: \"32\" | \"18\" | \"16\" | \"14\" | \"12\" | \"10\";\n}\n\nexport type TypographyProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ITypographyProps>;\n\nexport type TypographyComponent = <C extends React.ElementType = \"div\">(\n  props: TypographyProps<C>\n) => React.ReactElement | null;\n\nexport const Typography: TypographyComponent & { displayName?: string } =\n  forwardRef(\n    <C extends React.ElementType = \"div\">(\n      {\n        variant = \"Title 1\",\n        as,\n        color = \"primary\",\n        italic = false,\n        tabularNums = false,\n        letterSpacing = \"regular\",\n        lineHeight = \"regular\",\n        align = \"left\",\n        decoration = \"none\",\n        transform = \"regular\",\n        overflow = \"visible\",\n        whitespace = \"regular\",\n        wordBreak = \"regular\",\n        weight = \"regular\",\n        className,\n        children,\n        ...props\n      }: TypographyProps<C>,\n      ref?: PolymorphicRef<C>\n    ) => {\n      const Component = as || \"div\";\n      return (\n        <StyledTypography\n          as={Component}\n          className={classNames(\"typography\", className)}\n          $italic={italic}\n          $tabularNums={tabularNums}\n          $letterSpacing={letterSpacing}\n          $lineHeight={lineHeight}\n          $align={align}\n          $decoration={decoration}\n          $transform={transform}\n          $overflow={overflow}\n          $whitespace={whitespace}\n          $wordBreak={wordBreak}\n          $variant={variant}\n          $color={color}\n          $weight={weight}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </StyledTypography>\n      );\n    }\n  );\n\nTypography.displayName = \"Typography\";\n"],"file":"Typography.js"}
+{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"names":["React","forwardRef","classNames","StyledTypography","Typography","ref","variant","as","color","italic","tabularNums","letterSpacing","lineHeight","align","decoration","transform","overflow","whitespace","wordBreak","weight","className","children","props","Component","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgCC,UAAhC,QAAkD,OAAlD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAuEA,OAAO,IAAMC,UAA0D,gBACrEH,UAAU,CACR,gBAoBEI,GApBF,EAqBK;AAAA,0BAnBDC,OAmBC;AAAA,MAnBDA,OAmBC,6BAnBS,SAmBT;AAAA,MAlBDC,EAkBC,QAlBDA,EAkBC;AAAA,wBAjBDC,KAiBC;AAAA,MAjBDA,KAiBC,2BAjBO,SAiBP;AAAA,yBAhBDC,MAgBC;AAAA,MAhBDA,MAgBC,4BAhBQ,KAgBR;AAAA,8BAfDC,WAeC;AAAA,MAfDA,WAeC,iCAfa,KAeb;AAAA,gCAdDC,aAcC;AAAA,MAdDA,aAcC,mCAde,SAcf;AAAA,6BAbDC,UAaC;AAAA,MAbDA,UAaC,gCAbY,SAaZ;AAAA,wBAZDC,KAYC;AAAA,MAZDA,KAYC,2BAZO,MAYP;AAAA,6BAXDC,UAWC;AAAA,MAXDA,UAWC,gCAXY,MAWZ;AAAA,4BAVDC,SAUC;AAAA,MAVDA,SAUC,+BAVW,SAUX;AAAA,2BATDC,QASC;AAAA,MATDA,QASC,8BATU,SASV;AAAA,6BARDC,UAQC;AAAA,MARDA,UAQC,gCARY,SAQZ;AAAA,4BAPDC,SAOC;AAAA,MAPDA,SAOC,+BAPW,SAOX;AAAA,yBANDC,MAMC;AAAA,MANDA,MAMC,4BANQ,SAMR;AAAA,MALDC,SAKC,QALDA,SAKC;AAAA,MAJDC,QAIC,QAJDA,QAIC;AAAA,MAHEC,KAGF;;AACH,MAAMC,SAAS,GAAGhB,EAAE,IAAI,KAAxB;AACA,sBACE,oBAAC,gBAAD;AACE,IAAA,EAAE,EAAEgB,SADN;AAEE,IAAA,SAAS,EAAErB,UAAU,CAAC,YAAD,EAAekB,SAAf,CAFvB;AAGE,IAAA,OAAO,EAAEX,MAHX;AAIE,IAAA,YAAY,EAAEC,WAJhB;AAKE,IAAA,cAAc,EAAEC,aALlB;AAME,IAAA,WAAW,EAAEC,UANf;AAOE,IAAA,MAAM,EAAEC,KAPV;AAQE,IAAA,WAAW,EAAEC,UARf;AASE,IAAA,UAAU,EAAEC,SATd;AAUE,IAAA,SAAS,EAAEC,QAVb;AAWE,IAAA,WAAW,EAAEC,UAXf;AAYE,IAAA,UAAU,EAAEC,SAZd;AAaE,IAAA,QAAQ,EAAEZ,OAbZ;AAcE,IAAA,MAAM,EAAEE,KAdV;AAeE,IAAA,OAAO,EAAEW,MAfX;AAgBE,IAAA,GAAG,EAAEd;AAhBP,KAiBMiB,KAjBN,GAmBGD,QAnBH,CADF;AAuBD,CA/CO,CADL;AAmDPjB,UAAU,CAACoB,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledTypography } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nexport interface ITypographyProps extends HTMLAttributes<HTMLElement> {\n  /** Font color. */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"quaternary\"\n    | \"theme-primary\"\n    | \"theme-secondary\"\n    | \"only-white\"\n    | \"only-black\"\n    | \"page-paper\"\n    | \"success\"\n    | \"alert\"\n    | \"warning\";\n  /** Tabular numbers. */\n  tabularNums?: boolean;\n  /** Italic font style. */\n  italic?: boolean;\n  /** Font letter spacing. */\n  letterSpacing?: \"tight\" | \"regular\" | \"wide\";\n  /** Font line height. */\n  lineHeight?: \"tight\" | \"regular\" | \"loose\";\n  /** Font align. */\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Underline font style. */\n  decoration?: \"underline\" | \"line-through\" | \"none\";\n  /** Font transform. */\n  transform?: \"uppercase\" | \"lowercase\" | \"capitalize\" | \"regular\";\n  /** Font overflow. */\n  overflow?: \"truncate\" | \"ellipsis\" | \"visible\";\n  /** Font whitespace. */\n  whitespace?:\n    | \"regular\"\n    | \"no-wrap\"\n    | \"pre\"\n    | \"pre-wrap\"\n    | \"pre-line\"\n    | \"break-spaces\";\n  /** Font word break. */\n  wordBreak?: \"regular\" | \"smart\" | \"all\";\n  /** Custom className for styling. */\n  className?: string;\n  /** Element variant. */\n  variant?:\n    | \"Title 1\"\n    | \"Title 2\"\n    | \"Header 2\"\n    | \"Header 3\"\n    | \"Body 1\"\n    | \"Body 2\"\n    | \"Caption 1\"\n    | \"Caption 2\";\n  /** Font weight. */\n  weight?: \"light\" | \"regular\" | \"medium\" | \"bold\";\n  /** Font size. */\n  size?: \"32\" | \"18\" | \"16\" | \"14\" | \"12\" | \"10\";\n}\n\nexport type TypographyProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ITypographyProps>;\n\nexport type TypographyComponent = <C extends React.ElementType = \"div\">(\n  props: TypographyProps<C>\n) => React.ReactElement | null;\n\nexport const Typography: TypographyComponent & { displayName?: string } =\n  forwardRef(\n    <C extends React.ElementType = \"div\">(\n      {\n        variant = \"Title 1\",\n        as,\n        color = \"primary\",\n        italic = false,\n        tabularNums = false,\n        letterSpacing = \"regular\",\n        lineHeight = \"regular\",\n        align = \"left\",\n        decoration = \"none\",\n        transform = \"regular\",\n        overflow = \"visible\",\n        whitespace = \"regular\",\n        wordBreak = \"regular\",\n        weight = \"regular\",\n        className,\n        children,\n        ...props\n      }: TypographyProps<C>,\n      ref?: PolymorphicRef<C>\n    ) => {\n      const Component = as || \"div\";\n      return (\n        <StyledTypography\n          as={Component}\n          className={classNames(\"typography\", className)}\n          $italic={italic}\n          $tabularNums={tabularNums}\n          $letterSpacing={letterSpacing}\n          $lineHeight={lineHeight}\n          $align={align}\n          $decoration={decoration}\n          $transform={transform}\n          $overflow={overflow}\n          $whitespace={whitespace}\n          $wordBreak={wordBreak}\n          $variant={variant}\n          $color={color}\n          $weight={weight}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </StyledTypography>\n      );\n    }\n  );\n\nTypography.displayName = \"Typography\";\n"],"file":"Typography.js"}

package/dist/index.js

@@ -933,6 +933,9 @@
     },
     alert: {
       "color": "var(--red-alert)"
+    },
+    warning: {
+      "color": "var(--warning)"
     }
   };
   var StyledTypography = styled__default["default"].div.withConfig({
@@ -3877,8 +3880,10 @@
   var StyledTooltip = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledTooltip",
     componentId: "sc-rur9b5-0"
-  })(["", " ", " border-radius:8px;max-width:200px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], BoxSizingStyle, FontStyle, function (props) {
+  })(["", " ", " border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", " ", ""], BoxSizingStyle, FontStyle, function (props) {
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
+  }, function (props) {
+    return props.$width && styled.css(["width:", "px;"], props.$width);
   });
 
   var _excluded$S = ["children"];
@@ -3905,7 +3910,9 @@
         TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
         popperTooltipStyle = _ref2.popperTooltipStyle,
         popperTooltipClassName = _ref2.popperTooltipClassName,
-        disable = _ref2.disable;
+        disable = _ref2.disable,
+        _ref2$width = _ref2.width,
+        width = _ref2$width === void 0 ? 200 : _ref2$width;
 
     var _useLayerContext = useLayerContext(),
         _useLayerContext$zInd = _useLayerContext.zIndex,
@@ -3966,7 +3973,8 @@
         style: style
       }), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
         className: classnames__default["default"]("c-tooltip-ds", className),
-        $isLight: isLight
+        $isLight: isLight,
+        $width: width
       }, title));
     })));
   });
@@ -6371,7 +6379,7 @@
     }
   };
 
-  var StyledOption = styled__default["default"].label.withConfig({
+  var StyledOption = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledOption",
     componentId: "sc-1232l97-0"
   })(["", " font-size:14px;display:flex;justify-content:space-between;height:28px;padding-left:16px;padding-right:16px;margin-top:4px;margin-bottom:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition-duration:0.1s;color:var(--color-theme-900);", " ", " ", ""], {
@@ -6388,7 +6396,11 @@
         hover = _ref.hover,
         className = _ref.className,
         renderOption = _ref.renderOption,
-        onMouseEnter = _ref.onMouseEnter;
+        onMouseEnter = _ref.onMouseEnter,
+        _ref$onClick = _ref.onClick,
+        onClick = _ref$onClick === void 0 ? function () {
+      return null;
+    } : _ref$onClick;
     var handleOnMouseEnter = React.useCallback(function () {
       if (onMouseEnter) {
         onMouseEnter(id);
@@ -6399,7 +6411,8 @@
       title: name,
       onMouseEnter: handleOnMouseEnter,
       className: classnames__default["default"]("c-option", className),
-      hover: hover
+      hover: hover,
+      onClick: onClick
     }, renderOption ? renderOption : name);
   });
   Option.displayName = "Option";
@@ -6465,9 +6478,9 @@
   var StyledOptionGroupHeader = styled__default["default"].h3.withConfig({
     displayName: "Styles__StyledOptionGroupHeader",
     componentId: "sc-16v5afu-1"
-  })(["height:28px;display:flex;justify-content:space-between;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
+  })(["height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:var(--color-theme-900);margin:6px 0;*{margin:auto 0;}"]);
   StyledOptionGroupHeader.displayName = "StyledOptionGroupHeader";
-  var StyledOptionGroupOption = styled__default["default"].label.withConfig({
+  var StyledOptionGroupOption = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroupOption",
     componentId: "sc-16v5afu-2"
   })(["", ""], function (props) {
@@ -6518,24 +6531,35 @@
       e.stopPropagation();
 
       if (onChange) {
-        onChange(allOptionValues);
+        if (isAllOptionsChecked) {
+          onChange(checked.filter(function (i) {
+            return allOptionValues.includes(i) === false;
+          }));
+        } else {
+          var values = [].concat(_toConsumableArray(checked), _toConsumableArray(allOptionValues));
+          var unique = values.filter(function (item, pos) {
+            return values.indexOf(item) === pos;
+          });
+          onChange(unique);
+        }
       }
-    }, [allOptionValues, onChange]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
+    }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
+    return /*#__PURE__*/React__default["default"].createElement("li", {
       key: id,
-      className: classnames__default["default"]("c-option-group", optionGroupClassName)
+      className: classnames__default["default"]("c-option-group tw-flex-col", optionGroupClassName)
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
+      key: id
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
-      title: name,
       onMouseEnter: handleHover,
       hover: hover === id && type === "multiple"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React__default["default"].createElement("div", null, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, name, type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
       id: "".concat(id),
       checked: isAllOptionsChecked,
       onChange: handleClick,
       type: "checkbox"
-    }))), list.map(function (item) {
-      return renderOptions && renderOptions(item);
-    }));
+    }))), /*#__PURE__*/React__default["default"].createElement(List, null, list.map(function (item, index) {
+      return typeof renderOptions === "function" ? renderOptions(item, index) : item.name;
+    }))));
   };
   OptionGroup.displayName = "OptionGroup";
 
@@ -6785,12 +6809,12 @@
     });
   });
   StyledAutocompleteScrollShadow.displayName = "StyledAutocompleteScrollShadow";
-  var StyledAutocompleteBody = styled__default["default"].div.withConfig({
+  var StyledAutocompleteBody = styled__default["default"](List).withConfig({
     displayName: "Styles__StyledAutocompleteBody",
     componentId: "sc-1bc1vz9-1"
   })(["max-height:340px;overflow:auto;margin-bottom:6px;"]);
   StyledAutocompleteBody.displayName = "StyledAutocompleteBody";
-  var StyledAutocompleteNoResult = styled__default["default"].div.withConfig({
+  var StyledAutocompleteNoResult = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledAutocompleteNoResult",
     componentId: "sc-1bc1vz9-2"
   })(["", ";padding:6px 16px;margin:4px 0;&:hover{background-color:var(--color-theme-200);}color:var(--color-theme-600);"], {
@@ -6798,13 +6822,13 @@
     "userSelect": "none"
   });
   StyledAutocompleteNoResult.displayName = "StyledAutocompleteNoResult";
-  var StyledAutocompleteNewItem = styled__default["default"].label.withConfig({
+  var StyledAutocompleteNewItem = styled__default["default"](StyledOption).withConfig({
     displayName: "Styles__StyledAutocompleteNewItem",
     componentId: "sc-1bc1vz9-3"
-  })(["", ";", " padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
+  })(["", ";justify-content:start;&:before{content:\"+ \";margin-right:4px;}", ""], {
     "cursor": "pointer",
     "userSelect": "none"
-  }, FontStyle, function (props) {
+  }, function (props) {
     return props.hover && styled.css(["background-color:var(--color-theme-200);content:\"+ \";"]);
   });
   StyledAutocompleteNewItem.displayName = "StyledAutocompleteNewItem";
@@ -6839,7 +6863,11 @@
     var itemRef = React.useRef(null);
     var listRef = React.useRef(null);
     var selectedOptions = React.useMemo(function () {
-      return selected instanceof Array ? selected : [selected];
+      if (Array.isArray(selected)) {
+        return selected;
+      }
+
+      return [selected];
     }, [selected]);
     var handleSort = React.useCallback(function (opts) {
       if (keepSameOptionsOrder) {
@@ -6996,6 +7024,44 @@
         setFilter(e.target.value);
       }
     }, []);
+    var handleHoverCallback = React.useCallback(function (e) {
+      setHover({
+        item: e,
+        by: "mouse"
+      });
+    }, []);
+    var toggleSelected = React.useCallback(function (id) {
+      var result;
+
+      if (id !== null) {
+        if (type === "multiple") {
+          if (selectedOptions.includes(id)) {
+            result = selectedOptions.filter(function (_id) {
+              return _id !== id;
+            });
+          } else {
+            result = [].concat(_toConsumableArray(selectedOptions), [id]);
+          }
+        } else {
+          if (selectedOptions.includes(id)) {
+            result = null;
+          } else {
+            result = id;
+          }
+        }
+
+        setFilter("");
+      } else {
+        if (typeof handleDefaultOptionChange === "function") {
+          handleDefaultOptionChange();
+          return;
+        }
+      }
+
+      if (typeof handleChange === "function") {
+        handleChange(result);
+      }
+    }, [handleChange, handleDefaultOptionChange, selectedOptions, type]);
     var handleMouseEnter = React.useCallback(function (e) {
       if (e === undefined || e === null) {
         return setHover({
@@ -7009,13 +7075,11 @@
         by: "mouse"
       });
     }, []);
-    var handleHoverCallback = React.useCallback(function (e) {
-      setHover({
-        item: e,
-        by: "mouse"
-      });
-    }, []);
-    var handleRenderOption = React.useCallback(function (item) {
+    var handleClick = React.useCallback(function (e) {
+      e.preventDefault();
+      toggleSelected(hover.item);
+    }, [toggleSelected, hover]);
+    var handleRenderOption = React.useCallback(function (item, index) {
       if (isGroup(item)) {
         return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
           checked: selectedOptions,
@@ -7035,8 +7099,9 @@
       return /*#__PURE__*/React__default["default"].createElement(Option, {
         name: item.name,
         ref: itemRef,
-        key: item.id,
+        key: index,
         onMouseEnter: handleMouseEnter,
+        onClick: handleClick,
         id: item.id,
         hover: item.id === hover.item,
         className: optionClassName,
@@ -7051,7 +7116,7 @@
           }
         })
       });
-    }, [handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
+    }, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
     var handleOnMouseLeave = React.useCallback(function () {
       setHover({
         item: undefined,
@@ -7095,8 +7160,8 @@
           return;
         }
 
-        if (handleChange) {
-          handleChange(hover.item);
+        if (hover.item) {
+          toggleSelected(hover.item);
           setFilter("");
         }
 
@@ -7107,18 +7172,7 @@
         item: handleKeyboardMovement(e, hover.item, flatOptions, showAddNew, showDefaultOption),
         by: "keyboard"
       });
-    }, [filter, flatOptions, handleChange, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
-    var handleClick = React.useCallback(function () {
-      if (hover.item === null && handleDefaultOptionChange) {
-        handleDefaultOptionChange();
-      }
-
-      if (handleChange) {
-        handleChange(hover === null || hover === void 0 ? void 0 : hover.item);
-      }
-
-      setFilter("");
-    }, [handleChange, handleDefaultOptionChange, hover]);
+    }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
     React.useEffect(function () {
       if (inputEl) {
         inputEl.onkeydown = handleOnKeyDown;
@@ -7145,7 +7199,6 @@
       var onScroll = _ref2.onScroll;
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteBody, {
         key: "body",
-        onChange: handleClick,
         onMouseLeave: handleOnMouseLeave
       }, /*#__PURE__*/React__default["default"].createElement(reactCustomScrollbars.Scrollbars, {
         ref: listRef,
@@ -7158,6 +7211,10 @@
         ref: itemRef,
         hover: hover.item === null,
         onMouseEnter: handleMouseEnter,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          toggleSelected(null);
+        },
         renderOption: renderOption({
           name: defaultValue,
           id: null
@@ -7168,8 +7225,8 @@
             return null;
           }
         })
-      }), list.map(function (item) {
-        return handleRenderOption(item);
+      }), list.map(function (item, index) {
+        return handleRenderOption(item, index);
       }), showNoResult && renderNoResult, showAddNew && renderAddNew));
     });
   };
@@ -7402,7 +7459,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$t = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose"];
+  var _excluded$t = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
         type = _ref$type === void 0 ? "single" : _ref$type,
@@ -7432,6 +7489,7 @@
         keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
         onSelectOpen = _ref.onSelectOpen,
         onSelectClose = _ref.onSelectClose,
+        renderOption = _ref.renderOption,
         prop = _objectWithoutProperties(_ref, _excluded$t);
 
     var _useState = React.useState(),
@@ -7484,41 +7542,12 @@
       open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
     }, [childNode, open]);
     var handleChange = React.useCallback(function (selectedValue) {
-      if (selectedValue !== null) {
-        if (type === "single") {
-          if (forceCloseMenu) {
-            setOpen(false);
-          }
-
-          return onChange(selectedValue);
-        } // multiple
-
-
-        var value = function value() {
-          if (selectedValue instanceof Array) {
-            if (selectedValue.every(function (v) {
-              return selectedOptions.includes(v);
-            })) {
-              return selectedOptions.filter(function (v) {
-                return !selectedValue.includes(v);
-              });
-            }
-
-            return selectedValue.concat(selectedOptions);
-          }
-
-          if (selectedOptions.includes(selectedValue)) {
-            return selectedOptions.filter(function (option) {
-              return option !== selectedValue;
-            });
-          }
-
-          return [].concat(_toConsumableArray(selectedOptions), [selectedValue]);
-        };
-
-        return onChange(value());
+      if (forceCloseMenu) {
+        setOpen(false);
       }
-    }, [onChange, type, forceCloseMenu, selectedOptions]);
+
+      onChange(selectedValue);
+    }, [onChange, forceCloseMenu]);
     var onClose = React.useCallback(function () {
       setOpen(false);
 
@@ -7577,6 +7606,10 @@
       }
     }, [onChange, type, forceCloseMenu, selectedOptions.length, allOptionValues]);
     var handleRenderOption = React.useCallback(function (option, props) {
+      if (typeof renderOption === "function") {
+        return renderOption(option, props);
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
         imageUrl: option.image,
         color: option.color,
@@ -7588,7 +7621,7 @@
       }, props)) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, _extends({
         checked: selectedOptions.length < 1 || !selectedOptions[0]
       }, props)) : type === "multiple" ? /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, props) : /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, props));
-    }, [isAllOptionsChecked, selectedOptions, type]);
+    }, [isAllOptionsChecked, renderOption, selectedOptions, type]);
     return /*#__PURE__*/React__default["default"].createElement(Tag, props, /*#__PURE__*/React__default["default"].createElement("div", null, !disableSearch ? /*#__PURE__*/React__default["default"].createElement(StyledSelectForm, {
       ref: formRef
     }, /*#__PURE__*/React__default["default"].createElement(StyledSelectInput, {
@@ -10396,7 +10429,7 @@
   })(["transform:rotate(180deg);margin-left:8px;flex-shrink:0;"]);
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$5 = ["children", "type", "size", "invalid"];
+  var _excluded$5 = ["children", "type", "size", "invalid", "endAdornment"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         _ref$type = _ref.type,
@@ -10405,6 +10438,7 @@
         size = _ref$size === void 0 ? "regular" : _ref$size,
         _ref$invalid = _ref.invalid,
         invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+        endAdornment = _ref.endAdornment,
         rest = _objectWithoutProperties(_ref, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
@@ -10418,7 +10452,7 @@
       overflow: "truncate",
       whitespace: "no-wrap",
       variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
-    }, children), /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, null));
+    }, children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, null));
   });
   SelectTrigger.displayName = "SelectTrigger";
 
@@ -11092,7 +11126,7 @@
   });
   Label.displayName = "Label";
 
-  var GlobalStyle = styled.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);}}"]);
+  var GlobalStyle = styled.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);--warning:#ffcc6b;--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);}}"]);
 
   var StyledSvg = styled__default["default"].svg.withConfig({
     displayName: "Styles__StyledSvg",