@strapi/design-system 1.6.2 → 1.6.4

package/dist/DatePicker/DatePicker.js

@@ -1,12 +1,12 @@
 import t, { useState as B, useRef as D } from "react";
-import e from "prop-types";
 import { Calendar as T, Cross as W } from "@strapi/icons";
-import { sizes as q } from "../themes/sizes.js";
-import { TextInput as A } from "../TextInput/TextInput.js";
-import { DatePickerWrapper as I, DatePickerButton as S, IconBox as V } from "./components.js";
-import { DatePickerCalendar as _ } from "./DatePickerCalendar.js";
+import e from "prop-types";
+import { DatePickerWrapper as q, DatePickerButton as A, IconBox as I } from "./components.js";
+import { DatePickerCalendar as S } from "./DatePickerCalendar.js";
 import { formatDate as b } from "./utils/formatDate.js";
-import { getDefaultLocale as j } from "../helpers/getDefaultLocale.js";
+import { getDefaultLocale as V } from "../helpers/getDefaultLocale.js";
+import { TextInput as _ } from "../TextInput/TextInput.js";
+import { sizes as j } from "../themes/sizes.js";
 const v = ({
   ariaLabel: o,
   initialDate: g,
@@ -23,7 +23,7 @@ const v = ({
   maxDate: O,
   ...x
 }) => {
-  const [f, l] = B(!1), n = D(null), p = D(null), u = h || j(), m = a ? b(a, u) : "", d = () => {
+  const [f, l] = B(!1), n = D(null), p = D(null), u = h || V(), m = a ? b(a, u) : "", d = () => {
     r || l((c) => !c);
   }, y = () => {
     r || (s(), p.current.focus());
@@ -32,45 +32,46 @@ const v = ({
   }, z = () => {
     l(!1);
   };
-  return /* @__PURE__ */ t.createElement(I, {
-    bold: f
-  }, /* @__PURE__ */ t.createElement(A, {
-    ref: n,
-    onClick: d,
-    onChange: () => {
-    },
-    value: m,
-    startAction: /* @__PURE__ */ t.createElement(S, {
-      ref: p,
+  return /* @__PURE__ */ t.createElement(q, { bold: f }, /* @__PURE__ */ t.createElement(
+    _,
+    {
+      ref: n,
       onClick: d,
-      "aria-label": a ? k(b(a, u)) : i || o,
-      type: "button",
-      "aria-disabled": r
-    }, /* @__PURE__ */ t.createElement(T, {
-      "aria-hidden": !0
-    })),
-    endAction: s && m ? /* @__PURE__ */ t.createElement(V, {
-      as: "button",
-      onClick: y,
-      "aria-label": E,
-      "aria-disabled": r
-    }, /* @__PURE__ */ t.createElement(W, null)) : void 0,
-    "aria-autocomplete": "none",
-    label: i,
-    "aria-label": o,
-    disabled: r,
-    id: R,
-    ...x
-  }), n.current && n.current.inputWrapperRef && f && /* @__PURE__ */ t.createElement(_, {
-    selectedDate: a,
-    initialDate: g,
-    onChange: L,
-    onEscape: z,
-    popoverSource: n.current.inputWrapperRef,
-    label: i || o,
-    minDate: P,
-    maxDate: O
-  }));
+      onChange: () => {
+      },
+      value: m,
+      startAction: /* @__PURE__ */ t.createElement(
+        A,
+        {
+          ref: p,
+          onClick: d,
+          "aria-label": a ? k(b(a, u)) : i || o,
+          type: "button",
+          "aria-disabled": r
+        },
+        /* @__PURE__ */ t.createElement(T, { "aria-hidden": !0 })
+      ),
+      endAction: s && m ? /* @__PURE__ */ t.createElement(I, { as: "button", onClick: y, "aria-label": E, "aria-disabled": r }, /* @__PURE__ */ t.createElement(W, null)) : void 0,
+      "aria-autocomplete": "none",
+      label: i,
+      "aria-label": o,
+      disabled: r,
+      id: R,
+      ...x
+    }
+  ), n.current && n.current.inputWrapperRef && f && /* @__PURE__ */ t.createElement(
+    S,
+    {
+      selectedDate: a,
+      initialDate: g,
+      onChange: L,
+      onEscape: z,
+      popoverSource: n.current.inputWrapperRef,
+      label: i || o,
+      minDate: P,
+      maxDate: O
+    }
+  ));
 };
 v.defaultProps = {
   ariaLabel: void 0,
@@ -102,7 +103,7 @@ v.propTypes = {
   placeholder: e.string,
   selectedDate: e.instanceOf(Date),
   selectedDateLabel: e.func.isRequired,
-  size: e.oneOf(Object.keys(q.input))
+  size: e.oneOf(Object.keys(j.input))
 };
 export {
   v as DatePicker

package/dist/DatePicker/DatePickerCalendar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),W=require("prop-types"),H=require("../VisuallyHidden/VisuallyHidden.cjs"),V=require("./components.cjs"),i=require("../SimpleMenu/SimpleMenu.cjs"),L=require("../Flex/Flex.cjs"),d=require("../Box/Box.cjs"),$=require("../RawTable/RawTable.cjs");require("../RawTable/RawCell.cjs");const I=require("../RawTable/RawThead.cjs"),z=require("../RawTable/RawTbody.cjs"),D=require("../RawTable/RawTr.cjs"),r=require("./DatePickerTh.cjs"),A=require("./DatePickerTd.cjs"),G=require("../FocusTrap/FocusTrap.cjs"),J=require("./utils/getDayOfWeek.cjs"),K=require("./utils/getMonths.cjs"),N=require("./utils/generateWeeks.cjs"),Q=require("./utils/getYears.cjs"),U=require("./utils/formatDate.cjs"),T=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=T(f),l=T(W),m=({selectedDate:a,initialDate:g,popoverSource:E,onChange:R,label:h,minDate:k,maxDate:w,onEscape:q})=>{const[c,s]=f.useState(g),[p,y,j]=N.generateWeeks(c,a),{sun:P,mon:b,tue:M,wed:x,thu:C,fri:F,sat:O}=J.getDayOfWeek(),o=K.getMonths(),S=Q.getYears(k,w);f.useEffect(()=>{a&&s(a)},[a]);const v=t=>{const n=new Date(c);n.setMonth(o.indexOf(t)),s(n)},B=t=>{const n=new Date(c);n.setFullYear(t),s(n)};return e.default.createElement(V.DatePickerPopover,{source:E,role:"dialog","aria-modal":"true","aria-label":h,spacing:4},e.default.createElement(G.FocusTrap,{onEscape:q},e.default.createElement(d.Box,{padding:4},e.default.createElement(d.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2},e.default.createElement(L.Flex,null,e.default.createElement(i.SimpleMenu,{label:o[c.getMonth()]},o.map(t=>e.default.createElement(i.MenuItem,{key:t,onClick:()=>v(t)},t))),e.default.createElement(d.Box,{paddingLeft:2},e.default.createElement(i.SimpleMenu,{label:c.getFullYear()},S.map(t=>e.default.createElement(i.MenuItem,{key:t,onClick:()=>B(t)},t)))))),e.default.createElement($.RawTable,{colCount:7,rowCount:p.length+1,initialCol:j,initialRow:y,role:"grid"},e.default.createElement(I.RawThead,null,e.default.createElement(D.RawTr,{"aria-rowindex":1},e.default.createElement(r.DatePickerTh,null,P),e.default.createElement(r.DatePickerTh,null,b),e.default.createElement(r.DatePickerTh,null,M),e.default.createElement(r.DatePickerTh,null,x),e.default.createElement(r.DatePickerTh,null,C),e.default.createElement(r.DatePickerTh,null,F),e.default.createElement(r.DatePickerTh,null,O))),e.default.createElement(z.RawTbody,null,p.map((t,n)=>e.default.createElement(D.RawTr,{key:n},t.map(({date:u,outsideMonth:Y,isSelected:_})=>e.default.createElement(A.DatePickerTd,{key:`${u.getFullYear()}-${u.getMonth()+1}-${u.getDate()}`,outsideMonth:Y,onSelectDay:()=>R(u),isSelected:_},e.default.createElement("span",{"aria-hidden":!0},u.getDate()),e.default.createElement(H.VisuallyHidden,null,e.default.createElement("span",null,U.formatDate(u))))))))))))};m.defaultProps={selectedDate:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0};m.propTypes={initialDate:l.default.instanceOf(Date),label:l.default.string.isRequired,maxDate:l.default.instanceOf(Date),minDate:l.default.instanceOf(Date),onChange:l.default.func.isRequired,onEscape:l.default.func.isRequired,popoverSource:l.default.shape({current:(typeof Element>"u"?l.default.any:l.default.instanceOf(Element)).isRequired}).isRequired,selectedDate:l.default.instanceOf(Date)};exports.DatePickerCalendar=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),W=require("prop-types"),H=require("./components.cjs"),V=require("./DatePickerTd.cjs"),r=require("./DatePickerTh.cjs"),L=require("./utils/getDayOfWeek.cjs"),$=require("./utils/getMonths.cjs"),I=require("./utils/generateWeeks.cjs"),z=require("./utils/getYears.cjs"),A=require("./utils/formatDate.cjs"),d=require("../Box/Box.cjs"),G=require("../Flex/Flex.cjs"),J=require("../FocusTrap/FocusTrap.cjs"),K=require("../RawTable/RawTable.cjs");require("../RawTable/RawCell.cjs");const N=require("../RawTable/RawThead.cjs"),Q=require("../RawTable/RawTbody.cjs"),D=require("../RawTable/RawTr.cjs"),i=require("../SimpleMenu/SimpleMenu.cjs"),U=require("../VisuallyHidden/VisuallyHidden.cjs"),T=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=T(f),l=T(W),m=({selectedDate:a,initialDate:g,popoverSource:E,onChange:R,label:h,minDate:k,maxDate:w,onEscape:q})=>{const[c,s]=f.useState(g),[p,y,j]=I.generateWeeks(c,a),{sun:P,mon:b,tue:M,wed:x,thu:C,fri:F,sat:O}=L.getDayOfWeek(),o=$.getMonths(),S=z.getYears(k,w);f.useEffect(()=>{a&&s(a)},[a]);const v=t=>{const n=new Date(c);n.setMonth(o.indexOf(t)),s(n)},B=t=>{const n=new Date(c);n.setFullYear(t),s(n)};return e.default.createElement(H.DatePickerPopover,{source:E,role:"dialog","aria-modal":"true","aria-label":h,spacing:4},e.default.createElement(J.FocusTrap,{onEscape:q},e.default.createElement(d.Box,{padding:4},e.default.createElement(d.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2},e.default.createElement(G.Flex,null,e.default.createElement(i.SimpleMenu,{label:o[c.getMonth()]},o.map(t=>e.default.createElement(i.MenuItem,{key:t,onClick:()=>v(t)},t))),e.default.createElement(d.Box,{paddingLeft:2},e.default.createElement(i.SimpleMenu,{label:c.getFullYear()},S.map(t=>e.default.createElement(i.MenuItem,{key:t,onClick:()=>B(t)},t)))))),e.default.createElement(K.RawTable,{colCount:7,rowCount:p.length+1,initialCol:j,initialRow:y,role:"grid"},e.default.createElement(N.RawThead,null,e.default.createElement(D.RawTr,{"aria-rowindex":1},e.default.createElement(r.DatePickerTh,null,P),e.default.createElement(r.DatePickerTh,null,b),e.default.createElement(r.DatePickerTh,null,M),e.default.createElement(r.DatePickerTh,null,x),e.default.createElement(r.DatePickerTh,null,C),e.default.createElement(r.DatePickerTh,null,F),e.default.createElement(r.DatePickerTh,null,O))),e.default.createElement(Q.RawTbody,null,p.map((t,n)=>e.default.createElement(D.RawTr,{key:n},t.map(({date:u,outsideMonth:Y,isSelected:_})=>e.default.createElement(V.DatePickerTd,{key:`${u.getFullYear()}-${u.getMonth()+1}-${u.getDate()}`,outsideMonth:Y,onSelectDay:()=>R(u),isSelected:_},e.default.createElement("span",{"aria-hidden":!0},u.getDate()),e.default.createElement(U.VisuallyHidden,null,e.default.createElement("span",null,A.formatDate(u))))))))))))};m.defaultProps={selectedDate:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0};m.propTypes={initialDate:l.default.instanceOf(Date),label:l.default.string.isRequired,maxDate:l.default.instanceOf(Date),minDate:l.default.instanceOf(Date),onChange:l.default.func.isRequired,onEscape:l.default.func.isRequired,popoverSource:l.default.shape({current:(typeof Element>"u"?l.default.any:l.default.instanceOf(Element)).isRequired}).isRequired,selectedDate:l.default.instanceOf(Date)};exports.DatePickerCalendar=m;

package/dist/DatePicker/DatePickerCalendar.js

@@ -1,23 +1,23 @@
 import e, { useState as L, useEffect as W } from "react";
 import a from "prop-types";
-import { VisuallyHidden as _ } from "../VisuallyHidden/VisuallyHidden.js";
-import { DatePickerPopover as H } from "./components.js";
-import { SimpleMenu as s, MenuItem as f } from "../SimpleMenu/SimpleMenu.js";
-import { Flex as I } from "../Flex/Flex.js";
+import { DatePickerPopover as _ } from "./components.js";
+import { DatePickerTd as H } from "./DatePickerTd.js";
+import { DatePickerTh as r } from "./DatePickerTh.js";
+import { getDayOfWeek as I } from "./utils/getDayOfWeek.js";
+import { getMonths as V } from "./utils/getMonths.js";
+import { generateWeeks as j } from "./utils/generateWeeks.js";
+import { getYears as z } from "./utils/getYears.js";
+import { formatDate as A } from "./utils/formatDate.js";
 import { Box as p } from "../Box/Box.js";
-import { RawTable as V } from "../RawTable/RawTable.js";
+import { Flex as G } from "../Flex/Flex.js";
+import { FocusTrap as J } from "../FocusTrap/FocusTrap.js";
+import { RawTable as K } from "../RawTable/RawTable.js";
 import "../RawTable/RawCell.js";
-import { RawThead as j } from "../RawTable/RawThead.js";
-import { RawTbody as z } from "../RawTable/RawTbody.js";
-import { RawTr as d } from "../RawTable/RawTr.js";
-import { DatePickerTh as r } from "./DatePickerTh.js";
-import { DatePickerTd as A } from "./DatePickerTd.js";
-import { FocusTrap as G } from "../FocusTrap/FocusTrap.js";
-import { getDayOfWeek as J } from "./utils/getDayOfWeek.js";
-import { getMonths as K } from "./utils/getMonths.js";
-import { generateWeeks as N } from "./utils/generateWeeks.js";
-import { getYears as Q } from "./utils/getYears.js";
-import { formatDate as U } from "./utils/formatDate.js";
+import { RawThead as N } from "../RawTable/RawThead.js";
+import { RawTbody as Q } from "../RawTable/RawTbody.js";
+import { RawTr as s } from "../RawTable/RawTr.js";
+import { SimpleMenu as f, MenuItem as d } from "../SimpleMenu/SimpleMenu.js";
+import { VisuallyHidden as U } from "../VisuallyHidden/VisuallyHidden.js";
 const E = ({
   selectedDate: i,
   initialDate: g,
@@ -28,7 +28,7 @@ const E = ({
   maxDate: R,
   onEscape: y
 }) => {
-  const [l, m] = L(g), [u, C, T] = N(l, i), { sun: v, mon: x, tue: M, wed: O, thu: P, fri: b, sat: q } = J(), c = K(), F = Q(w, R);
+  const [l, m] = L(g), [u, C, T] = j(l, i), { sun: v, mon: x, tue: M, wed: O, thu: P, fri: b, sat: q } = I(), c = V(), F = z(w, R);
   W(() => {
     i && m(i);
   }, [i]);
@@ -39,50 +39,17 @@ const E = ({
     const n = new Date(l);
     n.setFullYear(t), m(n);
   };
-  return /* @__PURE__ */ e.createElement(H, {
-    source: D,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": k,
-    spacing: 4
-  }, /* @__PURE__ */ e.createElement(G, {
-    onEscape: y
-  }, /* @__PURE__ */ e.createElement(p, {
-    padding: 4
-  }, /* @__PURE__ */ e.createElement(p, {
-    paddingBottom: 4,
-    paddingLeft: 2,
-    paddingRight: 2
-  }, /* @__PURE__ */ e.createElement(I, null, /* @__PURE__ */ e.createElement(s, {
-    label: c[l.getMonth()]
-  }, c.map((t) => /* @__PURE__ */ e.createElement(f, {
-    key: t,
-    onClick: () => Y(t)
-  }, t))), /* @__PURE__ */ e.createElement(p, {
-    paddingLeft: 2
-  }, /* @__PURE__ */ e.createElement(s, {
-    label: l.getFullYear()
-  }, F.map((t) => /* @__PURE__ */ e.createElement(f, {
-    key: t,
-    onClick: () => S(t)
-  }, t)))))), /* @__PURE__ */ e.createElement(V, {
-    colCount: 7,
-    rowCount: u.length + 1,
-    initialCol: T,
-    initialRow: C,
-    role: "grid"
-  }, /* @__PURE__ */ e.createElement(j, null, /* @__PURE__ */ e.createElement(d, {
-    "aria-rowindex": 1
-  }, /* @__PURE__ */ e.createElement(r, null, v), /* @__PURE__ */ e.createElement(r, null, x), /* @__PURE__ */ e.createElement(r, null, M), /* @__PURE__ */ e.createElement(r, null, O), /* @__PURE__ */ e.createElement(r, null, P), /* @__PURE__ */ e.createElement(r, null, b), /* @__PURE__ */ e.createElement(r, null, q))), /* @__PURE__ */ e.createElement(z, null, u.map((t, n) => /* @__PURE__ */ e.createElement(d, {
-    key: n
-  }, t.map(({ date: o, outsideMonth: $, isSelected: B }) => /* @__PURE__ */ e.createElement(A, {
-    key: `${o.getFullYear()}-${o.getMonth() + 1}-${o.getDate()}`,
-    outsideMonth: $,
-    onSelectDay: () => h(o),
-    isSelected: B
-  }, /* @__PURE__ */ e.createElement("span", {
-    "aria-hidden": !0
-  }, o.getDate()), /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement("span", null, U(o))))))))))));
+  return /* @__PURE__ */ e.createElement(_, { source: D, role: "dialog", "aria-modal": "true", "aria-label": k, spacing: 4 }, /* @__PURE__ */ e.createElement(J, { onEscape: y }, /* @__PURE__ */ e.createElement(p, { padding: 4 }, /* @__PURE__ */ e.createElement(p, { paddingBottom: 4, paddingLeft: 2, paddingRight: 2 }, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(f, { label: c[l.getMonth()] }, c.map((t) => /* @__PURE__ */ e.createElement(d, { key: t, onClick: () => Y(t) }, t))), /* @__PURE__ */ e.createElement(p, { paddingLeft: 2 }, /* @__PURE__ */ e.createElement(f, { label: l.getFullYear() }, F.map((t) => /* @__PURE__ */ e.createElement(d, { key: t, onClick: () => S(t) }, t)))))), /* @__PURE__ */ e.createElement(K, { colCount: 7, rowCount: u.length + 1, initialCol: T, initialRow: C, role: "grid" }, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(s, { "aria-rowindex": 1 }, /* @__PURE__ */ e.createElement(r, null, v), /* @__PURE__ */ e.createElement(r, null, x), /* @__PURE__ */ e.createElement(r, null, M), /* @__PURE__ */ e.createElement(r, null, O), /* @__PURE__ */ e.createElement(r, null, P), /* @__PURE__ */ e.createElement(r, null, b), /* @__PURE__ */ e.createElement(r, null, q))), /* @__PURE__ */ e.createElement(Q, null, u.map((t, n) => /* @__PURE__ */ e.createElement(s, { key: n }, t.map(({ date: o, outsideMonth: $, isSelected: B }) => /* @__PURE__ */ e.createElement(
+    H,
+    {
+      key: `${o.getFullYear()}-${o.getMonth() + 1}-${o.getDate()}`,
+      outsideMonth: $,
+      onSelectDay: () => h(o),
+      isSelected: B
+    },
+    /* @__PURE__ */ e.createElement("span", { "aria-hidden": !0 }, o.getDate()),
+    /* @__PURE__ */ e.createElement(U, null, /* @__PURE__ */ e.createElement("span", null, A(o)))
+  )))))))));
 };
 E.defaultProps = {
   selectedDate: void 0,

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;