@strapi/design-system 1.6.5 → 1.7.0-alpha.0

package/dist/Combobox/ComboboxOption.js

@@ -1,31 +1,5 @@
-import t, { forwardRef as a } from "react";
-import o from "prop-types";
-import { OptionBox as d } from "./components.js";
-import { Typography as m } from "../Typography/Typography.js";
-const r = a(({ isSelected: e, children: p, ...i }, n) => /* @__PURE__ */ t.createElement(
-  d,
-  {
-    hasRadius: !0,
-    paddingLeft: 4,
-    paddingRight: 4,
-    paddingTop: 2,
-    paddingBottom: 2,
-    role: "option",
-    background: "neutral0",
-    isSelected: e,
-    ref: n,
-    ...i
-  },
-  /* @__PURE__ */ t.createElement(m, { textColor: e ? "primary600" : "neutral800", fontWeight: e ? "bold" : null }, p)
-));
-r.defaultProps = {
-  isSelected: !1
-};
-r.propTypes = {
-  children: o.oneOfType([o.string, o.number]).isRequired,
-  isSelected: o.bool
-};
-r.displayName = "ComboboxOption";
+import { Option as o } from "./Combobox.js";
+const p = o;
 export {
-  r as ComboboxOption
+  p as ComboboxOption
 };

package/dist/DatePicker/DatePicker.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),v=require("@strapi/icons"),z=require("prop-types"),u=require("./components.cjs"),I=require("./DatePickerCalendar.cjs"),C=require("./utils/formatDate.cjs"),S=require("../helpers/getDefaultLocale.cjs"),B=require("../TextInput/TextInput.cjs"),M=require("../themes/sizes.cjs"),h=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=h(o),e=h(z),f=({ariaLabel:t,initialDate:k,selectedDate:n,onChange:P,label:i,locale:q,selectedDateLabel:y,onClear:d,clearLabel:R,disabled:l,id:j,minDate:E,maxDate:T,...x})=>{const[p,c]=o.useState(!1),r=o.useRef(null),D=o.useRef(null),m=q||S.getDefaultLocale(),b=n?C.formatDate(n,m):"",g=()=>{l||c(s=>!s)},L=()=>{l||(d(),D.current.focus())},O=s=>{P(s),c(!1)},_=()=>{c(!1)};return a.default.createElement(u.DatePickerWrapper,{bold:p},a.default.createElement(B.TextInput,{ref:r,onClick:g,onChange:()=>{},value:b,startAction:a.default.createElement(u.DatePickerButton,{ref:D,onClick:g,"aria-label":n?y(C.formatDate(n,m)):i||t,type:"button","aria-disabled":l},a.default.createElement(v.Calendar,{"aria-hidden":!0})),endAction:d&&b?a.default.createElement(u.IconBox,{as:"button",onClick:L,"aria-label":R,"aria-disabled":l},a.default.createElement(v.Cross,null)):void 0,"aria-autocomplete":"none",label:i,"aria-label":t,disabled:l,id:j,...x}),r.current&&r.current.inputWrapperRef&&p&&a.default.createElement(I.DatePickerCalendar,{selectedDate:n,initialDate:k,onChange:O,onEscape:_,popoverSource:r.current.inputWrapperRef,label:i||t,minDate:E,maxDate:T}))};f.defaultProps={ariaLabel:void 0,clearLabel:void 0,disabled:!1,id:void 0,label:void 0,locale:void 0,initialDate:new Date,minDate:void 0,maxDate:void 0,onClear:void 0,placeholder:void 0,selectedDate:void 0,size:"M"};f.propTypes={ariaLabel:e.default.string,clearLabel:e.default.string,disabled:e.default.bool,id:e.default.string,initialDate:e.default.instanceOf(Date),label:e.default.string,locale:e.default.string,maxDate:e.default.instanceOf(Date),minDate:e.default.instanceOf(Date),onChange:e.default.func.isRequired,onClear:e.default.func,placeholder:e.default.string,selectedDate:e.default.instanceOf(Date),selectedDateLabel:e.default.func.isRequired,size:e.default.oneOf(Object.keys(M.sizes.input))};exports.DatePicker=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("react"),f=require("@strapi/icons"),k=require("styled-components"),P=require("./components.cjs"),R=require("./DatePickerCalendar.cjs"),T=require("./utils/formatDate.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const I=require("../Field/FieldAction.cjs"),S=require("../helpers/getDefaultLocale.cjs"),v=require("../TextInput/TextInput.cjs"),A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=A(k),L=({ariaLabel:e,onClear:a,clearLabel:h="Clear",initialDate:D,locale:m,maxDate:q,minDate:x,onChange:s,selectedDate:i,disabled:n=!1,...y})=>{const[o,c]=p.useState(!1),r=p.useRef(null),u=m||S.getDefaultLocale(),d=i?T.formatDate(i,u):"",g=()=>{n||c(l=>!l)},C=()=>{n||a&&(a(),r.current.inputWrapperRef.current.focus())},F=l=>{s&&s(l),c(!1)},b=()=>{c(!1)};return t.jsxs(P.DatePickerWrapper,{bold:o,children:[t.jsx(v.TextInput,{ref:r,onClick:g,onChange:()=>{},value:d,startAction:t.jsx(W,{"aria-hidden":!0}),endAction:a&&d?t.jsx(I.FieldAction,{label:h,onClick:C,"aria-disabled":n||void 0,children:t.jsx(_,{})}):void 0,"aria-autocomplete":"none","aria-label":e,disabled:n,type:"text",...y}),r.current&&r.current.inputWrapperRef&&o&&t.jsx(R.DatePickerCalendar,{selectedDate:i,initialDate:D,onChange:F,onEscape:b,locale:u,popoverSource:r.current.inputWrapperRef,minDate:x,maxDate:q})]})},_=j.default(f.Cross)`
+  height: ${11/16}rem;
+  width: ${11/16}rem;
+
+  path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,W=j.default(f.Calendar)`
+  & > path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`;exports.DatePicker=L;

package/dist/DatePicker/DatePicker.js

@@ -1,110 +1,89 @@
-import t, { useState as B, useRef as D } from "react";
-import { Calendar as T, Cross as W } from "@strapi/icons";
-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 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,
-  selectedDate: a,
-  onChange: C,
-  label: i,
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import { useState as S, useRef as W } from "react";
+import { Cross as $, Calendar as v } from "@strapi/icons";
+import m from "styled-components";
+import { DatePickerWrapper as A } from "./components.js";
+import { DatePickerCalendar as P } from "./DatePickerCalendar.js";
+import { formatDate as j } from "./utils/formatDate.js";
+import "../Field/Field.js";
+import "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import "../Field/FieldContext.js";
+import "../Typography/Typography.js";
+import { FieldAction as E } from "../Field/FieldAction.js";
+import { getDefaultLocale as I } from "../helpers/getDefaultLocale.js";
+import { TextInput as V } from "../TextInput/TextInput.js";
+const Y = ({
+  ariaLabel: e,
+  onClear: i,
+  clearLabel: u = "Clear",
+  initialDate: d,
   locale: h,
-  selectedDateLabel: k,
-  onClear: s,
-  clearLabel: E,
-  disabled: r,
-  id: R,
-  minDate: P,
-  maxDate: O,
-  ...x
+  maxDate: C,
+  minDate: D,
+  onChange: c,
+  selectedDate: a,
+  disabled: o = !1,
+  ...g
 }) => {
-  const [f, l] = B(!1), n = D(null), p = D(null), u = h || V(), m = a ? b(a, u) : "", d = () => {
-    r || l((c) => !c);
+  const [p, n] = S(!1), t = W(null), s = h || I(), f = a ? j(a, s) : "", x = () => {
+    o || n((l) => !l);
+  }, b = () => {
+    o || i && (i(), t.current.inputWrapperRef.current.focus());
+  }, k = (l) => {
+    c && c(l), n(!1);
   }, y = () => {
-    r || (s(), p.current.focus());
-  }, L = (c) => {
-    C(c), l(!1);
-  }, z = () => {
-    l(!1);
+    n(!1);
   };
-  return /* @__PURE__ */ t.createElement(q, { bold: f }, /* @__PURE__ */ t.createElement(
-    _,
-    {
-      ref: n,
-      onClick: d,
+  return R(A, {
+    bold: p,
+    children: [r(V, {
+      ref: t,
+      onClick: x,
       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,
+      value: f,
+      startAction: r(F, {
+        "aria-hidden": !0
+      }),
+      endAction: i && f ? r(E, {
+        label: u,
+        onClick: b,
+        "aria-disabled": o || void 0,
+        children: r(w, {})
+      }) : 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,
-    {
+      "aria-label": e,
+      disabled: o,
+      type: "text",
+      ...g
+    }), t.current && t.current.inputWrapperRef && p && r(P, {
       selectedDate: a,
-      initialDate: g,
-      onChange: L,
-      onEscape: z,
-      popoverSource: n.current.inputWrapperRef,
-      label: i || o,
-      minDate: P,
-      maxDate: O
-    }
-  ));
-};
-v.defaultProps = {
-  ariaLabel: void 0,
-  clearLabel: void 0,
-  disabled: !1,
-  id: void 0,
-  label: void 0,
-  locale: void 0,
-  initialDate: new Date(),
-  minDate: void 0,
-  maxDate: void 0,
-  onClear: void 0,
-  placeholder: void 0,
-  selectedDate: void 0,
-  size: "M"
-};
-v.propTypes = {
-  ariaLabel: e.string,
-  clearLabel: e.string,
-  disabled: e.bool,
-  id: e.string,
-  initialDate: e.instanceOf(Date),
-  label: e.string,
-  locale: e.string,
-  maxDate: e.instanceOf(Date),
-  minDate: e.instanceOf(Date),
-  onChange: e.func.isRequired,
-  onClear: e.func,
-  placeholder: e.string,
-  selectedDate: e.instanceOf(Date),
-  selectedDateLabel: e.func.isRequired,
-  size: e.oneOf(Object.keys(j.input))
-};
+      initialDate: d,
+      onChange: k,
+      onEscape: y,
+      locale: s,
+      popoverSource: t.current.inputWrapperRef,
+      minDate: D,
+      maxDate: C
+    })]
+  });
+}, w = m($)`
+  height: ${11 / 16}rem;
+  width: ${11 / 16}rem;
+
+  path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+  }
+`, F = m(v)`
+  & > path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral500};
+  }
+`;
 export {
-  v as DatePicker
+  Y 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("./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("react/jsx-runtime");require("../RawTable/RawTableContext.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:x,wed:M,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,x),e.default.createElement(r.DatePickerTh,null,M),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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),T=require("react"),L=require("./components.cjs"),O=require("./DatePickerTd.cjs"),a=require("./DatePickerTh.cjs"),H=require("./utils/getDayOfWeek.cjs"),V=require("./utils/getMonths.cjs"),$=require("./utils/generateWeeks.cjs"),E=require("./utils/getYears.cjs"),I=require("./utils/formatDate.cjs"),h=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),z=require("../FocusTrap/FocusTrap.cjs"),A=require("../helpers/getDefaultLocale.cjs"),G=require("../RawTable/RawTable.cjs");require("../RawTable/RawTableContext.cjs");const J=require("../RawTable/RawThead.cjs"),K=require("../RawTable/RawTbody.cjs"),g=require("../RawTable/RawTr.cjs"),i=require("../SimpleMenu/SimpleMenu.cjs"),N=require("../VisuallyHidden/VisuallyHidden.cjs"),Q=({onEscape:s,popoverSource:l,...o})=>e.jsx(L.DatePickerPopover,{source:l,role:"dialog","aria-modal":"true",spacing:4,children:e.jsx(z.FocusTrap,{onEscape:s,children:e.jsx(D,{...o})})}),D=({selectedDate:s,initialDate:l=new Date,locale:o,onChange:j,minDate:p,maxDate:w})=>{const[c,d]=T.useState(l),[x,k,R]=$.generateWeeks(c,s),{sun:m,mon:q,tue:P,wed:f,thu:M,fri:b,sat:C}=H.getDayOfWeek(),u=V.getMonths(),y=E.getYears(p,w),F=o||A.getDefaultLocale();T.useEffect(()=>{s&&d(s)},[s]);const S=t=>{const r=new Date(c);r.setMonth(u.indexOf(t)),d(r)},B=t=>{const r=new Date(c);r.setFullYear(t),d(r)},Y=t=>()=>{j&&j(t)};return e.jsxs(h.Box,{padding:4,children:[e.jsx(h.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2,children:e.jsxs(_.Flex,{children:[e.jsx(i.SimpleMenu,{label:u[c.getMonth()],children:u.map(t=>e.jsx(i.MenuItem,{onClick:()=>S(t),children:t},t))}),e.jsx(h.Box,{paddingLeft:2,children:e.jsx(i.SimpleMenu,{label:c.getFullYear(),children:y.map(t=>e.jsx(i.MenuItem,{onClick:()=>B(t),children:t},t))})})]})}),e.jsxs(G.RawTable,{colCount:7,rowCount:x.length+1,initialCol:R,initialRow:k,role:"grid",children:[e.jsx(J.RawThead,{children:e.jsxs(g.RawTr,{"aria-rowindex":1,children:[e.jsx(a.DatePickerTh,{children:m}),e.jsx(a.DatePickerTh,{children:q}),e.jsx(a.DatePickerTh,{children:P}),e.jsx(a.DatePickerTh,{children:f}),e.jsx(a.DatePickerTh,{children:M}),e.jsx(a.DatePickerTh,{children:b}),e.jsx(a.DatePickerTh,{children:C})]})}),e.jsx(K.RawTbody,{children:x.map((t,r)=>e.jsx(g.RawTr,{children:t.map(({date:n,outsideMonth:W,isSelected:v})=>e.jsxs(O.DatePickerTd,{outsideMonth:W,onSelectDay:Y(n),isSelected:v,children:[e.jsx("span",{"aria-hidden":!0,children:n.getDate()}),e.jsx(N.VisuallyHidden,{children:e.jsx("span",{children:I.formatDate(n,F)})})]},`${n.getFullYear()}-${n.getMonth()+1}-${n.getDate()}`))},r))})]})]})};exports.DatePickerCalendar=Q;exports.DatePickerCalendarContent=D;

package/dist/DatePicker/DatePickerCalendar.js

@@ -1,75 +1,142 @@
-import e, { useState as L, useEffect as W } from "react";
-import a from "prop-types";
-import { DatePickerPopover as _ } from "./components.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as E, useEffect as O } from "react";
+import { DatePickerPopover as W } from "./components.js";
 import { DatePickerTd as H } from "./DatePickerTd.js";
-import { DatePickerTh as r } from "./DatePickerTh.js";
+import { DatePickerTh as t } 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 { generateWeeks as q } 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 { getDefaultLocale as K } from "../helpers/getDefaultLocale.js";
+import { RawTable as N } from "../RawTable/RawTable.js";
 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 = ({
+import { RawThead as Q } from "../RawTable/RawThead.js";
+import { RawTbody as U } from "../RawTable/RawTbody.js";
+import { RawTr as u } from "../RawTable/RawTr.js";
+import { SimpleMenu as g, MenuItem as D } from "../SimpleMenu/SimpleMenu.js";
+import { VisuallyHidden as X } from "../VisuallyHidden/VisuallyHidden.js";
+const Ce = ({
+  onEscape: i,
+  popoverSource: c,
+  ...d
+}) => e(W, {
+  source: c,
+  role: "dialog",
+  "aria-modal": "true",
+  spacing: 4,
+  children: e(J, {
+    onEscape: i,
+    children: e(Z, {
+      ...d
+    })
+  })
+}), Z = ({
   selectedDate: i,
-  initialDate: g,
-  popoverSource: D,
-  onChange: h,
-  label: k,
+  initialDate: c = new Date(),
+  locale: d,
+  onChange: s,
   minDate: w,
-  maxDate: R,
-  onEscape: y
+  maxDate: k
 }) => {
-  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(() => {
+  const [a, m] = E(c), [f, C, M] = q(a, i), {
+    sun: x,
+    mon: R,
+    tue: T,
+    wed: P,
+    thu: F,
+    fri: S,
+    sat: Y
+  } = I(), h = V(), b = z(w, k), y = d || K();
+  O(() => {
     i && m(i);
   }, [i]);
-  const Y = (t) => {
-    const n = new Date(l);
-    n.setMonth(c.indexOf(t)), m(n);
-  }, S = (t) => {
-    const n = new Date(l);
-    n.setFullYear(t), m(n);
+  const v = (r) => {
+    const o = new Date(a);
+    o.setMonth(h.indexOf(r)), m(o);
+  }, L = (r) => {
+    const o = new Date(a);
+    o.setFullYear(r), m(o);
+  }, $ = (r) => () => {
+    s && s(r);
   };
-  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,
-  initialDate: new Date(),
-  minDate: void 0,
-  maxDate: void 0
-};
-E.propTypes = {
-  initialDate: a.instanceOf(Date),
-  label: a.string.isRequired,
-  maxDate: a.instanceOf(Date),
-  minDate: a.instanceOf(Date),
-  onChange: a.func.isRequired,
-  onEscape: a.func.isRequired,
-  popoverSource: a.shape({
-    current: (typeof Element > "u" ? a.any : a.instanceOf(Element)).isRequired
-  }).isRequired,
-  selectedDate: a.instanceOf(Date)
+  return l(p, {
+    padding: 4,
+    children: [e(p, {
+      paddingBottom: 4,
+      paddingLeft: 2,
+      paddingRight: 2,
+      children: l(G, {
+        children: [e(g, {
+          label: h[a.getMonth()],
+          children: h.map((r) => e(D, {
+            onClick: () => v(r),
+            children: r
+          }, r))
+        }), e(p, {
+          paddingLeft: 2,
+          children: e(g, {
+            label: a.getFullYear(),
+            children: b.map((r) => e(D, {
+              onClick: () => L(r),
+              children: r
+            }, r))
+          })
+        })]
+      })
+    }), l(N, {
+      colCount: 7,
+      rowCount: f.length + 1,
+      initialCol: M,
+      initialRow: C,
+      role: "grid",
+      children: [e(Q, {
+        children: l(u, {
+          "aria-rowindex": 1,
+          children: [e(t, {
+            children: x
+          }), e(t, {
+            children: R
+          }), e(t, {
+            children: T
+          }), e(t, {
+            children: P
+          }), e(t, {
+            children: F
+          }), e(t, {
+            children: S
+          }), e(t, {
+            children: Y
+          })]
+        })
+      }), e(U, {
+        children: f.map((r, o) => e(u, {
+          children: r.map(({
+            date: n,
+            outsideMonth: j,
+            isSelected: B
+          }) => l(H, {
+            outsideMonth: j,
+            onSelectDay: $(n),
+            isSelected: B,
+            children: [e("span", {
+              "aria-hidden": !0,
+              children: n.getDate()
+            }), e(X, {
+              children: e("span", {
+                children: A(n, y)
+              })
+            })]
+          }, `${n.getFullYear()}-${n.getMonth() + 1}-${n.getDate()}`))
+        }, o))
+      })]
+    })]
+  });
 };
 export {
-  E as DatePickerCalendar
+  Ce as DatePickerCalendar,
+  Z as DatePickerCalendarContent
 };

package/dist/DatePicker/DatePickerTd.cjs

@@ -1,6 +1,6 @@
-"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`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),s=require("styled-components");require("react");require("../RawTable/RawTableContext.cjs");const u=require("../RawTable/RawCell.cjs");require("../Box/Box.cjs");const l=require("../Typography/Typography.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=c(s),p=d.default.button`
   border: none;
-  background: ${({theme:e,isSelected:r})=>r?e.colors.primary100:e.colors.neutral0};
+  background: ${({theme:e,$isSelected:r})=>r?e.colors.primary100:e.colors.neutral0};
   height: ${32/16}rem;
   text-align: center;
   width: ${32/16}rem;
@@ -13,7 +13,7 @@
     background: ${({theme:e})=>e.colors.primary100};
   }
 
-  &:hover > ${i.Typography} {
+  &:hover > ${l.Typography} {
     color: ${({theme:e})=>e.colors.primary600};
   }
-`,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;
+`,y=({children:e,outsideMonth:r=!1,onSelectDay:n,isSelected:t=!1,...i})=>{let o="neutral900";return t?o="primary600":r&&(o="neutral600"),a.jsx(u.RawTd,{...i,children:a.jsx(p,{tabIndex:-1,onClick:n,$isSelected:t,type:"button",children:a.jsx(l.Typography,{variant:"pi",textColor:o,fontWeight:t?"bold":void 0,children:e})})})};exports.DatePickerTd=y;

package/dist/DatePicker/DatePickerTd.js

@@ -1,43 +1,61 @@
-import l from "react";
-import o from "prop-types";
-import c from "styled-components";
-import "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import p from "styled-components";
+import "react";
 import "../RawTable/RawTableContext.js";
-import { RawTd as m } from "../RawTable/RawCell.js";
+import { RawTd as c } from "../RawTable/RawCell.js";
 import "../Box/Box.js";
 import { Typography as n } from "../Typography/Typography.js";
-const s = c.button`
+const d = p.button`
   border: none;
-  background: ${({ theme: e, isSelected: r }) => r ? e.colors.primary100 : e.colors.neutral0};
+  background: ${({
+  theme: r,
+  $isSelected: o
+}) => o ? r.colors.primary100 : r.colors.neutral0};
   height: ${32 / 16}rem;
   text-align: center;
   width: ${32 / 16}rem;
-  border-radius: ${({ theme: e }) => e.borderRadius};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
 
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
 
   &:hover {
-    background: ${({ theme: e }) => e.colors.primary100};
+    background: ${({
+  theme: r
+}) => r.colors.primary100};
   }
 
   &:hover > ${n} {
-    color: ${({ theme: e }) => e.colors.primary600};
+    color: ${({
+  theme: r
+}) => r.colors.primary600};
   }
-`, a = ({ children: e, outsideMonth: r, onSelectDay: p, isSelected: t, ...u }) => {
-  let i = "neutral900";
-  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,
-  outsideMonth: !1
-};
-a.propTypes = {
-  children: o.node.isRequired,
-  isSelected: o.bool,
-  onSelectDay: o.func.isRequired,
-  outsideMonth: o.bool
+`, y = ({
+  children: r,
+  outsideMonth: o = !1,
+  onSelectDay: l,
+  isSelected: e = !1,
+  ...a
+}) => {
+  let t = "neutral900";
+  return e ? t = "primary600" : o && (t = "neutral600"), i(c, {
+    ...a,
+    children: i(d, {
+      tabIndex: -1,
+      onClick: l,
+      $isSelected: e,
+      type: "button",
+      children: i(n, {
+        variant: "pi",
+        textColor: t,
+        fontWeight: e ? "bold" : void 0,
+        children: r
+      })
+    })
+  });
 };
 export {
-  a as DatePickerTd
+  y as DatePickerTd
 };

package/dist/DatePicker/DatePickerTh.cjs

@@ -1,9 +1,9 @@
-"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)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("styled-components"),o=require("../Flex/Flex.cjs");require("react");require("../RawTable/RawTableContext.cjs");const s=require("../RawTable/RawCell.cjs");require("../Box/Box.cjs");const l=require("../Typography/Typography.cjs"),n=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=u(a),c=r.default(s.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(u.Flex)`
+`,d=r.default(o.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(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;
+`,h=({children:e,...i})=>t.jsx(c,{...i,children:t.jsxs(d,{justifyContent:"center",children:[t.jsx(l.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0,children:e.substr(0,2)}),t.jsx(n.VisuallyHidden,{children:t.jsx("span",{children:e})})]})});exports.DatePickerTh=h;