npm - @frontify/fondue - Versions diffs - 12.0.0-beta.164 → 12.0.0-beta.165 - Mend

@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

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

package/dist/components/AssetInput/SingleAsset/SpinningCircle.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { AssetInputProps } from '..';
-export declare const SpinningCircle: FC<Pick<AssetInputProps, 'size'>>;
+export declare const SpinningCircle: {
+    ({ size }: Pick<AssetInputProps, 'size'>): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SpinningCircle.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/SpinningCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport { AssetInputProps, AssetInputSize } from '..';\n\nexport const SpinningCircle: ~~FC<~~Pick<AssetInputProps, 'size'>> = ~~({ size })~~ => (\n <svg\n className={merge(['tw-animate-spin', size === AssetInputSize.Large ? 'tw-w-16 tw-h-16' : 'tw-w-5 tw-h-5'])}\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 44 44\"\n data-test-id=\"spinning-circle\"\n >\n <path fill=\"none\" stroke=\"#f1f3f9\" strokeWidth=\"2\" d=\"M2,22 a20,20 0 0,1 20,-20\" />\n <path fill=\"none\" stroke=\"#7159d7\" strokeWidth=\"2\" d=\"M2,22 a20,20 0 1,0 20,-20\" />\n </svg>\n);\nSpinningCircle.displayName = 'FondueSpinningCircle';\n"],"names":["SpinningCircle","size","React","merge","AssetInputSize"],"mappings":";;;AAMO,MAAMA,~~IAAoD~~,CAAC,EAAE,MAAAC,~~EAChE~~,MAAA,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM,CAAC,mBAAmBF,MAASG,EAAe,QAAQ,oBAAoB,eAAe,CAAC;AAAA,IACzG,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,gBAAa;AAAA,EAAA;AAAA,EAEb,gBAAAF,EAAA,cAAC,UAAK,MAAK,QAAO,QAAO,WAAU,aAAY,KAAI,GAAE,4BAA4B,CAAA;AAAA,EACjF,gBAAAA,EAAA,cAAC,UAAK,MAAK,QAAO,QAAO,WAAU,aAAY,KAAI,GAAE,4BAA4B,CAAA;AACrF;AAEJF,EAAe,cAAc;"}
1	+ {"version":3,"file":"SpinningCircle.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/SpinningCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement } from 'react';\nimport { AssetInputProps, AssetInputSize } from '..';\n\nexport const SpinningCircle = ({ size }: Pick<AssetInputProps, 'size'>): ReactElement => (\n <svg\n className={merge(['tw-animate-spin', size === AssetInputSize.Large ? 'tw-w-16 tw-h-16' : 'tw-w-5 tw-h-5'])}\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 44 44\"\n data-test-id=\"spinning-circle\"\n >\n <path fill=\"none\" stroke=\"#f1f3f9\" strokeWidth=\"2\" d=\"M2,22 a20,20 0 0,1 20,-20\" />\n <path fill=\"none\" stroke=\"#7159d7\" strokeWidth=\"2\" d=\"M2,22 a20,20 0 1,0 20,-20\" />\n </svg>\n);\nSpinningCircle.displayName = 'FondueSpinningCircle';\n"],"names":["SpinningCircle","size","React","merge","AssetInputSize"],"mappings":";;;AAMO,MAAMA,IAAiB,CAAC,EAAE,MAAAC,EAC7B,MAAA,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM,CAAC,mBAAmBF,MAASG,EAAe,QAAQ,oBAAoB,eAAe,CAAC;AAAA,IACzG,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,gBAAa;AAAA,EAAA;AAAA,EAEb,gBAAAF,EAAA,cAAC,UAAK,MAAK,QAAO,QAAO,WAAU,aAAY,KAAI,GAAE,4BAA4B,CAAA;AAAA,EACjF,gBAAAA,EAAA,cAAC,UAAK,MAAK,QAAO,QAAO,WAAU,aAAY,KAAI,GAAE,4BAA4B,CAAA;AACrF;AAEJF,EAAe,cAAc;"}

package/dist/components/Badge/Badge.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { BadgeProps } from './types';
-export declare const Badge: FC<BadgeProps>;
+export declare const Badge: {
+    ({ children, status, icon, style, size, emphasis, disabled, onClick, onDismiss, }: BadgeProps): Nullable<ReactElement>;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, cloneElement } from 'react';\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, BadgeProps, BadgeStyle } from './types';\n\nexport const Badge: ~~FC<BadgeProps>~~ = ({\n children,\n status,\n icon,\n style = BadgeStyle.Primary,\n size = 'medium',\n emphasis = BadgeEmphasis.None,\n disabled = false,\n onClick,\n onDismiss,\n}) => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'button' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (node instanceof Array) {\n return node.map(getNodeText).join('');\n }\n if (node && typeof node === 'object' && 'props' in node) {\n return getNodeText(node.props.children);\n }\n return '';\n };\n\n const badgeTitle = getNodeText(children);\n const isCircular = !children && !onDismiss && Boolean(status \|\| icon);\n\n return (\n <div\n className={merge([\n 'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n ])}\n data-test-id=\"badge\"\n >\n <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular\n ? getCircularSizeClasses(size)\n : getSizeClasses(children, status, icon, size, !!onDismiss),\n FOCUS_VISIBLE_STYLE,\n ])}\n data-test-id=\"badge-button\"\n title={badgeTitle}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} />}\n {icon && (\n <span\n data-test-id=\"badge-icon\"\n className={merge([\n 'tw-flex-none tw-leading-none',\n disabled && 'tw-opacity-30',\n !!children && 'tw-pr-1',\n ])}\n >\n {cloneElement(icon, { size: IconSize.Size16 })}\n </span>\n )}\n {children && (\n <span className=\"tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate tw-px-0.5\">\n {children}\n </span>\n )}\n </Container>\n {onDismiss && (\n <button\n type=\"button\"\n data-test-id=\"badge-dismiss\"\n className={merge([\n 'tw-absolute tw-rounded tw-leading-4',\n FOCUS_VISIBLE_STYLE,\n size === 'medium' ? 'tw-right-1.5' : 'tw-right-1',\n ])}\n onClick={() => onDismiss()}\n aria-label={`Dismiss ${badgeTitle}`}\n >\n <IconCross size={IconSize.Size16} />\n </button>\n )}\n </div>\n );\n};\nBadge.displayName = 'FondueBadge';\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","Container","getNodeText","node","badgeTitle","isCircular","React","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","FOCUS_VISIBLE_STYLE","BadgeStatusIcon","cloneElement","IconSize","IconCross"],"mappings":";;;;;;;;AAWO,MAAMA,~~IAAwB~~,CAAC;AAAA,~~EAClC~~,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQC,EAAW;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,EAAc;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AACJ,~~MAAM~~;~~AACF~~,MAAI,CAACV,KAAY,CAACE,KAAQ,CAACD;AAChB,WAAA;AAGL,QAAAU,IAAYF,IAAU,WAAW,QAEjCG,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEPA,aAAgB,QACTA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYZ,CAAQ,GACjCe,IAAa,CAACf,KAAY,CAACU,KAAa,QAAQT,KAAUC,CAAI;AAGhE,SAAA,gBAAAc,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,IACM,oDACAU,EAAgBf,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MAAA,CAC5E;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAS,EAAA;AAAA,MAACL;AAAA,MAAA;AAAA,QACG,SAAS,MAAMF,KAAWA,EAAQ;AAAA,QAClC,WAAWQ,EAAM;AAAA,UACb;AAAA,UACAR,KAAW,CAACD,IAAW,4BAA4B;AAAA,UACnDO,IACMI,EAAuBd,CAAI,IAC3Be,EAAepB,GAAUC,GAAQC,GAAMG,GAAM,CAAC,CAACK,CAAS;AAAA,UAC9DW;AAAA,QAAA,CACH;AAAA,QACD,gBAAa;AAAA,QACb,OAAOP;AAAA,MAAA;AAAA,MAENb,KAAU,gBAAAe,EAAA,cAACM,GAAgB,EAAA,QAAArB,GAAgB,UAAAO,GAAoB;AAAA,MAC/DN,KACG,gBAAAc,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,WAAWC,EAAM;AAAA,YACb;AAAA,YACAT,KAAY;AAAA,YACZ,CAAC,CAACR,KAAY;AAAA,UAAA,CACjB;AAAA,QAAA;AAAA,QAEAuB,EAAarB,GAAM,EAAE,MAAMsB,EAAS,QAAQ;AAAA,MACjD;AAAA,MAEHxB,KACG,gBAAAgB,EAAA,cAAC,QAAK,EAAA,WAAU,kFACXhB,CACL;AAAA,IAER;AAAA,IACCU,KACG,gBAAAM,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACAI;AAAA,UACAhB,MAAS,WAAW,iBAAiB;AAAA,QAAA,CACxC;AAAA,QACD,SAAS,MAAMK,EAAU;AAAA,QACzB,cAAY,WAAWI;AAAA,MAAA;AAAA,MAEtB,gBAAAE,EAAA,cAAAS,GAAA,EAAU,MAAMD,EAAS,QAAQ;AAAA,IACtC;AAAA,EAAA;AAIhB;AACAzB,EAAM,cAAc;"}
1	+ {"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode, cloneElement } from 'react';\nimport { BadgeStatusIcon } from './BadgeStatusIcon';\nimport { getCircularSizeClasses, getSizeClasses, getStyleClasses } from './helpers';\nimport { BadgeEmphasis, BadgeProps, BadgeStyle } from './types';\n\nexport const Badge = ({\n children,\n status,\n icon,\n style = BadgeStyle.Primary,\n size = 'medium',\n emphasis = BadgeEmphasis.None,\n disabled = false,\n onClick,\n onDismiss,\n}: BadgeProps): Nullable<ReactElement> => {\n if (!children && !icon && !status) {\n return null;\n }\n\n const Container = onClick ? 'button' : 'span';\n\n const getNodeText = (node: ReactNode): string => {\n if (['string', 'number'].includes(typeof node)) {\n return node as string;\n }\n if (node instanceof Array) {\n return node.map(getNodeText).join('');\n }\n if (node && typeof node === 'object' && 'props' in node) {\n return getNodeText(node.props.children);\n }\n return '';\n };\n\n const badgeTitle = getNodeText(children);\n const isCircular = !children && !onDismiss && Boolean(status \|\| icon);\n\n return (\n <div\n className={merge([\n 'tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color',\n disabled\n ? 'tw-bg-box-disabled tw-text-box-disabled-inverse'\n : getStyleClasses(style, !!onClick, emphasis === BadgeEmphasis.Strong),\n ])}\n data-test-id=\"badge\"\n >\n <Container\n onClick={() => onClick && onClick()}\n className={merge([\n 'tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0',\n onClick && !disabled ? 'hover:tw-cursor-pointer' : 'tw-cursor-default',\n isCircular\n ? getCircularSizeClasses(size)\n : getSizeClasses(children, status, icon, size, !!onDismiss),\n FOCUS_VISIBLE_STYLE,\n ])}\n data-test-id=\"badge-button\"\n title={badgeTitle}\n >\n {status && <BadgeStatusIcon status={status} disabled={disabled} />}\n {icon && (\n <span\n data-test-id=\"badge-icon\"\n className={merge([\n 'tw-flex-none tw-leading-none',\n disabled && 'tw-opacity-30',\n !!children && 'tw-pr-1',\n ])}\n >\n {cloneElement(icon, { size: IconSize.Size16 })}\n </span>\n )}\n {children && (\n <span className=\"tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate tw-px-0.5\">\n {children}\n </span>\n )}\n </Container>\n {onDismiss && (\n <button\n type=\"button\"\n data-test-id=\"badge-dismiss\"\n className={merge([\n 'tw-absolute tw-rounded tw-leading-4',\n FOCUS_VISIBLE_STYLE,\n size === 'medium' ? 'tw-right-1.5' : 'tw-right-1',\n ])}\n onClick={() => onDismiss()}\n aria-label={`Dismiss ${badgeTitle}`}\n >\n <IconCross size={IconSize.Size16} />\n </button>\n )}\n </div>\n );\n};\nBadge.displayName = 'FondueBadge';\n"],"names":["Badge","children","status","icon","style","BadgeStyle","size","emphasis","BadgeEmphasis","disabled","onClick","onDismiss","Container","getNodeText","node","badgeTitle","isCircular","React","merge","getStyleClasses","getCircularSizeClasses","getSizeClasses","FOCUS_VISIBLE_STYLE","BadgeStatusIcon","cloneElement","IconSize","IconCross"],"mappings":";;;;;;;;AAWO,MAAMA,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQC,EAAW;AAAA,EACnB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAWC,EAAc;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AACJ,MAA0C;AACtC,MAAI,CAACV,KAAY,CAACE,KAAQ,CAACD;AAChB,WAAA;AAGL,QAAAU,IAAYF,IAAU,WAAW,QAEjCG,IAAc,CAACC,MACb,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAOA,CAAI,IAClCA,IAEPA,aAAgB,QACTA,EAAK,IAAID,CAAW,EAAE,KAAK,EAAE,IAEpCC,KAAQ,OAAOA,KAAS,YAAY,WAAWA,IACxCD,EAAYC,EAAK,MAAM,QAAQ,IAEnC,IAGLC,IAAaF,EAAYZ,CAAQ,GACjCe,IAAa,CAACf,KAAY,CAACU,KAAa,QAAQT,KAAUC,CAAI;AAGhE,SAAA,gBAAAc,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,IACM,oDACAU,EAAgBf,GAAO,CAAC,CAACM,GAASH,MAAaC,EAAc,MAAM;AAAA,MAAA,CAC5E;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAS,EAAA;AAAA,MAACL;AAAA,MAAA;AAAA,QACG,SAAS,MAAMF,KAAWA,EAAQ;AAAA,QAClC,WAAWQ,EAAM;AAAA,UACb;AAAA,UACAR,KAAW,CAACD,IAAW,4BAA4B;AAAA,UACnDO,IACMI,EAAuBd,CAAI,IAC3Be,EAAepB,GAAUC,GAAQC,GAAMG,GAAM,CAAC,CAACK,CAAS;AAAA,UAC9DW;AAAA,QAAA,CACH;AAAA,QACD,gBAAa;AAAA,QACb,OAAOP;AAAA,MAAA;AAAA,MAENb,KAAU,gBAAAe,EAAA,cAACM,GAAgB,EAAA,QAAArB,GAAgB,UAAAO,GAAoB;AAAA,MAC/DN,KACG,gBAAAc,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,WAAWC,EAAM;AAAA,YACb;AAAA,YACAT,KAAY;AAAA,YACZ,CAAC,CAACR,KAAY;AAAA,UAAA,CACjB;AAAA,QAAA;AAAA,QAEAuB,EAAarB,GAAM,EAAE,MAAMsB,EAAS,QAAQ;AAAA,MACjD;AAAA,MAEHxB,KACG,gBAAAgB,EAAA,cAAC,QAAK,EAAA,WAAU,kFACXhB,CACL;AAAA,IAER;AAAA,IACCU,KACG,gBAAAM,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACAI;AAAA,UACAhB,MAAS,WAAW,iBAAiB;AAAA,QAAA,CACxC;AAAA,QACD,SAAS,MAAMK,EAAU;AAAA,QACzB,cAAY,WAAWI;AAAA,MAAA;AAAA,MAEtB,gBAAAE,EAAA,cAAAS,GAAA,EAAU,MAAMD,EAAS,QAAQ;AAAA,IACtC;AAAA,EAAA;AAIhB;AACAzB,EAAM,cAAc;"}

package/dist/components/Badge/types.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { IconProps } from '../../foundation/Icon/IconProps';
-import { PropsWithChildren, ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Color } from '../../types';
 export type BadgeSize = 'small' | 'medium';
-export type BadgeProps = PropsWithChildren<{
+export type BadgeProps = {
     style?: BadgeStyle;
     icon?: ReactElement<IconProps>;
     status?: BadgeStatusIconProps['status'];
@@ -11,7 +11,8 @@ export type BadgeProps = PropsWithChildren<{
     disabled?: boolean;
     emphasis?: BadgeEmphasis;
     size?: BadgeSize;
-}>;
+    children?: ReactNode;
+};
 export type BadgeStatusIconProps = {
     status: BadgeStatus | Color | string;
     disabled: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.es.js","sources":["../../../src/components/Badge/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { ~~PropsWithChildren~~, ~~ReactElement~~ } from 'react';\nimport { Color } from '../../types';\n\nexport type BadgeSize = 'small' \| 'medium';\n\nexport type BadgeProps = ~~PropsWithChildren<~~{\n style?: BadgeStyle;\n icon?: ReactElement<IconProps>;\n status?: BadgeStatusIconProps['status'];\n onClick?: () => void;\n onDismiss?: () => void;\n disabled?: boolean;\n emphasis?: BadgeEmphasis;\n size?: BadgeSize;\n}~~>;\~~n\nexport type BadgeStatusIconProps = { status: BadgeStatus \| Color \| string; disabled: boolean };\n\nexport enum BadgeStatus {\n Positive = 'Positive',\n Progress = 'Progress',\n Warning = 'Warning',\n Danger = 'Danger',\n}\n\nexport enum BadgeStyle {\n Primary = 'Primary',\n Positive = 'Positive',\n Progress = 'Progress',\n Warning = 'Warning',\n Danger = 'Danger',\n}\n\nexport enum BadgeEmphasis {\n Strong = 'Strong',\n None = 'None',\n}\n"],"names":["BadgeStatus","BadgeStyle","BadgeEmphasis"],"mappings":"~~AAqBY~~,IAAAA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UALDA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFCA,IAAAA,KAAA,CAAA,CAAA;"}
1	+ {"version":3,"file":"types.es.js","sources":["../../../src/components/Badge/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { ReactElement, ReactNode } from 'react';\nimport { Color } from '../../types';\n\nexport type BadgeSize = 'small' \| 'medium';\n\nexport type BadgeProps = {\n style?: BadgeStyle;\n icon?: ReactElement<IconProps>;\n status?: BadgeStatusIconProps['status'];\n onClick?: () => void;\n onDismiss?: () => void;\n disabled?: boolean;\n emphasis?: BadgeEmphasis;\n size?: BadgeSize;\n children?: ReactNode;\n};\n\nexport type BadgeStatusIconProps = { status: BadgeStatus \| Color \| string; disabled: boolean };\n\nexport enum BadgeStatus {\n Positive = 'Positive',\n Progress = 'Progress',\n Warning = 'Warning',\n Danger = 'Danger',\n}\n\nexport enum BadgeStyle {\n Primary = 'Primary',\n Positive = 'Positive',\n Progress = 'Progress',\n Warning = 'Warning',\n Danger = 'Danger',\n}\n\nexport enum BadgeEmphasis {\n Strong = 'Strong',\n None = 'None',\n}\n"],"names":["BadgeStatus","BadgeStyle","BadgeEmphasis"],"mappings":"AAsBY,IAAAA,sBAAAA,OACRA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,SAAS,UALDA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFCA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { Breadcrumb } from './Breadcrumbs';
 type BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick'> & {
     showSeparator: boolean;
 };
-export declare const BreadcrumbItem: FC<BreadcrumbItemProps>;
+export declare const BreadcrumbItem: {
+    ({ label, link, onClick, showSeparator }: BreadcrumbItemProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, RefObject, useRef } from 'react';\nimport { Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n <svg\n aria-hidden=\"true\"\n width=\"13\"\n height=\"17\"\n viewBox=\"0 0 13 17\"\n fill=\"none\"\n className=\"tw-stroke-current tw-text-black-20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n </svg>\n);\n\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' \| 'link' \| 'onClick'> & {\n showSeparator: boolean;\n};\n\nexport const BreadcrumbItem: ~~FC<BreadcrumbItemProps>~~ = ({ label, link, onClick, showSeparator }) => {\n const ref = useRef<HTMLAnchorElement \| HTMLButtonElement \| HTMLSpanElement \| null>(null);\n\n const contentElementType = getItemElementType(link, onClick);\n\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: false,\n children: label,\n elementType: contentElementType,\n },\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = mergeProps(itemProps, focusProps);\n\n return (\n <li\n className=\"tw-flex tw-items-center tw-text-black-80 hover:tw-text-black-100 tw-text-xs dark:tw-text-black-10 dark:hover:tw-text-black-30 tw-transition-colors\"\n data-test-id=\"breadcrumb-item\"\n >\n {contentElementType === 'a' && (\n <a\n ref={ref as RefObject<HTMLAnchorElement>}\n {...props}\n href={link}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </a>\n )}\n {contentElementType === 'button' && (\n <button\n ref={ref as RefObject<HTMLButtonElement>}\n type=\"button\"\n {...props}\n onClick={onClick}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </button>\n )}\n {contentElementType === 'span' && (\n <span\n ref={ref as RefObject<HTMLSpanElement>}\n {...props}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </span>\n )}\n {showSeparator && <Separator />}\n </li>\n );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","React","BreadcrumbItem","label","link","onClick","showSeparator","ref","useRef","contentElementType","getItemElementType","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","props","mergeProps","merge","FOCUS_STYLE"],"mappings":";;;;;;;AAWA,MAAMA,IAAY,MACd,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,EAAA;AAAA,EAEN,gBAAAA,EAAA,cAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAW,CAAA;AAC/D,GAOSC,~~IAA0C~~,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,eAAAC,~~QAAoB~~;~~AAC1F~~,QAAAC,IAAMC,EAAuE,IAAI,GAEjFC,IAAqBC,EAAmBN,GAAMC,CAAO,GAErD,EAAE,WAAAM,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUT;AAAA,MACV,aAAaM;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAEE,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAQC,EAAWN,GAAWG,CAAU;AAG1C,SAAA,gBAAAb,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZQ,MAAuB,OACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACC,GAAGS;AAAA,QACJ,MAAMZ;AAAA,QACN,WAAWc,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHM,MAAuB,YACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACA,MAAK;AAAA,QACJ,GAAGS;AAAA,QACJ,SAAAX;AAAA,QACA,WAAWa,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHM,MAAuB,UACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACC,GAAGS;AAAA,QACJ,WAAWE,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHG,qCAAkBN,GAAU,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}
1	+ {"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, RefObject, useRef } from 'react';\nimport { Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n <svg\n aria-hidden=\"true\"\n width=\"13\"\n height=\"17\"\n viewBox=\"0 0 13 17\"\n fill=\"none\"\n className=\"tw-stroke-current tw-text-black-20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n </svg>\n);\n\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' \| 'link' \| 'onClick'> & {\n showSeparator: boolean;\n};\n\nexport const BreadcrumbItem = ({ label, link, onClick, showSeparator }: BreadcrumbItemProps): ReactElement => {\n const ref = useRef<HTMLAnchorElement \| HTMLButtonElement \| HTMLSpanElement \| null>(null);\n\n const contentElementType = getItemElementType(link, onClick);\n\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: false,\n children: label,\n elementType: contentElementType,\n },\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = mergeProps(itemProps, focusProps);\n\n return (\n <li\n className=\"tw-flex tw-items-center tw-text-black-80 hover:tw-text-black-100 tw-text-xs dark:tw-text-black-10 dark:hover:tw-text-black-30 tw-transition-colors\"\n data-test-id=\"breadcrumb-item\"\n >\n {contentElementType === 'a' && (\n <a\n ref={ref as RefObject<HTMLAnchorElement>}\n {...props}\n href={link}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </a>\n )}\n {contentElementType === 'button' && (\n <button\n ref={ref as RefObject<HTMLButtonElement>}\n type=\"button\"\n {...props}\n onClick={onClick}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </button>\n )}\n {contentElementType === 'span' && (\n <span\n ref={ref as RefObject<HTMLSpanElement>}\n {...props}\n className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}\n >\n {label}\n </span>\n )}\n {showSeparator && <Separator />}\n </li>\n );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","React","BreadcrumbItem","label","link","onClick","showSeparator","ref","useRef","contentElementType","getItemElementType","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","props","mergeProps","merge","FOCUS_STYLE"],"mappings":";;;;;;;AAWA,MAAMA,IAAY,MACd,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,EAAA;AAAA,EAEN,gBAAAA,EAAA,cAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAW,CAAA;AAC/D,GAOSC,IAAiB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,eAAAC,QAAuD;AACpG,QAAAC,IAAMC,EAAuE,IAAI,GAEjFC,IAAqBC,EAAmBN,GAAMC,CAAO,GAErD,EAAE,WAAAM,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUT;AAAA,MACV,aAAaM;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAEE,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAQC,EAAWN,GAAWG,CAAU;AAG1C,SAAA,gBAAAb,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZQ,MAAuB,OACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACC,GAAGS;AAAA,QACJ,MAAMZ;AAAA,QACN,WAAWc,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHM,MAAuB,YACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACA,MAAK;AAAA,QACJ,GAAGS;AAAA,QACJ,SAAAX;AAAA,QACA,WAAWa,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHM,MAAuB,UACpB,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAM;AAAA,QACC,GAAGS;AAAA,QACJ,WAAWE,EAAM,CAAC,mBAAmBL,KAAkBM,CAAW,CAAC;AAAA,MAAA;AAAA,MAElEhB;AAAA,IACL;AAAA,IAEHG,qCAAkBN,GAAU,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { BadgeProps } from '../Badge';
 import { IconProps } from '../../foundation/Icon/IconProps';
-import { FC, MouseEvent, ReactElement } from 'react';
+import { MouseEvent, ReactElement } from 'react';
 export type Breadcrumb = {
     label: string;
     link?: string;
@@ -12,4 +12,7 @@ export type Breadcrumb = {
 export type BreadcrumbsProps = {
     items: Breadcrumb[];
 };
-export declare const Breadcrumbs: FC<BreadcrumbsProps>;
+export declare const Breadcrumbs: {
+    ({ items }: BreadcrumbsProps): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps } from '@components/Badge';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport React, { ~~FC,~~ MouseEvent, ReactElement } from 'react';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport { CurrentBreadcrumbItem } from './CurrentBreadcrumbItem';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n children: items.map(({ label }, index) => (\n <li key={`breadcrumb-${index}`} aria-label={label}>\n {label}\n </li>\n )),\n});\n\nexport type Breadcrumb = {\n label: string;\n link?: string;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n decorator?: ReactElement<IconProps>;\n bold?: boolean;\n badges?: BadgeProps[];\n};\n\nexport type BreadcrumbsProps = {\n items: Breadcrumb[];\n};\n\nexport const Breadcrumbs: ~~FC<BreadcrumbsProps>~~ = ({ items }) => {\n const props = mapBreadcrumbsToAriaProps(items);\n const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n return (\n <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\">\n <ol className=\"tw-list-none tw-flex tw-flex-wrap tw-gap-y-1\">\n {items.map(({ label, badges, bold, decorator, link, onClick }, index) => {\n const isCurrent = index === items.length - 1;\n const key = `breadcrumb-${index}`;\n\n if (isCurrent) {\n return (\n <CurrentBreadcrumbItem\n key={key}\n label={label}\n badges={badges}\n bold={bold}\n decorator={decorator}\n link={link}\n onClick={onClick}\n />\n );\n }\n\n return (\n <BreadcrumbItem\n key={key}\n label={label}\n link={link}\n onClick={onClick}\n showSeparator={index < items.length - 2}\n />\n );\n })}\n </ol>\n </nav>\n );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","React","Breadcrumbs","props","navProps","useBreadcrumbs","badges","bold","decorator","link","onClick","isCurrent","key","CurrentBreadcrumbItem","BreadcrumbItem"],"mappings":";;;;AASA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC3B,gBAAAC,EAAA,cAAA,MAAA,EAAG,KAAK,cAAcD,KAAS,cAAYD,EAAA,GACvCA,CACL,CACH;AACL,IAeaG,~~IAAoC~~,CAAC,EAAE,OAAAJ,~~QAAY~~;~~AACtD~~,QAAAK,IAAQN,EAA0BC,CAAK,GACvC,EAAE,UAAAM,EAAA,IAAaC,EAAeF,CAA6B;AAG7D,SAAA,gBAAAF,EAAA,cAAC,SAAK,GAAGG,GAAU,WAAU,gBAAe,cAAW,aACnD,GAAA,gBAAAH,EAAA,cAAC,MAAG,EAAA,WAAU,kDACTH,EAAM,IAAI,CAAC,EAAE,OAAAC,GAAO,QAAAO,GAAQ,MAAAC,GAAM,WAAAC,GAAW,MAAAC,GAAM,SAAAC,EAAQ,GAAGV,MAAU;AAC/D,UAAAW,IAAYX,MAAUF,EAAM,SAAS,GACrCc,IAAM,cAAcZ;AAE1B,WAAIW,IAEI,gBAAAV,EAAA;AAAA,MAACY;AAAA,MAAA;AAAA,QACG,KAAAD;AAAA,QACA,OAAAb;AAAA,QACA,QAAAO;AAAA,QACA,MAAAC;AAAA,QACA,WAAAC;AAAA,QACA,MAAAC;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA,IAMR,gBAAAT,EAAA;AAAA,MAACa;AAAA,MAAA;AAAA,QACG,KAAAF;AAAA,QACA,OAAAb;AAAA,QACA,MAAAU;AAAA,QACA,SAAAC;AAAA,QACA,eAAeV,IAAQF,EAAM,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD,CAAA,CACL,CACJ;AAER;AACAI,EAAY,cAAc;"}
1	+ {"version":3,"file":"Breadcrumbs.es.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps } from '@components/Badge';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport React, { MouseEvent, ReactElement } from 'react';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport { CurrentBreadcrumbItem } from './CurrentBreadcrumbItem';\n\nconst mapBreadcrumbsToAriaProps = (items: Breadcrumb[]) => ({\n children: items.map(({ label }, index) => (\n <li key={`breadcrumb-${index}`} aria-label={label}>\n {label}\n </li>\n )),\n});\n\nexport type Breadcrumb = {\n label: string;\n link?: string;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n decorator?: ReactElement<IconProps>;\n bold?: boolean;\n badges?: BadgeProps[];\n};\n\nexport type BreadcrumbsProps = {\n items: Breadcrumb[];\n};\n\nexport const Breadcrumbs = ({ items }: BreadcrumbsProps): ReactElement => {\n const props = mapBreadcrumbsToAriaProps(items);\n const { navProps } = useBreadcrumbs(props as AriaBreadcrumbsProps);\n\n return (\n <nav {...navProps} className=\"tw-font-sans\" aria-label=\"Breadcrumb\">\n <ol className=\"tw-list-none tw-flex tw-flex-wrap tw-gap-y-1\">\n {items.map(({ label, badges, bold, decorator, link, onClick }, index) => {\n const isCurrent = index === items.length - 1;\n const key = `breadcrumb-${index}`;\n\n if (isCurrent) {\n return (\n <CurrentBreadcrumbItem\n key={key}\n label={label}\n badges={badges}\n bold={bold}\n decorator={decorator}\n link={link}\n onClick={onClick}\n />\n );\n }\n\n return (\n <BreadcrumbItem\n key={key}\n label={label}\n link={link}\n onClick={onClick}\n showSeparator={index < items.length - 2}\n />\n );\n })}\n </ol>\n </nav>\n );\n};\nBreadcrumbs.displayName = 'FondueBreadcrumbs';\n"],"names":["mapBreadcrumbsToAriaProps","items","label","index","React","Breadcrumbs","props","navProps","useBreadcrumbs","badges","bold","decorator","link","onClick","isCurrent","key","CurrentBreadcrumbItem","BreadcrumbItem"],"mappings":";;;;AASA,MAAMA,IAA4B,CAACC,OAAyB;AAAA,EACxD,UAAUA,EAAM,IAAI,CAAC,EAAE,OAAAC,KAASC,MAC3B,gBAAAC,EAAA,cAAA,MAAA,EAAG,KAAK,cAAcD,KAAS,cAAYD,EAAA,GACvCA,CACL,CACH;AACL,IAeaG,IAAc,CAAC,EAAE,OAAAJ,QAA4C;AAChE,QAAAK,IAAQN,EAA0BC,CAAK,GACvC,EAAE,UAAAM,EAAA,IAAaC,EAAeF,CAA6B;AAG7D,SAAA,gBAAAF,EAAA,cAAC,SAAK,GAAGG,GAAU,WAAU,gBAAe,cAAW,aACnD,GAAA,gBAAAH,EAAA,cAAC,MAAG,EAAA,WAAU,kDACTH,EAAM,IAAI,CAAC,EAAE,OAAAC,GAAO,QAAAO,GAAQ,MAAAC,GAAM,WAAAC,GAAW,MAAAC,GAAM,SAAAC,EAAQ,GAAGV,MAAU;AAC/D,UAAAW,IAAYX,MAAUF,EAAM,SAAS,GACrCc,IAAM,cAAcZ;AAE1B,WAAIW,IAEI,gBAAAV,EAAA;AAAA,MAACY;AAAA,MAAA;AAAA,QACG,KAAAD;AAAA,QACA,OAAAb;AAAA,QACA,QAAAO;AAAA,QACA,MAAAC;AAAA,QACA,WAAAC;AAAA,QACA,MAAAC;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA,IAMR,gBAAAT,EAAA;AAAA,MAACa;AAAA,MAAA;AAAA,QACG,KAAAF;AAAA,QACA,OAAAb;AAAA,QACA,MAAAU;AAAA,QACA,SAAAC;AAAA,QACA,eAAeV,IAAQF,EAAM,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD,CAAA,CACL,CACJ;AAER;AACAI,EAAY,cAAc;"}

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { Breadcrumb } from './Breadcrumbs';
 type CurrentBreadcrumbItemProps = Breadcrumb;
-export declare const CurrentBreadcrumbItem: FC<CurrentBreadcrumbItemProps>;
+export declare const CurrentBreadcrumbItem: {
+    ({ label, badges, bold, decorator, link, onClick, }: CurrentBreadcrumbItemProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Badge, BadgeProps } from '@components/Badge';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\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, RefObject, useRef } from 'react';\nimport { Breadcrumb } from './Breadcrumbs';\nimport { getItemElementType } from '@utilities/elements';\n\nconst ItemWithBadges: ~~FC<~~{ badges?: ~~BadgeProps[]~~ }> ~~= (~~{ badges, children }) => (\n <span className=\"tw-inline-flex tw-gap-x-2 tw-items-center\">\n {children}\n\n {badges?.map(({ children: badge, ...props }, index) => (\n <Badge {...props} key={`breadcrumb-badge-${index}`}>\n {badge}\n </Badge>\n ))}\n </span>\n);\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\nexport const CurrentBreadcrumbItem: ~~FC<CurrentBreadcrumbItemProps>~~ = ({\n label,\n badges,\n bold,\n decorator,\n link,\n onClick,\n}) => {\n const ref = useRef<HTMLAnchorElement \| HTMLButtonElement \| HTMLSpanElement \| null>(null);\n const contentElementType = getItemElementType(link, onClick);\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: true,\n children: label,\n elementType: contentElementType,\n },\n ref,\n );\n\n const classNames = merge([decorator && 'tw-flex tw-gap-x-1 tw-items-start tw-py-1', bold && 'tw-font-bold']);\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = mergeProps(itemProps, focusProps);\n\n return (\n <li\n className=\"tw-w-full tw-inline-flex tw-align-middle tw-mt-1 tw-gap-x-1 tw-text-m tw-text-black dark:tw-text-white\"\n data-test-id=\"breadcrumb-item\"\n >\n {contentElementType === 'a' && (\n <ItemWithBadges badges={badges}>\n <a\n ref={ref as RefObject<HTMLAnchorElement>}\n {...props}\n href={link}\n className={merge([classNames, isFocusVisible ? FOCUS_STYLE : ''])}\n >\n {decorator}\n <span className={merge(['tw-leading-4', bold ? 'tw-font-bold' : ''])}>{label}</span>\n </a>\n </ItemWithBadges>\n )}\n {contentElementType === 'button' && (\n <ItemWithBadges badges={badges}>\n <button\n ref={ref as RefObject<HTMLButtonElement>}\n {...props}\n type=\"button\"\n onClick={onClick}\n className={merge(['tw-leading-4', classNames, isFocusVisible ? FOCUS_STYLE : ''])}\n >\n {decorator}\n {label}\n </button>\n </ItemWithBadges>\n )}\n {contentElementType === 'span' && (\n <>\n {decorator}\n <ItemWithBadges badges={badges}>\n <span\n ref={ref as RefObject<HTMLSpanElement>}\n {...props}\n className={merge([\n 'tw-leading-4 tw-py-1 ',\n bold && 'tw-font-bold',\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n {label}\n </span>\n </ItemWithBadges>\n </>\n )}\n </li>\n );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["ItemWithBadges","badges","children","React","badge","props","index","Badge","CurrentBreadcrumbItem","label","bold","decorator","link","onClick","ref","useRef","contentElementType","getItemElementType","itemProps","useBreadcrumbItem","classNames","merge","isFocusVisible","focusProps","useFocusRing","mergeProps","FOCUS_STYLE"],"mappings":";;;;;;;;AAYA,MAAMA,~~IAAgD~~,CAAC,EAAE,QAAAC,GAAQ,UAAAC,EAAS,~~MACrE~~,gBAAAC,EAAA,cAAA,QAAA,EAAK,WAAU,4CAAA,GACXD,GAEAD,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUG,GAAO,GAAGC,EAAS,GAAAC,MACxC,gBAAAH,EAAA,cAAAI,GAAA,EAAO,GAAGF,GAAO,KAAK,oBAAoBC,IACtC,GAAAF,CACL,EAER,GAKSI,~~IAAwD~~,CAAC;AAAA,~~EAClE~~,OAAAC;AAAA,EACA,QAAAR;AAAA,EACA,MAAAS;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AACJ,~~MAAM~~;~~AACI~~,QAAAC,IAAMC,EAAuE,IAAI,GACjFC,IAAqBC,EAAmBL,GAAMC,CAAO,GACrD,EAAE,WAAAK,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUV;AAAA,MACV,aAAaO;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGEM,IAAaC,EAAM,CAACV,KAAa,6CAA6CD,KAAQ,cAAc,CAAC,GACrG,EAAE,gBAAAY,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CnB,IAAQoB,EAAWP,GAAWK,CAAU;AAG1C,SAAA,gBAAApB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZa,MAAuB,OACnB,gBAAAb,EAAA,cAAAH,GAAA,EAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,MAAMO;AAAA,QACN,WAAWS,EAAM,CAACD,GAAYE,IAAiBI,IAAc,EAAE,CAAC;AAAA,MAAA;AAAA,MAE/Df;AAAA,MACD,gBAAAR,EAAA,cAAC,QAAK,EAAA,WAAWkB,EAAM,CAAC,gBAAgBX,IAAO,iBAAiB,EAAE,CAAC,EAAA,GAAID,CAAM;AAAA,IAAA,CAErF;AAAA,IAEHO,MAAuB,YACnB,gBAAAb,EAAA,cAAAH,GAAA,EAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,MAAK;AAAA,QACL,SAAAQ;AAAA,QACA,WAAWQ,EAAM,CAAC,gBAAgBD,GAAYE,IAAiBI,IAAc,EAAE,CAAC;AAAA,MAAA;AAAA,MAE/Ef;AAAA,MACAF;AAAA,IAAA,CAET;AAAA,IAEHO,MAAuB,UACpB,gBAAAb,EAAA,cAAAA,EAAA,UAAA,MACKQ,GACD,gBAAAR,EAAA,cAACH,KAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,WAAWgB,EAAM;AAAA,UACb;AAAA,UACAX,KAAQ;AAAA,UACRY,KAAkBI;AAAA,QAAA,CACrB;AAAA,MAAA;AAAA,MAEAjB;AAAA,IAAA,CAET,CACJ;AAAA,EAAA;AAIhB;AACAD,EAAsB,cAAc;"}
1	+ {"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Badge, BadgeProps } from '@components/Badge';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\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, { ReactElement, ReactNode, RefObject, useRef } from 'react';\nimport { Breadcrumb } from './Breadcrumbs';\nimport { getItemElementType } from '@utilities/elements';\n\nconst ItemWithBadges = ({ badges, children }: { badges?: BadgeProps[]; children: ReactNode }): ReactElement => (\n <span className=\"tw-inline-flex tw-gap-x-2 tw-items-center\">\n {children}\n\n {badges?.map(({ children: badge, ...props }, index) => (\n <Badge {...props} key={`breadcrumb-badge-${index}`}>\n {badge}\n </Badge>\n ))}\n </span>\n);\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\nexport const CurrentBreadcrumbItem = ({\n label,\n badges,\n bold,\n decorator,\n link,\n onClick,\n}: CurrentBreadcrumbItemProps): ReactElement => {\n const ref = useRef<HTMLAnchorElement \| HTMLButtonElement \| HTMLSpanElement \| null>(null);\n const contentElementType = getItemElementType(link, onClick);\n const { itemProps } = useBreadcrumbItem(\n {\n isCurrent: true,\n children: label,\n elementType: contentElementType,\n },\n ref,\n );\n\n const classNames = merge([decorator && 'tw-flex tw-gap-x-1 tw-items-start tw-py-1', bold && 'tw-font-bold']);\n const { isFocusVisible, focusProps } = useFocusRing();\n const props = mergeProps(itemProps, focusProps);\n\n return (\n <li\n className=\"tw-w-full tw-inline-flex tw-align-middle tw-mt-1 tw-gap-x-1 tw-text-m tw-text-black dark:tw-text-white\"\n data-test-id=\"breadcrumb-item\"\n >\n {contentElementType === 'a' && (\n <ItemWithBadges badges={badges}>\n <a\n ref={ref as RefObject<HTMLAnchorElement>}\n {...props}\n href={link}\n className={merge([classNames, isFocusVisible ? FOCUS_STYLE : ''])}\n >\n {decorator}\n <span className={merge(['tw-leading-4', bold ? 'tw-font-bold' : ''])}>{label}</span>\n </a>\n </ItemWithBadges>\n )}\n {contentElementType === 'button' && (\n <ItemWithBadges badges={badges}>\n <button\n ref={ref as RefObject<HTMLButtonElement>}\n {...props}\n type=\"button\"\n onClick={onClick}\n className={merge(['tw-leading-4', classNames, isFocusVisible ? FOCUS_STYLE : ''])}\n >\n {decorator}\n {label}\n </button>\n </ItemWithBadges>\n )}\n {contentElementType === 'span' && (\n <>\n {decorator}\n <ItemWithBadges badges={badges}>\n <span\n ref={ref as RefObject<HTMLSpanElement>}\n {...props}\n className={merge([\n 'tw-leading-4 tw-py-1 ',\n bold && 'tw-font-bold',\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n {label}\n </span>\n </ItemWithBadges>\n </>\n )}\n </li>\n );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["ItemWithBadges","badges","children","React","badge","props","index","Badge","CurrentBreadcrumbItem","label","bold","decorator","link","onClick","ref","useRef","contentElementType","getItemElementType","itemProps","useBreadcrumbItem","classNames","merge","isFocusVisible","focusProps","useFocusRing","mergeProps","FOCUS_STYLE"],"mappings":";;;;;;;;AAYA,MAAMA,IAAiB,CAAC,EAAE,QAAAC,GAAQ,UAAAC,EAAS,MACtC,gBAAAC,EAAA,cAAA,QAAA,EAAK,WAAU,4CAAA,GACXD,GAEAD,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUG,GAAO,GAAGC,EAAS,GAAAC,MACxC,gBAAAH,EAAA,cAAAI,GAAA,EAAO,GAAGF,GAAO,KAAK,oBAAoBC,IACtC,GAAAF,CACL,EAER,GAKSI,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAR;AAAA,EACA,MAAAS;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AACJ,MAAgD;AACtC,QAAAC,IAAMC,EAAuE,IAAI,GACjFC,IAAqBC,EAAmBL,GAAMC,CAAO,GACrD,EAAE,WAAAK,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUV;AAAA,MACV,aAAaO;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGEM,IAAaC,EAAM,CAACV,KAAa,6CAA6CD,KAAQ,cAAc,CAAC,GACrG,EAAE,gBAAAY,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CnB,IAAQoB,EAAWP,GAAWK,CAAU;AAG1C,SAAA,gBAAApB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZa,MAAuB,OACnB,gBAAAb,EAAA,cAAAH,GAAA,EAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,MAAMO;AAAA,QACN,WAAWS,EAAM,CAACD,GAAYE,IAAiBI,IAAc,EAAE,CAAC;AAAA,MAAA;AAAA,MAE/Df;AAAA,MACD,gBAAAR,EAAA,cAAC,QAAK,EAAA,WAAWkB,EAAM,CAAC,gBAAgBX,IAAO,iBAAiB,EAAE,CAAC,EAAA,GAAID,CAAM;AAAA,IAAA,CAErF;AAAA,IAEHO,MAAuB,YACnB,gBAAAb,EAAA,cAAAH,GAAA,EAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,MAAK;AAAA,QACL,SAAAQ;AAAA,QACA,WAAWQ,EAAM,CAAC,gBAAgBD,GAAYE,IAAiBI,IAAc,EAAE,CAAC;AAAA,MAAA;AAAA,MAE/Ef;AAAA,MACAF;AAAA,IAAA,CAET;AAAA,IAEHO,MAAuB,UACpB,gBAAAb,EAAA,cAAAA,EAAA,UAAA,MACKQ,GACD,gBAAAR,EAAA,cAACH,KAAe,QAAAC,EACZ,GAAA,gBAAAE,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAW;AAAA,QACC,GAAGT;AAAA,QACJ,WAAWgB,EAAM;AAAA,UACb;AAAA,UACAX,KAAQ;AAAA,UACRY,KAAkBI;AAAA,QAAA,CACrB;AAAA,MAAA;AAAA,MAEAjB;AAAA,IAAA,CAET,CACJ;AAAA,EAAA;AAIhB;AACAD,EAAsB,cAAc;"}

package/dist/components/ButtonGroup/ButtonGroup.d.ts CHANGED Viewed

@@ -1,6 +1,10 @@
-import { FC, PropsWithChildren } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { ButtonSize } from '../Button';
-export type ButtonGroupProps = PropsWithChildren<{
+export type ButtonGroupProps = {
     size: ButtonSize;
-}>;
-export declare const ButtonGroup: FC<ButtonGroupProps>;
+    children?: ReactNode;
+};
+export declare const ButtonGroup: {
+    ({ children, size }: ButtonGroupProps): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, FC, ~~PropsWithChildren~~, ~~ReactElement,~~ cloneElement, isValidElement } from 'react';\nimport { ButtonProps, ButtonSize } from '@components/Button';\nimport { merge } from '@utilities/merge';\n\nexport type ButtonGroupProps = ~~PropsWithChildren<~~{ size: ButtonSize }~~>;\~~n\nconst spacing: Record<ButtonSize, string> = {\n [ButtonSize.Small]: 'tw-gap-x-1',\n [ButtonSize.Medium]: 'tw-gap-x-2',\n [ButtonSize.Large]: 'tw-gap-x-3',\n};\n\nexport const ButtonGroup: ~~FC<ButtonGroupProps>~~ = ({ children, size }) => {\n return (\n <div data-test-id=\"button-group\" className={merge(['tw-display tw-inline-flex tw-flex-row', spacing[size]])}>\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child as ReactElement<ButtonProps>, { size });\n })}\n </div>\n );\n};\nButtonGroup.displayName = 'FondueButtonGroup';\n"],"names":["spacing","ButtonSize","ButtonGroup","children","size","merge","Children","child","isValidElement","cloneElement"],"mappings":";;;AAQA,MAAMA,IAAsC;AAAA,EACxC,CAACC,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,KAAK,GAAG;AACxB,GAEaC,~~IAAoC~~,CAAC,EAAE,UAAAC,GAAU,MAAAC,~~wCAErD~~,OAAI,EAAA,gBAAa,gBAAe,WAAWC,EAAM,CAAC,yCAAyCL,EAAQI,CAAI,CAAC,CAAC,EAAA,GACrGE,EAAS,IAAIH,GAAU,CAACI,MAChBC,EAAeD,CAAK,IAIlBE,EAAaF,GAAoC,EAAE,MAAAH,EAAM,CAAA,IAHrD,IAId,CACL;AAGRF,EAAY,cAAc;"}
1	+ {"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { ButtonProps, ButtonSize } from '@components/Button';\nimport { merge } from '@utilities/merge';\n\nexport type ButtonGroupProps = { size: ButtonSize; children?: ReactNode };\n\nconst spacing: Record<ButtonSize, string> = {\n [ButtonSize.Small]: 'tw-gap-x-1',\n [ButtonSize.Medium]: 'tw-gap-x-2',\n [ButtonSize.Large]: 'tw-gap-x-3',\n};\n\nexport const ButtonGroup = ({ children, size }: ButtonGroupProps): ReactElement => {\n return (\n <div data-test-id=\"button-group\" className={merge(['tw-display tw-inline-flex tw-flex-row', spacing[size]])}>\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child as ReactElement<ButtonProps>, { size });\n })}\n </div>\n );\n};\nButtonGroup.displayName = 'FondueButtonGroup';\n"],"names":["spacing","ButtonSize","ButtonGroup","children","size","merge","Children","child","isValidElement","cloneElement"],"mappings":";;;AAQA,MAAMA,IAAsC;AAAA,EACxC,CAACC,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,MAAM,GAAG;AAAA,EACrB,CAACA,EAAW,KAAK,GAAG;AACxB,GAEaC,IAAc,CAAC,EAAE,UAAAC,GAAU,MAAAC,wCAE/B,OAAI,EAAA,gBAAa,gBAAe,WAAWC,EAAM,CAAC,yCAAyCL,EAAQI,CAAI,CAAC,CAAC,EAAA,GACrGE,EAAS,IAAIH,GAAU,CAACI,MAChBC,EAAeD,CAAK,IAIlBE,EAAaF,GAAoC,EAAE,MAAAH,EAAM,CAAA,IAHrD,IAId,CACL;AAGRF,EAAY,cAAc;"}

package/dist/components/Card/Card.d.ts CHANGED Viewed

@@ -1,8 +1,11 @@
-import { FC, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { PressEvent } from '@react-types/shared';
 export type CardProps = {
     children: ReactNode | ReactNode[];
     hoverable?: boolean;
     onClick?: (event: PressEvent) => void;
 };
-export declare const Card: FC<CardProps>;
+export declare const Card: {
+    ({ hoverable, children, onClick }: CardProps): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.es.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport { mergeProps } from '@react-aria/utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\n\nexport type CardProps = {\n children: ReactNode \| ReactNode[];\n hoverable?: boolean;\n onClick?: (event: PressEvent) => void;\n};\n\nexport const Card: ~~FC<CardProps>~~ = ({ hoverable = false, children, onClick }) => {\n const ref = useRef<HTMLDivElement \| null>(null);\n const { buttonProps } = useButton(\n { elementType: 'div', onPress: (event: PressEvent) => onClick && onClick(event) },\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const clickableProps = !!onClick ? mergeProps(buttonProps, focusProps) : {};\n\n return (\n <div\n {...clickableProps}\n data-test-id=\"card\"\n ref={ref}\n className={merge([\n 'tw-w-full tw-outline-none tw-bg-white tw-border tw-border-black-10 tw-rounded tw-overflow-hidden',\n hoverable ? 'hover:tw-border-black' : '',\n onClick ? 'tw-cursor-pointer' : 'tw-cursor-default',\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n {children}\n </div>\n );\n};\nCard.displayName = 'FondueCard';\n"],"names":["Card","hoverable","children","onClick","ref","useRef","buttonProps","useButton","event","isFocusVisible","focusProps","useFocusRing","clickableProps","mergeProps","React","merge","FOCUS_STYLE"],"mappings":";;;;;;AAgBO,MAAMA,~~IAAsB~~,CAAC,EAAE,WAAAC,IAAY,IAAO,UAAAC,GAAU,SAAAC,~~QAAc~~;~~AACvE~~,QAAAC,IAAMC,EAA8B,IAAI,GACxC,EAAE,aAAAC,MAAgBC;AAAA,IACpB,EAAE,aAAa,OAAO,SAAS,CAACC,MAAsBL,KAAWA,EAAQK,CAAK,EAAE;AAAA,IAChFJ;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAmBT,IAAUU,EAAWP,GAAaI,CAAU,IAAI;AAGrE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,gBAAa;AAAA,MACb,KAAAR;AAAA,MACA,WAAWW,EAAM;AAAA,QACb;AAAA,QACAd,IAAY,0BAA0B;AAAA,QACtCE,IAAU,sBAAsB;AAAA,QAChCM,KAAkBO;AAAA,MAAA,CACrB;AAAA,IAAA;AAAA,IAEAd;AAAA,EAAA;AAGb;AACAF,EAAK,cAAc;"}
1	+ {"version":3,"file":"Card.es.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode, useRef } from 'react';\nimport { PressEvent } from '@react-types/shared';\nimport { mergeProps } from '@react-aria/utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\n\nexport type CardProps = {\n children: ReactNode \| ReactNode[];\n hoverable?: boolean;\n onClick?: (event: PressEvent) => void;\n};\n\nexport const Card = ({ hoverable = false, children, onClick }: CardProps): ReactElement => {\n const ref = useRef<HTMLDivElement \| null>(null);\n const { buttonProps } = useButton(\n { elementType: 'div', onPress: (event: PressEvent) => onClick && onClick(event) },\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const clickableProps = !!onClick ? mergeProps(buttonProps, focusProps) : {};\n\n return (\n <div\n {...clickableProps}\n data-test-id=\"card\"\n ref={ref}\n className={merge([\n 'tw-w-full tw-outline-none tw-bg-white tw-border tw-border-black-10 tw-rounded tw-overflow-hidden',\n hoverable ? 'hover:tw-border-black' : '',\n onClick ? 'tw-cursor-pointer' : 'tw-cursor-default',\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n {children}\n </div>\n );\n};\nCard.displayName = 'FondueCard';\n"],"names":["Card","hoverable","children","onClick","ref","useRef","buttonProps","useButton","event","isFocusVisible","focusProps","useFocusRing","clickableProps","mergeProps","React","merge","FOCUS_STYLE"],"mappings":";;;;;;AAgBO,MAAMA,IAAO,CAAC,EAAE,WAAAC,IAAY,IAAO,UAAAC,GAAU,SAAAC,QAAuC;AACjF,QAAAC,IAAMC,EAA8B,IAAI,GACxC,EAAE,aAAAC,MAAgBC;AAAA,IACpB,EAAE,aAAa,OAAO,SAAS,CAACC,MAAsBL,KAAWA,EAAQK,CAAK,EAAE;AAAA,IAChFJ;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAmBT,IAAUU,EAAWP,GAAaI,CAAU,IAAI;AAGrE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,gBAAa;AAAA,MACb,KAAAR;AAAA,MACA,WAAWW,EAAM;AAAA,QACb;AAAA,QACAd,IAAY,0BAA0B;AAAA,QACtCE,IAAU,sBAAsB;AAAA,QAChCM,KAAkBO;AAAA,MAAA,CACrB;AAAA,IAAA;AAAA,IAEAd;AAAA,EAAA;AAGb;AACAF,EAAK,cAAc;"}

package/dist/components/CollapsibleWrap/CollapsibleWrap.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { CollapsibleWrapProps } from './types';
-export declare const CollapsibleWrap: FC<CollapsibleWrapProps>;
+export declare const CollapsibleWrap: {
+    ({ children, isOpen, preventInitialAnimation, animateOpacity, }: CollapsibleWrapProps): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollapsibleWrap.es.js","sources":["../../../src/components/CollapsibleWrap/CollapsibleWrap.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC } from 'react';\nimport { CollapsibleWrapProps } from './types';\n\nexport const CollapsibleWrap: ~~FC<CollapsibleWrapProps>~~ = ({\n children,\n isOpen = false,\n preventInitialAnimation = false,\n animateOpacity = true,\n}) => (\n <AnimatePresence initial={preventInitialAnimation ? false : undefined}>\n {isOpen && children && (\n <motion.div\n initial={'collapsed'}\n animate={'open'}\n exit={'collapsed'}\n variants={{\n open: { height: 'auto', overflow: 'hidden', opacity: 1 },\n collapsed: { height: 0, overflow: 'hidden', opacity: animateOpacity ? 0 : 1 },\n }}\n transition={{ type: 'tween' }}\n data-test-id=\"collapsible-wrap\"\n >\n {children}\n </motion.div>\n )}\n </AnimatePresence>\n);\nCollapsibleWrap.displayName = 'FondueCollapsibleWrap';\n"],"names":["CollapsibleWrap","children","isOpen","preventInitialAnimation","animateOpacity","AnimatePresence","React","motion"],"mappings":";;AAMO,MAAMA,~~IAA4C~~,CAAC;AAAA,~~EACtD~~,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AACrB,sCACKC,GAAgB,EAAA,SAASF,IAA0B,KAAQ,OAAA,GACvDD,KAAUD,KACP,gBAAAK,EAAA;AAAA,EAACC,EAAO;AAAA,EAAP;AAAA,IACG,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,MACN,MAAM,EAAE,QAAQ,QAAQ,UAAU,UAAU,SAAS,EAAE;AAAA,MACvD,WAAW,EAAE,QAAQ,GAAG,UAAU,UAAU,SAASH,IAAiB,IAAI,EAAE;AAAA,IAChF;AAAA,IACA,YAAY,EAAE,MAAM,QAAQ;AAAA,IAC5B,gBAAa;AAAA,EAAA;AAAA,EAEZH;AACL,CAER;AAEJD,EAAgB,cAAc;"}
1	+ {"version":3,"file":"CollapsibleWrap.es.js","sources":["../../../src/components/CollapsibleWrap/CollapsibleWrap.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ReactElement } from 'react';\nimport { CollapsibleWrapProps } from './types';\n\nexport const CollapsibleWrap = ({\n children,\n isOpen = false,\n preventInitialAnimation = false,\n animateOpacity = true,\n}: CollapsibleWrapProps): ReactElement => (\n <AnimatePresence initial={preventInitialAnimation ? false : undefined}>\n {isOpen && children && (\n <motion.div\n initial={'collapsed'}\n animate={'open'}\n exit={'collapsed'}\n variants={{\n open: { height: 'auto', overflow: 'hidden', opacity: 1 },\n collapsed: { height: 0, overflow: 'hidden', opacity: animateOpacity ? 0 : 1 },\n }}\n transition={{ type: 'tween' }}\n data-test-id=\"collapsible-wrap\"\n >\n {children}\n </motion.div>\n )}\n </AnimatePresence>\n);\nCollapsibleWrap.displayName = 'FondueCollapsibleWrap';\n"],"names":["CollapsibleWrap","children","isOpen","preventInitialAnimation","animateOpacity","AnimatePresence","React","motion"],"mappings":";;AAMO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AACrB,sCACKC,GAAgB,EAAA,SAASF,IAA0B,KAAQ,OAAA,GACvDD,KAAUD,KACP,gBAAAK,EAAA;AAAA,EAACC,EAAO;AAAA,EAAP;AAAA,IACG,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,MACN,MAAM,EAAE,QAAQ,QAAQ,UAAU,UAAU,SAAS,EAAE;AAAA,MACvD,WAAW,EAAE,QAAQ,GAAG,UAAU,UAAU,SAASH,IAAiB,IAAI,EAAE;AAAA,IAChF;AAAA,IACA,YAAY,EAAE,MAAM,QAAQ;AAAA,IAC5B,gBAAa;AAAA,EAAA;AAAA,EAEZH;AACL,CAER;AAEJD,EAAgB,cAAc;"}

package/dist/components/CollapsibleWrap/types.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react';
 export type CollapsibleWrapProps = {
     isOpen: boolean;
     preventInitialAnimation?: boolean;
     animateOpacity?: boolean;
+    children?: ReactNode;
 };

package/dist/components/ColorInputFlyout/ColorInputTitle.d.ts CHANGED Viewed

@@ -1,8 +1,11 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { Color, ColorFormat } from '../../types/colors';
 type Props = {
     currentColor: Color;
     format: ColorFormat;
 };
-export declare const ColorInputTitle: FC<Props>;
+export declare const ColorInputTitle: {
+    ({ currentColor, format }: Props): ReactElement;
+    displayName: string;
+};
 export {};

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, 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};\nColorInputTitle.displayName = 'FondueColorInputTitle';\n"],"names":["ColorInputTitle","currentColor","format","name","alpha","parsedColor","tinycolor","toShortRgb","colorValue","getColorDisplayValue","React","ColorFormat"],"mappings":";;;;AAYO,MAAMA,~~IAA6B~~,CAAC,EAAE,cAAAC,GAAc,QAAAC,~~QAAa~~;~~AAC9D~~,QAAA,EAAE,MAAAC,GAAM,OAAAC,EAAU,IAAAH,GAClBI,IAAcC,EAAUC,EAAWN,CAAY,CAAC,GAChDO,IAAaC,EAAqBR,GAAcC,GAAQ,EAAK;AAG/D,SAAA,gBAAAQ,EAAA,cAAC,OAAI,EAAA,WAAU,oBACV,GAAAP,KAAQK,GACRN,MAAWS,EAAY,OAAOP,KAASA,IAAQ,qCAC3C,QAAK,EAAA,WAAU,mBAAoB,GAAA,IAAI,KAAK,MAAMC,EAAY,SAAS,IAAI,GAAG,KAAM,CAE7F;AAER;AACAL,EAAgB,cAAc;"}
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, { ReactElement } 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 = ({ currentColor, format }: Props): ReactElement => {\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};\nColorInputTitle.displayName = 'FondueColorInputTitle';\n"],"names":["ColorInputTitle","currentColor","format","name","alpha","parsedColor","tinycolor","toShortRgb","colorValue","getColorDisplayValue","React","ColorFormat"],"mappings":";;;;AAYO,MAAMA,IAAkB,CAAC,EAAE,cAAAC,GAAc,QAAAC,QAAkC;AACxE,QAAA,EAAE,MAAAC,GAAM,OAAAC,EAAU,IAAAH,GAClBI,IAAcC,EAAUC,EAAWN,CAAY,CAAC,GAChDO,IAAaC,EAAqBR,GAAcC,GAAQ,EAAK;AAG/D,SAAA,gBAAAQ,EAAA,cAAC,OAAI,EAAA,WAAU,oBACV,GAAAP,KAAQK,GACRN,MAAWS,EAAY,OAAOP,KAASA,IAAQ,qCAC3C,QAAK,EAAA,WAAU,mBAAoB,GAAA,IAAI,KAAK,MAAMC,EAAY,SAAS,IAAI,GAAG,KAAM,CAE7F;AAER;AACAL,EAAgB,cAAc;"}

package/dist/components/ColorInputFlyout/ColorPickerFlyout.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ColorPickerProps } from '../ColorPicker/ColorPicker';
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { Color } from '../../types/colors';
 export type ColorPickerFlyoutProps = Pick<ColorPickerProps, 'palettes' | 'onSelect'> & {
     id?: string;
@@ -11,4 +11,7 @@ export type ColorPickerFlyoutProps = Pick<ColorPickerProps, 'palettes' | 'onSele
     onClear?: () => void;
     onDelete?: () => void;
 };
-export declare const ColorPickerFlyout: FC<ColorPickerFlyoutProps>;
+export declare const ColorPickerFlyout: {
+    ({ id, onClick, onClose, onSelect, currentColor, palettes, disabled, clearable, onClear, onDelete, }: ColorPickerFlyoutProps): ReactElement;
+    displayName: string;
+};

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 contentMinHeight={150}\n fixedHeader={<ColorPreview color={currentColor \|\| { red: 255, green: 255, blue: 255 }} />}\n onOpenChange={handleOpenChange}\n isTriggerDisabled={disabled}\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};\nColorPickerFlyout.displayName = 'FondueColorPickerFlyout';\n"],"names":["ColorPickerFlyout","id","onClick","onClose","onSelect","currentColor","palettes","disabled","clearable","onClear","onDelete","open","setOpen","useState","currentFormat","setCurrentFormat","ColorFormat","handleOpenChange","isOpen","handleClick","React","Flyout","ColorPreview","ColorInputTrigger","ColorPicker"],"mappings":";;;;;;AAoBO,MAAMA,~~IAAgD~~,CAAC;AAAA,~~EAC1D~~,IAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AACJ,~~MAAM~~;~~AACF~~,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAeC,CAAgB,IAAIF,EAASG,EAAY,GAAG,GAE5DC,IAAmB,CAACC,MAAoB;AAC1C,IAAKA,KACSf,KAAA,QAAAA,KAEdS,EAAQM,CAAM;AAAA,EAAA,GAGZC,IAAc,MAAM;AACtB,IAAAP,EAAQ,EAAK,GACHV,KAAA,QAAAA;AAAA,EAAA;AAIV,SAAA,gBAAAkB,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAWF;AAAA,MACX,QAAQR;AAAA,MACR,UAAU,MAAMM,EAAiB,EAAK;AAAA,MACtC,kBAAkB;AAAA,MAClB,aAAa,gBAAAG,EAAA,cAACE,GAAa,EAAA,OAAOjB,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAO,EAAA,CAAA;AAAA,MACvF,cAAcY;AAAA,MACd,mBAAmBV;AAAA,MACnB,SACI,gBAAAa,EAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,QAAQZ;AAAA,UACR,cAAAN;AAAA,UACA,QAAQS;AAAA,UACR,UAAAP;AAAA,UACA,IAAAN;AAAA,UACA,WAAAO;AAAA,UACA,SAAS,MAAM;AACX,YAAAI,EAAQ,EAAK,GACbH,KAAWA,EAAQ;AAAA,UACvB;AAAA,UACA,UACIC,IACM,MAAM;AACF,YAAAE,EAAQ,EAAK,GACbF,KAAYA,EAAS;AAAA,UAEzB,IAAA;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,IAGJ,gBAAAU,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,eAAAV;AAAA,QACA,WAAWC;AAAA,QACX,UAAAT;AAAA,QACA,aAAa;AAAA,QACb,cAAcD,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,QAChE,UAAAD;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAJ,EAAkB,cAAc;"}
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, { ReactElement, 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 = ({\n id,\n onClick,\n onClose,\n onSelect,\n currentColor,\n palettes,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}: ColorPickerFlyoutProps): ReactElement => {\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 contentMinHeight={150}\n fixedHeader={<ColorPreview color={currentColor \|\| { red: 255, green: 255, blue: 255 }} />}\n onOpenChange={handleOpenChange}\n isTriggerDisabled={disabled}\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};\nColorPickerFlyout.displayName = 'FondueColorPickerFlyout';\n"],"names":["ColorPickerFlyout","id","onClick","onClose","onSelect","currentColor","palettes","disabled","clearable","onClear","onDelete","open","setOpen","useState","currentFormat","setCurrentFormat","ColorFormat","handleOpenChange","isOpen","handleClick","React","Flyout","ColorPreview","ColorInputTrigger","ColorPicker"],"mappings":";;;;;;AAoBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,IAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AACJ,MAA4C;AACxC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAeC,CAAgB,IAAIF,EAASG,EAAY,GAAG,GAE5DC,IAAmB,CAACC,MAAoB;AAC1C,IAAKA,KACSf,KAAA,QAAAA,KAEdS,EAAQM,CAAM;AAAA,EAAA,GAGZC,IAAc,MAAM;AACtB,IAAAP,EAAQ,EAAK,GACHV,KAAA,QAAAA;AAAA,EAAA;AAIV,SAAA,gBAAAkB,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAWF;AAAA,MACX,QAAQR;AAAA,MACR,UAAU,MAAMM,EAAiB,EAAK;AAAA,MACtC,kBAAkB;AAAA,MAClB,aAAa,gBAAAG,EAAA,cAACE,GAAa,EAAA,OAAOjB,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAO,EAAA,CAAA;AAAA,MACvF,cAAcY;AAAA,MACd,mBAAmBV;AAAA,MACnB,SACI,gBAAAa,EAAA;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,QAAQZ;AAAA,UACR,cAAAN;AAAA,UACA,QAAQS;AAAA,UACR,UAAAP;AAAA,UACA,IAAAN;AAAA,UACA,WAAAO;AAAA,UACA,SAAS,MAAM;AACX,YAAAI,EAAQ,EAAK,GACbH,KAAWA,EAAQ;AAAA,UACvB;AAAA,UACA,UACIC,IACM,MAAM;AACF,YAAAE,EAAQ,EAAK,GACbF,KAAYA,EAAS;AAAA,UAEzB,IAAA;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,IAGJ,gBAAAU,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,eAAAV;AAAA,QACA,WAAWC;AAAA,QACX,UAAAT;AAAA,QACA,aAAa;AAAA,QACb,cAAcD,KAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,IAAI;AAAA,QAChE,UAAAD;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAJ,EAAkB,cAAc;"}

package/dist/components/ColorInputFlyout/ColorPickerTrigger.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ColorFormat } from '../../types/colors';
 import { ColorPickerFlyoutProps } from './ColorPickerFlyout';
 type ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' | 'currentColor' | 'disabled'> & {
@@ -8,5 +8,8 @@ type ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' | 'currentColor'
     onClear?: () => void;
     onDelete?: () => void;
 };
-export declare const ColorInputTrigger: FC<ColorInputTriggerProps>;
+export declare const ColorInputTrigger: {
+    ({ id, currentColor, format, isOpen, disabled, clearable, onClear, onDelete, }: ColorInputTriggerProps): ReactElement;
+    displayName: string;
+};
 export {};

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';\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 disabled={disabled}\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};\nColorInputTrigger.displayName = 'FondueColorInputTrigger';\n"],"names":["ColorInputTrigger","id","currentColor","format","isOpen","disabled","clearable","onClear","onDelete","isFocusVisible","focusProps","useFocusRing","backgroundColor","tinycolor","toShortRgb","React","Trigger","useMemoizedId","merge","MenuItemContent","ColorInputTitle","IconDroplet","IconSize"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,~~IAAgD~~,CAAC;AAAA,~~EAC1D~~,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AACJ,~~MAAM~~;~~AACF~~,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAkBV,IAAeW,EAAUC,EAAWZ,CAAY,CAAC,EAAE,YAAgB,IAAA;AAGvF,SAAA,gBAAAa,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAI;AAAA,MACA,WAAW,CAAC,CAACP,KAAgBI;AAAA,MAC7B,SAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IAEA,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGL;AAAA,QACJ,MAAK;AAAA,QACL,IAAIO,EAAchB,CAAE;AAAA,QACpB,UAAAI;AAAA,QACA,WAAWa,EAAM;AAAA,UACb;AAAA,UACA,CAAChB,KAAgB;AAAA,UACjBG,KAAY;AAAA,QAAA,CACf;AAAA,MAAA;AAAA,MAED,gBAAAU,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OACIjB,IAAe,gBAAAa,EAAA,cAACK,GAAgB,EAAA,QAAAjB,GAAgB,cAAAD,EAA4B,CAAA,IAAK;AAAA,UAErF,WACIA,IACI,gBAAAa,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWG,EAAM;AAAA,gBACb;AAAA,gBACAb,KAAY;AAAA,cAAA,CACf;AAAA,cACD,OAAO,EAAE,iBAAAO,EAAgB;AAAA,YAAA;AAAA,UAC7B,IAEC,gBAAAG,EAAA,cAAA,QAAA,EAAK,WAAU,mBAAA,mCACXM,GAAY,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACxC;AAAA,QAAA;AAAA,MAGZ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAtB,EAAkB,cAAc;"}
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';\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, { ReactElement } 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 = ({\n id,\n currentColor,\n format,\n isOpen = false,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}: ColorInputTriggerProps): ReactElement => {\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 disabled={disabled}\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};\nColorInputTrigger.displayName = 'FondueColorInputTrigger';\n"],"names":["ColorInputTrigger","id","currentColor","format","isOpen","disabled","clearable","onClear","onDelete","isFocusVisible","focusProps","useFocusRing","backgroundColor","tinycolor","toShortRgb","React","Trigger","useMemoizedId","merge","MenuItemContent","ColorInputTitle","IconDroplet","IconSize"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AACJ,MAA4C;AACxC,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAkBV,IAAeW,EAAUC,EAAWZ,CAAY,CAAC,EAAE,YAAgB,IAAA;AAGvF,SAAA,gBAAAa,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAI;AAAA,MACA,WAAW,CAAC,CAACP,KAAgBI;AAAA,MAC7B,SAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IAEA,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGL;AAAA,QACJ,MAAK;AAAA,QACL,IAAIO,EAAchB,CAAE;AAAA,QACpB,UAAAI;AAAA,QACA,WAAWa,EAAM;AAAA,UACb;AAAA,UACA,CAAChB,KAAgB;AAAA,UACjBG,KAAY;AAAA,QAAA,CACf;AAAA,MAAA;AAAA,MAED,gBAAAU,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OACIjB,IAAe,gBAAAa,EAAA,cAACK,GAAgB,EAAA,QAAAjB,GAAgB,cAAAD,EAA4B,CAAA,IAAK;AAAA,UAErF,WACIA,IACI,gBAAAa,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWG,EAAM;AAAA,gBACb;AAAA,gBACAb,KAAY;AAAA,cAAA,CACf;AAAA,cACD,OAAO,EAAE,iBAAAO,EAAgB;AAAA,YAAA;AAAA,UAC7B,IAEC,gBAAAG,EAAA,cAAA,QAAA,EAAK,WAAU,mBAAA,mCACXM,GAAY,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACxC;AAAA,QAAA;AAAA,MAGZ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAtB,EAAkB,cAAc;"}

package/dist/components/ColorPicker/BrandColorPicker.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ColorPickerProps } from './ColorPicker';
 type Props = Omit<ColorPickerProps, 'currentFormat' | 'setFormat'>;
-export declare const BrandColorPicker: FC<Props>;
+export declare const BrandColorPicker: {
+    ({ palettes: defaultPalettes, currentColor, onSelect }: Props): ReactElement;
+    displayName: string;
+};
 export {};

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 { SegmentedControls } from '@components/SegmentedControls/SegmentedControls';\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 }, [defaultPalettes, 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 <SegmentedControls\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};\nBrandColorPicker.displayName = 'FondueBrandColorPicker';\n"],"names":["find","haystack","needle","BrandColorPicker","defaultPalettes","currentColor","onSelect","views","IconGridRegular","IconStackVertical","view","setView","useState","query","setQuery","palettes","setPalettes","useEffect","timer","title","colors","name","id","palettesWithColors","palette","React","TextInput","IconMagnifier","value","SegmentedControls","colorView","merge","color","isColorLight","tinycolor","toShortRgb","IconCheckMark","IconSize"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAAO,CAACC,GAAmBC,IAAS,OACtCD,KAAA,gBAAAA,EAAU,oBAAoB,SAASC,EAAO,oBAAoB,KAAM,IAS/DC,~~IAA8B~~,CAAC,EAAE,UAAUC,IAAkB,CAAA,GAAI,cAAAC,GAAc,UAAAC,~~QAAe~~;~~AACvG~~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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 { SegmentedControls } from '@components/SegmentedControls/SegmentedControls';\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, { ReactElement, 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 = ({ palettes: defaultPalettes = [], currentColor, onSelect }: Props): ReactElement => {\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 }, [defaultPalettes, 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 <SegmentedControls\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};\nBrandColorPicker.displayName = 'FondueBrandColorPicker';\n"],"names":["find","haystack","needle","BrandColorPicker","defaultPalettes","currentColor","onSelect","views","IconGridRegular","IconStackVertical","view","setView","useState","query","setQuery","palettes","setPalettes","useEffect","timer","title","colors","name","id","palettesWithColors","palette","React","TextInput","IconMagnifier","value","SegmentedControls","colorView","merge","color","isColorLight","tinycolor","toShortRgb","IconCheckMark","IconSize"],"mappings":"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"}

package/dist/components/ColorPicker/ColorInput.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TextInputBaseProps } from '../TextInput/TextInput';
-import { FC } from 'react';
+import { ReactElement } from 'react';
 export type ColorInputProps = {
     min?: number;
     max?: number;
@@ -9,4 +9,7 @@ export declare enum DecoratorPosition {
     Left = "Left",
     Right = "Right"
 }
-export declare const ColorInput: FC<ColorInputProps>;
+export declare const ColorInput: {
+    ({ min, max, decorator, onChange, onEnterPressed, size, onBlur, value, decoratorPosition, type, }: ColorInputProps): ReactElement;
+    displayName: string;
+};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ~~KeyboardEvent~~, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n TextInputBaseProps,\n 'decorator' \| 'value' \| 'onChange' \| 'type' \| 'size' \| 'onBlur' \| 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n Left = 'Left',\n Right = 'Right',\n}\n\nexport const ColorInput: ~~FC<ColorInputProps>~~ = ({\n min,\n max,\n decorator,\n onChange,\n onEnterPressed,\n size,\n onBlur,\n value = '',\n decoratorPosition = DecoratorPosition.Left,\n type = TextInputType.Text,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, shiftKey } = event;\n if (key === 'Enter' && !shiftKey) {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n isFocusVisible && FOCUS_STYLE,\n ])}\n data-test-id=\"color-input\"\n >\n <div\n className={merge([\n 'tw-flex tw-gap-1',\n decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n ])}\n >\n {decorator && (\n <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n )}\n <input\n id={useMemoizedId()}\n ref={inputElement}\n className={merge([\n 'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n decoratorPosition === DecoratorPosition.Right && 'tw-text-right',\n ])}\n onClick={() => inputElement.current?.focus()}\n onKeyDown={handleKeyDown}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n value={value}\n type={type}\n min={min}\n max={max}\n size={size}\n />\n </div>\n </div>\n );\n};\nColorInput.displayName = 'FondueColorInput';\n"],"names":["DecoratorPosition","ColorInput","min","max","decorator","onChange","onEnterPressed","size","onBlur","value","decoratorPosition","type","TextInputType","isFocusVisible","focusProps","useFocusRing","inputElement","useRef","handleKeyDown","event","key","shiftKey","React","merge","FOCUS_STYLE","useMemoizedId","_a"],"mappings":";;;;;;AAcY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,~~IAAkC~~,CAAC;AAAA,~~EAC5C~~,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AAAA,EACpB,MAAAC,IAAOC,EAAc;AACzB,~~MAAM~~;~~AACI~~,QAAA,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjFC,IAAeC,EAAgC,IAAI,GACnDC,IAAgB,CAACC,MAA2C;AACxD,UAAA,EAAE,KAAAC,GAAK,UAAAC,EAAa,IAAAF;AACtB,IAAAC,MAAQ,WAAW,CAACC,KACpBf,KAAkBA,EAAea,CAAK;AAAA,EAC1C;AAIA,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,WAAWS,EAAM;AAAA,QACb;AAAA,QACAV,KAAkBW;AAAA,MAAA,CACrB;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAF,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAb,MAAsB,WAA2B;AAAA,QAAA,CACpD;AAAA,MAAA;AAAA,MAEAN,KACG,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,gEAA8DlB,CAAU;AAAA,MAE3F,gBAAAkB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAIG,EAAc;AAAA,UAClB,KAAKT;AAAA,UACL,WAAWO,EAAM;AAAA,YACb;AAAA,YACAb,MAAsB,WAA2B;AAAA,UAAA,CACpD;AAAA,UACD,SAAS,MAAM;;AAAA,oBAAAgB,IAAAV,EAAa,YAAb,gBAAAU,EAAsB;AAAA;AAAA,UACrC,WAAWR;AAAA,UACX,UAAU,CAACC,MAAUd,KAAYA,EAASc,EAAM,cAAc,KAAK;AAAA,UACnE,QAAAX;AAAA,UACA,OAAAC;AAAA,UACA,MAAAE;AAAA,UACA,KAAAT;AAAA,UACA,KAAAC;AAAA,UACA,MAAAI;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAN,EAAW,cAAc;"}
1	+ {"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { KeyboardEvent, ReactElement, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n TextInputBaseProps,\n 'decorator' \| 'value' \| 'onChange' \| 'type' \| 'size' \| 'onBlur' \| 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n Left = 'Left',\n Right = 'Right',\n}\n\nexport const ColorInput = ({\n min,\n max,\n decorator,\n onChange,\n onEnterPressed,\n size,\n onBlur,\n value = '',\n decoratorPosition = DecoratorPosition.Left,\n type = TextInputType.Text,\n}: ColorInputProps): ReactElement => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, shiftKey } = event;\n if (key === 'Enter' && !shiftKey) {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n isFocusVisible && FOCUS_STYLE,\n ])}\n data-test-id=\"color-input\"\n >\n <div\n className={merge([\n 'tw-flex tw-gap-1',\n decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n ])}\n >\n {decorator && (\n <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n )}\n <input\n id={useMemoizedId()}\n ref={inputElement}\n className={merge([\n 'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n decoratorPosition === DecoratorPosition.Right && 'tw-text-right',\n ])}\n onClick={() => inputElement.current?.focus()}\n onKeyDown={handleKeyDown}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n value={value}\n type={type}\n min={min}\n max={max}\n size={size}\n />\n </div>\n </div>\n );\n};\nColorInput.displayName = 'FondueColorInput';\n"],"names":["DecoratorPosition","ColorInput","min","max","decorator","onChange","onEnterPressed","size","onBlur","value","decoratorPosition","type","TextInputType","isFocusVisible","focusProps","useFocusRing","inputElement","useRef","handleKeyDown","event","key","shiftKey","React","merge","FOCUS_STYLE","useMemoizedId","_a"],"mappings":";;;;;;AAcY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAa,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AAAA,EACpB,MAAAC,IAAOC,EAAc;AACzB,MAAqC;AAC3B,QAAA,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjFC,IAAeC,EAAgC,IAAI,GACnDC,IAAgB,CAACC,MAA2C;AACxD,UAAA,EAAE,KAAAC,GAAK,UAAAC,EAAa,IAAAF;AACtB,IAAAC,MAAQ,WAAW,CAACC,KACpBf,KAAkBA,EAAea,CAAK;AAAA,EAC1C;AAIA,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,WAAWS,EAAM;AAAA,QACb;AAAA,QACAV,KAAkBW;AAAA,MAAA,CACrB;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAF,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAb,MAAsB,WAA2B;AAAA,QAAA,CACpD;AAAA,MAAA;AAAA,MAEAN,KACG,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,gEAA8DlB,CAAU;AAAA,MAE3F,gBAAAkB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAIG,EAAc;AAAA,UAClB,KAAKT;AAAA,UACL,WAAWO,EAAM;AAAA,YACb;AAAA,YACAb,MAAsB,WAA2B;AAAA,UAAA,CACpD;AAAA,UACD,SAAS,MAAM;;AAAA,oBAAAgB,IAAAV,EAAa,YAAb,gBAAAU,EAAsB;AAAA;AAAA,UACrC,WAAWR;AAAA,UACX,UAAU,CAACC,MAAUd,KAAYA,EAASc,EAAM,cAAc,KAAK;AAAA,UACnE,QAAAX;AAAA,UACA,OAAAC;AAAA,UACA,MAAAE;AAAA,UACA,KAAAT;AAAA,UACA,KAAAC;AAAA,UACA,MAAAI;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAN,EAAW,cAAc;"}

package/dist/components/ColorPicker/ColorPreview.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { Color } from '../../types/colors';
 type ColorPreviewProps = {
     color: Color;
 };
-export declare const ColorPreview: FC<ColorPreviewProps>;
+export declare const ColorPreview: {
+    ({ color }: ColorPreviewProps): ReactElement;
+    displayName: string;
+};
 export {};

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 { 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 tw-border-line tw-mt-[-1px] tw-rounded-t tw-border tw-border-b-0\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n );\n};\nColorPreview.displayName = 'FondueColorPreview';\n"],"names":["ColorPreview","color","backgroundColor","tinycolor","toShortRgb","React"],"mappings":";;;AAWO,MAAMA,~~IAAsC~~,CAAC,EAAE,OAAAC,~~QAAY~~;~~AAExD~~,QAAAC,IADcC,EAAUC,EAAWH,CAAK,CAAC,EACX;AAGhC,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO,EAAE,iBAAAH,EAAgB;AAAA,MACzB,gBAAa;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAF,EAAa,cAAc;"}
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, { ReactElement } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color } from '../../types/colors';\n\ntype ColorPreviewProps = {\n color: Color;\n};\n\nexport const ColorPreview = ({ color }: ColorPreviewProps): ReactElement => {\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 tw-border-line tw-mt-[-1px] tw-rounded-t tw-border tw-border-b-0\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n );\n};\nColorPreview.displayName = 'FondueColorPreview';\n"],"names":["ColorPreview","color","backgroundColor","tinycolor","toShortRgb","React"],"mappings":";;;AAWO,MAAMA,IAAe,CAAC,EAAE,OAAAC,QAA6C;AAElE,QAAAC,IADcC,EAAUC,EAAWH,CAAK,CAAC,EACX;AAGhC,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO,EAAE,iBAAAH,EAAgB;AAAA,MACzB,gBAAa;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAF,EAAa,cAAc;"}

package/dist/components/ColorPicker/CustomColorPicker.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ColorPickerProps } from './ColorPicker';
-export declare const CustomColorPicker: FC<Omit<ColorPickerProps, 'palette'>>;
+export declare const CustomColorPicker: {
+    ({ currentColor, currentFormat, setFormat, onSelect, }: Omit<ColorPickerProps, 'palette'>): ReactElement;
+    displayName: string;
+};