twenty-ui 2.48.0 → 2.50.0

package/dist/{surfaces-BLsR5ka0.js → surfaces-vhSZBmbz.js}

@@ -1,155 +1,154 @@
-import { t as u } from "./isDefined-fMi6eQ4r.js";
+import { t as D } from "./isDefined-fMi6eQ4r.js";
 import { t as _ } from "./theme-B2EaXhye.js";
 import { t as p } from "./mergeClassNames-ClFMR1v0.js";
 import { t as v } from "./useProvidedTextDirection-Dk8LBQeF.js";
-import { t as f } from "./Heading-pXllCJCO.js";
+import { t as u } from "./Heading-Nj5BlPqB.js";
 import { useRender as c } from "@base-ui/react/use-render";
-import { isUndefined as C } from "@sniptt/guards";
+import { isUndefined as f } from "@sniptt/guards";
 import { clsx as s } from "clsx";
 import { jsx as i } from "react/jsx-runtime";
 import { AlertDialog as d } from "@base-ui/react/alert-dialog";
 import { Dialog as l } from "@base-ui/react/dialog";
-var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P = "_header_aak4r_82", T = "_body_aak4r_91", y = "_footer_aak4r_95", A = "_title_aak4r_106", w = "_description_aak4r_113", t = {
-  backdrop: N,
-  viewport: k,
-  popup: H,
-  header: P,
-  body: T,
-  footer: y,
-  title: A,
-  description: w
-}, B = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Backdrop, {
+var C = "_backdrop_aak4r_1", N = "_viewport_aak4r_12", k = "_popup_aak4r_30", H = "_header_aak4r_82", P = "_body_aak4r_91", T = "_footer_aak4r_95", y = "_title_aak4r_106", A = "_description_aak4r_113", t = {
+  backdrop: C,
+  viewport: N,
+  popup: k,
+  header: H,
+  body: P,
+  footer: T,
+  title: y,
+  description: A
+}, w = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Backdrop, {
   ...a,
   className: p(t.backdrop, r)
-}), F = ({ render: r, ref: a, className: e, ...o }) => c({
+}), B = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.body, e)
   }
-}), b = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Description, {
+}), F = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Description, {
   ...a,
   className: p(t.description, r)
-}), h = ({ render: r, ref: a, className: e, ...o }) => c({
+}), b = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.footer, e)
   }
-}), R = ({ render: r, ref: a, className: e, ...o }) => c({
+}), h = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.header, e)
   }
-}), V = ({ container: r, ...a }) => {
+}), R = ({ container: r, ...a }) => {
   const e = _(), o = v();
   return /* @__PURE__ */ i(d.Portal, {
     dir: o,
     ...a,
     container: r === void 0 ? e ?? void 0 : r
   });
-}, x = ({ size: r = "md", className: a, ...e }) => /* @__PURE__ */ i(d.Popup, {
+}, V = ({ size: r = "md", className: a, ...e }) => /* @__PURE__ */ i(d.Popup, {
   ...e,
   "data-size": r,
   className: p(t.popup, a)
-}), $ = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Title, {
+}), x = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Title, {
   ...a,
   className: p(t.title, r)
-}), z = ({ className: r, ...a }) => {
+}), $ = ({ className: r, ...a }) => {
   const e = v();
   return /* @__PURE__ */ i(d.Viewport, {
     dir: e,
     ...a,
     className: p(t.viewport, r)
   });
-}, j = () => ({
+}, z = () => ({
   Root: d.Root,
   Trigger: d.Trigger,
-  Portal: V,
-  Backdrop: B,
-  Viewport: z,
-  Popup: x,
-  Title: $,
-  Description: b,
+  Portal: R,
+  Backdrop: w,
+  Viewport: $,
+  Popup: V,
+  Title: x,
+  Description: F,
   Close: d.Close,
-  Header: R,
-  Body: F,
-  Footer: h,
+  Header: h,
+  Body: B,
+  Footer: b,
   Handle: d.Handle,
   createHandle: d.createHandle
-}), Nr = /* @__PURE__ */ j(), U = "_cardContent_122dn_1", q = { cardContent: U }, E = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
+}), Cr = /* @__PURE__ */ z(), j = "_cardContent_122dn_1", U = { cardContent: j }, q = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
   render: e,
   ref: o,
   props: {
     ...n,
-    className: s(q.cardContent, r),
+    className: s(U.cardContent, r),
     "data-divider": a || void 0
   }
-}), G = "_cardFooter_yo8y2_1", I = { cardFooter: G }, J = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
+}), E = "_cardFooter_yo8y2_1", G = { cardFooter: E }, I = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
   render: e,
   ref: o,
   props: {
     ...n,
-    className: s(I.cardFooter, r),
+    className: s(G.cardFooter, r),
     "data-no-divider": a === !1 || void 0
   }
-}), K = "_cardHeader_18psr_1", L = { cardHeader: K }, M = ({ className: r, render: a, ref: e, ...o }) => c({
+}), J = "_cardHeader_18psr_1", K = { cardHeader: J }, L = ({ className: r, render: a, ref: e, ...o }) => c({
   render: a,
   ref: e,
   props: {
     ...o,
-    className: s(L.cardHeader, r)
+    className: s(K.cardHeader, r)
   }
-}), O = "_card_1mvso_1", Q = { card: O }, S = ({ className: r, fullWidth: a, rounded: e, backgroundColor: o, style: n, render: m, ref: g, ...D }) => c({
-  render: m,
-  ref: g,
+}), M = "_card_l2pp2_1", O = { card: M }, Q = ({ className: r, fullWidth: a, backgroundColor: e, style: o, render: n, ref: m, ...g }) => c({
+  render: n,
+  ref: m,
   props: {
-    ...D,
-    className: s(Q.card, r),
+    ...g,
+    className: s(O.card, r),
     "data-full-width": a || void 0,
-    "data-rounded": e || void 0,
-    style: u(o) ? {
-      ...n,
-      "--card-background-color": o
-    } : n
+    style: D(e) ? {
+      ...o,
+      "--card-background-color": e
+    } : o
   }
-}), kr = {
-  Root: S,
-  Header: M,
-  Content: E,
-  Footer: J
-}, W = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Backdrop, {
+}), Nr = {
+  Root: Q,
+  Header: L,
+  Content: q,
+  Footer: I
+}, S = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Backdrop, {
   ...a,
   className: p(t.backdrop, r)
-}), X = ({ render: r, ref: a, className: e, ...o }) => c({
+}), W = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.body, e)
   }
-}), Y = "_description_3f4d1_1", Z = { description: Y }, rr = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Description, {
+}), X = "_description_3f4d1_1", Y = { description: X }, Z = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Description, {
   ...a,
-  className: p(s(t.description, Z.description), r)
-}), ar = ({ render: r, ref: a, className: e, ...o }) => c({
+  className: p(s(t.description, Y.description), r)
+}), rr = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.footer, e)
   }
-}), er = ({ render: r, ref: a, className: e, ...o }) => c({
+}), ar = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
     className: s(t.header, e)
   }
-}), or = ({ size: r = "md", className: a, ...e }) => {
+}), er = ({ size: r = "md", className: a, ...e }) => {
   const o = v();
   return /* @__PURE__ */ i(l.Popup, {
     dir: o,
@@ -157,46 +156,46 @@ var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P
     "data-size": r,
     className: p(t.popup, a)
   });
-}, tr = ({ container: r, ...a }) => {
+}, or = ({ container: r, ...a }) => {
   const e = _();
   return /* @__PURE__ */ i(l.Portal, {
     ...a,
-    container: C(r) ? e ?? void 0 : r
+    container: f(r) ? e ?? void 0 : r
   });
-}, ir = "_title_yzpck_1", dr = { title: ir }, lr = ({ level: r = 2, size: a = "lg", color: e = "primary", className: o, render: n, ...m }) => /* @__PURE__ */ i(l.Title, {
+}, tr = "_title_yzpck_1", ir = { title: tr }, dr = ({ level: r = 2, size: a = "lg", color: e = "primary", className: o, render: n, ...m }) => /* @__PURE__ */ i(l.Title, {
   ...m,
-  className: p(dr.title, o),
-  render: /* @__PURE__ */ i(f, {
+  className: p(ir.title, o),
+  render: /* @__PURE__ */ i(u, {
     level: r,
     size: a,
     color: e,
     render: n
   })
-}), sr = ({ className: r, ...a }) => {
+}), lr = ({ className: r, ...a }) => {
   const e = v();
   return /* @__PURE__ */ i(l.Viewport, {
     dir: e,
     ...a,
     className: p(t.viewport, r)
   });
-}, Hr = {
+}, kr = {
   createHandle: l.createHandle,
   Handle: l.Handle,
   Root: l.Root,
   Trigger: l.Trigger,
-  Portal: tr,
-  Backdrop: W,
-  Viewport: sr,
-  Popup: or,
-  Title: lr,
-  Description: rr,
+  Portal: or,
+  Backdrop: S,
+  Viewport: lr,
+  Popup: er,
+  Title: dr,
+  Description: Z,
   Close: l.Close,
-  Header: er,
-  Body: X,
-  Footer: ar
+  Header: ar,
+  Body: W,
+  Footer: rr
 };
 export {
-  kr as n,
-  Nr as r,
-  Hr as t
+  Nr as n,
+  Cr as r,
+  kr as t
 };

package/dist/testing/GroupedCatalog.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type GroupedCatalogProps<CatalogExample extends {
+    label: string;
+}> = {
+    groups: {
+        label: string;
+        examples: CatalogExample[];
+    }[];
+    renderExample: (example: CatalogExample) => ReactNode;
+};
+export declare const GroupedCatalog: <CatalogExample extends {
+    label: string;
+}>({ groups, renderExample, }: GroupedCatalogProps<CatalogExample>) => import("react").JSX.Element;
+export {};

package/dist/testing/index.d.ts

@@ -3,6 +3,8 @@ export { ComponentStorybookLayout } from './ComponentStorybookLayout';
 export type { CatalogDimension, CatalogOptions, } from './decorators/CatalogDecorator';
 export { CatalogDecorator } from './decorators/CatalogDecorator';
 export { ComponentDecorator } from './decorators/ComponentDecorator';
+export { GroupedCatalog } from './GroupedCatalog';
 export { AVATAR_URL_MOCK } from './mocks/avatarUrlMock';
 export type { CatalogStory } from './types/CatalogStory';
 export { overrideMediaQueryMatches } from './utils/overrideMediaQueryMatches';
+export { waitForStorybookFontsLoaded } from './utils/waitForStorybookFontsLoaded';

package/dist/testing/utils/waitForStorybookFontsLoaded.d.ts

@@ -0,0 +1 @@
+export declare const waitForStorybookFontsLoaded: () => Promise<void>;

package/dist/testing.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./theme-1XkFz8Qu.cjs"),B=require("./isDefined-DS2Q42p5.cjs");let _=require("@sniptt/guards"),v=require("clsx"),A=require("react/jsx-runtime");var U={test:"error",config:{rules:[{id:"color-contrast",enabled:!1}]}},V="_layout_17ld0_1",T={layout:V},w=({width:e,backgroundColor:r,height:t,children:a})=>(0,A.jsx)("div",{className:T.layout,style:{background:r,height:B.isDefined(t)?`${t}px`:"fit-content",minWidth:e?"unset":"300px",width:e?`${e}px`:"fit-content"},children:a}),j="_columnTitle_5dert_1",M="_rowsTitle_5dert_7",y="_rowTitle_5dert_15",F="_elementTitle_5dert_23",S="_container_5dert_32",b="_columnContainer_5dert_37",f="_rowsContainer_5dert_43",N="_rowContainer_5dert_49",k="_elementContainer_5dert_56",D="_cellContainer_5dert_60",n={columnTitle:j,rowsTitle:M,rowTitle:y,elementTitle:F,container:S,columnContainer:b,rowsContainer:f,rowContainer:N,elementContainer:k,cellContainer:D},m={name:"",values:[void 0],props:()=>({})},C=e=>(0,_.isString)(e)||(0,_.isNumber)(e),L=(e,r)=>{const{catalog:{dimensions:t=[],options:a={}}={dimensions:[],options:{}}}=r.parameters||{};if(!t||!Array.isArray(t))return(0,A.jsx)(e,{});const[o=m,i=m,u=m,g=m]=t;return(0,A.jsx)("div",{className:n.container,children:g.values.map((l,R)=>(0,A.jsxs)("div",{className:n.columnContainer,children:[(0,A.jsx)("div",{className:n.columnTitle,children:g.labels?.(l)??(C(l)?l:"")}),u.values.map((c,Q)=>(0,A.jsxs)("div",{className:n.rowsContainer,children:[(0,A.jsx)("div",{className:n.rowsTitle,children:u.labels?.(c)??(C(c)?c:"")}),i.values.map((d,p)=>(0,A.jsxs)("div",{className:n.rowContainer,children:[(0,A.jsx)("div",{className:n.rowTitle,children:i.labels?.(d)??(C(d)?d:"")}),o.values.map((s,E)=>(0,A.jsxs)("div",{className:n.cellContainer,id:t.length>1?`catalog-cell-${R}-${Q}-${p}-${E}`:s,children:[(0,A.jsx)("span",{className:n.elementTitle,children:o.labels?.(s)??(C(s)?s:"")}),(0,A.jsx)("div",{className:(0,v.clsx)(n.elementContainer,a?.elementContainer?.className),style:{minWidth:a?.elementContainer?.width?`${a.elementContainer.width}px`:"auto",...a?.elementContainer?.style},children:(0,A.jsx)(e,{args:{...r.args,...o.props(s),...i.props(d),...u.props(c),...g.props(l)}})})]},`d1-${E}`))]},`d2-${p}`))]},`d3-${Q}`))]},`d4-${R}`))})},I=(e,r)=>{if(e)switch(r){case"default":return h.themeCssVariables.grayScale.gray11;case"danger":return h.themeCssVariables.color.red;case"blue":return h.themeCssVariables.color.blue;default:return}},K=(e,r)=>{const{container:t}=r.parameters,a=r.args.inverted,o=r.args.accent,i=I(a,o);return(0,A.jsx)(w,{width:t?.width,height:t?.height,backgroundColor:i,children:(0,A.jsx)(e,{})})},x="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=",O=e=>Object.assign(new EventTarget,{media:e,matches:!1,onchange:null,addListener:()=>{},removeListener:()=>{}}),W=e=>{const r=window.matchMedia;return window.matchMedia=t=>{const a=(0,_.isFunction)(r)?r.call(window,t):O(t),o=e[t];return B.isDefined(o)&&Object.defineProperty(a,"matches",{value:o}),a},()=>{window.matchMedia=r}};exports.A11Y_DEFER_COLOR_CONTRAST=U;exports.AVATAR_URL_MOCK=x;exports.CatalogDecorator=L;exports.ComponentDecorator=K;exports.ComponentStorybookLayout=w;exports.overrideMediaQueryMatches=W;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./theme-1XkFz8Qu.cjs"),w=require("./isDefined-DS2Q42p5.cjs"),B=require("./Heading-CHvEXL6n.cjs");let h=require("@sniptt/guards"),y=require("clsx"),r=require("react/jsx-runtime");var U={test:"error",config:{rules:[{id:"color-contrast",enabled:!1}]}},T="_layout_17ld0_1",j={layout:T},E=({width:e,backgroundColor:A,height:a,children:t})=>(0,r.jsx)("div",{className:j.layout,style:{background:A,height:w.isDefined(a)?`${a}px`:"fit-content",minWidth:e?"unset":"300px",width:e?`${e}px`:"fit-content"},children:t}),V="_columnTitle_5dert_1",M="_rowsTitle_5dert_7",F="_rowTitle_5dert_15",f="_elementTitle_5dert_23",S="_container_5dert_32",b="_columnContainer_5dert_37",k="_rowsContainer_5dert_43",D="_rowContainer_5dert_49",N="_elementContainer_5dert_56",I="_cellContainer_5dert_60",o={columnTitle:V,rowsTitle:M,rowTitle:F,elementTitle:f,container:S,columnContainer:b,rowsContainer:k,rowContainer:D,elementContainer:N,cellContainer:I},m={name:"",values:[void 0],props:()=>({})},g=e=>(0,h.isString)(e)||(0,h.isNumber)(e),L=(e,A)=>{const{catalog:{dimensions:a=[],options:t={}}={dimensions:[],options:{}}}=A.parameters||{};if(!a||!Array.isArray(a))return(0,r.jsx)(e,{});const[n=m,i=m,u=m,C=m]=a;return(0,r.jsx)("div",{className:o.container,children:C.values.map((l,_)=>(0,r.jsxs)("div",{className:o.columnContainer,children:[(0,r.jsx)("div",{className:o.columnTitle,children:C.labels?.(l)??(g(l)?l:"")}),u.values.map((d,R)=>(0,r.jsxs)("div",{className:o.rowsContainer,children:[(0,r.jsx)("div",{className:o.rowsTitle,children:u.labels?.(d)??(g(d)?d:"")}),i.values.map((c,v)=>(0,r.jsxs)("div",{className:o.rowContainer,children:[(0,r.jsx)("div",{className:o.rowTitle,children:i.labels?.(c)??(g(c)?c:"")}),n.values.map((s,Q)=>(0,r.jsxs)("div",{className:o.cellContainer,id:a.length>1?`catalog-cell-${_}-${R}-${v}-${Q}`:s,children:[(0,r.jsx)("span",{className:o.elementTitle,children:n.labels?.(s)??(g(s)?s:"")}),(0,r.jsx)("div",{className:(0,y.clsx)(o.elementContainer,t?.elementContainer?.className),style:{minWidth:t?.elementContainer?.width?`${t.elementContainer.width}px`:"auto",...t?.elementContainer?.style},children:(0,r.jsx)(e,{args:{...A.args,...n.props(s),...i.props(c),...u.props(d),...C.props(l)}})})]},`d1-${Q}`))]},`d2-${v}`))]},`d3-${R}`))]},`d4-${_}`))})},x=(e,A)=>{if(e)switch(A){case"default":return p.themeCssVariables.grayScale.gray11;case"danger":return p.themeCssVariables.color.red;case"blue":return p.themeCssVariables.color.blue;default:return}},O=(e,A)=>{const{container:a}=A.parameters,t=A.args.inverted,n=A.args.accent,i=x(t,n);return(0,r.jsx)(E,{width:a?.width,height:a?.height,backgroundColor:i,children:(0,r.jsx)(e,{})})},K=({groups:e,renderExample:A})=>(0,r.jsx)("div",{style:{display:"grid",gap:"var(--t-spacing-6)",width:"100%"},children:e.map(({label:a,examples:t})=>(0,r.jsxs)("section",{"aria-label":a,children:[(0,r.jsx)(B.Heading,{level:3,children:a}),(0,r.jsx)("div",{style:{display:"flex",flexWrap:"wrap",gap:"var(--t-spacing-6)",marginTop:"var(--t-spacing-3)"},children:t.map(n=>(0,r.jsx)("div",{style:{display:"grid",gap:"var(--t-spacing-2)",justifyItems:"start"},children:A(n)},n.label))})]},a))}),q="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=",W=e=>Object.assign(new EventTarget,{media:e,matches:!1,onchange:null,addListener:()=>{},removeListener:()=>{}}),Y=e=>{const A=window.matchMedia;return window.matchMedia=a=>{const t=(0,h.isFunction)(A)?A.call(window,a):W(a),n=e[a];return w.isDefined(n)&&Object.defineProperty(t,"matches",{value:n}),t},()=>{window.matchMedia=A}},J=["400 1em Inter","500 1em Inter","600 1em Inter","700 1em Inter",'400 1em "DM Mono"','500 1em "DM Mono"'],X=async()=>{await Promise.all(J.map(e=>document.fonts.load(e))),await document.fonts.ready};exports.A11Y_DEFER_COLOR_CONTRAST=U;exports.AVATAR_URL_MOCK=q;exports.CatalogDecorator=L;exports.ComponentDecorator=O;exports.ComponentStorybookLayout=E;exports.GroupedCatalog=K;exports.overrideMediaQueryMatches=Y;exports.waitForStorybookFontsLoaded=X;

package/dist/testing.mjs

@@ -1,108 +1,137 @@
-import { t as w } from "./isDefined-fMi6eQ4r.js";
-import { a as Q } from "./theme-B2EaXhye.js";
-import { isFunction as _, isNumber as U, isString as v } from "@sniptt/guards";
-import { clsx as V } from "clsx";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-var q = {
+import { t as B } from "./isDefined-fMi6eQ4r.js";
+import { a as u } from "./theme-B2EaXhye.js";
+import { t as E } from "./Heading-Nj5BlPqB.js";
+import { isFunction as _, isNumber as U, isString as f } from "@sniptt/guards";
+import { clsx as y } from "clsx";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var P = {
   test: "error",
   config: { rules: [{
     id: "color-contrast",
     enabled: !1
   }] }
-}, T = "_layout_17ld0_1", f = { layout: T }, F = ({ width: e, backgroundColor: A, height: r, children: t }) => /* @__PURE__ */ a("div", {
-  className: f.layout,
+}, T = "_layout_17ld0_1", V = { layout: T }, F = ({ width: e, backgroundColor: A, height: r, children: t }) => /* @__PURE__ */ a("div", {
+  className: V.layout,
   style: {
     background: A,
-    height: w(r) ? `${r}px` : "fit-content",
+    height: B(r) ? `${r}px` : "fit-content",
     minWidth: e ? "unset" : "300px",
     width: e ? `${e}px` : "fit-content"
   },
   children: t
-}), M = "_columnTitle_5dert_1", N = "_rowsTitle_5dert_7", k = "_rowTitle_5dert_15", y = "_elementTitle_5dert_23", S = "_container_5dert_32", b = "_columnContainer_5dert_37", D = "_rowsContainer_5dert_43", I = "_rowContainer_5dert_49", L = "_elementContainer_5dert_56", K = "_cellContainer_5dert_60", n = {
+}), M = "_columnTitle_5dert_1", S = "_rowsTitle_5dert_7", N = "_rowTitle_5dert_15", k = "_elementTitle_5dert_23", I = "_container_5dert_32", b = "_columnContainer_5dert_37", D = "_rowsContainer_5dert_43", L = "_rowContainer_5dert_49", K = "_elementContainer_5dert_56", W = "_cellContainer_5dert_60", o = {
   columnTitle: M,
-  rowsTitle: N,
-  rowTitle: k,
-  elementTitle: y,
-  container: S,
+  rowsTitle: S,
+  rowTitle: N,
+  elementTitle: k,
+  container: I,
   columnContainer: b,
   rowsContainer: D,
-  rowContainer: I,
-  elementContainer: L,
-  cellContainer: K
-}, C = {
+  rowContainer: L,
+  elementContainer: K,
+  cellContainer: W
+}, g = {
   name: "",
   values: [void 0],
   props: () => ({})
-}, g = (e) => v(e) || U(e), G = (e, A) => {
+}, p = (e) => f(e) || U(e), $ = (e, A) => {
   const { catalog: { dimensions: r = [], options: t = {} } = {
     dimensions: [],
     options: {}
   } } = A.parameters || {};
   if (!r || !Array.isArray(r)) return /* @__PURE__ */ a(e, {});
-  const [o = C, i = C, h = C, p = C] = r;
+  const [n = g, i = g, C = g, h = g] = r;
   return /* @__PURE__ */ a("div", {
-    className: n.container,
-    children: p.values.map((l, R) => /* @__PURE__ */ m("div", {
-      className: n.columnContainer,
+    className: o.container,
+    children: h.values.map((d, v) => /* @__PURE__ */ l("div", {
+      className: o.columnContainer,
       children: [/* @__PURE__ */ a("div", {
-        className: n.columnTitle,
-        children: p.labels?.(l) ?? (g(l) ? l : "")
-      }), h.values.map((c, u) => /* @__PURE__ */ m("div", {
-        className: n.rowsContainer,
+        className: o.columnTitle,
+        children: h.labels?.(d) ?? (p(d) ? d : "")
+      }), C.values.map((c, Q) => /* @__PURE__ */ l("div", {
+        className: o.rowsContainer,
         children: [/* @__PURE__ */ a("div", {
-          className: n.rowsTitle,
-          children: h.labels?.(c) ?? (g(c) ? c : "")
-        }), i.values.map((d, E) => /* @__PURE__ */ m("div", {
-          className: n.rowContainer,
+          className: o.rowsTitle,
+          children: C.labels?.(c) ?? (p(c) ? c : "")
+        }), i.values.map((m, R) => /* @__PURE__ */ l("div", {
+          className: o.rowContainer,
           children: [/* @__PURE__ */ a("div", {
-            className: n.rowTitle,
-            children: i.labels?.(d) ?? (g(d) ? d : "")
-          }), o.values.map((s, B) => /* @__PURE__ */ m("div", {
-            className: n.cellContainer,
-            id: r.length > 1 ? `catalog-cell-${R}-${u}-${E}-${B}` : s,
+            className: o.rowTitle,
+            children: i.labels?.(m) ?? (p(m) ? m : "")
+          }), n.values.map((s, w) => /* @__PURE__ */ l("div", {
+            className: o.cellContainer,
+            id: r.length > 1 ? `catalog-cell-${v}-${Q}-${R}-${w}` : s,
             children: [/* @__PURE__ */ a("span", {
-              className: n.elementTitle,
-              children: o.labels?.(s) ?? (g(s) ? s : "")
+              className: o.elementTitle,
+              children: n.labels?.(s) ?? (p(s) ? s : "")
             }), /* @__PURE__ */ a("div", {
-              className: V(n.elementContainer, t?.elementContainer?.className),
+              className: y(o.elementContainer, t?.elementContainer?.className),
               style: {
                 minWidth: t?.elementContainer?.width ? `${t.elementContainer.width}px` : "auto",
                 ...t?.elementContainer?.style
               },
               children: /* @__PURE__ */ a(e, { args: {
                 ...A.args,
-                ...o.props(s),
-                ...i.props(d),
-                ...h.props(c),
-                ...p.props(l)
+                ...n.props(s),
+                ...i.props(m),
+                ...C.props(c),
+                ...h.props(d)
               } })
             })]
-          }, `d1-${B}`))]
-        }, `d2-${E}`))]
-      }, `d3-${u}`))]
-    }, `d4-${R}`))
+          }, `d1-${w}`))]
+        }, `d2-${R}`))]
+      }, `d3-${Q}`))]
+    }, `d4-${v}`))
   });
-}, W = (e, A) => {
+}, j = (e, A) => {
   if (e)
     switch (A) {
       case "default":
-        return Q.grayScale.gray11;
+        return u.grayScale.gray11;
       case "danger":
-        return Q.color.red;
+        return u.color.red;
       case "blue":
-        return Q.color.blue;
+        return u.color.blue;
       default:
         return;
     }
-}, H = (e, A) => {
-  const { container: r } = A.parameters, t = A.args.inverted, o = A.args.accent, i = W(t, o);
+}, x = (e, A) => {
+  const { container: r } = A.parameters, t = A.args.inverted, n = A.args.accent, i = j(t, n);
   return /* @__PURE__ */ a(F, {
     width: r?.width,
     height: r?.height,
     backgroundColor: i,
     children: /* @__PURE__ */ a(e, {})
   });
-}, $ = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=", j = (e) => Object.assign(new EventTarget(), {
+}, z = ({ groups: e, renderExample: A }) => /* @__PURE__ */ a("div", {
+  style: {
+    display: "grid",
+    gap: "var(--t-spacing-6)",
+    width: "100%"
+  },
+  children: e.map(({ label: r, examples: t }) => /* @__PURE__ */ l("section", {
+    "aria-label": r,
+    children: [/* @__PURE__ */ a(E, {
+      level: 3,
+      children: r
+    }), /* @__PURE__ */ a("div", {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "var(--t-spacing-6)",
+        marginTop: "var(--t-spacing-3)"
+      },
+      children: t.map((n) => /* @__PURE__ */ a("div", {
+        style: {
+          display: "grid",
+          gap: "var(--t-spacing-2)",
+          justifyItems: "start"
+        },
+        children: A(n)
+      }, n.label))
+    })]
+  }, r))
+}), ee = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=", Y = (e) => Object.assign(new EventTarget(), {
   media: e,
   matches: !1,
   onchange: null,
@@ -110,20 +139,31 @@ var q = {
   },
   removeListener: () => {
   }
-}), P = (e) => {
+}), re = (e) => {
   const A = window.matchMedia;
   return window.matchMedia = (r) => {
-    const t = _(A) ? A.call(window, r) : j(r), o = e[r];
-    return w(o) && Object.defineProperty(t, "matches", { value: o }), t;
+    const t = _(A) ? A.call(window, r) : Y(r), n = e[r];
+    return B(n) && Object.defineProperty(t, "matches", { value: n }), t;
   }, () => {
     window.matchMedia = A;
   };
+}, O = [
+  "400 1em Inter",
+  "500 1em Inter",
+  "600 1em Inter",
+  "700 1em Inter",
+  '400 1em "DM Mono"',
+  '500 1em "DM Mono"'
+], Ae = async () => {
+  await Promise.all(O.map((e) => document.fonts.load(e))), await document.fonts.ready;
 };
 export {
-  q as A11Y_DEFER_COLOR_CONTRAST,
-  $ as AVATAR_URL_MOCK,
-  G as CatalogDecorator,
-  H as ComponentDecorator,
+  P as A11Y_DEFER_COLOR_CONTRAST,
+  ee as AVATAR_URL_MOCK,
+  $ as CatalogDecorator,
+  x as ComponentDecorator,
   F as ComponentStorybookLayout,
-  P as overrideMediaQueryMatches
+  z as GroupedCatalog,
+  re as overrideMediaQueryMatches,
+  Ae as waitForStorybookFontsLoaded
 };

package/dist/{typography-fOTFr0jS.js → typography-BPdXzW2T.js}

@@ -1,5 +1,5 @@
-import { n as r } from "./Shortcut-BvWUZ3pb.js";
-import { n as e } from "./OverflowingTextWithTooltip-BmUROIah.js";
+import { n as r } from "./Shortcut-Bp9iDdQg.js";
+import { n as e } from "./OverflowingTextWithTooltip-BtB9cGdJ.js";
 import { jsx as i } from "react/jsx-runtime";
 var v = ({ mode: o, children: t }) => /* @__PURE__ */ i(e.Provider, {
   value: o,

package/dist/{typography-B5QEuPaL.cjs → typography-CWtuNruY.cjs}

@@ -1 +1 @@
-const t=require("./Shortcut-CgrdLv_L.cjs"),o=require("./OverflowingTextWithTooltip-Z2daM0_x.cjs");let i=require("react/jsx-runtime");var n=({mode:e,children:r})=>(0,i.jsx)(o.OverflowingTextTooltipModeContext.Provider,{value:e,children:r}),u=e=>t.getShortcutPresentation(e).text;Object.defineProperty(exports,"OverflowingTextTooltipModeProvider",{enumerable:!0,get:function(){return n}});Object.defineProperty(exports,"formatShortcut",{enumerable:!0,get:function(){return u}});
+const t=require("./Shortcut-N8TELGPI.cjs"),o=require("./OverflowingTextWithTooltip-BQmpPObX.cjs");let i=require("react/jsx-runtime");var n=({mode:e,children:r})=>(0,i.jsx)(o.OverflowingTextTooltipModeContext.Provider,{value:e,children:r}),u=e=>t.getShortcutPresentation(e).text;Object.defineProperty(exports,"OverflowingTextTooltipModeProvider",{enumerable:!0,get:function(){return n}});Object.defineProperty(exports,"formatShortcut",{enumerable:!0,get:function(){return u}});

package/dist/useIsMobile-Byp9AIq-.cjs

@@ -0,0 +1 @@
+const S=require("./theme-1XkFz8Qu.cjs"),u=require("./isDefined-DS2Q42p5.cjs"),s=require("./doNotTranslate-CHE7WmRS.cjs");let a=require("@sniptt/guards"),c=require("react");var l=()=>{const r=globalThis.navigator?.userAgent;if(!(0,a.isString)(r))return"unknown";const e=r.toLowerCase();return e.includes("ios")||e.includes("iphone")||e.includes("ipad")?"ios":e.includes(s.doNotTranslate("mac os x"))||e.includes("macos")?"mac":e.includes("windows")?"windows":e.includes("android")?"android":e.includes("linux")?"linux":"unknown"},o=s.doNotTranslate("(max-width: 768px)"),f={getSnapshot:()=>!1,subscribe:()=>()=>{}},i=new WeakMap,g=r=>({getSnapshot:()=>r.matches,subscribe:e=>(r.addEventListener("change",e),()=>r.removeEventListener("change",e))}),y=r=>{const e=i.get(r);if(u.isDefined(e))return e;const t=new Map;return i.set(r,t),t},M=r=>{if(typeof window>"u"||!(0,a.isFunction)(window.matchMedia))return f;const e=y(window.matchMedia),t=e.get(r);if(u.isDefined(t))return t;const n=g(window.matchMedia(r));return e.set(r,n),n},m=()=>!1,d=r=>{const{subscribe:e,getSnapshot:t}=M(r);return(0,c.useSyncExternalStore)(e,t,m)},w=()=>d(o);Object.defineProperty(exports,"MOBILE_MEDIA_QUERY",{enumerable:!0,get:function(){return o}});Object.defineProperty(exports,"getUserDevice",{enumerable:!0,get:function(){return l}});Object.defineProperty(exports,"useIsMobile",{enumerable:!0,get:function(){return w}});Object.defineProperty(exports,"useMediaQuery",{enumerable:!0,get:function(){return d}});

package/dist/useIsMobile-D1ImfQnE.js

@@ -0,0 +1,38 @@
+import { t as s } from "./isDefined-fMi6eQ4r.js";
+import { t as a } from "./doNotTranslate-BSVT8Xyd.js";
+import "./theme-B2EaXhye.js";
+import { isFunction as o, isString as u } from "@sniptt/guards";
+import { useSyncExternalStore as d } from "react";
+var E = () => {
+  const r = globalThis.navigator?.userAgent;
+  if (!u(r)) return "unknown";
+  const e = r.toLowerCase();
+  return e.includes("ios") || e.includes("iphone") || e.includes("ipad") ? "ios" : e.includes(a("mac os x")) || e.includes("macos") ? "mac" : e.includes("windows") ? "windows" : e.includes("android") ? "android" : e.includes("linux") ? "linux" : "unknown";
+}, c = a("(max-width: 768px)"), m = {
+  getSnapshot: () => !1,
+  subscribe: () => () => {
+  }
+}, i = /* @__PURE__ */ new WeakMap(), f = (r) => ({
+  getSnapshot: () => r.matches,
+  subscribe: (e) => (r.addEventListener("change", e), () => r.removeEventListener("change", e))
+}), l = (r) => {
+  const e = i.get(r);
+  if (s(e)) return e;
+  const t = /* @__PURE__ */ new Map();
+  return i.set(r, t), t;
+}, w = (r) => {
+  if (typeof window > "u" || !o(window.matchMedia)) return m;
+  const e = l(window.matchMedia), t = e.get(r);
+  if (s(t)) return t;
+  const n = f(window.matchMedia(r));
+  return e.set(r, n), n;
+}, S = () => !1, p = (r) => {
+  const { subscribe: e, getSnapshot: t } = w(r);
+  return d(e, t, S);
+}, b = () => p(c);
+export {
+  E as i,
+  p as n,
+  c as r,
+  b as t
+};

package/dist/utilities/internal/doNotTranslate.d.ts

@@ -0,0 +1 @@
+export declare const doNotTranslate: <TValue>(value: TValue) => TValue;