@strapi/design-system 1.8.0 → 1.8.2

package/dist/SubNav/SubNavLink.cjs

@@ -1,22 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const g=require("@strapi/icons"),y=require("prop-types"),x=require("react-router-dom"),h=require("styled-components"),i=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),n=require("../Flex/Flex.cjs"),c=e=>e&&e.__esModule?e:{default:e},t=c(y),s=c(h),b=s.default(i.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("@strapi/icons"),p=require("react-router-dom"),g=require("styled-components"),t=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),i=require("../Flex/Flex.cjs"),f=r=>r&&r.__esModule?r:{default:r},s=f(g),x=s.default(t.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({theme:e})=>e.colors.neutral800};
+  color: ${({theme:r})=>r.colors.neutral800};
   svg > * {
-    fill: ${({theme:e})=>e.colors.neutral600};
+    fill: ${({theme:r})=>r.colors.neutral600};
   }
 
   &.active {
-    ${({theme:e})=>`
-      background-color: ${e.colors.primary100};
-      border-right: 2px solid ${e.colors.primary600};
+    ${({theme:r})=>`
+      background-color: ${r.colors.primary100};
+      border-right: 2px solid ${r.colors.primary600};
       svg > * {
-        fill: ${e.colors.primary700};
+        fill: ${r.colors.primary700};
       }
-      ${u.Typography} {
-        color: ${e.colors.primary700};
+      ${n.Typography} {
+        color: ${r.colors.primary700};
         font-weight: 500;
       }
       `}
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,a=s.default(g.Dot)`
+`,l=s.default(d.Dot)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
-    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
+    fill: ${({theme:r,$active:o})=>o?r.colors.primary600:r.colors.neutral600};
   }
-`,$=s.default.div`
+`,y=s.default.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,l=({children:e,icon:o,withBullet:d,isSubSectionChild:p,...f})=>r.jsxs(b,{as:x.NavLink,icon:o,background:"neutral100",paddingLeft:p?9:7,paddingBottom:2,paddingTop:2,...f,children:[r.jsxs(n.Flex,{children:[o?r.jsx($,{children:o}):r.jsx(a,{}),r.jsx(i.Box,{paddingLeft:2,children:r.jsx(u.Typography,{as:"span",children:e})})]}),d&&r.jsx(i.Box,{as:n.Flex,paddingRight:4,children:r.jsx(a,{$active:!0})})]});l.displayName="SubNavLink";l.defaultProps={icon:null,isSubSectionChild:!1,withBullet:!1};l.propTypes={children:t.default.node.isRequired,icon:t.default.element,isSubSectionChild:t.default.bool,withBullet:t.default.bool};exports.SubNavLink=l;
+`,h=({children:r,icon:o,withBullet:a=!1,isSubSectionChild:c=!1,...u})=>e.jsxs(x,{as:p.NavLink,icon:o,background:"neutral100",paddingLeft:c?9:7,paddingBottom:2,paddingTop:2,...u,children:[e.jsxs(i.Flex,{children:[o?e.jsx(y,{children:o}):e.jsx(l,{}),e.jsx(t.Box,{paddingLeft:2,children:e.jsx(n.Typography,{as:"span",children:r})})]}),a&&e.jsx(t.Box,{as:i.Flex,paddingRight:4,children:e.jsx(l,{$active:!0})})]});exports.SubNavLink=h;

package/dist/SubNav/SubNavLink.js

@@ -1,31 +1,29 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import "react";
-import { Dot as f } from "@strapi/icons";
-import e from "prop-types";
-import { NavLink as g } from "react-router-dom";
-import l from "styled-components";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { Dot as m } from "@strapi/icons";
+import { NavLink as f } from "react-router-dom";
+import e from "styled-components";
 import { Box as t } from "../Box/Box.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { Flex as p } from "../Flex/Flex.js";
-const h = l(t)`
+import { Typography as s } from "../Typography/Typography.js";
+import { Flex as n } from "../Flex/Flex.js";
+const g = e(t)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({ theme: o }) => o.colors.neutral800};
+  color: ${({ theme: r }) => r.colors.neutral800};
   svg > * {
-    fill: ${({ theme: o }) => o.colors.neutral600};
+    fill: ${({ theme: r }) => r.colors.neutral600};
   }
 
   &.active {
-    ${({ theme: o }) => `
-      background-color: ${o.colors.primary100};
-      border-right: 2px solid ${o.colors.primary600};
+    ${({ theme: r }) => `
+      background-color: ${r.colors.primary100};
+      border-right: 2px solid ${r.colors.primary600};
       svg > * {
-        fill: ${o.colors.primary700};
+        fill: ${r.colors.primary700};
       }
-      ${c} {
-        color: ${o.colors.primary700};
+      ${s} {
+        color: ${r.colors.primary700};
         font-weight: 500;
       }
       `}
@@ -34,48 +32,18 @@ const h = l(t)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, a = l(f)`
+`, a = e(m)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: o, $active: i }) => i ? o.colors.primary600 : o.colors.neutral600};
+    fill: ${({ theme: r, $active: i }) => i ? r.colors.primary600 : r.colors.neutral600};
   }
-`, $ = l.div`
+`, u = e.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, n = ({ children: o, icon: i, withBullet: d, isSubSectionChild: m, ...u }) => /* @__PURE__ */ s(
-  h,
-  {
-    as: g,
-    icon: i,
-    background: "neutral100",
-    paddingLeft: m ? 9 : 7,
-    paddingBottom: 2,
-    paddingTop: 2,
-    ...u,
-    children: [
-      /* @__PURE__ */ s(p, { children: [
-        i ? /* @__PURE__ */ r($, { children: i }) : /* @__PURE__ */ r(a, {}),
-        /* @__PURE__ */ r(t, { paddingLeft: 2, children: /* @__PURE__ */ r(c, { as: "span", children: o }) })
-      ] }),
-      d && /* @__PURE__ */ r(t, { as: p, paddingRight: 4, children: /* @__PURE__ */ r(a, { $active: !0 }) })
-    ]
-  }
-);
-n.displayName = "SubNavLink";
-n.defaultProps = {
-  icon: null,
-  isSubSectionChild: !1,
-  withBullet: !1
-};
-n.propTypes = {
-  children: e.node.isRequired,
-  icon: e.element,
-  isSubSectionChild: e.bool,
-  withBullet: e.bool
-};
+`, L = ({ children: r, icon: i, withBullet: c = !1, isSubSectionChild: p = !1, ...d }) => l(g, { as: f, icon: i, background: "neutral100", paddingLeft: p ? 9 : 7, paddingBottom: 2, paddingTop: 2, ...d, children: [l(n, { children: [i ? o(u, { children: i }) : o(a, {}), o(t, { paddingLeft: 2, children: o(s, { as: "span", children: r }) })] }), c && o(t, { as: n, paddingRight: 4, children: o(a, { $active: !0 }) })] });
 export {
-  n as SubNavLink
+  L as SubNavLink
 };

package/dist/SubNav/SubNavLinkSection.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),f=require("@strapi/icons"),y=require("prop-types"),j=require("styled-components"),b=require("../hooks/useId.cjs"),o=require("../Box/Box.cjs"),S=require("../Flex/Flex.cjs"),m=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},i=c(y),s=c(j),q=s.default(o.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),h=require("react"),g=require("@strapi/icons"),f=require("styled-components"),j=require("../hooks/useId.cjs"),i=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),S=require("../Typography/Typography.cjs"),d=e=>e&&e.__esModule?e:{default:e},a=d(h),o=d(f),b=o.default(i.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,v=s.default.button`
+`,m=o.default.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`,k=s.default.div`
+`,k=o.default.div`
   display: flex;
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,d=({label:e,children:u,id:p})=>{const[n,h]=l.useState(!0),a=b.useId(p),g=()=>{h(r=>!r)};return t.jsxs(o.Box,{children:[t.jsx(q,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsx(S.Flex,{justifyContent:"space-between",children:t.jsxs(v,{onClick:g,"aria-expanded":n,"aria-controls":a,children:[t.jsx(k,{rotated:n,children:t.jsx(f.CarretDown,{"aria-hidden":!0})}),t.jsx(o.Box,{paddingLeft:2,children:t.jsx(m.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800",children:e})})]})})}),n&&t.jsx("ul",{id:a,children:l.Children.map(u,(r,x)=>t.jsx("li",{children:r},x))})]})};d.defaultProps={children:void 0,id:void 0};d.propTypes={children:i.default.node,id:i.default.string,label:i.default.string.isRequired};exports.SubNavLinkSection=d;
+`,q=({label:e,children:l,id:c})=>{const[n,u]=a.default.useState(!0),s=j.useId(c),p=()=>{u(r=>!r)};return t.jsxs(i.Box,{children:[t.jsx(b,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsx(y.Flex,{justifyContent:"space-between",children:t.jsxs(m,{onClick:p,"aria-expanded":n,"aria-controls":s,children:[t.jsx(k,{rotated:n,children:t.jsx(g.CarretDown,{"aria-hidden":!0})}),t.jsx(i.Box,{paddingLeft:2,children:t.jsx(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800",children:e})})]})})}),n&&t.jsx("ul",{id:s,children:a.default.Children.map(l,(r,x)=>t.jsx("li",{children:r},x))})]})};exports.SubNavLinkSection=q;

package/dist/SubNav/SubNavLinkSection.js

@@ -1,51 +1,35 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { useState as f, Children as g } from "react";
-import { CarretDown as u } from "@strapi/icons";
-import t from "prop-types";
-import d from "styled-components";
-import { useId as x } from "../hooks/useId.js";
-import { Box as o } from "../Box/Box.js";
-import { Flex as b } from "../Flex/Flex.js";
-import { Typography as k } from "../Typography/Typography.js";
-const y = d(o)`
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { CarretDown as h } from "@strapi/icons";
+import o from "styled-components";
+import { useId as f } from "../hooks/useId.js";
+import { Box as i } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Typography as g } from "../Typography/Typography.js";
+const x = o(i)`
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: r }) => r.colors.neutral700};
+      fill: ${({ theme: t }) => t.colors.neutral700};
     }
   }
-`, v = d.button`
+`, k = o.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`, C = d.div`
+`, b = o.div`
   display: flex;
   align-items: center;
   width: ${12 / 16}rem;
-  transform: rotateX(${({ rotated: r }) => r ? "0deg" : "180deg"});
-`, l = ({ label: r, children: s, id: c }) => {
-  const [i, m] = f(!0), a = x(c);
-  return /* @__PURE__ */ p(o, { children: [
-    /* @__PURE__ */ e(y, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ e(b, { justifyContent: "space-between", children: /* @__PURE__ */ p(v, { onClick: () => {
-      m((n) => !n);
-    }, "aria-expanded": i, "aria-controls": a, children: [
-      /* @__PURE__ */ e(C, { rotated: i, children: /* @__PURE__ */ e(u, { "aria-hidden": !0 }) }),
-      /* @__PURE__ */ e(o, { paddingLeft: 2, children: /* @__PURE__ */ e(k, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: r }) })
-    ] }) }) }),
-    i && /* @__PURE__ */ e("ul", { id: a, children: g.map(s, (n, h) => /* @__PURE__ */ e("li", { children: n }, h)) })
-  ] });
-};
-l.defaultProps = {
-  children: void 0,
-  id: void 0
-};
-l.propTypes = {
-  children: t.node,
-  id: t.string,
-  label: t.string.isRequired
+  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
+`, D = ({ label: t, children: p, id: s }) => {
+  const [n, c] = l.useState(!0), d = f(s);
+  return a(i, { children: [e(x, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: e(u, { justifyContent: "space-between", children: a(k, { onClick: () => {
+    c((r) => !r);
+  }, "aria-expanded": n, "aria-controls": d, children: [e(b, { rotated: n, children: e(h, { "aria-hidden": !0 }) }), e(i, { paddingLeft: 2, children: e(g, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: t }) })] }) }) }), n && e("ul", { id: d, children: l.Children.map(p, (r, m) => e("li", { children: r }, m)) })] });
 };
 export {
-  l as SubNavLinkSection
+  D as SubNavLinkSection
 };

package/dist/SubNav/SubNavSection.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),b=require("prop-types"),S=require("styled-components"),q=require("./SubNavSectionLabel.cjs"),v=require("../hooks/useId.cjs"),d=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),m=require("../Badge/Badge.cjs"),u=e=>e&&e.__esModule?e:{default:e},n=u(b),y=u(S),_=y.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),S=require("styled-components"),f=require("./SubNavSectionLabel.cjs"),j=require("../hooks/useId.cjs"),l=require("../Box/Box.cjs"),b=require("../Flex/Flex.cjs"),m=require("../Badge/Badge.cjs"),a=e=>e&&e.__esModule?e:{default:e},s=a(x),q=a(S),v=q.default(l.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,o=({collapsable:e,label:c,badgeLabel:r,children:p,id:g})=>{const[l,h]=a.useState(!0),s=v.useId(g),f=()=>{h(i=>!i)};return t.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(_,{paddingLeft:6,paddingTop:1,paddingBottom:1,paddingRight:4,children:t.jsxs(d.Box,{position:"relative",paddingRight:r?6:0,children:[t.jsx(q.SubNavSectionLabel,{onClick:f,ariaExpanded:l,ariaControls:s,collapsable:e,label:c}),r&&t.jsx(m.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:r})]})}),(!e||l)&&t.jsx("ol",{id:s,children:a.Children.map(p,(i,x)=>t.jsx("li",{children:i},x))})]})};o.defaultProps={badgeLabel:null,children:void 0,collapsable:!1,id:void 0};o.propTypes={badgeLabel:n.default.string,children:n.default.node,collapsable:n.default.bool,id:n.default.string,label:n.default.string.isRequired};exports.SubNavSection=o;
+`,_=({collapsable:e=!1,label:c,badgeLabel:n,children:d,id:u})=>{const[r,p]=s.default.useState(!0),i=j.useId(u),g=()=>{p(o=>!o)};return t.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(v,{paddingLeft:6,paddingTop:1,paddingBottom:1,paddingRight:4,children:t.jsxs(l.Box,{position:"relative",paddingRight:n?6:0,children:[t.jsx(f.SubNavSectionLabel,{onClick:g,ariaExpanded:r,ariaControls:i,collapsable:e,label:c}),n&&t.jsx(m.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:n})]})}),(!e||r)&&t.jsx("ol",{id:i,children:s.default.Children.map(d,(o,h)=>t.jsx("li",{children:o},h))})]})};exports.SubNavSection=_;

package/dist/SubNav/SubNavSection.js

@@ -1,64 +1,24 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { useState as u, Children as f } from "react";
-import r from "prop-types";
-import b from "styled-components";
-import { SubNavSectionLabel as v } from "./SubNavSectionLabel.js";
-import { useId as x } from "../hooks/useId.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import a from "react";
+import u from "styled-components";
+import { SubNavSectionLabel as f } from "./SubNavSectionLabel.js";
+import { useId as g } from "../hooks/useId.js";
 import { Box as d } from "../Box/Box.js";
-import { Flex as C } from "../Flex/Flex.js";
-import { Badge as S } from "../Badge/Badge.js";
-const k = b(d)`
+import { Flex as x } from "../Flex/Flex.js";
+import { Badge as C } from "../Badge/Badge.js";
+const S = u(d)`
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: i }) => i.colors.neutral500};
+      fill: ${({ theme: o }) => o.colors.neutral500};
     }
   }
-`, p = ({ collapsable: i, label: s, badgeLabel: t, children: c, id: m }) => {
-  const [n, h] = u(!0), l = x(m);
-  return /* @__PURE__ */ a(C, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ o(k, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ a(d, { position: "relative", paddingRight: t ? 6 : 0, children: [
-      /* @__PURE__ */ o(
-        v,
-        {
-          onClick: () => {
-            h((e) => !e);
-          },
-          ariaExpanded: n,
-          ariaControls: l,
-          collapsable: i,
-          label: s
-        }
-      ),
-      t && /* @__PURE__ */ o(
-        S,
-        {
-          backgroundColor: "neutral150",
-          textColor: "neutral600",
-          position: "absolute",
-          right: 0,
-          top: "50%",
-          transform: "translateY(-50%)",
-          children: t
-        }
-      )
-    ] }) }),
-    (!i || n) && /* @__PURE__ */ o("ol", { id: l, children: f.map(c, (e, g) => /* @__PURE__ */ o("li", { children: e }, g)) })
-  ] });
-};
-p.defaultProps = {
-  badgeLabel: null,
-  children: void 0,
-  collapsable: !1,
-  id: void 0
-};
-p.propTypes = {
-  badgeLabel: r.string,
-  children: r.node,
-  collapsable: r.bool,
-  id: r.string,
-  label: r.string.isRequired
+`, _ = ({ collapsable: o = !1, label: p, badgeLabel: r, children: s, id: c }) => {
+  const [e, m] = a.useState(!0), n = g(c);
+  return l(x, { direction: "column", alignItems: "stretch", gap: 1, children: [t(S, { paddingLeft: 6, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: l(d, { position: "relative", paddingRight: r ? 6 : 0, children: [t(f, { onClick: () => {
+    m((i) => !i);
+  }, ariaExpanded: e, ariaControls: n, collapsable: o, label: p }), r && t(C, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: r })] }) }), (!o || e) && t("ol", { id: n, children: a.Children.map(s, (i, h) => t("li", { children: i }, h)) })] });
 };
 export {
-  p as SubNavSection
+  _ as SubNavSection
 };

package/dist/SubNav/SubNavSectionLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const x=require("@strapi/icons"),f=require("prop-types"),g=require("styled-components"),b=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),i=require("../Typography/Typography.cjs"),d=e=>e&&e.__esModule?e:{default:e},t=d(f),u=d(g),s=u.default(b.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("@strapi/icons"),u=require("styled-components"),x=require("../Flex/Flex.cjs"),o=require("../Box/Box.cjs"),a=require("../Typography/Typography.cjs"),g=e=>e&&e.__esModule?e:{default:e},s=g(u),i=s.default(x.Flex)`
   border: none;
   padding: 0;
   background: transparent;
-`,y=u.default.div`
+`,p=s.default.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,a=({collapsable:e,label:n,onClick:c,ariaExpanded:o,ariaControls:p})=>e?r.jsxs(s,{as:"button",onClick:c,"aria-expanded":o,"aria-controls":p,textAlign:"left",children:[r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e&&r.jsx(y,{rotated:o,children:r.jsx(x.CarretDown,{"aria-hidden":!0})})]}):r.jsx(s,{children:r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})})});a.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};a.propTypes={ariaControls:t.default.string,ariaExpanded:t.default.bool,collapsable:t.default.bool,label:t.default.string.isRequired,onClick:t.default.func};exports.SubNavSectionLabel=a;
+`,h=({collapsable:e=!1,label:t,onClick:d=()=>{},ariaExpanded:n,ariaControls:l})=>e?r.jsxs(i,{as:"button",onClick:d,"aria-expanded":n,"aria-controls":l,textAlign:"left",children:[r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),e&&r.jsx(p,{rotated:n,children:r.jsx(c.CarretDown,{"aria-hidden":!0})})]}):r.jsx(i,{children:r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})})});exports.SubNavSectionLabel=h;

package/dist/SubNav/SubNavSectionLabel.js

@@ -1,47 +1,19 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import "react";
-import { CarretDown as g } from "@strapi/icons";
-import o from "prop-types";
-import p from "styled-components";
-import { Flex as f } from "../Flex/Flex.js";
-import { Box as a } from "../Box/Box.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { CarretDown as m } from "@strapi/icons";
+import d from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+import { Box as o } from "../Box/Box.js";
 import { Typography as i } from "../Typography/Typography.js";
-const l = p(f)`
+const a = d(s)`
   border: none;
   padding: 0;
   background: transparent;
-`, u = p.div`
+`, g = d.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, d = ({ collapsable: t, label: e, onClick: s, ariaExpanded: n, ariaControls: c }) => t ? /* @__PURE__ */ m(
-  l,
-  {
-    as: "button",
-    onClick: s,
-    "aria-expanded": n,
-    "aria-controls": c,
-    textAlign: "left",
-    children: [
-      /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }),
-      t && /* @__PURE__ */ r(u, { rotated: n, children: /* @__PURE__ */ r(g, { "aria-hidden": !0 }) })
-    ]
-  }
-) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
-d.defaultProps = {
-  ariaControls: null,
-  ariaExpanded: null,
-  collapsable: !1,
-  onClick() {
-  }
-};
-d.propTypes = {
-  ariaControls: o.string,
-  ariaExpanded: o.bool,
-  collapsable: o.bool,
-  label: o.string.isRequired,
-  onClick: o.func
-};
+`, y = ({ collapsable: t = !1, label: e, onClick: l = () => {
+}, ariaExpanded: n, ariaControls: p }) => t ? c(a, { as: "button", onClick: l, "aria-expanded": n, "aria-controls": p, textAlign: "left", children: [r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }), t && r(g, { rotated: n, children: r(m, { "aria-hidden": !0 }) })] }) : r(a, { children: r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
 export {
-  d as SubNavSectionLabel
+  y as SubNavSectionLabel
 };

package/dist/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("react"),l=require("prop-types"),d=require("../Box/Box.cjs"),a=require("../Flex/Flex.cjs"),p=e=>e&&e.__esModule?e:{default:e},x=p(l),n=({children:e,spacing:o=2,horizontal:t=!1,...s})=>r.jsx(d.Box,{paddingTop:2,paddingBottom:4,children:r.jsx(a.Flex,{as:"ol",gap:o,direction:t?"row":"column",alignItems:t?"center":"stretch",...s,children:u.Children.map(e,(i,c)=>r.jsx("li",{children:i},c))})});n.propTypes={children:x.default.node.isRequired};exports.SubNavSections=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),l=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},d=a(s),x=({children:e,spacing:r=2,horizontal:n=!1,...o})=>t.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:t.jsx(u.Flex,{as:"ol",gap:r,direction:n?"row":"column",alignItems:n?"center":"stretch",...o,children:d.default.Children.map(e,(c,i)=>t.jsx("li",{children:c},i))})});exports.SubNavSections=x;

package/dist/SubNav/SubNavSections.js

@@ -1,22 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Children as m } from "react";
-import d from "prop-types";
-import { Box as c } from "../Box/Box.js";
+import c from "react";
+import { Box as d } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
-const s = ({ children: e, spacing: i = 2, horizontal: o = !1, ...p }) => /* @__PURE__ */ r(c, { paddingTop: 2, paddingBottom: 4, children: /* @__PURE__ */ r(
-  l,
-  {
-    as: "ol",
-    gap: i,
-    direction: o ? "row" : "column",
-    alignItems: o ? "center" : "stretch",
-    ...p,
-    children: m.map(e, (t, n) => /* @__PURE__ */ r("li", { children: t }, n))
-  }
-) });
-s.propTypes = {
-  children: d.node.isRequired
-};
+const u = ({ children: o, spacing: t = 2, horizontal: e = !1, ...i }) => r(d, { paddingTop: 2, paddingBottom: 4, children: r(l, { as: "ol", gap: t, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...i, children: c.Children.map(o, (n, m) => r("li", { children: n }, m)) }) });
 export {
-  s as SubNavSections
+  u as SubNavSections
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -1,6 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("styled-components"),p=require("../hooks/useId.cjs"),m=require("../ToggleCheckbox/ToggleCheckbox.cjs"),T=require("../Field/Field.cjs"),I=require("../TextButton/TextButton.cjs"),o=require("../Flex/Flex.cjs"),y=require("../Field/FieldLabel.cjs"),_=require("../Field/FieldHint.cjs"),b=require("../Field/FieldError.cjs"),k=t=>t&&t.__esModule?t:{default:t},d=k(j),B=d.default(T.Field)`
-  max-width: 320px;
-`,C=d.default(I.TextButton)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("styled-components"),m=require("../hooks/useControllableState.cjs"),C=require("../hooks/useId.cjs"),d=require("../Flex/Flex.cjs"),k=require("../themes/utils.cjs"),w=require("../TextButton/TextButton.cjs"),I=require("../Field/Field.cjs"),$=require("../Field/FieldLabel.cjs"),S=require("../Field/FieldHint.cjs"),B=require("../Field/FieldError.cjs"),v=require("../Field/FieldContext.cjs"),j=require("../Typography/Typography.cjs"),R=r=>r&&r.__esModule?r:{default:r},c=R(b),W=({offLabel:r,onLabel:p,disabled:e,checked:a,onChange:h,size:l="M",...g})=>{const[n=!1,u]=m.useControllableState({prop:a}),{error:s,id:o,name:x,required:f}=v.useField(),i=n!==null&&!n,q=`${o}-hint`,T=`${o}-error`;return t.jsxs(_,{position:"relative",hasRadius:!0,padding:1,background:e?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",wrap:"wrap",cursor:e?"not-allowed":"pointer",hasError:!!s,children:[t.jsx(F,{hasRadius:!0,flex:"1 1 50%",paddingTop:2,paddingBottom:2,paddingLeft:3,paddingRight:3,justifyContent:"center",background:e&&i?"neutral200":i?"neutral0":"transparent",borderColor:e&&i?"neutral300":i?"neutral200":e?"neutral150":"neutral100",size:l,children:t.jsx(j.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:e?"neutral700":i?"danger700":"neutral600",children:r})}),t.jsx(F,{hasRadius:!0,flex:"1 1 50%",paddingLeft:3,paddingRight:3,justifyContent:"center",background:e&&n?"neutral200":n?"neutral0":"transparent",borderColor:e&&n?"neutral300":n?"neutral200":e?"neutral150":"neutral100",size:l,children:t.jsx(j.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:e?"neutral700":n?"primary600":"neutral600",children:p})}),t.jsx(E,{...g,onChange:y=>{u(y.currentTarget.checked),h?.(y)},type:"checkbox",id:o,name:x,"aria-required":f,disabled:e,"aria-disabled":e,"aria-describedby":o?`${q} ${T}`:void 0,checked:!!n})]})},_=c.default(d.Flex)`
+  ${k.inputFocusStyle()}
+`,F=c.default(d.Flex)`
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({size:r})=>`${r==="S"?"2px":"6px"}`};
+  padding-bottom: ${({size:r})=>`${r==="S"?"2px":"6px"}`};
+`,E=c.default.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+`,L=({disabled:r=!1,error:p,hint:e,label:a,name:h,labelAction:l,required:g=!1,id:n,onClear:u,clearLabel:s,checked:o,...x})=>{const f=C.useId(n);return t.jsx(I.Field,{name:h,hint:e,error:p,id:f,required:g,maxWidth:"320px",children:t.jsxs(d.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(d.Flex,{children:[a?t.jsx($.FieldLabel,{action:l,children:a}):null,s&&u&&o!==null&&!r&&t.jsx(M,{onClick:u,children:s})]}),t.jsx(W,{checked:o,disabled:r,...x}),t.jsx(S.FieldHint,{}),t.jsx(B.FieldError,{})]})})},M=c.default(w.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,u=({disabled:t=!1,size:c="M",error:a,hint:x,label:r,name:g,labelAction:f,required:F=!1,id:h,onClear:i,clearLabel:n,checked:l=!1,...q})=>{const s=p.useId(h);return e.jsx(B,{name:g,hint:x,error:a,id:s,required:F,children:e.jsxs(o.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsxs(o.Flex,{children:[e.jsx(y.FieldLabel,{action:f,children:r}),n&&i&&l!==null&&!t&&e.jsx(C,{onClick:i,children:n})]}),e.jsx(m.ToggleCheckbox,{id:s,size:c,checked:l,disabled:t,...q,children:r}),e.jsx(_.FieldHint,{}),e.jsx(b.FieldError,{})]})})};u.displayName="ToggleInput";exports.ToggleInput=u;
+`;exports.ToggleInput=L;

package/dist/ToggleInput/ToggleInput.js

@@ -1,23 +1,48 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import p from "styled-components";
-import { useId as F } from "../hooks/useId.js";
-import { ToggleCheckbox as I } from "../ToggleCheckbox/ToggleCheckbox.js";
-import { Field as T } from "../Field/Field.js";
-import { TextButton as j } from "../TextButton/TextButton.js";
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import c from "styled-components";
+import { useControllableState as T } from "../hooks/useControllableState.js";
+import { useId as I } from "../hooks/useId.js";
 import { Flex as d } from "../Flex/Flex.js";
-import { FieldLabel as k } from "../Field/FieldLabel.js";
-import { FieldHint as y } from "../Field/FieldHint.js";
-import { FieldError as B } from "../Field/FieldError.js";
-const C = p(T)`
-  max-width: 320px;
-`, q = p(j)`
+import { inputFocusStyle as $ } from "../themes/utils.js";
+import { TextButton as F } from "../TextButton/TextButton.js";
+import { Field as B } from "../Field/Field.js";
+import { FieldLabel as W } from "../Field/FieldLabel.js";
+import { FieldHint as v } from "../Field/FieldHint.js";
+import { FieldError as R } from "../Field/FieldError.js";
+import { useField as S } from "../Field/FieldContext.js";
+import { Typography as y } from "../Typography/Typography.js";
+const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size: l = "M", ...m }) => {
+  const [t = !1, p] = T({
+    prop: a
+  }), { error: u, id: o, name: g, required: f } = S(), i = t !== null && !t, w = `${o}-hint`, b = `${o}-error`;
+  return x(q, { position: "relative", hasRadius: !0, padding: 1, background: e ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: e ? "not-allowed" : "pointer", hasError: !!u, children: [r(C, { hasRadius: !0, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && i ? "neutral200" : i ? "neutral0" : "transparent", borderColor: e && i ? "neutral300" : i ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : i ? "danger700" : "neutral600", children: n }) }), r(C, { hasRadius: !0, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && t ? "neutral200" : t ? "neutral0" : "transparent", borderColor: e && t ? "neutral300" : t ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : t ? "primary600" : "neutral600", children: h }) }), r(z, { ...m, onChange: (k) => {
+    p(k.currentTarget.checked), s?.(k);
+  }, type: "checkbox", id: o, name: g, "aria-required": f, disabled: e, "aria-disabled": e, "aria-describedby": o ? `${w} ${b}` : void 0, checked: !!t })] });
+}, q = c(d)`
+  ${$()}
+`, C = c(d)`
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
+  padding-bottom: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
+`, z = c.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+`, V = ({ disabled: n = !1, error: h, hint: e, label: a, name: s, labelAction: l, required: m = !1, id: t, onClear: p, clearLabel: u, checked: o, ...g }) => {
+  const f = I(t);
+  return r(B, { name: s, hint: e, error: h, id: f, required: m, maxWidth: "320px", children: x(d, { direction: "column", alignItems: "stretch", gap: 1, children: [x(d, { children: [a ? r(W, { action: l, children: a }) : null, u && p && o !== null && !n && r(E, { onClick: p, children: u })] }), r(j, { checked: o, disabled: n, ...g }), r(v, {}), r(R, {})] }) });
+}, E = c(F)`
   align-self: flex-end;
   margin-left: auto;
-`, w = ({ disabled: e = !1, size: s = "M", error: f, hint: c, label: o, name: a, labelAction: g, required: h = !1, id: u, onClear: i, clearLabel: t, checked: n = !1, ...x }) => {
-  const l = F(u);
-  return r(C, { name: a, hint: c, error: f, id: l, required: h, children: m(d, { direction: "column", alignItems: "stretch", gap: 1, children: [m(d, { children: [r(k, { action: g, children: o }), t && i && n !== null && !e && r(q, { onClick: i, children: t })] }), r(I, { id: l, size: s, checked: n, disabled: e, ...x, children: o }), r(y, {}), r(B, {})] }) });
-};
-w.displayName = "ToggleInput";
+`;
 export {
-  w as ToggleInput
+  V as ToggleInput
 };

package/dist/Typography/Typography.cjs

@@ -7,7 +7,7 @@
   font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
   font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
   line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,t)};
-  color: ${o.handleColor};
+  color: ${({theme:e,textColor:t})=>e.colors[t||"neutral800"]};
   text-align: ${({textAlign:e})=>e};
   text-decoration: ${({textDecoration:e})=>e};
   text-transform: ${({textTransform:e})=>e};

package/dist/Typography/Typography.js

@@ -1,11 +1,11 @@
 import r from "styled-components";
-import { variantStyle as i, ellipsisStyle as n, handleColor as a } from "./utils.js";
+import { variantStyle as i, ellipsisStyle as n } from "./utils.js";
 import { extractStyleFromTheme as o } from "../helpers/theme.js";
-const s = {
+const a = {
   fontSize: !0,
   fontWeight: !0
-}, m = r.span.withConfig({
-  shouldForwardProp: (t, e) => !s[t] && e(t)
+}, h = r.span.withConfig({
+  shouldForwardProp: (t, e) => !a[t] && e(t)
 })`
   ${i}
   ${n}
@@ -15,11 +15,11 @@ const s = {
   font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
   font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
   line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
-  color: ${a};
+  color: ${({ theme: t, textColor: e }) => t.colors[e || "neutral800"]};
   text-align: ${({ textAlign: t }) => t};
   text-decoration: ${({ textDecoration: t }) => t};
   text-transform: ${({ textTransform: t }) => t};
 `;
 export {
-  m as Typography
+  h as Typography
 };

package/dist/Typography/utils.cjs

@@ -31,4 +31,4 @@
         text-transform: uppercase;
       `;default:return`
         font-size: ${i.fontSizes[2]};
-      `}},o=({theme:e,textColor:i})=>e.colors[i||"neutral800"];exports.ellipsisStyle=n;exports.handleColor=o;exports.variantStyle=s;
+      `}};exports.ellipsisStyle=n;exports.variantStyle=s;