@strapi/design-system 1.6.3 → 1.6.4

package/dist/DatePicker/DatePickerTd.js

@@ -27,18 +27,7 @@ const s = u.button`
   }
 `, a = ({ children: e, outsideMonth: r, onSelectDay: p, isSelected: t, ...m }) => {
   let i = "neutral900";
-  return t ? i = "primary600" : r && (i = "neutral600"), /* @__PURE__ */ l.createElement(c, {
-    ...m
-  }, /* @__PURE__ */ l.createElement(s, {
-    tabIndex: -1,
-    onClick: p,
-    isSelected: t,
-    type: "button"
-  }, /* @__PURE__ */ l.createElement(n, {
-    variant: "pi",
-    textColor: i,
-    fontWeight: t ? "bold" : null
-  }, e)));
+  return t ? i = "primary600" : r && (i = "neutral600"), /* @__PURE__ */ l.createElement(c, { ...m }, /* @__PURE__ */ l.createElement(s, { tabIndex: -1, onClick: p, isSelected: t, type: "button" }, /* @__PURE__ */ l.createElement(n, { variant: "pi", textColor: i, fontWeight: t ? "bold" : null }, e)));
 };
 a.defaultProps = {
   isSelected: !1,

package/dist/DatePicker/DatePickerTh.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("prop-types"),u=require("styled-components");require("../RawTable/RawTable.cjs");const n=require("../RawTable/RawCell.cjs");require("../RawTable/RawThead.cjs");require("../RawTable/RawTbody.cjs");require("../RawTable/RawTr.cjs");const c=require("../Typography/Typography.cjs"),d=require("../VisuallyHidden/VisuallyHidden.cjs"),p=require("../Flex/Flex.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(s),f=r(i),a=r(u),y=a.default(n.RawTh)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("prop-types"),u=require("styled-components"),n=require("../Flex/Flex.cjs");require("../RawTable/RawTable.cjs");const c=require("../RawTable/RawCell.cjs");require("../RawTable/RawThead.cjs");require("../RawTable/RawTbody.cjs");require("../RawTable/RawTr.cjs");const d=require("../Typography/Typography.cjs"),p=require("../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(s),f=r(i),a=r(u),y=a.default(c.RawTh)`
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
   border-radius: ${({theme:e})=>e.borderRadius};
   text-transform: capitalize;
-`,T=a.default(p.Flex)`
+`,T=a.default(n.Flex)`
   height: ${24/16}rem;
   width: ${32/16}rem;
-`,l=({children:e,...o})=>t.default.createElement(y,{...o},t.default.createElement(T,{justifyContent:"center"},t.default.createElement(c.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0},e.substr(0,2)),t.default.createElement(d.VisuallyHidden,null,t.default.createElement("span",null,e))));l.propTypes={children:f.default.string.isRequired};exports.DatePickerTh=l;
+`,l=({children:e,...o})=>t.default.createElement(y,{...o},t.default.createElement(T,{justifyContent:"center"},t.default.createElement(d.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0},e.substr(0,2)),t.default.createElement(p.VisuallyHidden,null,t.default.createElement("span",null,e))));l.propTypes={children:f.default.string.isRequired};exports.DatePickerTh=l;

package/dist/DatePicker/DatePickerTh.js

@@ -1,32 +1,23 @@
 import e from "react";
 import i from "prop-types";
 import r from "styled-components";
+import { Flex as n } from "../Flex/Flex.js";
 import "../RawTable/RawTable.js";
-import { RawTh as n } from "../RawTable/RawCell.js";
+import { RawTh as a } from "../RawTable/RawCell.js";
 import "../RawTable/RawThead.js";
 import "../RawTable/RawTbody.js";
 import "../RawTable/RawTr.js";
-import { Typography as a } from "../Typography/Typography.js";
-import { VisuallyHidden as m } from "../VisuallyHidden/VisuallyHidden.js";
-import { Flex as p } from "../Flex/Flex.js";
-const l = r(n)`
+import { Typography as m } from "../Typography/Typography.js";
+import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
+const l = r(a)`
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
   border-radius: ${({ theme: t }) => t.borderRadius};
   text-transform: capitalize;
-`, s = r(p)`
+`, s = r(n)`
   height: ${24 / 16}rem;
   width: ${32 / 16}rem;
-`, f = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, {
-  ...o
-}, /* @__PURE__ */ e.createElement(s, {
-  justifyContent: "center"
-}, /* @__PURE__ */ e.createElement(a, {
-  variant: "pi",
-  fontWeight: "bold",
-  color: "neutral800",
-  "aria-hidden": !0
-}, t.substr(0, 2)), /* @__PURE__ */ e.createElement(m, null, /* @__PURE__ */ e.createElement("span", null, t))));
+`, f = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, { ...o }, /* @__PURE__ */ e.createElement(s, { justifyContent: "center" }, /* @__PURE__ */ e.createElement(m, { variant: "pi", fontWeight: "bold", color: "neutral800", "aria-hidden": !0 }, t.substr(0, 2)), /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement("span", null, t))));
 f.propTypes = {
   children: i.string.isRequired
 };

package/dist/DatePicker/components.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),a=require("../Field/FieldInput.cjs"),n=require("../Popover/Popover.cjs"),i=require("../Box/Box.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(t),s=o.default(n.Popover)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),a=require("../Box/Box.cjs"),n=require("../Field/FieldInput.cjs"),i=require("../Popover/Popover.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(t),s=o.default(i.Popover)`
   max-height: ${3*6}rem;
   overflow: hidden;
 `,l=o.default.button`
@@ -11,10 +11,10 @@
     fill: ${({theme:e})=>e.colors.neutral500};
   }
 `,c=o.default.div`
-  ${({bold:e,theme:r})=>e?`& ${a.InputWrapper} {
+  ${({bold:e,theme:r})=>e?`& ${n.InputWrapper} {
   border: 1px solid ${r.colors.primary600};
 }`:void 0}
-`,u=o.default(i.Box)`
+`,u=o.default(a.Box)`
   background: transparent;
   border: none;
   position: relative;

package/dist/DatePicker/components.js

@@ -1,8 +1,8 @@
 import o from "styled-components";
-import { InputWrapper as t } from "../Field/FieldInput.js";
-import { Popover as i } from "../Popover/Popover.js";
-import { Box as a } from "../Box/Box.js";
-const l = o(i)`
+import { Box as t } from "../Box/Box.js";
+import { InputWrapper as i } from "../Field/FieldInput.js";
+import { Popover as a } from "../Popover/Popover.js";
+const l = o(a)`
   max-height: ${3 * 6}rem;
   overflow: hidden;
 `, c = o.button`
@@ -15,10 +15,10 @@ const l = o(i)`
     fill: ${({ theme: r }) => r.colors.neutral500};
   }
 `, m = o.div`
-  ${({ bold: r, theme: e }) => r ? `& ${t} {
+  ${({ bold: r, theme: e }) => r ? `& ${i} {
   border: 1px solid ${e.colors.primary600};
 }` : void 0}
-`, u = o(a)`
+`, u = o(t)`
   background: transparent;
   border: none;
   position: relative;

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),E=require("../Stack/Stack.cjs"),L=require("../DatePicker/DatePicker.cjs"),V=require("../TimePicker/TimePicker.cjs"),v=require("../Field/Field.cjs"),C=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const R=require("../Field/FieldHint.cjs"),x=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../helpers/useId.cjs"),y=require("./parseDate.cjs"),$=require("./DateTimePickerProps.cjs"),O=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},s=O(p),P=({ariaLabel:i,clearLabel:g,disabled:T,error:f,hint:D,label:o,labelAction:H,onChange:a,onClear:m,name:j,required:k,selectButtonTitle:M,size:S,step:b,value:c,...q})=>{const n=y.parseDate(c),[r,d]=p.useState(n),[u,l]=p.useState(n?`${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}`:null),h=e=>{d(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),l(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),a&&a(t)},w=e=>{l(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||d(t),a&&a(t)},I=()=>{d(void 0),l(void 0),m()},_=()=>{l(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),a&&a(e)};p.useEffect(()=>{if(c&&+c!=+r){const e=y.parseDate(c);d(e),l(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else c||(d(void 0),l(void 0))},[c,r]);const F=A.useId(q?.id);return s.default.createElement(v.Field,{name:j,role:"group",id:F,"aria-labelledby":F,hint:D,error:f,required:k},s.default.createElement(E.Stack,{spacing:1},o&&s.default.createElement(C.FieldLabel,{action:H},o),s.default.createElement(E.Stack,{horizontal:!0,spacing:2},s.default.createElement(L.DatePicker,{"data-testid":"datetimepicker-date",id:F,name:j,ariaLabel:o||i,error:typeof f=="string",hint:typeof D=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:h,required:k,size:S,onClear:m&&I,clearLabel:g,disabled:T,...q}),s.default.createElement(V.TimePicker,{"data-testid":"datetimepicker-time",size:S,"aria-label":o||i,error:typeof f=="string",hint:typeof D=="string",value:u,onChange:w,onClear:m&&_,clearLabel:g,required:k,selectButtonTitle:M,disabled:T,step:b})),s.default.createElement(R.FieldHint,null),s.default.createElement(x.FieldError,null)))};P.defaultProps=$.dateTimePickerDefaultProps;P.propTypes=$.dateTimePickerPropTypes;exports.DateTimePicker=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),$=require("./DateTimePickerProps.cjs"),E=require("./parseDate.cjs"),L=require("../DatePicker/DatePicker.cjs"),V=require("../Field/Field.cjs"),v=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const C=require("../Field/FieldHint.cjs"),R=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const x=require("../helpers/useId.cjs"),y=require("../Stack/Stack.cjs"),A=require("../TimePicker/TimePicker.cjs"),O=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},s=O(p),P=({ariaLabel:i,clearLabel:g,disabled:T,error:f,hint:D,label:o,labelAction:H,onChange:a,onClear:m,name:j,required:k,selectButtonTitle:M,size:S,step:b,value:c,...q})=>{const n=E.parseDate(c),[r,d]=p.useState(n),[u,l]=p.useState(n?`${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}`:null),h=e=>{d(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),l(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),a&&a(t)},w=e=>{l(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||d(t),a&&a(t)},I=()=>{d(void 0),l(void 0),m()},_=()=>{l(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),a&&a(e)};p.useEffect(()=>{if(c&&+c!=+r){const e=E.parseDate(c);d(e),l(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else c||(d(void 0),l(void 0))},[c,r]);const F=x.useId(q?.id);return s.default.createElement(V.Field,{name:j,role:"group",id:F,"aria-labelledby":F,hint:D,error:f,required:k},s.default.createElement(y.Stack,{spacing:1},o&&s.default.createElement(v.FieldLabel,{action:H},o),s.default.createElement(y.Stack,{horizontal:!0,spacing:2},s.default.createElement(L.DatePicker,{"data-testid":"datetimepicker-date",id:F,name:j,ariaLabel:o||i,error:typeof f=="string",hint:typeof D=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:h,required:k,size:S,onClear:m&&I,clearLabel:g,disabled:T,...q}),s.default.createElement(A.TimePicker,{"data-testid":"datetimepicker-time",size:S,"aria-label":o||i,error:typeof f=="string",hint:typeof D=="string",value:u,onChange:w,onClear:m&&_,clearLabel:g,required:k,selectButtonTitle:M,disabled:T,step:b})),s.default.createElement(C.FieldHint,null),s.default.createElement(R.FieldError,null)))};P.defaultProps=$.dateTimePickerDefaultProps;P.propTypes=$.dateTimePickerPropTypes;exports.DateTimePicker=P;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,17 +1,17 @@
 import r, { useState as S, useEffect as x } from "react";
-import { Stack as y } from "../Stack/Stack.js";
-import { DatePicker as C } from "../DatePicker/DatePicker.js";
-import { TimePicker as L } from "../TimePicker/TimePicker.js";
-import { Field as R } from "../Field/Field.js";
-import { FieldLabel as b } from "../Field/FieldLabel.js";
+import { dateTimePickerDefaultProps as C, dateTimePickerPropTypes as L } from "./DateTimePickerProps.js";
+import { parseDate as y } from "./parseDate.js";
+import { DatePicker as R } from "../DatePicker/DatePicker.js";
+import { Field as b } from "../Field/Field.js";
+import { FieldLabel as j } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as j } from "../Field/FieldHint.js";
-import { FieldError as z } from "../Field/FieldError.js";
+import { FieldHint as z } from "../Field/FieldHint.js";
+import { FieldError as A } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { useId as A } from "../helpers/useId.js";
-import { parseDate as H } from "./parseDate.js";
-import { dateTimePickerDefaultProps as B, dateTimePickerPropTypes as G } from "./DateTimePickerProps.js";
+import { useId as B } from "../helpers/useId.js";
+import { Stack as H } from "../Stack/Stack.js";
+import { TimePicker as G } from "../TimePicker/TimePicker.js";
 const M = ({
   ariaLabel: g,
   clearLabel: T,
@@ -30,7 +30,7 @@ const M = ({
   value: a,
   ...P
 }) => {
-  const n = H(a), [i, m] = S(n), [c, s] = S(
+  const n = y(a), [i, m] = S(n), [c, s] = S(
     n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
   ), V = (e) => {
     m(e);
@@ -49,63 +49,66 @@ const M = ({
   };
   x(() => {
     if (a && +a != +i) {
-      const e = H(a);
+      const e = y(a);
       m(e), s(
         e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
       );
     } else
       a || (m(void 0), s(void 0));
   }, [a, i]);
-  const D = A(P?.id);
-  return /* @__PURE__ */ r.createElement(R, {
-    name: $,
-    role: "group",
-    id: D,
-    "aria-labelledby": D,
-    hint: p,
-    error: d,
-    required: u
-  }, /* @__PURE__ */ r.createElement(y, {
-    spacing: 1
-  }, l && /* @__PURE__ */ r.createElement(b, {
-    action: w
-  }, l), /* @__PURE__ */ r.createElement(y, {
-    horizontal: !0,
-    spacing: 2
-  }, /* @__PURE__ */ r.createElement(C, {
-    "data-testid": "datetimepicker-date",
-    id: D,
-    name: $,
-    ariaLabel: l || g,
-    error: typeof d == "string",
-    hint: typeof p == "string",
-    selectedDate: i,
-    selectedDateLabel: (e) => `Date picker, current is ${e}`,
-    onChange: V,
-    required: u,
-    size: k,
-    onClear: f && _,
-    clearLabel: T,
-    disabled: E,
-    ...P
-  }), /* @__PURE__ */ r.createElement(L, {
-    "data-testid": "datetimepicker-time",
-    size: k,
-    "aria-label": l || g,
-    error: typeof d == "string",
-    hint: typeof p == "string",
-    value: c,
-    onChange: I,
-    onClear: f && v,
-    clearLabel: T,
-    required: u,
-    selectButtonTitle: h,
-    disabled: E,
-    step: F
-  })), /* @__PURE__ */ r.createElement(j, null), /* @__PURE__ */ r.createElement(z, null)));
+  const D = B(P?.id);
+  return /* @__PURE__ */ r.createElement(
+    b,
+    {
+      name: $,
+      role: "group",
+      id: D,
+      "aria-labelledby": D,
+      hint: p,
+      error: d,
+      required: u
+    },
+    /* @__PURE__ */ r.createElement(H, { spacing: 1 }, l && /* @__PURE__ */ r.createElement(j, { action: w }, l), /* @__PURE__ */ r.createElement(H, { horizontal: !0, spacing: 2 }, /* @__PURE__ */ r.createElement(
+      R,
+      {
+        "data-testid": "datetimepicker-date",
+        id: D,
+        name: $,
+        ariaLabel: l || g,
+        error: typeof d == "string",
+        hint: typeof p == "string",
+        selectedDate: i,
+        selectedDateLabel: (e) => `Date picker, current is ${e}`,
+        onChange: V,
+        required: u,
+        size: k,
+        onClear: f && _,
+        clearLabel: T,
+        disabled: E,
+        ...P
+      }
+    ), /* @__PURE__ */ r.createElement(
+      G,
+      {
+        "data-testid": "datetimepicker-time",
+        size: k,
+        "aria-label": l || g,
+        error: typeof d == "string",
+        hint: typeof p == "string",
+        value: c,
+        onChange: I,
+        onClear: f && v,
+        clearLabel: T,
+        required: u,
+        selectButtonTitle: h,
+        disabled: E,
+        step: F
+      }
+    )), /* @__PURE__ */ r.createElement(z, null), /* @__PURE__ */ r.createElement(A, null))
+  );
 };
-M.defaultProps = B;
-M.propTypes = G;
+M.defaultProps = C;
+M.propTypes = L;
 export {
   M as DateTimePicker
 };

package/dist/DateTimePicker/DateTimePickerProps.js

@@ -1,8 +1,6 @@
 import t from "react";
 import e from "prop-types";
-const i = (r) => /* @__PURE__ */ t.createElement("div", {
-  ...r
-}), o = {
+const i = (r) => /* @__PURE__ */ t.createElement("div", { ...r }), o = {
   ariaLabel: void 0,
   clearLabel: "clear",
   disabled: !1,

package/dist/Dialog/Dialog.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),g=require("react"),m=require("styled-components"),o=require("../Box/Box.cjs"),b=require("../FocusTrap/FocusTrap.cjs"),q=require("../Portal/Portal.cjs"),h=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),D=require("../DismissibleLayer/DismissibleLayer.cjs"),T=require("../helpers/setOpacity.cjs"),j=require("../helpers/useLockScroll.cjs"),E=require("../helpers/useId.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=l(y),t=l(g),s=l(m),P=s.default(o.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),g=require("prop-types"),m=require("styled-components"),o=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("../helpers/useId.cjs"),T=require("../helpers/useLockScroll.cjs"),j=require("../Portal/Portal.cjs"),E=require("../Typography/Typography.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(y),a=l(g),s=l(m),P=s.default(o.Box)`
   inset: 0;
-  background: ${({theme:e})=>T.setOpacity(e.colors.neutral800,.2)};
+  background: ${({theme:e})=>x.setOpacity(e.colors.neutral800,.2)};
 `,_=s.default(o.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,F=s.default(h.Flex)`
+`,F=s.default(q.Flex)`
   border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,r=({onClose:e,title:n,as:c,isOpen:i,id:d,...p})=>{const f=E.useId(d);if(j(i),!i)return null;const u=`${f}-label`;return t.default.createElement(q.Portal,null,t.default.createElement(P,{padding:8,position:"fixed",zIndex:4},t.default.createElement(b.FocusTrap,null,t.default.createElement(D.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(x.Typography,{variant:"beta",as:c||"h2",id:u},n)),t.default.createElement(o.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.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=r;
+`,r=({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(o.Box,{...p}))))))};r.displayName="Dialog";r.defaultProps={as:"h2",id:void 0};r.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=r;

package/dist/Dialog/Dialog.js

@@ -1,54 +1,43 @@
-import o from "prop-types";
 import e from "react";
+import o from "prop-types";
 import t from "styled-components";
 import { Box as a } from "../Box/Box.js";
-import { FocusTrap as c } from "../FocusTrap/FocusTrap.js";
-import { Portal as f } from "../Portal/Portal.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { Typography as y } from "../Typography/Typography.js";
-import { DismissibleLayer as b } from "../DismissibleLayer/DismissibleLayer.js";
-import { setOpacity as E } from "../helpers/setOpacity.js";
-import h from "../helpers/useLockScroll.js";
-import { useId as D } from "../helpers/useId.js";
+import { DismissibleLayer as c } from "../DismissibleLayer/DismissibleLayer.js";
+import { Flex as f } from "../Flex/Flex.js";
+import { FocusTrap as g } from "../FocusTrap/FocusTrap.js";
+import { setOpacity as y } from "../helpers/setOpacity.js";
+import { useId as b } from "../helpers/useId.js";
+import E from "../helpers/useLockScroll.js";
+import { Portal as h } from "../Portal/Portal.js";
+import { Typography as D } from "../Typography/Typography.js";
 const x = t(a)`
   inset: 0;
-  background: ${({ theme: r }) => E(r.colors.neutral800, 0.2)};
+  background: ${({ theme: r }) => y(r.colors.neutral800, 0.2)};
 `, w = t(a)`
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`, R = t(g)`
+`, R = t(f)`
   border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
 `, i = ({ onClose: r, title: m, as: s, isOpen: n, id: d, ...p }) => {
-  const u = D(d);
-  if (h(n), !n)
+  const u = b(d);
+  if (E(n), !n)
     return null;
   const l = `${u}-label`;
-  return /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(x, {
-    padding: 8,
-    position: "fixed",
-    zIndex: 4
-  }, /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement(b, {
-    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(y, {
-    variant: "beta",
-    as: s || "h2",
-    id: l
-  }, m)), /* @__PURE__ */ e.createElement(a, {
-    ...p
-  }))))));
+  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 = {

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("styled-components"),c=require("prop-types"),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),u=d(r),n=d(c),p=u.default(l.Box)`
+"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)`
   svg {
     width: ${({theme:e})=>e.spaces[6]};
     height: ${({theme:e})=>e.spaces[6]};

package/dist/Dialog/DialogBody.js

@@ -1,6 +1,6 @@
 import o from "react";
-import n from "styled-components";
 import i from "prop-types";
+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)`
@@ -12,16 +12,7 @@ const a = n(d)`
       fill: ${({ theme: e }) => e.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 = ({ 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

package/dist/Dialog/DialogFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),s=require("styled-components"),l=require("prop-types"),d=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),u=o(s),a=o(l),p=u.default(d.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),s=require("prop-types"),l=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Stack/Stack.cjs"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(c),a=o(s),u=o(l),p=u.default(d.Box)`
   border-top: 1px solid ${({theme:t})=>t.colors.neutral150};
 
   button {

package/dist/Dialog/DialogFooter.js

@@ -1,6 +1,6 @@
 import e from "react";
-import n from "styled-components";
 import r from "prop-types";
+import n from "styled-components";
 import { Box as p } from "../Box/Box.js";
 import { Stack as a } from "../Stack/Stack.js";
 const d = n(p)`
@@ -11,12 +11,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, {
-  horizontal: !0,
-  spacing: 2
-}, o, i));
+`, t = ({ startAction: o, endAction: i }) => /* @__PURE__ */ e.createElement(d, { padding: 4 }, /* @__PURE__ */ e.createElement(a, { horizontal: !0, spacing: 2 }, o, i));
 t.displayName = "DialogFooter";
 t.defaultProps = {
   endAction: void 0,

package/dist/DismissibleLayer/DismissibleLayer.js

@@ -14,10 +14,7 @@ const i = ({ children: d, className: u, onEscapeKeyDown: l, onPointerDownOutside
       n.current && !n.current.contains(t.target) && p === f && s();
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-  }, [s]), /* @__PURE__ */ y.createElement("div", {
-    ref: n,
-    className: u
-  }, d);
+  }, [s]), /* @__PURE__ */ y.createElement("div", { ref: n, className: u }, d);
 };
 i.defaultProps = {
   className: void 0

package/dist/Divider/Divider.js

@@ -8,11 +8,7 @@ const p = i(a)`
   /* 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 = ({ unsetMargin: r, ...o }) => /* @__PURE__ */ n.createElement(p, { ...o, as: "hr", unsetMargin: r });
 t.defaultProps = {
   background: "neutral150",
   unsetMargin: !0

package/dist/EmptyStateLayout/EmptyStateLayout.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),c=require("prop-types"),y=require("styled-components"),f=require("../Typography/Typography.cjs"),o=require("../Box/Box.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)`
+"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;

package/dist/EmptyStateLayout/EmptyStateLayout.js

@@ -1,8 +1,8 @@
 import e from "react";
 import t from "prop-types";
 import r from "styled-components";
-import { Typography as s } from "../Typography/Typography.js";
 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;
@@ -12,21 +12,7 @@ const l = r(o)`
   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 = ({ 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,