@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/DatePicker/DatePickerCalendar.js

@@ -3,54 +3,23 @@ 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 t } from "./DatePickerTh.js";
-import { getDayOfWeek as I } from "./utils/getDayOfWeek.js";
-import { getMonths as V } from "./utils/getMonths.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 { getDefaultLocale as I } from "../helpers/getDefaultLocale.js";
+import { generateWeeks as V } from "./utils/generateWeeks.js";
+import { getDayOfWeek as q } from "./utils/getDayOfWeek.js";
+import { getMonths as z } from "./utils/getMonths.js";
+import { getYears as A } from "./utils/getYears.js";
+import { SimpleMenu as u, MenuItem as g } from "../SimpleMenu/SimpleMenu.js";
+import { RawTable as G } from "../RawTable/RawTable.js";
+import { RawThead as J } from "../RawTable/RawThead.js";
+import { RawTr as D } from "../RawTable/RawTr.js";
+import { RawTbody as K } from "../RawTable/RawTbody.js";
+import { formatDate as N } from "./utils/formatDate.js";
+import { FocusTrap as Q } from "../FocusTrap/FocusTrap.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 { getDefaultLocale as K } from "../helpers/getDefaultLocale.js";
-import { RawTable as N } from "../RawTable/RawTable.js";
-import "../RawTable/RawTableContext.js";
-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 { Flex as U } from "../Flex/Flex.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: c = new Date(),
-  locale: d,
-  onChange: s,
-  minDate: w,
-  maxDate: k
-}) => {
-  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();
+const ke = ({ onEscape: i, popoverSource: c, ...d }) => e(W, { source: c, role: "dialog", "aria-modal": "true", spacing: 4, children: e(Q, { onEscape: i, children: e(Z, { ...d }) }) }), Z = ({ selectedDate: i, initialDate: c = /* @__PURE__ */ new Date(), locale: d, onChange: s, minDate: w, maxDate: k }) => {
+  const [a, m] = E(c), [f, C, M] = V(a, i), { sun: x, mon: R, tue: T, wed: P, thu: F, fri: S, sat: Y } = q(), h = z(), b = A(w, k), y = d || I();
   O(() => {
     i && m(i);
   }, [i]);
@@ -63,80 +32,12 @@ const Ce = ({
   }, $ = (r) => () => {
     s && s(r);
   };
-  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))
-      })]
-    })]
-  });
+  return l(p, { padding: 4, children: [e(p, { paddingBottom: 4, paddingLeft: 2, paddingRight: 2, children: l(U, { children: [e(u, { label: h[a.getMonth()], children: h.map((r) => e(g, { onClick: () => v(r), children: r }, r)) }), e(p, { paddingLeft: 2, children: e(u, { label: a.getFullYear(), children: b.map((r) => e(g, { onClick: () => L(r), children: r }, r)) }) })] }) }), l(G, { colCount: 7, rowCount: f.length + 1, initialCol: M, initialRow: C, role: "grid", children: [e(J, { children: l(D, { "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(K, { children: f.map((r, o) => (
+    // eslint-disable-next-line react/no-array-index-key
+    e(D, { 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: N(n, y) }) })] }, `${n.getFullYear()}-${n.getMonth() + 1}-${n.getDate()}`)) }, o)
+  )) })] })] });
 };
 export {
-  Ce as DatePickerCalendar,
+  ke as DatePickerCalendar,
   Z as DatePickerCalendarContent
 };

package/dist/DatePicker/DatePickerTd.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),c=require("styled-components"),s=require("../RawTable/RawCell.cjs"),i=require("../Typography/Typography.cjs"),u=c.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 > ${l.Typography} {
+  &:hover > ${i.Typography} {
     color: ${({theme:e})=>e.colors.primary600};
   }
-`,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;
+`,d=({children:e,outsideMonth:r=!1,onSelectDay:l,isSelected:o=!1,...a})=>{let t="neutral900";return o?t="primary600":r&&(t="neutral600"),n.jsx(s.RawTd,{...a,children:n.jsx(u,{tabIndex:-1,onClick:l,$isSelected:o,type:"button",children:n.jsx(i.Typography,{variant:"pi",textColor:t,fontWeight:o?"bold":void 0,children:e})})})};exports.DatePickerTd=d;

package/dist/DatePicker/DatePickerTd.js

@@ -1,61 +1,29 @@
-import { jsx as i } from "react/jsx-runtime";
-import p from "styled-components";
-import "react";
-import "../RawTable/RawTableContext.js";
-import { RawTd as c } from "../RawTable/RawCell.js";
-import "../Box/Box.js";
-import { Typography as n } from "../Typography/Typography.js";
-const d = p.button`
+import { jsx as n } from "react/jsx-runtime";
+import c from "styled-components";
+import { RawTd as d } from "../RawTable/RawCell.js";
+import { Typography as i } from "../Typography/Typography.js";
+const f = c.button`
   border: none;
-  background: ${({
-  theme: r,
-  $isSelected: o
-}) => o ? r.colors.primary100 : r.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: r
-}) => r.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: r
-}) => r.colors.primary100};
+    background: ${({ theme: r }) => r.colors.primary100};
   }
 
-  &:hover > ${n} {
-    color: ${({
-  theme: r
-}) => r.colors.primary600};
+  &:hover > ${i} {
+    color: ${({ theme: r }) => r.colors.primary600};
   }
-`, y = ({
-  children: r,
-  outsideMonth: o = !1,
-  onSelectDay: l,
-  isSelected: e = !1,
-  ...a
-}) => {
+`, h = ({ 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
-      })
-    })
-  });
+  return e ? t = "primary600" : o && (t = "neutral600"), n(d, { ...a, children: n(f, { tabIndex: -1, onClick: l, $isSelected: e, type: "button", children: n(i, { variant: "pi", textColor: t, fontWeight: e ? "bold" : void 0, children: r }) }) });
 };
 export {
-  y as DatePickerTd
+  h as DatePickerTd
 };

package/dist/DatePicker/DatePickerTh.cjs

@@ -1,9 +1,9 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../RawTable/RawCell.cjs"),o=require("../Flex/Flex.cjs"),s=require("../Typography/Typography.cjs"),a=require("../VisuallyHidden/VisuallyHidden.cjs"),l=t(n.RawTh)`
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
-  border-radius: ${({theme:e})=>e.borderRadius};
+  border-radius: ${({theme:r})=>r.borderRadius};
   text-transform: capitalize;
-`,d=r.default(o.Flex)`
+`,c=t(o.Flex)`
   height: ${24/16}rem;
   width: ${32/16}rem;
-`,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;
+`,u=({children:r,...i})=>e.jsx(l,{...i,children:e.jsxs(c,{justifyContent:"center",children:[e.jsx(s.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0,children:r.substr(0,2)}),e.jsx(a.VisuallyHidden,{children:e.jsx("span",{children:r})})]})});exports.DatePickerTh=u;

package/dist/DatePicker/DatePickerTh.js

@@ -1,42 +1,18 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import t from "styled-components";
-import { Flex as n } from "../Flex/Flex.js";
-import "react";
-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 s = t(a)`
+import { RawTh as n } from "../RawTable/RawCell.js";
+import { Flex as a } from "../Flex/Flex.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
+const f = t(n)`
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
-  border-radius: ${({
-  theme: r
-}) => r.borderRadius};
+  border-radius: ${({ theme: r }) => r.borderRadius};
   text-transform: capitalize;
-`, l = t(n)`
+`, h = t(a)`
   height: ${24 / 16}rem;
   width: ${32 / 16}rem;
-`, y = ({
-  children: r,
-  ...o
-}) => e(s, {
-  ...o,
-  children: i(l, {
-    justifyContent: "center",
-    children: [e(m, {
-      variant: "pi",
-      fontWeight: "bold",
-      color: "neutral800",
-      "aria-hidden": !0,
-      children: r.substr(0, 2)
-    }), e(p, {
-      children: e("span", {
-        children: r
-      })
-    })]
-  })
-});
+`, T = ({ children: r, ...o }) => e(f, { ...o, children: i(h, { justifyContent: "center", children: [e(s, { variant: "pi", fontWeight: "bold", color: "neutral800", "aria-hidden": !0, children: r.substr(0, 2) }), e(l, { children: e("span", { children: r }) })] }) });
 export {
-  y as DatePickerTh
+  T as DatePickerTh
 };

package/dist/DatePicker/compareDates.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=(e,t)=>!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate();exports.isDateEqual=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(e,t)=>!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate();exports.isDateEqual=l;

package/dist/DatePicker/components.cjs

@@ -1,7 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),n=require("../Box/Box.cjs"),a=require("../Field/FieldInput.cjs"),i=require("../Popover/Popover.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(r),d=o.default(i.Popover)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../Field/FieldInput.cjs"),n=require("../Popover/Popover.cjs"),i=require("../Box/Box.cjs"),a=r(n.Popover)`
   max-height: ${3*6}rem;
   overflow: hidden;
-`,l=o.default.button`
+`;/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */const s=r.button`
   border: none;
   background: transparent;
   border-radius: ${({theme:e})=>e.borderRadius};
@@ -10,13 +13,16 @@
   & svg path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,c=o.default.div`
-  ${({bold:e,theme:t})=>e?r.css`
-          & ${a.InputWrapper} {
-            border: 1px solid ${t.colors.primary600};
+`,c=r.div`
+  ${({bold:e,theme:o})=>e?r.css`
+          & ${t.InputWrapper} {
+            border: 1px solid ${o.colors.primary600};
           }
         `:""}
-`,u=o.default(n.Box)`
+`;/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */const d=r(i.Box)`
   background: transparent;
   border: none;
   position: relative;
@@ -30,4 +36,4 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`;exports.DatePickerButton=l;exports.DatePickerPopover=d;exports.DatePickerWrapper=c;exports.IconBox=u;
+`;exports.DatePickerButton=s;exports.DatePickerPopover=a;exports.DatePickerWrapper=c;exports.IconBox=d;

package/dist/DatePicker/components.js

@@ -1,11 +1,16 @@
 import o, { css as t } from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { InputWrapper as i } from "../Field/FieldInput.js";
-import { Popover as a } from "../Popover/Popover.js";
-const c = o(a)`
+import { InputWrapper as n } from "../Field/FieldInput.js";
+import { Popover as i } from "../Popover/Popover.js";
+import { Box as a } from "../Box/Box.js";
+const c = o(i)`
   max-height: ${3 * 6}rem;
   overflow: hidden;
-`, m = o.button`
+`;
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */
+const m = o.button`
   border: none;
   background: transparent;
   border-radius: ${({ theme: r }) => r.borderRadius};
@@ -16,11 +21,16 @@ const c = o(a)`
   }
 `, u = o.div`
   ${({ bold: r, theme: e }) => r ? t`
-          & ${i} {
+          & ${n} {
             border: 1px solid ${e.colors.primary600};
           }
         ` : ""}
-`, $ = o(n)`
+`;
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */
+const $ = o(a)`
   background: transparent;
   border: none;
   position: relative;

package/dist/DatePicker/index.cjs

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

package/dist/DatePicker/utils/formatDate.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=(t,e)=>new Intl.DateTimeFormat(e).format(t);exports.formatDate=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(t,e)=>new Intl.DateTimeFormat(e).format(t);exports.formatDate=r;

package/dist/DatePicker/utils/generateWeeks.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("../compareDates.cjs"),M=7*6,f=(e,g)=>{const i=new Date(e.getFullYear(),e.getMonth(),1),l=new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),c=new Date(e.getFullYear(),e.getMonth(),0).getDate(),s=i.getDay(),h=l+s,r=[];let a=0,u=0,n=0,o;for(let t=0;t<M;t++)t>6&&t%7===0&&n++,r[n]||(r[n]=[]),t<s?o={date:new Date(e.getFullYear(),e.getMonth()-1,c-s+t+1),outsideMonth:!0}:t<h?o={date:new Date(e.getFullYear(),e.getMonth(),t-s+1)}:o={date:new Date(e.getFullYear(),e.getMonth()+1,t-s-l+1),outsideMonth:!0},D.isDateEqual(g,o.date)&&(a=n+1,u=r[n].length,o.isSelected=!0),r[n].push(o);return[r,a,u]};exports.generateWeeks=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../compareDates.cjs"),D=7*6,M=(e,g)=>{const i=new Date(e.getFullYear(),e.getMonth(),1),l=new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),c=new Date(e.getFullYear(),e.getMonth(),0).getDate(),r=i.getDay(),h=l+r,s=[];let a=0,u=0,n=0,o;for(let t=0;t<D;t++)t>6&&t%7===0&&n++,s[n]||(s[n]=[]),t<r?o={date:new Date(e.getFullYear(),e.getMonth()-1,c-r+t+1),outsideMonth:!0}:t<h?o={date:new Date(e.getFullYear(),e.getMonth(),t-r+1)}:o={date:new Date(e.getFullYear(),e.getMonth()+1,t-r-l+1),outsideMonth:!0},f.isDateEqual(g,o.date)&&(a=n+1,u=s[n].length,o.isSelected=!0),s[n].push(o);return[s,a,u]};exports.generateWeeks=M;

package/dist/DatePicker/utils/getDayOfWeek.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=()=>{const e=new Intl.DateTimeFormat(void 0,{weekday:"long"}).format,t=new Date(1970,0,1),n=new Date(1970,0,2),o=new Date(1970,0,3),a=new Date(1970,0,4),s=new Date(1970,0,5),u=new Date(1970,0,6),r=new Date(1970,0,7);return{sun:e(a),mon:e(s),tue:e(u),wed:e(r),thu:e(t),fri:e(n),sat:e(o)}};exports.getDayOfWeek=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=()=>{const e=new Intl.DateTimeFormat(void 0,{weekday:"long"}).format,t=new Date(1970,0,1),n=new Date(1970,0,2),o=new Date(1970,0,3),a=new Date(1970,0,4),s=new Date(1970,0,5),c=new Date(1970,0,6),r=new Date(1970,0,7);return{sun:e(a),mon:e(s),tue:e(c),wed:e(r),thu:e(t),fri:e(n),sat:e(o)}};exports.getDayOfWeek=u;

package/dist/DatePicker/utils/getMonths.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=()=>{const e=new Intl.DateTimeFormat(void 0,{month:"long"}).format;return Array(12).fill(null).map((o,t)=>e(new Date(1970,t,1)))};exports.getMonths=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=()=>{const t=new Intl.DateTimeFormat(void 0,{month:"long"}).format;return Array(12).fill(null).map((o,e)=>t(new Date(1970,e,1)))};exports.getMonths=n;

package/dist/DatePicker/utils/getYears.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=200,u=15,c=(s,a)=>{const t=new Date().getFullYear(),n=s?.getFullYear()??t-l,o=a?.getFullYear()??t+u,r=[];for(let e=n;e<=o;e++)r.push(e);return r};exports.getYears=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=200,l=15,u=(s,a)=>{const t=new Date().getFullYear(),n=s?.getFullYear()??t-c,o=a?.getFullYear()??t+l,r=[];for(let e=n;e<=o;e++)r.push(e);return r};exports.getYears=u;

package/dist/DatePicker/utils/getYears.js

@@ -1,5 +1,5 @@
 const E = (n, s) => {
-  const t = new Date().getFullYear(), a = n?.getFullYear() ?? t - 200, A = s?.getFullYear() ?? t + 15, r = [];
+  const t = (/* @__PURE__ */ new Date()).getFullYear(), a = n?.getFullYear() ?? t - 200, A = s?.getFullYear() ?? t + 15, r = [];
   for (let e = a; e <= A; e++)
     r.push(e);
   return r;

package/dist/DatePicker/utils/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./getDayOfWeek.cjs"),t=require("./getMonths.cjs"),r=require("./generateWeeks.cjs"),s=require("./getYears.cjs"),a=require("./formatDate.cjs");exports.getDayOfWeek=e.getDayOfWeek;exports.getMonths=t.getMonths;exports.generateWeeks=r.generateWeeks;exports.getYears=s.getYears;exports.formatDate=a.formatDate;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./getDayOfWeek.cjs"),t=require("./getMonths.cjs"),r=require("./generateWeeks.cjs"),a=require("./getYears.cjs"),s=require("./formatDate.cjs");exports.getDayOfWeek=e.getDayOfWeek;exports.getMonths=t.getMonths;exports.generateWeeks=r.generateWeeks;exports.getYears=a.getYears;exports.formatDate=s.formatDate;

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),$=require("../DatePicker/DatePicker.cjs"),w=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const v=require("../Field/FieldHint.cjs"),E=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const g=require("../Flex/Flex.cjs"),N=require("../hooks/useControllableState.cjs"),V=require("../hooks/useId.cjs"),_=require("../TimePicker/TimePicker.cjs"),z=({ariaLabel:l,clearLabel:s="clear",disabled:p=!1,error:c,hint:d,id:h,label:u,labelAction:x,onChange:f,onClear:m,name:q,required:F=!1,selectButtonTitle:b="select",size:D="M",step:k=1,value:T,...C})=>{const P=A(T),[t,a]=N.useControllableState({prop:P,onChange:f}),r=t?`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`:void 0,I=e=>{if(r){const[n,j]=r.split(":");e.setHours(parseInt(n,10)),e.setMinutes(parseInt(j,10))}a(e)},S=e=>{const n=t?new Date(t):new Date,[j,y]=e.split(":");n.setHours(parseInt(j,10)),n.setMinutes(parseInt(y,10)),a(n)},H=()=>{a(void 0),m&&m()},M=()=>{let e=t?new Date(t):new Date;e.setHours(0),e.setMinutes(0),a(e)},o=V.useId(h);return i.jsx(w.Field,{name:q,role:"group",id:o,"aria-labelledby":o,hint:d,error:c,required:F,children:i.jsxs(g.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i.jsx(L.FieldLabel,{action:x,children:u}),i.jsxs(g.Flex,{gap:2,children:[i.jsx($.DatePicker,{ariaLabel:u||l,selectedDate:t,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:I,error:typeof c=="string",hint:typeof d=="string",required:F,size:D,onClear:H,clearLabel:`${s} date`,disabled:p,id:o,...C}),i.jsx(_.TimePicker,{size:D,"aria-label":u||l,error:typeof c=="string",hint:typeof d=="string",value:r,onChange:S,onClear:r!==void 0&&r!=="0:0:0"?M:void 0,clearLabel:`${s} time`,required:F,selectButtonTitle:b,disabled:p,step:k,id:o})]}),i.jsx(v.FieldHint,{}),i.jsx(E.FieldError,{})]})})},A=l=>{const s=Date.parse(l);if(!Number.isNaN(s))return new Date(s)};exports.DateTimePicker=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),$=require("../hooks/useControllableState.cjs"),w=require("../hooks/useId.cjs"),L=require("../DatePicker/DatePicker.cjs"),N=require("../TimePicker/TimePicker.cjs"),V=require("../Field/Field.cjs"),f=require("../Flex/Flex.cjs"),v=require("../Field/FieldLabel.cjs"),E=require("../Field/FieldHint.cjs"),z=require("../Field/FieldError.cjs"),B=({ariaLabel:a,clearLabel:s="clear",disabled:m=!1,error:c,hint:u,id:x,label:d,labelAction:b,onChange:q,onClear:D,name:F,required:p=!1,selectButtonTitle:j="select",size:h="M",step:T=1,value:C,...I})=>{const k=O(C),[t,o]=$.useControllableState({prop:k,onChange:q}),r=t?`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`:void 0,y=e=>{if(r){const[i,g]=r.split(":");e.setHours(parseInt(i,10)),e.setMinutes(parseInt(g,10))}o(e)},P=e=>{const i=t?new Date(t):new Date,[g,M]=e.split(":");i.setHours(parseInt(g,10)),i.setMinutes(parseInt(M,10)),o(i)},S=()=>{o(void 0),D&&D()},H=()=>{let e=t?new Date(t):new Date;e.setHours(0),e.setMinutes(0),o(e)},l=w.useId(x);return n.jsx(V.Field,{name:F,role:"group",id:l,"aria-labelledby":l,hint:u,error:c,required:p,children:n.jsxs(f.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(v.FieldLabel,{action:b,children:d}),n.jsxs(f.Flex,{gap:2,children:[n.jsx(L.DatePicker,{ariaLabel:d||a,selectedDate:t,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:y,error:typeof c=="string",hint:typeof u=="string",required:p,size:h,onClear:S,clearLabel:`${s} date`,disabled:m,id:l,...I}),n.jsx(N.TimePicker,{size:h,"aria-label":d||a,error:typeof c=="string",hint:typeof u=="string",value:r,onChange:P,onClear:r!==void 0&&r!=="0:0:0"?H:void 0,clearLabel:`${s} time`,required:p,selectButtonTitle:j,disabled:m,step:T,id:l})]}),n.jsx(E.FieldHint,{}),n.jsx(z.FieldError,{})]})})},O=a=>{const s=Date.parse(a);if(!Number.isNaN(s))return new Date(s)};exports.DateTimePicker=B;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,107 +1,56 @@
 import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { DatePicker as P } from "../DatePicker/DatePicker.js";
-import { Field as V } from "../Field/Field.js";
-import { FieldLabel as j } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as q } from "../Field/FieldHint.js";
-import { FieldError as v } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
+import { useControllableState as P } from "../hooks/useControllableState.js";
+import { useId as V } from "../hooks/useId.js";
+import { DatePicker as j } from "../DatePicker/DatePicker.js";
+import { TimePicker as q } from "../TimePicker/TimePicker.js";
+import { Field as v } from "../Field/Field.js";
 import { Flex as C } from "../Flex/Flex.js";
-import { useControllableState as z } from "../hooks/useControllableState.js";
-import { useId as B } from "../hooks/useId.js";
-import { TimePicker as E } from "../TimePicker/TimePicker.js";
-const te = ({
-  ariaLabel: s,
-  clearLabel: n = "clear",
-  disabled: f = !1,
-  error: d,
-  hint: m,
-  id: b,
-  label: c,
-  labelAction: I,
-  onChange: T,
-  onClear: g,
-  name: $,
-  required: p = !1,
-  selectButtonTitle: w = "select",
-  size: h = "M",
-  step: y = 1,
-  value: F,
-  ...H
-}) => {
-  const M = A(F), [t, a] = z({
+import { FieldLabel as z } from "../Field/FieldLabel.js";
+import { FieldHint as B } from "../Field/FieldHint.js";
+import { FieldError as E } from "../Field/FieldError.js";
+const Z = ({ ariaLabel: a, clearLabel: n = "clear", disabled: f = !1, error: d, hint: c, id: b, label: m, labelAction: I, onChange: T, onClear: g, name: $, required: u = !1, selectButtonTitle: w = "select", size: h = "M", step: y = 1, value: F, ...H }) => {
+  const M = A(F), [t, o] = P({
     prop: M,
     onChange: T
   }), i = t ? `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}` : void 0, k = (e) => {
     if (i) {
-      const [o, u] = i.split(":");
-      e.setHours(parseInt(o, 10)), e.setMinutes(parseInt(u, 10));
+      const [s, p] = i.split(":");
+      e.setHours(parseInt(s, 10)), e.setMinutes(parseInt(p, 10));
     }
-    a(e);
+    o(e);
   }, x = (e) => {
-    const o = t ? new Date(t) : new Date(), [u, N] = e.split(":");
-    o.setHours(parseInt(u, 10)), o.setMinutes(parseInt(N, 10)), a(o);
+    const s = t ? new Date(t) : /* @__PURE__ */ new Date(), [p, N] = e.split(":");
+    s.setHours(parseInt(p, 10)), s.setMinutes(parseInt(N, 10)), o(s);
   }, S = () => {
-    a(void 0), g && g();
+    o(void 0), g && g();
   }, L = () => {
-    let e = t ? new Date(t) : new Date();
-    e.setHours(0), e.setMinutes(0), a(e);
-  }, l = B(b);
-  return r(V, {
-    name: $,
-    role: "group",
-    id: l,
-    "aria-labelledby": l,
-    hint: m,
-    error: d,
-    required: p,
-    children: D(C, {
-      direction: "column",
-      alignItems: "stretch",
-      gap: 1,
-      children: [r(j, {
-        action: I,
-        children: c
-      }), D(C, {
-        gap: 2,
-        children: [r(P, {
-          ariaLabel: c || s,
-          selectedDate: t,
-          selectedDateLabel: (e) => `Date picker, current is ${e}`,
-          onChange: k,
-          error: typeof d == "string",
-          hint: typeof m == "string",
-          required: p,
-          size: h,
-          onClear: S,
-          clearLabel: `${n} date`,
-          disabled: f,
-          id: l,
-          ...H
-        }), r(E, {
-          size: h,
-          "aria-label": c || s,
-          error: typeof d == "string",
-          hint: typeof m == "string",
-          value: i,
-          onChange: x,
-          onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
-          clearLabel: `${n} time`,
-          required: p,
-          selectButtonTitle: w,
-          disabled: f,
-          step: y,
-          id: l
-        })]
-      }), r(q, {}), r(v, {})]
-    })
-  });
-}, A = (s) => {
-  const n = Date.parse(s);
+    let e = t ? new Date(t) : /* @__PURE__ */ new Date();
+    e.setHours(0), e.setMinutes(0), o(e);
+  }, l = V(b);
+  return r(v, { name: $, role: "group", id: l, "aria-labelledby": l, hint: c, error: d, required: u, children: D(C, { direction: "column", alignItems: "stretch", gap: 1, children: [r(z, { action: I, children: m }), D(C, { gap: 2, children: [r(j, { ariaLabel: m || a, selectedDate: t, selectedDateLabel: (e) => `Date picker, current is ${e}`, onChange: k, error: typeof d == "string", hint: typeof c == "string", required: u, size: h, onClear: S, clearLabel: `${n} date`, disabled: f, id: l, ...H }), r(q, {
+    size: h,
+    "aria-label": m || a,
+    error: typeof d == "string",
+    hint: typeof c == "string",
+    value: i,
+    onChange: x,
+    /**
+     * In reality the time picker is only cleared when there is no date otherwise it's just 00:00
+     * and we should show that for accurate UX and therefore you cannot clear it when it's 00:00.
+     */
+    onClear: i !== void 0 && i !== "0:0:0" ? L : void 0,
+    clearLabel: `${n} time`,
+    required: u,
+    selectButtonTitle: w,
+    disabled: f,
+    step: y,
+    id: l
+  })] }), r(B, {}), r(E, {})] }) });
+}, A = (a) => {
+  const n = Date.parse(a);
   if (!Number.isNaN(n))
     return new Date(n);
 };
 export {
-  te as DateTimePicker
+  Z as DateTimePicker
 };

package/dist/DateTimePicker/index.cjs

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

package/dist/DateTimePicker/parseDate.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=t=>{const e=Date.parse(t);if(!Number.isNaN(e))return new Date(e)};exports.parseDate=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=t=>{const e=Date.parse(t);if(!Number.isNaN(e))return new Date(e)};exports.parseDate=r;