@strapi/design-system 0.0.0-599b75fb-test

package/dist/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,142 @@
+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 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 { 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 { 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();
+  O(() => {
+    i && m(i);
+  }, [i]);
+  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 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 {
+  Ce as DatePickerCalendar,
+  Z as DatePickerCalendarContent
+};

package/dist/DatePicker/DatePickerTd.cjs

@@ -0,0 +1,19 @@
+"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};
+  height: ${32/16}rem;
+  text-align: center;
+  width: ${32/16}rem;
+  border-radius: ${({theme:e})=>e.borderRadius};
+
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &:hover > ${l.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;

package/dist/DatePicker/DatePickerTd.js

@@ -0,0 +1,61 @@
+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`
+  border: none;
+  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};
+
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+
+  &:hover {
+    background: ${({
+  theme: r
+}) => r.colors.primary100};
+  }
+
+  &:hover > ${n} {
+    color: ${({
+  theme: r
+}) => r.colors.primary600};
+  }
+`, 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 {
+  y as DatePickerTd
+};

package/dist/DatePicker/DatePickerTh.cjs

@@ -0,0 +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)`
+  // 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;
+`,d=r.default(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;

package/dist/DatePicker/DatePickerTh.js

@@ -0,0 +1,42 @@
+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)`
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  text-transform: capitalize;
+`, l = t(n)`
+  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
+      })
+    })]
+  })
+});
+export {
+  y as DatePickerTh
+};

package/dist/DatePicker/compareDates.cjs

@@ -0,0 +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;

package/dist/DatePicker/compareDates.js

@@ -0,0 +1,4 @@
+const r = (e, t) => !e || !t ? !1 : e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+export {
+  r as isDateEqual
+};

package/dist/DatePicker/components.cjs

@@ -0,0 +1,33 @@
+"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)`
+  max-height: ${3*6}rem;
+  overflow: hidden;
+`,l=o.default.button`
+  border: none;
+  background: transparent;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  cursor: ${e=>e["aria-disabled"]?"not-allowed":void 0};
+
+  & 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};
+          }
+        `:""}
+`,u=o.default(n.Box)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`;exports.DatePickerButton=l;exports.DatePickerPopover=d;exports.DatePickerWrapper=c;exports.IconBox=u;

package/dist/DatePicker/components.js

@@ -0,0 +1,43 @@
+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)`
+  max-height: ${3 * 6}rem;
+  overflow: hidden;
+`, m = o.button`
+  border: none;
+  background: transparent;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
+
+  & svg path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+`, u = o.div`
+  ${({ bold: r, theme: e }) => r ? t`
+          & ${i} {
+            border: 1px solid ${e.colors.primary600};
+          }
+        ` : ""}
+`, $ = o(n)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme: r }) => r.colors.neutral600};
+  }
+`;
+export {
+  m as DatePickerButton,
+  c as DatePickerPopover,
+  u as DatePickerWrapper,
+  $ as IconBox
+};

package/dist/DatePicker/index.cjs

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

package/dist/DatePicker/index.js

@@ -0,0 +1,4 @@
+import { DatePicker as o } from "./DatePicker.js";
+export {
+  o as DatePicker
+};

package/dist/DatePicker/utils/formatDate.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/formatDate.js

@@ -0,0 +1,4 @@
+const e = (t, r) => new Intl.DateTimeFormat(r).format(t);
+export {
+  e as formatDate
+};

package/dist/DatePicker/utils/generateWeeks.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/generateWeeks.js

@@ -0,0 +1,17 @@
+import { isDateEqual as f } from "../compareDates.js";
+const D = 7 * 6, w = (e, g) => {
+  const i = new Date(e.getFullYear(), e.getMonth(), 1), l = new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate(), h = new Date(e.getFullYear(), e.getMonth(), 0).getDate(), r = i.getDay(), c = 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, h - r + t + 1),
+      outsideMonth: !0
+    } : t < c ? 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(g, o.date) && (a = n + 1, u = s[n].length, o.isSelected = !0), s[n].push(o);
+  return [s, a, u];
+};
+export {
+  w as generateWeeks
+};

package/dist/DatePicker/utils/getDayOfWeek.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/getDayOfWeek.js

@@ -0,0 +1,15 @@
+const D = () => {
+  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), w = new Date(1970, 0, 6), c = new Date(1970, 0, 7);
+  return {
+    sun: e(a),
+    mon: e(s),
+    tue: e(w),
+    wed: e(c),
+    thu: e(t),
+    fri: e(n),
+    sat: e(o)
+  };
+};
+export {
+  D as getDayOfWeek
+};

package/dist/DatePicker/utils/getMonths.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/getMonths.js

@@ -0,0 +1,7 @@
+const o = () => {
+  const t = new Intl.DateTimeFormat(void 0, { month: "long" }).format;
+  return Array(12).fill(null).map((e, n) => t(new Date(1970, n, 1)));
+};
+export {
+  o as getMonths
+};

package/dist/DatePicker/utils/getYears.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/getYears.js

@@ -0,0 +1,9 @@
+const E = (n, s) => {
+  const t = 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;
+};
+export {
+  E as getYears
+};

package/dist/DatePicker/utils/index.cjs

@@ -0,0 +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;

package/dist/DatePicker/utils/index.js

@@ -0,0 +1,12 @@
+import { getDayOfWeek as o } from "./getDayOfWeek.js";
+import { getMonths as f } from "./getMonths.js";
+import { generateWeeks as a } from "./generateWeeks.js";
+import { getYears as x } from "./getYears.js";
+import { formatDate as s } from "./formatDate.js";
+export {
+  s as formatDate,
+  a as generateWeeks,
+  o as getDayOfWeek,
+  f as getMonths,
+  x as getYears
+};

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -0,0 +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;

package/dist/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,107 @@
+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 { 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({
+    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));
+    }
+    a(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);
+  }, S = () => {
+    a(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);
+  if (!Number.isNaN(n))
+    return new Date(n);
+};
+export {
+  te as DateTimePicker
+};

package/dist/DateTimePicker/index.cjs

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

package/dist/DateTimePicker/index.js

@@ -0,0 +1,4 @@
+import { DateTimePicker as i } from "./DateTimePicker.js";
+export {
+  i as DateTimePicker
+};

package/dist/Dialog/Dialog.cjs

@@ -0,0 +1,11 @@
+"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})=>x.setOpacity(e.colors.neutral800,.2)};
+`,_=l.default(r.Box)`
+  max-width: ${412/16}rem;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-top: 10%;
+`,F=l.default(q.Flex)`
+  border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,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

@@ -0,0 +1,56 @@
+import e from "react";
+import o from "prop-types";
+import t from "styled-components";
+import { Box as a } from "../Box/Box.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 }) => y(r.colors.neutral800, 0.2)};
+`, w = t(a)`
+  max-width: ${412 / 16}rem;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-top: 10%;
+`, 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 = b(d);
+  if (E(n), !n)
+    return null;
+  const l = `${u}-label`;
+  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 = {
+  as: "h2",
+  id: void 0
+};
+i.propTypes = {
+  as: o.string,
+  id: o.oneOfType([o.string, o.number]),
+  isOpen: o.bool.isRequired,
+  onClose: o.func.isRequired,
+  title: o.string.isRequired
+};
+export {
+  i as Dialog
+};