npm - @frontify/fondue - Versions diffs - 10.0.0 → 11.0.0 - Mend

@frontify/fondue 10.0.0 → 11.0.0

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 (181) hide show

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

@@ -1,16 +1,16 @@
-import { getColorDisplayValue as c } from "../../utilities/colors.es.js";
+import { toShortRgb as c, getColorDisplayValue as s } from "../../utilities/colors.es.js";
 import a from "react";
-import s from "tinycolor2";
+import p from "tinycolor2";
 import { ColorFormat as n } from "../../types/colors.es.js";
-const u = ({ currentColor: t, format: e }) => {
-  const { name: l, a: o } = t, r = s(t), m = c(t, e, !1);
+const b = ({ currentColor: t, format: o }) => {
+  const { name: l, alpha: e } = t, r = p(c(t)), m = s(t, o, !1);
   return /* @__PURE__ */ a.createElement("div", {
     className: "tw-text-black-100"
-  }, l || m, e === n.Hex && o && o < 1 && /* @__PURE__ */ a.createElement("span", {
+  }, l || m, o === n.Hex && e && e < 1 && /* @__PURE__ */ a.createElement("span", {
     className: "tw-text-black-60"
   }, ` ${Math.trunc(r.getAlpha() * 100)} %`));
 };
 export {
-  u as ColorInputTitle
+  b as ColorInputTitle
 };
 //# sourceMappingURL=ColorInputTitle.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInputTitle.es.js","sources":["../../../src/components/ColorInputFlyout/ColorInputTitle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { getColorDisplayValue } from '@utilities/colors';\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types/colors';\n\ntype Props = {\n currentColor: Color;\n format: ColorFormat;\n};\n\nexport const ColorInputTitle: FC<Props> = ({ currentColor, format }) => {\n const { name, a } = currentColor;\n const parsedColor = tinycolor(currentColor);\n const colorValue = getColorDisplayValue(currentColor, format, false);\n\n return (\n <div className=\"tw-text-black-100\">\n {name \|\| colorValue}\n {format === ColorFormat.Hex && a && a < 1 && (\n <span className=\"tw-text-black-60\">{` ${Math.trunc(parsedColor.getAlpha() 100)} %`}</span>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,IAA6B,CAAC,EAAE,iBAAc,gBAAa;AAC9D,QAAA,EAAE,SAAM,~~SAAM~~,~~GACd~~,IAAc,EAAU,CAAY,~~GACpC~~,IAAa,EAAqB,GAAc,GAAQ,EAAK;AAEnE,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EACV,GAAA,KAAQ,GACR,MAAW,EAAY,OAAO,~~KAAK~~,~~IAAI~~,~~KACnC~~,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAoB,GAAA,IAAI,KAAK,MAAM,EAAY,SAAa,IAAA,GAAG,KAAM,CAE7F;AAER;"}
1	+ {"version":3,"file":"ColorInputTitle.es.js","sources":["../../../src/components/ColorInputFlyout/ColorInputTitle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { getColorDisplayValue, toShortRgb } from '@utilities/colors';\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types/colors';\n\ntype Props = {\n currentColor: Color;\n format: ColorFormat;\n};\n\nexport const ColorInputTitle: FC<Props> = ({ currentColor, format }) => {\n const { name, alpha } = currentColor;\n const parsedColor = tinycolor(toShortRgb(currentColor));\n const colorValue = getColorDisplayValue(currentColor, format, false);\n\n return (\n <div className=\"tw-text-black-100\">\n {name \|\| colorValue}\n {format === ColorFormat.Hex && alpha && alpha < 1 && (\n <span className=\"tw-text-black-60\">{` ${Math.trunc(parsedColor.getAlpha() 100)} %`}</span>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,IAA6B,CAAC,EAAE,iBAAc,gBAAa;AAC9D,QAAA,EAAE,SAAM,aAAU,GAClB,IAAc,EAAU,EAAW,CAAY,CAAC,GAChD,IAAa,EAAqB,GAAc,GAAQ,EAAK;AAEnE,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EACV,GAAA,KAAQ,GACR,MAAW,EAAY,OAAO,KAAS,IAAQ,KAC3C,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAoB,GAAA,IAAI,KAAK,MAAM,EAAY,SAAa,IAAA,GAAG,KAAM,CAE7F;AAER;"}

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

@@ -1,4 +1,4 @@
-import t, { useState as l } from "react";
+import t, { useState as s } from "react";
 import "@react-aria/focus";
 import "@react-aria/interactions";
 import "@react-aria/radio";
@@ -1655,13 +1655,13 @@ const mI = ({
   onSelect: g,
   currentColor: i,
   palettes: u,
-  disabled: h = !1,
-  clearable: F = !1,
+  disabled: d = !1,
+  clearable: h = !1,
   onClear: e,
   onDelete: p
 }) => {
-  const [a, r] = l(!1), [f, d] = l(O.Hex), n = (s) => {
-    s || m == null || m(), r(s);
+  const [a, r] = s(!1), [f, F] = s(O.Hex), n = (l) => {
+    l || m == null || m(), r(l);
   }, E = () => {
     r(!1), o == null || o();
   };
@@ -1671,16 +1671,16 @@ const mI = ({
     isOpen: a,
     onCancel: () => n(!1),
     fixedHeader: /* @__PURE__ */ t.createElement(v, {
-      color: i || { r: 255, g: 255, b: 255 }
+      color: i || { red: 255, green: 255, blue: 255 }
     }),
     onOpenChange: n,
     trigger: /* @__PURE__ */ t.createElement(x, {
       isOpen: a,
       currentColor: i,
       format: f,
-      disabled: h,
+      disabled: d,
       id: c,
-      clearable: F,
+      clearable: h,
       onClear: () => {
         r(!1), e && e();
       },
@@ -1690,10 +1690,10 @@ const mI = ({
     })
   }, /* @__PURE__ */ t.createElement(P, {
     currentFormat: f,
-    setFormat: d,
+    setFormat: F,
     palettes: u,
     showPreview: !1,
-    currentColor: i || { r: 255, g: 255, b: 255 },
+    currentColor: i || { red: 255, green: 255, blue: 255 },
     onSelect: g
   }));
 };

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 \|\| { r: 255, g: 255, b: 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 \|\| { r: 255, g: 255, b: 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,~~GAAG~~,KAAK,~~GAAG~~,KAAK,~~GAAG~~,IAAI;AAAA,IAAA,CAAG;AAAA,~~IAC9E~~,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,~~GAAG~~,KAAK,~~GAAG~~,KAAK,~~GAAG~~,IAAI;AAAA,~~IACvD~~;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/ColorInputFlyout/ColorPickerTrigger.es.js CHANGED Viewed

@@ -1,14 +1,15 @@
 import { MenuItemContent as f } from "../MenuItem/MenuItemContent.es.js";
 import { Trigger as g } from "../Trigger/Trigger.es.js";
 import u from "../../foundation/Icon/Generated/IconDroplet.es.js";
-import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
-import { useMemoizedId as b } from "../../hooks/useMemoizedId.es.js";
+import { IconSize as b } from "../../foundation/Icon/IconSize.es.js";
+import { useMemoizedId as x } from "../../hooks/useMemoizedId.es.js";
 import { useFocusRing as d } from "@react-aria/focus";
+import { toShortRgb as E } from "../../utilities/colors.es.js";
 import { merge as r } from "../../utilities/merge.es.js";
 import e from "react";
-import E from "tinycolor2";
+import h from "tinycolor2";
 import { ColorInputTitle as y } from "./ColorInputTitle.es.js";
-const j = ({
+const D = ({
   id: m,
   currentColor: t,
   format: i,
@@ -18,7 +19,7 @@ const j = ({
   onClear: a,
   onDelete: s
 }) => {
-  const { isFocusVisible: w, focusProps: c } = d(), p = t ? E(t).toRgbString() : "";
+  const { isFocusVisible: w, focusProps: c } = d(), p = t ? h(E(t)).toRgbString() : "";
   return /* @__PURE__ */ e.createElement(g, {
     isOpen: n,
     disabled: o,
@@ -29,7 +30,7 @@ const j = ({
   }, /* @__PURE__ */ e.createElement("button", {
     ...c,
     type: "button",
-    id: b(m),
+    id: x(m),
     className: r([
       "tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-7",
       !t && "tw-text-black-60",
@@ -49,11 +50,11 @@ const j = ({
     }) : /* @__PURE__ */ e.createElement("span", {
       className: "tw-text-black-70"
     }, /* @__PURE__ */ e.createElement(u, {
-      size: x.Size12
+      size: b.Size12
     }))
   })));
 };
 export {
-  j as ColorInputTrigger
+  D as ColorInputTrigger
 };
 //# sourceMappingURL=ColorPickerTrigger.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerTrigger.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContent } from '@components/MenuItem/MenuItemContent';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport IconDroplet from '@foundation/Icon/Generated/IconDroplet';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorFormat } from '../../types/colors';\nimport { ColorInputTitle } from './ColorInputTitle';\nimport { ColorPickerFlyoutProps } from './ColorPickerFlyout';\n\ntype ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' \| 'currentColor' \| 'disabled'> & {\n isOpen?: boolean;\n format: ColorFormat;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorInputTrigger: FC<ColorInputTriggerProps> = ({\n id,\n currentColor,\n format,\n isOpen = false,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const backgroundColor = currentColor ? tinycolor(currentColor).toRgbString() : '';\n\n return (\n <Trigger\n isOpen={isOpen}\n disabled={disabled}\n isFocusVisible={isFocusVisible}\n showClear={!!currentColor && clearable}\n onClear={onClear}\n onDelete={onDelete}\n >\n <button\n {...focusProps}\n type=\"button\"\n id={useMemoizedId(id)}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-7',\n !currentColor && 'tw-text-black-60',\n disabled && 'tw-text-black-40',\n ])}\n >\n <MenuItemContent\n title={\n currentColor ? <ColorInputTitle format={format} currentColor={currentColor} /> : 'Select color'\n }\n decorator={\n currentColor ? (\n <span\n className={merge([\n 'tw-h-4 tw-w-4 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n disabled && 'tw-opacity-50',\n ])}\n style={{ backgroundColor }}\n />\n ) : (\n <span className=\"tw-text-black-70\">\n <IconDroplet size={IconSize.Size12} />\n </span>\n )\n }\n />\n </button>\n </Trigger>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;AAuBO~~,MAAM,IAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAS;AAAA,EACT,cAAW;AAAA,EACX,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACE;AACI,QAAA,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAkB,IAAe,EAAU,CAAY,EAAE,YAAgB,IAAA;~~AAE/E~~,SACK,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,CAAC,KAAgB;AAAA,IAC7B;AAAA,IACA;AAAA,EAAA,GAEC,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,IAAI,EAAc,CAAE;AAAA,IACpB,WAAW,EAAM;AAAA,MACb;AAAA,MACA,CAAC,KAAgB;AAAA,MACjB,KAAY;AAAA,IAAA,CACf;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IACG,OACI,IAAgB,kBAAA,cAAA,GAAA;AAAA,MAAgB;AAAA,MAAgB;AAAA,IAA4B,CAAA,IAAK;AAAA,IAErF,WACI,IACK,kBAAA,cAAA,QAAA;AAAA,MACG,WAAW,EAAM;AAAA,QACb;AAAA,QACA,KAAY;AAAA,MAAA,CACf;AAAA,MACD,OAAO,EAAE,mBAAgB;AAAA,IAAA,CAC7B,IAEC,kBAAA,cAAA,QAAA;AAAA,MAAK,WAAU;AAAA,IAAA,GACX,kBAAA,cAAA,GAAA;AAAA,MAAY,MAAM,EAAS;AAAA,IAAA,CAAQ,CACxC;AAAA,EAGZ,CAAA,CACJ,CACJ;AAER;"}
1	+ {"version":3,"file":"ColorPickerTrigger.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContent } from '@components/MenuItem/MenuItemContent';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport IconDroplet from '@foundation/Icon/Generated/IconDroplet';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorFormat } from '../../types/colors';\nimport { ColorInputTitle } from './ColorInputTitle';\nimport { ColorPickerFlyoutProps } from './ColorPickerFlyout';\n\ntype ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' \| 'currentColor' \| 'disabled'> & {\n isOpen?: boolean;\n format: ColorFormat;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorInputTrigger: FC<ColorInputTriggerProps> = ({\n id,\n currentColor,\n format,\n isOpen = false,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const backgroundColor = currentColor ? tinycolor(toShortRgb(currentColor)).toRgbString() : '';\n\n return (\n <Trigger\n isOpen={isOpen}\n disabled={disabled}\n isFocusVisible={isFocusVisible}\n showClear={!!currentColor && clearable}\n onClear={onClear}\n onDelete={onDelete}\n >\n <button\n {...focusProps}\n type=\"button\"\n id={useMemoizedId(id)}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-7',\n !currentColor && 'tw-text-black-60',\n disabled && 'tw-text-black-40',\n ])}\n >\n <MenuItemContent\n title={\n currentColor ? <ColorInputTitle format={format} currentColor={currentColor} /> : 'Select color'\n }\n decorator={\n currentColor ? (\n <span\n className={merge([\n 'tw-h-4 tw-w-4 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n disabled && 'tw-opacity-50',\n ])}\n style={{ backgroundColor }}\n />\n ) : (\n <span className=\"tw-text-black-70\">\n <IconDroplet size={IconSize.Size12} />\n </span>\n )\n }\n />\n </button>\n </Trigger>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwBO,MAAM,IAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAS;AAAA,EACT,cAAW;AAAA,EACX,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACE;AACI,QAAA,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAkB,IAAe,EAAU,EAAW,CAAY,CAAC,EAAE,YAAgB,IAAA;AAE3F,SACK,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,CAAC,KAAgB;AAAA,IAC7B;AAAA,IACA;AAAA,EAAA,GAEC,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,IAAI,EAAc,CAAE;AAAA,IACpB,WAAW,EAAM;AAAA,MACb;AAAA,MACA,CAAC,KAAgB;AAAA,MACjB,KAAY;AAAA,IAAA,CACf;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IACG,OACI,IAAgB,kBAAA,cAAA,GAAA;AAAA,MAAgB;AAAA,MAAgB;AAAA,IAA4B,CAAA,IAAK;AAAA,IAErF,WACI,IACK,kBAAA,cAAA,QAAA;AAAA,MACG,WAAW,EAAM;AAAA,QACb;AAAA,QACA,KAAY;AAAA,MAAA,CACf;AAAA,MACD,OAAO,EAAE,mBAAgB;AAAA,IAAA,CAC7B,IAEC,kBAAA,cAAA,QAAA;AAAA,MAAK,WAAU;AAAA,IAAA,GACX,kBAAA,cAAA,GAAA;AAAA,MAAY,MAAM,EAAS;AAAA,IAAA,CAAQ,CACxC;AAAA,EAGZ,CAAA,CACJ,CACJ;AAER;"}

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

@@ -1,5 +1,5 @@
-import { Slider as N } from "../Slider/Slider.es.js";
-import { TextInput as L } from "../TextInput/TextInput.es.js";
+import { Slider as h } from "../Slider/Slider.es.js";
+import { TextInput as N } from "../TextInput/TextInput.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -347,7 +347,7 @@ import "../../foundation/Icon/Generated/IconChartPie16.es.js";
 import "../../foundation/Icon/Generated/IconChartPie20.es.js";
 import "../../foundation/Icon/Generated/IconChartPie24.es.js";
 import "../../foundation/Icon/Generated/IconChartPie32.es.js";
-import h from "../../foundation/Icon/Generated/IconCheckMark.es.js";
+import L from "../../foundation/Icon/Generated/IconCheckMark.es.js";
 import "../../foundation/Icon/Generated/IconCheckMark12.es.js";
 import "../../foundation/Icon/Generated/IconCheckMark16.es.js";
 import "../../foundation/Icon/Generated/IconCheckMark20.es.js";
@@ -1625,16 +1625,16 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import { IconSize as S } from "../../foundation/Icon/IconSize.es.js";
-import { isColorLight as C } from "../../utilities/colors.es.js";
+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 y } from "react";
+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()), HC = ({ palettes: m = [], currentColor: o, onSelect: x }) => {
+const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.toLocaleLowerCase().trim()), JC = ({ 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" }
-  ], [n, g] = s(w[0].id), [p, u] = s(""), [E, b] = s(m);
-  y(() => {
+  ], [n, u] = s(w[0].id), [p, g] = s(""), [E, b] = s(m);
+  R(() => {
     const i = setTimeout(() => {
       b(m.filter(({ title: e, colors: a }) => l(e, p) || a.some(({ name: r }) => l(r, p))).map(({ id: e, title: a, colors: r }) => ({
         id: e,
@@ -1652,18 +1652,18 @@ const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.t
     className: "tw-flex tw-gap-2"
   }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex-1"
-  }, /* @__PURE__ */ t.createElement(L, {
+  }, /* @__PURE__ */ t.createElement(N, {
     value: p,
     decorator: /* @__PURE__ */ t.createElement(v, null),
     placeholder: "Search",
-    onChange: (i) => u(i),
+    onChange: (i) => g(i),
     clearable: !0
   })), /* @__PURE__ */ t.createElement("div", {
     className: "tw-w-[72px]"
-  }, /* @__PURE__ */ t.createElement(N, {
+  }, /* @__PURE__ */ t.createElement(h, {
     items: w,
     activeItemId: n,
-    onChange: (i) => g(i)
+    onChange: (i) => u(i)
   }))), /* @__PURE__ */ t.createElement("ul", {
     className: "tw-flex tw-flex-col tw-gap-4"
   }, f.length > 0 ? f.map(({ id: i, title: e, colors: a }) => /* @__PURE__ */ t.createElement("li", {
@@ -1688,14 +1688,14 @@ const l = (m, o = "") => m == null ? void 0 : m.toLocaleLowerCase().includes(o.t
       "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",
       C(r) ? "tw-text-black" : "tw-text-white"
     ]),
-    style: { background: z(r).toRgbString() }
-  }, r.r === o.r && r.g === o.g && r.b === o.b && r.a === o.a && /* @__PURE__ */ t.createElement(h, {
+    style: { background: z(y(r)).toRgbString() }
+  }, r.red === o.red && r.green === o.green && r.blue === o.blue && r.alpha === o.alpha && /* @__PURE__ */ t.createElement(L, {
     size: S.Size20
   })), n === "List" && /* @__PURE__ */ t.createElement("span", {
     className: "tw-h-6 tw-grow tw-flex tw-items-center tw-text-sm tw-text-left"
   }, r.name))))))) : "No colors found"));
 };
 export {
-  HC as BrandColorPicker
+  JC 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 } 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(color).toRgbString() }}\n >\n {color.r === currentColor.r &&\n color.g === currentColor.g &&\n color.b === currentColor.b &&\n color.a === currentColor.a && (\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/ColorPicker/ColorPreview.es.js CHANGED Viewed

@@ -1,14 +1,15 @@
-import r from "react";
-import e from "tinycolor2";
-const n = ({ color: t }) => {
-  const o = e(t).toRgbString();
-  return /* @__PURE__ */ r.createElement("div", {
+import { toShortRgb as r } from "../../utilities/colors.es.js";
+import e from "react";
+import c from "tinycolor2";
+const w = ({ color: t }) => {
+  const o = c(r(t)).toRgbString();
+  return /* @__PURE__ */ e.createElement("div", {
     className: "tw-sticky tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-bg-white tw-z-20 dark:tw-bg-black-95",
     style: { backgroundColor: o },
     "data-test-id": "color-preview"
   });
 };
 export {
-  n as ColorPreview
+  w as ColorPreview
 };
 //# sourceMappingURL=ColorPreview.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPreview.es.js","sources":["../../../src/components/ColorPicker/ColorPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color } from '../../types/colors';\n\ntype ColorPreviewProps = {\n color: Color;\n};\n\nexport const ColorPreview: FC<ColorPreviewProps> = ({ color }) => {\n const parsedColor = tinycolor(color);\n const backgroundColor = parsedColor.toRgbString();\n\n return (\n <div\n className=\"tw-sticky tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-bg-white tw-z-20 dark:tw-bg-black-95\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n );\n};\n"],"names":[],"mappings":"~~;;AAUa~~,MAAA,IAAsC,CAAC,EAAE,eAAY;AAExD,QAAA,IAAkB,AADJ,EAAU,CAAK,~~EACC~~;AAEpC,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO,EAAE,mBAAgB;AAAA,IACzB,gBAAa;AAAA,EAAA,CAChB;AAET;"}
1	+ {"version":3,"file":"ColorPreview.es.js","sources":["../../../src/components/ColorPicker/ColorPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { toShortRgb } from '@utilities/colors';\nimport React, { FC } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color } from '../../types/colors';\n\ntype ColorPreviewProps = {\n color: Color;\n};\n\nexport const ColorPreview: FC<ColorPreviewProps> = ({ color }) => {\n const parsedColor = tinycolor(toShortRgb(color));\n const backgroundColor = parsedColor.toRgbString();\n\n return (\n <div\n className=\"tw-sticky tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-bg-white tw-z-20 dark:tw-bg-black-95\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n );\n};\n"],"names":[],"mappings":";;;AAWa,MAAA,IAAsC,CAAC,EAAE,eAAY;AAExD,QAAA,IAAkB,AADJ,EAAU,EAAW,CAAK,CAAC,EACX;AAEpC,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO,EAAE,mBAAgB;AAAA,IACzB,gBAAa;AAAA,EAAA,CAChB;AAET;"}

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

@@ -1,98 +1,104 @@
-import { Dropdown as b } from "../Dropdown/Dropdown.es.js";
-import { TextInputType as n } from "../TextInput/TextInput.es.js";
-import e, { useState as x, useEffect as k } from "react";
-import { RgbaColorPicker as y } from "react-colorful";
-import u from "tinycolor2";
-import { ColorFormat as f } from "../../types/colors.es.js";
-import { ColorInput as m, DecoratorPosition as C } from "./ColorInput.es.js";
-const g = (a) => u(a).toHex(), M = ({
+import { Dropdown as I } from "../Dropdown/Dropdown.es.js";
+import { TextInputType as m } from "../TextInput/TextInput.es.js";
+import { toShortRgb as k, toLongRgb as y } from "../../utilities/colors.es.js";
+import t, { useState as f, useEffect as C } from "react";
+import { RgbaColorPicker as H } from "react-colorful";
+import v from "tinycolor2";
+import { ColorFormat as h } from "../../types/colors.es.js";
+import { ColorInput as r, DecoratorPosition as R } from "./ColorInput.es.js";
+const E = (a) => v(k(a)).toHex(), j = ({
   currentColor: a,
   currentFormat: l,
   setFormat: s,
   onSelect: o
 }) => {
-  const E = [
+  const b = [
     {
       id: "color-picker-format-dropdown-block",
-      menuItems: Object.values(f).map((t) => ({ id: t, title: t.toLocaleUpperCase() }))
+      menuItems: Object.values(h).map((e) => ({ id: e, title: e.toLocaleUpperCase() }))
     }
-  ], { r: v, g: h, b: N, a: r = 1 } = a, [c, i] = x(g(a)), [I, p] = x(r), w = () => {
-    const t = u(c);
-    t.isValid() && o(t.toRgb());
+  ], { red: i, green: c, blue: p, alpha: n = 1 } = a, [d, g] = f(E(a)), [N, w] = f(n), u = () => {
+    const e = v(d);
+    e.isValid() && o(y(e.toRgb()));
   };
-  return k(() => {
-    p(r), i(g(a));
-  }, [a]), /* @__PURE__ */ e.createElement("div", {
+  return C(() => {
+    w(n), g(E(a));
+  }, [a]), /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex tw-flex-col tw-gap-4",
     "data-test-id": "custom-color-picker",
     id: "custom-color-picker"
-  }, /* @__PURE__ */ e.createElement("div", {
+  }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full"
-  }, /* @__PURE__ */ e.createElement("div", {
+  }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-min-w-[84px]"
-  }, /* @__PURE__ */ e.createElement(b, {
-    menuBlocks: E,
+  }, /* @__PURE__ */ t.createElement(I, {
+    menuBlocks: b,
     activeItemId: l,
-    onChange: (t) => t && s && s(t)
-  })), l === f.Hex ? /* @__PURE__ */ e.createElement("div", {
+    onChange: (e) => e && s && s(e)
+  })), l === h.Hex ? /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex-1"
-  }, /* @__PURE__ */ e.createElement(m, {
-    value: c,
+  }, /* @__PURE__ */ t.createElement(r, {
+    value: d,
     decorator: "#",
     size: 6,
-    onChange: i,
-    onEnterPressed: w,
-    onBlur: w
-  })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+    onChange: g,
+    onEnterPressed: u,
+    onBlur: u
+  })) : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex-1"
-  }, /* @__PURE__ */ e.createElement(m, {
+  }, /* @__PURE__ */ t.createElement(r, {
     min: 0,
     max: 255,
     size: 3,
-    type: n.Number,
-    value: v.toString(),
-    onChange: (t) => o({ ...a, r: parseInt(t) })
-  })), /* @__PURE__ */ e.createElement("div", {
+    type: m.Number,
+    value: i.toString(),
+    onChange: (e) => o({ ...a, red: parseInt(e) })
+  })), /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex-1"
-  }, /* @__PURE__ */ e.createElement(m, {
+  }, /* @__PURE__ */ t.createElement(r, {
     min: 0,
     max: 255,
     size: 3,
-    type: n.Number,
-    value: h.toString(),
-    onChange: (t) => o({ ...a, g: parseInt(t) })
-  })), /* @__PURE__ */ e.createElement("div", {
+    type: m.Number,
+    value: c.toString(),
+    onChange: (e) => o({ ...a, green: parseInt(e) })
+  })), /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex-1"
-  }, /* @__PURE__ */ e.createElement(m, {
+  }, /* @__PURE__ */ t.createElement(r, {
     min: 0,
     max: 255,
     size: 3,
-    type: n.Number,
-    value: N.toString(),
-    onChange: (t) => o({ ...a, b: parseInt(t) })
-  }))), /* @__PURE__ */ e.createElement(m, {
+    type: m.Number,
+    value: p.toString(),
+    onChange: (e) => o({ ...a, blue: parseInt(e) })
+  }))), /* @__PURE__ */ t.createElement(r, {
     min: 0,
     max: 100,
     size: 3,
-    type: n.Number,
-    value: Math.trunc(I * 100).toString(),
+    type: m.Number,
+    value: Math.trunc(N * 100).toString(),
     decorator: "%",
-    decoratorPosition: C.Right,
-    onChange: (t) => {
-      const d = parseInt(t || "0", 10) / 100;
-      p(d), o({ ...a, a: d });
+    decoratorPosition: R.Right,
+    onChange: (e) => {
+      const x = parseInt(e || "0", 10) / 100;
+      w(x), o({ ...a, alpha: x });
     }
-  })), /* @__PURE__ */ e.createElement("div", {
+  })), /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex tw-gap-2 tw-w-full tw-h-[200px]"
-  }, /* @__PURE__ */ e.createElement("div", {
+  }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-relative tw-grow tw-rounded"
-  }, /* @__PURE__ */ e.createElement(y, {
-    color: { ...a, a: r },
-    onChange: o,
+  }, /* @__PURE__ */ t.createElement(H, {
+    color: { r: i, g: c, b: p, a: n },
+    onChange: (e) => o({
+      red: e.r,
+      green: e.g,
+      blue: e.b,
+      alpha: e.a
+    }),
     style: { width: "100%" }
   }))));
 };
 export {
-  M as CustomColorPicker
+  j as CustomColorPicker
 };
 //# sourceMappingURL=CustomColorPicker.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomColorPicker.es.js","sources":["../../../src/components/ColorPicker/CustomColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { Dropdown } from '@components/Dropdown/Dropdown';\nimport { TextInputType } from '@components/TextInput/TextInput';\nimport React, { FC, useEffect, useState } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types/colors';\nimport { ColorInput, DecoratorPosition } from './ColorInput';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst convertToHex = (color: Color) => tinycolor(color).toHex();\n\nexport const CustomColorPicker: FC<Omit<ColorPickerProps, 'palette'>> = ({\n currentColor,\n currentFormat,\n setFormat,\n onSelect,\n}) => {\n const formatMenuBlock = [\n {\n id: 'color-picker-format-dropdown-block',\n menuItems: Object.values(ColorFormat).map((id) => ({ id, title: id.toLocaleUpperCase() })),\n },\n ];\n const { r, g, b, a = 1 } = currentColor;\n const [hexInput, setHexInput] = useState(convertToHex(currentColor));\n const [~~alpha~~, ~~setAlpha~~] = useState(a);\n\n const handleHexChange = () => {\n const parsedHex = tinycolor(hexInput);\n if (parsedHex.isValid()) {\n onSelect(parsedHex.toRgb());\n }\n };\n\n useEffect(() => {\n ~~setAlpha~~(a);\n setHexInput(convertToHex(currentColor));\n }, [currentColor]);\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"custom-color-picker\" id=\"custom-color-picker\">\n <div className=\"tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full\">\n <div className=\"tw-min-w-[84px]\">\n <Dropdown\n menuBlocks={formatMenuBlock}\n activeItemId={currentFormat}\n onChange={(id) => id && setFormat && setFormat(id as ColorFormat)}\n />\n </div>\n {currentFormat === ColorFormat.Hex ? (\n <div className=\"tw-flex-1\">\n <ColorInput\n value={hexInput}\n decorator=\"#\"\n size={6}\n onChange={setHexInput}\n onEnterPressed={handleHexChange}\n onBlur={handleHexChange}\n />\n </div>\n ) : (\n <>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={r.toString()}\n onChange={(r) => onSelect({ ...currentColor, r: parseInt(r) })}\n />\n </div>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={g.toString()}\n onChange={(g) => onSelect({ ...currentColor, g: parseInt(g) })}\n />\n </div>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={b.toString()}\n onChange={(b) => onSelect({ ...currentColor, b: parseInt(b) })}\n />\n </div>\n </>\n )}\n <ColorInput\n min={0}\n max={100}\n size={3}\n type={TextInputType.Number}\n value={Math.trunc(~~alpha~~ 100).toString()}\n decorator=\"%\"\n decoratorPosition={DecoratorPosition.Right}\n onChange={(value) => {\n const a = parseInt(value \|\| '0', 10) / 100;\n ~~setAlpha~~(a);\n onSelect({ ...currentColor, a });\n }}\n />\n </div>\n <div className=\"tw-flex tw-gap-2 tw-w-full tw-h-[200px]\">\n <div className=\"tw-relative tw-grow tw-rounded\">\n <RgbaColorPicker color={{ ~~...currentColor~~, a }} onChange={onSelect} style={{ width: '100%' }} />\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;AAWA~~,MAAM,IAAe,CAAC,MAAiB,EAAU,CAAK,EAAE,~~MAAM~~,~~GAEjD,~~IAA2D,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACE;AACF,QAAM,IAAkB;AAAA,IACpB;AAAA,MACI,IAAI;AAAA,MACJ,WAAW,OAAO,OAAO,CAAW,EAAE,IAAI,CAAC,MAAQ,GAAE,OAAI,OAAO,EAAG,kBAAA,EAAsB,EAAA;AAAA,IAC7F;AAAA,EAAA,GAEE,EAAE,~~MAAG~~,~~MAAG~~,~~MAAG~~,~~OAAI~~,MAAM,~~GACrB~~,CAAC,GAAU,KAAe,EAAS,EAAa,CAAY,CAAC,GAC7D,CAAC,~~GAAO~~,~~KAAY~~,EAAS,~~CAAC~~,~~GAE9B~~,IAAkB,MAAM;AACpB,UAAA,IAAY,EAAU,CAAQ;AAChC,IAAA,EAAU,~~aACD~~,~~EAAA~~,EAAU,~~OAAO~~;AAAA,~~EAC9B~~;AAGJ,WAAU,MAAM;AACZ,~~MAAS~~,~~CAAC~~,~~GACE~~,EAAA,EAAa,CAAY,CAAC;AAAA,EAAA,GACvC,CAAC,CAAY,CAAC,GAGZ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAA+B,gBAAa;AAAA,IAAsB,IAAG;AAAA,EAAA,GAC/E,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IACG,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,UAAU,CAAC,MAAO,KAAM,KAAa,EAAU,CAAiB;AAAA,EAAA,CACpE,CACJ,GACC,MAAkB,EAAY,MAC1B,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO;AAAA,IACP,WAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EAAA,CACZ,CACJ,IAEA,kBAAA,cAAA,EAAA,UAAA,MACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAc;AAAA,IACpB,OAAO,~~EAAE~~,SAAS;AAAA,~~IAClB~~,UAAU,CAAC,~~MAAM~~,EAAS,EAAE,GAAG,GAAc,~~GAAG~~,SAAS,~~CAAC~~,GAAG;AAAA,~~EACjE~~,CAAA,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAc;AAAA,IACpB,OAAO,~~EAAE~~,SAAS;AAAA,~~IAClB~~,UAAU,CAAC,~~MAAM~~,EAAS,EAAE,GAAG,GAAc,~~GAAG~~,SAAS,~~CAAC~~,GAAG;AAAA,~~EACjE~~,CAAA,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAc;AAAA,IACpB,OAAO,~~EAAE~~,SAAS;AAAA,~~IAClB~~,UAAU,CAAC,~~MAAM~~,EAAS,EAAE,GAAG,GAAc,~~GAAG~~,SAAS,~~CAAC~~,GAAG;AAAA,~~EACjE~~,CAAA,CACJ,CACJ,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAc;AAAA,IACpB,OAAO,KAAK,MAAM,~~IAAQ~~,GAAG,EAAE,SAAS;AAAA,~~IACxC~~,WAAU;AAAA,IACV,mBAAmB,EAAkB;AAAA,IACrC,UAAU,CAAC,MAAU;AACjB,YAAM,IAAI,SAAS,KAAS,KAAK,EAAE,IAAI;AACvC,~~QAAS~~,CAAC,~~GACV~~,EAAS,EAAE,GAAG,GAAc,~~GAAA~~,EAAG,CAAA;AAAA,~~IACnC~~;AAAA,EACJ,CAAA,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,GAAA;AAAA,~~IAAgB~~,OAAO,EAAE,GAAG,~~GAAc~~,~~KAAE~~;AAAA,~~IAAG~~,UAAU;AAAA,~~IAAU~~,OAAO,EAAE,OAAO,OAAO;AAAA,EAAA,~~CAAG~~,~~CAClG~~,CACJ,CACJ;AAER;"}
1	+ {"version":3,"file":"CustomColorPicker.es.js","sources":["../../../src/components/ColorPicker/CustomColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { Dropdown } from '@components/Dropdown/Dropdown';\nimport { TextInputType } from '@components/TextInput/TextInput';\nimport { toLongRgb, toShortRgb } from '@utilities/colors';\nimport React, { FC, useEffect, useState } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types/colors';\nimport { ColorInput, DecoratorPosition } from './ColorInput';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst convertToHex = (color: Color) => tinycolor(toShortRgb(color)).toHex();\n\nexport const CustomColorPicker: FC<Omit<ColorPickerProps, 'palette'>> = ({\n currentColor,\n currentFormat,\n setFormat,\n onSelect,\n}) => {\n const formatMenuBlock = [\n {\n id: 'color-picker-format-dropdown-block',\n menuItems: Object.values(ColorFormat).map((id) => ({ id, title: id.toLocaleUpperCase() })),\n },\n ];\n const { red, green, blue, alpha = 1 } = currentColor;\n const [hexInput, setHexInput] = useState(convertToHex(currentColor));\n const [alphaValue, setAlphaValue] = useState(alpha);\n\n const handleHexChange = () => {\n const parsedHex = tinycolor(hexInput);\n if (parsedHex.isValid()) {\n onSelect(toLongRgb(parsedHex.toRgb()));\n }\n };\n\n useEffect(() => {\n setAlphaValue(alpha);\n setHexInput(convertToHex(currentColor));\n }, [currentColor]);\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"custom-color-picker\" id=\"custom-color-picker\">\n <div className=\"tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full\">\n <div className=\"tw-min-w-[84px]\">\n <Dropdown\n menuBlocks={formatMenuBlock}\n activeItemId={currentFormat}\n onChange={(id) => id && setFormat && setFormat(id as ColorFormat)}\n />\n </div>\n {currentFormat === ColorFormat.Hex ? (\n <div className=\"tw-flex-1\">\n <ColorInput\n value={hexInput}\n decorator=\"#\"\n size={6}\n onChange={setHexInput}\n onEnterPressed={handleHexChange}\n onBlur={handleHexChange}\n />\n </div>\n ) : (\n <>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={red.toString()}\n onChange={(value) => onSelect({ ...currentColor, red: parseInt(value) })}\n />\n </div>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={green.toString()}\n onChange={(value) => onSelect({ ...currentColor, green: parseInt(value) })}\n />\n </div>\n <div className=\"tw-flex-1\">\n <ColorInput\n min={0}\n max={255}\n size={3}\n type={TextInputType.Number}\n value={blue.toString()}\n onChange={(value) => onSelect({ ...currentColor, blue: parseInt(value) })}\n />\n </div>\n </>\n )}\n <ColorInput\n min={0}\n max={100}\n size={3}\n type={TextInputType.Number}\n value={Math.trunc(alphaValue 100).toString()}\n decorator=\"%\"\n decoratorPosition={DecoratorPosition.Right}\n onChange={(value) => {\n const a = parseInt(value \|\| '0', 10) / 100;\n setAlphaValue(a);\n onSelect({ ...currentColor, alpha: a });\n }}\n />\n </div>\n <div className=\"tw-flex tw-gap-2 tw-w-full tw-h-[200px]\">\n <div className=\"tw-relative tw-grow tw-rounded\">\n <RgbaColorPicker\n color={{ r: red, g: green, b: blue, a: alpha }}\n onChange={(color) =>\n onSelect({\n red: color.r,\n green: color.g,\n blue: color.b,\n alpha: color.a,\n })\n }\n style={{ width: '100%' }}\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/foundation/Icon/Generated/IconBasketball12.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import e, { memo as l } from "react";
-function m(t) {
+function n(t) {
   const a = "tw-flex tw-items-center tw-justify-center tw-fill-current";
   return /* @__PURE__ */ e.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8,15 +8,24 @@ function m(t) {
     className: a,
     name: "IconBasketball12",
     ...t
+  }, /* @__PURE__ */ e.createElement("g", {
+    fill: "none"
+  }, /* @__PURE__ */ e.createElement("g", {
+    clipPath: "url(#prefix__a)"
   }, /* @__PURE__ */ e.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M8.922 10.058a4.973 4.973 0 0 1-2.422.917V6.5h1.019a6.471 6.471 0 0 0 1.403 3.558Zm-.4-3.558a5.47 5.47 0 0 0 1.15 2.894A4.981 4.981 0 0 0 10.975 6.5H8.522Zm2.453-1a4.981 4.981 0 0 0-1.303-2.894A5.47 5.47 0 0 0 8.522 5.5h2.453Zm-3.456 0a6.471 6.471 0 0 1 1.403-3.558A4.973 4.973 0 0 0 6.5 1.025V5.5h1.019ZM5.5 5.5V1.025a4.973 4.973 0 0 0-2.422.917A6.47 6.47 0 0 1 4.481 5.5H5.5Zm-2.022 0a5.47 5.47 0 0 0-1.15-2.894A4.981 4.981 0 0 0 1.025 5.5h2.453Zm-2.453 1a4.981 4.981 0 0 0 1.303 2.894A5.47 5.47 0 0 0 3.478 6.5H1.025Zm3.456 0H5.5v4.475a4.973 4.973 0 0 1-2.422-.917A6.472 6.472 0 0 0 4.481 6.5ZM6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Z",
     clipRule: "evenodd"
-  }));
+  })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", {
+    id: "prefix__a"
+  }, /* @__PURE__ */ e.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h12v12H0z"
+  })))));
 }
-const c = l(m);
+const m = l(n);
 export {
-  c as default
+  m as default
 };
 //# sourceMappingURL=IconBasketball12.es.js.map