@strapi/design-system 1.6.2 → 1.6.4

package/dist/JSONInput/JSONInputContainer.js

@@ -1,36 +1,43 @@
 import o from "styled-components";
-import { inputFocusStyle as t } from "../themes/utils.js";
-import { Flex as c } from "../Flex/Flex.js";
-const l = o(c)`
-  line-height: ${({ theme: e }) => e.lineHeights[2]};
+import { Flex as t } from "../Flex/Flex.js";
+import { inputFocusStyle as c } from "../themes/utils.js";
+const l = o(t)`
+  line-height: ${({
+  theme: e
+}) => e.lineHeights[2]};
 
   .cm-editor {
-    /* 
-      Hard coded since the color is the same between themes,
-      theme.colors.neutral800 changes between themes 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
     background-color: #32324d;
     width: 100%;
     outline: none;
   }
 
   .cm-scroller {
-    border: 1px solid ${({ theme: e, hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
+    border: 1px solid ${({
+  theme: e,
+  hasError: r
+}) => r ? e.colors.danger600 : e.colors.neutral200};
     /* inputFocusStyle will receive hasError prop */
-    ${t()}
+    ${c()}
   }
 
   .cm-editor,
   .cm-scroller {
-    border-radius: ${({ theme: e }) => e.borderRadius};
+    border-radius: ${({
+  theme: e
+}) => e.borderRadius};
   }
 
   .cm-gutters,
   .cm-activeLineGutter {
-    /* 
-      Hard coded since the color is the same between themes,
-      theme.colors.neutral700 changes between themes 
-    */
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
     background-color: #4a4a6a;
   }
 `;

package/dist/Layout/ActionLayout.js

@@ -11,19 +11,7 @@ const l = a(i)`
   margin-left: ${({ pullRight: t }) => t ? "auto" : void 0};
 `, m = a(l)`
   flex-shrink: 0;
-`, p = ({ startActions: t, endActions: o }) => t || o ? /* @__PURE__ */ e.createElement(n, {
-  paddingLeft: 10,
-  paddingRight: 10
-}, /* @__PURE__ */ e.createElement(n, {
-  paddingBottom: 4
-}, /* @__PURE__ */ e.createElement(i, {
-  justifyContent: "space-between",
-  alignItems: "flex-start"
-}, t && /* @__PURE__ */ e.createElement(l, {
-  wrap: "wrap"
-}, t), o && /* @__PURE__ */ e.createElement(m, {
-  pullRight: !0
-}, o)))) : null;
+`, p = ({ startActions: t, endActions: o }) => t || o ? /* @__PURE__ */ e.createElement(n, { paddingLeft: 10, paddingRight: 10 }, /* @__PURE__ */ e.createElement(n, { paddingBottom: 4 }, /* @__PURE__ */ e.createElement(i, { justifyContent: "space-between", alignItems: "flex-start" }, t && /* @__PURE__ */ e.createElement(l, { wrap: "wrap" }, t), o && /* @__PURE__ */ e.createElement(m, { pullRight: !0 }, o)))) : null;
 p.defaultProps = {
   endActions: void 0,
   startActions: void 0

package/dist/Layout/ContentLayout.js

@@ -1,10 +1,7 @@
 import t from "react";
 import o from "prop-types";
 import { Box as r } from "../Box/Box.js";
-const p = ({ children: e }) => /* @__PURE__ */ t.createElement(r, {
-  paddingLeft: 10,
-  paddingRight: 10
-}, e);
+const p = ({ children: e }) => /* @__PURE__ */ t.createElement(r, { paddingLeft: 10, paddingRight: 10 }, e);
 p.propTypes = {
   children: o.node.isRequired
 };

package/dist/Layout/HeaderLayout.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("styled-components"),v=require("prop-types"),s=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),B=require("../helpers/useElementOnScreen.cjs"),b=require("../helpers/useResizeObserver.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(c),R=p(E),a=p(v),T=()=>{const t=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{t.current&&r(t.current.getBoundingClientRect())},[t]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:t,headerSize:l}},f=t=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{height:o?.height},ref:l},r&&e.default.createElement(u,{ref:n,...t})),!r&&e.default.createElement(u,{...t,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("prop-types"),v=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),B=require("../helpers/useElementOnScreen.cjs"),b=require("../helpers/useResizeObserver.cjs"),s=require("../Typography/Typography.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(c),a=p(E),R=p(v),T=()=>{const t=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{t.current&&r(t.current.getBoundingClientRect())},[t]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:t,headerSize:l}},f=t=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{height:o?.height},ref:l},r&&e.default.createElement(u,{ref:n,...t})),!r&&e.default.createElement(u,{...t,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
   width: ${t=>t.width}px;
 `,u=e.default.forwardRef(({navigationAction:t,primaryAction:l,secondaryAction:r,subtitle:n,title:o,sticky:m,width:h,...y},x)=>{const g=typeof n=="string";return m?e.default.createElement(L,{paddingLeft:6,paddingRight:6,paddingTop:3,paddingBottom:3,position:"fixed",top:0,right:0,background:"neutral0",shadow:"tableShadow",width:h,zIndex:4,"data-strapi-header-sticky":!0},e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,null,t&&e.default.createElement(d.Box,{paddingRight:3},t),e.default.createElement(d.Box,null,e.default.createElement(s.Typography,{variant:"beta",as:"h1",...y},o),g?e.default.createElement(s.Typography,{variant:"pi",textColor:"neutral600"},n):n),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),e.default.createElement(i.Flex,null,l?e.default.createElement(d.Box,{paddingLeft:2},l):void 0))):e.default.createElement(d.Box,{ref:x,paddingLeft:10,paddingRight:10,paddingBottom:8,paddingTop:t?6:8,background:"neutral100","data-strapi-header":!0},t?e.default.createElement(d.Box,{paddingBottom:2},t):null,e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,null,e.default.createElement(s.Typography,{as:"h1",variant:"alpha",...y},o),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),l),g?e.default.createElement(s.Typography,{variant:"epsilon",textColor:"neutral600",as:"p"},n):n)});u.displayName="BaseHeaderLayout";u.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0,sticky:!1,width:void 0};u.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,sticky:a.default.bool,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired,width:a.default.number};f.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0};f.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired};exports.BaseHeaderLayout=u;exports.HeaderLayout=f;

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 { 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, 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
+    );
   }
 );
 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;