twenty-ui 2.43.0 → 2.44.0

package/dist/surfaces-BJilWRcD.js

@@ -0,0 +1,264 @@
+import { t as S } from "./isDefined-fMi6eQ4r.js";
+import { t as P } from "./theme-CjHovJAZ.js";
+import { n as c, t as T } from "./useProvidedTextDirection-P1dtjUtE.js";
+import { t as H } from "./ListItem-Bg7Sk5Nv.js";
+import { t as x } from "./Heading-DvxTKEaL.js";
+import { i as k, n as F, r as y, t as O } from "./MenuSeparator-CyUYx1nk.js";
+import { clsx as p } from "clsx";
+import { jsx as t, jsxs as R } from "react/jsx-runtime";
+import { isBoolean as A, isFunction as L } from "@sniptt/guards";
+import { createContext as w, useContext as B } from "react";
+import { useRender as f } from "@base-ui/react/use-render";
+import { Menu as l } from "@base-ui/react/menu";
+import { AlertDialog as u } from "@base-ui/react/alert-dialog";
+import { Dialog as n } from "@base-ui/react/dialog";
+var G = "_backdrop_aak4r_1", $ = "_viewport_aak4r_12", z = "_popup_aak4r_30", U = "_header_aak4r_82", j = "_body_aak4r_91", E = "_footer_aak4r_95", V = "_title_aak4r_106", q = "_description_aak4r_113", s = {
+  backdrop: G,
+  viewport: $,
+  popup: z,
+  header: U,
+  body: j,
+  footer: E,
+  title: V,
+  description: q
+}, J = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.body, o)
+  }
+}), K = ({ className: e, ...r }) => /* @__PURE__ */ t(u.Description, {
+  ...r,
+  className: c(s.description, e)
+}), Q = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.footer, o)
+  }
+}), W = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.header, o)
+  }
+}), X = ({ size: e = "md", container: r, keepMounted: o, className: a, ...i }) => {
+  const d = P(), m = T();
+  return /* @__PURE__ */ R(u.Portal, {
+    container: r === void 0 ? d ?? void 0 : r,
+    keepMounted: o,
+    children: [/* @__PURE__ */ t(u.Backdrop, { className: s.backdrop }), /* @__PURE__ */ t(u.Viewport, {
+      dir: m,
+      className: s.viewport,
+      children: /* @__PURE__ */ t(u.Popup, {
+        ...i,
+        "data-size": e,
+        className: c(s.popup, a)
+      })
+    })]
+  });
+}, Y = ({ className: e, ...r }) => /* @__PURE__ */ t(u.Title, {
+  ...r,
+  className: c(s.title, e)
+}), Z = () => ({
+  Root: u.Root,
+  Trigger: u.Trigger,
+  Popup: X,
+  Title: Y,
+  Description: K,
+  Close: u.Close,
+  Header: W,
+  Body: J,
+  Footer: Q
+}), Ue = /* @__PURE__ */ Z(), ee = "_cardContent_10wri_1", re = { cardContent: ee }, ae = ({ children: e, className: r, divider: o, isClickable: a, hasHoverHighlight: i, ...d }) => /* @__PURE__ */ t("div", {
+  className: p(re.cardContent, r),
+  "data-divider": o || void 0,
+  "data-clickable": a || void 0,
+  "data-hover-highlight": i || void 0,
+  ...d,
+  children: e
+}), oe = "_cardFooter_15rlh_1", te = { cardFooter: oe }, ie = ({ children: e, className: r, divider: o, ...a }) => /* @__PURE__ */ t("div", {
+  className: p(te.cardFooter, r),
+  "data-no-divider": o === !1 || void 0,
+  ...a,
+  children: e
+}), se = "_cardHeader_yrli2_1", de = { cardHeader: se }, le = ({ children: e, className: r, ...o }) => /* @__PURE__ */ t("div", {
+  className: p(de.cardHeader, r),
+  ...o,
+  children: e
+}), ne = "_card_1cl8g_1", ce = { card: ne }, pe = ({ children: e, className: r, fullWidth: o, rounded: a, backgroundColor: i, style: d, ...m }) => /* @__PURE__ */ t("div", {
+  className: p(ce.card, r),
+  "data-full-width": o || void 0,
+  "data-rounded": a || void 0,
+  style: S(i) ? {
+    ...d,
+    "--card-background-color": i
+  } : d,
+  ...m,
+  children: e
+}), je = {
+  Root: pe,
+  Header: le,
+  Content: ae,
+  Footer: ie
+}, me = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.body, o)
+  }
+}), ue = ({ className: e, ...r }) => /* @__PURE__ */ t(n.Description, {
+  ...r,
+  className: c(s.description, e)
+}), ve = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.footer, o)
+  }
+}), ge = ({ render: e, ref: r, className: o, ...a }) => f({
+  render: e,
+  ref: r,
+  props: {
+    ...a,
+    className: p(s.header, o)
+  }
+}), _e = ({ size: e = "md", container: r, keepMounted: o, backdrop: a = !0, viewportProps: i, className: d, ...m }) => {
+  const _ = P(), h = T(), v = A(a) ? {} : a;
+  return /* @__PURE__ */ R(n.Portal, {
+    container: r === void 0 ? _ ?? void 0 : r,
+    keepMounted: o,
+    children: [a !== !1 && /* @__PURE__ */ t(n.Backdrop, {
+      ...v,
+      className: c(s.backdrop, v.className)
+    }), /* @__PURE__ */ t(n.Viewport, {
+      dir: h,
+      "data-backdrop-hidden": a === !1,
+      ...i,
+      className: c(s.viewport, i?.className),
+      children: /* @__PURE__ */ t(n.Popup, {
+        ...m,
+        "data-size": e,
+        className: c(s.popup, d)
+      })
+    })]
+  });
+}, fe = "_title_yzpck_1", he = { title: fe }, Ce = ({ level: e = 2, size: r = "lg", color: o = "primary", className: a, render: i, ...d }) => /* @__PURE__ */ t(n.Title, {
+  ...d,
+  className: c(he.title, a),
+  render: /* @__PURE__ */ t(x, {
+    level: e,
+    size: r,
+    color: o,
+    render: i
+  })
+}), Ee = {
+  createHandle: n.createHandle,
+  Root: n.Root,
+  Trigger: n.Trigger,
+  Popup: _e,
+  Title: Ce,
+  Description: ue,
+  Close: n.Close,
+  Header: ge,
+  Body: me,
+  Footer: ve
+}, C = ({ props: { color: e = "neutral", startIcon: r, endIcon: o, description: a, descriptionPlacement: i, hotkeys: d, hotkeysJoinLabel: m, disabled: _ = !1, children: h, render: v, ...N }, getListItemState: D }) => ({
+  ...N,
+  disabled: _,
+  render: (b, g) => /* @__PURE__ */ t(H, {
+    ...b,
+    render: L(v) ? (M) => v(M, g) : v,
+    color: e,
+    disabled: _,
+    startIcon: r,
+    endIcon: o,
+    description: a,
+    descriptionPlacement: i,
+    hotkeys: d,
+    hotkeysJoinLabel: m,
+    ...D?.(g),
+    children: h
+  })
+}), Ne = (e) => /* @__PURE__ */ t(l.CheckboxItem, { ...C({
+  props: e,
+  getListItemState: (r) => ({
+    indicator: "checkbox",
+    selected: r.checked
+  })
+}) }), De = (e) => /* @__PURE__ */ t(l.Item, { ...C({ props: e }) }), I = w(!1), be = {
+  root: {
+    side: "bottom",
+    align: "start",
+    sideOffset: 8,
+    alignOffset: 0
+  },
+  submenu: {
+    side: "inline-end",
+    align: "start",
+    sideOffset: 0,
+    alignOffset: -4
+  }
+}, ke = ({ side: e, align: r, sideOffset: o, alignOffset: a, anchor: i, keepMounted: d, className: m, children: _, ...h }) => {
+  const v = P(), N = T(), { container: D = v ?? void 0, ...b } = h, g = be[B(I) ? "submenu" : "root"];
+  return /* @__PURE__ */ t(l.Portal, {
+    container: D,
+    keepMounted: d,
+    children: /* @__PURE__ */ t(l.Positioner, {
+      dir: N,
+      side: e ?? g.side,
+      align: r ?? g.align,
+      sideOffset: o ?? g.sideOffset,
+      alignOffset: a ?? g.alignOffset,
+      anchor: i,
+      className: k.positioner,
+      children: /* @__PURE__ */ t(l.Popup, {
+        ...b,
+        className: c(k.popup, m),
+        children: _
+      })
+    })
+  });
+}, Pe = ({ className: e, ...r }) => /* @__PURE__ */ t(l.RadioGroup, {
+  ...r,
+  className: c(k.group, e)
+}), Te = (e) => /* @__PURE__ */ t(l.RadioItem, { ...C({
+  props: e,
+  getListItemState: (r) => ({
+    indicator: "check",
+    selected: r.checked
+  })
+}) }), Re = ({ children: e, ...r }) => /* @__PURE__ */ t(I.Provider, {
+  value: !0,
+  children: /* @__PURE__ */ t(l.SubmenuRoot, {
+    ...r,
+    children: e
+  })
+}), Ie = (e) => /* @__PURE__ */ t(l.SubmenuTrigger, { ...C({
+  props: e,
+  getListItemState: () => ({ hasSubmenu: !0 })
+}) }), Ve = {
+  Root: l.Root,
+  Trigger: l.Trigger,
+  Popup: ke,
+  Item: De,
+  CheckboxItem: Ne,
+  RadioGroup: Pe,
+  RadioItem: Te,
+  Group: y,
+  GroupLabel: F,
+  Separator: O,
+  SubmenuRoot: Re,
+  SubmenuTrigger: Ie
+};
+export {
+  Ue as i,
+  Ee as n,
+  je as r,
+  Ve as t
+};

package/dist/surfaces-iGk6vB0x.cjs

@@ -0,0 +1 @@
+const j=require("./theme-DumxXtpW.cjs"),k=require("./isDefined-DS2Q42p5.cjs"),n=require("./useProvidedTextDirection-B7ovnsdr.cjs"),q=require("./ListItem-UYe5GaEQ.cjs"),A=require("./Heading-CQqDjovJ.cjs"),x=require("./MenuSeparator-Ct3cQtJ2.cjs");let c=require("clsx"),o=require("react/jsx-runtime"),M=require("@sniptt/guards"),P=require("react"),D=require("@base-ui/react/use-render"),d=require("@base-ui/react/menu"),g=require("@base-ui/react/alert-dialog"),u=require("@base-ui/react/dialog");var I="_backdrop_aak4r_1",y="_viewport_aak4r_12",O="_popup_aak4r_30",S="_header_aak4r_82",H="_body_aak4r_91",F="_footer_aak4r_95",L="_title_aak4r_106",w="_description_aak4r_113",s={backdrop:I,viewport:y,popup:O,header:S,body:H,footer:F,title:L,description:w},B=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.body,t)}}),G=({className:e,...r})=>(0,o.jsx)(g.AlertDialog.Description,{...r,className:n.mergeClassNames(s.description,e)}),z=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.footer,t)}}),U=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.header,t)}}),E=({size:e="md",container:r,keepMounted:t,className:a,...i})=>{const l=j.useThemeContainer(),m=n.useProvidedTextDirection();return(0,o.jsxs)(g.AlertDialog.Portal,{container:r===void 0?l??void 0:r,keepMounted:t,children:[(0,o.jsx)(g.AlertDialog.Backdrop,{className:s.backdrop}),(0,o.jsx)(g.AlertDialog.Viewport,{dir:m,className:s.viewport,children:(0,o.jsx)(g.AlertDialog.Popup,{...i,"data-size":e,className:n.mergeClassNames(s.popup,a)})})]})},V=({className:e,...r})=>(0,o.jsx)(g.AlertDialog.Title,{...r,className:n.mergeClassNames(s.title,e)}),$=()=>({Root:g.AlertDialog.Root,Trigger:g.AlertDialog.Trigger,Popup:E,Title:V,Description:G,Close:g.AlertDialog.Close,Header:U,Body:B,Footer:z}),J=$(),K="_cardContent_10wri_1",Q={cardContent:K},W=({children:e,className:r,divider:t,isClickable:a,hasHoverHighlight:i,...l})=>(0,o.jsx)("div",{className:(0,c.clsx)(Q.cardContent,r),"data-divider":t||void 0,"data-clickable":a||void 0,"data-hover-highlight":i||void 0,...l,children:e}),X="_cardFooter_15rlh_1",Y={cardFooter:X},Z=({children:e,className:r,divider:t,...a})=>(0,o.jsx)("div",{className:(0,c.clsx)(Y.cardFooter,r),"data-no-divider":t===!1||void 0,...a,children:e}),ee="_cardHeader_yrli2_1",re={cardHeader:ee},ae=({children:e,className:r,...t})=>(0,o.jsx)("div",{className:(0,c.clsx)(re.cardHeader,r),...t,children:e}),te="_card_1cl8g_1",oe={card:te},ie=({children:e,className:r,fullWidth:t,rounded:a,backgroundColor:i,style:l,...m})=>(0,o.jsx)("div",{className:(0,c.clsx)(oe.card,r),"data-full-width":t||void 0,"data-rounded":a||void 0,style:k.isDefined(i)?{...l,"--card-background-color":i}:l,...m,children:e}),se={Root:ie,Header:ae,Content:W,Footer:Z},le=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.body,t)}}),ne=({className:e,...r})=>(0,o.jsx)(u.Dialog.Description,{...r,className:n.mergeClassNames(s.description,e)}),de=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.footer,t)}}),ue=({render:e,ref:r,className:t,...a})=>(0,D.useRender)({render:e,ref:r,props:{...a,className:(0,c.clsx)(s.header,t)}}),ce=({size:e="md",container:r,keepMounted:t,backdrop:a=!0,viewportProps:i,className:l,...m})=>{const v=j.useThemeContainer(),f=n.useProvidedTextDirection(),p=(0,M.isBoolean)(a)?{}:a;return(0,o.jsxs)(u.Dialog.Portal,{container:r===void 0?v??void 0:r,keepMounted:t,children:[a!==!1&&(0,o.jsx)(u.Dialog.Backdrop,{...p,className:n.mergeClassNames(s.backdrop,p.className)}),(0,o.jsx)(u.Dialog.Viewport,{dir:f,"data-backdrop-hidden":a===!1,...i,className:n.mergeClassNames(s.viewport,i?.className),children:(0,o.jsx)(u.Dialog.Popup,{...m,"data-size":e,className:n.mergeClassNames(s.popup,l)})})]})},me="_title_yzpck_1",ge={title:me},pe=({level:e=2,size:r="lg",color:t="primary",className:a,render:i,...l})=>(0,o.jsx)(u.Dialog.Title,{...l,className:n.mergeClassNames(ge.title,a),render:(0,o.jsx)(A.Heading,{level:e,size:r,color:t,render:i})}),_e={createHandle:u.Dialog.createHandle,Root:u.Dialog.Root,Trigger:u.Dialog.Trigger,Popup:ce,Title:pe,Description:ne,Close:u.Dialog.Close,Header:ue,Body:le,Footer:de},C=({props:{color:e="neutral",startIcon:r,endIcon:t,description:a,descriptionPlacement:i,hotkeys:l,hotkeysJoinLabel:m,disabled:v=!1,children:f,render:p,...N},getListItemState:b})=>({...N,disabled:v,render:(h,_)=>(0,o.jsx)(q.ListItem,{...h,render:(0,M.isFunction)(p)?R=>p(R,_):p,color:e,disabled:v,startIcon:r,endIcon:t,description:a,descriptionPlacement:i,hotkeys:l,hotkeysJoinLabel:m,...b?.(_),children:f})}),ve=e=>(0,o.jsx)(d.Menu.CheckboxItem,{...C({props:e,getListItemState:r=>({indicator:"checkbox",selected:r.checked})})}),xe=e=>(0,o.jsx)(d.Menu.Item,{...C({props:e})}),T=(0,P.createContext)(!1),De={root:{side:"bottom",align:"start",sideOffset:8,alignOffset:0},submenu:{side:"inline-end",align:"start",sideOffset:0,alignOffset:-4}},fe=({side:e,align:r,sideOffset:t,alignOffset:a,anchor:i,keepMounted:l,className:m,children:v,...f})=>{const p=j.useThemeContainer(),N=n.useProvidedTextDirection(),{container:b=p??void 0,...h}=f,_=De[(0,P.useContext)(T)?"submenu":"root"];return(0,o.jsx)(d.Menu.Portal,{container:b,keepMounted:l,children:(0,o.jsx)(d.Menu.Positioner,{dir:N,side:e??_.side,align:r??_.align,sideOffset:t??_.sideOffset,alignOffset:a??_.alignOffset,anchor:i,className:x.Menu_module_default.positioner,children:(0,o.jsx)(d.Menu.Popup,{...h,className:n.mergeClassNames(x.Menu_module_default.popup,m),children:v})})})},Ce=({className:e,...r})=>(0,o.jsx)(d.Menu.RadioGroup,{...r,className:n.mergeClassNames(x.Menu_module_default.group,e)}),Ne=e=>(0,o.jsx)(d.Menu.RadioItem,{...C({props:e,getListItemState:r=>({indicator:"check",selected:r.checked})})}),be=({children:e,...r})=>(0,o.jsx)(T.Provider,{value:!0,children:(0,o.jsx)(d.Menu.SubmenuRoot,{...r,children:e})}),he=e=>(0,o.jsx)(d.Menu.SubmenuTrigger,{...C({props:e,getListItemState:()=>({hasSubmenu:!0})})}),je={Root:d.Menu.Root,Trigger:d.Menu.Trigger,Popup:fe,Item:xe,CheckboxItem:ve,RadioGroup:Ce,RadioItem:Ne,Group:x.MenuGroup,GroupLabel:x.MenuGroupLabel,Separator:x.MenuSeparator,SubmenuRoot:be,SubmenuTrigger:he};Object.defineProperty(exports,"AlertDialog",{enumerable:!0,get:function(){return J}});Object.defineProperty(exports,"Card",{enumerable:!0,get:function(){return se}});Object.defineProperty(exports,"Dialog",{enumerable:!0,get:function(){return _e}});Object.defineProperty(exports,"Menu",{enumerable:!0,get:function(){return je}});

package/dist/testing.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./theme-DNG4OSBd.cjs"),B=require("./isDefined-DS2Q42p5.cjs");let v=require("clsx"),A=require("react/jsx-runtime"),_=require("@sniptt/guards");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 h=require("./theme-DumxXtpW.cjs"),B=require("./isDefined-DS2Q42p5.cjs");let v=require("clsx"),A=require("react/jsx-runtime"),_=require("@sniptt/guards");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;

package/dist/testing.mjs

@@ -1,5 +1,5 @@
 import { t as w } from "./isDefined-fMi6eQ4r.js";
-import { a as Q } from "./theme-DBro6iwF.js";
+import { a as Q } from "./theme-CjHovJAZ.js";
 import { clsx as _ } from "clsx";
 import { jsx as a, jsxs as m } from "react/jsx-runtime";
 import { isFunction as U, isNumber as v, isString as V } from "@sniptt/guards";

package/dist/theme/constants/MainColorNames.d.ts

@@ -1,2 +1,2 @@
 export type ThemeColor = 'red' | 'ruby' | 'crimson' | 'tomato' | 'orange' | 'amber' | 'yellow' | 'lime' | 'grass' | 'green' | 'jade' | 'mint' | 'turquoise' | 'cyan' | 'sky' | 'blue' | 'iris' | 'violet' | 'purple' | 'plum' | 'pink' | 'bronze' | 'gold' | 'brown' | 'gray';
-export declare const MAIN_COLOR_NAMES: ThemeColor[];
+export declare const MAIN_COLOR_NAMES: [ThemeColor, ...ThemeColor[]];

package/dist/theme/constants/ThemeCommon.d.ts

@@ -17,6 +17,9 @@ export declare const THEME_COMMON: {
             sm: {
                 width: string;
             };
+            compact: {
+                width: string;
+            };
             md: {
                 width: string;
             };

package/dist/theme/constants/ThemeLight.d.ts

@@ -17,6 +17,9 @@ export declare const THEME_LIGHT: {
             sm: {
                 width: string;
             };
+            compact: {
+                width: string;
+            };
             md: {
                 width: string;
             };
@@ -153,6 +156,7 @@ export declare const THEME_LIGHT: {
         color: string;
         light: string;
         sidebar: string;
+        bottomPanel: string;
         strong: string;
         underline: string;
         superHeavy: string;

package/dist/theme/getNextThemeColor.d.ts

@@ -1,2 +1,2 @@
 import { ThemeColor } from './constants/MainColorNames';
-export declare const getNextThemeColor: (colorNames: ThemeColor[], currentColor?: ThemeColor) => ThemeColor;
+export declare const getNextThemeColor: (colorNames: [ThemeColor, ...ThemeColor[]], currentColor?: ThemeColor) => ThemeColor;

package/dist/theme/themeCssVariables.d.ts

@@ -17,6 +17,9 @@ export declare const themeCssVariables: {
             sm: {
                 width: string;
             };
+            compact: {
+                width: string;
+            };
             md: {
                 width: string;
             };
@@ -189,6 +192,7 @@ export declare const themeCssVariables: {
         color: string;
         light: string;
         sidebar: string;
+        bottomPanel: string;
         strong: string;
         underline: string;
         superHeavy: string;

package/dist/theme/themeTypes.d.ts

@@ -17,6 +17,9 @@ export type ThemeType = {
             sm: {
                 width: string;
             };
+            compact: {
+                width: string;
+            };
             md: {
                 width: string;
             };
@@ -189,6 +192,7 @@ export type ThemeType = {
         color: string;
         light: string;
         sidebar: string;
+        bottomPanel: string;
         strong: string;
         underline: string;
         superHeavy: string;

package/dist/{theme-DBro6iwF.js → theme-CjHovJAZ.js}

@@ -79,6 +79,7 @@ var Z = { duration: {
   },
   modal: { size: {
     sm: { width: "300px" },
+    compact: { width: "360px" },
     md: { width: "400px" },
     lg: { width: "53%" },
     xl: {
@@ -140,6 +141,7 @@ var Z = { duration: {
   },
   modal: { size: {
     sm: { width: "300px" },
+    compact: { width: "360px" },
     md: { width: "400px" },
     lg: { width: "53%" },
     xl: {
@@ -267,6 +269,7 @@ var Z = { duration: {
     color: "rgba(0, 0, 0, 0.6)",
     light: "0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)",
     sidebar: "-4px 4px 4px 0px rgba(0, 0, 0, 0.03)",
+    bottomPanel: "0px 0px 20px 0px rgba(0, 0, 0, 0.1)",
     strong: "2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)",
     underline: "0px 1px 0px 0px rgba(0, 0, 0, 0.32)",
     superHeavy: "2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)"
@@ -1185,6 +1188,7 @@ var Z = { duration: {
   },
   modal: { size: {
     sm: { width: "300px" },
+    compact: { width: "360px" },
     md: { width: "400px" },
     lg: { width: "53%" },
     xl: {
@@ -1312,6 +1316,7 @@ var Z = { duration: {
     color: "color(display-p3 0 0 0 / 0.039)",
     light: "0px 2px 4px 0px color(display-p3 0 0 0 / 0.039), 0px 0px 4px 0px color(display-p3 0 0 0 / 0.078)",
     sidebar: "-4px 4px 4px 0px rgba(0, 0, 0, 0.005)",
+    bottomPanel: "0px 0px 20px 0px color(display-p3 0 0 0 / 0.1)",
     strong: "2px 4px 16px 0px color(display-p3 0 0 0 / 0.161), 0px 2px 4px 0px color(display-p3 0 0 0 / 0.078)",
     underline: "0px 1px 0px 0px color(display-p3 0 0 0 / 0.361)",
     superHeavy: "0px 0px 8px 0px color(display-p3 0 0 0 / 0.161), 0px 8px 64px -16px color(display-p3 0 0 0 / 0.478), 0px 24px 56px -16px color(display-p3 0 0 0 / 0.078)"
@@ -2214,7 +2219,10 @@ var Z = { duration: {
       amber12: "#341500dd"
     }
   }
-}, er = (r, o) => o == null ? r[0] : r[(r.findIndex((a) => a === o) + 1) % r.length], v = {
+}, er = (r, o) => {
+  const [a] = r;
+  return o == null ? a : r[(r.findIndex((l) => l === o) + 1) % r.length] ?? a;
+}, v = {
   icon: {
     size: {
       sm: "var(--t-icon-size-sm)",
@@ -2230,6 +2238,7 @@ var Z = { duration: {
   },
   modal: { size: {
     sm: { width: "var(--t-modal-size-sm-width)" },
+    compact: { width: "var(--t-modal-size-compact-width)" },
     md: { width: "var(--t-modal-size-md-width)" },
     lg: { width: "var(--t-modal-size-lg-width)" },
     xl: {
@@ -2393,6 +2402,7 @@ var Z = { duration: {
     color: "var(--t-box-shadow-color)",
     light: "var(--t-box-shadow-light)",
     sidebar: "var(--t-box-shadow-sidebar)",
+    bottomPanel: "var(--t-box-shadow-bottom-panel)",
     strong: "var(--t-box-shadow-strong)",
     underline: "var(--t-box-shadow-underline)",
     superHeavy: "var(--t-box-shadow-super-heavy)"
@@ -3303,16 +3313,16 @@ var Z = { duration: {
   if (typeof document > "u" || typeof getComputedStyle != "function") return v;
   const o = getComputedStyle(r ?? document.documentElement), a = (l) => {
     const t = {};
-    for (const [s, p] of Object.entries(l)) {
+    for (const [c, p] of Object.entries(l)) {
       if (G(p) && p.startsWith("var(")) {
         const i = p.slice(4, -1);
-        t[s] = _({
+        t[c] = _({
           cssVariableReference: p,
           computedValue: o.getPropertyValue(i).trim()
         });
         continue;
       }
-      t[s] = B(p) ? a(p) : p;
+      t[c] = B(p) ? a(p) : p;
     }
     return t;
   };
@@ -3331,24 +3341,24 @@ var Z = { duration: {
   if (typeof document > "u") return;
   const o = document.documentElement;
   o?.classList && (o.classList.toggle("dark", r === "dark"), o.classList.toggle("light", r === "light"));
-}, pr = ({ children: r, colorScheme: o, applyToRoot: a = !0, overrides: l, className: t, scale: s, theme: p }) => {
-  const i = b(), j = q(), c = n(l) || !a, f = e.useContext(i), d = e.useMemo(() => n(p) ? W(p) : void 0, [p]) ?? f.explicitTheme, g = n(d), u = e.useRef(null), [C, S] = e.useState(() => (a && z(o), g ? void 0 : h())), [T, I] = e.useState(null), M = n(l) ? JSON.stringify(l) : "";
+}, pr = ({ children: r, colorScheme: o, applyToRoot: a = !0, overrides: l, className: t, scale: c, theme: p }) => {
+  const i = b(), j = q(), s = n(l) || !a, f = e.useContext(i), d = e.useMemo(() => n(p) ? W(p) : void 0, [p]) ?? f.explicitTheme, g = n(d), u = e.useRef(null), [C, S] = e.useState(() => (a && z(o), g ? void 0 : h())), [T, I] = e.useState(null), M = n(l) ? JSON.stringify(l) : "";
   e.useLayoutEffect(() => {
-    a && z(o), g || S(h(c ? u.current ?? void 0 : void 0)), I(c ? u.current : null);
+    a && z(o), g || S(h(s ? u.current ?? void 0 : void 0)), I(s ? u.current : null);
   }, [
     o,
     a,
-    c,
+    s,
     M,
     g
   ]), e.useLayoutEffect(() => {
-    if (typeof document > "u" || c || !n(s)) return;
-    const x = document.documentElement;
-    return x.style.setProperty("--t-scale-user", String(s)), () => {
-      x.style.removeProperty("--t-scale-user");
+    if (typeof document > "u" || s || !n(c)) return;
+    const w = document.documentElement;
+    return w.style.setProperty("--t-scale-user", String(c)), () => {
+      w.style.removeProperty("--t-scale-user");
     };
-  }, [s, c]);
-  const k = d ?? C ?? f.theme, w = e.useMemo(() => ({
+  }, [c, s]);
+  const k = d ?? C ?? f.theme, x = e.useMemo(() => ({
     theme: k,
     colorScheme: o,
     explicitTheme: d
@@ -3357,13 +3367,13 @@ var Z = { duration: {
     o,
     d
   ]);
-  if (!c) return /* @__PURE__ */ y(i.Provider, {
-    value: w,
+  if (!s) return /* @__PURE__ */ y(i.Provider, {
+    value: x,
     children: r
   });
   const E = l ?? {};
   return /* @__PURE__ */ y(i.Provider, {
-    value: w,
+    value: x,
     children: /* @__PURE__ */ y(j.Provider, {
       value: T,
       children: /* @__PURE__ */ y("div", {
@@ -3377,7 +3387,7 @@ var Z = { duration: {
       })
     })
   });
-}, tr = () => e.useContext(b()).theme, sr = () => e.useContext(b()).colorScheme, cr = () => e.useContext(q());
+}, tr = () => e.useContext(b()).theme, cr = () => e.useContext(b()).colorScheme, sr = () => e.useContext(q());
 export {
   v as a,
   ar as c,
@@ -3388,11 +3398,11 @@ export {
   pr as i,
   or as l,
   J as m,
-  sr as n,
+  cr as n,
   er as o,
   U as p,
   tr as r,
   lr as s,
-  cr as t,
+  sr as t,
   rr as u
 };