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

package/dist/DatePicker/DatePickerTh.js

@@ -1,25 +1,42 @@
-import e from "react";
-import i from "prop-types";
-import r from "styled-components";
+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/jsx-runtime";
+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 l = r(a)`
+const s = t(a)`
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px;
-  border-radius: ${({ theme: t }) => t.borderRadius};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
   text-transform: capitalize;
-`, s = r(n)`
+`, l = t(n)`
   height: ${24 / 16}rem;
   width: ${32 / 16}rem;
-`, f = ({ children: t, ...o }) => /* @__PURE__ */ e.createElement(l, { ...o }, /* @__PURE__ */ e.createElement(s, { justifyContent: "center" }, /* @__PURE__ */ e.createElement(m, { variant: "pi", fontWeight: "bold", color: "neutral800", "aria-hidden": !0 }, t.substr(0, 2)), /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement("span", null, t))));
-f.propTypes = {
-  children: i.string.isRequired
-};
+`, 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 {
-  f as DatePickerTh
+  y as DatePickerTh
 };

package/dist/DatePicker/components.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),a=require("../Box/Box.cjs"),n=require("../Field/FieldInput.cjs"),i=require("../Popover/Popover.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(t),s=o.default(i.Popover)`
+"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`
@@ -11,10 +11,12 @@
     fill: ${({theme:e})=>e.colors.neutral500};
   }
 `,c=o.default.div`
-  ${({bold:e,theme:r})=>e?`& ${n.InputWrapper} {
-  border: 1px solid ${r.colors.primary600};
-}`:void 0}
-`,u=o.default(a.Box)`
+  ${({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;
@@ -28,4 +30,4 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`;exports.DatePickerButton=l;exports.DatePickerPopover=s;exports.DatePickerWrapper=c;exports.IconBox=u;
+`;exports.DatePickerButton=l;exports.DatePickerPopover=d;exports.DatePickerWrapper=c;exports.IconBox=u;

package/dist/DatePicker/components.js

@@ -1,11 +1,11 @@
-import o from "styled-components";
-import { Box as t } from "../Box/Box.js";
+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 l = o(a)`
+const c = o(a)`
   max-height: ${3 * 6}rem;
   overflow: hidden;
-`, c = o.button`
+`, m = o.button`
   border: none;
   background: transparent;
   border-radius: ${({ theme: r }) => r.borderRadius};
@@ -14,11 +14,13 @@ const l = o(a)`
   & svg path {
     fill: ${({ theme: r }) => r.colors.neutral500};
   }
-`, m = o.div`
-  ${({ bold: r, theme: e }) => r ? `& ${i} {
-  border: 1px solid ${e.colors.primary600};
-}` : void 0}
-`, u = o(t)`
+`, u = o.div`
+  ${({ bold: r, theme: e }) => r ? t`
+          & ${i} {
+            border: 1px solid ${e.colors.primary600};
+          }
+        ` : ""}
+`, $ = o(n)`
   background: transparent;
   border: none;
   position: relative;
@@ -34,8 +36,8 @@ const l = o(a)`
   }
 `;
 export {
-  c as DatePickerButton,
-  l as DatePickerPopover,
-  m as DatePickerWrapper,
-  u as IconBox
+  m as DatePickerButton,
+  c as DatePickerPopover,
+  u as DatePickerWrapper,
+  $ as IconBox
 };

package/dist/DatePicker/utils/getDayOfWeek.js

@@ -1,13 +1,13 @@
 const D = () => {
-  const t = new Intl.DateTimeFormat(void 0, { weekday: "long" }).format, e = 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);
+  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: t(a),
-    mon: t(s),
-    tue: t(w),
-    wed: t(c),
-    thu: t(e),
-    fri: t(n),
-    sat: t(o)
+    sun: e(a),
+    mon: e(s),
+    tue: e(w),
+    wed: e(c),
+    thu: e(t),
+    fri: e(n),
+    sat: e(o)
   };
 };
 export {

package/dist/DatePicker/utils/getMonths.cjs

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

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

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()??parseInt(t,10)-l,o=a?.getFullYear()??parseInt(t,10)+u,r=[];for(let e=n;e<=o;e++)r.push(e);return r};exports.getYears=c;
+"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

@@ -1,5 +1,5 @@
 const E = (n, s) => {
-  const t = new Date().getFullYear(), a = n?.getFullYear() ?? parseInt(t, 10) - 200, A = s?.getFullYear() ?? parseInt(t, 10) + 15, r = [];
+  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;

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),$=require("./DateTimePickerProps.cjs"),y=require("./parseDate.cjs"),_=require("../DatePicker/DatePicker.cjs"),L=require("../Field/Field.cjs"),V=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const v=require("../Field/FieldHint.cjs"),C=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const S=require("../Flex/Flex.cjs"),R=require("../hooks/useId.cjs"),A=require("../TimePicker/TimePicker.cjs"),O=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},s=O(f),P=({ariaLabel:i,clearLabel:T,disabled:k,error:p,hint:m,label:o,labelAction:H,onChange:a,onClear:D,name:j,required:F,selectButtonTitle:M,size:q,step:x,value:l,...E})=>{const d=y.parseDate(l),[r,n]=f.useState(d),[u,c]=f.useState(d?`${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`:null),I=e=>{n(e);let t;u?(t=new Date(e),t.setHours(u.split(":")[0]),t.setMinutes(u.split(":")[1])):(t=new Date(e),c(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)),a&&a(t)},b=e=>{c(e);const t=r?new Date(r):new Date;t.setHours(e.split(":")[0]),t.setMinutes(e.split(":")[1]),r||n(t),a&&a(t)},h=()=>{n(void 0),c(void 0),D()},w=()=>{c(void 0);let e;r&&(e=new Date(r),e.setHours("00"),e.setMinutes("00")),a&&a(e)};f.useEffect(()=>{if(l&&+l!=+r){const e=y.parseDate(l);n(e),c(e?`${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`:null)}else l||(n(void 0),c(void 0))},[l,r]);const g=R.useId(E?.id);return s.default.createElement(L.Field,{name:j,role:"group",id:g,"aria-labelledby":g,hint:m,error:p,required:F},s.default.createElement(S.Flex,{direction:"column",alignItems:"stretch",gap:1},o&&s.default.createElement(V.FieldLabel,{action:H},o),s.default.createElement(S.Flex,{gap:2},s.default.createElement(_.DatePicker,{"data-testid":"datetimepicker-date",id:g,name:j,ariaLabel:o||i,error:typeof p=="string",hint:typeof m=="string",selectedDate:r,selectedDateLabel:e=>`Date picker, current is ${e}`,onChange:I,required:F,size:q,onClear:D&&h,clearLabel:T,disabled:k,...E}),s.default.createElement(A.TimePicker,{"data-testid":"datetimepicker-time",size:q,"aria-label":o||i,error:typeof p=="string",hint:typeof m=="string",value:u,onChange:b,onClear:D&&w,clearLabel:T,required:F,selectButtonTitle:M,disabled:k,step:x})),s.default.createElement(v.FieldHint,null),s.default.createElement(C.FieldError,null)))};P.defaultProps=$.dateTimePickerDefaultProps;P.propTypes=$.dateTimePickerPropTypes;exports.DateTimePicker=P;
+"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

@@ -1,114 +1,107 @@
-import r, { useState as y, useEffect as v } from "react";
-import { dateTimePickerDefaultProps as C, dateTimePickerPropTypes as L } from "./DateTimePickerProps.js";
-import { parseDate as H } from "./parseDate.js";
-import { DatePicker as R } from "../DatePicker/DatePicker.js";
-import { Field as b } from "../Field/Field.js";
+import { 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 A } from "../Field/FieldHint.js";
-import { FieldError as B } from "../Field/FieldError.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 S } from "../Flex/Flex.js";
-import { useId as G } from "../hooks/useId.js";
-import { TimePicker as J } from "../TimePicker/TimePicker.js";
-const M = ({
-  ariaLabel: D,
-  clearLabel: T,
-  disabled: E,
+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: p,
-  label: l,
-  labelAction: w,
-  onChange: o,
-  onClear: f,
+  hint: m,
+  id: b,
+  label: c,
+  labelAction: I,
+  onChange: T,
+  onClear: g,
   name: $,
-  required: u,
-  selectButtonTitle: F,
-  size: k,
-  step: h,
-  value: a,
-  ...P
+  required: p = !1,
+  selectButtonTitle: w = "select",
+  size: h = "M",
+  step: y = 1,
+  value: F,
+  ...H
 }) => {
-  const n = H(a), [i, m] = y(n), [c, s] = y(
-    n ? `${n.getHours()}:${n.getMinutes()}:${n.getSeconds()}` : null
-  ), V = (e) => {
-    m(e);
-    let t;
-    c ? (t = new Date(e), t.setHours(c.split(":")[0]), t.setMinutes(c.split(":")[1])) : (t = new Date(e), s(`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`)), o && o(t);
-  }, I = (e) => {
-    s(e);
-    const t = i ? new Date(i) : new Date();
-    t.setHours(e.split(":")[0]), t.setMinutes(e.split(":")[1]), i || m(t), o && o(t);
-  }, x = () => {
-    m(void 0), s(void 0), f();
-  }, _ = () => {
-    s(void 0);
-    let e;
-    i && (e = new Date(i), e.setHours("00"), e.setMinutes("00")), o && o(e);
-  };
-  v(() => {
-    if (a && +a != +i) {
-      const e = H(a);
-      m(e), s(
-        e ? `${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}` : null
-      );
-    } else
-      a || (m(void 0), s(void 0));
-  }, [a, i]);
-  const g = G(P?.id);
-  return /* @__PURE__ */ r.createElement(
-    b,
-    {
-      name: $,
-      role: "group",
-      id: g,
-      "aria-labelledby": g,
-      hint: p,
-      error: d,
-      required: u
-    },
-    /* @__PURE__ */ r.createElement(S, { direction: "column", alignItems: "stretch", gap: 1 }, l && /* @__PURE__ */ r.createElement(j, { action: w }, l), /* @__PURE__ */ r.createElement(S, { gap: 2 }, /* @__PURE__ */ r.createElement(
-      R,
-      {
-        "data-testid": "datetimepicker-date",
-        id: g,
-        name: $,
-        ariaLabel: l || D,
-        error: typeof d == "string",
-        hint: typeof p == "string",
-        selectedDate: i,
-        selectedDateLabel: (e) => `Date picker, current is ${e}`,
-        onChange: V,
-        required: u,
-        size: k,
-        onClear: f && x,
-        clearLabel: T,
-        disabled: E,
-        ...P
-      }
-    ), /* @__PURE__ */ r.createElement(
-      J,
-      {
-        "data-testid": "datetimepicker-time",
-        size: k,
-        "aria-label": l || D,
-        error: typeof d == "string",
-        hint: typeof p == "string",
-        value: c,
-        onChange: I,
-        onClear: f && _,
-        clearLabel: T,
-        required: u,
-        selectButtonTitle: F,
-        disabled: E,
-        step: h
-      }
-    )), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(B, null))
-  );
+  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);
 };
-M.defaultProps = C;
-M.propTypes = L;
 export {
-  M as DateTimePicker
+  te as 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);return Number.isNaN(e)?null:new Date(e)};exports.parseDate=r;
+"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;

package/dist/DateTimePicker/parseDate.js

@@ -1,6 +1,7 @@
 const r = (t) => {
   const e = Date.parse(t);
-  return Number.isNaN(e) ? null : new Date(e);
+  if (!Number.isNaN(e))
+    return new Date(e);
 };
 export {
   r as parseDate

package/dist/Field/FieldHint.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("./FieldContext.cjs"),o=require("../Typography/Typography.cjs"),s=()=>{const{id:t,hint:e,error:r}=n.useField();return!e||typeof e!="string"||r?null:i.jsx(o.Typography,{variant:"pi",as:"p",id:`${t}-hint`,textColor:"neutral600",children:e})};exports.FieldHint=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("./FieldContext.cjs"),o=require("../Typography/Typography.cjs"),s=()=>{const{id:t,hint:e,error:r}=n.useField();return!e||r?null:i.jsx(o.Typography,{variant:"pi",as:"p",id:`${t}-hint`,textColor:"neutral600",children:e})};exports.FieldHint=s;

package/dist/Field/FieldHint.js

@@ -1,13 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useField as n } from "./FieldContext.js";
 import { Typography as e } from "../Typography/Typography.js";
-const s = () => {
+const a = () => {
   const {
     id: t,
     hint: r,
     error: i
   } = n();
-  return !r || typeof r != "string" || i ? null : o(e, {
+  return !r || i ? null : o(e, {
     variant: "pi",
     as: "p",
     id: `${t}-hint`,
@@ -16,5 +16,5 @@ const s = () => {
   });
 };
 export {
-  s as FieldHint
+  a as FieldHint
 };

package/dist/Field/FieldLabel.cjs

@@ -1,6 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("react"),h=require("styled-components"),g=require("./FieldContext.cjs"),o=require("../Flex/Flex.cjs"),y=require("../helpers/deprecations.cjs"),i=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=f(h),x=y.once(console.warn),F=p.forwardRef(({children:e,action:t,required:n,...s},a)=>{const{id:c,required:d}=g.useField(),u=d||n;return n!==void 0&&x('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),r.jsx(i.Typography,{ref:a,variant:"pi",textColor:"neutral800",htmlFor:c,fontWeight:"bold",as:"label",...s,children:r.jsxs(o.Flex,{alignItems:"center",children:[e,u&&r.jsx(j,{textColor:"danger600",children:"*"}),t&&r.jsx(q,{marginLeft:1,children:t})]})})}),j=l.default(i.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("react"),p=require("styled-components"),h=require("./FieldContext.cjs"),y=require("../Flex/Flex.cjs"),g=require("../helpers/deprecations.cjs"),i=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=f(p),x=g.once(console.warn),F=u.forwardRef(({children:e,action:o,required:n,...l},s)=>{const{id:a,required:c}=h.useField(),d=c||n;return n!==void 0&&x('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'),t.jsxs(j,{ref:s,variant:"pi",textColor:"neutral800",htmlFor:a,fontWeight:"bold",as:"label",...l,children:[e,d&&t.jsx(q,{textColor:"danger600",children:"*"}),o&&t.jsx(m,{marginLeft:1,children:o})]})}),j=r.default(i.Typography)`
+  display: flex;
+  align-items: center;
+`,q=r.default(i.Typography)`
   line-height: 0;
-`,q=l.default(o.Flex)`
+`,m=r.default(y.Flex)`
   line-height: 0;
 
   svg path {

package/dist/Field/FieldLabel.js

@@ -1,42 +1,42 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import t from "styled-components";
-import { useField as f } from "./FieldContext.js";
-import { Flex as n } from "../Flex/Flex.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import r from "styled-components";
+import { useField as h } from "./FieldContext.js";
+import { Flex as f } from "../Flex/Flex.js";
 import { once as g } from "../helpers/deprecations.js";
-import { Typography as l } from "../Typography/Typography.js";
-const u = g(console.warn), T = h(({
+import { Typography as n } from "../Typography/Typography.js";
+const u = g(console.warn), A = c(({
   children: e,
   action: o,
   required: i,
-  ...s
-}, d) => {
+  ...l
+}, s) => {
   const {
     id: a,
-    required: m
-  } = f(), p = m || i;
-  return i !== void 0 && u('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'), r(l, {
-    ref: d,
+    required: d
+  } = h(), p = d || i;
+  return i !== void 0 && u('Deprecation warning: Usage of "required" prop in FieldLabel component is deprecated. This is discouraged and will be removed in the next major release. Please use the Field component to share the required prop.'), m(x, {
+    ref: s,
     variant: "pi",
     textColor: "neutral800",
     htmlFor: a,
     fontWeight: "bold",
     as: "label",
-    ...s,
-    children: c(n, {
-      alignItems: "center",
-      children: [e, p && r(x, {
-        textColor: "danger600",
-        children: "*"
-      }), o && r(F, {
-        marginLeft: 1,
-        children: o
-      })]
-    })
+    ...l,
+    children: [e, p && t(y, {
+      textColor: "danger600",
+      children: "*"
+    }), o && t(F, {
+      marginLeft: 1,
+      children: o
+    })]
   });
-}), x = t(l)`
+}), x = r(n)`
+  display: flex;
+  align-items: center;
+`, y = r(n)`
   line-height: 0;
-`, F = t(n)`
+`, F = r(f)`
   line-height: 0;
 
   svg path {
@@ -46,5 +46,5 @@ const u = g(console.warn), T = h(({
   }
 `;
 export {
-  T as FieldLabel
+  A as FieldLabel
 };

package/dist/IconButton/IconButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),$=require("react"),h=require("styled-components"),j=require("../BaseButton/BaseButton.cjs"),v=require("../Flex/Flex.cjs"),y=require("../Tooltip/Tooltip.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),m=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function x(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=x($),i=m(h),_=u.forwardRef(({label:e,noBorder:r=!1,children:t,icon:o,disabled:l=!1,onClick:a,"aria-label":d,...f},p)=>{const b=g=>{!l&&a&&a(g)},s=n.jsxs(c,{"aria-disabled":l,background:l?"neutral150":void 0,borderWidth:r?0:void 0,justifyContent:"center",height:`${2}rem`,width:`${2}rem`,...f,ref:p,onClick:b,children:[n.jsx(B.VisuallyHidden,{as:"span",children:e??d}),u.cloneElement(o||t,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(y.Tooltip,{label:e,children:s}):s}),c=i.default(j.BaseButton)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),j=require("react"),v=require("styled-components"),y=require("../BaseButton/BaseButton.cjs"),B=require("../Flex/Flex.cjs"),m=require("../Tooltip/Tooltip.cjs"),x=require("../VisuallyHidden/VisuallyHidden.cjs"),_=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function R(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=R(j),c=_(v),q=u.forwardRef(({label:e,background:r,borderWidth:t,noBorder:o=!1,children:d,icon:f,disabled:l=!1,onClick:a,"aria-label":p,...b},g)=>{const $=h=>{!l&&a&&a(h)},s=n.jsxs(i,{"aria-disabled":l,background:l?"neutral150":r,borderWidth:o?0:t,justifyContent:"center",height:`${2}rem`,width:`${2}rem`,...b,ref:g,onClick:$,children:[n.jsx(x.VisuallyHidden,{as:"span",children:e??p}),u.cloneElement(f||d,{"aria-hidden":!0,focusable:!1})]});return e?n.jsx(m.Tooltip,{label:e,children:s}):s}),i=c.default(y.BaseButton)`
   svg {
     > g,
     path {
@@ -31,7 +31,7 @@
       }
     }
   }
-`,R=i.default(v.Flex)`
+`,O=c.default(B.Flex)`
   & span:first-child button {
     border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
     border-radius: ${({theme:e})=>`${e.borderRadius} 0 0 ${e.borderRadius}`};
@@ -41,7 +41,7 @@
     border-radius: ${({theme:e})=>`0 ${e.borderRadius} ${e.borderRadius} 0`};
   }
 
-  & ${c} {
+  & ${i} {
     border-radius: 0;
     border-left: none;
 
@@ -78,4 +78,4 @@
       }
     }
   }
-`;exports.IconButton=_;exports.IconButtonGroup=R;
+`;exports.IconButton=q;exports.IconButtonGroup=O;