@frontify/fondue 13.0.0-rc.14 → 13.0.0-rc.16

package/dist/components/Accordion/AccordionHeader.es.js

@@ -1,31 +1,30 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useState as m, isValidElement as w, cloneElement as d } from "react";
-import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
-import { merge as f } from "../../utilities/merge.es.js";
-import { AccordionHeaderIcon as p } from "./AccordionHeaderIcon.es.js";
-const h = "fondue-accordion-header", u = ({
+import { useState as w, isValidElement as m, cloneElement as d } from "react";
+import { merge as x } from "../../utilities/merge.es.js";
+import { AccordionHeaderIcon as f } from "./AccordionHeaderIcon.es.js";
+const p = "fondue-accordion-header", h = ({
   isOpen: a = !1,
   decorator: r,
   disabled: n = !1,
   children: s,
-  "data-test-id": t = h
+  "data-test-id": t = p
 }) => {
-  const [o, c] = m(null), i = /* @__PURE__ */ e(p, { isOpen: a });
+  const [o, c] = w(null), i = /* @__PURE__ */ e(f, { isOpen: a });
   return /* @__PURE__ */ e("span", { "data-test-id": t, className: "tw-block tw-px-8 tw-py-6", children: /* @__PURE__ */ l(
     "span",
     {
       "data-test-id": `${t}-container`,
       role: "navigation",
       "aria-label": `${(o == null ? void 0 : o.innerText) || ""}`,
-      className: f([
+      className: x([
         "tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row",
         !n && a && "tw-text-text",
         !n && !a && "tw-text-text-weak hover:tw-text-text",
         n && "tw-text-text-disabled"
       ]),
       children: [
-        w(r) && /* @__PURE__ */ e("span", { "data-test-id": `${t}-decorator`, className: "tw-shrink-0 tw-leading-4", children: d(r, {
-          size: x.Size16
+        m(r) && /* @__PURE__ */ e("span", { "data-test-id": `${t}-decorator`, className: "tw-shrink-0 tw-leading-4", children: d(r, {
+          size: 16
         }) }),
         /* @__PURE__ */ e(
           "span",
@@ -41,8 +40,8 @@ const h = "fondue-accordion-header", u = ({
     }
   ) });
 };
-u.displayName = "FondueAccordionHeader";
+h.displayName = "FondueAccordionHeader";
 export {
-  u as AccordionHeader
+  h as AccordionHeader
 };
 //# sourceMappingURL=AccordionHeader.es.js.map

package/dist/components/Accordion/AccordionHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.es.js","sources":["../../../src/components/Accordion/AccordionHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, cloneElement, isValidElement, useState } from 'react';\n\nimport { type IconProps } from '@foundation/Icon/IconProps';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\n\nimport { AccordionHeaderIcon } from './AccordionHeaderIcon';\nimport { type AccordionHeaderProps } from './types';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nconst ACCORDION_HEADER_TEST_ID = 'fondue-accordion-header';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nexport const AccordionHeader = ({\n    isOpen = false,\n    decorator,\n    disabled = false,\n    children,\n    'data-test-id': dataTestId = ACCORDION_HEADER_TEST_ID,\n}: AccordionHeaderProps) => {\n    const [headingRef, setHeadingRef] = useState<HTMLSpanElement | null>(null);\n    const icon = <AccordionHeaderIcon isOpen={isOpen} />;\n\n    return (\n        <span data-test-id={dataTestId} className=\"tw-block tw-px-8 tw-py-6\">\n            <span\n                data-test-id={`${dataTestId}-container`}\n                role=\"navigation\"\n                aria-label={`${headingRef?.innerText || ''}`}\n                className={merge([\n                    'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                    !disabled && isOpen && 'tw-text-text',\n                    !disabled && !isOpen && 'tw-text-text-weak hover:tw-text-text',\n                    disabled && 'tw-text-text-disabled',\n                ])}\n            >\n                {isValidElement(decorator) && (\n                    <span data-test-id={`${dataTestId}-decorator`} className=\"tw-shrink-0 tw-leading-4\">\n                        {cloneElement(decorator as ReactElement<IconProps>, {\n                            size: IconSize.Size16,\n                        })}\n                    </span>\n                )}\n                <span\n                    ref={setHeadingRef}\n                    data-test-id={`${dataTestId}-text`}\n                    className=\"tw-text-left tw-text-m tw-font-normal\"\n                >\n                    {children}\n                </span>\n                {icon && (\n                    <span data-test-id={`${dataTestId}-icon-container`} className=\"tw-ml-auto tw-shrink-0\">\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </span>\n    );\n};\nAccordionHeader.displayName = 'FondueAccordionHeader';\n"],"names":["ACCORDION_HEADER_TEST_ID","AccordionHeader","isOpen","decorator","disabled","children","dataTestId","headingRef","setHeadingRef","useState","icon","jsx","AccordionHeaderIcon","jsxs","merge","isValidElement","cloneElement","IconSize"],"mappings":";;;;;AAcA,MAAMA,IAA2B,2BAKpBC,IAAkB,CAAC;AAAA,EAC5B,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAaN;AACjC,MAA4B;AACxB,QAAM,CAACO,GAAYC,CAAa,IAAIC,EAAiC,IAAI,GACnEC,IAAO,gBAAAC,EAACC,GAAA,EAAoB,QAAAV,EAAA,CAAgB;AAElD,SACI,gBAAAS,EAAC,QAAA,EAAK,gBAAcL,GAAY,WAAU,4BACtC,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,GAAGP,CAAU;AAAA,MAC3B,MAAK;AAAA,MACL,cAAY,IAAGC,KAAA,gBAAAA,EAAY,cAAa,EAAE;AAAA,MAC1C,WAAWO,EAAM;AAAA,QACb;AAAA,QACA,CAACV,KAAYF,KAAU;AAAA,QACvB,CAACE,KAAY,CAACF,KAAU;AAAA,QACxBE,KAAY;AAAA,MAAA,CACf;AAAA,MAEA,UAAA;AAAA,QAAAW,EAAeZ,CAAS,KACrB,gBAAAQ,EAAC,QAAA,EAAK,gBAAc,GAAGL,CAAU,cAAc,WAAU,4BACpD,UAAAU,EAAab,GAAsC;AAAA,UAChD,MAAMc,EAAS;AAAA,QAAA,CAClB,GACL;AAAA,QAEJ,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKH;AAAA,YACL,gBAAc,GAAGF,CAAU;AAAA,YAC3B,WAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJK,uBACI,QAAA,EAAK,gBAAc,GAAGJ,CAAU,mBAAmB,WAAU,0BACzD,UAAAI,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER;AACAT,EAAgB,cAAc;"}
+{"version":3,"file":"AccordionHeader.es.js","sources":["../../../src/components/Accordion/AccordionHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, cloneElement, isValidElement, useState } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { AccordionHeaderIcon } from './AccordionHeaderIcon';\nimport { type AccordionHeaderProps } from './types';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nconst ACCORDION_HEADER_TEST_ID = 'fondue-accordion-header';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nexport const AccordionHeader = ({\n    isOpen = false,\n    decorator,\n    disabled = false,\n    children,\n    'data-test-id': dataTestId = ACCORDION_HEADER_TEST_ID,\n}: AccordionHeaderProps) => {\n    const [headingRef, setHeadingRef] = useState<HTMLSpanElement | null>(null);\n    const icon = <AccordionHeaderIcon isOpen={isOpen} />;\n\n    return (\n        <span data-test-id={dataTestId} className=\"tw-block tw-px-8 tw-py-6\">\n            <span\n                data-test-id={`${dataTestId}-container`}\n                role=\"navigation\"\n                aria-label={`${headingRef?.innerText || ''}`}\n                className={merge([\n                    'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                    !disabled && isOpen && 'tw-text-text',\n                    !disabled && !isOpen && 'tw-text-text-weak hover:tw-text-text',\n                    disabled && 'tw-text-text-disabled',\n                ])}\n            >\n                {isValidElement(decorator) && (\n                    <span data-test-id={`${dataTestId}-decorator`} className=\"tw-shrink-0 tw-leading-4\">\n                        {cloneElement(decorator as ReactElement, {\n                            size: 16,\n                        })}\n                    </span>\n                )}\n                <span\n                    ref={setHeadingRef}\n                    data-test-id={`${dataTestId}-text`}\n                    className=\"tw-text-left tw-text-m tw-font-normal\"\n                >\n                    {children}\n                </span>\n                {icon && (\n                    <span data-test-id={`${dataTestId}-icon-container`} className=\"tw-ml-auto tw-shrink-0\">\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </span>\n    );\n};\nAccordionHeader.displayName = 'FondueAccordionHeader';\n"],"names":["ACCORDION_HEADER_TEST_ID","AccordionHeader","isOpen","decorator","disabled","children","dataTestId","headingRef","setHeadingRef","useState","icon","jsx","AccordionHeaderIcon","jsxs","merge","isValidElement","cloneElement"],"mappings":";;;;AAYA,MAAMA,IAA2B,2BAKpBC,IAAkB,CAAC;AAAA,EAC5B,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAaN;AACjC,MAA4B;AACxB,QAAM,CAACO,GAAYC,CAAa,IAAIC,EAAiC,IAAI,GACnEC,IAAO,gBAAAC,EAACC,GAAA,EAAoB,QAAAV,EAAA,CAAgB;AAElD,SACI,gBAAAS,EAAC,QAAA,EAAK,gBAAcL,GAAY,WAAU,4BACtC,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,GAAGP,CAAU;AAAA,MAC3B,MAAK;AAAA,MACL,cAAY,IAAGC,KAAA,gBAAAA,EAAY,cAAa,EAAE;AAAA,MAC1C,WAAWO,EAAM;AAAA,QACb;AAAA,QACA,CAACV,KAAYF,KAAU;AAAA,QACvB,CAACE,KAAY,CAACF,KAAU;AAAA,QACxBE,KAAY;AAAA,MAAA,CACf;AAAA,MAEA,UAAA;AAAA,QAAAW,EAAeZ,CAAS,KACrB,gBAAAQ,EAAC,QAAA,EAAK,gBAAc,GAAGL,CAAU,cAAc,WAAU,4BACpD,UAAAU,EAAab,GAA2B;AAAA,UACrC,MAAM;AAAA,QAAA,CACT,GACL;AAAA,QAEJ,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKH;AAAA,YACL,gBAAc,GAAGF,CAAU;AAAA,YAC3B,WAAU;AAAA,YAET,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJK,uBACI,QAAA,EAAK,gBAAc,GAAGJ,CAAU,mBAAmB,WAAU,0BACzD,UAAAI,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER;AACAT,EAAgB,cAAc;"}

package/dist/components/Accordion/AccordionHeaderIcon.es.js

@@ -1,25 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
-import i from "../../foundation/Icon/Generated/IconCaretDown.es.js";
-import { IconSize as e } from "../../foundation/Icon/IconSize.es.js";
+import { IconCaretDown as r } from "@frontify/fondue-icons";
 import { merge as n } from "../../utilities/merge.es.js";
-const c = "fondue-accordion-header-icon", d = {
-  small: e.Size12,
-  medium: e.Size16,
-  large: e.Size20
-}, m = ({
+const i = "fondue-accordion-header-icon", c = {
+  small: 12,
+  medium: 16,
+  large: 20
+}, d = ({
   size: t = "medium",
   isOpen: a,
-  "data-test-id": r = c
-}) => /* @__PURE__ */ o("span", { "data-test-id": `${r}-wrapper`, className: "tw-block", children: /* @__PURE__ */ o(
+  "data-test-id": e = i
+}) => /* @__PURE__ */ o("span", { "data-test-id": `${e}-wrapper`, className: "tw-block", children: /* @__PURE__ */ o(
   "span",
   {
-    "data-test-id": r,
+    "data-test-id": e,
     className: n(["tw-block tw-transition-transform", a && "tw-rotate-180 tw-duration-300"]),
-    children: /* @__PURE__ */ o(i, { size: d[t] })
+    children: /* @__PURE__ */ o(r, { size: c[t] })
   }
 ) });
-m.displayName = "FondueAccordionHeaderIcon";
+d.displayName = "FondueAccordionHeaderIcon";
 export {
-  m as AccordionHeaderIcon
+  d as AccordionHeaderIcon
 };
 //# sourceMappingURL=AccordionHeaderIcon.es.js.map

package/dist/components/Accordion/AccordionHeaderIcon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nimport IconCaretDown from '@foundation/Icon/Generated/IconCaretDown';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\n\nimport { type AccordionHeaderIconProps, type AccordionHeaderIconSize } from './types';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nconst ACCORDION_HEADER_ICON_ID = 'fondue-accordion-header-icon';\n\nconst sizeMap: Record<AccordionHeaderIconSize, IconSize> = {\n    small: IconSize.Size12,\n    medium: IconSize.Size16,\n    large: IconSize.Size20,\n};\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nexport const AccordionHeaderIcon = ({\n    size = 'medium',\n    isOpen,\n    'data-test-id': dataTestId = ACCORDION_HEADER_ICON_ID,\n}: AccordionHeaderIconProps): ReactElement => (\n    <span data-test-id={`${dataTestId}-wrapper`} className=\"tw-block\">\n        <span\n            data-test-id={dataTestId}\n            className={merge(['tw-block tw-transition-transform', isOpen && 'tw-rotate-180 tw-duration-300'])}\n        >\n            <IconCaretDown size={sizeMap[size]} />\n        </span>\n    </span>\n);\n\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["ACCORDION_HEADER_ICON_ID","sizeMap","IconSize","AccordionHeaderIcon","size","isOpen","dataTestId","jsx","merge","IconCaretDown"],"mappings":";;;;AAaA,MAAMA,IAA2B,gCAE3BC,IAAqD;AAAA,EACvD,OAAOC,EAAS;AAAA,EAChB,QAAQA,EAAS;AAAA,EACjB,OAAOA,EAAS;AACpB,GAKaC,IAAsB,CAAC;AAAA,EAChC,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,gBAAgBC,IAAaN;AACjC,wBACK,QAAA,EAAK,gBAAc,GAAGM,CAAU,YAAY,WAAU,YACnD,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcD;AAAA,IACd,WAAWE,EAAM,CAAC,oCAAoCH,KAAU,+BAA+B,CAAC;AAAA,IAEhG,UAAA,gBAAAE,EAACE,GAAA,EAAc,MAAMR,EAAQG,CAAI,EAAA,CAAG;AAAA,EAAA;AACxC,EAAA,CACJ;AAGJD,EAAoB,cAAc;"}
+{"version":3,"file":"AccordionHeaderIcon.es.js","sources":["../../../src/components/Accordion/AccordionHeaderIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps, IconCaretDown } from '@frontify/fondue-icons';\nimport { type ReactElement } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { type AccordionHeaderIconProps, type AccordionHeaderIconSize } from './types';\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nconst ACCORDION_HEADER_ICON_ID = 'fondue-accordion-header-icon';\n\nconst sizeMap: Record<AccordionHeaderIconSize, FondueIconProps['size']> = {\n    small: 12,\n    medium: 16,\n    large: 20,\n};\n\n/**\n * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.\n */\nexport const AccordionHeaderIcon = ({\n    size = 'medium',\n    isOpen,\n    'data-test-id': dataTestId = ACCORDION_HEADER_ICON_ID,\n}: AccordionHeaderIconProps): ReactElement => (\n    <span data-test-id={`${dataTestId}-wrapper`} className=\"tw-block\">\n        <span\n            data-test-id={dataTestId}\n            className={merge(['tw-block tw-transition-transform', isOpen && 'tw-rotate-180 tw-duration-300'])}\n        >\n            <IconCaretDown size={sizeMap[size]} />\n        </span>\n    </span>\n);\n\nAccordionHeaderIcon.displayName = 'FondueAccordionHeaderIcon';\n"],"names":["ACCORDION_HEADER_ICON_ID","sizeMap","AccordionHeaderIcon","size","isOpen","dataTestId","jsx","merge","IconCaretDown"],"mappings":";;;AAYA,MAAMA,IAA2B,gCAE3BC,IAAoE;AAAA,EACtE,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAKaC,IAAsB,CAAC;AAAA,EAChC,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,gBAAgBC,IAAaL;AACjC,wBACK,QAAA,EAAK,gBAAc,GAAGK,CAAU,YAAY,WAAU,YACnD,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcD;AAAA,IACd,WAAWE,EAAM,CAAC,oCAAoCH,KAAU,+BAA+B,CAAC;AAAA,IAEhG,UAAA,gBAAAE,EAACE,GAAA,EAAc,MAAMP,EAAQE,CAAI,EAAA,CAAG;AAAA,EAAA;AACxC,EAAA,CACJ;AAGJD,EAAoB,cAAc;"}

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

@@ -1,18 +1,17 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useRef as F } from "react";
+import { IconArrowCircleUp as F, IconImageStack as b } from "@frontify/fondue-icons";
+import { useRef as y } from "react";
 import { Button as p } from "../Button/Button.es.js";
 import { ButtonEmphasis as f, ButtonStyle as u } from "../Button/ButtonTypes.es.js";
-import b from "../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
-import y from "../../foundation/Icon/Generated/IconImageStack.es.js";
 import { useMemoizedId as j } from "../../hooks/useMemoizedId.es.js";
-import { merge as o } from "../../utilities/merge.es.js";
+import { merge as a } from "../../utilities/merge.es.js";
 import { SelectedAsset as A } from "./SingleAsset/SelectedAsset.es.js";
 import { MultiAssetPreview as D } from "./MultiAssetPreview/MultiAssetPreview.es.js";
 var W = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(W || {});
 const E = ({
   assets: t = [],
   numberOfLocations: w = 1,
-  actions: a = [],
+  actions: o = [],
   size: h = "Small",
   isLoading: d = !1,
   hideSize: g = !1,
@@ -22,27 +21,27 @@ const E = ({
   onMultiAssetClick: l,
   acceptFileType: v
 }) => {
-  const m = t.length, i = F(null), I = j(), N = (B) => {
-    const n = B.target.files;
-    n && r && r(n);
+  const n = t.length, i = y(null), I = j(), N = (B) => {
+    const m = B.target.files;
+    m && r && r(m);
   }, S = () => {
     i.current && i.current.click();
   };
-  return (d || m === 1) && a ? /* @__PURE__ */ e(
+  return (d || n === 1) && o ? /* @__PURE__ */ e(
     A,
     {
       asset: t[0],
       size: h,
-      actions: a,
+      actions: o,
       isLoading: d,
       hideExtension: x,
       hideSize: g
     }
-  ) : m > 1 && l ? /* @__PURE__ */ e(D, { assets: t, onClick: l, numberOfLocations: w }) : /* @__PURE__ */ c(
+  ) : n > 1 && l ? /* @__PURE__ */ e(D, { assets: t, onClick: l, numberOfLocations: w }) : /* @__PURE__ */ c(
     "div",
     {
       "data-test-id": "asset-input-placeholder",
-      className: o([
+      className: a([
         "tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded",
         r && s ? "tw-grid-cols-2 tw-divide-x tw-divide-black-10" : "tw-grid-cols-1"
       ]),
@@ -50,7 +49,7 @@ const E = ({
         r && /* @__PURE__ */ c(
           "div",
           {
-            className: o(["tw-flex tw-flex-col tw-h-8", s && "tw-pr-3"]),
+            className: a(["tw-flex tw-flex-col tw-h-8", s && "tw-pr-3"]),
             "data-test-id": "asset-input-upload",
             children: [
               /* @__PURE__ */ e(
@@ -59,7 +58,7 @@ const E = ({
                   style: u.Default,
                   onClick: S,
                   emphasis: f.Weak,
-                  icon: /* @__PURE__ */ e(b, {}),
+                  icon: /* @__PURE__ */ e(F, {}),
                   children: "Upload"
                 }
               ),
@@ -81,7 +80,7 @@ const E = ({
         s && /* @__PURE__ */ e(
           "div",
           {
-            className: o(["tw-flex tw-flex-col tw-h-8", r && "tw-pl-3"]),
+            className: a(["tw-flex tw-flex-col tw-h-8", r && "tw-pl-3"]),
             "data-test-id": "asset-input-library",
             children: /* @__PURE__ */ e(
               p,
@@ -89,7 +88,7 @@ const E = ({
                 style: u.Default,
                 onClick: s,
                 emphasis: f.Weak,
-                icon: /* @__PURE__ */ e(y, {}),
+                icon: /* @__PURE__ */ e(b, {}),
                 children: "Browse"
               }
             )

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

@@ -1 +1 @@
-{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ChangeEvent, type ReactElement, useRef } from 'react';\n\nimport { type ActionMenuProps } from '@components/ActionMenu/ActionMenu';\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonStyle } from '@components/Button/ButtonTypes';\nimport IconArrowCircleUp from '@foundation/Icon/Generated/IconArrowCircleUp';\nimport IconImageStack from '@foundation/Icon/Generated/IconImageStack';\nimport { type IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\n\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\nimport { type AssetInputMenuBlock } from './types';\n\ntype BaseAsset = {\n    name: string;\n};\n\nexport type ImageAsset = {\n    type: 'image' | 'logo';\n    name: string;\n    extension: string;\n    src?: string;\n    alt?: string;\n    icon?: undefined;\n    size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n    type: 'audio';\n    extension: string;\n    src?: undefined;\n    alt?: undefined;\n    icon?: undefined;\n    size: number;\n};\n\ntype IconAsset = BaseAsset & {\n    type: 'icon';\n    extension?: undefined;\n    src?: undefined;\n    alt?: undefined;\n    icon: ReactElement<IconProps>;\n    size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type AssetType =\n    | (ImageAsset & UploadSource)\n    | (ImageAsset & LibrarySource)\n    | (IconAsset & UploadSource)\n    | (IconAsset & LibrarySource)\n    | (OtherAsset & UploadSource)\n    | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n    assets?: AssetType[];\n    size: AssetInputSize;\n    numberOfLocations?: number;\n    actions?: ActionMenuProps['menuBlocks'] | AssetInputMenuBlock[];\n    isLoading?: boolean;\n    hideSize?: boolean;\n    hideExtension?: boolean;\n    onUploadClick?: (files: FileList) => void;\n    onLibraryClick?: () => void;\n    onMultiAssetClick?: () => void;\n    acceptFileType?: string;\n};\n\nexport const AssetInput = ({\n    assets = [],\n    numberOfLocations = 1,\n    actions = [],\n    size = AssetInputSize.Small,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n    onLibraryClick,\n    onUploadClick,\n    onMultiAssetClick,\n    acceptFileType,\n}: AssetInputProps): ReactElement => {\n    const assetsLength = assets.length;\n    const inputFile = useRef<HTMLInputElement | null>(null);\n    const id = useMemoizedId();\n\n    const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const files = event.target.files;\n\n        if (files && onUploadClick) {\n            onUploadClick(files);\n        }\n    };\n\n    const onOpenFileUpload = () => {\n        if (inputFile.current) {\n            inputFile.current.click();\n        }\n    };\n\n    if ((isLoading || assetsLength === 1) && actions) {\n        return (\n            <SelectedAsset\n                asset={assets[0]}\n                size={size}\n                actions={actions}\n                isLoading={isLoading}\n                hideExtension={hideExtension}\n                hideSize={hideSize}\n            />\n        );\n    }\n\n    if (assetsLength > 1 && onMultiAssetClick) {\n        return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n    }\n\n    return (\n        <div\n            data-test-id=\"asset-input-placeholder\"\n            className={merge([\n                'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n                onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n            ])}\n        >\n            {onUploadClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n                    data-test-id=\"asset-input-upload\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onOpenFileUpload}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconArrowCircleUp />}\n                    >\n                        Upload\n                    </Button>\n                    <input\n                        id={id}\n                        ref={inputFile}\n                        className=\"tw-hidden\"\n                        type=\"file\"\n                        accept={acceptFileType}\n                        multiple={!!onMultiAssetClick}\n                        onChange={onFileChange}\n                    />\n                </div>\n            )}\n            {onLibraryClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n                    data-test-id=\"asset-input-library\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onLibraryClick}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconImageStack />}\n                    >\n                        Browse\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\nAssetInput.displayName = 'FondueAssetInput';\n"],"names":["AssetInputSize","AssetInput","assets","numberOfLocations","actions","size","isLoading","hideSize","hideExtension","onLibraryClick","onUploadClick","onMultiAssetClick","acceptFileType","assetsLength","inputFile","useRef","id","useMemoizedId","onFileChange","event","files","onOpenFileUpload","jsx","SelectedAsset","MultiAssetPreview","jsxs","merge","Button","ButtonStyle","ButtonEmphasis","IconArrowCircleUp","IconImageStack"],"mappings":";;;;;;;;;;AAoDO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AA2BL,MAAMC,IAAa,CAAC;AAAA,EACvB,QAAAC,IAAS,CAAA;AAAA,EACT,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU,CAAA;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAqC;AACjC,QAAMC,IAAeX,EAAO,QACtBY,IAAYC,EAAgC,IAAI,GAChDC,IAAKC,EAAA,GAELC,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAQD,EAAM,OAAO;AAE3B,IAAIC,KAASV,KACTA,EAAcU,CAAK;AAAA,EAE3B,GAEMC,IAAmB,MAAM;AAC3B,IAAIP,EAAU,WACVA,EAAU,QAAQ,MAAA;AAAA,EAE1B;AAEA,UAAKR,KAAaO,MAAiB,MAAMT,IAEjC,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAOrB,EAAO,CAAC;AAAA,MACf,MAAAG;AAAA,MACA,SAAAD;AAAA,MACA,WAAAE;AAAA,MACA,eAAAE;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKRM,IAAe,KAAKF,IACb,gBAAAW,EAACE,GAAA,EAAkB,QAAAtB,GAAgB,SAASS,GAAmB,mBAAAR,GAAsC,IAI5G,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWC,EAAM;AAAA,QACb;AAAA,QACAhB,KAAiBD,IAAiB,kDAAkD;AAAA,MAAA,CACvF;AAAA,MAEA,UAAA;AAAA,QAAAC,KACG,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,EAAM,CAAC,8BAA8BjB,KAAkB,SAAS,CAAC;AAAA,YAC5E,gBAAa;AAAA,YAEb,UAAA;AAAA,cAAA,gBAAAa;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACG,OAAOC,EAAY;AAAA,kBACnB,SAASP;AAAA,kBACT,UAAUQ,EAAe;AAAA,kBACzB,wBAAOC,GAAA,EAAkB;AAAA,kBAC5B,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGD,gBAAAR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAAN;AAAA,kBACA,KAAKF;AAAA,kBACL,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,QAAQF;AAAA,kBACR,UAAU,CAAC,CAACD;AAAA,kBACZ,UAAUO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,QAGPT,KACG,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWI,EAAM,CAAC,8BAA8BhB,KAAiB,SAAS,CAAC;AAAA,YAC3E,gBAAa;AAAA,YAEb,UAAA,gBAAAY;AAAA,cAACK;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,SAASnB;AAAA,gBACT,UAAUoB,EAAe;AAAA,gBACzB,wBAAOE,GAAA,EAAe;AAAA,gBACzB,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;AACA9B,EAAW,cAAc;"}
+{"version":3,"file":"AssetInput.es.js","sources":["../../../src/components/AssetInput/AssetInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps, IconArrowCircleUp, IconImageStack } from '@frontify/fondue-icons';\nimport { type ChangeEvent, type ReactElement, useRef } from 'react';\n\nimport { type ActionMenuProps } from '@components/ActionMenu/ActionMenu';\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\n\nimport { MultiAssetPreview } from './MultiAssetPreview';\nimport { SelectedAsset } from './SingleAsset/SelectedAsset';\nimport { type AssetInputMenuBlock } from './types';\n\ntype BaseAsset = {\n    name: string;\n};\n\nexport type ImageAsset = {\n    type: 'image' | 'logo';\n    name: string;\n    extension: string;\n    src?: string;\n    alt?: string;\n    icon?: undefined;\n    size: number;\n};\n\ntype OtherAsset = BaseAsset & {\n    type: 'audio';\n    extension: string;\n    src?: undefined;\n    alt?: undefined;\n    icon?: undefined;\n    size: number;\n};\n\ntype IconAsset = BaseAsset & {\n    type: 'icon';\n    extension?: undefined;\n    src?: undefined;\n    alt?: undefined;\n    icon: ReactElement<FondueIconProps>;\n    size?: undefined;\n};\n\nexport type UploadSource = { source: 'upload'; sourceName?: undefined };\nexport type LibrarySource = { source: 'library'; sourceName: string };\n\nexport enum AssetInputSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type AssetType =\n    | (ImageAsset & UploadSource)\n    | (ImageAsset & LibrarySource)\n    | (IconAsset & UploadSource)\n    | (IconAsset & LibrarySource)\n    | (OtherAsset & UploadSource)\n    | (OtherAsset & LibrarySource);\n\nexport type AssetInputProps = {\n    assets?: AssetType[];\n    size: AssetInputSize;\n    numberOfLocations?: number;\n    actions?: ActionMenuProps['menuBlocks'] | AssetInputMenuBlock[];\n    isLoading?: boolean;\n    hideSize?: boolean;\n    hideExtension?: boolean;\n    onUploadClick?: (files: FileList) => void;\n    onLibraryClick?: () => void;\n    onMultiAssetClick?: () => void;\n    acceptFileType?: string;\n};\n\nexport const AssetInput = ({\n    assets = [],\n    numberOfLocations = 1,\n    actions = [],\n    size = AssetInputSize.Small,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n    onLibraryClick,\n    onUploadClick,\n    onMultiAssetClick,\n    acceptFileType,\n}: AssetInputProps): ReactElement => {\n    const assetsLength = assets.length;\n    const inputFile = useRef<HTMLInputElement | null>(null);\n    const id = useMemoizedId();\n\n    const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const files = event.target.files;\n\n        if (files && onUploadClick) {\n            onUploadClick(files);\n        }\n    };\n\n    const onOpenFileUpload = () => {\n        if (inputFile.current) {\n            inputFile.current.click();\n        }\n    };\n\n    if ((isLoading || assetsLength === 1) && actions) {\n        return (\n            <SelectedAsset\n                asset={assets[0]}\n                size={size}\n                actions={actions}\n                isLoading={isLoading}\n                hideExtension={hideExtension}\n                hideSize={hideSize}\n            />\n        );\n    }\n\n    if (assetsLength > 1 && onMultiAssetClick) {\n        return <MultiAssetPreview assets={assets} onClick={onMultiAssetClick} numberOfLocations={numberOfLocations} />;\n    }\n\n    return (\n        <div\n            data-test-id=\"asset-input-placeholder\"\n            className={merge([\n                'tw-grid tw-p-3 tw-border tw-border-dashed tw-border-black-10 tw-rounded',\n                onUploadClick && onLibraryClick ? 'tw-grid-cols-2 tw-divide-x tw-divide-black-10' : 'tw-grid-cols-1',\n            ])}\n        >\n            {onUploadClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onLibraryClick && 'tw-pr-3'])}\n                    data-test-id=\"asset-input-upload\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onOpenFileUpload}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconArrowCircleUp />}\n                    >\n                        Upload\n                    </Button>\n                    <input\n                        id={id}\n                        ref={inputFile}\n                        className=\"tw-hidden\"\n                        type=\"file\"\n                        accept={acceptFileType}\n                        multiple={!!onMultiAssetClick}\n                        onChange={onFileChange}\n                    />\n                </div>\n            )}\n            {onLibraryClick && (\n                <div\n                    className={merge(['tw-flex tw-flex-col tw-h-8', onUploadClick && 'tw-pl-3'])}\n                    data-test-id=\"asset-input-library\"\n                >\n                    <Button\n                        style={ButtonStyle.Default}\n                        onClick={onLibraryClick}\n                        emphasis={ButtonEmphasis.Weak}\n                        icon={<IconImageStack />}\n                    >\n                        Browse\n                    </Button>\n                </div>\n            )}\n        </div>\n    );\n};\nAssetInput.displayName = 'FondueAssetInput';\n"],"names":["AssetInputSize","AssetInput","assets","numberOfLocations","actions","size","isLoading","hideSize","hideExtension","onLibraryClick","onUploadClick","onMultiAssetClick","acceptFileType","assetsLength","inputFile","useRef","id","useMemoizedId","onFileChange","event","files","onOpenFileUpload","jsx","SelectedAsset","MultiAssetPreview","jsxs","merge","Button","ButtonStyle","ButtonEmphasis","IconArrowCircleUp","IconImageStack"],"mappings":";;;;;;;;;AAkDO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AA2BL,MAAMC,IAAa,CAAC;AAAA,EACvB,QAAAC,IAAS,CAAA;AAAA,EACT,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU,CAAA;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAqC;AACjC,QAAMC,IAAeX,EAAO,QACtBY,IAAYC,EAAgC,IAAI,GAChDC,IAAKC,EAAA,GAELC,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAQD,EAAM,OAAO;AAE3B,IAAIC,KAASV,KACTA,EAAcU,CAAK;AAAA,EAE3B,GAEMC,IAAmB,MAAM;AAC3B,IAAIP,EAAU,WACVA,EAAU,QAAQ,MAAA;AAAA,EAE1B;AAEA,UAAKR,KAAaO,MAAiB,MAAMT,IAEjC,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAOrB,EAAO,CAAC;AAAA,MACf,MAAAG;AAAA,MACA,SAAAD;AAAA,MACA,WAAAE;AAAA,MACA,eAAAE;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,EAAA,IAKRM,IAAe,KAAKF,IACb,gBAAAW,EAACE,GAAA,EAAkB,QAAAtB,GAAgB,SAASS,GAAmB,mBAAAR,GAAsC,IAI5G,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWC,EAAM;AAAA,QACb;AAAA,QACAhB,KAAiBD,IAAiB,kDAAkD;AAAA,MAAA,CACvF;AAAA,MAEA,UAAA;AAAA,QAAAC,KACG,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,EAAM,CAAC,8BAA8BjB,KAAkB,SAAS,CAAC;AAAA,YAC5E,gBAAa;AAAA,YAEb,UAAA;AAAA,cAAA,gBAAAa;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACG,OAAOC,EAAY;AAAA,kBACnB,SAASP;AAAA,kBACT,UAAUQ,EAAe;AAAA,kBACzB,wBAAOC,GAAA,EAAkB;AAAA,kBAC5B,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGD,gBAAAR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAAN;AAAA,kBACA,KAAKF;AAAA,kBACL,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,QAAQF;AAAA,kBACR,UAAU,CAAC,CAACD;AAAA,kBACZ,UAAUO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,QAGPT,KACG,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWI,EAAM,CAAC,8BAA8BhB,KAAiB,SAAS,CAAC;AAAA,YAC3E,gBAAa;AAAA,YAEb,UAAA,gBAAAY;AAAA,cAACK;AAAA,cAAA;AAAA,gBACG,OAAOC,EAAY;AAAA,gBACnB,SAASnB;AAAA,gBACT,UAAUoB,EAAe;AAAA,gBACzB,wBAAOE,GAAA,EAAe;AAAA,gBACzB,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;AACA9B,EAAW,cAAc;"}

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

@@ -1,38 +1,37 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { cloneElement as o } from "react";
-import c from "../../foundation/Icon/Generated/IconMusicNote.es.js";
-import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
-import { merge as m } from "../../utilities/merge.es.js";
-import { AssetInputSize as u } from "./AssetInput.es.js";
-const d = (t, e) => {
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { IconMusicNote as r } from "@frontify/fondue-icons";
+import { cloneElement as u } from "react";
+import { merge as c } from "../../utilities/merge.es.js";
+import { AssetInputSize as o } from "./AssetInput.es.js";
+const m = (t, e) => {
   switch (!0) {
-    case t === u.Large:
+    case t === o.Large:
       return "tw-w-full tw-h-32";
     case e:
       return "tw-w-11 tw-h-11";
     default:
       return "tw-w-14 tw-h-full";
   }
-}, w = ({
+}, d = ({
   asset: t,
   size: e,
-  isActive: l = !1,
-  isMultiAsset: r = !1
+  isActive: n = !1,
+  isMultiAsset: l = !1
 }) => {
-  const i = t.type === "icon" || t.type === "audio" ? t.type : "default";
+  const a = t.type === "icon" || t.type === "audio" ? t.type : "default";
   return /* @__PURE__ */ s(
     "div",
     {
-      className: m([
+      className: c([
         "tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95",
-        d(e, r),
-        l ? "tw-text-black-100 dark:tw-text-white" : "tw-text-black-80 dark:tw-text-black-20"
+        m(e, l),
+        n ? "tw-text-black-100 dark:tw-text-white" : "tw-text-black-80 dark:tw-text-black-20"
       ]),
       "data-test-id": "asset-input-thumbnail",
       children: [
-        i === "icon" && /* @__PURE__ */ a("span", { "data-test-id": "asset-input-thumbnail-icon", children: t.icon && o(t.icon, { size: n.Size24 }) }),
-        i === "audio" && /* @__PURE__ */ a(c, { size: n.Size24, "data-test-id": "asset-input-thumbnail-audio" }),
-        i === "default" && /* @__PURE__ */ a(
+        a === "icon" && /* @__PURE__ */ i("span", { "data-test-id": "asset-input-thumbnail-icon", children: t.icon && u(t.icon, { size: 24 }) }),
+        a === "audio" && /* @__PURE__ */ i(r, { size: 24, "data-test-id": "asset-input-thumbnail-audio" }),
+        a === "default" && /* @__PURE__ */ i(
           "img",
           {
             src: t.src,
@@ -45,8 +44,8 @@ const d = (t, e) => {
     }
   );
 };
-w.displayName = "FondueAssetThumbnail";
+d.displayName = "FondueAssetThumbnail";
 export {
-  w as AssetThumbnail
+  d as AssetThumbnail
 };
 //# sourceMappingURL=AssetThumbnail.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, cloneElement } from 'react';\n\nimport IconMusicNote from '@foundation/Icon/Generated/IconMusicNote';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\n\nimport { type AssetInputProps, AssetInputSize } from './AssetInput';\nimport { type SelectedAssetProps } from './SingleAsset/SelectedAsset';\n\ntype AssetThumbnailProps = {\n    asset: SelectedAssetProps['asset'];\n    size: AssetInputProps['size'];\n    isActive?: boolean;\n    isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n    switch (true) {\n        case size === AssetInputSize.Large:\n            return 'tw-w-full tw-h-32';\n        case isMultiAsset:\n            return 'tw-w-11 tw-h-11';\n        default:\n            return 'tw-w-14 tw-h-full';\n    }\n};\n\nexport const AssetThumbnail = ({\n    asset,\n    size,\n    isActive = false,\n    isMultiAsset = false,\n}: AssetThumbnailProps): ReactElement => {\n    const thumbnailVariant = asset.type === 'icon' || asset.type === 'audio' ? asset.type : 'default';\n\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n                getIconSizeClassNames(size, isMultiAsset),\n                isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n            data-test-id=\"asset-input-thumbnail\"\n        >\n            {thumbnailVariant === 'icon' && (\n                <span data-test-id=\"asset-input-thumbnail-icon\">\n                    {asset.icon && cloneElement(asset.icon, { size: IconSize.Size24 })}\n                </span>\n            )}\n            {thumbnailVariant === 'audio' && (\n                <IconMusicNote size={IconSize.Size24} data-test-id=\"asset-input-thumbnail-audio\" />\n            )}\n            {thumbnailVariant === 'default' && (\n                <img\n                    src={asset.src}\n                    alt={asset.alt || ''}\n                    className=\"tw-max-h-full\"\n                    data-test-id=\"asset-input-thumbnail-image\"\n                />\n            )}\n        </div>\n    );\n};\nAssetThumbnail.displayName = 'FondueAssetThumbnail';\n"],"names":["getIconSizeClassNames","size","isMultiAsset","AssetInputSize","AssetThumbnail","asset","isActive","thumbnailVariant","jsxs","merge","jsx","cloneElement","IconSize","IconMusicNote"],"mappings":";;;;;;AAkBA,MAAMA,IAAwB,CAACC,GAAsBC,MAA0B;AAC3E,UAAQ,IAAA;AAAA,IACJ,KAAKD,MAASE,EAAe;AACzB,aAAO;AAAA,IACX,KAAKD;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEaE,IAAiB,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,UAAAK,IAAW;AAAA,EACX,cAAAJ,IAAe;AACnB,MAAyC;AACrC,QAAMK,IAAmBF,EAAM,SAAS,UAAUA,EAAM,SAAS,UAAUA,EAAM,OAAO;AAExF,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,EAAsBC,GAAMC,CAAY;AAAA,QACxCI,IAAW,yCAAyC;AAAA,MAAA,CACvD;AAAA,MACD,gBAAa;AAAA,MAEZ,UAAA;AAAA,QAAAC,MAAqB,UAClB,gBAAAG,EAAC,QAAA,EAAK,gBAAa,8BACd,UAAAL,EAAM,QAAQM,EAAaN,EAAM,MAAM,EAAE,MAAMO,EAAS,OAAA,CAAQ,GACrE;AAAA,QAEHL,MAAqB,WAClB,gBAAAG,EAACG,GAAA,EAAc,MAAMD,EAAS,QAAQ,gBAAa,+BAA8B;AAAA,QAEpFL,MAAqB,aAClB,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKL,EAAM;AAAA,YACX,KAAKA,EAAM,OAAO;AAAA,YAClB,WAAU;AAAA,YACV,gBAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAD,EAAe,cAAc;"}
+{"version":3,"file":"AssetThumbnail.es.js","sources":["../../../src/components/AssetInput/AssetThumbnail.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconMusicNote } from '@frontify/fondue-icons';\nimport { type ReactElement, cloneElement } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { type AssetInputProps, AssetInputSize } from './AssetInput';\nimport { type SelectedAssetProps } from './SingleAsset/SelectedAsset';\n\ntype AssetThumbnailProps = {\n    asset: SelectedAssetProps['asset'];\n    size: AssetInputProps['size'];\n    isActive?: boolean;\n    isMultiAsset?: boolean;\n};\n\nconst getIconSizeClassNames = (size: AssetInputSize, isMultiAsset: boolean) => {\n    switch (true) {\n        case size === AssetInputSize.Large:\n            return 'tw-w-full tw-h-32';\n        case isMultiAsset:\n            return 'tw-w-11 tw-h-11';\n        default:\n            return 'tw-w-14 tw-h-full';\n    }\n};\n\nexport const AssetThumbnail = ({\n    asset,\n    size,\n    isActive = false,\n    isMultiAsset = false,\n}: AssetThumbnailProps): ReactElement => {\n    const thumbnailVariant = asset.type === 'icon' || asset.type === 'audio' ? asset.type : 'default';\n\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-flex-none tw-items-center tw-justify-center tw-bg-black-5 dark:tw-bg-black-95',\n                getIconSizeClassNames(size, isMultiAsset),\n                isActive ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n            data-test-id=\"asset-input-thumbnail\"\n        >\n            {thumbnailVariant === 'icon' && (\n                <span data-test-id=\"asset-input-thumbnail-icon\">\n                    {asset.icon && cloneElement(asset.icon, { size: 24 })}\n                </span>\n            )}\n            {thumbnailVariant === 'audio' && <IconMusicNote size={24} data-test-id=\"asset-input-thumbnail-audio\" />}\n            {thumbnailVariant === 'default' && (\n                <img\n                    src={asset.src}\n                    alt={asset.alt || ''}\n                    className=\"tw-max-h-full\"\n                    data-test-id=\"asset-input-thumbnail-image\"\n                />\n            )}\n        </div>\n    );\n};\nAssetThumbnail.displayName = 'FondueAssetThumbnail';\n"],"names":["getIconSizeClassNames","size","isMultiAsset","AssetInputSize","AssetThumbnail","asset","isActive","thumbnailVariant","jsxs","merge","jsx","cloneElement","IconMusicNote"],"mappings":";;;;;AAiBA,MAAMA,IAAwB,CAACC,GAAsBC,MAA0B;AAC3E,UAAQ,IAAA;AAAA,IACJ,KAAKD,MAASE,EAAe;AACzB,aAAO;AAAA,IACX,KAAKD;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEaE,IAAiB,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,UAAAK,IAAW;AAAA,EACX,cAAAJ,IAAe;AACnB,MAAyC;AACrC,QAAMK,IAAmBF,EAAM,SAAS,UAAUA,EAAM,SAAS,UAAUA,EAAM,OAAO;AAExF,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAT,EAAsBC,GAAMC,CAAY;AAAA,QACxCI,IAAW,yCAAyC;AAAA,MAAA,CACvD;AAAA,MACD,gBAAa;AAAA,MAEZ,UAAA;AAAA,QAAAC,MAAqB,UAClB,gBAAAG,EAAC,QAAA,EAAK,gBAAa,8BACd,UAAAL,EAAM,QAAQM,EAAaN,EAAM,MAAM,EAAE,MAAM,GAAA,CAAI,GACxD;AAAA,QAEHE,MAAqB,WAAW,gBAAAG,EAACE,KAAc,MAAM,IAAI,gBAAa,+BAA8B;AAAA,QACpGL,MAAqB,aAClB,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKL,EAAM;AAAA,YACX,KAAKA,EAAM,OAAO;AAAA,YAClB,WAAU;AAAA,YACV,gBAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAD,EAAe,cAAc;"}

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

@@ -1,28 +1,27 @@
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { useButton as d } from "@react-aria/button";
-import { useFocusRing as n } from "@react-aria/focus";
-import { mergeProps as w } from "@react-aria/utils";
-import { useRef as b } from "react";
-import u from "../../../foundation/Icon/Generated/IconCaretRight.es.js";
-import { IconSize as f } from "../../../foundation/Icon/IconSize.es.js";
-import { FOCUS_STYLE as p } from "../../../utilities/focusStyle.es.js";
-import { merge as h } from "../../../utilities/merge.es.js";
-import { SelectedAssetsThumbnail as v } from "./SelectedAssetsThumbnail.es.js";
-const j = ({ numberOfLocations: r, assets: o, onClick: l }) => {
-  const s = b(null), { buttonProps: a } = d({ onPress: l }, s), { isFocusVisible: c, focusProps: m } = n(), i = o.length;
+import { IconCaretRight as m } from "@frontify/fondue-icons";
+import { useButton as n } from "@react-aria/button";
+import { useFocusRing as w } from "@react-aria/focus";
+import { mergeProps as b } from "@react-aria/utils";
+import { useRef as u } from "react";
+import { FOCUS_STYLE as f } from "../../../utilities/focusStyle.es.js";
+import { merge as p } from "../../../utilities/merge.es.js";
+import { SelectedAssetsThumbnail as h } from "./SelectedAssetsThumbnail.es.js";
+const S = ({ numberOfLocations: r, assets: s, onClick: l }) => {
+  const o = u(null), { buttonProps: a } = n({ onPress: l }, o), { isFocusVisible: c, focusProps: d } = w(), i = s.length;
   return /* @__PURE__ */ t("div", { "data-test-id": "multi-asset-preview", children: /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       title: "multi-asset-preview",
-      ...w(a, m),
-      ref: s,
-      className: h([
+      ...b(a, d),
+      ref: o,
+      className: p([
         "tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full",
-        c ? `${p} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
+        c ? `${f} tw-border-black-90 dark:tw-border-black-10` : "tw-border-black-20 dark:tw-border-black-80"
       ]),
       children: [
-        /* @__PURE__ */ t(v, { assets: o }),
+        /* @__PURE__ */ t(h, { assets: s }),
         /* @__PURE__ */ e("div", { className: "tw-py-6 tw-px-4 tw-flex", children: [
           /* @__PURE__ */ e("div", { className: "tw-text-left", children: [
             /* @__PURE__ */ e("div", { className: "tw-font-bold tw-text-m", "data-test-id": "assets-amount", children: [
@@ -36,13 +35,13 @@ const j = ({ numberOfLocations: r, assets: o, onClick: l }) => {
               r === 1 ? "location" : "locations"
             ] })
           ] }),
-          /* @__PURE__ */ t("div", { className: "tw-flex tw-items-center tw-text-black-70 tw-pl-4", children: /* @__PURE__ */ t("div", { className: "tw-absolute tw-right-12", children: /* @__PURE__ */ t(u, { size: f.Size24 }) }) })
+          /* @__PURE__ */ t("div", { className: "tw-flex tw-items-center tw-text-black-70 tw-pl-4", children: /* @__PURE__ */ t("div", { className: "tw-absolute tw-right-12", children: /* @__PURE__ */ t(m, { size: 24 }) }) })
         ] })
       ]
     }
   ) });
 };
 export {
-  j as MultiAssetPreview
+  S as MultiAssetPreview
 };
 //# sourceMappingURL=MultiAssetPreview.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport IconCaretRight from '@foundation/Icon/Generated/IconCaretRight';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type AssetType } from '../AssetInput';\n\nimport { SelectedAssetsThumbnail } from './SelectedAssetsThumbnail';\n\nexport type MultiAssetPreviewProps = {\n    numberOfLocations: number;\n    assets: AssetType[];\n    onClick: () => void;\n};\n\n// const FOCUS_STYLE = \"tw-border-black-90 dark:tw-border-black-10\";\n\nexport const MultiAssetPreview = ({ numberOfLocations, assets, onClick }: MultiAssetPreviewProps): ReactElement => {\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const assetsLength = assets.length;\n\n    return (\n        <div data-test-id=\"multi-asset-preview\">\n            <button\n                type=\"button\"\n                title=\"multi-asset-preview\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n                    isFocusVisible\n                        ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                <SelectedAssetsThumbnail assets={assets} />\n\n                <div className=\"tw-py-6 tw-px-4 tw-flex\">\n                    <div className=\"tw-text-left\">\n                        <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n                            {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n                        </div>\n                        <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n                            {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n                        </div>\n                    </div>\n                    <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n                        <div className=\"tw-absolute tw-right-12\">\n                            <IconCaretRight size={IconSize.Size24} />\n                        </div>\n                    </div>\n                </div>\n            </button>\n        </div>\n    );\n};\n"],"names":["MultiAssetPreview","numberOfLocations","assets","onClick","buttonRef","useRef","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","assetsLength","jsx","jsxs","mergeProps","merge","FOCUS_STYLE","SelectedAssetsThumbnail","IconCaretRight","IconSize"],"mappings":";;;;;;;;;;AAwBO,MAAMA,IAAoB,CAAC,EAAE,mBAAAC,GAAmB,QAAAC,GAAQ,SAAAC,QAAoD;AAC/G,QAAMC,IAAYC,EAAiC,IAAI,GACjD,EAAE,aAAAC,MAAgBC,EAAU,EAAE,SAASJ,EAAA,GAAWC,CAAS,GAC3D,EAAE,gBAAAI,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAeT,EAAO;AAE5B,SACI,gBAAAU,EAAC,OAAA,EAAI,gBAAa,uBACd,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAM;AAAA,MACL,GAAGC,EAAWR,GAAaG,CAAU;AAAA,MACtC,KAAKL;AAAA,MACL,WAAWW,EAAM;AAAA,QACb;AAAA,QACAP,IACM,GAAGQ,CAAW,gDACd;AAAA,MAAA,CACT;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAJ,EAACK,KAAwB,QAAAf,GAAgB;AAAA,QAEzC,gBAAAW,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BAAyB,gBAAa,iBAChD,UAAA;AAAA,cAAAF;AAAA,cAAa;AAAA,cAAEA,MAAiB,IAAI,UAAU;AAAA,YAAA,GACnD;AAAA,YACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sCAAqC,gBAAa,uBAC5D,UAAA;AAAA,cAAAZ;AAAA,cAAkB;AAAA,cAAEA,MAAsB,IAAI,aAAa;AAAA,YAAA,EAAA,CAChE;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAW,EAAC,OAAA,EAAI,WAAU,oDACX,4BAAC,OAAA,EAAI,WAAU,2BACX,UAAA,gBAAAA,EAACM,GAAA,EAAe,MAAMC,EAAS,OAAA,CAAQ,GAC3C,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"MultiAssetPreview.es.js","sources":["../../../../src/components/AssetInput/MultiAssetPreview/MultiAssetPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type AssetType } from '../AssetInput';\n\nimport { SelectedAssetsThumbnail } from './SelectedAssetsThumbnail';\n\nexport type MultiAssetPreviewProps = {\n    numberOfLocations: number;\n    assets: AssetType[];\n    onClick: () => void;\n};\n\nexport const MultiAssetPreview = ({ numberOfLocations, assets, onClick }: MultiAssetPreviewProps): ReactElement => {\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps } = useButton({ onPress: onClick }, buttonRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const assetsLength = assets.length;\n\n    return (\n        <div data-test-id=\"multi-asset-preview\">\n            <button\n                type=\"button\"\n                title=\"multi-asset-preview\"\n                {...mergeProps(buttonProps, focusProps)}\n                ref={buttonRef}\n                className={merge([\n                    'tw-flex tw-border tw-rounded hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none dark:tw-text-white tw-mb-4 tw-w-full',\n                    isFocusVisible\n                        ? `${FOCUS_STYLE} tw-border-black-90 dark:tw-border-black-10`\n                        : 'tw-border-black-20 dark:tw-border-black-80',\n                ])}\n            >\n                <SelectedAssetsThumbnail assets={assets} />\n\n                <div className=\"tw-py-6 tw-px-4 tw-flex\">\n                    <div className=\"tw-text-left\">\n                        <div className=\"tw-font-bold tw-text-m\" data-test-id=\"assets-amount\">\n                            {assetsLength} {assetsLength === 1 ? 'Asset' : 'Assets'}\n                        </div>\n                        <div className=\"tw-text-black-60 tw-text-s tw-mt-1\" data-test-id=\"number-of-locations\">\n                            {numberOfLocations} {numberOfLocations === 1 ? 'location' : 'locations'}\n                        </div>\n                    </div>\n                    <div className=\"tw-flex tw-items-center tw-text-black-70 tw-pl-4\">\n                        <div className=\"tw-absolute tw-right-12\">\n                            <IconCaretRight size={24} />\n                        </div>\n                    </div>\n                </div>\n            </button>\n        </div>\n    );\n};\n"],"names":["MultiAssetPreview","numberOfLocations","assets","onClick","buttonRef","useRef","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","assetsLength","jsx","jsxs","mergeProps","merge","FOCUS_STYLE","SelectedAssetsThumbnail","IconCaretRight"],"mappings":";;;;;;;;;AAqBO,MAAMA,IAAoB,CAAC,EAAE,mBAAAC,GAAmB,QAAAC,GAAQ,SAAAC,QAAoD;AAC/G,QAAMC,IAAYC,EAAiC,IAAI,GACjD,EAAE,aAAAC,MAAgBC,EAAU,EAAE,SAASJ,EAAA,GAAWC,CAAS,GAC3D,EAAE,gBAAAI,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAeT,EAAO;AAE5B,SACI,gBAAAU,EAAC,OAAA,EAAI,gBAAa,uBACd,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAM;AAAA,MACL,GAAGC,EAAWR,GAAaG,CAAU;AAAA,MACtC,KAAKL;AAAA,MACL,WAAWW,EAAM;AAAA,QACb;AAAA,QACAP,IACM,GAAGQ,CAAW,gDACd;AAAA,MAAA,CACT;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAJ,EAACK,KAAwB,QAAAf,GAAgB;AAAA,QAEzC,gBAAAW,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BAAyB,gBAAa,iBAChD,UAAA;AAAA,cAAAF;AAAA,cAAa;AAAA,cAAEA,MAAiB,IAAI,UAAU;AAAA,YAAA,GACnD;AAAA,YACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sCAAqC,gBAAa,uBAC5D,UAAA;AAAA,cAAAZ;AAAA,cAAkB;AAAA,cAAEA,MAAsB,IAAI,aAAa;AAAA,YAAA,EAAA,CAChE;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAW,EAAC,OAAA,EAAI,WAAU,oDACX,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA,gBAAAA,EAACM,GAAA,EAAe,MAAM,GAAA,CAAI,GAC9B,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

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

@@ -1,19 +1,18 @@
 import { jsxs as r, jsx as l, Fragment as c } from "react/jsx-runtime";
-import a from "../../../foundation/Icon/Generated/IconArrowCircleUp.es.js";
-import m from "../../../foundation/Icon/Generated/IconImageStack.es.js";
+import { IconImageStack as a, IconArrowCircleUp as m } from "@frontify/fondue-icons";
 const d = ({
   asset: e,
   isLoading: t = !1,
-  hideSize: o = !1,
-  hideExtension: w = !1
+  hideSize: w = !1,
+  hideExtension: o = !1
 }) => {
   let n = t ? "Uploading" : "Uploaded";
   return (e == null ? void 0 : e.source) === "library" && (n = e.sourceName), /* @__PURE__ */ r("span", { className: "tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden", children: [
-    /* @__PURE__ */ l("div", { className: "tw-flex-none tw-inline-flex tw-items-center tw-justify-center", children: (e == null ? void 0 : e.source) === "library" ? /* @__PURE__ */ l(m, {}) : /* @__PURE__ */ l(a, {}) }),
+    /* @__PURE__ */ l("div", { className: "tw-flex-none tw-inline-flex tw-items-center tw-justify-center", children: (e == null ? void 0 : e.source) === "library" ? /* @__PURE__ */ l(a, {}) : /* @__PURE__ */ l(m, {}) }),
     n && /* @__PURE__ */ l("span", { className: "tw-whitespace-nowrap", children: n }),
     e && !t && /* @__PURE__ */ r(c, { children: [
-      /* @__PURE__ */ l(i, { label: e.extension, hide: w }),
-      /* @__PURE__ */ l(i, { label: e.size, hide: o })
+      /* @__PURE__ */ l(i, { label: e.extension, hide: o }),
+      /* @__PURE__ */ l(i, { label: e.size, hide: w })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nimport IconArrowCircleUp from '@foundation/Icon/Generated/IconArrowCircleUp';\nimport IconImageStack from '@foundation/Icon/Generated/IconImageStack';\n\nimport { type AssetInputProps } from '../AssetInput';\n\nimport { type SelectedAssetProps } from './SelectedAsset';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading' | 'hideSize' | 'hideExtension'> &\n    Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline = ({\n    asset,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n}: AssetSublineProps): ReactElement => {\n    let title = isLoading ? 'Uploading' : 'Uploaded';\n    if (asset?.source === 'library') {\n        title = asset.sourceName;\n    }\n\n    return (\n        <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n            <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n                {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n            </div>\n            {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n            {asset && !isLoading && (\n                <>\n                    <FileInfo label={asset.extension} hide={hideExtension} />\n                    <FileInfo label={asset.size} hide={hideSize} />\n                </>\n            )}\n        </span>\n    );\n};\nAssetSubline.displayName = 'FondueAssetSubline';\n\nconst FileInfo = ({ label, hide }: { label?: string | number; hide: boolean }): Nullable<ReactElement> => {\n    if (hide || !label) {\n        return null;\n    }\n\n    return (\n        <>\n            <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n            <span className=\"tw-whitespace-nowrap\">{label}</span>\n        </>\n    );\n};\nFileInfo.displayName = 'FondueFileInfo';\n"],"names":["AssetSubline","asset","isLoading","hideSize","hideExtension","title","jsxs","jsx","IconImageStack","IconArrowCircleUp","Fragment","FileInfo","label","hide"],"mappings":";;;AAcO,MAAMA,IAAe,CAAC;AAAA,EACzB,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AACpB,MAAuC;AACnC,MAAIC,IAAQH,IAAY,cAAc;AACtC,UAAID,KAAA,gBAAAA,EAAO,YAAW,cAClBI,IAAQJ,EAAM,aAId,gBAAAK,EAAC,QAAA,EAAK,WAAU,8GACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iEACV,WAAAN,KAAA,gBAAAA,EAAO,YAAW,YAAY,gBAAAM,EAACC,GAAA,EAAe,IAAK,gBAAAD,EAACE,GAAA,CAAA,CAAkB,GAC3E;AAAA,IACCJ,KAAS,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAF,GAAM;AAAA,IACvDJ,KAAS,CAACC,KACP,gBAAAI,EAAAI,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAS,OAAOV,EAAM,WAAW,MAAMG,GAAe;AAAA,wBACtDO,GAAA,EAAS,OAAOV,EAAM,MAAM,MAAME,EAAA,CAAU;AAAA,IAAA,EAAA,CACjD;AAAA,EAAA,GAER;AAER;AACAH,EAAa,cAAc;AAE3B,MAAMW,IAAW,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACnBA,KAAQ,CAACD,IACF,OAIP,gBAAAN,EAAAI,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAH,EAAC,QAAA,EAAK,WAAU,6DAA4D,UAAA,KAAC;AAAA,EAC7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAK,EAAA,CAAM;AAAA,GAClD;AAGRD,EAAS,cAAc;"}
+{"version":3,"file":"AssetSubline.es.js","sources":["../../../../src/components/AssetInput/SingleAsset/AssetSubline.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowCircleUp, IconImageStack } from '@frontify/fondue-icons';\nimport { type ReactElement } from 'react';\n\nimport { type AssetInputProps } from '../AssetInput';\n\nimport { type SelectedAssetProps } from './SelectedAsset';\n\ntype AssetSublineProps = Pick<AssetInputProps, 'isLoading' | 'hideSize' | 'hideExtension'> &\n    Pick<SelectedAssetProps, 'asset'>;\n\nexport const AssetSubline = ({\n    asset,\n    isLoading = false,\n    hideSize = false,\n    hideExtension = false,\n}: AssetSublineProps): ReactElement => {\n    let title = isLoading ? 'Uploading' : 'Uploaded';\n    if (asset?.source === 'library') {\n        title = asset.sourceName;\n    }\n\n    return (\n        <span className=\"tw-max-w-full tw-flex tw-flex-row tw-items-center tw-gap-1 tw-text-black-80 tw-text-xxs tw-overflow-hidden\">\n            <div className=\"tw-flex-none tw-inline-flex tw-items-center tw-justify-center\">\n                {asset?.source === 'library' ? <IconImageStack /> : <IconArrowCircleUp />}\n            </div>\n            {title && <span className=\"tw-whitespace-nowrap\">{title}</span>}\n            {asset && !isLoading && (\n                <>\n                    <FileInfo label={asset.extension} hide={hideExtension} />\n                    <FileInfo label={asset.size} hide={hideSize} />\n                </>\n            )}\n        </span>\n    );\n};\nAssetSubline.displayName = 'FondueAssetSubline';\n\nconst FileInfo = ({ label, hide }: { label?: string | number; hide: boolean }): Nullable<ReactElement> => {\n    if (hide || !label) {\n        return null;\n    }\n\n    return (\n        <>\n            <span className=\"tw-text-m tw-text-black-20 tw-h-4 tw-flex tw-items-center\">•</span>\n            <span className=\"tw-whitespace-nowrap\">{label}</span>\n        </>\n    );\n};\nFileInfo.displayName = 'FondueFileInfo';\n"],"names":["AssetSubline","asset","isLoading","hideSize","hideExtension","title","jsxs","jsx","IconImageStack","IconArrowCircleUp","Fragment","FileInfo","label","hide"],"mappings":";;AAYO,MAAMA,IAAe,CAAC;AAAA,EACzB,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AACpB,MAAuC;AACnC,MAAIC,IAAQH,IAAY,cAAc;AACtC,UAAID,KAAA,gBAAAA,EAAO,YAAW,cAClBI,IAAQJ,EAAM,aAId,gBAAAK,EAAC,QAAA,EAAK,WAAU,8GACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iEACV,WAAAN,KAAA,gBAAAA,EAAO,YAAW,YAAY,gBAAAM,EAACC,GAAA,EAAe,IAAK,gBAAAD,EAACE,GAAA,CAAA,CAAkB,GAC3E;AAAA,IACCJ,KAAS,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAF,GAAM;AAAA,IACvDJ,KAAS,CAACC,KACP,gBAAAI,EAAAI,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAS,OAAOV,EAAM,WAAW,MAAMG,GAAe;AAAA,wBACtDO,GAAA,EAAS,OAAOV,EAAM,MAAM,MAAME,EAAA,CAAU;AAAA,IAAA,EAAA,CACjD;AAAA,EAAA,GAER;AAER;AACAH,EAAa,cAAc;AAE3B,MAAMW,IAAW,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACnBA,KAAQ,CAACD,IACF,OAIP,gBAAAN,EAAAI,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAH,EAAC,QAAA,EAAK,WAAU,6DAA4D,UAAA,KAAC;AAAA,EAC7E,gBAAAA,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAK,EAAA,CAAM;AAAA,GAClD;AAGRD,EAAS,cAAc;"}