@strapi/design-system 0.0.0-3cf3ff39

package/dist/Tag/Tag.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("styled-components"),u=require("../Flex/Flex.cjs"),c=require("../Typography/Typography.cjs"),p=r=>r&&r.__esModule?r:{default:r},i=p(d),g=({children:r,icon:e,disabled:t=!1,onClick:a,...l})=>{const n=s=>{t||!a||a(s)};return o.jsxs(h,{as:"button",background:t?"neutral200":"primary100",color:t?"neutral700":"primary600",paddingLeft:3,paddingRight:3,onClick:n,"aria-disabled":t,disabled:t,borderWidth:"1px",borderStyle:"solid",borderColor:t?"neutral300":"primary200",hasRadius:!0,height:`${32/16}rem`,gap:2,...l,children:[o.jsx(y,{$disabled:t,variant:"pi",fontWeight:"bold",as:"span",children:r}),e]})},h=i.default(u.Flex)`
+  & > svg {
+    height: ${8/16}rem;
+    width: ${8/16}rem;
+  }
+
+  & > svg path {
+    fill: ${({theme:r,...e})=>e["aria-disabled"]?r.colors.neutral600:r.colors.primary600};
+  }
+`,y=i.default(c.Typography)`
+  color: inherit;
+  border-right: 1px solid ${({theme:r,$disabled:e})=>e?r.colors.neutral300:r.colors.primary200};
+  padding-right: ${({theme:r})=>r.spaces[2]};
+`;exports.Tag=g;

package/dist/Tag/Tag.js

@@ -0,0 +1,23 @@
+import { jsxs as n, jsx as p } from "react/jsx-runtime";
+import t from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as d } from "../Typography/Typography.js";
+const x = ({ children: r, icon: a, disabled: o = !1, onClick: i, ...e }) => n(g, { as: "button", background: o ? "neutral200" : "primary100", color: o ? "neutral700" : "primary600", paddingLeft: 3, paddingRight: 3, onClick: (l) => {
+  o || !i || i(l);
+}, "aria-disabled": o, disabled: o, borderWidth: "1px", borderStyle: "solid", borderColor: o ? "neutral300" : "primary200", hasRadius: !0, height: `${32 / 16}rem`, gap: 2, ...e, children: [p(c, { $disabled: o, variant: "pi", fontWeight: "bold", as: "span", children: r }), a] }), g = t(s)`
+  & > svg {
+    height: ${8 / 16}rem;
+    width: ${8 / 16}rem;
+  }
+
+  & > svg path {
+    fill: ${({ theme: r, ...a }) => a["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
+  }
+`, c = t(d)`
+  color: inherit;
+  border-right: 1px solid ${({ theme: r, $disabled: a }) => a ? r.colors.neutral300 : r.colors.primary200};
+  padding-right: ${({ theme: r }) => r.spaces[2]};
+`;
+export {
+  x as Tag
+};

package/dist/Tag/index.cjs

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

package/dist/Tag/index.js

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

package/dist/TextButton/TextButton.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),l=require("styled-components"),b=require("../themes/utils.cjs"),m=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),h=e=>e&&e.__esModule?e:{default:e};function j(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const _=j(y),u=h(l),T=l.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`,q=u.default.div`
+  animation: ${T} 2s infinite linear;
+  will-change: transform;
+`,v=u.default(m.Flex)`
+  border: none;
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    svg path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.primary600};
+  }
+
+  ${b.buttonFocusStyle}
+`,c=_.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:n,disabled:a=!1,loading:s=!1,...d},f)=>{const p=n&&!a?n:void 0,i=a||s;return o.jsxs(v,{ref:f,"aria-disabled":i,onClick:p,as:"button",type:"button",background:"transparent",gap:2,...d,children:[s?o.jsx(q,{"aria-hidden":!0,children:o.jsx(g.Loader,{})}):r,o.jsx(x.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t]})});c.displayName="TextButton";exports.TextButton=c;

package/dist/TextButton/TextButton.js

@@ -0,0 +1,40 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import { Loader as u } from "@strapi/icons";
+import i, { keyframes as h } from "styled-components";
+import { buttonFocusStyle as y } from "../themes/utils.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { Typography as x } from "../Typography/Typography.js";
+const b = h`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`, v = i.div`
+  animation: ${b} 2s infinite linear;
+  will-change: transform;
+`, T = i(g)`
+  border: none;
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    svg path {
+      fill: ${({ theme: r }) => r.colors.neutral600};
+    }
+  }
+
+  svg path {
+    fill: ${({ theme: r }) => r.colors.primary600};
+  }
+
+  ${y}
+`, $ = c.forwardRef(({ children: r, startIcon: s, endIcon: l, onClick: o, disabled: e = !1, loading: a = !1, ...p }, m) => {
+  const f = o && !e ? o : void 0, n = e || a;
+  return d(T, { ref: m, "aria-disabled": n, onClick: f, as: "button", type: "button", background: "transparent", gap: 2, ...p, children: [a ? t(v, { "aria-hidden": !0, children: t(u, {}) }) : s, t(x, { variant: "pi", textColor: n ? "neutral600" : "primary600", children: r }), l] });
+});
+$.displayName = "TextButton";
+export {
+  $ as TextButton
+};

package/dist/TextButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./TextButton.cjs");exports.TextButton=t.TextButton;

package/dist/TextButton/index.js

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

package/dist/TextInput/TextInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("../hooks/useId.cjs"),I=require("../Field/Field.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Field/FieldLabel.cjs"),h=require("../Field/FieldInput.cjs"),m=require("../Field/FieldHint.cjs"),f=require("../Field/FieldError.cjs"),s=t.forwardRef(({name:l,hint:d,error:o,label:r,labelAction:u,id:c,required:a,...i},p)=>{const x=F.useId(c),n=t.useRef(null);if(!r&&!i["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return t.useImperativeHandle(p,()=>({inputWrapperRef:n})),e.jsx("div",{ref:n,children:e.jsx(I.Field,{name:l,hint:d,error:o,id:x,required:a,children:e.jsxs(q.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(j.FieldLabel,{action:u,children:r}),e.jsx(h.FieldInput,{...i}),e.jsx(m.FieldHint,{}),e.jsx(f.FieldError,{})]})})})});s.displayName="TextInput";exports.TextInput=s;

package/dist/TextInput/TextInput.js

@@ -0,0 +1,21 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as c, useRef as u, useImperativeHandle as h } from "react";
+import { useId as I } from "../hooks/useId.js";
+import { Field as x } from "../Field/Field.js";
+import { Flex as F } from "../Flex/Flex.js";
+import { FieldLabel as T } from "../Field/FieldLabel.js";
+import { FieldInput as g } from "../Field/FieldInput.js";
+import { FieldHint as w } from "../Field/FieldHint.js";
+import { FieldError as R } from "../Field/FieldError.js";
+const b = c(({ name: t, hint: n, error: m, label: e, labelAction: p, id: d, required: a, ...i }, l) => {
+  const f = I(d), o = u(null);
+  if (!e && !i["aria-label"])
+    throw new Error('The TextInput component needs a "label" or an "aria-label" props');
+  return h(l, () => ({
+    inputWrapperRef: o
+  })), r("div", { ref: o, children: r(x, { name: t, hint: n, error: m, id: f, required: a, children: s(F, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(T, { action: p, children: e }), r(g, { ...i }), r(w, {}), r(R, {})] }) }) });
+});
+b.displayName = "TextInput";
+export {
+  b as TextInput
+};

package/dist/TextInput/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./TextInput.cjs");exports.TextInput=t.TextInput;

package/dist/TextInput/index.js

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

package/dist/Textarea/Textarea.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),g=require("styled-components"),j=require("../hooks/useId.cjs"),b=require("../themes/utils.cjs"),d=require("../Box/Box.cjs"),m=require("../Field/FieldContext.cjs"),y=require("../Field/Field.cjs"),R=require("../Flex/Flex.cjs"),_=require("../Field/FieldLabel.cjs"),$=require("../Field/FieldHint.cjs"),E=require("../Field/FieldError.cjs"),c=e=>e&&e.__esModule?e:{default:e},f=c(p),x=c(g),I=x.default(d.Box)`
+  ${b.inputFocusStyle()}
+`,S=x.default(d.Box)`
+  border: none;
+  resize: none;
+
+  ::placeholder {
+    color: ${({theme:e})=>e.colors.neutral500};
+    font-size: ${({theme:e})=>e.fontSizes[2]};
+    color: ${({theme:e})=>e.colors.neutral500};
+    opacity: 1;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+`,T=f.default.forwardRef(({disabled:e,...a},s)=>{const{id:t,error:i,hint:l,required:u}=m.useField(),n=!!i;let o=l?`${t}-hint`:void 0;return i&&(o=`${t}-error`),r.jsx(I,{borderColor:n?"danger600":"neutral200",hasError:n,hasRadius:!0,children:r.jsx(S,{"aria-describedby":o,"aria-invalid":n,"aria-required":u,as:"textarea",background:e?"neutral150":"neutral0",color:e?"neutral600":"neutral800",disabled:e,fontSize:2,hasRadius:!0,height:`${105/16}rem`,id:t,ref:s,lineHeight:4,padding:4,width:"100%",...a})})}),w=f.default.forwardRef(({name:e,hint:a,error:s,label:t,labelAction:i,id:l,required:u=!1,children:n,value:o,...h},q)=>{const F=j.useId(l);return r.jsx(y.Field,{name:e,hint:a,error:s,id:F,required:u,children:r.jsxs(R.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t&&r.jsx(_.FieldLabel,{action:i,children:t}),r.jsx(T,{ref:q,value:n??o,...h}),r.jsx($.FieldHint,{}),r.jsx(E.FieldError,{})]})})});exports.Textarea=w;

package/dist/Textarea/Textarea.js

@@ -0,0 +1,39 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import m from "react";
+import c from "styled-components";
+import { useId as g } from "../hooks/useId.js";
+import { inputFocusStyle as F } from "../themes/utils.js";
+import { Box as u } from "../Box/Box.js";
+import { useField as $ } from "../Field/FieldContext.js";
+import { Field as R } from "../Field/Field.js";
+import { Flex as b } from "../Flex/Flex.js";
+import { FieldLabel as w } from "../Field/FieldLabel.js";
+import { FieldHint as y } from "../Field/FieldHint.js";
+import { FieldError as z } from "../Field/FieldError.js";
+const E = c(u)`
+  ${F()}
+`, I = c(u)`
+  border: none;
+  resize: none;
+
+  ::placeholder {
+    color: ${({ theme: r }) => r.colors.neutral500};
+    font-size: ${({ theme: r }) => r.fontSizes[2]};
+    color: ${({ theme: r }) => r.colors.neutral500};
+    opacity: 1;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+`, q = m.forwardRef(({ disabled: r, ...a }, d) => {
+  const { id: o, error: i, hint: l, required: s } = $(), t = !!i;
+  let n = l ? `${o}-hint` : void 0;
+  return i && (n = `${o}-error`), e(E, { borderColor: t ? "danger600" : "neutral200", hasError: t, hasRadius: !0, children: e(I, { "aria-describedby": n, "aria-invalid": t, "aria-required": s, as: "textarea", background: r ? "neutral150" : "neutral0", color: r ? "neutral600" : "neutral800", disabled: r, fontSize: 2, hasRadius: !0, height: `${105 / 16}rem`, id: o, ref: d, lineHeight: 4, padding: 4, width: "100%", ...a }) });
+}), A = m.forwardRef(({ name: r, hint: a, error: d, label: o, labelAction: i, id: l, required: s = !1, children: t, value: n, ...f }, p) => {
+  const h = g(l);
+  return e(R, { name: r, hint: a, error: d, id: h, required: s, children: x(b, { direction: "column", alignItems: "stretch", gap: 1, children: [o && e(w, { action: i, children: o }), e(q, { ref: p, value: t ?? n, ...f }), e(y, {}), e(z, {})] }) });
+});
+export {
+  A as Textarea
+};

package/dist/Textarea/index.cjs

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

package/dist/Textarea/index.js

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

package/dist/ThemeProvider/ThemeProvider.cjs

@@ -0,0 +1,173 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=require("../themes/lightTheme/index.cjs"),s=t.createGlobalStyle`
+ /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  /* My styles */
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  *:focus-visible {
+    outline: 2px solid ${({theme:e})=>e.colors.primary600};
+    outline-offset: 2px;
+  }
+
+  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  body,html{
+    height: 100%;
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: 100%;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  textarea,input {
+    font: inherit;
+  }
+
+  .lock-body-scroll {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+`,l=({children:e,theme:i=n.lightTheme})=>o.jsxs(t.ThemeProvider,{theme:i,children:[e,o.jsx(r.LiveRegions,{}),o.jsx(s,{})]});exports.ThemeProvider=l;

package/dist/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,180 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { createGlobalStyle as i, ThemeProvider as n } from "styled-components";
+import { LiveRegions as l } from "../LiveRegions/LiveRegions.js";
+import { lightTheme as s } from "../themes/lightTheme/index.js";
+const a = i`
+ /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: "";
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  /* My styles */
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  *:focus-visible {
+    outline: 2px solid ${({ theme: e }) => e.colors.primary600};
+    outline-offset: 2px;
+  }
+
+  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  body,html{
+    height: 100%;
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: 100%;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  textarea,input {
+    font: inherit;
+  }
+
+  .lock-body-scroll {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+`, h = ({ children: e, theme: t = s }) => r(n, { theme: t, children: [e, o(l, {}), o(a, {})] });
+export {
+  h as ThemeProvider
+};

package/dist/ThemeProvider/hooks.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=()=>e.useTheme();exports.useTheme=t;

package/dist/ThemeProvider/hooks.js

@@ -0,0 +1,5 @@
+import { useTheme as e } from "styled-components";
+const r = () => e();
+export {
+  r as useTheme
+};

package/dist/ThemeProvider/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeProvider.cjs"),r=require("./hooks.cjs");exports.ThemeProvider=e.ThemeProvider;exports.useTheme=r.useTheme;

package/dist/ThemeProvider/index.js

@@ -0,0 +1,6 @@
+import { ThemeProvider as o } from "./ThemeProvider.js";
+import { useTheme as f } from "./hooks.js";
+export {
+  o as ThemeProvider,
+  f as useTheme
+};

package/dist/TimePicker/TimePicker.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),V=require("react"),M=require("@strapi/icons"),O=require("styled-components"),C=require("../Combobox/Combobox.cjs"),N=require("../DesignSystemProvider.cjs"),v=require("../hooks/useControllableState.cjs"),A=require("../hooks/useDateFormatter.cjs"),T=require("../hooks/useId.cjs"),B=require("../Field/Field.cjs"),L=require("../Flex/Flex.cjs"),$=require("../Field/FieldLabel.cjs"),E=require("../Field/FieldHint.cjs"),R=require("../Field/FieldError.cjs"),z=t=>t&&t.__esModule?t:{default:t};function H(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(n,s,u.get?u:{enumerable:!0,get:()=>t[s]})}}return n.default=t,Object.freeze(n)}const m=H(V),Z=z(O),x=t=>!!t.match(/^[^a-zA-Z]*$/),F=({id:t,step:n=15,ariaLabel:s,selectButtonTitle:u,value:a,defaultValue:f,onChange:p,...d})=>{const _=N.useDesignSystem("TimePicker"),k=T.useId(t),[I,l]=m.useState(""),[g,b]=v.useControllableState({prop:a,defaultProp:f,onChange:p}),c=A.useDateFormatter(_.locale,{hour:"2-digit",minute:"2-digit"}),h=m.useMemo(()=>{const e=c.formatToParts(new Date),{value:r}=e.find(i=>i.type==="literal");return r},[c]),S=m.useMemo(()=>{const e=60/n;return[...Array(24).keys()].flatMap(r=>[...Array(e).keys()].map(i=>c.format(new Date(0,0,0,r,i*n))))},[n,c]),w=e=>{(!e||x(e))&&l(e)},y=e=>{const[r,i]=e.split(h);if(!r&&!i)return;const j=Number(r??"0"),q=Number(i??"0");if(!(j>23||q>59))return c.format(new Date(0,0,0,j,q))},D=e=>{const r=y(e.target.value);r?(l(r),b(r)):l(g)},P=e=>{if(typeof e<"u"){const r=y(e);b(r)}else b(e)};return m.useEffect(()=>{const e=typeof a>"u"?"":a;x(e)&&l(e)},[a,l]),o.jsx(C.ComboboxInput,{...d,value:g,onChange:P,isPrintableCharacter:x,allowCustomValue:!0,placeholder:`--${h}--`,autocomplete:"none",startIcon:o.jsx(G,{}),id:k,inputMode:"numeric",pattern:`\\d{2}${h}\\d{2}`,textValue:I,onTextValueChange:w,onBlur:D,children:S.map(e=>o.jsx(C.Option,{value:e,children:e},e))})},G=Z.default(M.Clock)`
+  height: 1rem;
+  width: 1rem;
+
+  & > path {
+    fill: ${({theme:t})=>t.colors.neutral500};
+  }
+`,J=({label:t,error:n,hint:s,id:u,required:a,labelAction:f,...p})=>{const d=T.useId(u);return o.jsx(B.Field,{hint:s,error:n,id:d,required:a,children:o.jsxs(L.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($.FieldLabel,{action:f,children:t}),o.jsx(F,{id:d,error:n,required:a,...p}),o.jsx(E.FieldHint,{}),o.jsx(R.FieldError,{})]})})};exports.TimePicker=J;exports.TimePickerInput=F;