@strapi/design-system 1.6.4 → 1.6.5

package/dist/TimePicker/TimePicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("react"),k=require("@strapi/icons"),z=require("prop-types"),E=require("styled-components"),R=require("../helpers/useId.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("../themes/sizes.cjs"),d=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},n=d(P),e=d(z),x=d(E),D=x.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const I=require("react"),P=require("@strapi/icons"),z=require("prop-types"),E=require("styled-components"),R=require("../hooks/useId.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("../themes/sizes.cjs"),d=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},a=d(I),e=d(z),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:b,id:m,onClear:y,onChange:h,value:o,clearLabel:g,label:q,required:v,selectButtonTitle:O,step:T,size:S,...j})=>{const M=R.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(k.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(B.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:n,clearLabel:g,label:q,required:v,selectButtonTitle:O,step:T,size:S,...j})=>{const M=R.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=n.split(":")[0],f=n.split(":")[1],k=s.reduce((r,i)=>{const o=i.split(":")[0];return Math.abs(o-t)<Math.abs(r-t)?o:r},s[0].split(":")[0]),C=s.reduce((r,i)=>{const o=i.split(":")[1];return Math.abs(o-f)<Math.abs(r-f)?o:r},s[0].split(":")[1]);return`${k}:${C}`};return a.default.createElement(L.Select,{id:M,label:q,placeholder:"--:--",hint:b,onClear:y,clearLabel:g,error:p,value:n?$():null,size:S,onChange:h,disabled:l,required:v,selectButtonTitle:O,startIcon:a.default.createElement(D,null,a.default.createElement(P.Clock,null)),...j},s.map(t=>a.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(B.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

@@ -2,7 +2,7 @@ import n from "react";
 import { Clock as z } from "@strapi/icons";
 import e from "prop-types";
 import P from "styled-components";
-import { useId as R } from "../helpers/useId.js";
+import { useId as R } from "../hooks/useId.js";
 import { Select as w } from "../Select/Select.js";
 import { Option as x } from "../Select/Option.js";
 import "../Select/OptGroup.js";

package/dist/ToggleCheckbox/ToggleCheckbox.cjs

@@ -1,4 +1,4 @@
-"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("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const _=require("../Field/FieldContext.cjs"),g=require("../Typography/Typography.cjs");require("../Field/FieldAction.cjs");const E=require("../Flex/Flex.cjs"),z=require("../themes/sizes.cjs"),B=require("../themes/utils.cjs"),S=require("../VisuallyHidden/VisuallyHidden.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`
+"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("../Box/Box.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("react/jsx-runtime");const _=require("../Field/FieldContext.cjs"),g=require("../Typography/Typography.cjs");require("../Field/FieldAction.cjs");const E=require("../Flex/Flex.cjs"),z=require("../themes/sizes.cjs"),B=require("../themes/utils.cjs"),S=require("../VisuallyHidden/VisuallyHidden.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;
@@ -33,4 +33,4 @@
   top: 0;
   z-index: 1;
   width: 100%;
-`,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}=_.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(S.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(z.sizes.input))};exports.ToggleCheckbox=u;
+`,u=r.default.forwardRef(({size:e,onLabel:n,offLabel:a,children:x,checked:t,disabled:l,onChange:y,...b},q)=>{const{error:C,hint:j,id:p,name:m,required:F}=_.useField(),f="neutral600";let T=!t&&t!==null?"danger700":f,w=t?"primary600":f;const v=d=>{l||y(d)};let s;return C?s=`${p}-error`:j&&(s=`${p}-hint`),r.default.createElement(V,null,r.default.createElement(S.VisuallyHidden,null,x),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:m,ref:q,"aria-required":F,...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(z.sizes.input))};exports.ToggleCheckbox=u;

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -5,6 +5,7 @@ import { Box as E } from "../Box/Box.js";
 import "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
+import "react/jsx-runtime";
 import { useField as T } from "../Field/FieldContext.js";
 import { Typography as c } from "../Typography/Typography.js";
 import "../Field/FieldAction.js";

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),x=require("prop-types"),T=require("styled-components"),y=require("../Field/Field.cjs"),k=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const E=require("../Field/FieldHint.cjs"),h=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const _=require("../Flex/Flex.cjs"),v=require("../helpers/useId.cjs"),C=require("../Stack/Stack.cjs"),I=require("../TextButton/TextButton.cjs"),S=require("../themes/sizes.cjs"),z=require("../ToggleCheckbox/ToggleCheckbox.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=d(m),e=d(x),s=d(T),B=s.default(y.Field)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),j=require("prop-types"),y=require("styled-components"),h=require("../Field/Field.cjs"),E=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const I=require("../Field/FieldHint.cjs"),_=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const s=require("../Flex/Flex.cjs"),k=require("../hooks/useId.cjs"),v=require("../TextButton/TextButton.cjs"),C=require("../themes/sizes.cjs"),z=require("../ToggleCheckbox/ToggleCheckbox.cjs"),r=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=r(T),e=r(j),c=r(y),B=c.default(h.Field)`
   max-width: 320px;
-`,L=s.default(I.TextButton)`
+`,L=c.default(v.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=v.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(_.Flex,null,l.default.createElement(k.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(E.FieldHint,null),l.default.createElement(h.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(S.sizes.input))};exports.ToggleInput=r;
+`,d=({disabled:t,size:f,error:g,hint:F,label:i,name:p,labelAction:b,required:m,id:q,onClear:o,clearLabel:n,checked:a,...x})=>{const u=k.useId(q);return l.default.createElement(B,{name:p,hint:F,error:g,id:u,required:m},l.default.createElement(s.Flex,{direction:"column",alignItems:"stretch",gap:1},l.default.createElement(s.Flex,null,l.default.createElement(E.FieldLabel,{action:b},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:f,checked:a,disabled:t,...x},i),l.default.createElement(I.FieldHint,null),l.default.createElement(_.FieldError,null)))};d.displayName="ToggleInput";d.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"};d.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(C.sizes.input))};exports.ToggleInput=d;

package/dist/ToggleInput/ToggleInput.js

@@ -1,44 +1,43 @@
 import r from "react";
 import e from "prop-types";
-import d from "styled-components";
-import { Field as x } from "../Field/Field.js";
-import { FieldLabel as y } from "../Field/FieldLabel.js";
+import p from "styled-components";
+import { Field as y } from "../Field/Field.js";
+import { FieldLabel as T } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as T } from "../Field/FieldHint.js";
+import { FieldHint as h } from "../Field/FieldHint.js";
 import { FieldError as v } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as F } from "../Flex/Flex.js";
-import { useId as h } from "../helpers/useId.js";
-import { Stack as k } from "../Stack/Stack.js";
-import { TextButton as C } from "../TextButton/TextButton.js";
-import { sizes as I } from "../themes/sizes.js";
-import { ToggleCheckbox as O } from "../ToggleCheckbox/ToggleCheckbox.js";
-const z = d(x)`
+import { Flex as d } from "../Flex/Flex.js";
+import { useId as F } from "../hooks/useId.js";
+import { TextButton as I } from "../TextButton/TextButton.js";
+import { sizes as k } from "../themes/sizes.js";
+import { ToggleCheckbox as C } from "../ToggleCheckbox/ToggleCheckbox.js";
+const O = p(y)`
   max-width: 320px;
-`, q = d(C)`
+`, z = p(I)`
   align-self: flex-end;
   margin-left: auto;
-`, o = ({
-  disabled: t,
-  size: p,
-  error: s,
-  hint: c,
+`, t = ({
+  disabled: o,
+  size: s,
+  error: c,
+  hint: f,
   label: i,
-  name: f,
-  labelAction: u,
-  required: g,
-  id: b,
+  name: u,
+  labelAction: g,
+  required: b,
+  id: E,
   onClear: l,
   clearLabel: n,
   checked: m,
-  ...E
+  ...x
 }) => {
-  const a = h(b);
-  return /* @__PURE__ */ r.createElement(z, { name: f, hint: c, error: s, id: a, required: g }, /* @__PURE__ */ r.createElement(k, { spacing: 1 }, /* @__PURE__ */ r.createElement(F, null, /* @__PURE__ */ r.createElement(y, { action: u }, i), n && l && m !== null && !t && /* @__PURE__ */ r.createElement(q, { onClick: l }, n)), /* @__PURE__ */ r.createElement(O, { id: a, size: p, checked: m, disabled: t, ...E }, i), /* @__PURE__ */ r.createElement(T, null), /* @__PURE__ */ r.createElement(v, null)));
+  const a = F(E);
+  return /* @__PURE__ */ r.createElement(O, { name: u, hint: f, error: c, id: a, required: b }, /* @__PURE__ */ r.createElement(d, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ r.createElement(d, null, /* @__PURE__ */ r.createElement(T, { action: g }, i), n && l && m !== null && !o && /* @__PURE__ */ r.createElement(z, { onClick: l }, n)), /* @__PURE__ */ r.createElement(C, { id: a, size: s, checked: m, disabled: o, ...x }, i), /* @__PURE__ */ r.createElement(h, null), /* @__PURE__ */ r.createElement(v, null)));
 };
-o.displayName = "ToggleInput";
-o.defaultProps = {
+t.displayName = "ToggleInput";
+t.defaultProps = {
   checked: !1,
   clearLabel: void 0,
   disabled: !1,
@@ -52,7 +51,7 @@ o.defaultProps = {
   required: !1,
   size: "M"
 };
-o.propTypes = {
+t.propTypes = {
   checked: e.bool,
   clearLabel: e.string,
   disabled: e.bool,
@@ -64,8 +63,8 @@ o.propTypes = {
   name: e.string,
   onClear: e.func,
   required: e.bool,
-  size: e.oneOf(Object.keys(I.input))
+  size: e.oneOf(Object.keys(k.input))
 };
 export {
-  o as ToggleInput
+  t as ToggleInput
 };

package/dist/Tooltip/Tooltip.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("react"),g=require("styled-components"),x=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),T=require("../Box/Box.cjs"),l=require("../helpers/useId.cjs"),m=require("../Portal/Portal.cjs"),q=require("../Typography/Typography.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),H=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const I=v(b),P=H(g),O=P.default(T.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("react"),g=require("styled-components"),x=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),T=require("../Box/Box.cjs"),l=require("../hooks/useId.cjs"),m=require("../Portal/Portal.cjs"),q=require("../Typography/Typography.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),H=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const I=v(b),P=H(g),O=P.default(T.Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};

package/dist/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@ import g from "styled-components";
 import { useTooltipHandlers as T } from "./hooks/useTooltipHandlers.js";
 import { useTooltipLayout as v } from "./hooks/useTooltipLayout.js";
 import { Box as I } from "../Box/Box.js";
-import { useId as d } from "../helpers/useId.js";
+import { useId as d } from "../hooks/useId.js";
 import { Portal as R } from "../Portal/Portal.js";
 import { Typography as H } from "../Typography/Typography.js";
 import { VisuallyHidden as W } from "../VisuallyHidden/VisuallyHidden.js";

package/dist/helpers/deprecations.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="[@strapi/design-system]:",i=n=>{const e=n;let t=!1;if(typeof e!="function")throw new TypeError(`${r} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.once=i;exports.prefix=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="[@strapi/design-system]:",s=n=>{const e=n;let t=!1;if(typeof e!="function")throw new TypeError(`${r} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.PREFIX=r;exports.once=s;

package/dist/helpers/deprecations.js

@@ -1,13 +1,13 @@
-const o = "[@strapi/design-system]:", c = (t) => {
-  const e = t;
-  let r = !1;
+const o = "[@strapi/design-system]:", c = (n) => {
+  const e = n;
+  let t = !1;
   if (typeof e != "function")
     throw new TypeError(`${o} once requires a function parameter`);
-  return (...n) => {
-    r || (e(...n), r = !0);
+  return (...r) => {
+    t || (e(...r), t = !0);
   };
 };
 export {
-  c as once,
-  o as prefix
+  o as PREFIX,
+  c as once
 };

package/dist/helpers/useElementOnScreen.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),o=r=>{const e=n.useRef(null),[c,u]=n.useState(!0),i=([t])=>{u(t.isIntersecting)};return n.useEffect(()=>{const t=e.current,s=new IntersectionObserver(i,r);return t&&s.observe(e.current),()=>{t&&s.disconnect()}},[e,r]),[e,c]};exports.useElementOnScreen=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),s=require("../hooks/useElementOnScreen.cjs"),r=e.once(console.warn),t=(...n)=>(r(`${e.PREFIX} useElementOnScreen has moved. Please import it from "@strapi/design-system/hooks/useElementOnScreen"`),s.useElementOnScreen(...n));exports.useElementOnScreen=t;

package/dist/helpers/useElementOnScreen.js

@@ -1,15 +1,6 @@
-import { useRef as o, useState as u, useEffect as l } from "react";
-const b = (t) => {
-  const e = o(null), [s, c] = u(!0), i = ([n]) => {
-    c(n.isIntersecting);
-  };
-  return l(() => {
-    const n = e.current, r = new IntersectionObserver(i, t);
-    return n && r.observe(e.current), () => {
-      n && r.disconnect();
-    };
-  }, [e, t]), [e, s];
-};
+import { once as n, PREFIX as r } from "./deprecations.js";
+import { useElementOnScreen as s } from "../hooks/useElementOnScreen.js";
+const t = n(console.warn), c = (...e) => (t(`${r} useElementOnScreen has moved. Please import it from "@strapi/design-system/hooks/useElementOnScreen"`), s(...e));
 export {
-  b as useElementOnScreen
+  c as useElementOnScreen
 };

package/dist/helpers/useId.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(t),r=n.default["useId".toString()]||(()=>{});let a=0;const d=e=>{const[u,o]=t.useState(r());return t.useLayoutEffect(()=>{e||o(s=>s??String(a++))},[e]),e?.toString()??(u||"")};exports.useId=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),o=require("../hooks/useId.cjs"),r=e.once(console.warn),t=(...s)=>(r(`${e.PREFIX} useId has moved. Please import it from "@strapi/design-system/hooks/useId"`),o.useId(...s));exports.useId=t;

package/dist/helpers/useId.js

@@ -1,13 +1,6 @@
-import s, { useState as n, useLayoutEffect as r } from "react";
-const c = s["useId".toString()] || (() => {
-});
-let d = 0;
-const S = (t) => {
-  const [e, o] = n(c());
-  return r(() => {
-    t || o((u) => u ?? String(d++));
-  }, [t]), t?.toString() ?? (e || "");
-};
+import { once as s, PREFIX as o } from "./deprecations.js";
+import { useId as r } from "../hooks/useId.js";
+const t = s(console.warn), n = (...e) => (t(`${o} useId has moved. Please import it from "@strapi/design-system/hooks/useId"`), r(...e));
 export {
-  S as useId
+  n as useId
 };

package/dist/helpers/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),t=require("../hooks/useIntersection.cjs"),n=e.once(console.warn),o=(...s)=>(n(`${e.PREFIX} useIntersection has moved. Please import it from "@strapi/design-system/hooks/useIntersection"`),t.useIntersection(...s));exports.useIntersection=o;

package/dist/helpers/useIntersection.js

@@ -1,23 +1,6 @@
-import { useEffect as m } from "react";
-import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
-const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
-  const e = p(s);
-  m(() => {
-    if (r)
-      return;
-    const u = {
-      root: t.current,
-      rootMargin: "0px"
-    }, f = (g) => {
-      g.forEach((i) => {
-        i.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(i);
-      });
-    }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
-    return c && o.observe(c), () => {
-      o.disconnect();
-    };
-  }, [r, e, n, t]);
-};
+import { once as s, PREFIX as t } from "./deprecations.js";
+import { useIntersection as o } from "../hooks/useIntersection.js";
+const n = s(console.warn), c = (...e) => (n(`${t} useIntersection has moved. Please import it from "@strapi/design-system/hooks/useIntersection"`), o(...e));
 export {
-  E as useIntersection
+  c as useIntersection
 };

package/dist/helpers/useLockScroll.cjs

@@ -1 +1 @@
-"use strict";const c=require("react"),e=s=>{c.useEffect(()=>(s&&document.body.classList.add("lock-body-scroll"),()=>{document.body.classList.remove("lock-body-scroll")}),[s])};module.exports=e;
+"use strict";const o=require("./deprecations.cjs"),s=require("../hooks/useLockScroll.cjs"),c=o.once(console.warn),r=(...e)=>(c(`${o.PREFIX} useLockScroll has moved. Please import it from "@strapi/design-system/hooks/useLockScroll"`),s(...e));module.exports=r;

package/dist/helpers/useLockScroll.js

@@ -1,9 +1,6 @@
-import { useEffect as s } from "react";
-const e = (o) => {
-  s(() => (o && document.body.classList.add("lock-body-scroll"), () => {
-    document.body.classList.remove("lock-body-scroll");
-  }), [o]);
-};
+import { once as e, PREFIX as r } from "./deprecations.js";
+import s from "../hooks/useLockScroll.js";
+const c = e(console.warn), a = (...o) => (c(`${r} useLockScroll has moved. Please import it from "@strapi/design-system/hooks/useLockScroll"`), s(...o));
 export {
-  e as default
+  a as default
 };

package/dist/helpers/usePrevious.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=t=>{const e=r.useRef();return r.useEffect(()=>{e.current=t}),e.current};exports.usePrevious=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),o=require("../hooks/usePrevious.cjs"),r=e.once(console.warn),u=(...s)=>(r(`${e.PREFIX} usePrevious has moved. Please import it from "@strapi/design-system/hooks/usePrevious"`),o.usePrevious(...s));exports.usePrevious=u;

package/dist/helpers/usePrevious.js

@@ -1,10 +1,6 @@
-import { useRef as t, useEffect as u } from "react";
-const s = (r) => {
-  const e = t();
-  return u(() => {
-    e.current = r;
-  }), e.current;
-};
+import { once as s, PREFIX as o } from "./deprecations.js";
+import { usePrevious as r } from "../hooks/usePrevious.js";
+const i = s(console.warn), m = (...e) => (i(`${o} usePrevious has moved. Please import it from "@strapi/design-system/hooks/usePrevious"`), r(...e));
 export {
-  s as usePrevious
+  m as usePrevious
 };

package/dist/helpers/useResizeObserver.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("@radix-ui/react-use-callback-ref"),n=(e,a)=>{const t=i.useCallbackRef(a);c.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(s=>{s.current&&r.observe(s.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./deprecations.cjs"),r=require("../hooks/useResizeObserver.cjs"),o=e.once(console.warn),i=(...s)=>(o(`${e.PREFIX} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`),r.useResizeObserver(...s));exports.useResizeObserver=i;

package/dist/helpers/useResizeObserver.js

@@ -1,16 +1,6 @@
-import { useLayoutEffect as f } from "react";
-import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
-const c = (e, i) => {
-  const t = s(i);
-  f(() => {
-    const r = new ResizeObserver(t);
-    return Array.isArray(e) ? e.forEach((n) => {
-      n.current && r.observe(n.current);
-    }) : e.current && r.observe(e.current), () => {
-      r.disconnect();
-    };
-  }, [e, t]);
-};
+import { once as s, PREFIX as r } from "./deprecations.js";
+import { useResizeObserver as o } from "../hooks/useResizeObserver.js";
+const i = s(console.warn), n = (...e) => (i(`${r} useResizeObserver has moved. Please import it from "@strapi/design-system/hooks/useResizeObserver"`), o(...e));
 export {
-  c as useResizeObserver
+  n as useResizeObserver
 };

package/dist/hooks/useElementOnScreen.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),o=r=>{const e=n.useRef(null),[c,u]=n.useState(!0),i=([t])=>{u(t.isIntersecting)};return n.useEffect(()=>{const t=e.current,s=new IntersectionObserver(i,r);return t&&s.observe(e.current),()=>{t&&s.disconnect()}},[e,r]),[e,c]};exports.useElementOnScreen=o;

package/dist/hooks/useElementOnScreen.js

@@ -0,0 +1,15 @@
+import { useRef as o, useState as u, useEffect as l } from "react";
+const b = (t) => {
+  const e = o(null), [s, c] = u(!0), i = ([n]) => {
+    c(n.isIntersecting);
+  };
+  return l(() => {
+    const n = e.current, r = new IntersectionObserver(i, t);
+    return n && r.observe(e.current), () => {
+      n && r.disconnect();
+    };
+  }, [e, t]), [e, s];
+};
+export {
+  b as useElementOnScreen
+};

package/dist/hooks/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r||!e.current)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t])};exports.useIntersection=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t,e])};exports.useIntersection=v;

package/dist/hooks/useIntersection.js

@@ -3,20 +3,20 @@ import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
 const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
   const e = p(s);
   m(() => {
-    if (r || !t.current)
+    if (r)
       return;
     const u = {
       root: t.current,
       rootMargin: "0px"
     }, f = (g) => {
       g.forEach((i) => {
-        i.isIntersecting && t.current && t.current.scrollHeight > t.current.clientHeight && e(i);
+        i.isIntersecting && t.current.scrollHeight > t.current.clientHeight && e(i);
       });
     }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
     return c && o.observe(c), () => {
       o.disconnect();
     };
-  }, [r, e, n]);
+  }, [r, e, n, t]);
 };
 export {
   E as useIntersection

package/dist/hooks/useLockScroll.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react"),e=s=>{c.useEffect(()=>(s&&document.body.classList.add("lock-body-scroll"),()=>{document.body.classList.remove("lock-body-scroll")}),[s])};module.exports=e;

package/dist/hooks/useLockScroll.js

@@ -0,0 +1,9 @@
+import { useEffect as s } from "react";
+const e = (o) => {
+  s(() => (o && document.body.classList.add("lock-body-scroll"), () => {
+    document.body.classList.remove("lock-body-scroll");
+  }), [o]);
+};
+export {
+  e as default
+};

package/dist/hooks/usePrevious.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=t=>{const e=r.useRef();return r.useEffect(()=>{e.current=t}),e.current};exports.usePrevious=u;

package/dist/hooks/usePrevious.js

@@ -0,0 +1,10 @@
+import { useRef as t, useEffect as u } from "react";
+const s = (r) => {
+  const e = t();
+  return u(() => {
+    e.current = r;
+  }), e.current;
+};
+export {
+  s as usePrevious
+};

package/dist/hooks/useResizeObserver.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),i=require("@radix-ui/react-use-callback-ref"),n=(e,a)=>{const t=i.useCallbackRef(a);c.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(s=>{s.current&&r.observe(s.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=n;

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,16 @@
+import { useLayoutEffect as f } from "react";
+import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
+const c = (e, i) => {
+  const t = s(i);
+  f(() => {
+    const r = new ResizeObserver(t);
+    return Array.isArray(e) ? e.forEach((n) => {
+      n.current && r.observe(n.current);
+    }) : e.current && r.observe(e.current), () => {
+      r.disconnect();
+    };
+  }, [e, t]);
+};
+export {
+  c as useResizeObserver
+};

package/dist/v2/MainNav/NavSection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),p=require("prop-types"),f=require("./MainNavContext.cjs"),u=require("../../Box/Box.cjs"),g=require("../../Divider/Divider.cjs"),a=require("../../Stack/Stack.cjs"),y=require("../../Typography/Typography.cjs"),m=require("../../VisuallyHidden/VisuallyHidden.cjs"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(i),c=s(p),o=({label:t,children:l,...d})=>f.useMainNav()?e.default.createElement(a.Stack,{spacing:2},e.default.createElement(u.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span"},e.default.createElement(g.Divider,null),e.default.createElement(m.VisuallyHidden,null,e.default.createElement("span",null,t))),e.default.createElement(a.Stack,{as:"ul",spacing:2,...d},i.Children.map(l,(n,r)=>e.default.createElement("li",{key:r},n)))):e.default.createElement(a.Stack,{spacing:2},e.default.createElement(u.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span"},e.default.createElement(y.Typography,{variant:"sigma",textColor:"neutral600"},t)),e.default.createElement(a.Stack,{as:"ul",spacing:2,...d},i.Children.map(l,(n,r)=>e.default.createElement("li",{key:r},n))));o.propTypes={children:c.default.node.isRequired,label:c.default.string.isRequired};exports.NavSection=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),g=require("prop-types"),f=require("./MainNavContext.cjs"),s=require("../../Box/Box.cjs"),y=require("../../Divider/Divider.cjs"),n=require("../../Flex/Flex.cjs"),x=require("../../Typography/Typography.cjs"),v=require("../../VisuallyHidden/VisuallyHidden.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(i),o=p(g),m=({label:t,children:d,horizontal:a=!1,spacing:u=2,...c})=>f.useMainNav()?e.default.createElement(n.Flex,{direction:"column",alignItems:"stretch",gap:2},e.default.createElement(s.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span"},e.default.createElement(y.Divider,null),e.default.createElement(v.VisuallyHidden,null,e.default.createElement("span",null,t))),e.default.createElement(n.Flex,{as:"ul",gap:u,direction:a?"row":"column",alignItems:a?"center":"stretch",...c},i.Children.map(d,(r,l)=>e.default.createElement("li",{key:l},r)))):e.default.createElement(n.Flex,{direction:"column",alignItems:"stretch",gap:2},e.default.createElement(s.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span"},e.default.createElement(x.Typography,{variant:"sigma",textColor:"neutral600"},t)),e.default.createElement(n.Flex,{as:"ul",gap:u,direction:a?"row":"column",alignItems:a?"center":"stretch",...c},i.Children.map(d,(r,l)=>e.default.createElement("li",{key:l},r))));m.propTypes={children:o.default.node.isRequired,label:o.default.string.isRequired};exports.NavSection=m;

package/dist/v2/MainNav/NavSection.js

@@ -1,16 +1,36 @@
-import e, { Children as m } from "react";
-import p from "prop-types";
-import { useMainNav as d } from "./MainNavContext.js";
-import { Box as l } from "../../Box/Box.js";
-import { Divider as s } from "../../Divider/Divider.js";
-import { Stack as t } from "../../Stack/Stack.js";
-import { Typography as c } from "../../Typography/Typography.js";
-import { VisuallyHidden as u } from "../../VisuallyHidden/VisuallyHidden.js";
-const g = ({ label: n, children: i, ...o }) => d() ? /* @__PURE__ */ e.createElement(t, { spacing: 2 }, /* @__PURE__ */ e.createElement(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(s, null), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("span", null, n))), /* @__PURE__ */ e.createElement(t, { as: "ul", spacing: 2, ...o }, m.map(i, (r, a) => /* @__PURE__ */ e.createElement("li", { key: a }, r)))) : /* @__PURE__ */ e.createElement(t, { spacing: 2 }, /* @__PURE__ */ e.createElement(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(c, { variant: "sigma", textColor: "neutral600" }, n)), /* @__PURE__ */ e.createElement(t, { as: "ul", spacing: 2, ...o }, m.map(i, (r, a) => /* @__PURE__ */ e.createElement("li", { key: a }, r))));
-g.propTypes = {
-  children: p.node.isRequired,
-  label: p.string.isRequired
+import e, { Children as c } from "react";
+import d from "prop-types";
+import { useMainNav as s } from "./MainNavContext.js";
+import { Box as p } from "../../Box/Box.js";
+import { Divider as u } from "../../Divider/Divider.js";
+import { Flex as r } from "../../Flex/Flex.js";
+import { Typography as g } from "../../Typography/Typography.js";
+import { VisuallyHidden as f } from "../../VisuallyHidden/VisuallyHidden.js";
+const E = ({ label: i, children: m, horizontal: t = !1, spacing: o = 2, ...l }) => s() ? /* @__PURE__ */ e.createElement(r, { direction: "column", alignItems: "stretch", gap: 2 }, /* @__PURE__ */ e.createElement(p, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(u, null), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("span", null, i))), /* @__PURE__ */ e.createElement(
+  r,
+  {
+    as: "ul",
+    gap: o,
+    direction: t ? "row" : "column",
+    alignItems: t ? "center" : "stretch",
+    ...l
+  },
+  c.map(m, (n, a) => /* @__PURE__ */ e.createElement("li", { key: a }, n))
+)) : /* @__PURE__ */ e.createElement(r, { direction: "column", alignItems: "stretch", gap: 2 }, /* @__PURE__ */ e.createElement(p, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(g, { variant: "sigma", textColor: "neutral600" }, i)), /* @__PURE__ */ e.createElement(
+  r,
+  {
+    as: "ul",
+    gap: o,
+    direction: t ? "row" : "column",
+    alignItems: t ? "center" : "stretch",
+    ...l
+  },
+  c.map(m, (n, a) => /* @__PURE__ */ e.createElement("li", { key: a }, n))
+));
+E.propTypes = {
+  children: d.node.isRequired,
+  label: d.string.isRequired
 };
 export {
-  g as NavSection
+  E as NavSection
 };

package/dist/v2/MainNav/NavSections.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),l=require("styled-components"),u=require("../../Box/Box.cjs"),i=require("../../Stack/Stack.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(a),p=o(d),f=o(l),y=f.default(u.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),u=require("prop-types"),i=require("styled-components"),p=require("../../Box/Box.cjs"),f=require("../../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(l),y=o(u),g=o(i),x=g.default(p.Box)`
   flex-grow: 1;
   overflow-y: auto;
-`,r=({children:e,...c})=>t.default.createElement(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8},t.default.createElement(i.Stack,{as:"ul",spacing:4,...c},a.Children.map(e,(n,s)=>t.default.createElement("li",{key:s},n))));r.propTypes={children:p.default.node.isRequired};exports.NavSections=r;
+`,n=({children:e,spacing:a=4,horizontal:r=!1,...s})=>t.default.createElement(x,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8},t.default.createElement(f.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...s},l.Children.map(e,(c,d)=>t.default.createElement("li",{key:d},c))));n.propTypes={children:y.default.node.isRequired};exports.NavSections=n;

package/dist/v2/MainNav/NavSections.js

@@ -1,15 +1,25 @@
-import e, { Children as i } from "react";
-import n from "prop-types";
-import a from "styled-components";
-import { Box as m } from "../../Box/Box.js";
-import { Stack as d } from "../../Stack/Stack.js";
-const l = a(m)`
+import e, { Children as m } from "react";
+import a from "prop-types";
+import d from "styled-components";
+import { Box as l } from "../../Box/Box.js";
+import { Flex as c } from "../../Flex/Flex.js";
+const s = d(l)`
   flex-grow: 1;
   overflow-y: auto;
-`, c = ({ children: o, ...r }) => /* @__PURE__ */ e.createElement(l, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8 }, /* @__PURE__ */ e.createElement(d, { as: "ul", spacing: 4, ...r }, i.map(o, (t, p) => /* @__PURE__ */ e.createElement("li", { key: p }, t))));
-c.propTypes = {
-  children: n.node.isRequired
+`, f = ({ children: t, spacing: o = 4, horizontal: r = !1, ...i }) => /* @__PURE__ */ e.createElement(s, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8 }, /* @__PURE__ */ e.createElement(
+  c,
+  {
+    as: "ul",
+    gap: o,
+    direction: r ? "row" : "column",
+    alignItems: r ? "center" : "stretch",
+    ...i
+  },
+  m.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
+));
+f.propTypes = {
+  children: a.node.isRequired
 };
 export {
-  c as NavSections
+  f as NavSections
 };