@strapi/design-system 1.4.1 → 1.5.0-alpha.0

package/dist/SimpleMenu/SimpleMenu.js

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

package/dist/Stack/Stack.cjs

@@ -1,4 +1,4 @@
-"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)})`
+"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)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
@@ -7,7 +7,7 @@
   & > * + * {
     margin-top: ${({theme:e,spacing:t})=>e.spaces[t]};
   }
-`,k=_.default(h.Flex).withConfig({shouldForwardProp:(e,t)=>!b[e]&&t(e)})`
+`,y=u.default(d.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
@@ -16,4 +16,4 @@
   & > * + * {
     margin-left: ${({theme:e,spacing:t})=>e.spaces[t]};
   }
-`,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;
+`,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;

package/dist/Stack/Stack.js

@@ -1,31 +1,11 @@
-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 = {
+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 = {
   size: !0
-}, k = u(h).withConfig({
-  shouldForwardProp: (e, t) => !w[e] && t(e)
+}, d = c(m).withConfig({
+  shouldForwardProp: (e, t) => !l[e] && t(e)
 })`
   & > * {
     margin-top: 0;
@@ -35,8 +15,8 @@ const w = {
   & > * + * {
     margin-top: ${({ theme: e, spacing: t }) => e.spaces[t]};
   }
-`, S = u(h).withConfig({
-  shouldForwardProp: (e, t) => !w[e] && t(e)
+`, g = c(m).withConfig({
+  shouldForwardProp: (e, t) => !l[e] && t(e)
 })`
   & > * {
     margin-left: 0;
@@ -46,31 +26,30 @@ const w = {
   & > * + * {
     margin-left: ${({ theme: e, spacing: t }) => e.spaces[t]};
   }
-`, 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 = {
+`, 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 = {
   horizontal: !1,
   size: void 0,
   spacing: void 0
 };
-s.propTypes = {
-  horizontal: n.bool,
-  size: n.number,
-  spacing: n.number
+a.propTypes = {
+  horizontal: r.bool,
+  size: r.number,
+  spacing: r.number
 };
 export {
-  s as Stack
+  a as Stack
 };

package/dist/Status/Status.cjs

@@ -1,11 +1,11 @@
-"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`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),b=require("prop-types"),m=require("styled-components"),$=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),T=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(h),o=a(b),c=a(m),_=c.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]};
-`,F=b.default(C.Box)`
-  ${k.Typography} {
+`,B=c.default($.Box)`
+  ${T.Typography} {
     color: ${({theme:e,textColor:t})=>e.colors[t]};
   }
-`,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;
+`,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(x.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;

package/dist/Status/Status.js

@@ -1,66 +1,46 @@
-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`
+import t from "react";
+import e from "prop-types";
+import l from "styled-components";
+import { Box as f } from "../Box/Box.js";
+import { Flex as $ } from "../Flex/Flex.js";
+import { Typography as h } from "../Typography/Typography.js";
+const b = l.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]};
-`, T = f(k)`
-  ${x} {
+`, y = l(f)`
+  ${h} {
     color: ${({ theme: o, textColor: r }) => o.colors[r]};
   }
-`, $ = (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,
+`, 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,
     hasRadius: !0,
-    paddingTop: p,
-    paddingBottom: p,
-    paddingLeft: l,
-    paddingRight: l
-  }, h), r ? /* @__PURE__ */ s.createElement(w, null, /* @__PURE__ */ s.createElement(R, {
-    backgroundColor: B
-  }), t) : t);
+    paddingTop: d,
+    paddingBottom: d,
+    paddingLeft: s,
+    paddingRight: s,
+    ...i
+  }, r ? /* @__PURE__ */ t.createElement($, null, /* @__PURE__ */ t.createElement(b, {
+    backgroundColor: u
+  }), a) : a);
 };
-$.defaultProps = {
+p.defaultProps = {
   showBullet: !0,
   size: "M",
   variant: "primary"
 };
-$.propTypes = {
-  children: a.node.isRequired,
-  showBullet: a.bool,
-  size: a.oneOf(["S", "M"]),
-  variant: a.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
+p.propTypes = {
+  children: e.node.isRequired,
+  showBullet: e.bool,
+  size: e.oneOf(["S", "M"]),
+  variant: e.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
 };
 export {
-  $ as Status
+  p as Status
 };

package/dist/SubNav/SubNav.cjs

@@ -1,5 +1,5 @@
-"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};
+"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};
   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;
-`,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;
+`,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;