@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/BaseRadio/BaseRadio.js

@@ -7,19 +7,11 @@ import { useId as $ } from "../hooks/useId.js";
 const y = g.input`
   margin: 0;
   padding: 0;
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
-  border: 1px solid ${({
-  theme: e
-}) => e.colors.primary600};
+  background-color: ${({ theme: e }) => e.colors.neutral0};
+  border: 1px solid ${({ theme: e }) => e.colors.primary600};
   border-radius: 50%;
-  height: ${({
-  size: e
-}) => typeof e == "number" ? e : r(e)};
-  width: ${({
-  size: e
-}) => typeof e == "number" ? e : r(e)};
+  height: ${({ size: e }) => typeof e == "number" ? e : r(e)};
+  width: ${({ size: e }) => typeof e == "number" ? e : r(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -28,41 +20,22 @@ const y = g.input`
     position: relative;
     z-index: 1;
     display: block;
-    height: ${({
-  size: e
-}) => typeof e == "number" ? e : t(e)};
-    width: ${({
-  size: e
-}) => typeof e == "number" ? e : t(e)};
+    height: ${({ size: e }) => typeof e == "number" ? e : t(e)};
+    width: ${({ size: e }) => typeof e == "number" ? e : t(e)};
     left: ${d};
     top: ${d};
   }
 
   &:checked:after {
-    background: ${({
-  theme: e
-}) => e.colors.primary600};
+    background: ${({ theme: e }) => e.colors.primary600};
   }
 
   &:disabled {
-    border: 1px solid ${({
-  theme: e
-}) => e.colors.neutral300};
-    background: ${({
-  theme: e
-}) => e.colors.neutral200};
+    border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+    background: ${({ theme: e }) => e.colors.neutral200};
   }
-`, R = u.forwardRef(({
-  value: e,
-  disabled: a = !1,
-  ...n
-}, i) => {
-  const c = $(), {
-    onChange: l,
-    selected: p,
-    name: m,
-    size: s
-  } = b(h), o = p === e;
+`, R = u.forwardRef(({ value: e, disabled: a = !1, ...n }, i) => {
+  const c = $(), { onChange: l, selected: p, name: m, size: s } = b(h), o = p === e;
   return f(y, {
     ref: i,
     type: "radio",
@@ -73,6 +46,7 @@ const y = g.input`
     checked: o,
     disabled: a,
     id: c,
+    // @ts-expect-error size is a html prop already.
     size: s,
     onChange: l,
     ...n

package/dist/BaseRadio/RadioGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),r=require("react"),l=require("./context.cjs"),x=require("../helpers/setTabIndexOnFirstItem.cjs"),b=({children:n,labelledBy:u,onChange:o,value:e="",size:s="M",name:t,...d})=>{const i=r.useRef(null);r.useLayoutEffect(()=>{e||x.setTabIndexOnFirstItem(i.current,`[name="${t}"]`)},[e,t]);const a=r.useMemo(()=>({onChange:o,selected:e,name:t,size:s}),[t,o,s,e]);return c.jsx(l.RadioContext.Provider,{value:a,children:c.jsx("div",{ref:i,role:"radiogroup","aria-labelledby":u,...d,children:n})})};exports.RadioGroup=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),a=require("./context.cjs"),x=require("../helpers/setTabIndexOnFirstItem.cjs"),f=({children:c,labelledBy:u,onChange:o,value:e="",size:i="M",name:t,...d})=>{const s=r.useRef(null);r.useLayoutEffect(()=>{e||x.setTabIndexOnFirstItem(s.current,`[name="${t}"]`)},[e,t]);const l=r.useMemo(()=>({onChange:o,selected:e,name:t,size:i}),[t,o,i,e]);return n.jsx(a.RadioContext.Provider,{value:l,children:n.jsx("div",{ref:s,role:"radiogroup","aria-labelledby":u,...d,children:c})})};exports.RadioGroup=f;

package/dist/BaseRadio/RadioGroup.js

@@ -2,35 +2,13 @@ import { jsx as d } from "react/jsx-runtime";
 import { useRef as n, useLayoutEffect as p, useMemo as u } from "react";
 import { RadioContext as l } from "./context.js";
 import { setTabIndexOnFirstItem as x } from "../helpers/setTabIndexOnFirstItem.js";
-const G = ({
-  children: f,
-  labelledBy: c,
-  onChange: t,
-  value: r = "",
-  size: e = "M",
-  name: o,
-  ...s
-}) => {
+const G = ({ children: f, labelledBy: c, onChange: t, value: r = "", size: e = "M", name: o, ...s }) => {
   const i = n(null);
   p(() => {
     r || x(i.current, `[name="${o}"]`);
   }, [r, o]);
-  const m = u(() => ({
-    onChange: t,
-    selected: r,
-    name: o,
-    size: e
-  }), [o, t, e, r]);
-  return d(l.Provider, {
-    value: m,
-    children: d("div", {
-      ref: i,
-      role: "radiogroup",
-      "aria-labelledby": c,
-      ...s,
-      children: f
-    })
-  });
+  const m = u(() => ({ onChange: t, selected: r, name: o, size: e }), [o, t, e, r]);
+  return d(l.Provider, { value: m, children: d("div", { ref: i, role: "radiogroup", "aria-labelledby": c, ...s, children: f }) });
 };
 export {
   G as RadioGroup

package/dist/BaseRadio/context.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;

package/dist/BaseRadio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./BaseRadio.cjs"),o=require("./RadioGroup.cjs");exports.BaseRadio=e.BaseRadio;exports.RadioGroup=o.RadioGroup;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./BaseRadio.cjs"),e=require("./RadioGroup.cjs");exports.BaseRadio=o.BaseRadio;exports.RadioGroup=e.RadioGroup;

package/dist/BaseRadio/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=e=>e==="M"?"18px":"20px",i=e=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e==="M"?"18px":"20px",i=e=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;

package/dist/Box/Box.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(n),l={color:!0,cursor:!0,height:!0,width:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),a={color:!0,cursor:!0,height:!0,width:!0},m=n.div.withConfig({shouldForwardProp:(e,t)=>!a[e]&&t(e)})`
   // Font
   font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 

package/dist/Box/Box.js

@@ -10,211 +10,85 @@ const t = {
   shouldForwardProp: (e, o) => !t[e] && o(e)
 })`
   // Font
-  font-size: ${({
-  fontSize: e,
-  theme: o
-}) => s(o.fontSizes, e, e)};
+  font-size: ${({ fontSize: e, theme: o }) => s(o.fontSizes, e, e)};
 
   // Colors
-  background: ${({
-  theme: e,
-  background: o
-}) => s(e.colors, o, o)};
-  color: ${({
-  theme: e,
-  color: o
-}) => s(e.colors, o, void 0)};
+  background: ${({ theme: e, background: o }) => s(e.colors, o, o)};
+  color: ${({ theme: e, color: o }) => s(e.colors, o, void 0)};
 
   // Spaces
-  ${({
-  theme: e,
-  padding: o
-}) => r("padding", o, e)}
-  ${({
-  theme: e,
-  paddingTop: o
-}) => r("padding-top", o, e)}
-  ${({
-  theme: e,
-  paddingRight: o
-}) => r("padding-right", o, e)}
-  ${({
-  theme: e,
-  paddingBottom: o
-}) => r("padding-bottom", o, e)}
-  ${({
-  theme: e,
-  paddingLeft: o
-}) => r("padding-left", o, e)}
-  ${({
-  theme: e,
-  marginLeft: o
-}) => r("margin-left", o, e)}
-  ${({
-  theme: e,
-  marginRight: o
-}) => r("margin-right", o, e)}
-  ${({
-  theme: e,
-  marginTop: o
-}) => r("margin-top", o, e)}
-  ${({
-  theme: e,
-  marginBottom: o
-}) => r("margin-bottom", o, e)}
+  ${({ theme: e, padding: o }) => r("padding", o, e)}
+  ${({ theme: e, paddingTop: o }) => r("padding-top", o, e)}
+  ${({ theme: e, paddingRight: o }) => r("padding-right", o, e)}
+  ${({ theme: e, paddingBottom: o }) => r("padding-bottom", o, e)}
+  ${({ theme: e, paddingLeft: o }) => r("padding-left", o, e)}
+  ${({ theme: e, marginLeft: o }) => r("margin-left", o, e)}
+  ${({ theme: e, marginRight: o }) => r("margin-right", o, e)}
+  ${({ theme: e, marginTop: o }) => r("margin-top", o, e)}
+  ${({ theme: e, marginBottom: o }) => r("margin-bottom", o, e)}
 
   // Responsive hiding
-  ${({
-  theme: e,
-  hiddenS: o
-}) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({
-  theme: e,
-  hiddenXS: o
-}) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
+  ${({ theme: e, hiddenS: o }) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
+  ${({ theme: e, hiddenXS: o }) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
   
 
   // Borders
-  border-radius: ${({
-  theme: e,
-  hasRadius: o,
-  borderRadius: i
-}) => o ? e.borderRadius : i};
-  border-style: ${({
-  borderStyle: e
-}) => e};
-  border-width: ${({
-  borderWidth: e
-}) => e};
-  border-color: ${({
-  borderColor: e,
-  theme: o
-}) => s(o.colors, e, void 0)};
-  border: ${({
-  theme: e,
-  borderColor: o,
-  borderStyle: i,
-  borderWidth: n
-}) => {
+  border-radius: ${({ theme: e, hasRadius: o, borderRadius: i }) => o ? e.borderRadius : i};
+  border-style: ${({ borderStyle: e }) => e};
+  border-width: ${({ borderWidth: e }) => e};
+  border-color: ${({ borderColor: e, theme: o }) => s(o.colors, e, void 0)};
+  border: ${({ theme: e, borderColor: o, borderStyle: i, borderWidth: n }) => {
   if (o && !i && typeof n > "u")
     return `1px solid ${e.colors[o]}`;
 }};
 
   // Shadows
-  box-shadow: ${({
-  theme: e,
-  shadow: o
-}) => s(e.shadows, o, void 0)};
+  box-shadow: ${({ theme: e, shadow: o }) => s(e.shadows, o, void 0)};
 
   // Handlers
-  pointer-events: ${({
-  pointerEvents: e
-}) => e};
+  pointer-events: ${({ pointerEvents: e }) => e};
   &:hover {
-    ${({
-  _hover: e,
-  theme: o
-}) => e ? e(o) : void 0}
+    ${({ _hover: e, theme: o }) => e ? e(o) : void 0}
   }
 
   // Display
-  display: ${({
-  display: e
-}) => e};
+  display: ${({ display: e }) => e};
 
   // Position
-  position: ${({
-  position: e
-}) => e};
-  left: ${({
-  left: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  right: ${({
-  right: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  top: ${({
-  top: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  bottom: ${({
-  bottom: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  z-index: ${({
-  zIndex: e
-}) => e};
-  overflow: ${({
-  overflow: e
-}) => e};
+  position: ${({ position: e }) => e};
+  left: ${({ left: e, theme: o }) => s(o.spaces, e, e)};
+  right: ${({ right: e, theme: o }) => s(o.spaces, e, e)};
+  top: ${({ top: e, theme: o }) => s(o.spaces, e, e)};
+  bottom: ${({ bottom: e, theme: o }) => s(o.spaces, e, e)};
+  z-index: ${({ zIndex: e }) => e};
+  overflow: ${({ overflow: e }) => e};
 
   // Size
-  width: ${({
-  width: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  max-width: ${({
-  maxWidth: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  min-width: ${({
-  minWidth: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  height: ${({
-  height: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  max-height: ${({
-  maxHeight: e,
-  theme: o
-}) => s(o.spaces, e, e)};
-  min-height: ${({
-  minHeight: e,
-  theme: o
-}) => s(o.spaces, e, e)};
+  width: ${({ width: e, theme: o }) => s(o.spaces, e, e)};
+  max-width: ${({ maxWidth: e, theme: o }) => s(o.spaces, e, e)};
+  min-width: ${({ minWidth: e, theme: o }) => s(o.spaces, e, e)};
+  height: ${({ height: e, theme: o }) => s(o.spaces, e, e)};
+  max-height: ${({ maxHeight: e, theme: o }) => s(o.spaces, e, e)};
+  min-height: ${({ minHeight: e, theme: o }) => s(o.spaces, e, e)};
 
   // Animation
-  transition: ${({
-  transition: e
-}) => e};
-  transform: ${({
-  transform: e
-}) => e};
-  animation: ${({
-  animation: e
-}) => e};
+  transition: ${({ transition: e }) => e};
+  transform: ${({ transform: e }) => e};
+  animation: ${({ animation: e }) => e};
 
   //Flexbox children props
-  flex-shrink: ${({
-  shrink: e
-}) => e};
-  flex-grow: ${({
-  grow: e
-}) => e};
-  flex-basis: ${({
-  basis: e
-}) => e};
-  flex: ${({
-  flex: e
-}) => e};
+  flex-shrink: ${({ shrink: e }) => e};
+  flex-grow: ${({ grow: e }) => e};
+  flex-basis: ${({ basis: e }) => e};
+  flex: ${({ flex: e }) => e};
 
   // Text
-  text-align: ${({
-  textAlign: e
-}) => e};
-  text-transform: ${({
-  textTransform: e
-}) => e};
-  line-height: ${({
-  lineHeight: e
-}) => e};
+  text-align: ${({ textAlign: e }) => e};
+  text-transform: ${({ textTransform: e }) => e};
+  line-height: ${({ lineHeight: e }) => e};
 
   // Cursor
-  cursor: ${({
-  cursor: e
-}) => e};
+  cursor: ${({ cursor: e }) => e};
 `;
 export {
   l as Box

package/dist/Box/index.cjs

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

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("@strapi/icons"),u=require("styled-components"),t=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=p(u),h=y.default(s.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("@strapi/icons"),u=require("styled-components"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),i=require("../Flex/Flex.cjs"),t=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),h=u(i.Flex)`
   svg {
     height: ${10/16}rem;
     width: ${10/16}rem;
@@ -9,8 +9,8 @@
   :last-of-type ${t.Box} {
     display: none;
   }
-  :last-of-type ${i.Typography} {
+  :last-of-type ${s.Typography} {
     color: ${({theme:e})=>e.colors.neutral800};
     font-weight: ${({theme:e})=>e.fontWeights.bold};
   }
-`,l=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(i.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(t.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(d.ChevronRight,{})})]});l.displayName="Crumb";const o=({children:e,label:n,...a})=>r.jsxs(s.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:n}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=l;
+`,n=({children:e})=>r.jsxs(h,{inline:!0,as:"li",children:[r.jsx(s.Typography,{variant:"pi",textColor:"neutral600",children:e}),r.jsx(t.Box,{"aria-hidden":!0,paddingLeft:3,paddingRight:3,children:r.jsx(d.ChevronRight,{})})]});n.displayName="Crumb";const o=({children:e,label:l,...a})=>r.jsxs(i.Flex,{...a,children:[r.jsx(c.VisuallyHidden,{children:l}),r.jsx("ol",{"aria-hidden":!0,children:e})]});o.displayName="Breadcrumbs";exports.Breadcrumbs=o;exports.Crumb=n;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,61 +1,28 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { ChevronRight as d } from "@strapi/icons";
 import m from "styled-components";
-import { Box as o } from "../Box/Box.js";
-import { Flex as t } from "../Flex/Flex.js";
-import { Typography as l } from "../Typography/Typography.js";
 import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
-const s = m(t)`
+import { Flex as o } from "../Flex/Flex.js";
+import { Box as t } from "../Box/Box.js";
+import { Typography as l } from "../Typography/Typography.js";
+const s = m(o)`
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
     path {
-      fill: ${({
-  theme: r
-}) => r.colors.neutral500};
+      fill: ${({ theme: r }) => r.colors.neutral500};
     }
   }
-  :last-of-type ${o} {
+  :last-of-type ${t} {
     display: none;
   }
   :last-of-type ${l} {
-    color: ${({
-  theme: r
-}) => r.colors.neutral800};
-    font-weight: ${({
-  theme: r
-}) => r.fontWeights.bold};
+    color: ${({ theme: r }) => r.colors.neutral800};
+    font-weight: ${({ theme: r }) => r.fontWeights.bold};
   }
-`, h = ({
-  children: r
-}) => i(s, {
-  inline: !0,
-  as: "li",
-  children: [e(l, {
-    variant: "pi",
-    textColor: "neutral600",
-    children: r
-  }), e(o, {
-    "aria-hidden": !0,
-    paddingLeft: 3,
-    paddingRight: 3,
-    children: e(d, {})
-  })]
-});
+`, h = ({ children: r }) => i(s, { inline: !0, as: "li", children: [e(l, { variant: "pi", textColor: "neutral600", children: r }), e(t, { "aria-hidden": !0, paddingLeft: 3, paddingRight: 3, children: e(d, {}) })] });
 h.displayName = "Crumb";
-const c = ({
-  children: r,
-  label: n,
-  ...a
-}) => i(t, {
-  ...a,
-  children: [e(p, {
-    children: n
-  }), e("ol", {
-    "aria-hidden": !0,
-    children: r
-  })]
-});
+const c = ({ children: r, label: n, ...a }) => i(o, { ...a, children: [e(p, { children: n }), e("ol", { "aria-hidden": !0, children: r })] });
 c.displayName = "Breadcrumbs";
 export {
   c as Breadcrumbs,

package/dist/Breadcrumbs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumbs.cjs");exports.Breadcrumbs=e.Breadcrumbs;exports.Crumb=e.Crumb;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Breadcrumbs.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=r.Crumb;

package/dist/Button/Button.cjs

@@ -1,31 +1,31 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),v=require("@strapi/icons"),l=require("styled-components"),d=require("./constants.cjs"),r=require("./utils.cjs"),S=require("../BaseButton/BaseButton.cjs"),T=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),$=require("../Typography/Typography.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},D=f(q),p=f(l),F=l.keyframes`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),B=require("react"),q=require("@strapi/icons"),s=require("styled-components"),c=require("./constants.cjs"),t=require("./utils.cjs"),S=require("../BaseButton/BaseButton.cjs"),j=require("../Box/Box.cjs"),v=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),T=s.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,L=p.default.div`
-  animation: ${F} 2s infinite linear;
+`,C=s.div`
+  animation: ${T} 2s infinite linear;
   will-change: transform;
-`,y=p.default(S.BaseButton)`
-  height: ${({theme:e,size:n})=>e.sizes.button[n]};
+`,g=s(S.BaseButton)`
+  height: ${({theme:i,size:r})=>i.sizes.button[r]};
 
   &[aria-disabled='true'] {
-    ${r.getDisabledStyle}
+    ${t.getDisabledStyle}
 
     &:active {
-      ${r.getDisabledStyle}
+      ${t.getDisabledStyle}
     }
   }
 
   &:hover {
-    ${r.getHoverStyle}
+    ${t.getHoverStyle}
   }
 
   &:active {
-    ${r.getActiveStyle}
+    ${t.getActiveStyle}
   }
 
-  ${r.getVariantStyle}
-`,g=D.default.forwardRef(({variant:e=d.DEFAULT,startIcon:n,endIcon:s,disabled:h=!1,children:B,onClick:c,size:u=d.BUTTON_SIZES[0],loading:i=!1,fullWidth:a=!1,...j},x)=>{const o=h||i,b=m=>{!o&&c&&c(m)};return t.jsxs(y,{ref:x,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:b,fullWidth:a,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:a,justifyContent:a?"center":void 0,paddingLeft:4,paddingRight:4,width:a?"100%":void 0,...j,children:[(n||i)&&t.jsx(T.Box,{"aria-hidden":!0,children:i?t.jsx(L,{children:t.jsx(v.Loader,{})}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:B}),s&&t.jsx(_.Flex,{"aria-hidden":!0,children:s})]})});g.displayName="Button";exports.Button=g;exports.ButtonWrapper=y;
+  ${t.getVariantStyle}
+`,f=B.forwardRef(({variant:i=c.DEFAULT,startIcon:r,endIcon:d,disabled:y=!1,children:h,onClick:u,size:l=c.BUTTON_SIZES[0],loading:a=!1,fullWidth:n=!1,...p},b)=>{const o=y||a,m=x=>{!o&&u&&u(x)};return e.jsxs(g,{ref:b,"aria-disabled":o,disabled:o,size:l,variant:i,onClick:m,fullWidth:n,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:n,justifyContent:n?"center":void 0,paddingLeft:4,paddingRight:4,width:n?"100%":void 0,...p,children:[(r||a)&&e.jsx(j.Box,{"aria-hidden":!0,children:a?e.jsx(C,{children:e.jsx(q.Loader,{})}):r}),e.jsx(v.Typography,{variant:l==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:h}),d&&e.jsx($.Flex,{"aria-hidden":!0,children:d})]})});f.displayName="Button";exports.Button=f;exports.ButtonWrapper=g;

package/dist/Button/Button.js

@@ -6,8 +6,8 @@ import { DEFAULT as B, BUTTON_SIZES as S } from "./constants.js";
 import { getDisabledStyle as l, getHoverStyle as $, getActiveStyle as x, getVariantStyle as C } from "./utils.js";
 import { BaseButton as k } from "../BaseButton/BaseButton.js";
 import { Box as L } from "../Box/Box.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { Typography as j } from "../Typography/Typography.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { Flex as j } from "../Flex/Flex.js";
 const w = v`
   from {
     transform: rotate(0deg);
@@ -19,10 +19,7 @@ const w = v`
   animation: ${w} 2s infinite linear;
   will-change: transform;
 `, N = s(k)`
-  height: ${({
-  theme: i,
-  size: e
-}) => i.sizes.button[e]};
+  height: ${({ theme: i, size: e }) => i.sizes.button[e]};
 
   &[aria-disabled='true'] {
     ${l}
@@ -41,55 +38,11 @@ const w = v`
   }
 
   ${C}
-`, R = b.forwardRef(({
-  variant: i = B,
-  startIcon: e,
-  endIcon: n,
-  disabled: f = !1,
-  children: p,
-  onClick: d,
-  size: m = S[0],
-  loading: o = !1,
-  fullWidth: r = !1,
-  ...c
-}, u) => {
+`, R = b.forwardRef(({ variant: i = B, startIcon: e, endIcon: n, disabled: f = !1, children: p, onClick: d, size: m = S[0], loading: o = !1, fullWidth: r = !1, ...c }, u) => {
   const a = f || o;
-  return h(N, {
-    ref: u,
-    "aria-disabled": a,
-    disabled: a,
-    size: m,
-    variant: i,
-    onClick: (g) => {
-      !a && d && d(g);
-    },
-    fullWidth: r,
-    alignItems: "center",
-    background: "buttonPrimary600",
-    borderColor: "buttonPrimary600",
-    gap: 2,
-    inline: r,
-    justifyContent: r ? "center" : void 0,
-    paddingLeft: 4,
-    paddingRight: 4,
-    width: r ? "100%" : void 0,
-    ...c,
-    children: [(e || o) && t(L, {
-      "aria-hidden": !0,
-      children: o ? t(D, {
-        children: t(y, {})
-      }) : e
-    }), t(j, {
-      variant: m === "S" ? "pi" : void 0,
-      fontWeight: "bold",
-      lineHeight: 0,
-      textColor: "buttonNeutral0",
-      children: p
-    }), n && t(T, {
-      "aria-hidden": !0,
-      children: n
-    })]
-  });
+  return h(N, { ref: u, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (g) => {
+    !a && d && d(g);
+  }, fullWidth: r, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: r, justifyContent: r ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: r ? "100%" : void 0, ...c, children: [(e || o) && t(L, { "aria-hidden": !0, children: o ? t(D, { children: t(y, {}) }) : e }), t(T, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", lineHeight: 0, textColor: "buttonNeutral0", children: p }), n && t(j, { "aria-hidden": !0, children: n })] });
 });
 R.displayName = "Button";
 export {

package/dist/Button/constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S="success-light",t="danger-light",s="default",T="tertiary",e="secondary",c="danger",o="success",A="ghost",n=[S,t],E=[s,T,e,c,o,A,...n],I=["S","M","L"];exports.BUTTON_SIZES=I;exports.DANGER=c;exports.DANGER_LIGHT=t;exports.DEFAULT=s;exports.GHOST=A;exports.LIGHT_VARIANTS=n;exports.SECONDARY=e;exports.SUCCESS=o;exports.SUCCESS_LIGHT=S;exports.TERTIARY=T;exports.VARIANTS=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="success-light",t="danger-light",T="default",s="tertiary",c="secondary",A="danger",o="success",n="ghost",E=[S,t],e=[T,s,c,A,o,n,...E],I=["S","M","L"];exports.BUTTON_SIZES=I;exports.DANGER=A;exports.DANGER_LIGHT=t;exports.DEFAULT=T;exports.GHOST=n;exports.LIGHT_VARIANTS=E;exports.SECONDARY=c;exports.SUCCESS=o;exports.SUCCESS_LIGHT=S;exports.TERTIARY=s;exports.VARIANTS=e;

package/dist/Button/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./Button.cjs");exports.Button=t.Button;exports.ButtonWrapper=t.ButtonWrapper;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Button.cjs");exports.Button=t.Button;exports.ButtonWrapper=t.ButtonWrapper;

package/dist/Button/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./constants.cjs"),s=require("../Typography/Typography.cjs"),c=o=>o===l.SUCCESS_LIGHT||o===l.DANGER_LIGHT?`${o.substring(0,o.lastIndexOf("-"))}`:o===l.TERTIARY?"neutral":o===l.DEFAULT||o===l.SECONDARY||l.VARIANTS.every(r=>r!==o)?"primary":`${o}`,u=({theme:o})=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./constants.cjs"),s=require("../Typography/Typography.cjs"),c=o=>o===l.SUCCESS_LIGHT||o===l.DANGER_LIGHT?`${o.substring(0,o.lastIndexOf("-"))}`:o===l.TERTIARY?"neutral":o===l.DEFAULT||o===l.SECONDARY||l.VARIANTS.every(r=>r!==o)?"primary":`${o}`,u=({theme:o})=>`
     border: 1px solid ${o.colors.neutral200};
     background: ${o.colors.neutral150};
     ${s.Typography} {