twenty-ui 2.47.0 → 2.49.0

package/dist/{surfaces-DZ2A-Nb9.js → surfaces-BLsR5ka0.js}

@@ -1,11 +1,11 @@
 import { t as u } from "./isDefined-fMi6eQ4r.js";
 import { t as _ } from "./theme-B2EaXhye.js";
-import { t as s } from "./mergeClassNames-ClFMR1v0.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 { useRender as p } from "@base-ui/react/use-render";
+import { useRender as c } from "@base-ui/react/use-render";
 import { isUndefined as C } from "@sniptt/guards";
-import { clsx as c } from "clsx";
+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";
@@ -20,30 +20,30 @@ var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P
   description: w
 }, B = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Backdrop, {
   ...a,
-  className: s(t.backdrop, r)
-}), F = ({ render: r, ref: a, className: e, ...o }) => p({
+  className: p(t.backdrop, r)
+}), F = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.body, e)
+    className: s(t.body, e)
   }
 }), b = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Description, {
   ...a,
-  className: s(t.description, r)
-}), h = ({ render: r, ref: a, className: e, ...o }) => p({
+  className: p(t.description, r)
+}), h = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.footer, e)
+    className: s(t.footer, e)
   }
-}), R = ({ render: r, ref: a, className: e, ...o }) => p({
+}), R = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.header, e)
+    className: s(t.header, e)
   }
 }), V = ({ container: r, ...a }) => {
   const e = _(), o = v();
@@ -55,25 +55,25 @@ var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P
 }, x = ({ size: r = "md", className: a, ...e }) => /* @__PURE__ */ i(d.Popup, {
   ...e,
   "data-size": r,
-  className: s(t.popup, a)
-}), z = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Title, {
+  className: p(t.popup, a)
+}), $ = ({ className: r, ...a }) => /* @__PURE__ */ i(d.Title, {
   ...a,
-  className: s(t.title, r)
-}), $ = ({ className: r, ...a }) => {
+  className: p(t.title, r)
+}), z = ({ className: r, ...a }) => {
   const e = v();
   return /* @__PURE__ */ i(d.Viewport, {
     dir: e,
     ...a,
-    className: s(t.viewport, r)
+    className: p(t.viewport, r)
   });
 }, j = () => ({
   Root: d.Root,
   Trigger: d.Trigger,
   Portal: V,
   Backdrop: B,
-  Viewport: $,
+  Viewport: z,
   Popup: x,
-  Title: z,
+  Title: $,
   Description: b,
   Close: d.Close,
   Header: R,
@@ -81,35 +81,35 @@ var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P
   Footer: h,
   Handle: d.Handle,
   createHandle: d.createHandle
-}), fr = /* @__PURE__ */ j(), U = "_cardContent_122dn_1", q = { cardContent: U }, E = ({ className: r, divider: a, render: e, ref: o, ...n }) => p({
+}), Nr = /* @__PURE__ */ j(), U = "_cardContent_122dn_1", q = { cardContent: U }, E = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
   render: e,
   ref: o,
   props: {
     ...n,
-    className: c(q.cardContent, r),
+    className: s(q.cardContent, r),
     "data-divider": a || void 0
   }
-}), G = "_cardFooter_yo8y2_1", I = { cardFooter: G }, J = ({ className: r, divider: a, render: e, ref: o, ...n }) => p({
+}), G = "_cardFooter_yo8y2_1", I = { cardFooter: G }, J = ({ className: r, divider: a, render: e, ref: o, ...n }) => c({
   render: e,
   ref: o,
   props: {
     ...n,
-    className: c(I.cardFooter, r),
+    className: s(I.cardFooter, r),
     "data-no-divider": a === !1 || void 0
   }
-}), K = "_cardHeader_18psr_1", L = { cardHeader: K }, M = ({ className: r, render: a, ref: e, ...o }) => p({
+}), K = "_cardHeader_18psr_1", L = { cardHeader: K }, M = ({ className: r, render: a, ref: e, ...o }) => c({
   render: a,
   ref: e,
   props: {
     ...o,
-    className: c(L.cardHeader, r)
+    className: s(L.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 }) => p({
+}), 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,
   props: {
     ...D,
-    className: c(Q.card, r),
+    className: s(Q.card, r),
     "data-full-width": a || void 0,
     "data-rounded": e || void 0,
     style: u(o) ? {
@@ -117,86 +117,86 @@ var N = "_backdrop_aak4r_1", k = "_viewport_aak4r_12", H = "_popup_aak4r_30", P
       "--card-background-color": o
     } : n
   }
-}), Cr = {
+}), kr = {
   Root: S,
   Header: M,
   Content: E,
   Footer: J
 }, W = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Backdrop, {
   ...a,
-  className: s(t.backdrop, r)
-}), X = ({ render: r, ref: a, className: e, ...o }) => p({
+  className: p(t.backdrop, r)
+}), X = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.body, e)
+    className: s(t.body, e)
   }
-}), Y = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Description, {
+}), Y = "_description_3f4d1_1", Z = { description: Y }, rr = ({ className: r, ...a }) => /* @__PURE__ */ i(l.Description, {
   ...a,
-  className: s(t.description, r)
-}), Z = ({ render: r, ref: a, className: e, ...o }) => p({
+  className: p(s(t.description, Z.description), r)
+}), ar = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.footer, e)
+    className: s(t.footer, e)
   }
-}), rr = ({ render: r, ref: a, className: e, ...o }) => p({
+}), er = ({ render: r, ref: a, className: e, ...o }) => c({
   render: r,
   ref: a,
   props: {
     ...o,
-    className: c(t.header, e)
+    className: s(t.header, e)
   }
-}), ar = ({ size: r = "md", className: a, ...e }) => {
+}), or = ({ size: r = "md", className: a, ...e }) => {
   const o = v();
   return /* @__PURE__ */ i(l.Popup, {
     dir: o,
     ...e,
     "data-size": r,
-    className: s(t.popup, a)
+    className: p(t.popup, a)
   });
-}, er = ({ container: r, ...a }) => {
+}, tr = ({ container: r, ...a }) => {
   const e = _();
   return /* @__PURE__ */ i(l.Portal, {
     ...a,
     container: C(r) ? e ?? void 0 : r
   });
-}, or = "_title_yzpck_1", tr = { title: or }, ir = ({ level: r = 2, size: a = "lg", color: e = "primary", className: o, render: n, ...m }) => /* @__PURE__ */ i(l.Title, {
+}, 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, {
   ...m,
-  className: s(tr.title, o),
+  className: p(dr.title, o),
   render: /* @__PURE__ */ i(f, {
     level: r,
     size: a,
     color: e,
     render: n
   })
-}), dr = ({ className: r, ...a }) => {
+}), sr = ({ className: r, ...a }) => {
   const e = v();
   return /* @__PURE__ */ i(l.Viewport, {
     dir: e,
     ...a,
-    className: s(t.viewport, r)
+    className: p(t.viewport, r)
   });
-}, Nr = {
+}, Hr = {
   createHandle: l.createHandle,
   Handle: l.Handle,
   Root: l.Root,
   Trigger: l.Trigger,
-  Portal: er,
+  Portal: tr,
   Backdrop: W,
-  Viewport: dr,
-  Popup: ar,
-  Title: ir,
-  Description: Y,
+  Viewport: sr,
+  Popup: or,
+  Title: lr,
+  Description: rr,
   Close: l.Close,
-  Header: rr,
+  Header: er,
   Body: X,
-  Footer: Z
+  Footer: ar
 };
 export {
-  Cr as n,
-  fr as r,
-  Nr as t
+  kr as n,
+  Nr as r,
+  Hr 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,7 @@ 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';

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"),E=require("./isDefined-DS2Q42p5.cjs"),B=require("./Heading-CTRYClCO.cjs");let h=require("@sniptt/guards"),U=require("clsx"),e=require("react/jsx-runtime");var j={test:"error",config:{rules:[{id:"color-contrast",enabled:!1}]}},V="_layout_17ld0_1",T={layout:V},w=({width:r,backgroundColor:a,height:A,children:t})=>(0,e.jsx)("div",{className:T.layout,style:{background:a,height:E.isDefined(A)?`${A}px`:"fit-content",minWidth:r?"unset":"300px",width:r?`${r}px`:"fit-content"},children:t}),y="_columnTitle_5dert_1",f="_rowsTitle_5dert_7",M="_rowTitle_5dert_15",F="_elementTitle_5dert_23",S="_container_5dert_32",b="_columnContainer_5dert_37",N="_rowsContainer_5dert_43",k="_rowContainer_5dert_49",D="_elementContainer_5dert_56",x="_cellContainer_5dert_60",i={columnTitle:y,rowsTitle:f,rowTitle:M,elementTitle:F,container:S,columnContainer:b,rowsContainer:N,rowContainer:k,elementContainer:D,cellContainer:x},m={name:"",values:[void 0],props:()=>({})},g=r=>(0,h.isString)(r)||(0,h.isNumber)(r),L=(r,a)=>{const{catalog:{dimensions:A=[],options:t={}}={dimensions:[],options:{}}}=a.parameters||{};if(!A||!Array.isArray(A))return(0,e.jsx)(r,{});const[n=m,s=m,u=m,C=m]=A;return(0,e.jsx)("div",{className:i.container,children:C.values.map((l,_)=>(0,e.jsxs)("div",{className:i.columnContainer,children:[(0,e.jsx)("div",{className:i.columnTitle,children:C.labels?.(l)??(g(l)?l:"")}),u.values.map((d,R)=>(0,e.jsxs)("div",{className:i.rowsContainer,children:[(0,e.jsx)("div",{className:i.rowsTitle,children:u.labels?.(d)??(g(d)?d:"")}),s.values.map((c,v)=>(0,e.jsxs)("div",{className:i.rowContainer,children:[(0,e.jsx)("div",{className:i.rowTitle,children:s.labels?.(c)??(g(c)?c:"")}),n.values.map((o,Q)=>(0,e.jsxs)("div",{className:i.cellContainer,id:A.length>1?`catalog-cell-${_}-${R}-${v}-${Q}`:o,children:[(0,e.jsx)("span",{className:i.elementTitle,children:n.labels?.(o)??(g(o)?o:"")}),(0,e.jsx)("div",{className:(0,U.clsx)(i.elementContainer,t?.elementContainer?.className),style:{minWidth:t?.elementContainer?.width?`${t.elementContainer.width}px`:"auto",...t?.elementContainer?.style},children:(0,e.jsx)(r,{args:{...a.args,...n.props(o),...s.props(c),...u.props(d),...C.props(l)}})})]},`d1-${Q}`))]},`d2-${v}`))]},`d3-${R}`))]},`d4-${_}`))})},I=(r,a)=>{if(r)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}},q=(r,a)=>{const{container:A}=a.parameters,t=a.args.inverted,n=a.args.accent,s=I(t,n);return(0,e.jsx)(w,{width:A?.width,height:A?.height,backgroundColor:s,children:(0,e.jsx)(r,{})})},K=({groups:r,renderExample:a})=>(0,e.jsx)("div",{style:{display:"grid",gap:"var(--t-spacing-6)",width:"100%"},children:r.map(({label:A,examples:t})=>(0,e.jsxs)("section",{"aria-label":A,children:[(0,e.jsx)(B.Heading,{level:3,children:A}),(0,e.jsx)("div",{style:{display:"flex",flexWrap:"wrap",gap:"var(--t-spacing-6)",marginTop:"var(--t-spacing-3)"},children:t.map(n=>(0,e.jsx)("div",{style:{display:"grid",gap:"var(--t-spacing-2)",justifyItems:"start"},children:a(n)},n.label))})]},A))}),W="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=r=>Object.assign(new EventTarget,{media:r,matches:!1,onchange:null,addListener:()=>{},removeListener:()=>{}}),Y=r=>{const a=window.matchMedia;return window.matchMedia=A=>{const t=(0,h.isFunction)(a)?a.call(window,A):O(A),n=r[A];return E.isDefined(n)&&Object.defineProperty(t,"matches",{value:n}),t},()=>{window.matchMedia=a}};exports.A11Y_DEFER_COLOR_CONTRAST=j;exports.AVATAR_URL_MOCK=W;exports.CatalogDecorator=L;exports.ComponentDecorator=q;exports.ComponentStorybookLayout=w;exports.GroupedCatalog=K;exports.overrideMediaQueryMatches=Y;

package/dist/testing.mjs

@@ -1,90 +1,91 @@
 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";
+import { t as B } from "./Heading-pXllCJCO.js";
+import { isFunction as _, isNumber as U, isString as V } from "@sniptt/guards";
+import { clsx as f } from "clsx";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
 var q = {
   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", y = { layout: T }, F = ({ width: e, backgroundColor: r, height: A, children: t }) => /* @__PURE__ */ a("div", {
+  className: y.layout,
   style: {
-    background: A,
-    height: w(r) ? `${r}px` : "fit-content",
+    background: r,
+    height: w(A) ? `${A}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", N = "_rowsTitle_5dert_7", k = "_rowTitle_5dert_15", S = "_elementTitle_5dert_23", b = "_container_5dert_32", I = "_columnContainer_5dert_37", D = "_rowsContainer_5dert_43", L = "_rowContainer_5dert_49", W = "_elementContainer_5dert_56", j = "_cellContainer_5dert_60", i = {
   columnTitle: M,
   rowsTitle: N,
   rowTitle: k,
-  elementTitle: y,
-  container: S,
-  columnContainer: b,
+  elementTitle: S,
+  container: b,
+  columnContainer: I,
   rowsContainer: D,
-  rowContainer: I,
-  elementContainer: L,
-  cellContainer: K
-}, C = {
+  rowContainer: L,
+  elementContainer: W,
+  cellContainer: j
+}, g = {
   name: "",
   values: [void 0],
   props: () => ({})
-}, g = (e) => v(e) || U(e), G = (e, A) => {
-  const { catalog: { dimensions: r = [], options: t = {} } = {
+}, p = (e) => V(e) || U(e), $ = (e, r) => {
+  const { catalog: { dimensions: A = [], 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;
+  } } = r.parameters || {};
+  if (!A || !Array.isArray(A)) return /* @__PURE__ */ a(e, {});
+  const [n = g, o = g, C = g, h = g] = A;
   return /* @__PURE__ */ a("div", {
-    className: n.container,
-    children: p.values.map((l, R) => /* @__PURE__ */ m("div", {
-      className: n.columnContainer,
+    className: i.container,
+    children: h.values.map((c, u) => /* @__PURE__ */ l("div", {
+      className: i.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: i.columnTitle,
+        children: h.labels?.(c) ?? (p(c) ? c : "")
+      }), C.values.map((d, v) => /* @__PURE__ */ l("div", {
+        className: i.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: i.rowsTitle,
+          children: C.labels?.(d) ?? (p(d) ? d : "")
+        }), o.values.map((m, R) => /* @__PURE__ */ l("div", {
+          className: i.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: i.rowTitle,
+            children: o.labels?.(m) ?? (p(m) ? m : "")
+          }), n.values.map((s, E) => /* @__PURE__ */ l("div", {
+            className: i.cellContainer,
+            id: A.length > 1 ? `catalog-cell-${u}-${v}-${R}-${E}` : s,
             children: [/* @__PURE__ */ a("span", {
-              className: n.elementTitle,
-              children: o.labels?.(s) ?? (g(s) ? s : "")
+              className: i.elementTitle,
+              children: n.labels?.(s) ?? (p(s) ? s : "")
             }), /* @__PURE__ */ a("div", {
-              className: V(n.elementContainer, t?.elementContainer?.className),
+              className: f(i.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)
+                ...r.args,
+                ...n.props(s),
+                ...o.props(m),
+                ...C.props(d),
+                ...h.props(c)
               } })
             })]
-          }, `d1-${B}`))]
-        }, `d2-${E}`))]
-      }, `d3-${u}`))]
-    }, `d4-${R}`))
+          }, `d1-${E}`))]
+        }, `d2-${R}`))]
+      }, `d3-${v}`))]
+    }, `d4-${u}`))
   });
-}, W = (e, A) => {
+}, K = (e, r) => {
   if (e)
-    switch (A) {
+    switch (r) {
       case "default":
         return Q.grayScale.gray11;
       case "danger":
@@ -94,15 +95,43 @@ var q = {
       default:
         return;
     }
-}, H = (e, A) => {
-  const { container: r } = A.parameters, t = A.args.inverted, o = A.args.accent, i = W(t, o);
+}, P = (e, r) => {
+  const { container: A } = r.parameters, t = r.args.inverted, n = r.args.accent, o = K(t, n);
   return /* @__PURE__ */ a(F, {
-    width: r?.width,
-    height: r?.height,
-    backgroundColor: i,
+    width: A?.width,
+    height: A?.height,
+    backgroundColor: o,
     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(), {
+}, x = ({ groups: e, renderExample: r }) => /* @__PURE__ */ a("div", {
+  style: {
+    display: "grid",
+    gap: "var(--t-spacing-6)",
+    width: "100%"
+  },
+  children: e.map(({ label: A, examples: t }) => /* @__PURE__ */ l("section", {
+    "aria-label": A,
+    children: [/* @__PURE__ */ a(B, {
+      level: 3,
+      children: A
+    }), /* @__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: r(n)
+      }, n.label))
+    })]
+  }, A))
+}), z = "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,21 @@ var q = {
   },
   removeListener: () => {
   }
-}), P = (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;
+}), ee = (e) => {
+  const r = window.matchMedia;
+  return window.matchMedia = (A) => {
+    const t = _(r) ? r.call(window, A) : Y(A), n = e[A];
+    return w(n) && Object.defineProperty(t, "matches", { value: n }), t;
   }, () => {
-    window.matchMedia = A;
+    window.matchMedia = r;
   };
 };
 export {
   q as A11Y_DEFER_COLOR_CONTRAST,
-  $ as AVATAR_URL_MOCK,
-  G as CatalogDecorator,
-  H as ComponentDecorator,
+  z as AVATAR_URL_MOCK,
+  $ as CatalogDecorator,
+  P as ComponentDecorator,
   F as ComponentStorybookLayout,
-  P as overrideMediaQueryMatches
+  x as GroupedCatalog,
+  ee as overrideMediaQueryMatches
 };

package/dist/typography-DT2eKLvd.js

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

package/dist/typography-bKeSMuJd.cjs

@@ -0,0 +1 @@
+const t=require("./Shortcut-N8TELGPI.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}});

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;

package/dist/utilities-BKCMZyqZ.js

@@ -0,0 +1,53 @@
+import { t as o } from "./doNotTranslate-BSVT8Xyd.js";
+import { f as a, h } from "./theme-B2EaXhye.js";
+import { i as c, n as m } from "./useIsMobile-D1ImfQnE.js";
+import { z as l } from "zod";
+var g = (r) => r.replace(/\d+$/, ""), f = l.enum(a), O = (r) => {
+  const e = f.safeParse(r ?? "");
+  return e.success ? e.data : h;
+}, v = (r) => {
+  let e = 0;
+  for (let t = 0; t < r.length; t++) e = r.charCodeAt(t) + ((e << 5) - e);
+  return a[Math.abs(e) % a.length] ?? a[0];
+}, S = ({ string: r, variant: e = 9, theme: t }) => {
+  if (e < 1 || e > 12) throw new Error(o("Variant must be between 1 and 12"));
+  const i = `${v(r)}${e}`;
+  return t.color[i];
+}, T = () => {
+  const r = c();
+  return r === "mac" || r === "ios" ? "⌘" : o("Ctrl");
+}, p = o("(hover: none) and (pointer: coarse)"), A = () => m(p), u = [
+  "http:",
+  "https:",
+  "mailto:",
+  "tel:"
+], s = "https://same-origin-probe.invalid", n = (r) => {
+  if (r.startsWith("/")) try {
+    return new URL(r, s).origin === s;
+  } catch {
+    return !1;
+  }
+  try {
+    const e = new URL(r);
+    return u.includes(e.protocol);
+  } catch {
+    return !1;
+  }
+}, L = (r) => {
+  if (!r || r.trim().length === 0) return;
+  if (n(r)) return r;
+  if (r.startsWith("/")) return;
+  const e = `https://${r}`;
+  return n(e) ? e : void 0;
+};
+export {
+  v as a,
+  f as c,
+  T as i,
+  g as l,
+  A as n,
+  S as o,
+  p as r,
+  O as s,
+  L as t
+};