@strapi/design-system 1.6.3 → 1.6.5

package/dist/Layout/HeaderLayout.js

@@ -1,11 +1,11 @@
 import e, { useRef as h, useState as E, useEffect as v } from "react";
-import R from "styled-components";
 import t from "prop-types";
-import { Typography as c } from "../Typography/Typography.js";
+import R from "styled-components";
 import { Box as i } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
-import { useElementOnScreen as b } from "../helpers/useElementOnScreen.js";
-import { useResizeObserver as w } from "../helpers/useResizeObserver.js";
+import { useElementOnScreen as b } from "../hooks/useElementOnScreen.js";
+import { useResizeObserver as w } from "../hooks/useResizeObserver.js";
+import { Typography as c } from "../Typography/Typography.js";
 const L = () => {
   const n = h(null), [o, a] = E(null), [r, d] = b({
     root: null,
@@ -24,17 +24,7 @@ const L = () => {
   };
 }, p = (n) => {
   const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = L();
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    style: { height: d?.height },
-    ref: o
-  }, a && /* @__PURE__ */ e.createElement(s, {
-    ref: r,
-    ...n
-  })), !a && /* @__PURE__ */ e.createElement(s, {
-    ...n,
-    sticky: !0,
-    width: d?.width
-  }));
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { height: d?.height }, ref: o }, a && /* @__PURE__ */ e.createElement(s, { ref: r, ...n })), !a && /* @__PURE__ */ e.createElement(s, { ...n, sticky: !0, width: d?.width }));
 };
 p.displayName = "HeaderLayout";
 const x = R(i)`
@@ -42,57 +32,38 @@ const x = R(i)`
 `, s = e.forwardRef(
   ({ navigationAction: n, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
     const m = typeof r == "string";
-    return f ? /* @__PURE__ */ e.createElement(x, {
-      paddingLeft: 6,
-      paddingRight: 6,
-      paddingTop: 3,
-      paddingBottom: 3,
-      position: "fixed",
-      top: 0,
-      right: 0,
-      background: "neutral0",
-      shadow: "tableShadow",
-      width: g,
-      zIndex: 4,
-      "data-strapi-header-sticky": !0
-    }, /* @__PURE__ */ e.createElement(l, {
-      justifyContent: "space-between"
-    }, /* @__PURE__ */ e.createElement(l, null, n && /* @__PURE__ */ e.createElement(i, {
-      paddingRight: 3
-    }, n), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, {
-      variant: "beta",
-      as: "h1",
-      ...u
-    }, d), m ? /* @__PURE__ */ e.createElement(c, {
-      variant: "pi",
-      textColor: "neutral600"
-    }, r) : r), a ? /* @__PURE__ */ e.createElement(i, {
-      paddingLeft: 4
-    }, a) : null), /* @__PURE__ */ e.createElement(l, null, o ? /* @__PURE__ */ e.createElement(i, {
-      paddingLeft: 2
-    }, o) : void 0))) : /* @__PURE__ */ e.createElement(i, {
-      ref: y,
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingBottom: 8,
-      paddingTop: n ? 6 : 8,
-      background: "neutral100",
-      "data-strapi-header": !0
-    }, n ? /* @__PURE__ */ e.createElement(i, {
-      paddingBottom: 2
-    }, n) : null, /* @__PURE__ */ e.createElement(l, {
-      justifyContent: "space-between"
-    }, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(c, {
-      as: "h1",
-      variant: "alpha",
-      ...u
-    }, d), a ? /* @__PURE__ */ e.createElement(i, {
-      paddingLeft: 4
-    }, a) : null), o), m ? /* @__PURE__ */ e.createElement(c, {
-      variant: "epsilon",
-      textColor: "neutral600",
-      as: "p"
-    }, r) : r);
+    return f ? /* @__PURE__ */ e.createElement(
+      x,
+      {
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 3,
+        paddingBottom: 3,
+        position: "fixed",
+        top: 0,
+        right: 0,
+        background: "neutral0",
+        shadow: "tableShadow",
+        width: g,
+        zIndex: 4,
+        "data-strapi-header-sticky": !0
+      },
+      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, null, n && /* @__PURE__ */ e.createElement(i, { paddingRight: 3 }, n), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, { variant: "beta", as: "h1", ...u }, d), m ? /* @__PURE__ */ e.createElement(c, { variant: "pi", textColor: "neutral600" }, r) : r), a ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 4 }, a) : null), /* @__PURE__ */ e.createElement(l, null, o ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 2 }, o) : void 0))
+    ) : /* @__PURE__ */ e.createElement(
+      i,
+      {
+        ref: y,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 8,
+        paddingTop: n ? 6 : 8,
+        background: "neutral100",
+        "data-strapi-header": !0
+      },
+      n ? /* @__PURE__ */ e.createElement(i, { paddingBottom: 2 }, n) : null,
+      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, { minWidth: 0 }, /* @__PURE__ */ e.createElement(c, { as: "h1", variant: "alpha", ...u }, d), a ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 4 }, a) : null), o),
+      m ? /* @__PURE__ */ e.createElement(c, { variant: "epsilon", textColor: "neutral600", as: "p" }, r) : r
+    );
   }
 );
 s.displayName = "BaseHeaderLayout";

package/dist/Layout/Layout.js

@@ -7,11 +7,7 @@ const a = t(d)`
   grid-template-columns: ${({ hasSideNav: e }) => e ? "auto 1fr" : "1fr"};
 `, m = t(d)`
   overflow-x: hidden;
-`, i = ({ sideNav: e, children: n }) => /* @__PURE__ */ o.createElement(a, {
-  hasSideNav: Boolean(e)
-}, e, /* @__PURE__ */ o.createElement(m, {
-  paddingBottom: 10
-}, n));
+`, i = ({ sideNav: e, children: n }) => /* @__PURE__ */ o.createElement(a, { hasSideNav: Boolean(e) }, e, /* @__PURE__ */ o.createElement(m, { paddingBottom: 10 }, n));
 i.defaultProps = {
   sideNav: void 0
 };

package/dist/Layout/TwoColsLayout.js

@@ -3,23 +3,7 @@ import r from "prop-types";
 import { Box as o } from "../Box/Box.js";
 import { Grid as m } from "../Grid/Grid.js";
 import { GridItem as t } from "../Grid/GridItem.js";
-const l = ({ startCol: a, endCol: d }) => /* @__PURE__ */ e.createElement(m, {
-  gap: 4
-}, /* @__PURE__ */ e.createElement(t, {
-  col: 9,
-  s: 12
-}, /* @__PURE__ */ e.createElement(o, {
-  hasRadius: !0,
-  background: "neutral0",
-  shadow: "tableShadow"
-}, a)), /* @__PURE__ */ e.createElement(t, {
-  col: 3,
-  s: 12
-}, /* @__PURE__ */ e.createElement(o, {
-  hasRadius: !0,
-  background: "neutral0",
-  shadow: "tableShadow"
-}, d)));
+const l = ({ startCol: a, endCol: d }) => /* @__PURE__ */ e.createElement(m, { gap: 4 }, /* @__PURE__ */ e.createElement(t, { col: 9, s: 12 }, /* @__PURE__ */ e.createElement(o, { hasRadius: !0, background: "neutral0", shadow: "tableShadow" }, a)), /* @__PURE__ */ e.createElement(t, { col: 3, s: 12 }, /* @__PURE__ */ e.createElement(o, { hasRadius: !0, background: "neutral0", shadow: "tableShadow" }, d)));
 l.propTypes = {
   endCol: r.node.isRequired,
   startCol: r.node.isRequired

package/dist/Link/Link.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),h=require("prop-types"),_=require("styled-components"),b=require("@strapi/icons"),q=require("react-router-dom"),u=require("../Typography/Typography.cjs"),E=require("../Box/Box.cjs"),L=require("../themes/utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(c),n=l(h),f=l(_),T=f.default.a`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),j=require("react-router-dom"),m=require("styled-components"),x=require("../Box/Box.cjs"),h=require("../themes/utils.cjs"),c=require("../Typography/Typography.cjs"),_=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function b(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const v=b(y),l=_(m),q=l.default.a`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -14,7 +14,7 @@
     font-size: ${10/16}rem;
   }
 
-  ${u.Typography} {
+  ${c.Typography} {
     transition: color 150ms ease-out;
     color: currentColor;
   }
@@ -27,7 +27,7 @@
     color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${L.buttonFocusStyle};
-`,i=f.default(E.Box)`
+  ${h.buttonFocusStyle};
+`,s=l.default(x.Box)`
   display: flex;
-`,a=c.forwardRef(({href:e,to:r,children:p,disabled:o,startIcon:s,endIcon:d,...y},m)=>{const v=e?"_blank":void 0,g=e?"noreferrer noopener":void 0;return t.default.createElement(T,{as:r&&!o?q.NavLink:"a",target:v,rel:g,to:o?void 0:r,href:o?"#":e,disabled:o,ref:m,...y},s&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingRight:2},s),t.default.createElement(u.Typography,null,p),d&&!e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},d),e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(b.ExternalLink,null)))});a.displayName="Link";a.defaultProps={endIcon:void 0,href:void 0,to:void 0,disabled:!1,startIcon:void 0};a.propTypes={children:n.default.node.isRequired,disabled:n.default.bool,endIcon:n.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:n.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=a;
+`,L=v.forwardRef(({children:e,href:r,to:t,disabled:n=!1,startIcon:i,endIcon:a,...u},d)=>{const p=r?"_blank":void 0,f=r?"noreferrer noopener":void 0;return o.jsxs(q,{as:t&&!n?j.NavLink:"a",target:p,rel:f,to:n?void 0:t,href:n?"#":r,disabled:n,ref:d,...u,children:[i&&o.jsx(s,{as:"span","aria-hidden":!0,paddingRight:2,children:i}),o.jsx(c.Typography,{children:e}),a&&!r&&o.jsx(s,{as:"span","aria-hidden":!0,paddingLeft:2,children:a}),r&&o.jsx(s,{as:"span","aria-hidden":!0,paddingLeft:2,children:o.jsx(g.ExternalLink,{})})]})});exports.Link=L;

package/dist/Link/Link.js

@@ -1,17 +1,22 @@
-import r, { forwardRef as y } from "react";
-import n from "prop-types";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import { ExternalLink as u } from "@strapi/icons";
+import { NavLink as g } from "react-router-dom";
 import s from "styled-components";
-import { ExternalLink as g } from "@strapi/icons";
-import { NavLink as h } from "react-router-dom";
-import { Typography as m } from "../Typography/Typography.js";
-import { Box as E } from "../Box/Box.js";
-import { buttonFocusStyle as L } from "../themes/utils.js";
-const $ = s.a`
+import { Box as y } from "../Box/Box.js";
+import { buttonFocusStyle as h } from "../themes/utils.js";
+import { Typography as p } from "../Typography/Typography.js";
+const x = s.a`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
-  color: ${({ disabled: e, theme: o }) => e ? o.colors.neutral600 : o.colors.primary600};
+  pointer-events: ${({
+  disabled: r
+}) => r ? "none" : void 0};
+  color: ${({
+  disabled: r,
+  theme: o
+}) => r ? o.colors.neutral600 : o.colors.primary600};
 
   svg path {
     transition: fill 150ms ease-out;
@@ -22,69 +27,62 @@ const $ = s.a`
     font-size: ${10 / 16}rem;
   }
 
-  ${m} {
+  ${p} {
     transition: color 150ms ease-out;
     color: currentColor;
   }
 
   &:hover {
-    color: ${({ theme: e }) => e.colors.primary500};
+    color: ${({
+  theme: r
+}) => r.colors.primary500};
   }
 
   &:active {
-    color: ${({ theme: e }) => e.colors.primary700};
+    color: ${({
+  theme: r
+}) => r.colors.primary700};
   }
 
-  ${L};
-`, i = s(E)`
+  ${h};
+`, t = s(y)`
   display: flex;
-`, a = y(({ href: e, to: o, children: c, disabled: t, startIcon: l, endIcon: d, ...p }, f) => {
-  const u = e ? "_blank" : void 0, v = e ? "noreferrer noopener" : void 0;
-  return /* @__PURE__ */ r.createElement($, {
-    as: o && !t ? h : "a",
-    target: u,
-    rel: v,
-    to: t ? void 0 : o,
-    href: t ? "#" : e,
-    disabled: t,
-    ref: f,
-    ...p
-  }, l && /* @__PURE__ */ r.createElement(i, {
+`, z = f.forwardRef(({
+  children: r,
+  href: o,
+  to: i,
+  disabled: n = !1,
+  startIcon: a,
+  endIcon: l,
+  ...c
+}, d) => m(x, {
+  as: i && !n ? g : "a",
+  target: o ? "_blank" : void 0,
+  rel: o ? "noreferrer noopener" : void 0,
+  to: n ? void 0 : i,
+  href: n ? "#" : o,
+  disabled: n,
+  ref: d,
+  ...c,
+  children: [a && e(t, {
     as: "span",
     "aria-hidden": !0,
-    paddingRight: 2
-  }, l), /* @__PURE__ */ r.createElement(m, null, c), d && !e && /* @__PURE__ */ r.createElement(i, {
+    paddingRight: 2,
+    children: a
+  }), e(p, {
+    children: r
+  }), l && !o && e(t, {
     as: "span",
     "aria-hidden": !0,
-    paddingLeft: 2
-  }, d), e && /* @__PURE__ */ r.createElement(i, {
+    paddingLeft: 2,
+    children: l
+  }), o && e(t, {
     as: "span",
     "aria-hidden": !0,
-    paddingLeft: 2
-  }, /* @__PURE__ */ r.createElement(g, null)));
-});
-a.displayName = "Link";
-a.defaultProps = {
-  endIcon: void 0,
-  href: void 0,
-  to: void 0,
-  disabled: !1,
-  startIcon: void 0
-};
-a.propTypes = {
-  children: n.node.isRequired,
-  disabled: n.bool,
-  endIcon: n.element,
-  href(e) {
-    if (!e.disabled && !e.to && !e.href)
-      return new Error("href must be defined");
-  },
-  startIcon: n.element,
-  to(e) {
-    if (!e.disabled && !e.href && !e.to)
-      return new Error("to must be defined");
-  }
-};
+    paddingLeft: 2,
+    children: e(u, {})
+  })]
+}));
 export {
-  a as Link
+  z as Link
 };

package/dist/LinkButton/LinkButton.cjs

@@ -1,32 +1,15 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),$=require("react-router-dom"),S=require("styled-components"),T=require("prop-types"),l=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),r=require("../Button/utils.cjs"),g=require("../Button/constants.cjs"),x=require("../BaseButton/BaseButton.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=u(h),_=u(S),t=u(T),k=_.default(x.BaseButtonWrapper)`
-  padding: ${({theme:e,size:a})=>`${a==="S"?e.spaces[2]:"10px"} ${e.spaces[4]}`};
-  background: ${({theme:e})=>e.colors.buttonPrimary600};
-  border: 1px solid ${({theme:e})=>e.colors.buttonPrimary600};
-  border-radius: ${({theme:e})=>e.borderRadius};
-  ${s.Box} {
-    display: flex;
-    align-items: center;
-  }
-  ${l.Typography} {
-    color: ${({theme:e})=>e.colors.buttonNeutral0};
-  }
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),j=require("react"),h=require("react-router-dom"),m=require("styled-components"),x=require("../BaseButton/BaseButton.cjs"),o=require("../Button/utils.cjs"),l=require("../Flex/Flex.cjs"),v=require("../Typography/Typography.cjs"),B=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function S(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const _=S(j),q=B(m),k=q.default(x.BaseButtonWrapper)`
   &[aria-disabled='true'] {
-    ${r.getDisabledStyle}
+    ${o.getDisabledStyle}
     &:active {
-      ${r.getDisabledStyle}
+      ${o.getDisabledStyle}
     }
   }
   &:hover {
-    ${r.getHoverStyle}
+    ${o.getHoverStyle}
   }
   &:active {
-    ${r.getActiveStyle}
+    ${o.getActiveStyle}
   }
-  ${r.getVariantStyle}
-  /**
-    Link specific properties
-  */
-  display: inline-flex;
-  text-decoration: none;
-  pointer-events: ${({disabled:e})=>e?"none":void 0};
-`,i=o.default.forwardRef(({variant:e,startIcon:a,endIcon:c,disabled:n,children:f,size:p,href:d,to:y,...v},b)=>{const B=d?"_blank":void 0,m=d?"noreferrer noopener":void 0;return o.default.createElement(k,{ref:b,"aria-disabled":n,size:p,variant:e,target:B,rel:m,to:n?void 0:y,href:n?"#":d,...v,as:y&&!n?$.NavLink:"a"},a&&o.default.createElement(s.Box,{"aria-hidden":!0,paddingRight:2},a),p==="S"?o.default.createElement(l.Typography,{variant:"pi",fontWeight:"bold"},f):o.default.createElement(l.Typography,{fontWeight:"bold"},f),c&&o.default.createElement(s.Box,{"aria-hidden":!0,paddingLeft:2},c))});i.displayName="LinkButton";i.defaultProps={disabled:!1,startIcon:void 0,endIcon:void 0,size:"S",variant:"default",onClick:void 0,href:void 0,to:void 0};i.propTypes={children:t.default.node.isRequired,disabled:t.default.bool,endIcon:t.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},onClick:t.default.func,size:t.default.oneOf(g.BUTTON_SIZES),startIcon:t.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")},variant:t.default.oneOf(g.VARIANTS)};exports.LinkButton=i;
+  ${o.getVariantStyle}
+`,R=_.forwardRef(({variant:e="default",startIcon:n,endIcon:r,disabled:t=!1,children:p,size:i="S",href:u,to:s,...g},f)=>{const y=u?"_blank":void 0,b=u?"noreferrer noopener":void 0,c=i==="S"?2:"10px",d=4;return a.jsxs(k,{ref:f,"aria-disabled":t,size:i,variant:e,target:y,rel:b,to:t?void 0:s,href:t?"#":u,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:c,paddingLeft:d,paddingRight:d,paddingTop:c,pointerEvents:t?"none":void 0,...g,as:s&&!t?h.NavLink:"a",children:[n&&a.jsx(l.Flex,{"aria-hidden":!0,children:n}),a.jsx(v.Typography,{variant:i==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:p}),r&&a.jsx(l.Flex,{"aria-hidden":!0,children:r})]})});exports.LinkButton=R;

package/dist/LinkButton/LinkButton.js

@@ -1,99 +1,72 @@
-import t from "react";
-import { NavLink as g } from "react-router-dom";
-import y from "styled-components";
-import r from "prop-types";
-import { Typography as a } from "../Typography/Typography.js";
-import { Box as d } from "../Box/Box.js";
-import { getDisabledStyle as c, getHoverStyle as h, getActiveStyle as S, getVariantStyle as k } from "../Button/utils.js";
-import { BUTTON_SIZES as E, VARIANTS as x } from "../Button/constants.js";
-import { BaseButtonWrapper as B } from "../BaseButton/BaseButton.js";
-const L = y(B)`
-  padding: ${({ theme: e, size: o }) => `${o === "S" ? e.spaces[2] : "10px"} ${e.spaces[4]}`};
-  background: ${({ theme: e }) => e.colors.buttonPrimary600};
-  border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  ${d} {
-    display: flex;
-    align-items: center;
-  }
-  ${a} {
-    color: ${({ theme: e }) => e.colors.buttonNeutral0};
-  }
+import { jsxs as v, jsx as n } from "react/jsx-runtime";
+import * as y from "react";
+import { NavLink as S } from "react-router-dom";
+import b from "styled-components";
+import { BaseButtonWrapper as x } from "../BaseButton/BaseButton.js";
+import { getDisabledStyle as f, getHoverStyle as k, getActiveStyle as $, getVariantStyle as B } from "../Button/utils.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Typography as L } from "../Typography/Typography.js";
+const R = b(x)`
   &[aria-disabled='true'] {
-    ${c}
+    ${f}
     &:active {
-      ${c}
+      ${f}
     }
   }
   &:hover {
-    ${h}
+    ${k}
   }
   &:active {
-    ${S}
+    ${$}
   }
-  ${k}
-  /**
-    Link specific properties
-  */
-  display: inline-flex;
-  text-decoration: none;
-  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
-`, l = t.forwardRef(
-  ({ variant: e, startIcon: o, endIcon: f, disabled: i, children: s, size: m, href: n, to: p, ...u }, v) => {
-    const b = n ? "_blank" : void 0, $ = n ? "noreferrer noopener" : void 0;
-    return /* @__PURE__ */ t.createElement(L, {
-      ref: v,
-      "aria-disabled": i,
-      size: m,
-      variant: e,
-      target: b,
-      rel: $,
-      to: i ? void 0 : p,
-      href: i ? "#" : n,
-      ...u,
-      as: p && !i ? g : "a"
-    }, o && /* @__PURE__ */ t.createElement(d, {
+  ${B}
+`, A = y.forwardRef(({
+  variant: l = "default",
+  startIcon: o,
+  endIcon: i,
+  disabled: r = !1,
+  children: m,
+  size: t = "S",
+  href: e,
+  to: a,
+  ...g
+}, s) => {
+  const c = e ? "_blank" : void 0, h = e ? "noreferrer noopener" : void 0, d = t === "S" ? 2 : "10px", p = 4;
+  return v(R, {
+    ref: s,
+    "aria-disabled": r,
+    size: t,
+    variant: l,
+    target: c,
+    rel: h,
+    to: r ? void 0 : a,
+    href: r ? "#" : e,
+    background: "buttonPrimary600",
+    borderColor: "buttonPrimary600",
+    hasRadius: !0,
+    gap: 2,
+    inline: !0,
+    paddingBottom: d,
+    paddingLeft: p,
+    paddingRight: p,
+    paddingTop: d,
+    pointerEvents: r ? "none" : void 0,
+    ...g,
+    as: a && !r ? S : "a",
+    children: [o && n(u, {
       "aria-hidden": !0,
-      paddingRight: 2
-    }, o), m === "S" ? /* @__PURE__ */ t.createElement(a, {
-      variant: "pi",
-      fontWeight: "bold"
-    }, s) : /* @__PURE__ */ t.createElement(a, {
-      fontWeight: "bold"
-    }, s), f && /* @__PURE__ */ t.createElement(d, {
+      children: o
+    }), n(L, {
+      variant: t === "S" ? "pi" : void 0,
+      fontWeight: "bold",
+      textColor: "buttonNeutral0",
+      children: m
+    }), i && n(u, {
       "aria-hidden": !0,
-      paddingLeft: 2
-    }, f));
-  }
-);
-l.displayName = "LinkButton";
-l.defaultProps = {
-  disabled: !1,
-  startIcon: void 0,
-  endIcon: void 0,
-  size: "S",
-  variant: "default",
-  onClick: void 0,
-  href: void 0,
-  to: void 0
-};
-l.propTypes = {
-  children: r.node.isRequired,
-  disabled: r.bool,
-  endIcon: r.element,
-  href(e) {
-    if (!e.disabled && !e.to && !e.href)
-      return new Error("href must be defined");
-  },
-  onClick: r.func,
-  size: r.oneOf(E),
-  startIcon: r.element,
-  to(e) {
-    if (!e.disabled && !e.href && !e.to)
-      return new Error("to must be defined");
-  },
-  variant: r.oneOf(x)
-};
+      children: i
+    })]
+  });
+});
 export {
-  l as LinkButton
+  A as LinkButton
 };

package/dist/LiveRegions/LiveRegions.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../VisuallyHidden/VisuallyHidden.cjs"),i=require("./constants.cjs"),l=()=>e.jsxs(s.VisuallyHidden,{children:[e.jsx("p",{role:"log","aria-live":"polite",id:i.LiveRegionIds.Log,"aria-relevant":"all"}),e.jsx("p",{role:"status","aria-live":"polite",id:i.LiveRegionIds.Status,"aria-relevant":"all"}),e.jsx("p",{role:"alert","aria-live":"assertive",id:i.LiveRegionIds.Alert,"aria-relevant":"all"})]});exports.LiveRegions=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("./constants.cjs"),s=require("../VisuallyHidden/VisuallyHidden.cjs"),l=()=>e.jsxs(s.VisuallyHidden,{children:[e.jsx("p",{role:"log","aria-live":"polite",id:i.LiveRegionIds.Log,"aria-relevant":"all"}),e.jsx("p",{role:"status","aria-live":"polite",id:i.LiveRegionIds.Status,"aria-relevant":"all"}),e.jsx("p",{role:"alert","aria-live":"assertive",id:i.LiveRegionIds.Alert,"aria-relevant":"all"})]});exports.LiveRegions=l;

package/dist/LiveRegions/LiveRegions.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { VisuallyHidden as a } from "../VisuallyHidden/VisuallyHidden.js";
 import { LiveRegionIds as i } from "./constants.js";
+import { VisuallyHidden as a } from "../VisuallyHidden/VisuallyHidden.js";
 const s = () => r(a, {
   children: [e("p", {
     role: "log",

package/dist/Loader/Loader.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),u=require("prop-types"),d=require("styled-components"),c=require("../VisuallyHidden/VisuallyHidden.cjs"),f=require("./assets/loader.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=s(o),l=s(u),p=s(d),y=d.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),n=require("styled-components"),i=require("./assets/loader.cjs"),l=require("../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function d(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=d(o),f=c(n),m=n.keyframes`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`,m=p.default.img`
-  animation: ${y} 1s infinite linear;
+`,g=f.default.img`
+  animation: ${m} 1s infinite linear;
   will-change: transform;
   ${({small:e,theme:t})=>e&&`width: ${t.spaces[6]}; height: ${t.spaces[6]};`}
-`,a=o.forwardRef(({children:e,small:t,...i},n)=>r.default.createElement("div",{role:"alert","aria-live":"assertive",ref:n,...i},r.default.createElement(c.VisuallyHidden,null,e),r.default.createElement(m,{src:f,"aria-hidden":!0,small:t})));a.displayName="Loader";a.defaultProps={small:!1};a.propTypes={children:l.default.node.isRequired,small:l.default.bool};exports.Loader=a;
+`,y=u.forwardRef(({children:e,small:t=!1,...r},a)=>s.jsxs("div",{role:"alert","aria-live":"assertive",ref:a,...r,children:[s.jsx(l.VisuallyHidden,{children:e}),s.jsx(g,{src:i,"aria-hidden":!0,small:t})]}));exports.Loader=y;

package/dist/Loader/Loader.js

@@ -1,9 +1,9 @@
-import a, { forwardRef as s } from "react";
-import t from "prop-types";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
 import m, { keyframes as n } from "styled-components";
-import { VisuallyHidden as d } from "../VisuallyHidden/VisuallyHidden.js";
-import f from "./assets/loader.js";
-const p = n`
+import d from "./assets/loader.js";
+import { VisuallyHidden as f } from "../VisuallyHidden/VisuallyHidden.js";
+const l = n`
   from {
     transform: rotate(0deg);
   }
@@ -11,27 +11,29 @@ const p = n`
     transform: rotate(359deg);
   }
 `, c = m.img`
-  animation: ${p} 1s infinite linear;
+  animation: ${l} 1s infinite linear;
   will-change: transform;
-  ${({ small: r, theme: e }) => r && `width: ${e.spaces[6]}; height: ${e.spaces[6]};`}
-`, o = s(({ children: r, small: e, ...i }, l) => /* @__PURE__ */ a.createElement("div", {
+  ${({
+  small: e,
+  theme: r
+}) => e && `width: ${r.spaces[6]}; height: ${r.spaces[6]};`}
+`, $ = s.forwardRef(({
+  children: e,
+  small: r = !1,
+  ...a
+}, t) => i("div", {
   role: "alert",
   "aria-live": "assertive",
-  ref: l,
-  ...i
-}, /* @__PURE__ */ a.createElement(d, null, r), /* @__PURE__ */ a.createElement(c, {
-  src: f,
-  "aria-hidden": !0,
-  small: e
-})));
-o.displayName = "Loader";
-o.defaultProps = {
-  small: !1
-};
-o.propTypes = {
-  children: t.node.isRequired,
-  small: t.bool
-};
+  ref: t,
+  ...a,
+  children: [o(f, {
+    children: e
+  }), o(c, {
+    src: d,
+    "aria-hidden": !0,
+    small: r
+  })]
+}));
 export {
-  o as Loader
+  $ as Loader
 };