@strapi/design-system 1.6.1 → 1.6.3

package/dist/SubNav/SubNavSection.cjs

@@ -5,4 +5,4 @@
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:u,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(k.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:1,paddingBottom:1,paddingRight:4},t.default.createElement(c.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(y.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:u}),l&&t.default.createElement(h.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,children:void 0,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,s=({collapsable:e,label:u,badgeLabel:o,children:p,id:f})=>{const[d,g]=n.useState(!0),i=B.useId(f),S=()=>{g(l=>!l)};return t.default.createElement(k.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:1,paddingBottom:1,paddingRight:4},t.default.createElement(c.Box,{position:"relative",paddingRight:o?6:0},t.default.createElement(y.SubNavSectionLabel,{onClick:S,ariaExpanded:d,ariaControls:i,collapsable:e,label:u}),o&&t.default.createElement(h.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},o))),(!e||d)&&t.default.createElement("ol",{id:i},n.Children.map(p,(l,b)=>t.default.createElement("li",{key:b},l))))};s.defaultProps={badgeLabel:null,children:void 0,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;

package/dist/SubNav/SubNavSection.js

@@ -1,20 +1,20 @@
-import e, { useState as f, Children as b } from "react";
+import e, { useState as f, Children as h } from "react";
 import t from "prop-types";
-import h from "styled-components";
+import b from "styled-components";
 import { Box as l } from "../Box/Box.js";
-import { Badge as v } from "../Badge/Badge.js";
-import { SubNavSectionLabel as E } from "./SubNavSectionLabel.js";
-import { useId as S } from "../helpers/useId.js";
+import { Badge as E } from "../Badge/Badge.js";
+import { SubNavSectionLabel as S } from "./SubNavSectionLabel.js";
+import { useId as v } from "../helpers/useId.js";
 import { Stack as k } from "../Stack/Stack.js";
-const C = h(l)`
+const C = b(l)`
   svg {
     height: ${4 / 16}rem;
     path {
       fill: ${({ theme: r }) => r.colors.neutral500};
     }
   }
-`, p = ({ collapsable: r, label: s, badgeLabel: o, children: d, id: m }) => {
-  const [n, c] = f(!0), a = S("subnav-list", m), u = () => {
+`, p = ({ collapsable: r, label: d, badgeLabel: o, children: s, id: m }) => {
+  const [n, c] = f(!0), a = v(m), u = () => {
     c((i) => !i);
   };
   return /* @__PURE__ */ e.createElement(k, {
@@ -27,13 +27,13 @@ const C = h(l)`
   }, /* @__PURE__ */ e.createElement(l, {
     position: "relative",
     paddingRight: o ? 6 : 0
-  }, /* @__PURE__ */ e.createElement(E, {
+  }, /* @__PURE__ */ e.createElement(S, {
     onClick: u,
     ariaExpanded: n,
     ariaControls: a,
     collapsable: r,
-    label: s
-  }), o && /* @__PURE__ */ e.createElement(v, {
+    label: d
+  }), o && /* @__PURE__ */ e.createElement(E, {
     backgroundColor: "neutral150",
     textColor: "neutral600",
     position: "absolute",
@@ -42,7 +42,7 @@ const C = h(l)`
     transform: "translateY(-50%)"
   }, o))), (!r || n) && /* @__PURE__ */ e.createElement("ol", {
     id: a
-  }, b.map(d, (i, g) => /* @__PURE__ */ e.createElement("li", {
+  }, h.map(s, (i, g) => /* @__PURE__ */ e.createElement("li", {
     key: g
   }, i))));
 };

package/dist/Table/Table.cjs

@@ -5,8 +5,6 @@
   width: 100%;
   white-space: nowrap;
 `,m=l.default(d.Box)`
-  position: relative;
-
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -33,4 +31,4 @@
   }
 `,S=l.default(d.Box)`
   overflow-x: auto;
-`,i=({colCount:e,rowCount:u,footer:f,...h})=>{const s=r.useRef(null),[b,o]=r.useState(),p=t=>{const g=t.target.scrollWidth-t.target.clientWidth;if(t.target.scrollLeft===0){o("right");return}if(t.target.scrollLeft===g){o("left");return}t.target.scrollLeft>0&&o("both")};return r.useEffect(()=>{s.current.scrollWidth>s.current.clientWidth&&o("right")},[]),a.default.createElement(y,{shadow:"tableShadow",hasRadius:!0,background:"neutral0"},a.default.createElement(m,{overflowing:b},a.default.createElement(S,{ref:s,onScroll:p,paddingLeft:6,paddingRight:6},a.default.createElement(R,{colCount:e,rowCount:u,...h}))),f)};i.defaultProps={footer:void 0};i.propTypes={colCount:n.default.number.isRequired,footer:n.default.node,rowCount:n.default.number.isRequired};exports.Table=i;
+`,i=({colCount:e,rowCount:u,footer:f,...h})=>{const s=r.useRef(null),[b,o]=r.useState(),p=t=>{const g=t.target.scrollWidth-t.target.clientWidth;if(t.target.scrollLeft===0){o("right");return}if(t.target.scrollLeft===g){o("left");return}t.target.scrollLeft>0&&o("both")};return r.useEffect(()=>{s.current.scrollWidth>s.current.clientWidth&&o("right")},[]),a.default.createElement(y,{shadow:"tableShadow",hasRadius:!0,background:"neutral0"},a.default.createElement(m,{overflowing:b,position:"relative"},a.default.createElement(S,{ref:s,onScroll:p,paddingLeft:6,paddingRight:6},a.default.createElement(R,{colCount:e,rowCount:u,...h}))),f)};i.defaultProps={footer:void 0};i.propTypes={colCount:n.default.number.isRequired,footer:n.default.node,rowCount:n.default.number.isRequired};exports.Table=i;

package/dist/Table/Table.js

@@ -10,8 +10,6 @@ const T = a(n)`
   width: 100%;
   white-space: nowrap;
 `, R = a(n)`
-  position: relative;
-
   &:before {
     // TODO: make sure to add a token for this weird stuff
     background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
@@ -58,7 +56,8 @@ const T = a(n)`
     hasRadius: !0,
     background: "neutral0"
   }, /* @__PURE__ */ r.createElement(R, {
-    overflowing: h
+    overflowing: h,
+    position: "relative"
   }, /* @__PURE__ */ r.createElement(S, {
     ref: i,
     onScroll: u,

package/dist/Tabs/TabGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),I=require("prop-types"),g=require("./TabsContext.cjs"),h=require("../helpers/useId.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=c(a),t=c(I),d=a.forwardRef(({id:e,initialSelectedTabIndex:n,label:p,onTabChange:f,variant:b,...i},T)=>{const v=h.useId("tabgroup",e),o=a.Children.toArray(i.children).find(s=>s.type.displayName==="Tabs");let r=n||0;o&&n===void 0&&(r=o.props.children.findIndex(s=>!s.props.disabled));const[y,l]=a.useState(r===-1?0:r);return a.useImperativeHandle(T,()=>({_handlers:{setSelectedTabIndex:l}})),u.default.createElement(g.TabsContext.Provider,{value:{id:v,selectedTabIndex:y,selectTabIndex:l,label:p,variant:b,onTabChange:f}},u.default.createElement("div",{...i}))});d.displayName="TabGroup";d.defaultProps={id:void 0,initialSelectedTabIndex:void 0,onTabChange(){},variant:void 0};d.propTypes={children:t.default.node.isRequired,id:t.default.string,initialSelectedTabIndex:t.default.number,label:t.default.string.isRequired,onTabChange:t.default.func,variant:t.default.oneOf(["simple"])};exports.TabGroup=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),I=require("prop-types"),h=require("./TabsContext.cjs"),m=require("../helpers/useId.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=c(a),t=c(I),d=a.forwardRef(({id:e,initialSelectedTabIndex:n,label:p,onTabChange:f,variant:b,...i},T)=>{const v=m.useId(e),l=a.Children.toArray(i.children).find(s=>s.type.displayName==="Tabs");let r=n||0;l&&n===void 0&&(r=l.props.children.findIndex(s=>!s.props.disabled));const[y,o]=a.useState(r===-1?0:r);return a.useImperativeHandle(T,()=>({_handlers:{setSelectedTabIndex:o}})),u.default.createElement(h.TabsContext.Provider,{value:{id:v,selectedTabIndex:y,selectTabIndex:o,label:p,variant:b,onTabChange:f}},u.default.createElement("div",{...i}))});d.displayName="TabGroup";d.defaultProps={id:void 0,initialSelectedTabIndex:void 0,onTabChange(){},variant:void 0};d.propTypes={children:t.default.node.isRequired,id:t.default.string,initialSelectedTabIndex:t.default.number,label:t.default.string.isRequired,onTabChange:t.default.func,variant:t.default.oneOf(["simple"])};exports.TabGroup=d;

package/dist/Tabs/TabGroup.js

@@ -1,29 +1,29 @@
-import s, { forwardRef as T, Children as v, useState as I, useImperativeHandle as h } from "react";
+import s, { forwardRef as u, Children as v, useState as I, useImperativeHandle as h } from "react";
 import e from "prop-types";
 import { TabsContext as x } from "./TabsContext.js";
 import { useId as y } from "../helpers/useId.js";
-const t = T(({ id: l, initialSelectedTabIndex: d, label: p, onTabChange: b, variant: c, ...i }, m) => {
-  const f = y("tabgroup", l), n = v.toArray(i.children).find((a) => a.type.displayName === "Tabs");
-  let r = d || 0;
-  n && d === void 0 && (r = n.props.children.findIndex((a) => !a.props.disabled));
-  const [u, o] = I(r === -1 ? 0 : r);
+const d = u(({ id: l, initialSelectedTabIndex: t, label: p, onTabChange: b, variant: c, ...i }, m) => {
+  const f = y(l), n = v.toArray(i.children).find((a) => a.type.displayName === "Tabs");
+  let r = t || 0;
+  n && t === void 0 && (r = n.props.children.findIndex((a) => !a.props.disabled));
+  const [T, o] = I(r === -1 ? 0 : r);
   return h(m, () => ({
     _handlers: { setSelectedTabIndex: o }
   })), /* @__PURE__ */ s.createElement(x.Provider, {
-    value: { id: f, selectedTabIndex: u, selectTabIndex: o, label: p, variant: c, onTabChange: b }
+    value: { id: f, selectedTabIndex: T, selectTabIndex: o, label: p, variant: c, onTabChange: b }
   }, /* @__PURE__ */ s.createElement("div", {
     ...i
   }));
 });
-t.displayName = "TabGroup";
-t.defaultProps = {
+d.displayName = "TabGroup";
+d.defaultProps = {
   id: void 0,
   initialSelectedTabIndex: void 0,
   onTabChange() {
   },
   variant: void 0
 };
-t.propTypes = {
+d.propTypes = {
   children: e.node.isRequired,
   id: e.string,
   initialSelectedTabIndex: e.number,
@@ -32,5 +32,5 @@ t.propTypes = {
   variant: e.oneOf(["simple"])
 };
 export {
-  t as TabGroup
+  d as TabGroup
 };

package/dist/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),v=require("prop-types"),y=require("../Field/Field.cjs"),I=require("../Field/FieldLabel.cjs"),g=require("../Field/FieldInput.cjs"),E=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Stack/Stack.cjs"),_=require("../themes/sizes.cjs"),h=require("../helpers/useId.cjs"),o=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},t=o(d),e=o(v),i=t.default.forwardRef(({size:l,startAction:s,endAction:c,name:f,hint:p,error:F,label:r,labelAction:b,id:m,required:q,...a},n)=>{const j=h.useId("textinput",m),u=d.useRef(null);if(!r&&!a["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return d.useImperativeHandle(n,()=>({inputWrapperRef:u})),t.default.createElement("div",{ref:u},t.default.createElement(y.Field,{name:f,hint:p,error:F,id:j,required:q},t.default.createElement(A.Stack,{spacing:1},r&&t.default.createElement(I.FieldLabel,{action:b},r),t.default.createElement(g.FieldInput,{size:l,ref:n,startAction:s,endAction:c,...a}),t.default.createElement(E.FieldHint,null),t.default.createElement(T.FieldError,null))))});i.displayName="TextInput";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,startAction:void 0,size:"M",endAction:void 0,required:!1};i.propTypes={"aria-label":e.default.string,endAction:e.default.element,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(_.sizes.input)),startAction:e.default.element};exports.TextInput=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),v=require("prop-types"),y=require("../Field/Field.cjs"),I=require("../Field/FieldLabel.cjs"),g=require("../Field/FieldInput.cjs"),E=require("../Field/FieldHint.cjs"),T=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Stack/Stack.cjs"),_=require("../themes/sizes.cjs"),h=require("../helpers/useId.cjs"),o=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},t=o(d),e=o(v),i=t.default.forwardRef(({size:l,startAction:s,endAction:c,name:f,hint:p,error:F,label:r,labelAction:b,id:m,required:q,...a},n)=>{const j=h.useId(m),u=d.useRef(null);if(!r&&!a["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return d.useImperativeHandle(n,()=>({inputWrapperRef:u})),t.default.createElement("div",{ref:u},t.default.createElement(y.Field,{name:f,hint:p,error:F,id:j,required:q},t.default.createElement(A.Stack,{spacing:1},r&&t.default.createElement(I.FieldLabel,{action:b},r),t.default.createElement(g.FieldInput,{size:l,ref:n,startAction:s,endAction:c,...a}),t.default.createElement(E.FieldHint,null),t.default.createElement(T.FieldError,null))))});i.displayName="TextInput";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,startAction:void 0,size:"M",endAction:void 0,required:!1};i.propTypes={"aria-label":e.default.string,endAction:e.default.element,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool,size:e.default.oneOf(Object.keys(_.sizes.input)),startAction:e.default.element};exports.TextInput=i;

package/dist/TextInput/TextInput.js

@@ -1,45 +1,45 @@
-import t, { useRef as E, useImperativeHandle as g } from "react";
+import r, { useRef as E, useImperativeHandle as g } from "react";
 import e from "prop-types";
 import { Field as T } from "../Field/Field.js";
 import { FieldLabel as y } from "../Field/FieldLabel.js";
 import { FieldInput as I } from "../Field/FieldInput.js";
 import { FieldHint as A } from "../Field/FieldHint.js";
-import { FieldError as x } from "../Field/FieldError.js";
+import { FieldError as F } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Stack as F } from "../Stack/Stack.js";
-import { sizes as O } from "../themes/sizes.js";
-import { useId as R } from "../helpers/useId.js";
-const i = t.forwardRef(
-  ({ size: l, startAction: m, endAction: p, name: d, hint: s, error: c, label: r, labelAction: f, id: u, required: b, ...o }, n) => {
-    const v = R("textinput", u), a = E(null);
-    if (!r && !o["aria-label"])
+import { Stack as O } from "../Stack/Stack.js";
+import { sizes as R } from "../themes/sizes.js";
+import { useId as h } from "../helpers/useId.js";
+const o = r.forwardRef(
+  ({ size: l, startAction: m, endAction: d, name: p, hint: s, error: c, label: t, labelAction: f, id: u, required: b, ...i }, n) => {
+    const v = h(u), a = E(null);
+    if (!t && !i["aria-label"])
       throw new Error('The TextInput component needs a "label" or an "aria-label" props');
     return g(n, () => ({
       inputWrapperRef: a
-    })), /* @__PURE__ */ t.createElement("div", {
+    })), /* @__PURE__ */ r.createElement("div", {
       ref: a
-    }, /* @__PURE__ */ t.createElement(T, {
-      name: d,
+    }, /* @__PURE__ */ r.createElement(T, {
+      name: p,
       hint: s,
       error: c,
       id: v,
       required: b
-    }, /* @__PURE__ */ t.createElement(F, {
+    }, /* @__PURE__ */ r.createElement(O, {
       spacing: 1
-    }, r && /* @__PURE__ */ t.createElement(y, {
+    }, t && /* @__PURE__ */ r.createElement(y, {
       action: f
-    }, r), /* @__PURE__ */ t.createElement(I, {
+    }, t), /* @__PURE__ */ r.createElement(I, {
       size: l,
       ref: n,
       startAction: m,
-      endAction: p,
-      ...o
-    }), /* @__PURE__ */ t.createElement(A, null), /* @__PURE__ */ t.createElement(x, null))));
+      endAction: d,
+      ...i
+    }), /* @__PURE__ */ r.createElement(A, null), /* @__PURE__ */ r.createElement(F, null))));
   }
 );
-i.displayName = "TextInput";
-i.defaultProps = {
+o.displayName = "TextInput";
+o.defaultProps = {
   "aria-label": void 0,
   label: void 0,
   labelAction: void 0,
@@ -51,19 +51,19 @@ i.defaultProps = {
   endAction: void 0,
   required: !1
 };
-i.propTypes = {
+o.propTypes = {
   "aria-label": e.string,
   endAction: e.element,
   error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
   id: e.string,
   label: e.string,
   labelAction: e.element,
   name: e.string.isRequired,
   required: e.bool,
-  size: e.oneOf(Object.keys(O.input)),
+  size: e.oneOf(Object.keys(R.input)),
   startAction: e.element
 };
 export {
-  i as TextInput
+  o as TextInput
 };

package/dist/Textarea/Textarea.cjs

@@ -12,4 +12,4 @@
     color: ${({theme:t})=>t.colors.neutral500};
     opacity: 1;
   }
-`,r=l.default.forwardRef(({name:t,hint:d,error:n,label:i,children:u,labelAction:o,id:s,required:c,...f},p)=>{const F=E.useId("textarea",s);return l.default.createElement(I,null,l.default.createElement(g.Field,{name:t,hint:d,error:n,id:F,required:c},l.default.createElement(b.Stack,{spacing:1},i&&l.default.createElement(v.Flex,null,l.default.createElement(x.FieldLabel,{action:o},i)),l.default.createElement(T.TextareaInput,{ref:p,as:"textarea",value:u,...f}),l.default.createElement(y.FieldHint,null),l.default.createElement(j.FieldError,null))))});r.displayName="Textarea";r.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};r.propTypes={"aria-label":e.default.string,children:e.default.string,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=r;
+`,r=l.default.forwardRef(({name:t,hint:d,error:n,label:i,children:u,labelAction:o,id:s,required:c,...f},p)=>{const F=E.useId(s);return l.default.createElement(I,null,l.default.createElement(g.Field,{name:t,hint:d,error:n,id:F,required:c},l.default.createElement(b.Stack,{spacing:1},i&&l.default.createElement(v.Flex,null,l.default.createElement(x.FieldLabel,{action:o},i)),l.default.createElement(T.TextareaInput,{ref:p,as:"textarea",value:u,...f}),l.default.createElement(y.FieldHint,null),l.default.createElement(j.FieldError,null))))});r.displayName="Textarea";r.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};r.propTypes={"aria-label":e.default.string,children:e.default.string,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=r;

package/dist/Textarea/Textarea.js

@@ -28,7 +28,7 @@ const F = h.div`
   }
 `, i = r.forwardRef(
   ({ name: t, hint: a, error: l, label: o, children: n, labelAction: m, id: d, required: p, ...c }, s) => {
-    const f = y("textarea", d);
+    const f = y(d);
     return /* @__PURE__ */ r.createElement(F, null, /* @__PURE__ */ r.createElement(u, {
       name: t,
       hint: a,

package/dist/TimePicker/TimePicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),P=require("prop-types"),z=require("@strapi/icons"),E=require("styled-components"),R=require("../themes/sizes.cjs"),L=require("../Select/Select.cjs"),w=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const B=require("../helpers/useId.cjs"),d=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},n=d(I),e=d(P),x=d(E),D=x.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("react"),k=require("prop-types"),z=require("@strapi/icons"),E=require("styled-components"),R=require("../themes/sizes.cjs"),L=require("../Select/Select.cjs"),w=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const B=require("../helpers/useId.cjs"),d=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},n=d(P),e=d(k),x=d(E),D=x.default.div`
   display: flex;
   align-items: center;
   svg {
@@ -9,4 +9,4 @@
   svg path {
     fill: ${({theme:l})=>l.colors.neutral500};
   }
-`,c=({disabled:l,error:p,hint:m,id:b,onClear:y,onChange:h,value:i,clearLabel:g,label:q,required:v,selectButtonTitle:O,step:T,size:S,...j})=>{const M=B.useId("timepicker",b),_=24,s=[];let r=0;for(let t=0;t<_;t++)for(r=0;r<60;)s.push(`${t<10?`0${t}`:t}:${r<10?`0${r}`:r}`),r+=T;const $=()=>{const t=i.split(":")[0],f=i.split(":")[1],k=s.reduce((u,o)=>{const a=o.split(":")[0];return Math.abs(a-t)<Math.abs(u-t)?a:u},s[0].split(":")[0]),C=s.reduce((u,o)=>{const a=o.split(":")[1];return Math.abs(a-f)<Math.abs(u-f)?a:u},s[0].split(":")[1]);return`${k}:${C}`};return n.default.createElement(L.Select,{id:M,label:q,placeholder:"--:--",hint:m,onClear:y,clearLabel:g,error:p,value:i?$():null,size:S,onChange:h,disabled:l,required:v,selectButtonTitle:O,startIcon:n.default.createElement(D,null,n.default.createElement(z.Clock,null)),...j},s.map(t=>n.default.createElement(w.Option,{value:t,key:t},t)))};c.defaultProps={disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,onClear:void 0,required:!1,size:"M",selectButtonTitle:void 0,step:15,value:void 0};c.propTypes={clearLabel:e.default.string.isRequired,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(R.sizes.input)),step:e.default.number,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number])};exports.TimePicker=c;
+`,c=({disabled:l,error:p,hint:b,id:m,onClear:y,onChange:h,value:o,clearLabel:g,label:q,required:v,selectButtonTitle:O,step:T,size:S,...j})=>{const M=B.useId(m),_=24,s=[];let u=0;for(let t=0;t<_;t++)for(u=0;u<60;)s.push(`${t<10?`0${t}`:t}:${u<10?`0${u}`:u}`),u+=T;const $=()=>{const t=o.split(":")[0],f=o.split(":")[1],C=s.reduce((r,i)=>{const a=i.split(":")[0];return Math.abs(a-t)<Math.abs(r-t)?a:r},s[0].split(":")[0]),I=s.reduce((r,i)=>{const a=i.split(":")[1];return Math.abs(a-f)<Math.abs(r-f)?a:r},s[0].split(":")[1]);return`${C}:${I}`};return n.default.createElement(L.Select,{id:M,label:q,placeholder:"--:--",hint:b,onClear:y,clearLabel:g,error:p,value:o?$():null,size:S,onChange:h,disabled:l,required:v,selectButtonTitle:O,startIcon:n.default.createElement(D,null,n.default.createElement(z.Clock,null)),...j},s.map(t=>n.default.createElement(w.Option,{value:t,key:t},t)))};c.defaultProps={disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,onClear:void 0,required:!1,size:"M",selectButtonTitle:void 0,step:15,value:void 0};c.propTypes={clearLabel:e.default.string.isRequired,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.bool,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,onChange:e.default.func.isRequired,onClear:e.default.func,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(R.sizes.input)),step:e.default.number,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number])};exports.TimePicker=c;

package/dist/TimePicker/TimePicker.js

@@ -36,7 +36,7 @@ const _ = P.div`
   size: $,
   ...C
 }) => {
-  const M = B("timepicker", f), k = 24, r = [];
+  const M = B(f), k = 24, r = [];
   let o = 0;
   for (let t = 0; t < k; t++)
     for (o = 0; o < 60; )
@@ -89,7 +89,7 @@ m.propTypes = {
   clearLabel: e.string.isRequired,
   disabled: e.bool,
   error: e.oneOfType([e.string, e.bool]),
-  hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
+  hint: e.oneOfType([e.string, e.bool, e.node, e.arrayOf(e.node)]),
   id: e.oneOfType([e.string, e.number]),
   label: e.string,
   onChange: e.func.isRequired,

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),T=require("prop-types"),w=require("styled-components"),v=require("../themes/sizes.cjs"),k=require("../themes/utils.cjs"),p=require("../Typography/Typography.cjs"),R=require("../VisuallyHidden/VisuallyHidden.cjs"),L=require("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const _=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const E=require("../Flex/Flex.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=d(m),o=d(T),i=d(w),$=i.default.label`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),R=require("prop-types"),$=require("styled-components"),L=require("../themes/sizes.cjs"),_=require("../themes/utils.cjs"),g=require("../Typography/Typography.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),z=require("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const B=require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const S=require("../Flex/Flex.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=c(k),o=c(R),i=c($),V=i.default.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`,z=i.default(L.Box)`
+`,W=i.default(z.Box)`
   cursor: ${({disabled:e})=>e?"not-allowed":void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${k.inputFocusStyle()}
-`,f=i.default(E.Flex).attrs({hasRadius:!0})`
+  ${_.inputFocusStyle()}
+`,h=i.default(S.Flex).attrs({hasRadius:!0})`
   background-color: ${({theme:e,checked:n,disabled:a})=>n?a?e.colors.neutral200:e.colors.neutral0:"transparent"};
   border: 1px solid
     ${({theme:e,checked:n,disabled:a})=>n&&n!==null?a?e.colors.neutral300:e.colors.neutral200:a?e.colors.neutral150:e.colors.neutral100};
@@ -25,7 +25,7 @@
   */
   padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
   padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
-`,B=i.default.input`
+`,H=i.default.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -33,4 +33,4 @@
   top: 0;
   z-index: 1;
   width: 100%;
-`,u=l.default.forwardRef(({size:e,onLabel:n,offLabel:a,children:g,checked:t,disabled:r,onChange:h,...x},y)=>{const{name:b,required:C}=_.useField(),c="neutral600";let q=!t&&t!==null?"danger700":c,F=t?"primary600":c;const j=s=>{r||h(s)};return l.default.createElement($,null,l.default.createElement(R.VisuallyHidden,null,g),l.default.createElement(z,{hasRadius:!0,disabled:r,padding:1,display:"flex",background:r?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200"},l.default.createElement(f,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:!t,disabled:r},l.default.createElement(p.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":q},a)),l.default.createElement(f,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:t,disabled:r},l.default.createElement(p.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":F},n)),l.default.createElement(B,{type:"checkbox","aria-disabled":r,onChange:s=>j(s),name:b,ref:y,"aria-required":C,...x,checked:!(t===null||!t)})))});u.displayName="ToggleCheckbox";u.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};u.propTypes={checked:o.default.bool,children:o.default.string.isRequired,disabled:o.default.bool,offLabel:o.default.string.isRequired,onChange:o.default.func,onLabel:o.default.string.isRequired,size:o.default.oneOf(Object.keys(v.sizes.input))};exports.ToggleCheckbox=u;
+`,u=r.default.forwardRef(({size:e,onLabel:n,offLabel:a,children:y,checked:t,disabled:l,onChange:x,...b},C)=>{const{error:q,hint:F,id:p,name:j,required:m}=B.useField(),f="neutral600";let T=!t&&t!==null?"danger700":f,w=t?"primary600":f;const v=d=>{l||x(d)};let s;return q?s=`${p}-error`:F&&(s=`${p}-hint`),r.default.createElement(V,null,r.default.createElement(E.VisuallyHidden,null,y),r.default.createElement(W,{hasRadius:!0,disabled:l,padding:1,display:"flex",background:l?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200"},r.default.createElement(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:!t,disabled:l},r.default.createElement(g.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:l?"neutral700":T},a)),r.default.createElement(h,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:t,disabled:l},r.default.createElement(g.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:l?"neutral700":w},n)),r.default.createElement(H,{type:"checkbox","aria-disabled":l,"aria-describedby":s,onChange:d=>v(d),name:j,ref:C,"aria-required":m,...b,checked:!(t===null||!t)})))});u.displayName="ToggleCheckbox";u.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};u.propTypes={checked:o.default.bool,children:o.default.string.isRequired,disabled:o.default.bool,offLabel:o.default.string.isRequired,onChange:o.default.func,onLabel:o.default.string.isRequired,size:o.default.oneOf(Object.keys(L.sizes.input))};exports.ToggleCheckbox=u;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,35 +1,35 @@
-import r from "react";
+import t from "react";
 import n from "prop-types";
-import i from "styled-components";
-import { sizes as v } from "../themes/sizes.js";
-import { inputFocusStyle as k } from "../themes/utils.js";
-import { Typography as d } from "../Typography/Typography.js";
-import { VisuallyHidden as R } from "../VisuallyHidden/VisuallyHidden.js";
-import { Box as E } from "../Box/Box.js";
+import l from "styled-components";
+import { sizes as E } from "../themes/sizes.js";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { VisuallyHidden as L } from "../VisuallyHidden/VisuallyHidden.js";
+import { Box as q } from "../Box/Box.js";
 import "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { useField as T } from "../Field/FieldContext.js";
+import { useField as z } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as $ } from "../Flex/Flex.js";
-const L = i.label`
+import { Flex as W } from "../Flex/Flex.js";
+const S = l.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, q = i(E)`
+`, j = l(q)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${k()}
-`, f = i($).attrs({
+  ${T()}
+`, m = l(W).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: l, disabled: a }) => l ? a ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: a, disabled: i }) => a ? i ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: l, disabled: a }) => l && l !== null ? a ? e.colors.neutral300 : e.colors.neutral200 : a ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: a, disabled: i }) => a && a !== null ? i ? e.colors.neutral300 : e.colors.neutral200 : i ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -41,7 +41,7 @@ const L = i.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, z = i.input`
+`, B = l.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -49,14 +49,15 @@ const L = i.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, u = r.forwardRef(
-  ({ size: e, onLabel: l, offLabel: a, children: c, checked: t, disabled: o, onChange: m, ...g }, h) => {
-    const { name: b, required: x } = T(), s = "neutral600";
-    let y = !t && t !== null ? "danger700" : s, C = t ? "primary600" : s;
-    const w = (p) => {
-      o || m(p);
+`, s = t.forwardRef(
+  ({ size: e, onLabel: a, offLabel: i, children: g, checked: r, disabled: o, onChange: h, ...b }, x) => {
+    const { error: y, hint: C, id: d, name: w, required: v } = z(), f = "neutral600";
+    let $ = !r && r !== null ? "danger700" : f, k = r ? "primary600" : f;
+    const R = (u) => {
+      o || h(u);
     };
-    return /* @__PURE__ */ r.createElement(L, null, /* @__PURE__ */ r.createElement(R, null, c), /* @__PURE__ */ r.createElement(q, {
+    let p;
+    return y ? p = `${d}-error` : C && (p = `${d}-hint`), /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(L, null, g), /* @__PURE__ */ t.createElement(j, {
       hasRadius: !0,
       disabled: o,
       padding: 1,
@@ -65,62 +66,63 @@ const L = i.label`
       borderStyle: "solid",
       borderWidth: "1px",
       borderColor: "neutral200"
-    }, /* @__PURE__ */ r.createElement(f, {
+    }, /* @__PURE__ */ t.createElement(m, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: t === null ? !1 : !t,
+      checked: r === null ? !1 : !r,
       disabled: o
-    }, /* @__PURE__ */ r.createElement(d, {
+    }, /* @__PURE__ */ t.createElement(c, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: o ? "neutral700" : y
-    }, a)), /* @__PURE__ */ r.createElement(f, {
+      textColor: o ? "neutral700" : $
+    }, i)), /* @__PURE__ */ t.createElement(m, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: t === null ? !1 : t,
+      checked: r === null ? !1 : r,
       disabled: o
-    }, /* @__PURE__ */ r.createElement(d, {
+    }, /* @__PURE__ */ t.createElement(c, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: o ? "neutral700" : C
-    }, l)), /* @__PURE__ */ r.createElement(z, {
+      textColor: o ? "neutral700" : k
+    }, a)), /* @__PURE__ */ t.createElement(B, {
       type: "checkbox",
       "aria-disabled": o,
-      onChange: (p) => w(p),
-      name: b,
-      ref: h,
-      "aria-required": x,
-      ...g,
-      checked: !(t === null || !t)
+      "aria-describedby": p,
+      onChange: (u) => R(u),
+      name: w,
+      ref: x,
+      "aria-required": v,
+      ...b,
+      checked: !(r === null || !r)
     })));
   }
 );
-u.displayName = "ToggleCheckbox";
-u.defaultProps = {
+s.displayName = "ToggleCheckbox";
+s.defaultProps = {
   disabled: !1,
   checked: !1,
   onChange: void 0,
   size: "M"
 };
-u.propTypes = {
+s.propTypes = {
   checked: n.bool,
   children: n.string.isRequired,
   disabled: n.bool,
   offLabel: n.string.isRequired,
   onChange: n.func,
   onLabel: n.string.isRequired,
-  size: n.oneOf(Object.keys(v.input))
+  size: n.oneOf(Object.keys(E.input))
 };
 export {
-  u as ToggleCheckbox
+  s as ToggleCheckbox
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -3,4 +3,4 @@
 `,L=s.default(S.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,r=({disabled:t,size:c,error:f,hint:g,label:i,name:p,labelAction:F,required:b,id:q,onClear:o,clearLabel:n,checked:a,...j})=>{const u=k.useId("toggleinput",q);return l.default.createElement(B,{name:p,hint:g,error:f,id:u,required:b},l.default.createElement(C.Stack,{spacing:1},l.default.createElement(I.Flex,null,l.default.createElement(h.FieldLabel,{action:F},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:c,checked:a,disabled:t,...j},i),l.default.createElement(_.FieldHint,null),l.default.createElement(v.FieldError,null)))};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(y.sizes.input))};exports.ToggleInput=r;
+`,r=({disabled:t,size:c,error:f,hint:g,label:i,name:p,labelAction:F,required:b,id:q,onClear:o,clearLabel:n,checked:a,...j})=>{const u=k.useId(q);return l.default.createElement(B,{name:p,hint:g,error:f,id:u,required:b},l.default.createElement(C.Stack,{spacing:1},l.default.createElement(I.Flex,null,l.default.createElement(h.FieldLabel,{action:F},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:c,checked:a,disabled:t,...j},i),l.default.createElement(_.FieldHint,null),l.default.createElement(v.FieldError,null)))};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(y.sizes.input))};exports.ToggleInput=r;

package/dist/ToggleInput/ToggleInput.js

@@ -1,5 +1,5 @@
 import r from "react";
-import p from "styled-components";
+import d from "styled-components";
 import e from "prop-types";
 import { sizes as x } from "../themes/sizes.js";
 import { useId as y } from "../helpers/useId.js";
@@ -14,42 +14,42 @@ import { Stack as k } from "../Stack/Stack.js";
 import { Flex as C } from "../Flex/Flex.js";
 import { TextButton as I } from "../TextButton/TextButton.js";
 import { ToggleCheckbox as O } from "../ToggleCheckbox/ToggleCheckbox.js";
-const z = p(T)`
+const z = d(T)`
   max-width: 320px;
-`, q = p(I)`
+`, q = d(I)`
   align-self: flex-end;
   margin-left: auto;
 `, o = ({
   disabled: t,
-  size: d,
+  size: p,
   error: s,
   hint: c,
   label: i,
   name: f,
-  labelAction: g,
-  required: u,
+  labelAction: u,
+  required: g,
   id: b,
   onClear: l,
   clearLabel: n,
   checked: m,
   ...E
 }) => {
-  const a = y("toggleinput", b);
+  const a = y(b);
   return /* @__PURE__ */ r.createElement(z, {
     name: f,
     hint: c,
     error: s,
     id: a,
-    required: u
+    required: g
   }, /* @__PURE__ */ r.createElement(k, {
     spacing: 1
   }, /* @__PURE__ */ r.createElement(C, null, /* @__PURE__ */ r.createElement(v, {
-    action: g
+    action: u
   }, i), n && l && m !== null && !t && /* @__PURE__ */ r.createElement(q, {
     onClick: l
   }, n)), /* @__PURE__ */ r.createElement(O, {
     id: a,
-    size: d,
+    size: p,
     checked: m,
     disabled: t,
     ...E

package/dist/Tooltip/Tooltip.cjs

@@ -1,6 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(m),o=r(q),I=r(v),R=I.default(j.Box)`
-  position: absolute;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(m),o=i(q),I=i(v),R=I.default(j.Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};
-`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId("tooltip",c),y=n.useId("description"),{visible:i,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(i,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:i,...f},i&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;
+`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId(c),y=n.useId(),{visible:r,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(r,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:r,position:"absolute",...f},r&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;