@strapi/design-system 1.3.1-alpha.0 → 1.3.1-alpha.1

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,164 +1,190 @@
-import t, { useRef as T, useEffect as g, useState as x, Children as F, cloneElement as V } from "react";
-import n from "prop-types";
-import h from "styled-components";
-import q from "@strapi/icons/CarretDown";
-import { NavLink as L } from "react-router-dom";
-import { Typography as M } from "../Typography/Typography.js";
-import { Box as S } from "../Box/Box.js";
-import { Flex as W } from "../Flex/Flex.js";
-import { Button as O } from "../Button/Button.js";
-import { POPOVER_PLACEMENTS as _, Popover as z } from "../Popover/Popover.js";
-import { getOptionStyle as v } from "./utils.js";
-import { useId as j } from "../helpers/useId.js";
-import { KeyboardKeys as s } from "../helpers/keyboardKeys.js";
-const U = h.button`
+var U = Object.defineProperty;
+var D = Object.getOwnPropertySymbols;
+var B = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
+var b = (e, r, n) => r in e ? U(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, y = (e, r) => {
+  for (var n in r || (r = {}))
+    B.call(r, n) && b(e, n, r[n]);
+  if (D)
+    for (var n of D(r))
+      K.call(r, n) && b(e, n, r[n]);
+  return e;
+};
+var x = (e, r) => {
+  var n = {};
+  for (var s in e)
+    B.call(e, s) && r.indexOf(s) < 0 && (n[s] = e[s]);
+  if (e != null && D)
+    for (var s of D(e))
+      r.indexOf(s) < 0 && K.call(e, s) && (n[s] = e[s]);
+  return n;
+};
+import i, { useRef as O, useEffect as k, useState as A, Children as G, cloneElement as H } from "react";
+import o from "prop-types";
+import C from "styled-components";
+import J from "@strapi/icons/CarretDown";
+import { NavLink as Q } from "react-router-dom";
+import { Typography as N } from "../Typography/Typography.js";
+import { Box as v } from "../Box/Box.js";
+import { Flex as X } from "../Flex/Flex.js";
+import { Button as $ } from "../Button/Button.js";
+import { POPOVER_PLACEMENTS as Y, Popover as Z } from "../Popover/Popover.js";
+import { getOptionStyle as F } from "./utils.js";
+import { useId as ee } from "../helpers/useId.js";
+import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
+const ne = C.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${v}
-`, G = h(L)`
+  ${F}
+`, te = C(Q)`
   text-decoration: none;
-  ${v}
-`, H = h.span`
+  ${F}
+`, oe = C.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, J = h(O)`
-  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[3]}`};
-`, R = ({ children: o, onClick: l, to: m, isFocused: a, ...f }) => {
-  const i = T();
-  g(() => {
-    a && i.current && i.current.focus();
-  }, [a]);
-  const d = {
-    tabIndex: a ? 0 : -1,
-    ref: i,
-    role: "menuitem",
-    ...f
-  }, D = (y) => {
-    (y.key === s.SPACE || y.key === s.ENTER) && l();
+`, re = C($)`
+  padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
+`, V = (T) => {
+  var g = T, { children: e, onClick: r, to: n, isFocused: s } = g, E = x(g, ["children", "onClick", "to", "isFocused"]);
+  const p = O();
+  k(() => {
+    s && p.current && p.current.focus();
+  }, [s]);
+  const h = y({
+    tabIndex: s ? 0 : -1,
+    ref: p,
+    role: "menuitem"
+  }, E), R = (l) => {
+    (l.key === c.SPACE || l.key === c.ENTER) && r();
   };
-  return m ? /* @__PURE__ */ t.createElement(G, {
-    to: m,
-    ...d
-  }, /* @__PURE__ */ t.createElement(S, {
+  return n ? /* @__PURE__ */ i.createElement(te, y({
+    to: n
+  }, h), /* @__PURE__ */ i.createElement(v, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(M, null, o))) : /* @__PURE__ */ t.createElement(U, {
-    onKeyDown: D,
-    onMouseDown: l,
-    type: "button",
-    ...d
-  }, /* @__PURE__ */ t.createElement(S, {
+  }, /* @__PURE__ */ i.createElement(N, null, e))) : /* @__PURE__ */ i.createElement(ne, y({
+    onKeyDown: R,
+    onMouseDown: r,
+    type: "button"
+  }, h), /* @__PURE__ */ i.createElement(v, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(M, null, o)));
+  }, /* @__PURE__ */ i.createElement(N, null, e)));
 };
-R.defaultProps = {
+V.defaultProps = {
   onClick: () => {
   },
   isFocused: !1,
   to: void 0
 };
-R.propTypes = {
-  as: n.elementType,
-  children: n.node.isRequired,
-  isFocused: n.bool,
-  onClick: n.func,
-  to: n.string
+V.propTypes = {
+  as: o.elementType,
+  children: o.node.isRequired,
+  isFocused: o.bool,
+  onClick: o.func,
+  to: o.string
 };
-const P = ({
-  label: o,
-  children: l,
-  id: m,
-  as: a,
-  onOpen: f = () => {
-  },
-  onClose: i = () => {
-  },
-  size: d,
-  popoverPlacement: D,
-  ...y
-}) => {
-  const c = T(), w = j("simplemenu", m), k = T(!1), [p, u] = x(!1), [C, I] = x(0), E = F.toArray(l), b = a || (d === "S" ? J : O);
-  g(() => {
-    if (["string", "number"].includes(typeof o)) {
-      const e = E.findIndex((r) => r.props.children === o);
-      e !== -1 && I(e);
+const I = (R) => {
+  var l = R, {
+    label: e,
+    children: r,
+    id: n,
+    as: s,
+    onOpen: E = () => {
+    },
+    onClose: T = () => {
+    },
+    size: g,
+    popoverPlacement: p
+  } = l, h = x(l, [
+    "label",
+    "children",
+    "id",
+    "as",
+    "onOpen",
+    "onClose",
+    "size",
+    "popoverPlacement"
+  ]);
+  const u = O(), M = ee("simplemenu", n), m = O(!1), [f, d] = A(!1), [S, w] = A(0), P = G.toArray(r), q = s || (g === "S" ? re : $);
+  k(() => {
+    if (["string", "number"].includes(typeof e)) {
+      const t = P.findIndex((a) => a.props.children === e);
+      t !== -1 && w(t);
     }
-  }, [o]), g(() => {
-    k?.current ? p && typeof f == "function" ? f() : typeof i == "function" && i() : k.current = !0;
-  }, [k, p]), g(() => {
-    t.isValidElement(o) && C == -1 && c.current.focus();
-  }, [o, C]);
-  const B = (e) => {
-    p && (e.key === s.ESCAPE && (e.stopPropagation(), u(!1), c.current.focus()), e.key === s.DOWN && I((r) => r === E.length - 1 ? 0 : r + 1), e.key === s.UP && I((r) => r === 0 ? E.length - 1 : r - 1));
-  }, K = (e) => {
-    (e.key === s.ENTER || e.key === s.SPACE) && u((r) => !r);
-  }, A = (e) => {
-    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || u(!1);
-  }, N = (e) => {
-    e.preventDefault(), u((r) => !r);
-  }, $ = E.map((e, r) => /* @__PURE__ */ t.createElement(W, {
+  }, [e]), k(() => {
+    m != null && m.current ? f && typeof E == "function" ? E() : typeof T == "function" && T() : m.current = !0;
+  }, [m, f]), k(() => {
+    i.isValidElement(e) && S == -1 && u.current.focus();
+  }, [e, S]);
+  const L = (t) => {
+    f && (t.key === c.ESCAPE && (t.stopPropagation(), d(!1), u.current.focus()), t.key === c.DOWN && w((a) => a === P.length - 1 ? 0 : a + 1), t.key === c.UP && w((a) => a === 0 ? P.length - 1 : a - 1));
+  }, W = (t) => {
+    (t.key === c.ENTER || t.key === c.SPACE) && d((a) => !a);
+  }, _ = (t) => {
+    t.preventDefault(), t.currentTarget.contains(t.relatedTarget) || d(!1);
+  }, z = (t) => {
+    t.preventDefault(), d((a) => !a);
+  }, j = P.map((t, a) => /* @__PURE__ */ i.createElement(X, {
     as: "li",
-    key: r,
+    key: a,
     justifyContent: "center",
     role: "menuitem"
-  }, V(e, {
+  }, H(t, {
     onClick: () => {
-      e.props.onClick(), u(!1), c.current.focus();
+      t.props.onClick(), d(!1), u.current.focus();
     },
-    isFocused: C === r
+    isFocused: S === a
   })));
-  return /* @__PURE__ */ t.createElement("div", {
-    onKeyDown: B
-  }, /* @__PURE__ */ t.createElement(b, {
-    label: t.isValidElement(o) ? null : o,
+  return /* @__PURE__ */ i.createElement("div", {
+    onKeyDown: L
+  }, /* @__PURE__ */ i.createElement(q, y({
+    label: i.isValidElement(e) ? null : e,
     "aria-haspopup": !0,
-    "aria-expanded": p,
-    "aria-controls": w,
-    onKeyDown: K,
-    onMouseDown: N,
-    ref: c,
+    "aria-expanded": f,
+    "aria-controls": M,
+    onKeyDown: W,
+    onMouseDown: z,
+    ref: u,
     type: "button",
     variant: "ghost",
-    endIcon: /* @__PURE__ */ t.createElement(H, null, /* @__PURE__ */ t.createElement(q, {
+    endIcon: /* @__PURE__ */ i.createElement(oe, null, /* @__PURE__ */ i.createElement(J, {
       "aria-hidden": !0
-    })),
-    ...y
-  }, o), p && /* @__PURE__ */ t.createElement(z, {
-    onBlur: A,
-    placement: D,
-    source: c,
+    }))
+  }, h), e), f && /* @__PURE__ */ i.createElement(Z, {
+    onBlur: _,
+    placement: p,
+    source: u,
     spacing: 4
-  }, /* @__PURE__ */ t.createElement(S, {
+  }, /* @__PURE__ */ i.createElement(v, {
     role: "menu",
     as: "ul",
     padding: 1,
-    id: w
-  }, $)));
+    id: M
+  }, j)));
 };
-P.defaultProps = {
+I.defaultProps = {
   as: void 0
 };
-P.displayName = "SimpleMenu";
-P.defaultProps = {
+I.displayName = "SimpleMenu";
+I.defaultProps = {
   popoverPlacement: "bottom-start",
   size: "M"
 };
-P.propTypes = {
-  as: n.any,
-  children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
-  id: n.string,
-  label: n.oneOfType([n.string, n.number, n.element]).isRequired,
-  onClose: n.func,
-  onOpen: n.func,
-  popoverPlacement: n.oneOf(_),
-  size: n.oneOf(["S", "M"])
+I.propTypes = {
+  as: o.any,
+  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired,
+  id: o.string,
+  label: o.oneOfType([o.string, o.number, o.element]).isRequired,
+  onClose: o.func,
+  onOpen: o.func,
+  popoverPlacement: o.oneOf(Y),
+  size: o.oneOf(["S", "M"])
 };
 export {
-  R as MenuItem,
-  P as SimpleMenu
+  V as MenuItem,
+  I as SimpleMenu
 };

package/dist/Stack/Stack.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),f=require("prop-types"),g=require("styled-components"),d=require("../Flex/Flex.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=r(c),n=r(f),u=r(g),p={size:!0},m=u.default(d.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
+"use strict";var w=Object.defineProperty;var n=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var u=(e,t,a)=>t in e?w(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,s=(e,t)=>{for(var a in t||(t={}))p.call(t,a)&&u(e,a,t[a]);if(n)for(var a of n(t))f.call(t,a)&&u(e,a,t[a]);return e};var g=(e,t)=>{var a={};for(var o in e)p.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&f.call(e,o)&&(a[o]=e[o]);return a};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),P=require("prop-types"),S=require("styled-components"),h=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=l(y),i=l(P),_=l(S),b={size:!0},F=_.default(h.Flex).withConfig({shouldForwardProp:(e,t)=>!b[e]&&t(e)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
@@ -7,7 +7,7 @@
   & > * + * {
     margin-top: ${({theme:e,spacing:t})=>e.spaces[t]};
   }
-`,y=u.default(d.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
+`,k=_.default(h.Flex).withConfig({shouldForwardProp:(e,t)=>!b[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
@@ -16,4 +16,4 @@
   & > * + * {
     margin-left: ${({theme:e,spacing:t})=>e.spaces[t]};
   }
-`,a=c.forwardRef(({horizontal:e,spacing:t,size:o,...s},i)=>(o&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?l.default.createElement(y,{ref:i,spacing:t||o,...s}):l.default.createElement(m,{direction:"column",alignItems:"stretch",ref:i,spacing:t||o,...s})));a.displayName="Stack";a.defaultProps={horizontal:!1,size:void 0,spacing:void 0};a.propTypes={horizontal:n.default.bool,size:n.default.number,spacing:n.default.number};exports.Stack=a;
+`,r=y.forwardRef((x,c)=>{var d=x,{horizontal:e,spacing:t,size:a}=d,o=g(d,["horizontal","spacing","size"]);return a&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?m.default.createElement(k,s({ref:c,spacing:t||a},o)):m.default.createElement(F,s({direction:"column",alignItems:"stretch",ref:c,spacing:t||a},o))});r.displayName="Stack";r.defaultProps={horizontal:!1,size:void 0,spacing:void 0};r.propTypes={horizontal:i.default.bool,size:i.default.number,spacing:i.default.number};exports.Stack=r;

package/dist/Stack/Stack.js

@@ -1,11 +1,31 @@
-import s, { forwardRef as p } from "react";
-import r from "prop-types";
-import c from "styled-components";
-import { Flex as m } from "../Flex/Flex.js";
-const l = {
+var P = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var l = (e, t, o) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, i = (e, t) => {
+  for (var o in t || (t = {}))
+    p.call(t, o) && l(e, o, t[o]);
+  if (a)
+    for (var o of a(t))
+      d.call(t, o) && l(e, o, t[o]);
+  return e;
+};
+var g = (e, t) => {
+  var o = {};
+  for (var r in e)
+    p.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && a)
+    for (var r of a(e))
+      t.indexOf(r) < 0 && d.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import f, { forwardRef as b } from "react";
+import n from "prop-types";
+import u from "styled-components";
+import { Flex as h } from "../Flex/Flex.js";
+const w = {
   size: !0
-}, d = c(m).withConfig({
-  shouldForwardProp: (e, t) => !l[e] && t(e)
+}, k = u(h).withConfig({
+  shouldForwardProp: (e, t) => !w[e] && t(e)
 })`
   & > * {
     margin-top: 0;
@@ -15,8 +35,8 @@ const l = {
   & > * + * {
     margin-top: ${({ theme: e, spacing: t }) => e.spaces[t]};
   }
-`, g = c(m).withConfig({
-  shouldForwardProp: (e, t) => !l[e] && t(e)
+`, S = u(h).withConfig({
+  shouldForwardProp: (e, t) => !w[e] && t(e)
 })`
   & > * {
     margin-left: 0;
@@ -26,30 +46,31 @@ const l = {
   & > * + * {
     margin-left: ${({ theme: e, spacing: t }) => e.spaces[t]};
   }
-`, a = p(({ horizontal: e, spacing: t, size: o, ...i }, n) => (o && console.warn(
-  'Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'
-), e ? /* @__PURE__ */ s.createElement(g, {
-  ref: n,
-  spacing: t || o,
-  ...i
-}) : /* @__PURE__ */ s.createElement(d, {
-  direction: "column",
-  alignItems: "stretch",
-  ref: n,
-  spacing: t || o,
-  ...i
-})));
-a.displayName = "Stack";
-a.defaultProps = {
+`, s = b((y, c) => {
+  var m = y, { horizontal: e, spacing: t, size: o } = m, r = g(m, ["horizontal", "spacing", "size"]);
+  return o && console.warn(
+    'Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'
+  ), e ? /* @__PURE__ */ f.createElement(S, i({
+    ref: c,
+    spacing: t || o
+  }, r)) : /* @__PURE__ */ f.createElement(k, i({
+    direction: "column",
+    alignItems: "stretch",
+    ref: c,
+    spacing: t || o
+  }, r));
+});
+s.displayName = "Stack";
+s.defaultProps = {
   horizontal: !1,
   size: void 0,
   spacing: void 0
 };
-a.propTypes = {
-  horizontal: r.bool,
-  size: r.number,
-  spacing: r.number
+s.propTypes = {
+  horizontal: n.bool,
+  size: n.number,
+  spacing: n.number
 };
 export {
-  a as Stack
+  s as Stack
 };

package/dist/Status/Status.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),b=require("prop-types"),m=require("../Box/Box.cjs"),$=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),T=require("styled-components"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(h),o=a(b),c=a(T),_=c.default.div`
+"use strict";var B=Object.defineProperty;var a=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var i=(e,t,o)=>t in e?B(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,y=(e,t)=>{for(var o in t||(t={}))g.call(t,o)&&i(e,o,t[o]);if(a)for(var o of a(t))f.call(t,o)&&i(e,o,t[o]);return e};var h=(e,t)=>{var o={};for(var r in e)g.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&a)for(var r of a(e))t.indexOf(r)<0&&f.call(e,r)&&(o[r]=e[r]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react"),q=require("prop-types"),j=require("../Box/Box.cjs"),C=require("../Flex/Flex.cjs"),R=require("../Typography/Typography.cjs"),k=require("styled-components"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=n(S),s=n(q),b=n(k),w=b.default.div`
   margin-right: ${({theme:e})=>e.spaces[3]};
   width: ${6/16}rem;
   height: ${6/16}rem;
   border-radius: 50%;
   background: ${({theme:e,backgroundColor:t})=>e.colors[t]};
-`,B=c.default(m.Box)`
-  ${x.Typography} {
+`,F=b.default(j.Box)`
+  ${R.Typography} {
     color: ${({theme:e,textColor:t})=>e.colors[t]};
   }
-`,s=({variant:e,showBullet:t,size:l,children:n,...p})=>{const i=`${e}100`,g=`${e}200`,f=`${e}600`,y=`${e}600`,u=l==="S"?2:5,d=l==="S"?1:4;return r.default.createElement(B,{borderColor:g,textColor:y,background:i,hasRadius:!0,paddingTop:d,paddingBottom:d,paddingLeft:u,paddingRight:u,...p},t?r.default.createElement($.Flex,null,r.default.createElement(_,{backgroundColor:f}),n):n)};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:o.default.node.isRequired,showBullet:o.default.bool,size:o.default.oneOf(["S","M"]),variant:o.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;
+`,u=M=>{var d=M,{variant:e,showBullet:t,size:o,children:r}=d,m=h(d,["variant","showBullet","size","children"]);const $=`${e}100`,x=`${e}200`,T=`${e}600`,_=`${e}600`,c=o==="S"?2:5,p=o==="S"?1:4;return l.default.createElement(F,y({borderColor:x,textColor:_,background:$,hasRadius:!0,paddingTop:p,paddingBottom:p,paddingLeft:c,paddingRight:c},m),t?l.default.createElement(C.Flex,null,l.default.createElement(w,{backgroundColor:T}),r):r)};u.defaultProps={showBullet:!0,size:"M",variant:"primary"};u.propTypes={children:s.default.node.isRequired,showBullet:s.default.bool,size:s.default.oneOf(["S","M"]),variant:s.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=u;

package/dist/Status/Status.js

@@ -1,46 +1,66 @@
-import t from "react";
-import e from "prop-types";
-import { Box as f } from "../Box/Box.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { Typography as h } from "../Typography/Typography.js";
-import l from "styled-components";
-const b = l.div`
+var S = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var i = (o, r, e) => r in o ? S(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, u = (o, r) => {
+  for (var e in r || (r = {}))
+    c.call(r, e) && i(o, e, r[e]);
+  if (n)
+    for (var e of n(r))
+      m.call(r, e) && i(o, e, r[e]);
+  return o;
+};
+var g = (o, r) => {
+  var e = {};
+  for (var t in o)
+    c.call(o, t) && r.indexOf(t) < 0 && (e[t] = o[t]);
+  if (o != null && n)
+    for (var t of n(o))
+      r.indexOf(t) < 0 && m.call(o, t) && (e[t] = o[t]);
+  return e;
+};
+import s from "react";
+import a from "prop-types";
+import { Box as k } from "../Box/Box.js";
+import { Flex as w } from "../Flex/Flex.js";
+import { Typography as x } from "../Typography/Typography.js";
+import f from "styled-components";
+const R = f.div`
   margin-right: ${({ theme: o }) => o.spaces[3]};
   width: ${6 / 16}rem;
   height: ${6 / 16}rem;
   border-radius: 50%;
   background: ${({ theme: o, backgroundColor: r }) => o.colors[r]};
-`, y = l(f)`
-  ${h} {
+`, T = f(k)`
+  ${x} {
     color: ${({ theme: o, textColor: r }) => o.colors[r]};
   }
-`, p = ({ variant: o, showBullet: r, size: n, children: a, ...i }) => {
-  const c = `${o}100`, m = `${o}200`, u = `${o}600`, g = `${o}600`, s = n === "S" ? 2 : 5, d = n === "S" ? 1 : 4;
-  return /* @__PURE__ */ t.createElement(y, {
-    borderColor: m,
-    textColor: g,
-    background: c,
+`, $ = (E) => {
+  var d = E, { variant: o, showBullet: r, size: e, children: t } = d, h = g(d, ["variant", "showBullet", "size", "children"]);
+  const b = `${o}100`, y = `${o}200`, B = `${o}600`, C = `${o}600`, l = e === "S" ? 2 : 5, p = e === "S" ? 1 : 4;
+  return /* @__PURE__ */ s.createElement(T, u({
+    borderColor: y,
+    textColor: C,
+    background: b,
     hasRadius: !0,
-    paddingTop: d,
-    paddingBottom: d,
-    paddingLeft: s,
-    paddingRight: s,
-    ...i
-  }, r ? /* @__PURE__ */ t.createElement($, null, /* @__PURE__ */ t.createElement(b, {
-    backgroundColor: u
-  }), a) : a);
+    paddingTop: p,
+    paddingBottom: p,
+    paddingLeft: l,
+    paddingRight: l
+  }, h), r ? /* @__PURE__ */ s.createElement(w, null, /* @__PURE__ */ s.createElement(R, {
+    backgroundColor: B
+  }), t) : t);
 };
-p.defaultProps = {
+$.defaultProps = {
   showBullet: !0,
   size: "M",
   variant: "primary"
 };
-p.propTypes = {
-  children: e.node.isRequired,
-  showBullet: e.bool,
-  size: e.oneOf(["S", "M"]),
-  variant: e.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
+$.propTypes = {
+  children: a.node.isRequired,
+  showBullet: a.bool,
+  size: a.oneOf(["S", "M"]),
+  variant: a.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
 };
 export {
-  p as Status
+  $ as Status
 };

package/dist/SubNav/SubNav.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("styled-components"),u=require("prop-types"),d=require("../Grid/Grid.cjs");require("../Grid/GridItem.cjs");const t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(s),c=t(i),n=t(u),r=`${232/16}rem`,p=c.default(d.Grid)`
-  width: ${r};
+"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var i=(e,t,r)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))u.call(t,r)&&i(e,r,t[r]);if(a)for(var r of a(t))d.call(t,r)&&i(e,r,t[r]);return e};var c=(e,t)=>{var r={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("styled-components"),v=require("prop-types"),_=require("../Grid/Grid.cjs");require("../Grid/GridItem.cjs");const s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},g=s(f),h=s(y),q=s(v),n=`${232/16}rem`,G=h.default(_.Grid)`
+  width: ${n};
   background: ${({theme:e})=>e.colors.neutral100};
   position: sticky;
   top: 0;
@@ -7,4 +7,4 @@
   overflow-y: auto;
   border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
   z-index: 1;
-`,o=({ariaLabel:e,...a})=>l.default.createElement(p,{"aria-label":e,as:"nav",...a});o.propTypes={ariaLabel:n.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;
+`,p=r=>{var o=r,{ariaLabel:e}=o,t=c(o,["ariaLabel"]);return g.default.createElement(G,l({"aria-label":e,as:"nav"},t))};p.propTypes={ariaLabel:q.default.string.isRequired};exports.SubNav=p;exports.subNavWidth=n;

package/dist/SubNav/SubNav.js

@@ -1,10 +1,30 @@
-import t from "react";
-import e from "styled-components";
-import i from "prop-types";
-import { Grid as a } from "../Grid/Grid.js";
+var m = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+var a = (r, o, t) => o in r ? m(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
+  for (var t in o || (o = {}))
+    p.call(o, t) && a(r, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      s.call(o, t) && a(r, t, o[t]);
+  return r;
+};
+var n = (r, o) => {
+  var t = {};
+  for (var e in r)
+    p.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && i)
+    for (var e of i(r))
+      o.indexOf(e) < 0 && s.call(r, e) && (t[e] = r[e]);
+  return t;
+};
+import d from "react";
+import u from "styled-components";
+import c from "prop-types";
+import { Grid as b } from "../Grid/Grid.js";
 import "../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = e(a)`
-  width: ${p};
+const f = `${232 / 16}rem`, h = u(b)`
+  width: ${f};
   background: ${({ theme: r }) => r.colors.neutral100};
   position: sticky;
   top: 0;
@@ -12,15 +32,17 @@ const p = `${232 / 16}rem`, s = e(a)`
   overflow-y: auto;
   border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
   z-index: 1;
-`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, {
-  "aria-label": r,
-  as: "nav",
-  ...o
-});
-l.propTypes = {
-  ariaLabel: i.string.isRequired
+`, v = (t) => {
+  var e = t, { ariaLabel: r } = e, o = n(e, ["ariaLabel"]);
+  return /* @__PURE__ */ d.createElement(h, l({
+    "aria-label": r,
+    as: "nav"
+  }, o));
+};
+v.propTypes = {
+  ariaLabel: c.string.isRequired
 };
 export {
-  l as SubNav,
-  p as subNavWidth
+  v as SubNav,
+  f as subNavWidth
 };