@strapi/design-system 1.4.0-beta.0 → 1.4.0-beta.1

package/dist/SimpleMenu/SimpleMenu.js

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