@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/Popover/Popover.js

@@ -1,105 +1,141 @@
-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 g } 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 v } 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 ue = [
-  "top",
-  "top-start",
-  "top-end",
-  "right",
-  "right-start",
-  "right-end",
-  "bottom",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "left-start",
-  "left-end"
-], 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};
-`, G = o.forwardRef(({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, onFocusOutside: u, ...k }, E) => {
-  const [m, R] = o.useState(null), [P, y] = o.useState(void 0), b = o.useRef(!1), { x: C, y: D, refs: S, strategy: L } = I({
-    strategy: "fixed",
-    placement: a ? "bottom" : l,
-    middleware: [
-      W({
-        mainAxis: n
-      }),
-      A(),
-      K()
-    ],
-    elements: {
-      reference: e.current
-    },
-    whileElementsMounted: j
-  });
-  o.useLayoutEffect(() => {
-    i && y(e.current.offsetWidth);
-  }, [i, e]), o.useEffect(() => {
-    if (m)
-      return U(m);
-  }, [m]);
-  const w = T(c);
-  o.useEffect(() => {
-    const t = () => {
-      w();
-    };
-    return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
-      window.removeEventListener("blur", t), window.removeEventListener("resize", t);
-    };
-  }, [w]);
-  const O = N(E, (t) => R(t), S.setFloating);
-  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,
-      onEscapeKeyDown: d,
-      onPointerDownOutside: g(f, (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: g(u, (t) => t.preventDefault(), {
-        checkForDefaultPrevented: !1
-      }),
-      onDismiss: c,
-      children: r(q, { ref: O, style: {
-        left: C,
-        top: D,
-        position: L,
-        width: P || void 0
-      }, hasRadius: !0, background: "neutral0", padding: 1, ...k, children: s })
-    })
-  }) });
-}), J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
-  const l = o.useRef(null), a = V();
-  return Z(l, n ?? (() => {
-  }), {
-    selectorToWatch: `#${v(a)}`,
-    skipWhen: !s || !n
-  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: v(a), width: "100%", height: "1px" })] });
-}, Q = x(h)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactDom = require('@floating-ui/react-dom');
+const reactFocusScope = require('@radix-ui/react-focus-scope');
+const uiPrimitives = require('@strapi/ui-primitives');
+const ariaHidden = require('aria-hidden');
+const reactRemoveScroll = require('react-remove-scroll');
+const styled = require('styled-components');
+const index = require('../DismissibleLayer/index.js');
+const strings = require('../helpers/strings.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const useId = require('../hooks/useId.js');
+const useIntersection = require('../hooks/useIntersection.js');
+const Box = require('../Box/Box.js');
+const Portal = require('../Portal/Portal.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const POPOVER_PLACEMENTS = [
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+];
+const PopoverWrapper = styled__default.default(Box.Box) `
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  z-index: ${({ theme }) => theme.zIndices[0]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Content = React__namespace.forwardRef(({ source, children, spacing = 0, fullWidth = false, placement = 'bottom-start', centered = false, onEscapeKeyDown, onPointerDownOutside, onDismiss, onFocusOutside, ...props }, forwardedRef) => {
+    const [content, setContent] = React__namespace.useState(null);
+    const [width, setWidth] = React__namespace.useState(undefined);
+    const isRightClickOutsideRef = React__namespace.useRef(false);
+    const { x, y, refs, strategy } = reactDom.useFloating({
+        strategy: 'fixed',
+        placement: centered ? 'bottom' : placement,
+        middleware: [
+            reactDom.offset({
+                mainAxis: spacing,
+            }),
+            reactDom.shift(),
+            reactDom.flip(),
+        ],
+        elements: {
+            reference: source.current,
+        },
+        whileElementsMounted: reactDom.autoUpdate,
+    });
+    React__namespace.useLayoutEffect(() => {
+        if (fullWidth) {
+            setWidth(source.current.offsetWidth);
+        }
+    }, [fullWidth, source]);
+    // aria-hide everything except the content (better supported equivalent to setting aria-modal)
+    React__namespace.useEffect(() => {
+        if (content)
+            return ariaHidden.hideOthers(content);
+    }, [content]);
+    const handleDismiss = uiPrimitives.useCallbackRef(onDismiss);
+    React__namespace.useEffect(() => {
+        const close = () => {
+            handleDismiss();
+        };
+        window.addEventListener('blur', close);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('blur', close);
+            window.removeEventListener('resize', close);
+        };
+    }, [handleDismiss]);
+    const composedRefs = useComposeRefs.useComposedRefs(forwardedRef, (node) => setContent(node), refs.setFloating);
+    return (jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { allowPinchZoom: true, children: jsxRuntime.jsx(reactFocusScope.FocusScope, { asChild: true, loop: true, 
+            // we make sure we're not trapping once it's been closed
+            // (closed !== unmounted when animating out)
+            trapped: true, onUnmountAutoFocus: (event) => {
+                event.preventDefault();
+                if (!isRightClickOutsideRef.current)
+                    source.current?.focus({ preventScroll: true });
+            }, children: jsxRuntime.jsx(index.DismissibleLayer, { asChild: true, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: uiPrimitives.composeEventHandlers(onPointerDownOutside, (event) => {
+                    const originalEvent = event.detail.originalEvent;
+                    const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+                    const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+                    isRightClickOutsideRef.current = isRightClick;
+                }, { checkForDefaultPrevented: false }), 
+                // When focus is trapped, a `focusout` event may still happen.
+                // We make sure we don't trigger our `onDismiss` in such case.
+                onFocusOutside: uiPrimitives.composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
+                    checkForDefaultPrevented: false,
+                }), onDismiss: onDismiss, children: jsxRuntime.jsx(PopoverWrapper, { ref: composedRefs, style: {
+                        left: x,
+                        top: y,
+                        position: strategy,
+                        width: width || undefined,
+                    }, hasRadius: true, background: "neutral0", padding: 1, ...props, children: children }) }) }) }));
+});
+const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
+    const popoverRef = React__namespace.useRef(null);
+    const generatedIntersectionId = useId.useId();
+    useIntersection.useIntersection(popoverRef, onReachEnd ?? (() => { }), {
+        selectorToWatch: `#${strings.stripReactIdOfColon(generatedIntersectionId)}`,
+        skipWhen: !intersectionId || !onReachEnd,
+    });
+    return (jsxRuntime.jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [children, intersectionId && onReachEnd && (jsxRuntime.jsx(Box.Box, { id: strings.stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" }))] }));
+};
+const PopoverScrollable = styled__default.default(Box.Box) `
   // 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;
@@ -111,18 +147,20 @@ const ue = [
   }
 
   &::-webkit-scrollbar-track {
-    background: ${({ theme: e }) => e.colors.neutral0};
+    background: ${({ theme }) => theme.colors.neutral0};
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${({ theme: e }) => e.colors.neutral150};
-    border-radius: ${({ theme: e }) => e.borderRadius};
+    background: ${({ theme }) => theme.colors.neutral150};
+    border-radius: ${({ theme }) => theme.borderRadius};
     margin-right: 10px;
   }
-`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(J, { ...u, children: e }) }) });
-export {
-  G as Content,
-  ue as POPOVER_PLACEMENTS,
-  me as Popover,
-  J as Scrolling
+`;
+const Popover = ({ children, source, spacing, fullWidth, placement, centered, onEscapeKeyDown, onPointerDownOutside, onDismiss, ...restProps }) => {
+    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(Content, { source: source, spacing: spacing, fullWidth: fullWidth, placement: placement, centered: centered, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onDismiss: onDismiss, children: jsxRuntime.jsx(Scrolling, { ...restProps, children: children }) }) }));
 };
+
+exports.Content = Content;
+exports.POPOVER_PLACEMENTS = POPOVER_PLACEMENTS;
+exports.Popover = Popover;
+exports.Scrolling = Scrolling;

package/dist/Popover/Popover.mjs

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useFloating, offset, shift, flip, autoUpdate } from '@floating-ui/react-dom';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+import { useCallbackRef, composeEventHandlers } from '@strapi/ui-primitives';
+import { hideOthers } from 'aria-hidden';
+import { RemoveScroll } from 'react-remove-scroll';
+import styled from 'styled-components';
+import { DismissibleLayer } from '../DismissibleLayer/index.mjs';
+import { stripReactIdOfColon } from '../helpers/strings.mjs';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { useIntersection } from '../hooks/useIntersection.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Portal } from '../Portal/Portal.mjs';
+
+const POPOVER_PLACEMENTS = [
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+];
+const PopoverWrapper = styled(Box) `
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  z-index: ${({ theme }) => theme.zIndices[0]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Content = React.forwardRef(({ source, children, spacing = 0, fullWidth = false, placement = 'bottom-start', centered = false, onEscapeKeyDown, onPointerDownOutside, onDismiss, onFocusOutside, ...props }, forwardedRef) => {
+    const [content, setContent] = React.useState(null);
+    const [width, setWidth] = React.useState(undefined);
+    const isRightClickOutsideRef = React.useRef(false);
+    const { x, y, refs, strategy } = useFloating({
+        strategy: 'fixed',
+        placement: centered ? 'bottom' : placement,
+        middleware: [
+            offset({
+                mainAxis: spacing,
+            }),
+            shift(),
+            flip(),
+        ],
+        elements: {
+            reference: source.current,
+        },
+        whileElementsMounted: autoUpdate,
+    });
+    React.useLayoutEffect(() => {
+        if (fullWidth) {
+            setWidth(source.current.offsetWidth);
+        }
+    }, [fullWidth, source]);
+    // aria-hide everything except the content (better supported equivalent to setting aria-modal)
+    React.useEffect(() => {
+        if (content)
+            return hideOthers(content);
+    }, [content]);
+    const handleDismiss = useCallbackRef(onDismiss);
+    React.useEffect(() => {
+        const close = () => {
+            handleDismiss();
+        };
+        window.addEventListener('blur', close);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('blur', close);
+            window.removeEventListener('resize', close);
+        };
+    }, [handleDismiss]);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node), refs.setFloating);
+    return (jsx(RemoveScroll, { allowPinchZoom: true, children: jsx(FocusScope, { asChild: true, loop: true, 
+            // we make sure we're not trapping once it's been closed
+            // (closed !== unmounted when animating out)
+            trapped: true, onUnmountAutoFocus: (event) => {
+                event.preventDefault();
+                if (!isRightClickOutsideRef.current)
+                    source.current?.focus({ preventScroll: true });
+            }, children: jsx(DismissibleLayer, { asChild: true, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: composeEventHandlers(onPointerDownOutside, (event) => {
+                    const originalEvent = event.detail.originalEvent;
+                    const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+                    const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+                    isRightClickOutsideRef.current = isRightClick;
+                }, { checkForDefaultPrevented: false }), 
+                // When focus is trapped, a `focusout` event may still happen.
+                // We make sure we don't trigger our `onDismiss` in such case.
+                onFocusOutside: composeEventHandlers(onFocusOutside, (event) => event.preventDefault(), {
+                    checkForDefaultPrevented: false,
+                }), onDismiss: onDismiss, children: jsx(PopoverWrapper, { ref: composedRefs, style: {
+                        left: x,
+                        top: y,
+                        position: strategy,
+                        width: width || undefined,
+                    }, hasRadius: true, background: "neutral0", padding: 1, ...props, children: children }) }) }) }));
+});
+const Scrolling = ({ children, intersectionId, onReachEnd, ...props }) => {
+    const popoverRef = React.useRef(null);
+    const generatedIntersectionId = useId();
+    useIntersection(popoverRef, onReachEnd ?? (() => { }), {
+        selectorToWatch: `#${stripReactIdOfColon(generatedIntersectionId)}`,
+        skipWhen: !intersectionId || !onReachEnd,
+    });
+    return (jsxs(PopoverScrollable, { ref: popoverRef, ...props, children: [children, intersectionId && onReachEnd && (jsx(Box, { id: stripReactIdOfColon(generatedIntersectionId), width: "100%", height: "1px" }))] }));
+};
+const PopoverScrollable = styled(Box) `
+  // 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;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.colors.neutral0};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.neutral150};
+    border-radius: ${({ theme }) => theme.borderRadius};
+    margin-right: 10px;
+  }
+`;
+const Popover = ({ children, source, spacing, fullWidth, placement, centered, onEscapeKeyDown, onPointerDownOutside, onDismiss, ...restProps }) => {
+    return (jsx(Portal, { children: jsx(Content, { source: source, spacing: spacing, fullWidth: fullWidth, placement: placement, centered: centered, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onDismiss: onDismiss, children: jsx(Scrolling, { ...restProps, children: children }) }) }));
+};
+
+export { Content, POPOVER_PLACEMENTS, Popover, Scrolling };

package/dist/Popover/index.js

@@ -1,7 +1,12 @@
-import { POPOVER_PLACEMENTS as e, Popover as p } from "./Popover.js";
-import * as o from "./primitives.js";
-export {
-  e as POPOVER_PLACEMENTS,
-  p as Popover,
-  o as PopoverPrimitives
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Popover = require('./Popover.js');
+const primitives = require('./primitives.js');
+
+
+
+exports.POPOVER_PLACEMENTS = Popover.POPOVER_PLACEMENTS;
+exports.Popover = Popover.Popover;
+exports.PopoverPrimitives = primitives;

package/dist/Popover/index.mjs

@@ -0,0 +1,3 @@
+export { POPOVER_PLACEMENTS, Popover } from './Popover.mjs';
+import * as primitives from './primitives.mjs';
+export { primitives as PopoverPrimitives };

package/dist/Popover/primitives.js

@@ -1,5 +1,10 @@
-import { Content as r, Scrolling as t } from "./Popover.js";
-export {
-  r as Content,
-  t as Scrolling
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Popover = require('./Popover.js');
+
+
+
+exports.Content = Popover.Content;
+exports.Scrolling = Popover.Scrolling;

package/dist/Popover/primitives.mjs

@@ -0,0 +1 @@
+export { Content, Scrolling } from './Popover.mjs';

package/dist/Portal/Portal.js

@@ -1,9 +1,35 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as a from "react";
-import { createPortal as e } from "react-dom";
-import { Box as l } from "../Box/Box.js";
-const f = a.forwardRef(({ container: o = globalThis?.document?.body, ...r }, t) => o ? e(m(l, { ref: t, ...r }), o) : null);
-f.displayName = "Portal";
-export {
-  f as Portal
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactDom = require('react-dom');
+const Box = require('../Box/Box.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+    if (e) {
+        for (const k in e) {
+            if (k !== 'default') {
+                const d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: () => e[k]
+                });
+            }
+        }
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const Portal = React__namespace.forwardRef(({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
+    return container ? reactDom.createPortal(jsxRuntime.jsx(Box.Box, { ref: forwardedRef, ...portalProps }), container) : null;
+});
+Portal.displayName = 'Portal';
+
+exports.Portal = Portal;

package/dist/Portal/Portal.mjs

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { Box } from '../Box/Box.mjs';
+
+const Portal = React.forwardRef(({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
+    return container ? createPortal(jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
+});
+Portal.displayName = 'Portal';
+
+export { Portal };

package/dist/Portal/index.js

@@ -1,4 +1,9 @@
-import { Portal as t } from "./Portal.js";
-export {
-  t as Portal
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Portal = require('./Portal.js');
+
+
+
+exports.Portal = Portal.Portal;

package/dist/Portal/index.mjs

@@ -0,0 +1 @@
+export { Portal } from './Portal.mjs';

package/dist/ProgressBar/ProgressBar.js

@@ -1,17 +1,28 @@
-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)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ProgressbarBase = styled__default.default(Box.Box) `
   &:before {
-    background-color: ${({ theme: r }) => r.colors.neutral0};
-    border-radius: ${({ theme: r }) => r.borderRadius};
+    background-color: ${({ theme }) => theme.colors.neutral0};
+    border-radius: ${({ theme }) => theme.borderRadius};
     bottom: 0;
     content: '';
     position: absolute;
     top: 0;
-    width: ${({ value: r }) => `${r}%`};
+    width: ${({ value }) => `${value}%`};
   }
-`, 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 {
-  m as ProgressBar
+`;
+const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = 'M', ...props }) => {
+    return (jsxRuntime.jsx(ProgressbarBase, { background: "neutral600", hasRadius: true, "aria-label": children, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, height: size === 'S' ? 1 : 2, position: "relative", role: "progressbar", value: value, width: size === 'S' ? '78px' : '102px', ...props }));
 };
+
+exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+
+const ProgressbarBase = styled(Box) `
+  &:before {
+    background-color: ${({ theme }) => theme.colors.neutral0};
+    border-radius: ${({ theme }) => theme.borderRadius};
+    bottom: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    width: ${({ value }) => `${value}%`};
+  }
+`;
+const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = 'M', ...props }) => {
+    return (jsx(ProgressbarBase, { background: "neutral600", hasRadius: true, "aria-label": children, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, height: size === 'S' ? 1 : 2, position: "relative", role: "progressbar", value: value, width: size === 'S' ? '78px' : '102px', ...props }));
+};
+
+export { ProgressBar };

package/dist/ProgressBar/index.js

@@ -1,4 +1,9 @@
-import { ProgressBar as e } from "./ProgressBar.js";
-export {
-  e as ProgressBar
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ProgressBar = require('./ProgressBar.js');
+
+
+
+exports.ProgressBar = ProgressBar.ProgressBar;

package/dist/ProgressBar/index.mjs

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar.mjs';

package/dist/Radio/Radio.js

@@ -1,8 +1,14 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-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 {
-  x as Radio
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const BaseRadio = require('../BaseRadio/BaseRadio.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const Radio = ({ children, ...props }) => {
+    return (jsxRuntime.jsxs(Flex.Flex, { alignItems: "center", as: "label", gap: 2, children: [jsxRuntime.jsx(BaseRadio.BaseRadio, { ...props }), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: children })] }));
 };
+
+exports.Radio = Radio;