@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),$=require("../DatePicker/DatePicker.cjs"),w=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const v=require("../Field/FieldHint.cjs"),E=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const g=require("../Flex/Flex.cjs"),N=require("../hooks/useControllableState.cjs"),V=require("../hooks/useId.cjs"),_=require("../TimePicker/TimePicker.cjs"),z=({ariaLabel:l,clearLabel:s="clear",disabled:p=!1,error:c,hint:d,id:h,label:u,labelAction:x,onChange:f,onClear:m,name:q,required:F=!1,selectButtonTitle:b="select",size:D="M",step:k=1,value:T,...C})=>{const P=A(T),[t,a]=N.useControllableState({prop:P,onChange:f}),r=t?`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`:void 0,I=e=>{if(r){const[n,j]=r.split(":");e.setHours(parseInt(n,10)),e.setMinutes(parseInt(j,10))}a(e)},S=e=>{const n=t?new Date(t):new Date,[j,y]=e.split(":");n.setHours(parseInt(j,10)),n.setMinutes(parseInt(y,10)),a(n)},H=()=>{a(void 0),m&&m()},M=()=>{let e=t?new Date(t):new Date;e.setHours(0),e.setMinutes(0),a(e)},o=V.useId(h);return i.jsx(w.Field,{name:q,role:"group",id:o,"aria-labelledby":o,hint:d,error:c,required:F,children:i.jsxs(g.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i.jsx(L.FieldLabel,{action:x,children:u}),i.jsxs(g.Flex,{gap:2,children:[i.jsx($.DatePicker,{ariaLabel:u||l,selectedDate:t,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:I,error:typeof c=="string",hint:typeof d=="string",required:F,size:D,onClear:H,clearLabel:`${s} date`,disabled:p,id:o,...C}),i.jsx(_.TimePicker,{size:D,"aria-label":u||l,error:typeof c=="string",hint:typeof d=="string",value:r,onChange:S,onClear:r!==void 0&&r!=="0:0:0"?M:void 0,clearLabel:`${s} time`,required:F,selectButtonTitle:b,disabled:p,step:k,id:o})]}),i.jsx(v.FieldHint,{}),i.jsx(E.FieldError,{})]})})},A=l=>{const s=Date.parse(l);if(!Number.isNaN(s))return new Date(s)};exports.DateTimePicker=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("react"),d=require("@internationalized/date"),U=require("styled-components"),A=require("../DatePicker/DatePicker.cjs"),G=require("../DesignSystemProvider.cjs"),J=require("../helpers/deprecations.cjs"),K=require("../hooks/useControllableState.cjs"),Q=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),W=require("../TimePicker/TimePicker.cjs"),X=require("../Field/Field.cjs"),P=require("../Flex/Flex.cjs"),Y=require("../Field/FieldLabel.cjs"),j=require("../VisuallyHidden/VisuallyHidden.cjs"),ee=require("../Field/FieldHint.cjs"),te=require("../Field/FieldError.cjs"),w=e=>e&&e.__esModule?e:{default:e},ne=w(E),S=w(U),re=({ariaLabel:e,clearLabel:u="clear",dateLabel:D="Choose date",timeLabel:o="Choose time",disabled:l=!1,error:p,hint:L,id:_,label:V,labelAction:H,onChange:q,onClear:m,name:R,required:g=!1,selectButtonTitle:oe,size:I="M",step:$,value:T,initialDate:y,...v})=>{const F=ne.default.useRef(null),[r,f]=K.useControllableState({defaultProp:y?a(y,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(t){q&&q(t?.toDate(d.getLocalTimeZone()))}}),M=G.useDesignSystem("DateTimePicker"),N=Q.useDateFormatter(M.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),c=r?N.format(r.toDate(d.getLocalTimeZone())):"",O=t=>{let i=t?a(t):void 0;if(!(i&&r&&i.compare(r)===0)){if(c&&i){const[h,b]=c.split(":");i=i.set({hour:parseInt(h,10),minute:parseInt(b,10)})}f(i)}},Z=t=>{if(!t)return;const[i,h]=t.split(":"),b=r?r.set({hour:parseInt(i,10),minute:parseInt(h,10)}):a(new Date).set({hour:parseInt(i,10),minute:parseInt(h,10)});f(b)},z=t=>{f(void 0),m&&m(t)},B=()=>{const t=r?r.set({hour:0,minute:0}):a(new Date);f(t)},s=x.useId(_),k=x.useId(),C=x.useId();return n.jsx(X.Field,{name:R,as:"fieldset",id:s,"aria-labelledby":s,hint:L,error:p,required:g,children:n.jsxs(P.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(Y.FieldLabel,{onClick:()=>{F.current.focus()},as:"legend",id:s,action:H,children:V}),n.jsxs(P.Flex,{flex:"1",gap:1,children:[n.jsx(j.VisuallyHidden,{as:"label",htmlFor:C,children:D}),n.jsx(se,{...v,selectedDate:r?.toDate(d.getLocalTimeZone()),onChange:O,error:typeof p=="string",required:g,size:I,onClear:m?z:void 0,clearLabel:`${u} date`,disabled:l,id:C,ref:F,"aria-describedby":`${s}-hint ${s}-error`}),n.jsx(j.VisuallyHidden,{as:"label",htmlFor:k,children:o}),n.jsx(ae,{size:I,error:typeof p=="string",value:c,onChange:Z,onClear:m&&c!==void 0&&c!=="00:00"?B:void 0,clearLabel:`${u} time`,required:g,disabled:l,step:$,id:k,"aria-describedby":`${s}-hint ${s}-error`})]}),n.jsx(ee.FieldHint,{}),n.jsx(te.FieldError,{})]})})},ie=J.once(console.warn),a=(e,u=!0)=>{if(typeof e=="string"){ie("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");const l=Date.parse(e);Number.isNaN(l)?e=new Date:e=new Date(l)}const D=e.toISOString();let o=d.parseAbsoluteToLocal(D);return u&&(o=o.set({hour:0,minute:0})),d.toCalendarDateTime(o)},se=S.default(A.DatePickerInput)`
+  flex: 1 1 70%;
+  min-width: 120px;
+`,ae=S.default(W.TimePickerInput)`
+  flex: 1 1 30%;
+  min-width: 120px;
+`;exports.DateTimePicker=re;exports.convertUTCDateToCalendarDateTime=a;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,107 +1,100 @@
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { DatePicker as P } from "../DatePicker/DatePicker.js";
-import { Field as V } from "../Field/Field.js";
-import { FieldLabel as j } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as q } from "../Field/FieldHint.js";
-import { FieldError as v } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { useControllableState as z } from "../hooks/useControllableState.js";
-import { useId as B } from "../hooks/useId.js";
-import { TimePicker as E } from "../TimePicker/TimePicker.js";
-const te = ({
-  ariaLabel: s,
-  clearLabel: n = "clear",
-  disabled: f = !1,
-  error: d,
-  hint: m,
-  id: b,
-  label: c,
-  labelAction: I,
-  onChange: T,
-  onClear: g,
-  name: $,
-  required: p = !1,
-  selectButtonTitle: w = "select",
-  size: h = "M",
-  step: y = 1,
-  value: F,
-  ...H
+import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import U from "react";
+import { getLocalTimeZone as b, parseAbsoluteToLocal as Z, toCalendarDateTime as v } from "@internationalized/date";
+import $ from "styled-components";
+import { DatePickerInput as G } from "../DatePicker/DatePicker.js";
+import { useDesignSystem as J } from "../DesignSystemProvider.js";
+import { once as K } from "../helpers/deprecations.js";
+import { useControllableState as Q } from "../hooks/useControllableState.js";
+import { useDateFormatter as W } from "../hooks/useDateFormatter.js";
+import { useId as I } from "../hooks/useId.js";
+import { TimePickerInput as X } from "../TimePicker/TimePicker.js";
+import { Field as Y } from "../Field/Field.js";
+import { Flex as L } from "../Flex/Flex.js";
+import { FieldLabel as ee } from "../Field/FieldLabel.js";
+import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldHint as te } from "../Field/FieldHint.js";
+import { FieldError as re } from "../Field/FieldError.js";
+const xe = ({
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: n,
+  clearLabel: d = "clear",
+  dateLabel: p = "Choose date",
+  timeLabel: a = "Choose time",
+  disabled: s = !1,
+  error: h,
+  hint: V,
+  id: _,
+  label: N,
+  labelAction: R,
+  onChange: k,
+  onClear: c,
+  name: j,
+  required: D = !1,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectButtonTitle: ae,
+  size: C = "M",
+  step: z,
+  value: g,
+  initialDate: w,
+  ...B
 }) => {
-  const M = A(F), [t, a] = z({
-    prop: M,
-    onChange: T
-  }), i = t ? `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}` : void 0, k = (e) => {
-    if (i) {
-      const [o, u] = i.split(":");
-      e.setHours(parseInt(o, 10)), e.setMinutes(parseInt(u, 10));
+  const x = U.useRef(null), [t, f] = Q({
+    defaultProp: w ? m(w, !1) : void 0,
+    prop: g ? m(g, !1) : g ?? void 0,
+    onChange(e) {
+      k && k(e?.toDate(b()));
     }
-    a(e);
-  }, x = (e) => {
-    const o = t ? new Date(t) : new Date(), [u, N] = e.split(":");
-    o.setHours(parseInt(u, 10)), o.setMinutes(parseInt(N, 10)), a(o);
-  }, S = () => {
-    a(void 0), g && g();
-  }, L = () => {
-    let e = t ? new Date(t) : new Date();
-    e.setHours(0), e.setMinutes(0), a(e);
-  }, l = B(b);
-  return r(V, {
-    name: $,
-    role: "group",
-    id: l,
-    "aria-labelledby": l,
-    hint: m,
-    error: d,
-    required: p,
-    children: D(C, {
-      direction: "column",
-      alignItems: "stretch",
-      gap: 1,
-      children: [r(j, {
-        action: I,
-        children: c
-      }), D(C, {
-        gap: 2,
-        children: [r(P, {
-          ariaLabel: c || s,
-          selectedDate: t,
-          selectedDateLabel: (e) => `Date picker, current is ${e}`,
-          onChange: k,
-          error: typeof d == "string",
-          hint: typeof m == "string",
-          required: p,
-          size: h,
-          onClear: S,
-          clearLabel: `${n} date`,
-          disabled: f,
-          id: l,
-          ...H
-        }), r(E, {
-          size: h,
-          "aria-label": c || s,
-          error: typeof d == "string",
-          hint: typeof m == "string",
-          value: i,
-          onChange: x,
-          onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
-          clearLabel: `${n} time`,
-          required: p,
-          selectButtonTitle: w,
-          disabled: f,
-          step: y,
-          id: l
-        })]
-      }), r(q, {}), r(v, {})]
-    })
-  });
-}, A = (s) => {
-  const n = Date.parse(s);
-  if (!Number.isNaN(n))
-    return new Date(n);
-};
+  }), H = J("DateTimePicker"), O = W(H.locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !1
+  }), l = t ? O.format(t.toDate(b())) : "", q = (e) => {
+    let r = e ? m(e) : void 0;
+    if (!(r && t && r.compare(t) === 0)) {
+      if (l && r) {
+        const [u, T] = l.split(":");
+        r = r.set({ hour: parseInt(u, 10), minute: parseInt(T, 10) });
+      }
+      f(r);
+    }
+  }, A = (e) => {
+    if (!e)
+      return;
+    const [r, u] = e.split(":"), T = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(u, 10) }) : m(/* @__PURE__ */ new Date()).set({ hour: parseInt(r, 10), minute: parseInt(u, 10) });
+    f(T);
+  }, E = (e) => {
+    f(void 0), c && c(e);
+  }, M = () => {
+    const e = t ? t.set({ hour: 0, minute: 0 }) : m(/* @__PURE__ */ new Date());
+    f(e);
+  }, i = I(_), y = I(), F = I();
+  return o(Y, { name: j, as: "fieldset", id: i, "aria-labelledby": i, hint: V, error: h, required: D, children: P(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [o(ee, { onClick: () => {
+    x.current.focus();
+  }, as: "legend", id: i, action: R, children: N }), P(L, { flex: "1", gap: 1, children: [o(S, { as: "label", htmlFor: F, children: p }), o(ie, { ...B, selectedDate: t?.toDate(b()), onChange: q, error: typeof h == "string", required: D, size: C, onClear: c ? E : void 0, clearLabel: `${d} date`, disabled: s, id: F, ref: x, "aria-describedby": `${i}-hint ${i}-error` }), o(S, { as: "label", htmlFor: y, children: a }), o(ne, { size: C, error: typeof h == "string", value: l, onChange: A, onClear: c && l !== void 0 && l !== "00:00" ? M : void 0, clearLabel: `${d} time`, required: D, disabled: s, step: z, id: y, "aria-describedby": `${i}-hint ${i}-error` })] }), o(te, {}), o(re, {})] }) });
+}, oe = K(console.warn), m = (n, d = !0) => {
+  if (typeof n == "string") {
+    oe("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
+    const s = Date.parse(n);
+    Number.isNaN(s) ? n = /* @__PURE__ */ new Date() : n = new Date(s);
+  }
+  const p = n.toISOString();
+  let a = Z(p);
+  return d && (a = a.set({ hour: 0, minute: 0 })), v(a);
+}, ie = $(G)`
+  flex: 1 1 70%;
+  min-width: 120px;
+`, ne = $(X)`
+  flex: 1 1 30%;
+  min-width: 120px;
+`;
 export {
-  te as DateTimePicker
+  xe as DateTimePicker,
+  m as convertUTCDateToCalendarDateTime
 };

package/dist/DateTimePicker/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateTimePicker.cjs");exports.DateTimePicker=e.DateTimePicker;exports.convertUTCDateToCalendarDateTime=e.convertUTCDateToCalendarDateTime;

package/dist/DateTimePicker/index.js

@@ -1,4 +1,5 @@
-import { DateTimePicker as i } from "./DateTimePicker.js";
+import { DateTimePicker as r, convertUTCDateToCalendarDateTime as t } from "./DateTimePicker.js";
 export {
-  i as DateTimePicker
+  r as DateTimePicker,
+  t as convertUTCDateToCalendarDateTime
 };

package/dist/DesignSystemProvider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./helpers/context.cjs"),s=require("./ThemeProvider/ThemeProvider.cjs"),t="en-EN",r=()=>typeof navigator>"u"?t:navigator.language?navigator.language:t,[a,u]=o.createContext("StrapiDesignSystem",{locale:r()}),c=({locale:n=r(),...i})=>e.jsx(a,{locale:n,children:e.jsx(s.ThemeProvider,{...i})});exports.DesignSystemProvider=c;exports.useDesignSystem=u;

package/dist/DesignSystemProvider.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as i } from "./helpers/context.js";
+import { ThemeProvider as a } from "./ThemeProvider/ThemeProvider.js";
+const r = "en-EN", t = () => typeof navigator > "u" ? r : navigator.language ? navigator.language : r, [s, l] = i("StrapiDesignSystem", {
+  locale: t()
+}), u = ({ locale: o = t(), ...n }) => e(s, { locale: o, children: e(a, { ...n }) });
+export {
+  u as DesignSystemProvider,
+  l as useDesignSystem
+};

package/dist/Dialog/Dialog.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("prop-types"),m=require("styled-components"),r=require("../Box/Box.cjs"),b=require("../DismissibleLayer/DismissibleLayer.cjs"),q=require("../Flex/Flex.cjs"),h=require("../FocusTrap/FocusTrap.cjs"),x=require("../helpers/setOpacity.cjs"),D=require("../hooks/useId.cjs"),T=require("../hooks/useLockScroll.cjs"),j=require("../Portal/Portal.cjs"),E=require("../Typography/Typography.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=s(y),a=s(g),l=s(m),P=l.default(r.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("styled-components"),p=require("../DismissibleLayer/index.cjs"),x=require("../helpers/setOpacity.cjs"),g=require("../hooks/useId.cjs"),h=require("../hooks/useLockScroll.cjs"),y=require("../FocusTrap/FocusTrap.cjs"),o=require("../Box/Box.cjs"),b=require("../Flex/Flex.cjs"),f=require("../Portal/Portal.cjs"),j=require("../Typography/Typography.cjs"),q=e=>e&&e.__esModule?e:{default:e},t=q(c),m=t.default(o.Box)`
   inset: 0;
   background: ${({theme:e})=>x.setOpacity(e.colors.neutral800,.2)};
-`,_=l.default(r.Box)`
+`,D=t.default(o.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,F=l.default(q.Flex)`
+`,w=t.default(b.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,o=({onClose:e,title:n,as:c,isOpen:i,id:d,...p})=>{const f=D.useId(d);if(T(i),!i)return null;const u=`${f}-label`;return t.default.createElement(j.Portal,null,t.default.createElement(P,{padding:8,position:"fixed",zIndex:4},t.default.createElement(h.FocusTrap,null,t.default.createElement(b.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e},t.default.createElement(_,{"aria-labelledby":u,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog"},t.default.createElement(F,{padding:6,justifyContent:"center"},t.default.createElement(E.Typography,{variant:"beta",as:c||"h2",id:u},n)),t.default.createElement(r.Box,{...p}))))))};o.displayName="Dialog";o.defaultProps={as:"h2",id:void 0};o.propTypes={as:a.default.string,id:a.default.oneOfType([a.default.string,a.default.number]),isOpen:a.default.bool.isRequired,onClose:a.default.func.isRequired,title:a.default.string.isRequired};exports.Dialog=o;
+`,B=({onClose:e,title:i,as:s="h2",isOpen:n,id:l,...d})=>{const u=g.useId(l);if(h(n),!n)return null;const a=`${u}-label`;return r.jsx(f.Portal,{children:r.jsx(m,{padding:8,position:"fixed",zIndex:4,children:r.jsx(y.FocusTrap,{children:r.jsx(p.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e,children:r.jsxs(D,{"aria-labelledby":a,"aria-modal":!0,background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog",children:[r.jsx(w,{padding:6,justifyContent:"center",children:r.jsx(j.Typography,{variant:"beta",as:s,id:a,children:i})}),r.jsx(o.Box,{...d})]})})})})})};exports.Dialog=B;

package/dist/Dialog/Dialog.js

@@ -1,56 +1,31 @@
-import e from "react";
-import o from "prop-types";
-import t from "styled-components";
-import { Box as a } from "../Box/Box.js";
-import { DismissibleLayer as c } from "../DismissibleLayer/DismissibleLayer.js";
-import { Flex as f } from "../Flex/Flex.js";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import e from "styled-components";
+import { DismissibleLayer as c } from "../DismissibleLayer/index.js";
+import { setOpacity as u } from "../helpers/setOpacity.js";
+import { useId as f } from "../hooks/useId.js";
+import h from "../hooks/useLockScroll.js";
 import { FocusTrap as g } from "../FocusTrap/FocusTrap.js";
-import { setOpacity as y } from "../helpers/setOpacity.js";
-import { useId as b } from "../hooks/useId.js";
-import E from "../hooks/useLockScroll.js";
-import { Portal as h } from "../Portal/Portal.js";
-import { Typography as D } from "../Typography/Typography.js";
-const x = t(a)`
+import { Box as i } from "../Box/Box.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { Portal as x } from "../Portal/Portal.js";
+import { Typography as y } from "../Typography/Typography.js";
+const D = e(i)`
   inset: 0;
-  background: ${({ theme: r }) => y(r.colors.neutral800, 0.2)};
-`, w = t(a)`
+  background: ${({ theme: r }) => u(r.colors.neutral800, 0.2)};
+`, w = e(i)`
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`, R = t(f)`
+`, $ = e(b)`
   border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, i = ({ onClose: r, title: m, as: s, isOpen: n, id: d, ...p }) => {
-  const u = b(d);
-  if (E(n), !n)
+`, C = ({ onClose: r, title: n, as: l = "h2", isOpen: t, id: d, ...m }) => {
+  const s = f(d);
+  if (h(t), !t)
     return null;
-  const l = `${u}-label`;
-  return /* @__PURE__ */ e.createElement(h, null, /* @__PURE__ */ e.createElement(x, { padding: 8, position: "fixed", zIndex: 4 }, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(c, { onEscapeKeyDown: r, onPointerDownOutside: r }, /* @__PURE__ */ e.createElement(
-    w,
-    {
-      "aria-labelledby": l,
-      "aria-modal": !0,
-      background: "neutral0",
-      hasRadius: !0,
-      shadow: "popupShadow",
-      role: "dialog"
-    },
-    /* @__PURE__ */ e.createElement(R, { padding: 6, justifyContent: "center" }, /* @__PURE__ */ e.createElement(D, { variant: "beta", as: s || "h2", id: l }, m)),
-    /* @__PURE__ */ e.createElement(a, { ...p })
-  )))));
-};
-i.displayName = "Dialog";
-i.defaultProps = {
-  as: "h2",
-  id: void 0
-};
-i.propTypes = {
-  as: o.string,
-  id: o.oneOfType([o.string, o.number]),
-  isOpen: o.bool.isRequired,
-  onClose: o.func.isRequired,
-  title: o.string.isRequired
+  const a = `${s}-label`;
+  return o(x, { children: o(D, { padding: 8, position: "fixed", zIndex: 4, children: o(g, { children: o(c, { onEscapeKeyDown: r, onPointerDownOutside: r, children: p(w, { "aria-labelledby": a, "aria-modal": !0, background: "neutral0", hasRadius: !0, shadow: "popupShadow", role: "dialog", children: [o($, { padding: 6, justifyContent: "center", children: o(y, { variant: "beta", as: l, id: a, children: n }) }), o(i, { ...m })] }) }) }) }) });
 };
 export {
-  i as Dialog
+  C as Dialog
 };

package/dist/Dialog/DialogBody.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),r=require("prop-types"),c=require("styled-components"),l=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(s),n=d(r),u=d(c),p=u.default(l.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("styled-components"),n=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},r=i(d),l=r.default(n.Box)`
   svg {
     width: ${({theme:e})=>e.spaces[6]};
     height: ${({theme:e})=>e.spaces[6]};
@@ -7,4 +7,4 @@
       fill: ${({theme:e})=>e.colors.danger600};
     }
   }
-`,t=({children:e,icon:a})=>o.default.createElement(l.Box,{paddingTop:8,paddingBottom:8,paddingLeft:6,paddingRight:6},a&&o.default.createElement(p,{paddingBottom:2},o.default.createElement(i.Flex,{justifyContent:"center"},a)),e);t.displayName="DialogBody";t.defaultProps={icon:void 0};t.propTypes={children:n.default.node.isRequired,icon:n.default.node};exports.DialogBody=t;
+`,a=({children:e,icon:o})=>t.jsxs(n.Box,{paddingTop:8,paddingBottom:8,paddingLeft:6,paddingRight:6,children:[o&&t.jsx(l,{paddingBottom:2,children:t.jsx(s.Flex,{justifyContent:"center",children:o})}),e]});exports.DialogBody=a;

package/dist/Dialog/DialogBody.js

@@ -1,26 +1,17 @@
-import o from "react";
-import i from "prop-types";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import n from "styled-components";
-import { Box as d } from "../Box/Box.js";
-import { Flex as p } from "../Flex/Flex.js";
-const a = n(d)`
+import { Box as r } from "../Box/Box.js";
+import { Flex as e } from "../Flex/Flex.js";
+const p = n(r)`
   svg {
-    width: ${({ theme: e }) => e.spaces[6]};
-    height: ${({ theme: e }) => e.spaces[6]};
+    width: ${({ theme: o }) => o.spaces[6]};
+    height: ${({ theme: o }) => o.spaces[6]};
 
     path {
-      fill: ${({ theme: e }) => e.colors.danger600};
+      fill: ${({ theme: o }) => o.colors.danger600};
     }
   }
-`, t = ({ children: e, icon: r }) => /* @__PURE__ */ o.createElement(d, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6 }, r && /* @__PURE__ */ o.createElement(a, { paddingBottom: 2 }, /* @__PURE__ */ o.createElement(p, { justifyContent: "center" }, r)), e);
-t.displayName = "DialogBody";
-t.defaultProps = {
-  icon: void 0
-};
-t.propTypes = {
-  children: i.node.isRequired,
-  icon: i.node
-};
+`, c = ({ children: o, icon: t }) => d(r, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [t && i(p, { paddingBottom: 2, children: i(e, { justifyContent: "center", children: t }) }), o] });
 export {
-  t as DialogBody
+  c as DialogBody
 };

package/dist/Dialog/DialogFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),s=require("prop-types"),c=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=o(a),l=o(s),u=o(c),p=u.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),n=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(r),u=i.default(n.Box)`
   border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
 
   button {
@@ -6,4 +6,4 @@
     display: inline-flex;
     justify-content: center;
   }
-`,t=({startAction:e,endAction:n})=>r.default.createElement(p,{padding:4},r.default.createElement(i.Flex,{gap:2},e,n));t.displayName="DialogFooter";t.defaultProps={endAction:void 0,startAction:void 0};t.propTypes={endAction:l.default.node,startAction:l.default.node};exports.DialogFooter=t;
+`,d=({startAction:e,endAction:o})=>t.jsx(u,{padding:4,children:t.jsxs(l.Flex,{gap:2,children:[e,o]})});exports.DialogFooter=d;

package/dist/Dialog/DialogFooter.js

@@ -1,9 +1,8 @@
-import e from "react";
-import r from "prop-types";
-import n from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as a } from "../Flex/Flex.js";
-const d = n(p)`
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import i from "styled-components";
+import { Box as n } from "../Box/Box.js";
+import { Flex as p } from "../Flex/Flex.js";
+const l = i(n)`
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
 
   button {
@@ -11,16 +10,7 @@ const d = n(p)`
     display: inline-flex;
     justify-content: center;
   }
-`, t = ({ startAction: o, endAction: i }) => /* @__PURE__ */ e.createElement(d, { padding: 4 }, /* @__PURE__ */ e.createElement(a, { gap: 2 }, o, i));
-t.displayName = "DialogFooter";
-t.defaultProps = {
-  endAction: void 0,
-  startAction: void 0
-};
-t.propTypes = {
-  endAction: r.node,
-  startAction: r.node
-};
+`, x = ({ startAction: o, endAction: r }) => t(l, { padding: 4, children: e(p, { gap: 2, children: [o, r] }) });
 export {
-  t as DialogFooter
+  x as DialogFooter
 };

package/dist/Dialog/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./Dialog.cjs"),e=require("./DialogBody.cjs"),i=require("./DialogFooter.cjs");exports.Dialog=o.Dialog;exports.DialogBody=e.DialogBody;exports.DialogFooter=i.DialogFooter;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dialog.cjs"),e=require("./DialogBody.cjs"),i=require("./DialogFooter.cjs");exports.Dialog=o.Dialog;exports.DialogBody=e.DialogBody;exports.DialogFooter=i.DialogFooter;

package/dist/DismissibleLayer/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DismissibleLayer.cjs");exports.DismissibleLayer=e.DismissibleLayer;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@radix-ui/react-dismissable-layer");function o(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(i,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return i.default=e,Object.freeze(i)}const n=o(s),c=n.Root;exports.DismissibleLayer=c;

package/dist/DismissibleLayer/index.js

@@ -1,4 +1,5 @@
-import { DismissibleLayer as r } from "./DismissibleLayer.js";
+import * as i from "@radix-ui/react-dismissable-layer";
+const s = i.Root;
 export {
-  r as DismissibleLayer
+  s as DismissibleLayer
 };

package/dist/Divider/Divider.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),s=require("prop-types"),i=require("styled-components"),u=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=t(a),o=t(s),l=t(i),c=l.default(u.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("styled-components"),i=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},s=o(n),u=s.default(i.Box)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
   ${({unsetMargin:e})=>e?"margin: 0;":""}
-`,r=({unsetMargin:e,...n})=>d.default.createElement(c,{...n,as:"hr",unsetMargin:e});r.defaultProps={background:"neutral150",unsetMargin:!0};r.propTypes={background:o.default.string,unsetMargin:o.default.bool};exports.Divider=r;
+`,a=({unsetMargin:e=!0,...t})=>r.jsx(u,{...t,background:"neutral150",as:"hr",unsetMargin:e});exports.Divider=a;

package/dist/Divider/Divider.js

@@ -1,22 +1,13 @@
-import n from "react";
-import e from "prop-types";
-import i from "styled-components";
-import { Box as a } from "../Box/Box.js";
-const p = i(a)`
+import { jsx as t } from "react/jsx-runtime";
+import n from "styled-components";
+import { Box as i } from "../Box/Box.js";
+const o = n(i)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
   ${({ unsetMargin: r }) => r ? "margin: 0;" : ""}
-`, t = ({ unsetMargin: r, ...o }) => /* @__PURE__ */ n.createElement(p, { ...o, as: "hr", unsetMargin: r });
-t.defaultProps = {
-  background: "neutral150",
-  unsetMargin: !0
-};
-t.propTypes = {
-  background: e.string,
-  unsetMargin: e.bool
-};
+`, d = ({ unsetMargin: r = !0, ...e }) => t(o, { ...e, background: "neutral150", as: "hr", unsetMargin: r });
 export {
-  t as Divider
+  d as Divider
 };

package/dist/Divider/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Divider.cjs");exports.Divider=e.Divider;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Divider.cjs");exports.Divider=e.Divider;

package/dist/EmptyStateLayout/EmptyStateLayout.cjs

@@ -1,10 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),c=require("prop-types"),y=require("styled-components"),o=require("../Box/Box.cjs"),f=require("../Typography/Typography.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=r(p),t=r(c),d=r(y),g=d.default(o.Box)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-`,m=d.default(o.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),r=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),u=t=>t&&t.__esModule?t:{default:t},c=u(i),p=c.default(r.Box)`
   svg {
     height: ${88/16}rem;
   }
-`,n=({icon:e,content:l,action:u,hasRadius:s,shadow:i})=>a.default.createElement(g,{padding:11,background:"neutral0",hasRadius:s,shadow:i},a.default.createElement(m,{paddingBottom:6,"aria-hidden":!0},e),a.default.createElement(o.Box,{paddingBottom:4},a.default.createElement(f.Typography,{variant:"delta",as:"p",textColor:"neutral600"},l)),u);n.defaultProps={action:void 0,hasRadius:!0,shadow:"tableShadow"};n.propTypes={action:t.default.node,content:t.default.string.isRequired,hasRadius:t.default.bool,icon:t.default.node.isRequired,shadow:t.default.string};exports.EmptyStateLayout=n;
+`,y=({icon:t,content:o,action:n,hasRadius:a=!0,shadow:d="tableShadow"})=>e.jsxs(s.Flex,{alignItems:"center",direction:"column",padding:11,background:"neutral0",hasRadius:a,shadow:d,children:[e.jsx(p,{paddingBottom:6,"aria-hidden":!0,children:t}),e.jsx(r.Box,{paddingBottom:4,children:e.jsx(l.Typography,{variant:"delta",as:"p",textAlign:"center",textColor:"neutral600",children:o})}),n]});exports.EmptyStateLayout=y;

package/dist/EmptyStateLayout/EmptyStateLayout.js

@@ -1,30 +1,13 @@
-import e from "react";
-import t from "prop-types";
-import r from "styled-components";
-import { Box as o } from "../Box/Box.js";
-import { Typography as s } from "../Typography/Typography.js";
-const l = r(o)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-`, c = r(o)`
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import m from "styled-components";
+import { Box as r } from "../Box/Box.js";
+import { Flex as p } from "../Flex/Flex.js";
+import { Typography as l } from "../Typography/Typography.js";
+const c = m(r)`
   svg {
     height: ${88 / 16}rem;
   }
-`, a = ({ icon: n, content: i, action: p, hasRadius: d, shadow: m }) => /* @__PURE__ */ e.createElement(l, { padding: 11, background: "neutral0", hasRadius: d, shadow: m }, /* @__PURE__ */ e.createElement(c, { paddingBottom: 6, "aria-hidden": !0 }, n), /* @__PURE__ */ e.createElement(o, { paddingBottom: 4 }, /* @__PURE__ */ e.createElement(s, { variant: "delta", as: "p", textColor: "neutral600" }, i)), p);
-a.defaultProps = {
-  action: void 0,
-  hasRadius: !0,
-  shadow: "tableShadow"
-};
-a.propTypes = {
-  action: t.node,
-  content: t.string.isRequired,
-  hasRadius: t.bool,
-  icon: t.node.isRequired,
-  shadow: t.string
-};
+`, y = ({ icon: e, content: o, action: a, hasRadius: n = !0, shadow: i = "tableShadow" }) => d(p, { alignItems: "center", direction: "column", padding: 11, background: "neutral0", hasRadius: n, shadow: i, children: [t(c, { paddingBottom: 6, "aria-hidden": !0, children: e }), t(r, { paddingBottom: 4, children: t(l, { variant: "delta", as: "p", textAlign: "center", textColor: "neutral600", children: o }) }), a] });
 export {
-  a as EmptyStateLayout
+  y as EmptyStateLayout
 };

package/dist/EmptyStateLayout/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./EmptyStateLayout.cjs");exports.EmptyStateLayout=t.EmptyStateLayout;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./EmptyStateLayout.cjs");exports.EmptyStateLayout=t.EmptyStateLayout;