@strapi/design-system 1.7.5 → 1.7.7

package/dist/Popover/Popover.js

@@ -1,13 +1,19 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import * as a from "react";
-import { useFloating as k, offset as $, shift as y, flip as v, autoUpdate as P } from "@floating-ui/react-dom";
-import p from "styled-components";
-import { stripReactIdOfColon as f } from "../helpers/strings.js";
-import { useId as I } from "../hooks/useId.js";
-import { useIntersection as R } from "../hooks/useIntersection.js";
-import { Box as d } from "../Box/Box.js";
-import { Portal as S } from "../Portal/Portal.js";
-const N = [
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import * as o from "react";
+import { useFloating as I, offset as W, shift as A, flip as K, autoUpdate as j } from "@floating-ui/react-dom";
+import { FocusScope as M } from "@radix-ui/react-focus-scope";
+import { useCallbackRef as T, composeEventHandlers as v } from "@strapi/ui-primitives";
+import { hideOthers as U } from "aria-hidden";
+import { RemoveScroll as B } from "react-remove-scroll";
+import x from "styled-components";
+import { DismissibleLayer as H } from "../DismissibleLayer/index.js";
+import { stripReactIdOfColon as k } from "../helpers/strings.js";
+import { useComposedRefs as N } from "../hooks/useComposeRefs.js";
+import { useId as V } from "../hooks/useId.js";
+import { useIntersection as Z } from "../hooks/useIntersection.js";
+import { Box as h } from "../Box/Box.js";
+import { Portal as _ } from "../Portal/Portal.js";
+const fe = [
   "top",
   "top-start",
   "top-end",
@@ -20,42 +26,81 @@ const N = [
   "left",
   "left-start",
   "left-end"
-], W = p(d)`
-  box-shadow: ${({ theme: t }) => t.shadows.filterShadow};
-  z-index: ${({ theme: t }) => t.zIndices[0]};
-  border: 1px solid ${({ theme: t }) => t.colors.neutral150};
-  background: ${({ theme: t }) => t.colors.neutral0};
-`, E = ({ source: t, children: o, spacing: e = 0, fullWidth: r = !1, placement: s = "bottom-start", centered: i = !1, ...l }) => {
-  const [m, u] = a.useState(void 0), { x: h, y: b, reference: c, floating: g, strategy: x } = k({
+], q = x(h)`
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  z-index: ${({ theme: e }) => e.zIndices[0]};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+  background: ${({ theme: e }) => e.colors.neutral0};
+`, G = ({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, onFocusOutside: f, ...E }) => {
+  const [m, P] = o.useState(null), b = o.useRef(!1), [R, y] = o.useState(void 0), { x: C, y: D, reference: w, floating: L, strategy: O } = I({
     strategy: "fixed",
-    placement: i ? "bottom" : s,
+    placement: a ? "bottom" : l,
     middleware: [
-      $({
-        mainAxis: e
+      W({
+        mainAxis: n
       }),
-      y(),
-      v()
+      A(),
+      K()
     ],
-    whileElementsMounted: P
+    whileElementsMounted: j
   });
-  return a.useLayoutEffect(() => {
-    c(t.current);
-  }, [t, c]), a.useLayoutEffect(() => {
-    r && u(t.current.offsetWidth);
-  }, [r, t]), n(W, { ref: g, style: {
-    left: h,
-    top: b,
-    position: x,
-    width: m || void 0
-  }, hasRadius: !0, background: "neutral0", padding: 1, ...l, children: o });
-}, z = ({ children: t, intersectionId: o, onReachEnd: e, ...r }) => {
-  const s = a.useRef(null), i = I();
-  return R(s, e ?? (() => {
+  o.useLayoutEffect(() => {
+    w(e.current);
+  }, [e, w]), o.useLayoutEffect(() => {
+    i && y(e.current.offsetWidth);
+  }, [i, e]), o.useEffect(() => {
+    if (m)
+      return U(m);
+  }, [m]);
+  const g = T(c);
+  o.useEffect(() => {
+    const t = () => {
+      g();
+    };
+    return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
+      window.removeEventListener("blur", t), window.removeEventListener("resize", t);
+    };
+  }, [g]);
+  const S = N((t) => P(t), L);
+  return r(B, { allowPinchZoom: !0, children: r(M, {
+    asChild: !0,
+    loop: !0,
+    // we make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out)
+    trapped: !0,
+    onUnmountAutoFocus: (t) => {
+      t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
+    },
+    children: r(H, {
+      asChild: !0,
+      disableOutsidePointerEvents: !0,
+      onEscapeKeyDown: d,
+      onPointerDownOutside: v(u, (t) => {
+        const p = t.detail.originalEvent, $ = p.button === 0 && p.ctrlKey === !0, F = p.button === 2 || $;
+        b.current = F;
+      }, { checkForDefaultPrevented: !1 }),
+      // When focus is trapped, a `focusout` event may still happen.
+      // We make sure we don't trigger our `onDismiss` in such case.
+      onFocusOutside: v(f, (t) => t.preventDefault(), {
+        checkForDefaultPrevented: !1
+      }),
+      onDismiss: c,
+      children: r(q, { ref: S, style: {
+        left: C,
+        top: D,
+        position: O,
+        width: R || void 0
+      }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
+    })
+  }) });
+}, J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = V();
+  return Z(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${f(i)}`,
-    skipWhen: !o || !e
-  }), w(C, { ref: s, ...r, children: [t, o && e && n(d, { id: f(i), width: "100%", height: "1px" })] });
-}, C = p(d)`
+    selectorToWatch: `#${k(a)}`,
+    skipWhen: !s || !n
+  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: k(a), width: "100%", height: "1px" })] });
+}, Q = x(h)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3 * 5}rem;
   overflow-y: auto;
@@ -67,18 +112,18 @@ const N = [
   }
 
   &::-webkit-scrollbar-track {
-    background: ${({ theme: t }) => t.colors.neutral0};
+    background: ${({ theme: e }) => e.colors.neutral0};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${({ theme: t }) => t.colors.neutral150};
-    border-radius: ${({ theme: t }) => t.borderRadius};
+    background: ${({ theme: e }) => e.colors.neutral150};
+    border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, U = ({ children: t, source: o, spacing: e, fullWidth: r, placement: s, centered: i, ...l }) => n(S, { children: n(E, { source: o, spacing: e, fullWidth: r, placement: s, centered: i, children: n(z, { ...l, children: t }) }) });
+`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, ...f }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, children: r(J, { ...f, children: e }) }) });
 export {
-  E as Content,
-  N as POPOVER_PLACEMENTS,
-  U as Popover,
-  z as Scrolling
+  G as Content,
+  fe as POPOVER_PLACEMENTS,
+  me as Popover,
+  J as Scrolling
 };

package/dist/ProgressBar/ProgressBar.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime");require("react");const d=require("prop-types"),c=require("styled-components"),p=require("../Box/Box.cjs"),s=e=>e&&e.__esModule?e:{default:e},r=s(d),b=s(c),f=b.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("styled-components"),l=require("../Box/Box.cjs"),n=r=>r&&r.__esModule?r:{default:r},d=n(i),c=d.default(l.Box)`
   &:before {
-    background-color: ${({theme:e})=>e.colors.neutral0};
-    border-radius: ${({theme:e})=>e.borderRadius};
+    background-color: ${({theme:r})=>r.colors.neutral0};
+    border-radius: ${({theme:r})=>r.borderRadius};
     bottom: 0;
     content: '';
     position: absolute;
     top: 0;
-    width: ${({value:e})=>`${e}%`};
+    width: ${({value:r})=>`${r}%`};
   }
-`,o=({min:e,max:u,value:t,children:i,size:a,...n})=>l.jsx(f,{background:"neutral600",hasRadius:!0,"aria-label":i,"aria-valuemax":u,"aria-valuemin":e,"aria-valuenow":t,height:a==="S"?1:2,position:"relative",role:"progressbar",value:t,width:a==="S"?"78px":"102px",...n});o.defaultProps={min:0,max:100,value:0,size:"M"};o.propTypes={children:r.default.node.isRequired,max:r.default.number,min:r.default.number,size:r.default.oneOf(["S","M"]),value:r.default.number};exports.ProgressBar=o;
+`,b=({min:r=0,max:t=100,value:e=0,children:a,size:o="M",...s})=>u.jsx(c,{background:"neutral600",hasRadius:!0,"aria-label":a,"aria-valuemax":t,"aria-valuemin":r,"aria-valuenow":e,height:o==="S"?1:2,position:"relative",role:"progressbar",value:e,width:o==="S"?"78px":"102px",...s});exports.ProgressBar=b;

package/dist/ProgressBar/ProgressBar.js

@@ -1,9 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
-import "react";
-import o from "prop-types";
-import u from "styled-components";
-import { Box as p } from "../Box/Box.js";
-const l = u(p)`
+import { jsx as s } from "react/jsx-runtime";
+import l from "styled-components";
+import { Box as n } from "../Box/Box.js";
+const u = l(n)`
   &:before {
     background-color: ${({ theme: r }) => r.colors.neutral0};
     border-radius: ${({ theme: r }) => r.borderRadius};
@@ -13,36 +11,7 @@ const l = u(p)`
     top: 0;
     width: ${({ value: r }) => `${r}%`};
   }
-`, i = ({ min: r, max: t, value: e, children: s, size: a, ...n }) => /* @__PURE__ */ m(
-  l,
-  {
-    background: "neutral600",
-    hasRadius: !0,
-    "aria-label": s,
-    "aria-valuemax": t,
-    "aria-valuemin": r,
-    "aria-valuenow": e,
-    height: a === "S" ? 1 : 2,
-    position: "relative",
-    role: "progressbar",
-    value: e,
-    width: a === "S" ? "78px" : "102px",
-    ...n
-  }
-);
-i.defaultProps = {
-  min: 0,
-  max: 100,
-  value: 0,
-  size: "M"
-};
-i.propTypes = {
-  children: o.node.isRequired,
-  max: o.number,
-  min: o.number,
-  size: o.oneOf(["S", "M"]),
-  value: o.number
-};
+`, m = ({ min: r = 0, max: e = 100, value: o = 0, children: t, size: a = "M", ...i }) => s(u, { background: "neutral600", hasRadius: !0, "aria-label": t, "aria-valuemax": e, "aria-valuemin": r, "aria-valuenow": o, height: a === "S" ? 1 : 2, position: "relative", role: "progressbar", value: o, width: a === "S" ? "78px" : "102px", ...i });
 export {
-  i as ProgressBar
+  m as ProgressBar
 };

package/dist/Radio/Radio.cjs

@@ -1,4 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const i=require("prop-types"),l=require("styled-components"),n=require("../BaseRadio/BaseRadio.cjs"),u=require("../Typography/Typography.cjs"),d=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(u.Typography)`
-  display: flex;
-  align-items: center;
-`,s=({children:e,...a})=>t.jsxs(p,{as:"label",textColor:"neutral800",children:[t.jsx(n.BaseRadio,{...a}),t.jsx(d.Box,{paddingLeft:2,children:e})]});s.propTypes={children:r.default.node.isRequired,value:r.default.any.isRequired};exports.Radio=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../BaseRadio/BaseRadio.cjs"),s=require("../Flex/Flex.cjs"),a=require("../Typography/Typography.cjs"),i=({children:r,...t})=>e.jsxs(s.Flex,{alignItems:"center",as:"label",gap:2,children:[e.jsx(o.BaseRadio,{...t}),e.jsx(a.Typography,{textColor:"neutral800",children:r})]});exports.Radio=i;

package/dist/Radio/Radio.js

@@ -1,21 +1,8 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import "react";
-import o from "prop-types";
-import p from "styled-components";
-import { BaseRadio as m } from "../BaseRadio/BaseRadio.js";
-import { Typography as s } from "../Typography/Typography.js";
-import { Box as a } from "../Box/Box.js";
-const l = p(s)`
-  display: flex;
-  align-items: center;
-`, d = ({ children: e, ...i }) => /* @__PURE__ */ t(l, { as: "label", textColor: "neutral800", children: [
-  /* @__PURE__ */ r(m, { ...i }),
-  /* @__PURE__ */ r(a, { paddingLeft: 2, children: e })
-] });
-d.propTypes = {
-  children: o.node.isRequired,
-  value: o.any.isRequired
-};
+import { BaseRadio as a } from "../BaseRadio/BaseRadio.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = ({ children: o, ...e }) => t(i, { alignItems: "center", as: "label", gap: 2, children: [r(a, { ...e }), r(m, { textColor: "neutral800", children: o })] });
 export {
-  d as Radio
+  x as Radio
 };

package/dist/Searchbar/SearchForm.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const o=e=>r.jsx("form",{...e,role:"search"});exports.SearchForm=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=e=>r.jsx("form",{...e,role:"search"});exports.SearchForm=o;

package/dist/Searchbar/SearchForm.js

@@ -1,6 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import "react";
-const t = (r) => /* @__PURE__ */ o("form", { ...r, role: "search" });
+const m = (r) => o("form", { ...r, role: "search" });
 export {
-  t as SearchForm
+  m as SearchForm
 };

package/dist/Searchbar/Searchbar.cjs

@@ -1,29 +1,28 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),u=require("@strapi/icons"),S=require("prop-types"),m=require("styled-components"),$=require("../themes/sizes.cjs"),v=require("../themes/utils.cjs"),i=require("../Field/FieldInput.cjs"),c=require("../Flex/Flex.cjs"),_=require("../Field/Field.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),C=require("../Field/FieldLabel.cjs"),I=require("../Field/FieldAction.cjs"),d=e=>e&&e.__esModule?e:{default:e},s=d(S),l=d(m),w=l.default(c.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("@strapi/icons"),m=require("styled-components"),F=require("../hooks/useComposeRefs.cjs"),R=require("../themes/utils.cjs"),t=require("../Field/FieldInput.cjs"),S=require("../Field/Field.cjs"),y=require("../VisuallyHidden/VisuallyHidden.cjs"),$=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldAction.cjs"),I=e=>e&&e.__esModule?e:{default:e},s=I(m),w=s.default(l.Cross)`
   font-size: 0.5rem;
-  svg path {
+  path {
     fill: ${({theme:e})=>e.colors.neutral400};
   }
-`,p=l.default(c.Flex)`
+`,c=s.default(l.Search)`
   font-size: 0.8rem;
-
-  svg path {
+  path {
     fill: ${({theme:e})=>e.colors.neutral800};
   }
-`,W=l.default.div`
+`,_=s.default.div`
   border-radius: ${({theme:e})=>e.borderRadius};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
 
   &:focus-within {
-    ${p} {
-      svg path {
+    ${c} {
+      path {
         fill: ${({theme:e})=>e.colors.primary600};
       }
     }
   }
 
-  ${i.InputWrapper} {
+  ${t.InputWrapper} {
     border: 1px solid transparent;
   }
 
-  ${v.inputFocusStyle(i.InputWrapper)}
-`,t=a.forwardRef(({name:e,size:f,children:h,value:n,onClear:q,clearLabel:x,...b},j)=>{const o=a.useRef(null),y=n.length>0,F=g=>{q(g),o.current.focus()},R=j||o;return r.jsx(W,{children:r.jsxs(_.Field,{name:e,children:[r.jsx(z.VisuallyHidden,{children:r.jsx(C.FieldLabel,{children:h})}),r.jsx(i.FieldInput,{ref:R,value:n,startAction:r.jsx(p,{children:r.jsx(u.Search,{"aria-hidden":!0})}),size:f,endAction:y?r.jsx(I.FieldAction,{label:x,onClick:F,children:r.jsx(w,{children:r.jsx(u.Cross,{})})}):void 0,...b})]})})});t.displayName="Searchbar";t.defaultProps={value:"",size:"M"};t.propTypes={children:s.default.node.isRequired,clearLabel:s.default.string.isRequired,name:s.default.string.isRequired,onClear:s.default.func.isRequired,size:s.default.oneOf(Object.keys($.sizes.input)),value:s.default.string};exports.Searchbar=t;
+  ${R.inputFocusStyle(t.InputWrapper)}
+`,g=i.forwardRef(({name:e,size:a="M",children:u,value:n="",onClear:d,clearLabel:f,...p},h)=>{const o=i.useRef(null),b=n.length>0,q=j=>{d(j),o.current.focus()},x=F.composeRefs(h,o);return r.jsx(_,{children:r.jsxs(S.Field,{name:e,children:[r.jsx(y.VisuallyHidden,{children:r.jsx($.FieldLabel,{children:u})}),r.jsx(t.FieldInput,{ref:x,value:n,startAction:r.jsx(c,{"aria-hidden":!0}),size:a,endAction:b?r.jsx(C.FieldAction,{label:f,onClick:q,children:r.jsx(w,{})}):void 0,...p})]})})});exports.Searchbar=g;

package/dist/Searchbar/Searchbar.js

@@ -1,76 +1,47 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as y, useRef as $ } from "react";
-import { Search as C, Cross as S } from "@strapi/icons";
-import o from "prop-types";
-import i from "styled-components";
-import { sizes as v } from "../themes/sizes.js";
-import { inputFocusStyle as x } from "../themes/utils.js";
-import { InputWrapper as l, FieldInput as F } from "../Field/FieldInput.js";
-import { Flex as a } from "../Flex/Flex.js";
-import { Field as w } from "../Field/Field.js";
+import { jsx as o, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as R, useRef as S } from "react";
+import { Cross as w, Search as x } from "@strapi/icons";
+import e from "styled-components";
+import { composeRefs as C } from "../hooks/useComposeRefs.js";
+import { inputFocusStyle as F } from "../themes/utils.js";
+import { InputWrapper as n, FieldInput as y } from "../Field/FieldInput.js";
+import { Field as I } from "../Field/Field.js";
 import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldLabel as q } from "../Field/FieldLabel.js";
-import { FieldAction as I } from "../Field/FieldAction.js";
-const W = i(a)`
+import { FieldLabel as A } from "../Field/FieldLabel.js";
+import { FieldAction as g } from "../Field/FieldAction.js";
+const j = e(w)`
   font-size: 0.5rem;
-  svg path {
+  path {
     fill: ${({ theme: r }) => r.colors.neutral400};
   }
-`, p = i(a)`
+`, l = e(x)`
   font-size: 0.8rem;
-
-  svg path {
+  path {
     fill: ${({ theme: r }) => r.colors.neutral800};
   }
-`, j = i.div`
+`, W = e.div`
   border-radius: ${({ theme: r }) => r.borderRadius};
   box-shadow: ${({ theme: r }) => r.shadows.filterShadow};
 
   &:focus-within {
-    ${p} {
-      svg path {
+    ${l} {
+      path {
         fill: ${({ theme: r }) => r.colors.primary600};
       }
     }
   }
 
-  ${l} {
+  ${n} {
     border: 1px solid transparent;
   }
 
-  ${x(l)}
-`, t = y(({ name: r, size: c, children: d, value: s, onClear: m, clearLabel: f, ...u }, h) => {
-  const n = $(null), b = s.length > 0;
-  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ g(w, { name: r, children: [
-    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(q, { children: d }) }),
-    /* @__PURE__ */ e(
-      F,
-      {
-        ref: h || n,
-        value: s,
-        startAction: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(C, { "aria-hidden": !0 }) }),
-        size: c,
-        endAction: b ? /* @__PURE__ */ e(I, { label: f, onClick: (R) => {
-          m(R), n.current.focus();
-        }, children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(S, {}) }) }) : void 0,
-        ...u
-      }
-    )
-  ] }) });
+  ${F(n)}
+`, J = R(({ name: r, size: s = "M", children: a, value: t = "", onClear: c, clearLabel: d, ...m }, p) => {
+  const i = S(null), f = t.length > 0, h = (b) => {
+    c(b), i.current.focus();
+  }, u = C(p, i);
+  return o(W, { children: $(I, { name: r, children: [o(z, { children: o(A, { children: a }) }), o(y, { ref: u, value: t, startAction: o(l, { "aria-hidden": !0 }), size: s, endAction: f ? o(g, { label: d, onClick: h, children: o(j, {}) }) : void 0, ...m })] }) });
 });
-t.displayName = "Searchbar";
-t.defaultProps = {
-  value: "",
-  size: "M"
-};
-t.propTypes = {
-  children: o.node.isRequired,
-  clearLabel: o.string.isRequired,
-  name: o.string.isRequired,
-  onClear: o.func.isRequired,
-  size: o.oneOf(Object.keys(v.input)),
-  value: o.string
-};
 export {
-  t as Searchbar
+  J as Searchbar
 };

package/dist/Status/Status.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const h=require("prop-types"),b=require("styled-components"),$=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),m=require("../Flex/Flex.cjs"),l=e=>e&&e.__esModule?e:{default:e},r=l(h),i=l(b),q=i.default.div`
-  margin-right: ${({theme:e})=>e.spaces[3]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("styled-components"),b=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),h=o=>o&&o.__esModule?o:{default:o},u=h(p),y=u.default.div`
+  margin-right: ${({theme:o})=>o.spaces[3]};
   width: ${6/16}rem;
   height: ${6/16}rem;
   border-radius: 50%;
-  background: ${({theme:e,backgroundColor:o})=>e.colors[o]};
-`,S=i.default($.Box)`
+  background: ${({theme:o,backgroundColor:t})=>o.colors[t]};
+`,f=u.default(b.Box)`
   ${x.Typography} {
-    color: ${({theme:e,textColor:o})=>e.colors[o]};
+    color: ${({theme:o,textColor:t})=>o.colors[t]};
   }
-`,s=({variant:e,showBullet:o,size:n,children:d,...c})=>{const p=`${e}100`,g=`${e}200`,f=`${e}600`,y=`${e}600`,u=n==="S"?2:5,a=n==="S"?1:4;return t.jsx(S,{borderColor:g,textColor:y,background:p,hasRadius:!0,paddingTop:a,paddingBottom:a,paddingLeft:u,paddingRight:u,...c,children:o?t.jsxs(m.Flex,{children:[t.jsx(q,{backgroundColor:f}),d]}):d})};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:r.default.node.isRequired,showBullet:r.default.bool,size:r.default.oneOf(["S","M"]),variant:r.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;
+`,m=({variant:o="primary",showBullet:t=!0,size:e="M",children:s,...l})=>{const c=`${o}100`,a=`${o}200`,i=`${o}600`,g=`${o}600`,d=e==="S"?2:5,n=e==="S"?1:4;return r.jsx(f,{borderColor:a,textColor:g,background:c,hasRadius:!0,paddingTop:n,paddingBottom:n,paddingLeft:d,paddingRight:d,...l,children:t?r.jsxs($.Flex,{children:[r.jsx(y,{backgroundColor:i}),s]}):s})};exports.Status=m;

package/dist/Status/Status.js

@@ -1,60 +1,22 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import "react";
-import t from "prop-types";
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
 import p from "styled-components";
-import { Box as f } from "../Box/Box.js";
+import { Box as u } from "../Box/Box.js";
 import { Typography as $ } from "../Typography/Typography.js";
 import { Flex as b } from "../Flex/Flex.js";
-const y = p.div`
+const h = p.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]};
-`, x = p(f)`
+`, x = p(u)`
   ${$} {
     color: ${({ theme: o, textColor: r }) => o.colors[r]};
   }
-`, a = ({ variant: o, showBullet: r, size: e, children: s, ...l }) => {
-  const c = `${o}100`, m = `${o}200`, u = `${o}600`, g = `${o}600`, n = e === "S" ? 2 : 5, d = e === "S" ? 1 : 4;
-  return /* @__PURE__ */ i(
-    x,
-    {
-      borderColor: m,
-      textColor: g,
-      background: c,
-      hasRadius: !0,
-      paddingTop: d,
-      paddingBottom: d,
-      paddingLeft: n,
-      paddingRight: n,
-      ...l,
-      children: r ? /* @__PURE__ */ h(b, { children: [
-        /* @__PURE__ */ i(y, { backgroundColor: u }),
-        s
-      ] }) : s
-    }
-  );
-};
-a.defaultProps = {
-  showBullet: !0,
-  size: "M",
-  variant: "primary"
-};
-a.propTypes = {
-  children: t.node.isRequired,
-  /**
-   * If `false`, the preceeding bullet of the status won't be displayed.
-   * This prop and the bullet will be removed in the next major version.
-   */
-  showBullet: t.bool,
-  // TODO V2: remove prop and bullet
-  size: t.oneOf(["S", "M"]),
-  /**
-   * Color variation
-   */
-  variant: t.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
+`, B = ({ variant: o = "primary", showBullet: r = !0, size: t = "M", children: d, ...c }) => {
+  const i = `${o}100`, l = `${o}200`, g = `${o}600`, m = `${o}600`, s = t === "S" ? 2 : 5, e = t === "S" ? 1 : 4;
+  return n(x, { borderColor: l, textColor: m, background: i, hasRadius: !0, paddingTop: e, paddingBottom: e, paddingLeft: s, paddingRight: s, ...c, children: r ? a(b, { children: [n(h, { backgroundColor: g }), d] }) : d });
 };
 export {
-  a as Status
+  B as Status
 };

package/dist/Switch/Switch.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),h=require("prop-types"),g=require("styled-components"),m=require("../Flex/Flex.cjs"),x=require("../Box/Box.cjs"),a=e=>e&&e.__esModule?e:{default:e},$=a(b),t=a(h),l=a(g),s=l.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),f=require("styled-components"),p=require("../Flex/Flex.cjs"),b=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(h),c=i(f),n=c.default.div`
   background: ${({theme:e})=>e.colors.danger500};
   border: none;
   border-radius: 16px;
@@ -27,16 +27,16 @@
       transition: none;
     }
   }
-`,q=l.default.button`
+`,x=c.default.button`
   background: transparent;
   padding: 0;
   border: none;
 
-  &[aria-checked='true'] ${s} {
+  &[aria-checked='true'] ${n} {
     background: ${({theme:e})=>e.colors.success500};
   }
 
-  &[aria-checked='true'] ${s}:before {
+  &[aria-checked='true'] ${n}:before {
     transform: translateX(1rem);
   }
-`,o=$.default.forwardRef(({label:e,onChange:u,onLabel:i,offLabel:d,selected:n,visibleLabels:c,...f},p)=>r.jsx(q,{ref:p,role:"switch","aria-checked":n,"aria-label":e,onClick:u,visibleLabels:c,type:"button",...f,children:r.jsxs(m.Flex,{children:[r.jsxs(s,{children:[r.jsx("span",{children:i}),r.jsx("span",{children:d})]}),c&&r.jsx(x.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:n?"success600":"danger600",children:n?i:d})]})}));o.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1};o.propTypes={label:t.default.string.isRequired,offLabel:t.default.string,onChange:t.default.func.isRequired,onLabel:t.default.string,selected:t.default.bool.isRequired,visibleLabels:t.default.bool};o.displayName="Switch";exports.Switch=o;
+`,m=g.default.forwardRef(({label:e,onChange:d,onLabel:o="On",offLabel:s="Off",selected:t,visibleLabels:a=!1,...u},l)=>r.jsx(x,{ref:l,role:"switch","aria-checked":t,"aria-label":e,onClick:d,visibleLabels:a,type:"button",...u,children:r.jsxs(p.Flex,{children:[r.jsxs(n,{children:[r.jsx("span",{children:o}),r.jsx("span",{children:s})]}),a&&r.jsx(b.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:t?"success600":"danger600",children:t?o:s})]})}));exports.Switch=m;