npm - @frontify/fondue - Versions diffs - 12.0.0-beta.6 → 12.0.0-beta.8 - Mend

@frontify/fondue 12.0.0-beta.6 → 12.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (601) hide show

package/dist/components/AssetInput/AssetInput.es.js CHANGED Viewed

@@ -84,7 +84,7 @@ import "../../foundation/Icon/Generated/IconArrowCircleDown16.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleDown20.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleDown24.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleDown32.es.js";
-import x from "../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
+import v from "../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp12.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp16.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp20.es.js";
@@ -814,7 +814,7 @@ import "../../foundation/Icon/Generated/IconImage16.es.js";
 import "../../foundation/Icon/Generated/IconImage20.es.js";
 import "../../foundation/Icon/Generated/IconImage24.es.js";
 import "../../foundation/Icon/Generated/IconImage32.es.js";
-import v from "../../foundation/Icon/Generated/IconImageStack.es.js";
+import x from "../../foundation/Icon/Generated/IconImageStack.es.js";
 import "../../foundation/Icon/Generated/IconImageStack12.es.js";
 import "../../foundation/Icon/Generated/IconImageStack16.es.js";
 import "../../foundation/Icon/Generated/IconImageStack20.es.js";
@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1644,7 +1656,7 @@ import { merge as p } from "../../utilities/merge.es.js";
 import { MultiAssetPreview as S } from "./MultiAssetPreview/MultiAssetPreview.es.js";
 import { SelectedAsset as N } from "./SingleAsset/SelectedAsset.es.js";
 var I = /* @__PURE__ */ ((r) => (r.Small = "Small", r.Large = "Large", r))(I || {});
-const t3 = ({
+const n3 = ({
   assets: r = [],
   numberOfLocations: c = 1,
   actions: e = [],
@@ -1678,11 +1690,11 @@ const t3 = ({
     className: p(["tw-flex tw-flex-col tw-h-8", o && "tw-pr-3"]),
     "data-test-id": "asset-input-upload"
   }, /* @__PURE__ */ t.createElement("label", {
-    className: "tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s tw-text-black-80 tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-text-button-text tw-font-medium",
+    className: "tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s  tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black",
     htmlFor: w
   }, /* @__PURE__ */ t.createElement("span", {
     className: "tw--ml-1 tw-mr-1.5"
-  }, /* @__PURE__ */ t.createElement(x, {
+  }, /* @__PURE__ */ t.createElement(v, {
     size: E.Size20
   })), "Upload"), /* @__PURE__ */ t.createElement("input", {
     id: w,
@@ -1698,11 +1710,11 @@ const t3 = ({
     style: b.Default,
     onClick: o,
     emphasis: g.Weak,
-    icon: /* @__PURE__ */ t.createElement(v, null)
+    icon: /* @__PURE__ */ t.createElement(x, null)
   }, "Browse")));
 };
 export {
-  t3 as AssetInput,
+  n3 as AssetInput,
   I as AssetInputSize
 };
 //# sourceMappingURL=AssetInput.es.js.map

package/dist/components/AssetInput/AssetInput.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, FC, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n name: string;\n};\n\nexport type ImageAsset = {\n type: 'image' \| 'logo';\n name: string;\n extension: string;\n src?: string;\n alt?: string;\n icon?: undefined;\n size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n type: 'audio';\n extension: string;\n src?: undefined;\n alt?: undefined;\n icon?: undefined;\n size: number;\n};\n\ntype IconAsset = BaseAsset & {\n type: 'icon';\n extension?: undefined;\n src?: undefined;\n alt?: undefined;\n icon: ReactElement<IconProps>;\n size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type AssetType =\n \| (ImageAsset & UploadSource)\n \| (ImageAsset & LibrarySource)\n \| (IconAsset & UploadSource)\n \| (IconAsset & LibrarySource)\n \| (OtherAsset & UploadSource)\n \| (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n assets?: AssetType[];\n size: AssetInputSize;\n numberOfLocations?: number;\n actions?: ActionMenuProps['menuBlocks'];\n isLoading?: boolean;\n onUploadClick?: (files: FileList) => void;\n onLibraryClick?: () => void;\n onMultiAssetClick?: () => void;\n acceptFileType?: string;\n};\n\nexport const AssetInput: FC<AssetInputProps> = ({\n assets = [],\n numberOfLocations = 1,\n actions = [],\n size = AssetInputSize.Small,\n isLoading = false,\n onLibraryClick,\n onUploadClick,\n onMultiAssetClick,\n acceptFileType,\n}) => {\n const assetsLength = assets.length;\n const id = useMemoizedId();\n\n const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files;\n\n if (files && onUploadClick) {\n onUploadClick(files);\n }\n };\n\n if ((isLoading \|\| assetsLength === 1) && actions) {\n return <SelectedAsset asset={assets[0]} size={size} actions={actions} isLoading={isLoading} />;\n }\n\n if (assetsLength > 1 && onMultiAssetClick) {\n return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n }\n\n return (\n <div\n data-test-id=\"asset-input-placeholder\"\n className={merge([\n 'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n ])}\n >\n {onUploadClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n data-test-id=\"asset-input-upload\"\n >\n <label\n className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s tw-~~text-black-80 tw-~~bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-~~text~~-~~button-text~~ tw-~~font~~-~~medium~~\"\n htmlFor={id}\n >\n <span className=\"tw--ml-1 tw-mr-1.5\">\n <IconArrowCircleUp size={IconSize.Size20} />\n </span>\n Upload\n </label>\n <input\n id={id}\n className=\"tw-hidden\"\n type=\"file\"\n accept={acceptFileType}\n multiple={!!onMultiAssetClick}\n onChange={onFileChange}\n />\n </div>\n )}\n {onLibraryClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n data-test-id=\"asset-input-library\"\n >\n <Button\n style={ButtonStyle.Default}\n onClick={onLibraryClick}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconImageStack />}\n >\n Browse\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDY,IAAA,sBAAA,MACA,GAAA,QAAA,SACA,EAAA,QAAA,SAFA,IAAA,KAAA,CAAA,CAAA;AAyBL,MAAM,KAAkC,CAAC;AAAA,EAC5C,YAAS,CAAC;AAAA,EACV,uBAAoB;AAAA,EACpB,aAAU,CAAC;AAAA,EACX,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACE;AACF,QAAM,IAAe,EAAO,QACtB,IAAK,KAEL,IAAe,CAAC,MAAyC;AACrD,UAAA,IAAQ,EAAM,OAAO;AAE3B,IAAI,KAAS,KACT,EAAc,CAAK;AAAA,EACvB;AAGC,SAAA,MAAa,MAAiB,MAAM,IAC7B,kBAAA,cAAA,GAAA;AAAA,IAAc,OAAO,EAAO;AAAA,IAAI;AAAA,IAAY;AAAA,IAAkB;AAAA,EAAA,CAAsB,IAG5F,IAAe,KAAK,IACZ,kBAAA,cAAA,GAAA;AAAA,IAAkB;AAAA,IAAgB,SAAS;AAAA,IAAmB;AAAA,EAAA,CAAsC,IAI3G,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAiB,IAAiB,kDAAkD;AAAA,IAAA,CACvF;AAAA,EAAA,GAEA,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAkB,SAAS,CAAC;AAAA,IAC5E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,SAAA;AAAA,IACG,WAAU;AAAA,IACV,SAAS;AAAA,EAAA,GAER,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,GAAA;AAAA,IAAkB,MAAM,EAAS;AAAA,EAAQ,CAAA,CAC9C,GAAO,QAEX,GACC,kBAAA,cAAA,SAAA;AAAA,IACG;AAAA,IACA,WAAU;AAAA,IACV,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU,CAAC,CAAC;AAAA,IACZ,UAAU;AAAA,EACd,CAAA,CACJ,GAEH,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAiB,SAAS,CAAC;AAAA,IAC3E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO,EAAY;AAAA,IACnB,SAAS;AAAA,IACT,UAAU,EAAe;AAAA,IACzB,sCAAO,GAAe,IAAA;AAAA,EAAA,GACzB,QAED,CACJ,CAER;AAER;"}
1	+ {"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenuProps } from '@components/ActionMenu/ActionMenu/ActionMenu';\nimport { Button, ButtonEmphasis, ButtonStyle } from '@components/Button';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon/';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ChangeEvent, FC, ReactElement } from 'react';\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\n\ntype BaseAsset = {\n name: string;\n};\n\nexport type ImageAsset = {\n type: 'image' \| 'logo';\n name: string;\n extension: string;\n src?: string;\n alt?: string;\n icon?: undefined;\n size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n type: 'audio';\n extension: string;\n src?: undefined;\n alt?: undefined;\n icon?: undefined;\n size: number;\n};\n\ntype IconAsset = BaseAsset & {\n type: 'icon';\n extension?: undefined;\n src?: undefined;\n alt?: undefined;\n icon: ReactElement<IconProps>;\n size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type AssetType =\n \| (ImageAsset & UploadSource)\n \| (ImageAsset & LibrarySource)\n \| (IconAsset & UploadSource)\n \| (IconAsset & LibrarySource)\n \| (OtherAsset & UploadSource)\n \| (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n assets?: AssetType[];\n size: AssetInputSize;\n numberOfLocations?: number;\n actions?: ActionMenuProps['menuBlocks'];\n isLoading?: boolean;\n onUploadClick?: (files: FileList) => void;\n onLibraryClick?: () => void;\n onMultiAssetClick?: () => void;\n acceptFileType?: string;\n};\n\nexport const AssetInput: FC<AssetInputProps> = ({\n assets = [],\n numberOfLocations = 1,\n actions = [],\n size = AssetInputSize.Small,\n isLoading = false,\n onLibraryClick,\n onUploadClick,\n onMultiAssetClick,\n acceptFileType,\n}) => {\n const assetsLength = assets.length;\n const id = useMemoizedId();\n\n const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files;\n\n if (files && onUploadClick) {\n onUploadClick(files);\n }\n };\n\n if ((isLoading \|\| assetsLength === 1) && actions) {\n return <SelectedAsset asset={assets[0]} size={size} actions={actions} isLoading={isLoading} />;\n }\n\n if (assetsLength > 1 && onMultiAssetClick) {\n return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n }\n\n return (\n <div\n data-test-id=\"asset-input-placeholder\"\n className={merge([\n 'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n ])}\n >\n {onUploadClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n data-test-id=\"asset-input-upload\"\n >\n <label\n className=\"tw-relative tw-cursor-pointer tw-rounded tw-flex tw-items-center tw-justify-center tw-px-4 tw-h-9 tw-text-s tw-bg-transparent hover:tw-bg-black-10 hover:tw-text-black active:tw-bg-black-20 active:tw-text-black dark:tw-text-white dark:hover:tw-bg-black-superdark dark:active:tw-bg-black-superdark dark:hover:tw-text-white tw-font-medium tw-text-black\"\n htmlFor={id}\n >\n <span className=\"tw--ml-1 tw-mr-1.5\">\n <IconArrowCircleUp size={IconSize.Size20} />\n </span>\n Upload\n </label>\n <input\n id={id}\n className=\"tw-hidden\"\n type=\"file\"\n accept={acceptFileType}\n multiple={!!onMultiAssetClick}\n onChange={onFileChange}\n />\n </div>\n )}\n {onLibraryClick && (\n <div\n className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n data-test-id=\"asset-input-library\"\n >\n <Button\n style={ButtonStyle.Default}\n onClick={onLibraryClick}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconImageStack />}\n >\n Browse\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDY,IAAA,sBAAA,MACA,GAAA,QAAA,SACA,EAAA,QAAA,SAFA,IAAA,KAAA,CAAA,CAAA;AAyBL,MAAM,KAAkC,CAAC;AAAA,EAC5C,YAAS,CAAC;AAAA,EACV,uBAAoB;AAAA,EACpB,aAAU,CAAC;AAAA,EACX,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACE;AACF,QAAM,IAAe,EAAO,QACtB,IAAK,KAEL,IAAe,CAAC,MAAyC;AACrD,UAAA,IAAQ,EAAM,OAAO;AAE3B,IAAI,KAAS,KACT,EAAc,CAAK;AAAA,EACvB;AAGC,SAAA,MAAa,MAAiB,MAAM,IAC7B,kBAAA,cAAA,GAAA;AAAA,IAAc,OAAO,EAAO;AAAA,IAAI;AAAA,IAAY;AAAA,IAAkB;AAAA,EAAA,CAAsB,IAG5F,IAAe,KAAK,IACZ,kBAAA,cAAA,GAAA;AAAA,IAAkB;AAAA,IAAgB,SAAS;AAAA,IAAmB;AAAA,EAAA,CAAsC,IAI3G,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAiB,IAAiB,kDAAkD;AAAA,IAAA,CACvF;AAAA,EAAA,GAEA,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAkB,SAAS,CAAC;AAAA,IAC5E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,SAAA;AAAA,IACG,WAAU;AAAA,IACV,SAAS;AAAA,EAAA,GAER,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,GAAA;AAAA,IAAkB,MAAM,EAAS;AAAA,EAAQ,CAAA,CAC9C,GAAO,QAEX,GACC,kBAAA,cAAA,SAAA;AAAA,IACG;AAAA,IACA,WAAU;AAAA,IACV,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,UAAU,CAAC,CAAC;AAAA,IACZ,UAAU;AAAA,EACd,CAAA,CACJ,GAEH,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM,CAAC,8BAA8B,KAAiB,SAAS,CAAC;AAAA,IAC3E,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO,EAAY;AAAA,IACnB,SAAS;AAAA,IACT,UAAU,EAAe;AAAA,IACzB,sCAAO,GAAe,IAAA;AAAA,EAAA,GACzB,QAED,CACJ,CAER;AAER;"}

package/dist/components/AssetInput/AssetThumbnail.es.js CHANGED Viewed

@@ -1339,6 +1339,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1648,7 +1660,7 @@ const s = (t, r) => {
     default:
       return "tw-w-14 tw-h-full";
   }
-}, q2 = ({ asset: t, size: r, isActive: p = !1, isMultiAsset: e = !1 }) => {
+}, W2 = ({ asset: t, size: r, isActive: p = !1, isMultiAsset: e = !1 }) => {
   const m = t.type === "icon" || t.type === "audio" ? t.type : "default";
   return /* @__PURE__ */ i.createElement("div", {
     className: a([
@@ -1670,6 +1682,6 @@ const s = (t, r) => {
   }));
 };
 export {
-  q2 as AssetThumbnail
+  W2 as AssetThumbnail
 };
 //# sourceMappingURL=AssetThumbnail.es.js.map

package/dist/components/AssetInput/AssetThumbnail.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["import { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, cloneElement } from 'react';\nimport { AssetInputProps, AssetInputSize } from './AssetInput';\nimport { SelectedAssetProps } from './SingleAsset/SelectedAsset';\nimport { IconMusicNote } from '@foundation/Icon';\n\ntype AssetThumbnailProps = {\n asset: SelectedAssetProps['asset'];\n size: AssetInputProps['size'];\n isActive?: boolean;\n isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n switch (true) {\n case size === AssetInputSize.Large:\n return 'tw-w-full tw-h-32';\n case isMultiAsset:\n return 'tw-w-11 tw-h-11';\n default:\n return 'tw-w-14 tw-h-full';\n }\n};\n\nexport const AssetThumbnail: FC<AssetThumbnailProps> = ({ asset, size, isActive = false, isMultiAsset = false }) => {\n const thumbnailVariant = asset.type === 'icon' \|\| asset.type === 'audio' ? asset.type : 'default';\n\n return (\n <div\n className={merge([\n 'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n getIconSizeClassNames(size, isMultiAsset),\n isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n ])}\n data-test-id=\"asset-input-thumbnail\"\n >\n {thumbnailVariant === 'icon' && (\n <span data-test-id=\"asset-input-thumbnail-icon\">\n {asset.icon && cloneElement(asset.icon, { size: IconSize.Size24 })}\n </span>\n )}\n {thumbnailVariant === 'audio' && (\n <IconMusicNote size={IconSize.Size24} data-test-id=\"asset-input-thumbnail-audio\" />\n )}\n {thumbnailVariant === 'default' && (\n <img\n src={asset.src}\n alt={asset.alt \|\| ''}\n className=\"tw-max-h-full\"\n data-test-id=\"asset-input-thumbnail-image\"\n />\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,IAAwB,CAAC,GAAsB,MAA0B;AACnE,UAAA;AAAA,SACC,MAAS,EAAe;AAClB,aAAA;AAAA,SACN;AACM,aAAA;AAAA;AAEA,aAAA;AAAA;AAEnB,GAEa,KAA0C,CAAC,EAAE,UAAO,SAAM,cAAW,IAAO,kBAAe,SAAY;AAC1G,QAAA,IAAmB,EAAM,SAAS,UAAU,EAAM,SAAS,UAAU,EAAM,OAAO;AAExF,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,EAAsB,GAAM,CAAY;AAAA,MACxC,IAAW,yCAAyC;AAAA,IAAA,CACvD;AAAA,IACD,gBAAa;AAAA,EAEZ,GAAA,MAAqB,UACjB,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,EAAA,GACd,EAAM,QAAQ,EAAa,EAAM,MAAM,EAAE,MAAM,EAAS,OAAQ,CAAA,CACrE,GAEH,MAAqB,WACjB,kBAAA,cAAA,GAAA;AAAA,IAAc,MAAM,EAAS;AAAA,IAAQ,gBAAa;AAAA,EAA8B,CAAA,GAEpF,MAAqB,aACjB,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK,EAAM;AAAA,IACX,KAAK,EAAM,OAAO;AAAA,IAClB,WAAU;AAAA,IACV,gBAAa;AAAA,EACjB,CAAA,CAER;AAER;"}
1	+ {"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["import { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { FC, cloneElement } from 'react';\nimport { AssetInputProps, AssetInputSize } from './AssetInput';\nimport { SelectedAssetProps } from './SingleAsset/SelectedAsset';\nimport { IconMusicNote } from '@foundation/Icon';\n\ntype AssetThumbnailProps = {\n asset: SelectedAssetProps['asset'];\n size: AssetInputProps['size'];\n isActive?: boolean;\n isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n switch (true) {\n case size === AssetInputSize.Large:\n return 'tw-w-full tw-h-32';\n case isMultiAsset:\n return 'tw-w-11 tw-h-11';\n default:\n return 'tw-w-14 tw-h-full';\n }\n};\n\nexport const AssetThumbnail: FC<AssetThumbnailProps> = ({ asset, size, isActive = false, isMultiAsset = false }) => {\n const thumbnailVariant = asset.type === 'icon' \|\| asset.type === 'audio' ? asset.type : 'default';\n\n return (\n <div\n className={merge([\n 'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n getIconSizeClassNames(size, isMultiAsset),\n isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n ])}\n data-test-id=\"asset-input-thumbnail\"\n >\n {thumbnailVariant === 'icon' && (\n <span data-test-id=\"asset-input-thumbnail-icon\">\n {asset.icon && cloneElement(asset.icon, { size: IconSize.Size24 })}\n </span>\n )}\n {thumbnailVariant === 'audio' && (\n <IconMusicNote size={IconSize.Size24} data-test-id=\"asset-input-thumbnail-audio\" />\n )}\n {thumbnailVariant === 'default' && (\n <img\n src={asset.src}\n alt={asset.alt \|\| ''}\n className=\"tw-max-h-full\"\n data-test-id=\"asset-input-thumbnail-image\"\n />\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,IAAwB,CAAC,GAAsB,MAA0B;AACnE,UAAA;AAAA,SACC,MAAS,EAAe;AAClB,aAAA;AAAA,SACN;AACM,aAAA;AAAA;AAEA,aAAA;AAAA;AAEnB,GAEa,KAA0C,CAAC,EAAE,UAAO,SAAM,cAAW,IAAO,kBAAe,SAAY;AAC1G,QAAA,IAAmB,EAAM,SAAS,UAAU,EAAM,SAAS,UAAU,EAAM,OAAO;AAExF,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,EAAsB,GAAM,CAAY;AAAA,MACxC,IAAW,yCAAyC;AAAA,IAAA,CACvD;AAAA,IACD,gBAAa;AAAA,EAEZ,GAAA,MAAqB,UACjB,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,EAAA,GACd,EAAM,QAAQ,EAAa,EAAM,MAAM,EAAE,MAAM,EAAS,OAAQ,CAAA,CACrE,GAEH,MAAqB,WACjB,kBAAA,cAAA,GAAA;AAAA,IAAc,MAAM,EAAS;AAAA,IAAQ,gBAAa;AAAA,EAA8B,CAAA,GAEpF,MAAqB,aACjB,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK,EAAM;AAAA,IACX,KAAK,EAAM,OAAO;AAAA,IAClB,WAAU;AAAA,IACV,gBAAa;AAAA,EACjB,CAAA,CAER;AAER;"}

package/dist/components/AssetInput/MultiAssetPreview/MultiAssetPreview.es.js CHANGED Viewed

@@ -1335,6 +1335,18 @@ import "../../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1643,7 +1655,7 @@ import { mergeProps as b } from "@react-aria/utils";
 import { FOCUS_STYLE as u } from "../../../utilities/focusStyle.es.js";
 import { merge as f } from "../../../utilities/merge.es.js";
 import { Assets as v } from "./Assets.es.js";
-const HA = ({ numberOfLocations: r, assets: o, onClick: p }) => {
+const iS = ({ numberOfLocations: r, assets: o, onClick: p }) => {
   const m = c(null), { buttonProps: e } = w({ onPress: p }, m), { isFocusVisible: s, focusProps: a } = d(), i = o.length;
   return /* @__PURE__ */ t.createElement("div", {
     "data-test-id": "multi-asset-preview"
@@ -1676,6 +1688,6 @@ const HA = ({ numberOfLocations: r, assets: o, onClick: p }) => {
   }))))));
 };
 export {
-  HA as MultiAssetPreview
+  iS as MultiAssetPreview
 };
 //# sourceMappingURL=MultiAssetPreview.es.js.map

package/dist/components/AssetInput/MultiAssetPreview/MultiAssetPreview.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["import { IconCaretRight, IconSize } from '@foundation/Icon';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\nimport { AssetType } from '../AssetInput';\nimport { Assets } from './Assets';\n\nexport type MultiAssetPreviewProps = {\n numberOfLocations: number;\n assets: AssetType[];\n onClick: () => void;\n};\n\n// const FOCUS_STYLE = \"tw-border-black-90 dark:tw-border-black-10\";\n\nexport const MultiAssetPreview: FC<MultiAssetPreviewProps> = ({ numberOfLocations, assets, onClick }) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n const { isFocusVisible, focusProps } = useFocusRing();\n const assetsLength = assets.length;\n\n return (\n <div data-test-id=\"multi-asset-preview\">\n <button\n title=\"multi-asset-preview\"\n {...mergeProps(buttonProps, focusProps)}\n ref={buttonRef}\n className={merge([\n 'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n isFocusVisible\n ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n : 'tw-border-black-20 dark:tw-border-black-80',\n ])}\n >\n <Assets assets={assets} />\n <div className=\"tw-py-6 tw-px-4 tw-flex\">\n <div className=\"tw-text-left\">\n <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n </div>\n <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n </div>\n </div>\n <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n <div className=\"tw-absolute tw-right-12\">\n <IconCaretRight size={IconSize.Size24} />\n </div>\n </div>\n </div>\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,KAAgD,CAAC,EAAE,sBAAmB,WAAQ,iBAAc;AAC/F,QAAA,IAAY,EAAiC,IAAI,GACjD,EAAE,mBAAgB,EAAU,EAAE,SAAS,EAAA,GAAW,CAAS,GAC3D,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAe,EAAO;AAE5B,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,EAAA,GACb,kBAAA,cAAA,UAAA;AAAA,IACG,OAAM;AAAA,IACL,GAAG,EAAW,GAAa,CAAU;AAAA,IACtC,KAAK;AAAA,IACL,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IACM,GAAG,iDACH;AAAA,IAAA,CACT;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IAAO;AAAA,EAAA,CAAgB,GACvB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAyB,gBAAa;AAAA,EAAA,GAChD,GAAa,KAAE,MAAiB,IAAI,UAAU,QACnD,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAqC,gBAAa;AAAA,EAC5D,GAAA,GAAkB,KAAE,MAAsB,IAAI,aAAa,WAChE,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IAAe,MAAM,EAAS;AAAA,EAAA,CAAQ,CAC3C,CACJ,CACJ,CACJ,CACJ;AAER;"}
1	+ {"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["import { IconCaretRight, IconSize } from '@foundation/Icon';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\nimport { AssetType } from '../AssetInput';\nimport { Assets } from './Assets';\n\nexport type MultiAssetPreviewProps = {\n numberOfLocations: number;\n assets: AssetType[];\n onClick: () => void;\n};\n\n// const FOCUS_STYLE = \"tw-border-black-90 dark:tw-border-black-10\";\n\nexport const MultiAssetPreview: FC<MultiAssetPreviewProps> = ({ numberOfLocations, assets, onClick }) => {\n const buttonRef = useRef<HTMLButtonElement \| null>(null);\n const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n const { isFocusVisible, focusProps } = useFocusRing();\n const assetsLength = assets.length;\n\n return (\n <div data-test-id=\"multi-asset-preview\">\n <button\n title=\"multi-asset-preview\"\n {...mergeProps(buttonProps, focusProps)}\n ref={buttonRef}\n className={merge([\n 'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n isFocusVisible\n ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n : 'tw-border-black-20 dark:tw-border-black-80',\n ])}\n >\n <Assets assets={assets} />\n <div className=\"tw-py-6 tw-px-4 tw-flex\">\n <div className=\"tw-text-left\">\n <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n </div>\n <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n </div>\n </div>\n <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n <div className=\"tw-absolute tw-right-12\">\n <IconCaretRight size={IconSize.Size24} />\n </div>\n </div>\n </div>\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,KAAgD,CAAC,EAAE,sBAAmB,WAAQ,iBAAc;AAC/F,QAAA,IAAY,EAAiC,IAAI,GACjD,EAAE,mBAAgB,EAAU,EAAE,SAAS,EAAA,GAAW,CAAS,GAC3D,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAe,EAAO;AAE5B,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,EAAA,GACb,kBAAA,cAAA,UAAA;AAAA,IACG,OAAM;AAAA,IACL,GAAG,EAAW,GAAa,CAAU;AAAA,IACtC,KAAK;AAAA,IACL,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IACM,GAAG,iDACH;AAAA,IAAA,CACT;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IAAO;AAAA,EAAA,CAAgB,GACvB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAyB,gBAAa;AAAA,EAAA,GAChD,GAAa,KAAE,MAAiB,IAAI,UAAU,QACnD,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAqC,gBAAa;AAAA,EAC5D,GAAA,GAAkB,KAAE,MAAsB,IAAI,aAAa,WAChE,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IAAe,MAAM,EAAS;AAAA,EAAA,CAAQ,CAC3C,CACJ,CACJ,CACJ,CACJ;AAER;"}

package/dist/components/AssetInput/SingleAsset/AssetSubline.es.js CHANGED Viewed

@@ -1336,6 +1336,18 @@ import "../../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1636,7 +1648,7 @@ import "../../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../../foundation/Icon/IconsMap.es.js";
-const jA = ({ asset: t, isLoading: o = !1 }) => {
+const MA = ({ asset: t, isLoading: o = !1 }) => {
   let m = o ? "Uploading" : "Uploaded";
   return (t == null ? void 0 : t.source) === "library" && (m = t.sourceName), /* @__PURE__ */ r.createElement("span", {
     className: "tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden"
@@ -1653,6 +1665,6 @@ const jA = ({ asset: t, isLoading: o = !1 }) => {
   }, i))));
 };
 export {
-  jA as AssetSubline
+  MA as AssetSubline
 };
 //# sourceMappingURL=AssetSubline.es.js.map

package/dist/components/AssetInput/SingleAsset/AssetSubline.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["import React, { FC, Fragment } from 'react';\nimport { AssetInputProps } from '../AssetInput';\nimport { SelectedAssetProps } from './SelectedAsset';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading'> & Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline: FC<AssetSublineProps> = ({ asset, isLoading = false }) => {\n let title = isLoading ? 'Uploading' : 'Uploaded';\n if (asset?.source === 'library') {\n title = asset.sourceName;\n }\n\n return (\n <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n </div>\n {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n {asset &&\n !isLoading &&\n [asset.extension, asset.size].filter(Boolean).map((item, i) => (\n <Fragment key={`${item}-${i}`}>\n <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n <span className=\"tw-whitespace-nowrap\">{item}</span>\n </Fragment>\n ))}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,KAAsC,CAAC,EAAE,UAAO,eAAY,SAAY;AAC7E,MAAA,IAAQ,IAAY,cAAc;AAClC,SAAA,wBAAO,YAAW,aAClB,KAAQ,EAAM,aAIb,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,wBAAO,YAAW,YAAa,kBAAA,cAAA,GAAA,IAAe,IAAK,kBAAA,cAAC,GAAkB,IAAA,CAC3E,GACC,KAAU,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAwB,CAAM,GACvD,KACG,CAAC,KACD,CAAC,EAAM,WAAW,EAAM,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,CAAC,GAAM,MACpD,kBAAA,cAAA,GAAA;AAAA,IAAS,KAAK,GAAG,KAAQ;AAAA,EAAA,GACrB,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAA4D,GAAA,QAAC,GAC5E,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAwB,CAAK,CACjD,CACH,CACT;AAER;"}
1	+ {"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["import React, { FC, Fragment } from 'react';\nimport { AssetInputProps } from '../AssetInput';\nimport { SelectedAssetProps } from './SelectedAsset';\nimport { IconArrowCircleUp, IconImageStack } from '@foundation/Icon';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading'> & Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline: FC<AssetSublineProps> = ({ asset, isLoading = false }) => {\n let title = isLoading ? 'Uploading' : 'Uploaded';\n if (asset?.source === 'library') {\n title = asset.sourceName;\n }\n\n return (\n <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n </div>\n {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n {asset &&\n !isLoading &&\n [asset.extension, asset.size].filter(Boolean).map((item, i) => (\n <Fragment key={`${item}-${i}`}>\n <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n <span className=\"tw-whitespace-nowrap\">{item}</span>\n </Fragment>\n ))}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,KAAsC,CAAC,EAAE,UAAO,eAAY,SAAY;AAC7E,MAAA,IAAQ,IAAY,cAAc;AAClC,SAAA,wBAAO,YAAW,aAClB,KAAQ,EAAM,aAIb,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,wBAAO,YAAW,YAAa,kBAAA,cAAA,GAAA,IAAe,IAAK,kBAAA,cAAC,GAAkB,IAAA,CAC3E,GACC,KAAU,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAwB,CAAM,GACvD,KACG,CAAC,KACD,CAAC,EAAM,WAAW,EAAM,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,CAAC,GAAM,MACpD,kBAAA,cAAA,GAAA;AAAA,IAAS,KAAK,GAAG,KAAQ;AAAA,EAAA,GACrB,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAA4D,GAAA,QAAC,GAC5E,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAwB,CAAK,CACjD,CACH,CACT;AAER;"}

package/dist/components/Badge/helpers.es.js CHANGED Viewed

@@ -33,7 +33,7 @@ const x = (r, e, g) => {
       e && "hover:tw-bg-box-positive-hover hover:tw-text-box-positive-inverse-hover"
     ]),
     [o.Progress]: t([
-      "tw-bg-box-selected tw-text-bg-box-selected-inverse",
+      "tw-bg-box-selected tw-text-box-selected-inverse",
       e && "hover:tw-bg-box-selected-hover hover:tw-text-box-selected-inverse-hover"
     ]),
     [o.Warning]: t([

package/dist/components/Badge/helpers.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.es.js","sources":["../../../src/components/Badge/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps, BadgeSize, BadgeStatus, BadgeStyle } from './types';\nimport { merge } from '@utilities/merge';\nimport { Color } from '../../types';\nimport { ReactNode } from 'react';\n\nexport const getStyleClasses = (style: BadgeStyle, hasHover: boolean, strong: boolean): string =>\n (strong\n ? {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse',\n hasHover && 'hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive-strong tw-text-box-positive-strong-inverse',\n hasHover && 'hover:tw-bg-box-positive-strong-hover hover:tw-text-box-positive-strong-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative-strong tw-text-box-negative-strong-inverse',\n hasHover && 'hover:tw-bg-box-negative-strong-hover hover:tw-text-box-negative-strong-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse',\n hasHover && 'hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning-strong tw-text-box-warning-strong-inverse',\n hasHover && 'hover:tw-bg-box-warning-strong-hover hover:tw-text-box-warning-strong-inverse-hover',\n ]),\n }\n : {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral tw-text-text-weak',\n hasHover && 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive tw-text-box-positive-inverse',\n hasHover && 'hover:tw-bg-box-positive-hover hover:tw-text-box-positive-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected tw-text-~~bg-~~box-selected-inverse',\n hasHover && 'hover:tw-bg-box-selected-hover hover:tw-text-box-selected-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning tw-text-box-warning-inverse',\n hasHover && 'hover:tw-bg-box-warning-hover hover:tw-text-box-warning-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative tw-text-box-negative-inverse',\n hasHover && 'hover:tw-bg-box-negative-hover hover:tw-text-box-negative-inverse-hover',\n ]),\n })[style] ?? '';\n\nexport const isBadgeStatus = (style: BadgeStatus \| Color \| string): style is BadgeStatus =>\n Object.values(BadgeStatus).includes(style as BadgeStatus);\n\nexport const getCircularSizeClasses = (size: BadgeSize) =>\n ({\n small: 'tw-h-5 tw-w-5',\n medium: 'tw-h-6 tw-w-6',\n }[size]);\n\nexport const getSizeClasses = (\n children: ReactNode,\n status: BadgeProps['status'],\n icon: BadgeProps['icon'],\n size: BadgeSize,\n) => {\n const isSmall = size === 'small';\n\n if (isSmall) {\n return 'tw-h-5 tw-px-1.5';\n } else {\n const hasMaximumTwoComponents = !Boolean(children && status && icon);\n return merge(['tw-h-6', 'tw-px-2', hasMaximumTwoComponents && 'tw-gap-x-0.5']);\n }\n};\n\nexport const badgeStatusClasses: Record<BadgeStatus, string> = {\n [BadgeStatus.Positive]: 'tw-bg-green-60',\n [BadgeStatus.Progress]: 'tw-bg-violet-60',\n [BadgeStatus.Warning]: 'tw-bg-yellow-60',\n [BadgeStatus.Danger]: 'tw-bg-red-60',\n};\n"],"names":[],"mappings":";;AAOO,MAAM,IAAkB,CAAC,GAAmB,GAAmB;;AAE5D,mBAAA;AAAA,IACI,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,SAAS,EAAM;AAAA,MACvB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EACL,IACA;AAAA,IACI,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,SAAS,EAAM;AAAA,MACvB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EACL,GAAG,OA3CH,WA2Ca;AAAA,GAEV,IAAgB,CAAC,MAC1B,OAAO,OAAO,CAAW,EAAE,SAAS,CAAoB,GAE/C,IAAyB,CAAC,MAClC;AAAA,EACG,OAAO;AAAA,EACP,QAAQ;AACZ,GAAE,IAEO,IAAiB,CAC1B,GACA,GACA,GACA,MACC;AAGD,MAFgB,MAAS;AAGd,WAAA;AACJ;AACH,UAAM,IAA0B,CAAC,QAAQ,KAAY,KAAU,CAAI;AACnE,WAAO,EAAM,CAAC,UAAU,WAAW,KAA2B,cAAc,CAAC;AAAA,EACjF;AACJ,GAEa,IAAkD;AAAA,EAC3D,CAAC,EAAY,WAAW;AAAA,EACxB,CAAC,EAAY,WAAW;AAAA,EACxB,CAAC,EAAY,UAAU;AAAA,EACvB,CAAC,EAAY,SAAS;AAC1B;"}
1	+ {"version":3,"file":"helpers.es.js","sources":["../../../src/components/Badge/helpers.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps, BadgeSize, BadgeStatus, BadgeStyle } from './types';\nimport { merge } from '@utilities/merge';\nimport { Color } from '../../types';\nimport { ReactNode } from 'react';\n\nexport const getStyleClasses = (style: BadgeStyle, hasHover: boolean, strong: boolean): string =>\n (strong\n ? {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse',\n hasHover && 'hover:tw-bg-box-neutral-strong-hover hover:tw-text-box-neutral-strong-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive-strong tw-text-box-positive-strong-inverse',\n hasHover && 'hover:tw-bg-box-positive-strong-hover hover:tw-text-box-positive-strong-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative-strong tw-text-box-negative-strong-inverse',\n hasHover && 'hover:tw-bg-box-negative-strong-hover hover:tw-text-box-negative-strong-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse',\n hasHover && 'hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning-strong tw-text-box-warning-strong-inverse',\n hasHover && 'hover:tw-bg-box-warning-strong-hover hover:tw-text-box-warning-strong-inverse-hover',\n ]),\n }\n : {\n [BadgeStyle.Primary]: merge([\n 'tw-bg-box-neutral tw-text-text-weak',\n hasHover && 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n ]),\n [BadgeStyle.Positive]: merge([\n 'tw-bg-box-positive tw-text-box-positive-inverse',\n hasHover && 'hover:tw-bg-box-positive-hover hover:tw-text-box-positive-inverse-hover',\n ]),\n [BadgeStyle.Progress]: merge([\n 'tw-bg-box-selected tw-text-box-selected-inverse',\n hasHover && 'hover:tw-bg-box-selected-hover hover:tw-text-box-selected-inverse-hover',\n ]),\n [BadgeStyle.Warning]: merge([\n 'tw-bg-box-warning tw-text-box-warning-inverse',\n hasHover && 'hover:tw-bg-box-warning-hover hover:tw-text-box-warning-inverse-hover',\n ]),\n [BadgeStyle.Danger]: merge([\n 'tw-bg-box-negative tw-text-box-negative-inverse',\n hasHover && 'hover:tw-bg-box-negative-hover hover:tw-text-box-negative-inverse-hover',\n ]),\n })[style] ?? '';\n\nexport const isBadgeStatus = (style: BadgeStatus \| Color \| string): style is BadgeStatus =>\n Object.values(BadgeStatus).includes(style as BadgeStatus);\n\nexport const getCircularSizeClasses = (size: BadgeSize) =>\n ({\n small: 'tw-h-5 tw-w-5',\n medium: 'tw-h-6 tw-w-6',\n }[size]);\n\nexport const getSizeClasses = (\n children: ReactNode,\n status: BadgeProps['status'],\n icon: BadgeProps['icon'],\n size: BadgeSize,\n) => {\n const isSmall = size === 'small';\n\n if (isSmall) {\n return 'tw-h-5 tw-px-1.5';\n } else {\n const hasMaximumTwoComponents = !Boolean(children && status && icon);\n return merge(['tw-h-6', 'tw-px-2', hasMaximumTwoComponents && 'tw-gap-x-0.5']);\n }\n};\n\nexport const badgeStatusClasses: Record<BadgeStatus, string> = {\n [BadgeStatus.Positive]: 'tw-bg-green-60',\n [BadgeStatus.Progress]: 'tw-bg-violet-60',\n [BadgeStatus.Warning]: 'tw-bg-yellow-60',\n [BadgeStatus.Danger]: 'tw-bg-red-60',\n};\n"],"names":[],"mappings":";;AAOO,MAAM,IAAkB,CAAC,GAAmB,GAAmB;;AAE5D,mBAAA;AAAA,IACI,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,SAAS,EAAM;AAAA,MACvB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EACL,IACA;AAAA,IACI,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,WAAW,EAAM;AAAA,MACzB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,UAAU,EAAM;AAAA,MACxB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,IACD,CAAC,EAAW,SAAS,EAAM;AAAA,MACvB;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EACL,GAAG,OA3CH,WA2Ca;AAAA,GAEV,IAAgB,CAAC,MAC1B,OAAO,OAAO,CAAW,EAAE,SAAS,CAAoB,GAE/C,IAAyB,CAAC,MAClC;AAAA,EACG,OAAO;AAAA,EACP,QAAQ;AACZ,GAAE,IAEO,IAAiB,CAC1B,GACA,GACA,GACA,MACC;AAGD,MAFgB,MAAS;AAGd,WAAA;AACJ;AACH,UAAM,IAA0B,CAAC,QAAQ,KAAY,KAAU,CAAI;AACnE,WAAO,EAAM,CAAC,UAAU,WAAW,KAA2B,cAAc,CAAC;AAAA,EACjF;AACJ,GAEa,IAAkD;AAAA,EAC3D,CAAC,EAAY,WAAW;AAAA,EACxB,CAAC,EAAY,WAAW;AAAA,EACxB,CAAC,EAAY,UAAU;AAAA,EACvB,CAAC,EAAY,SAAS;AAC1B;"}

package/dist/components/Button/mappings.es.js CHANGED Viewed

@@ -1335,6 +1335,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1638,17 +1650,17 @@ import "react";
 import "../../foundation/Icon/IconsMap.es.js";
 import { IconSize as t } from "../../foundation/Icon/IconSize.es.js";
 import { ButtonSize as o, ButtonType as i } from "./ButtonTypes.es.js";
-const R1 = {
+const G1 = {
   [o.Small]: t.Size16,
   [o.Medium]: t.Size20,
   [o.Large]: t.Size24
-}, h1 = {
+}, H1 = {
   [i.Button]: "button",
   [i.Submit]: "submit",
   [i.Reset]: "reset"
 };
 export {
-  R1 as buttonIconSizeMap,
-  h1 as buttonTypeMap
+  G1 as buttonIconSizeMap,
+  H1 as buttonTypeMap
 };
 //# sourceMappingURL=mappings.es.js.map

package/dist/components/Button/mappings.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mappings.es.js","sources":["../../../src/components/Button/mappings.ts"],"sourcesContent":["import { IconSize } from '@foundation/Icon';\nimport { ButtonSize, ButtonType } from '@components/Button/ButtonTypes';\n\nexport const buttonIconSizeMap: Record<ButtonSize, IconSize> = {\n [ButtonSize.Small]: IconSize.Size16,\n [ButtonSize.Medium]: IconSize.Size20,\n [ButtonSize.Large]: IconSize.Size24,\n};\n\nexport const buttonTypeMap: Record<ButtonType, 'button' \| 'submit' \| 'reset'> = {\n [ButtonType.Button]: 'button',\n [ButtonType.Submit]: 'submit',\n [ButtonType.Reset]: 'reset',\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,KAAkD;AAAA,EAC3D,CAAC,EAAW,QAAQ,EAAS;AAAA,EAC7B,CAAC,EAAW,SAAS,EAAS;AAAA,EAC9B,CAAC,EAAW,QAAQ,EAAS;AACjC,GAEa,KAAmE;AAAA,EAC5E,CAAC,EAAW,SAAS;AAAA,EACrB,CAAC,EAAW,SAAS;AAAA,EACrB,CAAC,EAAW,QAAQ;AACxB;"}
1	+ {"version":3,"file":"mappings.es.js","sources":["../../../src/components/Button/mappings.ts"],"sourcesContent":["import { IconSize } from '@foundation/Icon';\nimport { ButtonSize, ButtonType } from '@components/Button/ButtonTypes';\n\nexport const buttonIconSizeMap: Record<ButtonSize, IconSize> = {\n [ButtonSize.Small]: IconSize.Size16,\n [ButtonSize.Medium]: IconSize.Size20,\n [ButtonSize.Large]: IconSize.Size24,\n};\n\nexport const buttonTypeMap: Record<ButtonType, 'button' \| 'submit' \| 'reset'> = {\n [ButtonType.Button]: 'button',\n [ButtonType.Submit]: 'submit',\n [ButtonType.Reset]: 'reset',\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,KAAkD;AAAA,EAC3D,CAAC,EAAW,QAAQ,EAAS;AAAA,EAC7B,CAAC,EAAW,SAAS,EAAS;AAAA,EAC9B,CAAC,EAAW,QAAQ,EAAS;AACjC,GAEa,KAAmE;AAAA,EAC5E,CAAC,EAAW,SAAS;AAAA,EACrB,CAAC,EAAW,SAAS;AAAA,EACrB,CAAC,EAAW,QAAQ;AACxB;"}

package/dist/components/ColorInputFlyout/ColorPickerFlyout.es.js CHANGED Viewed

@@ -1343,6 +1343,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1660,7 +1672,7 @@ import "react-popper";
 import "react-colorful";
 import { Flyout as w } from "../Flyout/Flyout.es.js";
 import { ColorInputTrigger as x } from "./ColorPickerTrigger.es.js";
-const dI = ({
+const HI = ({
   id: c,
   onClick: o,
   onClose: m,
@@ -1710,6 +1722,6 @@ const dI = ({
   }));
 };
 export {
-  dI as ColorPickerFlyout
+  HI as ColorPickerFlyout
 };
 //# sourceMappingURL=ColorPickerFlyout.es.js.map

package/dist/components/ColorInputFlyout/ColorPickerFlyout.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerFlyout.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerFlyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorPreview } from '@components/ColorPicker';\nimport { ColorPicker, ColorPickerProps } from '@components/ColorPicker/ColorPicker';\nimport { Flyout } from '@components/Flyout/Flyout';\nimport React, { FC, useState } from 'react';\nimport { Color, ColorFormat } from '../../types/colors';\nimport { ColorInputTrigger } from './ColorPickerTrigger';\n\nexport type ColorPickerFlyoutProps = Pick<ColorPickerProps, 'palettes' \| 'onSelect'> & {\n id?: string;\n disabled?: boolean;\n onClick?: () => void;\n onClose?: () => void;\n currentColor: Color \| null;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorPickerFlyout: FC<ColorPickerFlyoutProps> = ({\n id,\n onClick,\n onClose,\n onSelect,\n currentColor,\n palettes,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}) => {\n const [open, setOpen] = useState(false);\n const [currentFormat, setCurrentFormat] = useState(ColorFormat.Hex);\n\n const handleOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onClose?.();\n }\n setOpen(isOpen);\n };\n\n const handleClick = () => {\n setOpen(false);\n onClick?.();\n };\n\n return (\n <Flyout\n hug={false}\n onConfirm={handleClick}\n isOpen={open}\n onCancel={() => handleOpenChange(false)}\n fixedHeader={<ColorPreview color={currentColor \|\| { red: 255, green: 255, blue: 255 }} />}\n onOpenChange={handleOpenChange}\n trigger={\n <ColorInputTrigger\n isOpen={open}\n currentColor={currentColor}\n format={currentFormat}\n disabled={disabled}\n id={id}\n clearable={clearable}\n onClear={() => {\n setOpen(false);\n onClear && onClear();\n }}\n onDelete={\n onDelete\n ? () => {\n setOpen(false);\n onDelete && onDelete();\n }\n : undefined\n }\n />\n }\n >\n <ColorPicker\n currentFormat={currentFormat}\n setFormat={setCurrentFormat}\n palettes={palettes}\n showPreview={false}\n currentColor={currentColor \|\| { red: 255, green: 255, blue: 255 }}\n onSelect={onSelect}\n />\n </Flyout>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,KAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACE;AACF,QAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAe,KAAoB,EAAS,EAAY,GAAG,GAE5D,IAAmB,CAAC,MAAoB;AAC1C,IAAK,KACS,kBAEd,EAAQ,CAAM;AAAA,EAAA,GAGZ,IAAc,MAAM;AACtB,MAAQ,EAAK,GACH;AAAA,EAAA;AAGd,SACK,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM,EAAiB,EAAK;AAAA,IACtC,aAAc,kBAAA,cAAA,GAAA;AAAA,MAAa,OAAO,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,IAAA,CAAG;AAAA,IACvF,cAAc;AAAA,IACd,SACK,kBAAA,cAAA,GAAA;AAAA,MACG,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACX,UAAQ,EAAK,GACb,KAAW,EAAQ;AAAA,MACvB;AAAA,MACA,UACI,IACM,MAAM;AACF,UAAQ,EAAK,GACb,KAAY,EAAS;AAAA,MAEzB,IAAA;AAAA,IAAA,CAEd;AAAA,EAAA,GAGH,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,cAAc,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,IAChE;AAAA,EACJ,CAAA,CACJ;AAER;"}
1	+ {"version":3,"file":"ColorPickerFlyout.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerFlyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorPreview } from '@components/ColorPicker';\nimport { ColorPicker, ColorPickerProps } from '@components/ColorPicker/ColorPicker';\nimport { Flyout } from '@components/Flyout/Flyout';\nimport React, { FC, useState } from 'react';\nimport { Color, ColorFormat } from '../../types/colors';\nimport { ColorInputTrigger } from './ColorPickerTrigger';\n\nexport type ColorPickerFlyoutProps = Pick<ColorPickerProps, 'palettes' \| 'onSelect'> & {\n id?: string;\n disabled?: boolean;\n onClick?: () => void;\n onClose?: () => void;\n currentColor: Color \| null;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorPickerFlyout: FC<ColorPickerFlyoutProps> = ({\n id,\n onClick,\n onClose,\n onSelect,\n currentColor,\n palettes,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}) => {\n const [open, setOpen] = useState(false);\n const [currentFormat, setCurrentFormat] = useState(ColorFormat.Hex);\n\n const handleOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onClose?.();\n }\n setOpen(isOpen);\n };\n\n const handleClick = () => {\n setOpen(false);\n onClick?.();\n };\n\n return (\n <Flyout\n hug={false}\n onConfirm={handleClick}\n isOpen={open}\n onCancel={() => handleOpenChange(false)}\n fixedHeader={<ColorPreview color={currentColor \|\| { red: 255, green: 255, blue: 255 }} />}\n onOpenChange={handleOpenChange}\n trigger={\n <ColorInputTrigger\n isOpen={open}\n currentColor={currentColor}\n format={currentFormat}\n disabled={disabled}\n id={id}\n clearable={clearable}\n onClear={() => {\n setOpen(false);\n onClear && onClear();\n }}\n onDelete={\n onDelete\n ? () => {\n setOpen(false);\n onDelete && onDelete();\n }\n : undefined\n }\n />\n }\n >\n <ColorPicker\n currentFormat={currentFormat}\n setFormat={setCurrentFormat}\n palettes={palettes}\n showPreview={false}\n currentColor={currentColor \|\| { red: 255, green: 255, blue: 255 }}\n onSelect={onSelect}\n />\n </Flyout>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,KAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACE;AACF,QAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAe,KAAoB,EAAS,EAAY,GAAG,GAE5D,IAAmB,CAAC,MAAoB;AAC1C,IAAK,KACS,kBAEd,EAAQ,CAAM;AAAA,EAAA,GAGZ,IAAc,MAAM;AACtB,MAAQ,EAAK,GACH;AAAA,EAAA;AAGd,SACK,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM,EAAiB,EAAK;AAAA,IACtC,aAAc,kBAAA,cAAA,GAAA;AAAA,MAAa,OAAO,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,IAAA,CAAG;AAAA,IACvF,cAAc;AAAA,IACd,SACK,kBAAA,cAAA,GAAA;AAAA,MACG,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACX,UAAQ,EAAK,GACb,KAAW,EAAQ;AAAA,MACvB;AAAA,MACA,UACI,IACM,MAAM;AACF,UAAQ,EAAK,GACb,KAAY,EAAS;AAAA,MAEzB,IAAA;AAAA,IAAA,CAEd;AAAA,EAAA,GAGH,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,cAAc,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,IAChE;AAAA,EACJ,CAAA,CACJ;AAER;"}

package/dist/components/ColorPicker/BrandColorPicker.es.js CHANGED Viewed

@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1641,7 +1653,7 @@ import { isColorLight as C, toShortRgb as y } from "../../utilities/colors.es.js
 import { merge as d } from "../../utilities/merge.es.js";
 import t, { useState as s, useEffect as R } from "react";
 import z from "tinycolor2";
-const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.toLocaleLowerCase().trim()), my = ({ palettes: m = [], currentColor: o, onSelect: x }) => {
+const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.toLocaleLowerCase().trim()), xy = ({ palettes: m = [], currentColor: o, onSelect: x }) => {
   const w = [
     { id: "Grid", icon: /* @__PURE__ */ t.createElement(k, null), ariaLabel: "Grid" },
     { id: "List", icon: /* @__PURE__ */ t.createElement(I, null), ariaLabel: "List" }
@@ -1708,6 +1720,6 @@ const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.t
   }, r.name))))))) : "No colors found"));
 };
 export {
-  my as BrandColorPicker
+  xy as BrandColorPicker
 };
 //# sourceMappingURL=BrandColorPicker.es.js.map

package/dist/components/ColorPicker/BrandColorPicker.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BrandColorPicker.es.js","sources":["../../../src/components/ColorPicker/BrandColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slider } from '@components/Slider/Slider';\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { IconCheckMark, IconGridRegular, IconMagnifier, IconStackVertical } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { isColorLight, toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useEffect, useState } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst find = (haystack?: string, needle = '') =>\n haystack?.toLocaleLowerCase().includes(needle.toLocaleLowerCase().trim());\n\nenum BrandColorView {\n List = 'List',\n Grid = 'Grid',\n}\n\ntype Props = Omit<ColorPickerProps, 'currentFormat' \| 'setFormat'>;\n\nexport const BrandColorPicker: FC<Props> = ({ palettes: defaultPalettes = [], currentColor, onSelect }) => {\n const views = [\n { id: BrandColorView.Grid, icon: <IconGridRegular />, ariaLabel: 'Grid' },\n { id: BrandColorView.List, icon: <IconStackVertical />, ariaLabel: 'List' },\n ];\n const [view, setView] = useState(views[0].id);\n const [query, setQuery] = useState('');\n const [palettes, setPalettes] = useState(defaultPalettes);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setPalettes(\n defaultPalettes\n .filter(({ title, colors }) => find(title, query) \|\| colors.some(({ name }) => find(name, query)))\n .map(({ id, title, colors }) => ({\n id,\n title,\n colors: colors.some(({ name }) => find(name, query))\n ? colors.filter(({ name }) => find(name, query))\n : colors,\n })),\n );\n }, 200);\n\n return () => clearTimeout(timer);\n }, [query]);\n\n const palettesWithColors = palettes.filter((palette) => palette.colors.length > 0);\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"brand-color-picker\">\n <div className=\"tw-flex tw-gap-2\">\n <div className=\"tw-flex-1\">\n <TextInput\n value={query}\n decorator={<IconMagnifier />}\n placeholder=\"Search\"\n onChange={(value) => setQuery(value)}\n clearable\n />\n </div>\n <div className=\"tw-w-[72px]\">\n <Slider\n items={views}\n activeItemId={view}\n onChange={(colorView) => setView(colorView as BrandColorView)}\n />\n </div>\n </div>\n <ul className=\"tw-flex tw-flex-col tw-gap-4\">\n {palettesWithColors.length > 0\n ? palettesWithColors.map(({ id, title, colors }) => (\n <li key={id} className=\"tw-flex tw-flex-col tw-gap-2\">\n <p className=\"tw-text-black tw-text-xs tw-font-medium dark:tw-text-white\">{title}</p>\n <ul\n className={merge([\n 'tw-flex tw-gap-y-2 tw-flex-wrap',\n view === BrandColorView.List && 'tw-flex-col',\n ])}\n >\n {colors.map((color) => (\n <li key={color.name} data-test-id=\"brand-color\">\n <button\n className=\"tw-flex tw-w-full\"\n onClick={() => onSelect(color)}\n type=\"button\"\n >\n <span\n className={merge([\n 'tw-h-6 tw-w-6 tw-mr-2 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n isColorLight(color) ? 'tw-text-black' : 'tw-text-white',\n ])}\n style={{ background: tinycolor(toShortRgb(color)).toRgbString() }}\n >\n {color.red === currentColor.red &&\n color.green === currentColor.green &&\n color.blue === currentColor.blue &&\n color.alpha === currentColor.alpha && (\n <IconCheckMark size={IconSize.Size20} />\n )}\n </span>\n {view === BrandColorView.List && (\n <span className=\"tw-h-6 tw-grow tw-flex tw-items-center tw-text-sm tw-text-left\">\n {color.name}\n </span>\n )}\n </button>\n </li>\n ))}\n </ul>\n </li>\n ))\n : 'No colors found'}\n </ul>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
1	+ {"version":3,"file":"BrandColorPicker.es.js","sources":["../../../src/components/ColorPicker/BrandColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slider } from '@components/Slider/Slider';\nimport { TextInput } from '@components/TextInput/TextInput';\nimport { IconCheckMark, IconGridRegular, IconMagnifier, IconStackVertical } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { isColorLight, toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useEffect, useState } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst find = (haystack?: string, needle = '') =>\n haystack?.toLocaleLowerCase().includes(needle.toLocaleLowerCase().trim());\n\nenum BrandColorView {\n List = 'List',\n Grid = 'Grid',\n}\n\ntype Props = Omit<ColorPickerProps, 'currentFormat' \| 'setFormat'>;\n\nexport const BrandColorPicker: FC<Props> = ({ palettes: defaultPalettes = [], currentColor, onSelect }) => {\n const views = [\n { id: BrandColorView.Grid, icon: <IconGridRegular />, ariaLabel: 'Grid' },\n { id: BrandColorView.List, icon: <IconStackVertical />, ariaLabel: 'List' },\n ];\n const [view, setView] = useState(views[0].id);\n const [query, setQuery] = useState('');\n const [palettes, setPalettes] = useState(defaultPalettes);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setPalettes(\n defaultPalettes\n .filter(({ title, colors }) => find(title, query) \|\| colors.some(({ name }) => find(name, query)))\n .map(({ id, title, colors }) => ({\n id,\n title,\n colors: colors.some(({ name }) => find(name, query))\n ? colors.filter(({ name }) => find(name, query))\n : colors,\n })),\n );\n }, 200);\n\n return () => clearTimeout(timer);\n }, [query]);\n\n const palettesWithColors = palettes.filter((palette) => palette.colors.length > 0);\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"brand-color-picker\">\n <div className=\"tw-flex tw-gap-2\">\n <div className=\"tw-flex-1\">\n <TextInput\n value={query}\n decorator={<IconMagnifier />}\n placeholder=\"Search\"\n onChange={(value) => setQuery(value)}\n clearable\n />\n </div>\n <div className=\"tw-w-[72px]\">\n <Slider\n items={views}\n activeItemId={view}\n onChange={(colorView) => setView(colorView as BrandColorView)}\n />\n </div>\n </div>\n <ul className=\"tw-flex tw-flex-col tw-gap-4\">\n {palettesWithColors.length > 0\n ? palettesWithColors.map(({ id, title, colors }) => (\n <li key={id} className=\"tw-flex tw-flex-col tw-gap-2\">\n <p className=\"tw-text-black tw-text-xs tw-font-medium dark:tw-text-white\">{title}</p>\n <ul\n className={merge([\n 'tw-flex tw-gap-y-2 tw-flex-wrap',\n view === BrandColorView.List && 'tw-flex-col',\n ])}\n >\n {colors.map((color) => (\n <li key={color.name} data-test-id=\"brand-color\">\n <button\n className=\"tw-flex tw-w-full\"\n onClick={() => onSelect(color)}\n type=\"button\"\n >\n <span\n className={merge([\n 'tw-h-6 tw-w-6 tw-mr-2 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n isColorLight(color) ? 'tw-text-black' : 'tw-text-white',\n ])}\n style={{ background: tinycolor(toShortRgb(color)).toRgbString() }}\n >\n {color.red === currentColor.red &&\n color.green === currentColor.green &&\n color.blue === currentColor.blue &&\n color.alpha === currentColor.alpha && (\n <IconCheckMark size={IconSize.Size20} />\n )}\n </span>\n {view === BrandColorView.List && (\n <span className=\"tw-h-6 tw-grow tw-flex tw-items-center tw-text-sm tw-text-left\">\n {color.name}\n </span>\n )}\n </button>\n </li>\n ))}\n </ul>\n </li>\n ))\n : 'No colors found'}\n </ul>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/DatePicker/DatePicker.es.js CHANGED Viewed

@@ -1343,6 +1343,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1643,7 +1655,7 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
-const i2 = ({
+const C2 = ({
   placeHolder: l = "Select a date",
   isClearable: a,
   shouldCloseOnSelect: c,
@@ -1712,6 +1724,6 @@ const i2 = ({
   }));
 };
 export {
-  i2 as DatePicker
+  C2 as DatePicker
 };
 //# sourceMappingURL=DatePicker.es.js.map