@strapi/design-system 1.6.3 → 1.6.5

package/dist/DatePicker/DatePickerCalendar.js

@@ -1,23 +1,24 @@
 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 { Box as p } from "../Box/Box.js";
-import { RawTable as V } 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 { DatePickerPopover as _ } from "./components.js";
+import { DatePickerTd as H } from "./DatePickerTd.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 { 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 { Flex as G } from "../Flex/Flex.js";
+import { FocusTrap as J } from "../FocusTrap/FocusTrap.js";
+import { RawTable as K } from "../RawTable/RawTable.js";
+import "react/jsx-runtime";
+import "../RawTable/RawTableContext.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 +29,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 +40,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.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),p=require("prop-types"),f=require("styled-components");require("../RawTable/RawTable.cjs");const y=require("../RawTable/RawCell.cjs");require("../RawTable/RawThead.cjs");require("../RawTable/RawTbody.cjs");require("../RawTable/RawTr.cjs");const s=require("../Typography/Typography.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(d),t=u(p),b=u(f),T=b.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),p=require("prop-types"),f=require("styled-components");require("react/jsx-runtime");require("../RawTable/RawTableContext.cjs");const y=require("../RawTable/RawCell.cjs");require("../Box/Box.cjs");const i=require("../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=n(d),t=n(p),b=n(f),T=b.default.button`
   border: none;
   background: ${({theme:e,isSelected:r})=>r?e.colors.primary100:e.colors.neutral0};
   height: ${32/16}rem;
@@ -13,7 +13,7 @@
     background: ${({theme:e})=>e.colors.primary100};
   }
 
-  &:hover > ${s.Typography} {
+  &:hover > ${i.Typography} {
     color: ${({theme:e})=>e.colors.primary600};
   }
-`,n=({children:e,outsideMonth:r,onSelectDay:c,isSelected:o,...i})=>{let a="neutral900";return o?a="primary600":r&&(a="neutral600"),l.default.createElement(y.RawTd,{...i},l.default.createElement(T,{tabIndex:-1,onClick:c,isSelected:o,type:"button"},l.default.createElement(s.Typography,{variant:"pi",textColor:a,fontWeight:o?"bold":null},e)))};n.defaultProps={isSelected:!1,outsideMonth:!1};n.propTypes={children:t.default.node.isRequired,isSelected:t.default.bool,onSelectDay:t.default.func.isRequired,outsideMonth:t.default.bool};exports.DatePickerTd=n;
+`,u=({children:e,outsideMonth:r,onSelectDay:s,isSelected:o,...c})=>{let a="neutral900";return o?a="primary600":r&&(a="neutral600"),l.default.createElement(y.RawTd,{...c},l.default.createElement(T,{tabIndex:-1,onClick:s,isSelected:o,type:"button"},l.default.createElement(i.Typography,{variant:"pi",textColor:a,fontWeight:o?"bold":null},e)))};u.defaultProps={isSelected:!1,outsideMonth:!1};u.propTypes={children:t.default.node.isRequired,isSelected:t.default.bool,onSelectDay:t.default.func.isRequired,outsideMonth:t.default.bool};exports.DatePickerTd=u;

package/dist/DatePicker/DatePickerTd.js

@@ -1,13 +1,12 @@
 import l from "react";
 import o from "prop-types";
-import u from "styled-components";
-import "../RawTable/RawTable.js";
-import { RawTd as c } from "../RawTable/RawCell.js";
-import "../RawTable/RawThead.js";
-import "../RawTable/RawTbody.js";
-import "../RawTable/RawTr.js";
+import c from "styled-components";
+import "react/jsx-runtime";
+import "../RawTable/RawTableContext.js";
+import { RawTd as m } from "../RawTable/RawCell.js";
+import "../Box/Box.js";
 import { Typography as n } from "../Typography/Typography.js";
-const s = u.button`
+const s = c.button`
   border: none;
   background: ${({ theme: e, isSelected: r }) => r ? e.colors.primary100 : e.colors.neutral0};
   height: ${32 / 16}rem;
@@ -25,20 +24,9 @@ const s = u.button`
   &:hover > ${n} {
     color: ${({ theme: e }) => e.colors.primary600};
   }
-`, a = ({ children: e, outsideMonth: r, onSelectDay: p, isSelected: t, ...m }) => {
+`, a = ({ children: e, outsideMonth: r, onSelectDay: p, isSelected: t, ...u }) => {
   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(m, { ...u }, /* @__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 n=require("react"),i=require("prop-types"),s=require("styled-components"),u=require("../Flex/Flex.cjs");require("react/jsx-runtime");require("../RawTable/RawTableContext.cjs");const c=require("../RawTable/RawCell.cjs");require("../Box/Box.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(n),f=r(i),a=r(s),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(u.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,22 @@
 import e from "react";
 import i from "prop-types";
 import r from "styled-components";
-import "../RawTable/RawTable.js";
-import { RawTh as n } 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 { Flex as n } from "../Flex/Flex.js";
+import "react/jsx-runtime";
+import "../RawTable/RawTableContext.js";
+import { RawTh as a } from "../RawTable/RawCell.js";
+import "../Box/Box.js";
+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 f=require("react"),$=require("./DateTimePickerProps.cjs"),y=require("./parseDate.cjs"),_=require("../DatePicker/DatePicker.cjs"),L=require("../Field/Field.cjs"),V=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const v=require("../Field/FieldHint.cjs"),C=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const S=require("../Flex/Flex.cjs"),R=require("../hooks/useId.cjs"),A=require("../TimePicker/TimePicker.cjs"),O=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},s=O(f),P=({ariaLabel:i,clearLabel:T,disabled:k,error:p,hint:m,label:o,labelAction:H,onChange:a,onClear:D,name:j,required:F,selectButtonTitle:M,size:q,step:x,value:l,...E})=>{const d=y.parseDate(l),[r,n]=f.useState(d),[u,c]=f.useState(d?`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`:null),I=e=>{n(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),c(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),a&&a(t)},b=e=>{c(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||n(t),a&&a(t)},h=()=>{n(void 0),c(void 0),D()},w=()=>{c(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),a&&a(e)};f.useEffect(()=>{if(l&&+l!=+r){const e=y.parseDate(l);n(e),c(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else l||(n(void 0),c(void 0))},[l,r]);const g=R.useId(E?.id);return s.default.createElement(L.Field,{name:j,role:"group",id:g,"aria-labelledby":g,hint:m,error:p,required:F},s.default.createElement(S.Flex,{direction:"column",alignItems:"stretch",gap:1},o&&s.default.createElement(V.FieldLabel,{action:H},o),s.default.createElement(S.Flex,{gap:2},s.default.createElement(_.DatePicker,{"data-testid":"datetimepicker-date",id:g,name:j,ariaLabel:o||i,error:typeof p=="string",hint:typeof m=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:I,required:F,size:q,onClear:D&&h,clearLabel:T,disabled:k,...E}),s.default.createElement(A.TimePicker,{"data-testid":"datetimepicker-time",size:q,"aria-label":o||i,error:typeof p=="string",hint:typeof m=="string",value:u,onChange:b,onClear:D&&w,clearLabel:T,required:F,selectButtonTitle:M,disabled:k,step:x})),s.default.createElement(v.FieldHint,null),s.default.createElement(C.FieldError,null)))};P.defaultProps=$.dateTimePickerDefaultProps;P.propTypes=$.dateTimePickerPropTypes;exports.DateTimePicker=P;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,19 +1,19 @@
-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 r, { useState as y, useEffect as v } from "react";
+import { dateTimePickerDefaultProps as C, dateTimePickerPropTypes as L } from "./DateTimePickerProps.js";
+import { parseDate as H } 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 A } from "../Field/FieldHint.js";
+import { FieldError as B } 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 { Flex as S } from "../Flex/Flex.js";
+import { useId as G } from "../hooks/useId.js";
+import { TimePicker as J } from "../TimePicker/TimePicker.js";
 const M = ({
-  ariaLabel: g,
+  ariaLabel: D,
   clearLabel: T,
   disabled: E,
   error: d,
@@ -24,13 +24,13 @@ const M = ({
   onClear: f,
   name: $,
   required: u,
-  selectButtonTitle: h,
+  selectButtonTitle: F,
   size: k,
-  step: F,
+  step: h,
   value: a,
   ...P
 }) => {
-  const n = H(a), [i, m] = S(n), [c, s] = S(
+  const n = H(a), [i, m] = y(n), [c, s] = y(
     n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
   ), V = (e) => {
     m(e);
@@ -40,14 +40,14 @@ const M = ({
     s(e);
     const t = i ? new Date(i) : new Date();
     t.setHours(e.split(":")[0]), t.setMinutes(e.split(":")[1]), i || m(t), o && o(t);
-  }, _ = () => {
+  }, x = () => {
     m(void 0), s(void 0), f();
-  }, v = () => {
+  }, _ = () => {
     s(void 0);
     let e;
     i && (e = new Date(i), e.setHours("00"), e.setMinutes("00")), o && o(e);
   };
-  x(() => {
+  v(() => {
     if (a && +a != +i) {
       const e = H(a);
       m(e), s(
@@ -56,56 +56,59 @@ const M = ({
     } 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 g = G(P?.id);
+  return /* @__PURE__ */ r.createElement(
+    b,
+    {
+      name: $,
+      role: "group",
+      id: g,
+      "aria-labelledby": g,
+      hint: p,
+      error: d,
+      required: u
+    },
+    /* @__PURE__ */ r.createElement(S, { direction: "column", alignItems: "stretch", gap: 1 }, l && /* @__PURE__ */ r.createElement(j, { action: w }, l), /* @__PURE__ */ r.createElement(S, { gap: 2 }, /* @__PURE__ */ r.createElement(
+      R,
+      {
+        "data-testid": "datetimepicker-date",
+        id: g,
+        name: $,
+        ariaLabel: l || D,
+        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 && x,
+        clearLabel: T,
+        disabled: E,
+        ...P
+      }
+    ), /* @__PURE__ */ r.createElement(
+      J,
+      {
+        "data-testid": "datetimepicker-time",
+        size: k,
+        "aria-label": l || D,
+        error: typeof d == "string",
+        hint: typeof p == "string",
+        value: c,
+        onChange: I,
+        onClear: f && _,
+        clearLabel: T,
+        required: u,
+        selectButtonTitle: F,
+        disabled: E,
+        step: h
+      }
+    )), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(B, 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"),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)`
   inset: 0;
-  background: ${({theme:e})=>T.setOpacity(e.colors.neutral800,.2)};
-`,_=s.default(o.Box)`
+  background: ${({theme:e})=>x.setOpacity(e.colors.neutral800,.2)};
+`,_=l.default(r.Box)`
   max-width: ${412/16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`,F=s.default(h.Flex)`
+`,F=l.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;
+`,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;

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 "../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)`
   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]};