@strapi/design-system 1.7.0 → 1.7.1

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),h=require("prop-types"),p=require("styled-components"),m=require("./Divider.cjs"),y=require("../../Box/Box.cjs"),s=require("../../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(l),t=i(h),b=i(p),g=b.default(s.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),e=require("prop-types"),u=require("styled-components"),m=require("./Divider.cjs"),a=require("../../Flex/Flex.cjs"),b=require("../../Box/Box.cjs"),y=u(a.Flex)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
   // the same amount it has inner padding
   :first-child {
-    margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
+    margin-left: ${({theme:i})=>`calc(-1*${i.spaces[2]})`};
   }
-`,n=({label:e,children:o,...d})=>{const a=l.Children.toArray(o);return r.default.createElement(y.Box,{"aria-label":e,...d},r.default.createElement(g,{as:"ol",horizontal:!0},l.Children.map(a,(c,u)=>{const f=a.length>1&&u+1<a.length;return r.default.createElement(s.Flex,{inline:!0,as:"li"},c,f&&r.default.createElement(m.Divider,null))})))};n.displayName="Breadcrumbs";n.propTypes={children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,label:t.default.string.isRequired};exports.Breadcrumbs=n;
+`,n=({label:i,children:o,...l})=>{const t=s.Children.toArray(o);return r.jsx(b.Box,{"aria-label":i,...l,children:r.jsx(y,{as:"ol",horizontal:!0,children:s.Children.map(t,(c,d)=>{const h=t.length>1&&d+1<t.length;return r.jsxs(a.Flex,{inline:!0,as:"li",children:[c,h&&r.jsx(m.Divider,{})]})})})})};n.displayName="Breadcrumbs";n.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]).isRequired,label:e.string.isRequired};exports.Breadcrumbs=n;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,29 +1,33 @@
-import r, { Children as a } from "react";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { Children as o } from "react";
 import e from "prop-types";
-import h from "styled-components";
-import { Divider as p } from "./Divider.js";
-import { Box as f } from "../../Box/Box.js";
+import p from "styled-components";
+import { Divider as f } from "./Divider.js";
 import { Flex as n } from "../../Flex/Flex.js";
-const u = h(n)`
+import { Box as u } from "../../Box/Box.js";
+const y = p(n)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
   // the same amount it has inner padding
   :first-child {
-    margin-left: ${({ theme: t }) => `calc(-1*${t.spaces[2]})`};
+    margin-left: ${({ theme: r }) => `calc(-1*${r.spaces[2]})`};
   }
-`, o = ({ label: t, children: l, ...s }) => {
-  const i = a.toArray(l);
-  return /* @__PURE__ */ r.createElement(f, { "aria-label": t, ...s }, /* @__PURE__ */ r.createElement(u, { as: "ol", horizontal: !0 }, a.map(i, (m, d) => {
-    const c = i.length > 1 && d + 1 < i.length;
-    return /* @__PURE__ */ r.createElement(n, { inline: !0, as: "li" }, m, c && /* @__PURE__ */ r.createElement(p, null));
-  })));
+`, a = ({ label: r, children: s, ...l }) => {
+  const i = o.toArray(s);
+  return /* @__PURE__ */ t(u, { "aria-label": r, ...l, children: /* @__PURE__ */ t(y, { as: "ol", horizontal: !0, children: o.map(i, (m, d) => {
+    const h = i.length > 1 && d + 1 < i.length;
+    return /* @__PURE__ */ c(n, { inline: !0, as: "li", children: [
+      m,
+      h && /* @__PURE__ */ t(f, {})
+    ] });
+  }) }) });
 };
-o.displayName = "Breadcrumbs";
-o.propTypes = {
+a.displayName = "Breadcrumbs";
+a.propTypes = {
   children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
   label: e.string.isRequired
 };
 export {
-  o as Breadcrumbs
+  a as Breadcrumbs
 };

package/dist/v2/Breadcrumbs/Crumb.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),d=require("prop-types"),l=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=p(n),a=p(d),t=({children:e,isCurrent:o,...u})=>r.default.createElement(l.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1},r.default.createElement(i.Typography,{variant:"pi",textColor:"neutral800",fontWeight:o?"bold":"normal","aria-current":o,...u},e));t.displayName="Crumb";t.defaultProps={isCurrent:!1};t.propTypes={children:a.default.node.isRequired,isCurrent:a.default.bool};exports.Crumb=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const t=require("prop-types"),a=require("../../Box/Box.cjs"),p=require("../../Typography/Typography.cjs"),e=({children:i,isCurrent:r,...n})=>o.jsx(a.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:o.jsx(p.Typography,{variant:"pi",textColor:"neutral800",fontWeight:r?"bold":"normal","aria-current":r,...n,children:i})});e.displayName="Crumb";e.defaultProps={isCurrent:!1};e.propTypes={children:t.node.isRequired,isCurrent:t.bool};exports.Crumb=e;

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,25 +1,26 @@
-import o from "react";
-import t from "prop-types";
-import { Box as i } from "../../Box/Box.js";
+import { jsx as p } from "react/jsx-runtime";
+import "react";
+import i from "prop-types";
+import { Box as a } from "../../Box/Box.js";
 import { Typography as d } from "../../Typography/Typography.js";
-const r = ({ children: p, isCurrent: e, ...a }) => /* @__PURE__ */ o.createElement(i, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1 }, /* @__PURE__ */ o.createElement(
+const r = ({ children: t, isCurrent: o, ...e }) => /* @__PURE__ */ p(a, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ p(
   d,
   {
     variant: "pi",
     textColor: "neutral800",
-    fontWeight: e ? "bold" : "normal",
-    "aria-current": e,
-    ...a
-  },
-  p
-));
+    fontWeight: o ? "bold" : "normal",
+    "aria-current": o,
+    ...e,
+    children: t
+  }
+) });
 r.displayName = "Crumb";
 r.defaultProps = {
   isCurrent: !1
 };
 r.propTypes = {
-  children: t.node.isRequired,
-  isCurrent: t.bool
+  children: i.node.isRequired,
+  isCurrent: i.bool
 };
 export {
   r as Crumb

package/dist/v2/Breadcrumbs/CrumbLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),a=require("prop-types"),i=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=o(n),r=o(a),u=o(i),d=u.default(l.BaseLink)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("react");const o=require("prop-types"),n=require("styled-components"),t=require("../../BaseLink/BaseLink.cjs"),u=n(t.BaseLink)`
   border-radius: ${({theme:e})=>e.borderRadius};
   color: ${({theme:e})=>e.colors.neutral600};
   font-size: ${({theme:e})=>e.fontSizes[1]};
@@ -11,4 +11,4 @@
     background-color: ${({theme:e})=>e.colors.neutral200};
     color: ${({theme:e})=>e.colors.neutral700};
   }
-`,t=({children:e,...s})=>c.default.createElement(d,{...s},e);t.displayName="CrumbLink";t.defaultProps={to:void 0};t.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=t;
+`,r=({children:e,...s})=>i.jsx(u,{...s,children:e});r.displayName="CrumbLink";r.defaultProps={to:void 0};r.propTypes={children:o.node.isRequired,to:o.string};exports.CrumbLink=r;

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -1,8 +1,9 @@
-import i from "react";
+import { jsx as s } from "react/jsx-runtime";
+import "react";
 import e from "prop-types";
-import s from "styled-components";
+import t from "styled-components";
 import { BaseLink as n } from "../../BaseLink/BaseLink.js";
-const l = s(n)`
+const d = t(n)`
   border-radius: ${({ theme: o }) => o.borderRadius};
   color: ${({ theme: o }) => o.colors.neutral600};
   font-size: ${({ theme: o }) => o.fontSizes[1]};
@@ -15,7 +16,7 @@ const l = s(n)`
     background-color: ${({ theme: o }) => o.colors.neutral200};
     color: ${({ theme: o }) => o.colors.neutral700};
   }
-`, r = ({ children: o, ...t }) => /* @__PURE__ */ i.createElement(l, { ...t }, o);
+`, r = ({ children: o, ...i }) => /* @__PURE__ */ s(d, { ...i, children: o });
 r.displayName = "CrumbLink";
 r.defaultProps = {
   to: void 0

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),s=require("@strapi/icons"),a=require("prop-types"),c=require("styled-components"),i=require("../../Button/Button.cjs"),d=require("../SimpleMenu/SimpleMenu.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=u(l),t=u(a),p=u(c),f=p.default(i.Button)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const i=require("@strapi/icons"),r=require("prop-types"),u=require("styled-components"),t=require("../SimpleMenu/SimpleMenu.cjs"),c=require("../../Button/Button.cjs"),l=u(c.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
 
   :hover,
   :focus {
     background-color: ${({theme:e})=>e.colors.neutral200};
   }
-`,o=({children:e,...r})=>n.default.createElement(d.SimpleMenu,{noBorder:!0,icon:n.default.createElement(s.CarretDown,null),as:f,size:"S",...r},e);o.displayName="CrumbSimpleMenu";o.propTypes={"aria-label":t.default.string.isRequired,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired};exports.CrumbSimpleMenu=o;
+`,o=({children:e,...s})=>n.jsx(t.SimpleMenu,{noBorder:!0,icon:n.jsx(i.CarretDown,{}),as:l,size:"S",...s,children:e});o.displayName="CrumbSimpleMenu";o.propTypes={"aria-label":r.string.isRequired,children:r.oneOfType([r.arrayOf(r.node),r.node]).isRequired};exports.CrumbSimpleMenu=o;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -1,22 +1,23 @@
-import o from "react";
-import { CarretDown as i } from "@strapi/icons";
-import r from "prop-types";
-import p from "styled-components";
-import { Button as m } from "../../Button/Button.js";
-import { SimpleMenu as a } from "../SimpleMenu/SimpleMenu.js";
-const l = p(m)`
-  padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { CarretDown as t } from "@strapi/icons";
+import o from "prop-types";
+import m from "styled-components";
+import { SimpleMenu as n } from "../SimpleMenu/SimpleMenu.js";
+import { Button as s } from "../../Button/Button.js";
+const a = m(s)`
+  padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
 
   :hover,
   :focus {
-    background-color: ${({ theme: e }) => e.colors.neutral200};
+    background-color: ${({ theme: r }) => r.colors.neutral200};
   }
-`, t = ({ children: e, ...n }) => /* @__PURE__ */ o.createElement(a, { noBorder: !0, icon: /* @__PURE__ */ o.createElement(i, null), as: l, size: "S", ...n }, e);
-t.displayName = "CrumbSimpleMenu";
-t.propTypes = {
-  "aria-label": r.string.isRequired,
-  children: r.oneOfType([r.arrayOf(r.node), r.node]).isRequired
+`, i = ({ children: r, ...p }) => /* @__PURE__ */ e(n, { noBorder: !0, icon: /* @__PURE__ */ e(t, {}), as: a, size: "S", ...p, children: r });
+i.displayName = "CrumbSimpleMenu";
+i.propTypes = {
+  "aria-label": o.string.isRequired,
+  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired
 };
 export {
-  t as CrumbSimpleMenu
+  i as CrumbSimpleMenu
 };

package/dist/v2/Breadcrumbs/Divider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),o=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(a),r=()=>t.default.createElement(o.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1},t.default.createElement(i.Typography,{variant:"pi",textColor:"neutral500"},"/"));r.displayName="Divider";exports.Divider=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;

package/dist/v2/Breadcrumbs/Divider.js

@@ -1,8 +1,9 @@
-import e from "react";
-import { Box as r } from "../../Box/Box.js";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { Box as i } from "../../Box/Box.js";
 import { Typography as t } from "../../Typography/Typography.js";
-const i = () => /* @__PURE__ */ e.createElement(r, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1 }, /* @__PURE__ */ e.createElement(t, { variant: "pi", textColor: "neutral500" }, "/"));
-i.displayName = "Divider";
+const o = () => /* @__PURE__ */ r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
+o.displayName = "Divider";
 export {
-  i as Divider
+  o as Divider
 };

package/dist/v2/Breadcrumbs/index.cjs

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

package/dist/v2/Link/Link.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("react"),y=require("@strapi/icons"),d=require("styled-components"),f=require("../../BaseLink/BaseLink.cjs"),m=require("../../themes/utils.cjs"),g=require("../../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=i(p),L=i(d),k=L.default(f.BaseLink)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),p=require("@strapi/icons"),y=require("styled-components"),d=require("../../themes/utils.cjs"),f=require("../../BaseLink/BaseLink.cjs"),m=require("../../Typography/Typography.cjs"),x=y(f.BaseLink)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -9,7 +9,7 @@
     font-size: ${10/16}rem;
 
     path {
-      fill: ${({disabled:e,theme:t})=>e?t.colors.neutral600:t.colors.primary600};
+      fill: ${({disabled:e,theme:r})=>e?r.colors.neutral600:r.colors.primary600};
     }
   }
 
@@ -21,5 +21,5 @@
     color: ${({theme:e})=>e.colors.primary700};
   }
 
-  ${m.buttonFocusStyle};
-`,a=j.default.forwardRef(({children:e,href:t,disabled:s=!1,startIcon:c,endIcon:o,isExternal:n=!0,...l},u)=>r.jsxs(k,{ref:u,href:t,disabled:s,isExternal:n,...l,children:[c,r.jsx(g.Typography,{textColor:s?"neutral600":"primary600",children:e}),o,t&&!o&&n&&r.jsx(y.ExternalLink,{})]}));a.displayName="Link";exports.Link=a;
+  ${d.buttonFocusStyle};
+`,s=u.forwardRef(({children:e,href:r,disabled:o=!1,startIcon:a,endIcon:i,isExternal:t=!0,...l},c)=>n.jsxs(x,{ref:c,href:r,disabled:o,isExternal:t,...l,children:[a,n.jsx(m.Typography,{textColor:o?"neutral600":"primary600",children:e}),i,r&&!i&&t&&n.jsx(p.ExternalLink,{})]}));s.displayName="Link";exports.Link=s;

package/dist/v2/Link/Link.js

@@ -2,63 +2,34 @@ import { jsxs as s, jsx as n } from "react/jsx-runtime";
 import m from "react";
 import { ExternalLink as f } from "@strapi/icons";
 import c from "styled-components";
-import { BaseLink as y } from "../../BaseLink/BaseLink.js";
-import { buttonFocusStyle as d } from "../../themes/utils.js";
+import { buttonFocusStyle as y } from "../../themes/utils.js";
+import { BaseLink as d } from "../../BaseLink/BaseLink.js";
 import { Typography as u } from "../../Typography/Typography.js";
-const x = c(y)`
+const x = c(d)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  gap: ${({
-  theme: r
-}) => r.spaces[2]};
-  pointer-events: ${({
-  disabled: r
-}) => r ? "none" : void 0};
+  gap: ${({ theme: r }) => r.spaces[2]};
+  pointer-events: ${({ disabled: r }) => r ? "none" : void 0};
 
   svg {
     font-size: ${10 / 16}rem;
 
     path {
-      fill: ${({
-  disabled: r,
-  theme: o
-}) => r ? o.colors.neutral600 : o.colors.primary600};
+      fill: ${({ disabled: r, theme: o }) => r ? o.colors.neutral600 : o.colors.primary600};
     }
   }
 
   &:hover {
-    color: ${({
-  theme: r
-}) => r.colors.primary500};
+    color: ${({ theme: r }) => r.colors.primary500};
   }
 
   &:active {
-    color: ${({
-  theme: r
-}) => r.colors.primary700};
+    color: ${({ theme: r }) => r.colors.primary700};
   }
 
-  ${d};
-`, $ = m.forwardRef(({
-  children: r,
-  href: o,
-  disabled: e = !1,
-  startIcon: a,
-  endIcon: t,
-  isExternal: i = !0,
-  ...l
-}, p) => s(x, {
-  ref: p,
-  href: o,
-  disabled: e,
-  isExternal: i,
-  ...l,
-  children: [a, n(u, {
-    textColor: e ? "neutral600" : "primary600",
-    children: r
-  }), t, o && !t && i && n(f, {})]
-}));
+  ${y};
+`, $ = m.forwardRef(({ children: r, href: o, disabled: e = !1, startIcon: a, endIcon: t, isExternal: i = !0, ...l }, p) => s(x, { ref: p, href: o, disabled: e, isExternal: i, ...l, children: [a, n(u, { textColor: e ? "neutral600" : "primary600", children: r }), t, o && !t && i && n(f, {})] }));
 $.displayName = "Link";
 export {
   $ as Link

package/dist/v2/Link/index.cjs

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

package/dist/v2/LinkButton/LinkButton.cjs

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),h=require("react"),x=require("styled-components"),j=require("../../BaseButton/BaseButton.cjs"),d=require("../../BaseLink/BaseLink.cjs"),t=require("../../Button/utils.cjs"),l=require("../../Flex/Flex.cjs"),b=require("../../Typography/Typography.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},L=c(h),k=c(x),v=k.default(j.BaseButtonWrapper)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),x=require("styled-components"),e=require("../../Button/utils.cjs"),B=require("../../BaseButton/BaseButton.cjs"),s=require("../../BaseLink/BaseLink.cjs"),u=require("../../Flex/Flex.cjs"),f=require("../../Typography/Typography.cjs"),S=x(B.BaseButtonWrapper)`
   text-decoration: none;
 
   &[aria-disabled='true'] {
-    ${t.getDisabledStyle}
+    ${e.getDisabledStyle}
     &:active {
-      ${t.getDisabledStyle}
+      ${e.getDisabledStyle}
     }
   }
 
   &:hover {
-    ${t.getHoverStyle}
+    ${e.getHoverStyle}
   }
 
   &:active {
-    ${t.getActiveStyle}
+    ${e.getActiveStyle}
   }
 
-  ${t.getVariantStyle}
-`,p=L.default.forwardRef(({variant:e="default",startIcon:r,endIcon:i,disabled:o=!1,children:g,size:a="S",as:y=d.BaseLink,...f},B)=>{const s=a==="S"?2:"10px",u=4;return n.jsxs(v,{ref:B,"aria-disabled":o,size:a,variant:e,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:s,paddingLeft:u,paddingRight:u,paddingTop:s,pointerEvents:o?"none":void 0,...f,as:y||d.BaseLink,children:[r&&n.jsx(l.Flex,{"aria-hidden":!0,children:r}),n.jsx(b.Typography,{variant:a==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:g}),i&&n.jsx(l.Flex,{"aria-hidden":!0,children:i})]})});p.displayName="LinkButton";exports.LinkButton=p;
+  ${e.getVariantStyle}
+`,l=b.forwardRef(({variant:c="default",startIcon:n,endIcon:i,disabled:a=!1,children:p,size:r="S",as:g=s.BaseLink,...y},h)=>{const o=r==="S"?2:"10px",d=4;return t.jsxs(S,{ref:h,"aria-disabled":a,size:r,variant:c,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:o,paddingLeft:d,paddingRight:d,paddingTop:o,pointerEvents:a?"none":void 0,...y,as:g||s.BaseLink,children:[n&&t.jsx(u.Flex,{"aria-hidden":!0,children:n}),t.jsx(f.Typography,{variant:r==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:p}),i&&t.jsx(u.Flex,{"aria-hidden":!0,children:i})]})});l.displayName="LinkButton";exports.LinkButton=l;

package/dist/v2/LinkButton/LinkButton.js

@@ -1,71 +1,33 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import h from "react";
 import y from "styled-components";
-import { BaseButtonWrapper as b } from "../../BaseButton/BaseButton.js";
-import { BaseLink as d } from "../../BaseLink/BaseLink.js";
-import { getDisabledStyle as p, getHoverStyle as v, getActiveStyle as x, getVariantStyle as S } from "../../Button/utils.js";
+import { getDisabledStyle as d, getHoverStyle as b, getActiveStyle as v, getVariantStyle as x } from "../../Button/utils.js";
+import { BaseButtonWrapper as S } from "../../BaseButton/BaseButton.js";
+import { BaseLink as p } from "../../BaseLink/BaseLink.js";
 import { Flex as l } from "../../Flex/Flex.js";
 import { Typography as B } from "../../Typography/Typography.js";
-const k = y(b)`
+const k = y(S)`
   text-decoration: none;
 
   &[aria-disabled='true'] {
-    ${p}
+    ${d}
     &:active {
-      ${p}
+      ${d}
     }
   }
 
   &:hover {
-    ${v}
+    ${b}
   }
 
   &:active {
-    ${x}
+    ${v}
   }
 
-  ${S}
-`, L = h.forwardRef(({
-  variant: m = "default",
-  startIcon: e,
-  endIcon: i,
-  disabled: o = !1,
-  children: u,
-  size: t = "S",
-  as: f = d,
-  ...s
-}, g) => {
+  ${x}
+`, L = h.forwardRef(({ variant: m = "default", startIcon: e, endIcon: i, disabled: o = !1, children: u, size: t = "S", as: f = p, ...s }, g) => {
   const a = t === "S" ? 2 : "10px", n = 4;
-  return c(k, {
-    ref: g,
-    "aria-disabled": o,
-    size: t,
-    variant: m,
-    background: "buttonPrimary600",
-    borderColor: "buttonPrimary600",
-    hasRadius: !0,
-    gap: 2,
-    inline: !0,
-    paddingBottom: a,
-    paddingLeft: n,
-    paddingRight: n,
-    paddingTop: a,
-    pointerEvents: o ? "none" : void 0,
-    ...s,
-    as: f || d,
-    children: [e && r(l, {
-      "aria-hidden": !0,
-      children: e
-    }), r(B, {
-      variant: t === "S" ? "pi" : void 0,
-      fontWeight: "bold",
-      textColor: "buttonNeutral0",
-      children: u
-    }), i && r(l, {
-      "aria-hidden": !0,
-      children: i
-    })]
-  });
+  return c(k, { ref: g, "aria-disabled": o, size: t, variant: m, background: "buttonPrimary600", borderColor: "buttonPrimary600", hasRadius: !0, gap: 2, inline: !0, paddingBottom: a, paddingLeft: n, paddingRight: n, paddingTop: a, pointerEvents: o ? "none" : void 0, ...s, as: f || p, children: [e && r(l, { "aria-hidden": !0, children: e }), r(B, { variant: t === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children: u }), i && r(l, { "aria-hidden": !0, children: i })] });
 });
 L.displayName = "LinkButton";
 export {

package/dist/v2/LinkButton/index.cjs

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

package/dist/v2/MainNav/MainNav.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("prop-types"),s=require("styled-components"),c=require("./MainNavContext.cjs"),i=require("../../Flex/Flex.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=d.default(i.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const o=require("prop-types"),i=require("styled-components"),a=require("./MainNavContext.cjs"),s=require("../../Flex/Flex.cjs"),l=i(s.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,o=({condensed:e,...n})=>a.default.createElement(c.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:u.default.bool};exports.MainNav=o;
+`,r=({condensed:e,...t})=>n.jsx(a.MainNavContext.Provider,{value:e,children:n.jsx(l,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...t})});r.defaultProps={condensed:!1};r.propTypes={condensed:o.bool};exports.MainNav=r;

package/dist/v2/MainNav/MainNav.js

@@ -1,32 +1,33 @@
-import o from "react";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
 import n from "prop-types";
-import a from "styled-components";
-import { MainNavContext as i } from "./MainNavContext.js";
-import { Flex as m } from "../../Flex/Flex.js";
-const p = a(m)`
-  width: ${({ condensed: e }) => e ? "max-content" : `${224 / 16}rem`};
-  border-right: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, r = ({ condensed: e, ...t }) => /* @__PURE__ */ o.createElement(i.Provider, { value: e }, /* @__PURE__ */ o.createElement(
-  p,
+import i from "styled-components";
+import { MainNavContext as a } from "./MainNavContext.js";
+import { Flex as p } from "../../Flex/Flex.js";
+const m = i(p)`
+  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
+`, t = ({ condensed: o, ...e }) => /* @__PURE__ */ r(a.Provider, { value: o, children: /* @__PURE__ */ r(
+  m,
   {
     alignItems: "normal",
     as: "nav",
     background: "neutral0",
-    condensed: e,
+    condensed: o,
     direction: "column",
     height: "100vh",
     position: "sticky",
     top: 0,
     zIndex: 2,
-    ...t
+    ...e
   }
-));
-r.defaultProps = {
+) });
+t.defaultProps = {
   condensed: !1
 };
-r.propTypes = {
+t.propTypes = {
   condensed: n.bool
 };
 export {
-  r as MainNav
+  t as MainNav
 };

package/dist/v2/MainNav/MainNavContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),a=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(),n=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=n;

package/dist/v2/MainNav/NavBrand.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),m=require("prop-types"),B=require("styled-components"),x=require("./MainNavContext.cjs"),f=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),h=require("../../Flex/Flex.cjs"),u=require("../../Typography/Typography.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(y),a=r(m),g=r(B),p=g.default.div`
-  border-radius: ${({theme:e})=>e.borderRadius};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),n=require("prop-types"),u=require("styled-components"),g=require("./MainNavContext.cjs"),h=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Flex/Flex.cjs"),l=require("../../Typography/Typography.cjs"),p=u.div`
+  border-radius: ${({theme:r})=>r.borderRadius};
 
   svg,
   img {
-    height: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
-    width: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
+    height: ${({condensed:r})=>r?`${40/16}rem`:`${32/16}rem`};
+    width: ${({condensed:r})=>r?`${40/16}rem`:`${32/16}rem`};
   }
-`,E=g.default(f.BaseLink)`
+`,y=u(h.BaseLink)`
   text-decoration: unset;
   color: inherit;
-`,n=t.default.forwardRef(({workplace:e,title:l,icon:i,...o},s)=>x.useMainNav()?t.default.createElement(f.BaseLink,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(p,{condensed:!0},i,t.default.createElement(c.VisuallyHidden,null,t.default.createElement("span",null,l),t.default.createElement("span",null,e))))):t.default.createElement(E,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(h.Flex,null,t.default.createElement(p,{"aria-hidden":!0,tabIndex:-1},i),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span"},l,t.default.createElement(c.VisuallyHidden,{as:"span"},e)),t.default.createElement(u.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0},e))))));n.displayName="NavBrand";n.defaultProps={to:"/"};n.propTypes={icon:a.default.node.isRequired,title:a.default.string.isRequired,to:a.default.string,workplace:a.default.string.isRequired};exports.NavBrand=n;
+`,i=x.forwardRef(({workplace:r,title:s,icon:t,...a},o)=>g.useMainNav()?e.jsx(h.BaseLink,{ref:o,...a,children:e.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:e.jsxs(p,{condensed:!0,children:[t,e.jsxs(c.VisuallyHidden,{children:[e.jsx("span",{children:s}),e.jsx("span",{children:r})]})]})})}):e.jsx(y,{ref:o,...a,children:e.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:e.jsxs(j.Flex,{children:[e.jsx(p,{"aria-hidden":!0,tabIndex:-1,children:t}),e.jsxs(d.Box,{paddingLeft:2,children:[e.jsxs(l.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:[s,e.jsx(c.VisuallyHidden,{as:"span",children:r})]}),e.jsx(l.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:r})]})]})})}));i.displayName="NavBrand";i.defaultProps={to:"/"};i.propTypes={icon:n.node.isRequired,title:n.string.isRequired,to:n.string,workplace:n.string.isRequired};exports.NavBrand=i;