@bynder/compact-view 5.2.0 → 5.2.2

package/FileSelector.js

@@ -1,13 +1,14 @@
-import { jsxs as u, jsx as r, Fragment as B } from "react/jsx-runtime";
-import { useState as $, useRef as U, useEffect as A } from "react";
-import d from "styled-components";
-import { IconAspectRatioOutline as E, IconImage as R, IconCrop as j } from "@bynder/icons";
-import { token as o, Badge as P } from "@bynder/design-system";
+import { jsxs as p, jsx as n, Fragment as B } from "react/jsx-runtime";
+import { useState as k, useRef as U, useEffect as I } from "react";
+import a from "./styled-components.browser.esm.js";
+import { IconCrop as E, IconAspectRatioOutline as R, IconImage as j } from "./index4.js";
+import { Badge as N } from "./Badge.js";
+import { token as o } from "./token.js";
 import "./AssetCard.js";
 import "./AssetList.js";
-import "./Chip.js";
+import "./Chip2.js";
 import { Dropdown as V } from "./Dropdown.js";
-import { DropdownListItem as L } from "./DropdownListItem.js";
+import { DropdownListItem as $ } from "./DropdownListItem.js";
 import "./MetapropertyFilterContent.js";
 import "./MetapropertyOption.js";
 import "./SmartFilterContent.js";
@@ -17,7 +18,7 @@ import "./Modal.js";
 import "./NoResults.js";
 import "./Oops.js";
 import "./ShadowRoot.js";
-import { Skeleton as N } from "./Skeleton.js";
+import { Skeleton as P } from "./Skeleton.js";
 import "./Spinner.js";
 import { useConfig as Y } from "./ConfigContext.js";
 import { DropdownContent as H } from "./DropdownContent.js";
@@ -25,198 +26,183 @@ import { logger as M } from "./logger.js";
 import { useAuth as q } from "./LoginContext.js";
 import { isErr as G, isOk as J, ok as Q, err as W } from "./result.type.js";
 import { getAsset as X } from "./getAsset.js";
-import { getDefaultKey as Z, getUrlExtension as tt, splitByCamelCase as v, getHumanReadableFileSize as et } from "./utils2.js";
-import { normalizeFilesResponse as it } from "./normalizeResponse.js";
+import { getDefaultKey as Z, getUrlExtension as ee, splitByCamelCase as T, getHumanReadableFileSize as te } from "./utils3.js";
+import { normalizeFilesResponse as ie } from "./normalizeResponse.js";
 import "./Dat.js";
-import { DatDropdownItem as nt } from "./DatDropdownItem.js";
-import { convertAssetIdToBase64 as rt } from "./base64Converter.js";
-import { useDat as ot } from "./useDatStore.js";
-import { useSimilaritySearchStore as st } from "./useSimilaritySearchStore.js";
-async function at(s) {
-  const { asset: l, auth: e, assetFieldSelection: a, noCache: h, isSimilaritySelected: c } = s, m = await X({
-    assetId: c ? rt(l.id) : l.id,
-    auth: e,
-    assetFieldSelection: a,
-    noCache: h
+import { DatDropdownItem as re } from "./DatDropdownItem.js";
+import { convertAssetIdToBase64 as ne } from "./base64Converter.js";
+import { useDat as oe } from "./useDatStore.js";
+import { useSimilaritySearchStore as se } from "./useSimilaritySearchStore.js";
+async function ae(s) {
+  const { asset: m, auth: i, assetFieldSelection: f, noCache: v, isSimilaritySelected: u } = s, d = await X({
+    assetId: u ? ne(m.id) : m.id,
+    auth: i,
+    assetFieldSelection: f,
+    noCache: v
   });
-  if (J(m) && m.value.files) {
-    const S = it(m.value.files), y = m.value.streamingLinks;
-    return Q({ files: S, databaseId: m.value.databaseId || "", streamingLinks: y });
+  if (J(d) && d.value.files) {
+    const w = ie(d.value.files), S = d.value.streamingLinks;
+    return Q({ files: w, databaseId: d.value.databaseId || "", streamingLinks: S });
   }
   return W("Error retrieving asset files");
 }
-const b = "Custom transformation", f = "adaptiveVideo";
-function Zt({ asset: s, onChange: l }) {
-  const [e, a] = $({ status: "Loading" }), [h, c] = $(!1), m = U(null), S = q(), { isSelected: y, NLSSearchText: O, isNLSSelected: _ } = st(), {
-    assetFieldSelection: T,
-    noCache: z,
-    defaultImageDerivativeName: x,
-    defaultVideoDerivativeName: C,
-    __shouldAddOriginal__: F
-  } = Y(), { transformation: w } = ot();
-  A(() => {
-    if (w?.url && e.status === "Data") {
-      const i = w.url !== e.files?.transformBaseUrl?.url;
-      D(i ? b : "transformBaseUrl");
+const A = "Custom transformation", c = "adaptiveVideo";
+function et({ asset: s, onChange: m }) {
+  const [i, f] = k({ status: "Loading" }), [v, u] = k(!1), d = U(null), w = q(), { isSelected: S, NLSSearchText: O, isNLSSelected: z } = se(), {
+    assetFieldSelection: b,
+    noCache: F,
+    defaultImageDerivativeName: D,
+    defaultVideoDerivativeName: x,
+    __shouldAddOriginal__: K
+  } = Y(), { transformation: h } = oe();
+  I(() => {
+    if (h?.url && i.status === "Data") {
+      const t = h.url !== i.files?.transformBaseUrl?.url;
+      y(t ? A : "transformBaseUrl");
     }
-  }, [w]), A(() => {
-    e.status === "Data" && e.key !== f && c(!1);
-  }, [e]), A(() => {
-    s.id && (a({ status: "Loading" }), l(void 0), at({
+  }, [h]), I(() => {
+    i.status === "Data" && i.key !== c && u(!1);
+  }, [i]), I(() => {
+    s.id && (f({ status: "Loading" }), m(void 0), ae({
       asset: s,
-      auth: S,
-      assetFieldSelection: T,
-      noCache: z,
-      isSimilaritySelected: y || !!O && _
-    }).then((i) => {
-      if (G(i)) {
-        M.error(i.error), a({ status: "Failure" });
+      auth: w,
+      assetFieldSelection: b,
+      noCache: F,
+      isSimilaritySelected: S || !!O && z
+    }).then((t) => {
+      if (G(t)) {
+        M.error(t.error), f({ status: "Failure" });
         return;
       }
-      const { files: n, streamingLinks: t } = i.value;
-      F && !("original" in n) && (n.original = {
-        url: i.value.databaseId,
+      const { files: r, streamingLinks: e } = t.value;
+      K && !("original" in r) && (r.original = {
+        url: t.value.databaseId,
         isFakeOriginal: !0
-      }), t && Object.keys(t).length > 0 && (n[f] = {
+      }), e && Object.keys(e).length > 0 && (r[c] = {
         url: "Adaptive video"
       });
-      const p = Z(n), g = Object.keys(t || {})[0];
-      a({
+      let l = Z(r);
+      s.__typename === "Image" && D && D in r ? l = D : s.__typename === "Video" && x && x in r && (l = x);
+      const g = Object.keys(e || {})[0];
+      f({
         status: "Data",
-        files: n,
-        key: p,
-        streamingLinks: t,
+        files: r,
+        key: l,
+        streamingLinks: e,
         selectedAdaptiveKey: g
-      }), l(p === f && t ? { url: t[g] } : n[p]);
+      }), m(l === c && e ? { url: e[g] } : r[l]);
     }));
-  }, [s.id, S, T]);
-  function D(i, n) {
-    a((t) => {
-      if (t.status !== "Data")
-        return t;
-      const I = { ...t, key: i };
-      let p;
-      if (i === b && w)
-        p = { url: w.url };
-      else if (i === f) {
-        const g = n || t.selectedAdaptiveKey;
-        g && t.streamingLinks && (p = { url: t.streamingLinks[g] }, I.selectedAdaptiveKey = g, c(!n));
+  }, [s.id, w, b]);
+  function y(t, r) {
+    f((e) => {
+      if (e.status !== "Data")
+        return e;
+      const C = { ...e, key: t };
+      let l;
+      if (t === A && h)
+        l = { url: h.url };
+      else if (t === c) {
+        const g = r || e.selectedAdaptiveKey;
+        g && e.streamingLinks && (l = { url: e.streamingLinks[g] }, C.selectedAdaptiveKey = g, u(!r));
       } else
-        p = t.files[i];
-      return setTimeout(() => l(p)), I;
+        l = e.files[t];
+      return setTimeout(() => m(l)), C;
     });
   }
-  const K = (i) => {
-    if (e.status === "Data")
-      return s.__typename === "Image" && x && x in s.files ? x === i : s.__typename === "Video" && C && C in s.files ? C === i : e.key === i;
+  const _ = (t) => {
+    if (i.status === "Data")
+      return i.key === t;
   };
-  return /* @__PURE__ */ u(dt, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ p(de, { children: [
+    /* @__PURE__ */ n(
       V,
       {
-        title: /* @__PURE__ */ r(
-          lt,
-          {
-            assetFileType: s.__typename,
-            defaultImageDerivativeName: x,
-            defaultVideoDerivativeName: C,
-            state: e
-          }
-        ),
+        title: /* @__PURE__ */ n(le, { state: i }),
         buttonKind: "secondary",
         isPaddingContent: !0,
         direction: "Up",
-        disabled: e.status === "Loading",
-        children: (i) => e.status === "Data" && /* @__PURE__ */ u(k, { children: [
-          Object.entries(e.files).map(([n, t]) => /* @__PURE__ */ u(
-            L,
+        disabled: i.status === "Loading",
+        children: (t) => i.status === "Data" && /* @__PURE__ */ p(L, { children: [
+          Object.entries(i.files).map(([r, e]) => /* @__PURE__ */ p(
+            $,
             {
-              selected: K(n),
+              selected: _(r),
               onClick: () => {
-                D(n), n !== f && i();
+                y(r), r !== c && t();
               },
               children: [
-                /* @__PURE__ */ r(mt, { "data-testid": "file-extension", children: n === "transformBaseUrl" ? /* @__PURE__ */ r(pt, {}) : tt(t.url) ?? /* @__PURE__ */ r(ft, {}) }),
-                /* @__PURE__ */ u(ut, { children: [
-                  /* @__PURE__ */ u(gt, { children: [
-                    v(n),
-                    n === f && e.selectedAdaptiveKey && /* @__PURE__ */ r(wt, { children: /* @__PURE__ */ r(P, { isSmall: !0, color: "black-alpha", children: e.selectedAdaptiveKey.toUpperCase() }) })
+                /* @__PURE__ */ n(me, { "data-testid": "file-extension", children: r === "transformBaseUrl" ? /* @__PURE__ */ n(pe, {}) : ee(e.url) ?? /* @__PURE__ */ n(fe, {}) }),
+                /* @__PURE__ */ p(ue, { children: [
+                  /* @__PURE__ */ p(ge, { children: [
+                    T(r),
+                    r === c && i.selectedAdaptiveKey && /* @__PURE__ */ n(we, { children: /* @__PURE__ */ n(N, { isSmall: !0, color: "black-alpha", children: i.selectedAdaptiveKey.toUpperCase() }) })
                   ] }),
-                  /* @__PURE__ */ u(ht, { children: [
-                    t.width && t.height && `${t.width} x ${t.height} px`,
-                    t.width && t.height && t.fileSize && /* @__PURE__ */ r("span", { children: "•" }),
-                    t.fileSize && et(t.fileSize)
+                  /* @__PURE__ */ p(he, { children: [
+                    e.width && e.height && `${e.width} x ${e.height} px`,
+                    e.width && e.height && e.fileSize && /* @__PURE__ */ n("span", { children: "•" }),
+                    e.fileSize && te(e.fileSize)
                   ] })
                 ] })
               ]
             },
-            n
+            r
           )),
-          /* @__PURE__ */ r(
-            nt,
+          /* @__PURE__ */ n(
+            re,
             {
-              transformBaseUrl: e.files?.transformBaseUrl?.url,
-              toggleDropdown: i,
+              transformBaseUrl: i.files?.transformBaseUrl?.url,
+              toggleDropdown: t,
               asset: s
             }
           )
         ] })
       }
     ),
-    e.status === "Data" && e.key === f && /* @__PURE__ */ r(St, { ref: m, children: h && /* @__PURE__ */ r(
+    i.status === "Data" && i.key === c && /* @__PURE__ */ n(ve, { ref: d, children: v && /* @__PURE__ */ n(
       H,
       {
         isPaddingContent: !0,
-        onClickOutside: () => c(!1),
+        onClickOutside: () => u(!1),
         direction: "Up",
-        target: m,
+        target: d,
         "data-testid": "streaming-links-dropdown",
         id: "streaming-links-dropdown",
-        children: /* @__PURE__ */ r(k, { children: Object.keys(e.streamingLinks || {}).map((i) => /* @__PURE__ */ r(
-          L,
+        children: /* @__PURE__ */ n(L, { children: Object.keys(i.streamingLinks || {}).map((t) => /* @__PURE__ */ n(
+          $,
           {
-            selected: e.selectedAdaptiveKey === i,
-            onClick: () => D(f, i),
-            children: i.toUpperCase()
+            selected: i.selectedAdaptiveKey === t,
+            onClick: () => y(c, t),
+            children: t.toUpperCase()
           },
-          i
+          t
         )) })
       }
     ) })
   ] });
 }
-function lt({
-  assetFileType: s,
-  defaultImageDerivativeName: l,
-  defaultVideoDerivativeName: e,
-  state: a
-}) {
-  const h = (c) => {
-    if (a.status === "Data")
-      return s === "Image" && l && l in a.files ? v(l) : s === "Video" && e && e in a.files ? v(e) : v(c);
-  };
-  return a.status === "Loading" ? /* @__PURE__ */ r(N, { width: 50 }) : a.status === "Data" ? /* @__PURE__ */ u(ct, { children: [
-    a.key === b && /* @__PURE__ */ r(j, {}),
-    h(a.key)
-  ] }) : /* @__PURE__ */ r(B, { children: "Error" });
+function le({ state: s }) {
+  return s.status === "Loading" ? /* @__PURE__ */ n(P, { width: 50 }) : s.status === "Data" ? /* @__PURE__ */ p(ce, { children: [
+    s.key === A && /* @__PURE__ */ n(E, {}),
+    T(s.key)
+  ] }) : /* @__PURE__ */ n(B, { children: "Error" });
 }
-const dt = d.div`
+const de = a.div`
 	display: flex;
 	gap: ${o.spacing2};
 	margin-right: ${o.spacing3};
 	text-transform: capitalize;
 	position: relative;
-`, ct = d.div`
+`, ce = a.div`
 	display: flex;
 	gap: ${o.spacing4};
 	align-items: center;
-`, k = d.ul`
+`, L = a.ul`
 	max-height: 400px;
 	overflow-y: auto;
 	padding: 0 0 ${o.spacing3} 0;
 	list-style: none;
 	margin: 0;
-`, mt = d.div`
+`, me = a.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -229,38 +215,37 @@ const dt = d.div`
 	border-radius: 5px;
 	background-color: rgba(0, 34, 51, 0.05);
 	margin-right: ${o.spacing4};
-`, pt = d(E)`
+`, pe = a(R)`
 	height: ${o.spacing6};
 	width: ${o.spacing6};
-`, ft = d(R)`
+`, fe = a(j)`
 	height: ${o.spacing6};
 	width: ${o.spacing6};
-`, ut = d.div`
+`, ue = a.div`
 	flex-grow: 1;
 	width: 160px;
-`, gt = d.div`
+`, ge = a.div`
 	text-transform: capitalize;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	color: rgba(0, 34, 51, 0.8);
-`, ht = d.div`
+`, he = a.div`
 	font-size: ${o.fontSize75};
 
 	& > span {
 		margin: 0 ${o.spacing3};
 	}
-`, wt = d.span`
+`, we = a.span`
 	margin-left: ${o.spacing2};
 	display: inline-flex;
 	vertical-align: middle;
-`, St = d.div`
+`, ve = a.div`
 	position: absolute;
 	left: -280px;
 	top: 0;
 	z-index: 1000;
 `;
 export {
-  Zt as FileSelector
+  et as FileSelector
 };
-//# sourceMappingURL=FileSelector.js.map

package/Flex.js

@@ -0,0 +1,21 @@
+import { jsx as d } from "react/jsx-runtime";
+import l from "./styled-components.browser.esm.js";
+import { token as p } from "./token.js";
+function m({
+  children: t,
+  direction: i = "row",
+  wrap: e = "nowrap",
+  justifyContent: o = "flex-start",
+  alignItems: n = "stretch",
+  gap: r,
+  ...a
+}) {
+  return /* @__PURE__ */ d(s, { $direction: i, $wrap: e, $justifyContent: o, $alignItems: n, $gap: r, ...a, children: t });
+}
+const s = l.div.withConfig({
+  displayName: "FlexStyled",
+  componentId: "sc-1qk7dea-0"
+})(["display:flex;flex-direction:", ";flex-wrap:", ";gap:", ";justify-content:", ";align-items:", ";box-sizing:border-box;width:100%;height:100%;"], (t) => t.$direction, (t) => t.$wrap, (t) => t.$gap ? p[`spacing${t.$gap}`] : void 0, (t) => t.$justifyContent, (t) => t.$alignItems);
+export {
+  m as Flex
+};

package/FontPicker.js

@@ -0,0 +1,104 @@
+import { jsxs as d, Fragment as z, jsx as l } from "react/jsx-runtime";
+import { useId as L, useState as A, useMemo as H, useEffect as v, useCallback as x } from "react";
+import { produce as J } from "./immer.js";
+import { useTranslate as K, Translate as u } from "./index6.js";
+import { Form as b } from "./Form.js";
+import { Select as i } from "./Select.js";
+import { useFonts as O } from "./useFonts.js";
+function Z({
+  familyLabel: C,
+  subfamilyLabel: w,
+  initialFamilyId: M,
+  initialSubfamilyId: j,
+  hideSubfamily: D = !1,
+  onSelectFamily: h,
+  onSelectSubfamily: p,
+  filterOutItalics: G = !1
+}) {
+  const { translate: o } = K(), y = L(), k = L(), N = o("fontmanager.picker.default-family-label"), _ = o("fontmanager.picker.default-subfamily-label"), [g, S] = A(""), {
+    portal: s,
+    global: c,
+    selectedFamily: a,
+    selectedSubfamily: r,
+    setSelectedFamily: T,
+    setSelectedSubfamily: f,
+    searchFonts: F
+  } = O({ initialFamilyId: M, initialSubfamilyId: j, filterOutItalics: G }), I = H(() => new Map(s.concat(c).map((e) => [e.id, e])), [s, c]);
+  v(() => {
+    F(g);
+  }, [g, F]), v(() => {
+    h && a && h(a);
+  }, [a, h]), v(() => {
+    p && r && p(r);
+  }, [r, p]);
+  const B = x(
+    (e) => {
+      var n, t;
+      const m = I.get(e);
+      m && (T(m), (n = m.subfamilies) != null && n[0] && f((t = m.subfamilies) == null ? void 0 : t[0]));
+    },
+    [I, T, f]
+  ), E = x(
+    (e) => {
+      const n = a?.subfamilies.find((t) => t.id === e);
+      n && f(n);
+    },
+    [a, f]
+  );
+  function P() {
+    S("");
+  }
+  const q = J(a?.subfamilies || [], (e) => {
+    e.sort((n, t) => Number(n.weight) - Number(t.weight));
+  });
+  return /* @__PURE__ */ d(z, { children: [
+    /* @__PURE__ */ d(b.Group, { children: [
+      /* @__PURE__ */ l(b.Label, { id: y, children: C ?? N }),
+      /* @__PURE__ */ d(
+        i,
+        {
+          "aria-labelledby": y,
+          label: a?.name,
+          onChange: B,
+          value: a?.id || "",
+          children: [
+            /* @__PURE__ */ l(
+              i.SearchInput,
+              {
+                value: g,
+                onChange: S,
+                onBlur: P,
+                placeholder: o("fontmanager.picker.fonts.placeholder-search"),
+                "aria-label": o("fontmanager.picker.fonts.aria-label-search")
+              }
+            ),
+            /* @__PURE__ */ l(i.SectionTitle, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.uploaded-fonts" }) }),
+            s.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e)),
+            s.length === 0 && /* @__PURE__ */ l(i.Text, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.no-fonts" }) }),
+            /* @__PURE__ */ l(i.Divider, {}),
+            /* @__PURE__ */ l(i.SectionTitle, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.available-fonts" }) }),
+            c.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e)),
+            c.length === 0 && /* @__PURE__ */ l(i.Text, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.no-fonts" }) })
+          ]
+        }
+      )
+    ] }),
+    !D && /* @__PURE__ */ d(b.Group, { children: [
+      /* @__PURE__ */ l(b.Label, { id: k, children: w ?? _ }),
+      /* @__PURE__ */ l(
+        i,
+        {
+          "aria-labelledby": k,
+          label: r?.name,
+          onChange: E,
+          value: r?.id || "",
+          isDisabled: a?.subfamilies.length === 0,
+          children: q.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e))
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Z as FontPicker
+};

package/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+function m({
+  children: r,
+  ...i
+}) {
+  return /* @__PURE__ */ t(a, { ...i, children: r });
+}
+const a = n.div.withConfig({
+  displayName: "FooterContainer",
+  componentId: "sc-109ca6m-0"
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(40%,1fr));gap:", ";box-sizing:border-box;padding:", " ", ";border-top:1px solid ", ";background-color:", ";"], o.spacing4, o.spacing5, o.spacing6, o.gray100a, o.white);
+export {
+  m as Footer
+};

package/Form.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconError as e } from "./index4.js";
+import { Group as f } from "./Group.js";
+import { HelperText as i } from "./HelperText.js";
+import { Label as n } from "./Label.js";
+import { Row as u } from "./Row.js";
+import { InputRow as l } from "./InputRow.js";
+function r({
+  children: o,
+  onSubmit: m,
+  ...p
+}) {
+  return /* @__PURE__ */ t("form", { onSubmit: m, ...p, children: o });
+}
+r.Group = f;
+r.HelperText = i;
+r.Label = n;
+r.Row = u;
+r.InputRow = l;
+r.IconError = e;
+export {
+  r as Form
+};

package/FormData.js

@@ -0,0 +1,4 @@
+const a = typeof FormData < "u" ? FormData : null;
+export {
+  a as default
+};

package/Frame.js

@@ -0,0 +1,64 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import o, { css as d } from "./styled-components.browser.esm.js";
+import { Badge as m } from "./Badge.js";
+import { token as r } from "./token.js";
+import { useCardContext as g } from "./context.js";
+function S({
+  children: e,
+  progressBar: n,
+  badge: t,
+  icon: c,
+  isCheckeredBackground: p = !1,
+  height: s = "fixed",
+  ...h
+}) {
+  const {
+    variant: l,
+    isSelected: f
+  } = g();
+  return /* @__PURE__ */ a(v, { $isCheckeredBackground: p, $height: s, ...h, children: [
+    l === "clean" && f && /* @__PURE__ */ i(b, {}),
+    /* @__PURE__ */ i(u, { $height: s, children: e }),
+    /* @__PURE__ */ i(C, {}),
+    /* @__PURE__ */ a(w, { children: [
+      /* @__PURE__ */ a(x, { children: [
+        c ? /* @__PURE__ */ i(k, { children: c }) : null,
+        t ? /* @__PURE__ */ i(y, { children: typeof t == "string" ? /* @__PURE__ */ i(m, { color: "black-alpha", children: t }) : t }) : null
+      ] }),
+      n ? /* @__PURE__ */ i(F, { $variant: l, children: n }) : null
+    ] })
+  ] });
+}
+const v = o.div.withConfig({
+  displayName: "FrameStyled",
+  componentId: "sc-13dpc3f-0"
+})(["position:relative;min-height:92px;border-radius:var(--card-frame-border-radius);background:", ";", ""], (e) => e.$isCheckeredBackground ? `url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Crect height='12' width='12' y='0' x='0' fill='%23ffffff'/%3E%3Crect height='6' width='6' y='0' x='0' fill='%23e9ecee'/%3E%3Crect height='6' width='6' y='6' x='6' fill='%23e9ecee'/%3E%3C/svg%3E%0A") ` : r.gray25, (e) => e.$height === "fixed" && d(["&::before{content:'';display:inline-block;vertical-align:top;width:0;height:0;padding-bottom:calc(100% / (16 / 10));}"])), b = o.div.withConfig({
+  displayName: "FocusRing",
+  componentId: "sc-13dpc3f-1"
+})(["position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:var(--card-selected-border-width) solid var(--card-selected-border-color);border-radius:calc(var(--card-border-radius) + 4px);"]), u = o.div.withConfig({
+  displayName: "Children",
+  componentId: "sc-13dpc3f-2"
+})(["", " display:grid;overflow:hidden;border-radius:var(--card-frame-border-radius);"], (e) => e.$height === "fixed" && d(["position:absolute;inset:0;"])), C = o.div.withConfig({
+  displayName: "Overlay",
+  componentId: "sc-13dpc3f-3"
+})(["position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border:var(--card-inner-border-width) solid var(--card-inner-border-color);border-bottom-width:var(--card-frame-border-bottom-width);border-radius:var(--card-frame-border-radius);background:var(--card-frame-overlay-color);"]), w = o.div.withConfig({
+  displayName: "FrameFooter",
+  componentId: "sc-13dpc3f-4"
+})(["position:absolute;right:0;bottom:", ";left:0;display:flex;flex-direction:column;gap:", ";"], r.spacing4, r.spacing3), x = o.div.withConfig({
+  displayName: "FrameFooterContent",
+  componentId: "sc-13dpc3f-5"
+})(["display:flex;padding:0 ", ";"], r.spacing4), y = o.div.withConfig({
+  displayName: "BadgeContainer",
+  componentId: "sc-13dpc3f-6"
+})(["margin-left:auto;"]), k = o.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-13dpc3f-7"
+})(["color:", ";path{stroke:", ";stroke-width:2px;paint-order:stroke;&[d='M0 0h24v24H0z']{stroke:none;}}"], r.white, r.gray100a), F = o.div.withConfig({
+  displayName: "ProgressContainer",
+  componentId: "sc-13dpc3f-8"
+})(["", ""], ({
+  $variant: e
+}) => e === "clean" ? d(["position:relative;padding:0 ", ";"], r.spacing4) : d(["position:absolute;right:0;bottom:calc(", " * -1);left:0;"], r.spacing4));
+export {
+  S as Frame
+};

package/Group.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import p from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { GroupContext as n } from "./useGroupContext.js";
+function a({
+  children: r,
+  ...t
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: "group", children: /* @__PURE__ */ o(e, { ...t, children: r }) });
+}
+const e = p.div.withConfig({
+  displayName: "GroupStyled",
+  componentId: "sc-1gmxpcl-0"
+})(["margin:0;padding:", " 0;border:0;"], i.spacing3);
+export {
+  a as Group
+};