@strapi/design-system 1.9.0 → 1.10.0

package/dist/DatePicker/index.js

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

package/dist/DatePicker/index.mjs

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

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,104 +1,147 @@
-import { jsx as o, jsxs as F } from "react/jsx-runtime";
-import v, { forwardRef as G } from "react";
-import { getLocalTimeZone as P, parseAbsoluteToLocal as J, toCalendarDateTime as K } from "@internationalized/date";
-import $ from "styled-components";
-import { DatePickerInput as Q } from "../DatePicker/DatePicker.js";
-import { useDesignSystem as W } from "../DesignSystemProvider.js";
-import { once as X } from "../helpers/deprecations.js";
-import { useComposedRefs as Y } from "../hooks/useComposeRefs.js";
-import { useControllableState as ee } from "../hooks/useControllableState.js";
-import { useDateFormatter as te } from "../hooks/useDateFormatter.js";
-import { useId as b } from "../hooks/useId.js";
-import { TimePickerInput as re } from "../TimePicker/TimePicker.js";
-import { Field as oe } from "../Field/Field.js";
-import { Flex as L } from "../Flex/Flex.js";
-import { FieldLabel as ie } from "../Field/FieldLabel.js";
-import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldHint as ne } from "../Field/FieldHint.js";
-import { FieldError as ae } from "../Field/FieldError.js";
-const Se = G(({
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  ariaLabel: n,
-  clearLabel: d = "clear",
-  dateLabel: p = "Choose date",
-  timeLabel: a = "Choose time",
-  disabled: s = !1,
-  error: h,
-  hint: R,
-  id: V,
-  label: _,
-  labelAction: N,
-  onChange: I,
-  onClear: c,
-  name: j,
-  required: D = !1,
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  selectButtonTitle: de,
-  size: C = "M",
-  step: z,
-  value: g,
-  initialDate: k,
-  ...B
-}, E) => {
-  const w = v.useRef(null), [t, f] = ee({
-    defaultProp: k ? m(k, !1) : void 0,
-    prop: g ? m(g, !1) : g ?? void 0,
-    onChange(e) {
-      I && I(e?.toDate(P()));
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const date = require('@internationalized/date');
+const styled = require('styled-components');
+const DatePicker$1 = require('../DatePicker/DatePicker.js');
+const DesignSystemProvider = require('../DesignSystemProvider.js');
+const deprecations = require('../helpers/deprecations.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const useControllableState = require('../hooks/useControllableState.js');
+const useDateFormatter = require('../hooks/useDateFormatter.js');
+const useId = require('../hooks/useId.js');
+const TimePicker$1 = require('../TimePicker/TimePicker.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const DateTimePicker = React.forwardRef(({ 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+ariaLabel: _ariaLabel, clearLabel = 'clear', dateLabel = 'Choose date', timeLabel = 'Choose time', disabled = false, error, hint, id, label, labelAction, onChange, onClear, name, required = false, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+selectButtonTitle: _selectButtonTitle, size = 'M', step, value, initialDate, ...props }, forwardedRef) => {
+    const DatePickerElement = React__default.default.useRef(null);
+    const [dateValue, setDateValue] = useControllableState.useControllableState({
+        defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : undefined,
+        prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? undefined,
+        onChange(date$1) {
+            if (onChange) {
+                onChange(date$1?.toDate(date.getLocalTimeZone()));
+            }
+        },
+    });
+    const context = DesignSystemProvider.useDesignSystem('DateTimePicker');
+    const timeFormatter = useDateFormatter.useDateFormatter(context.locale, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+    const timeValue = dateValue ? timeFormatter.format(dateValue.toDate(date.getLocalTimeZone())) : '';
+    // React.useEffect(() => {
+    //   setTimeTextValue((s) => (s === timeValue ? s : timeValue));
+    // }, [timeValue]);
+    const handleDateChange = (date) => {
+        let newDate = date ? convertUTCDateToCalendarDateTime(date) : undefined;
+        /**
+         * If the date hasn't changed, don't do anything.
+         */
+        if (newDate && dateValue && newDate.compare(dateValue) === 0) {
+            return;
+        }
+        if (timeValue && newDate) {
+            const [hours, minutes] = timeValue.split(':');
+            newDate = newDate.set({ hour: parseInt(hours, 10), minute: parseInt(minutes, 10) });
+        }
+        setDateValue(newDate);
+    };
+    const handleTimeChange = (time) => {
+        if (!time) {
+            return;
+        }
+        const [hours, minutes] = time.split(':');
+        const dateToSet = dateValue
+            ? dateValue.set({ hour: parseInt(hours, 10), minute: parseInt(minutes, 10) })
+            : convertUTCDateToCalendarDateTime(new Date()).set({
+                hour: parseInt(hours, 10),
+                minute: parseInt(minutes, 10),
+            });
+        setDateValue(dateToSet);
+    };
+    const handleDateClear = (e) => {
+        setDateValue(undefined);
+        // setTimeTextValue('');
+        if (onClear) {
+            onClear(e);
+        }
+    };
+    const handleTimeClear = () => {
+        const newDate = dateValue ? dateValue.set({ hour: 0, minute: 0 }) : convertUTCDateToCalendarDateTime(new Date());
+        setDateValue(newDate);
+        // setTimeTextValue('');
+    };
+    const generatedId = useId.useId(id);
+    const timeId = useId.useId();
+    const dateId = useId.useId();
+    const composedRefs = useComposeRefs.useComposedRefs(DatePickerElement, forwardedRef);
+    return (jsxRuntime.jsx(Field.Field, { name: name, as: "fieldset", id: generatedId, "aria-labelledby": generatedId, hint: hint, error: error, required: required, children: jsxRuntime.jsxs(Flex.Flex, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(FieldLabel.FieldLabel, { onClick: () => {
+                        /**
+                         * We're using fieldsets and legends and because they're not directly associated with the input
+                         * we want to manually focus the input because the labels for these inputs are visually hidden.
+                         */
+                        DatePickerElement.current.focus();
+                    }, as: "legend", id: generatedId, action: labelAction, children: label }), jsxRuntime.jsxs(Flex.Flex, { flex: "1", gap: 1, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "label", htmlFor: dateId, children: dateLabel }), jsxRuntime.jsx(DatePicker, { ...props, selectedDate: dateValue?.toDate('UTC'), onChange: handleDateChange, error: typeof error === 'string', required: required, size: size, onClear: onClear ? handleDateClear : undefined, clearLabel: `${clearLabel} date`, disabled: disabled, id: dateId, ref: composedRefs, "aria-describedby": `${generatedId}-hint ${generatedId}-error` }), jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "label", htmlFor: timeId, children: timeLabel }), jsxRuntime.jsx(TimePicker, { size: size, error: typeof error === 'string', value: timeValue, onChange: handleTimeChange, onClear: onClear && timeValue !== undefined && timeValue !== '00:00' ? handleTimeClear : undefined, clearLabel: `${clearLabel} time`, required: required, disabled: disabled, step: step, id: timeId, "aria-describedby": `${generatedId}-hint ${generatedId}-error` })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+const warnOnce = deprecations.once(console.warn);
+const convertUTCDateToCalendarDateTime = (date$1, resetTime = true) => {
+    /**
+     * TODO: remove this in V2, it's a deprecated API
+     */
+    if (typeof date$1 === 'string') {
+        warnOnce("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
+        const timestamp = Date.parse(date$1);
+        if (!Number.isNaN(timestamp)) {
+            date$1 = new Date(timestamp);
+        }
+        else {
+            date$1 = new Date();
+        }
     }
-  }), H = W("DateTimePicker"), O = te(H.locale, {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: !1
-  }), l = t ? O.format(t.toDate(P())) : "", U = (e) => {
-    let r = e ? m(e) : void 0;
-    if (!(r && t && r.compare(t) === 0)) {
-      if (l && r) {
-        const [u, T] = l.split(":");
-        r = r.set({ hour: parseInt(u, 10), minute: parseInt(T, 10) });
-      }
-      f(r);
+    const utcDateString = date$1.toISOString();
+    let zonedDateTime = date.parseAbsoluteToLocal(utcDateString);
+    if (resetTime) {
+        zonedDateTime = zonedDateTime.set({ hour: 0, minute: 0 });
     }
-  }, q = (e) => {
-    if (!e)
-      return;
-    const [r, u] = e.split(":"), T = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(u, 10) }) : m(/* @__PURE__ */ new Date()).set({
-      hour: parseInt(r, 10),
-      minute: parseInt(u, 10)
-    });
-    f(T);
-  }, A = (e) => {
-    f(void 0), c && c(e);
-  }, M = () => {
-    const e = t ? t.set({ hour: 0, minute: 0 }) : m(/* @__PURE__ */ new Date());
-    f(e);
-  }, i = b(V), x = b(), y = b(), Z = Y(w, E);
-  return o(oe, { name: j, as: "fieldset", id: i, "aria-labelledby": i, hint: R, error: h, required: D, children: F(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [o(ie, { onClick: () => {
-    w.current.focus();
-  }, as: "legend", id: i, action: N, children: _ }), F(L, { flex: "1", gap: 1, children: [o(S, { as: "label", htmlFor: y, children: p }), o(le, { ...B, selectedDate: t?.toDate("UTC"), onChange: U, error: typeof h == "string", required: D, size: C, onClear: c ? A : void 0, clearLabel: `${d} date`, disabled: s, id: y, ref: Z, "aria-describedby": `${i}-hint ${i}-error` }), o(S, { as: "label", htmlFor: x, children: a }), o(me, { size: C, error: typeof h == "string", value: l, onChange: q, onClear: c && l !== void 0 && l !== "00:00" ? M : void 0, clearLabel: `${d} time`, required: D, disabled: s, step: z, id: x, "aria-describedby": `${i}-hint ${i}-error` })] }), o(ne, {}), o(ae, {})] }) });
-}), se = X(console.warn), m = (n, d = !0) => {
-  if (typeof n == "string") {
-    se("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
-    const s = Date.parse(n);
-    Number.isNaN(s) ? n = /* @__PURE__ */ new Date() : n = new Date(s);
-  }
-  const p = n.toISOString();
-  let a = J(p);
-  return d && (a = a.set({ hour: 0, minute: 0 })), K(a);
-}, le = $(Q)`
+    /**
+     * ZonedDateTime can't have weeks added,
+     * see – https://github.com/adobe/react-spectrum/issues/3667
+     */
+    return date.toCalendarDateTime(zonedDateTime);
+};
+const DatePicker = styled__default.default(DatePicker$1.DatePickerInput) `
   flex: 1 1 70%;
   min-width: 120px;
-`, me = $(re)`
+`;
+const TimePicker = styled__default.default(TimePicker$1.TimePickerInput) `
   flex: 1 1 30%;
   min-width: 120px;
 `;
-export {
-  Se as DateTimePicker,
-  m as convertUTCDateToCalendarDateTime
-};
+
+exports.DateTimePicker = DateTimePicker;
+exports.convertUTCDateToCalendarDateTime = convertUTCDateToCalendarDateTime;

package/dist/DateTimePicker/DateTimePicker.mjs

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { forwardRef } from 'react';
+import { getLocalTimeZone, parseAbsoluteToLocal, toCalendarDateTime } from '@internationalized/date';
+import styled from 'styled-components';
+import { DatePickerInput } from '../DatePicker/DatePicker.mjs';
+import { useDesignSystem } from '../DesignSystemProvider.mjs';
+import { once } from '../helpers/deprecations.mjs';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { useControllableState } from '../hooks/useControllableState.mjs';
+import { useDateFormatter } from '../hooks/useDateFormatter.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { TimePickerInput } from '../TimePicker/TimePicker.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const DateTimePicker = forwardRef(({ 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+ariaLabel: _ariaLabel, clearLabel = 'clear', dateLabel = 'Choose date', timeLabel = 'Choose time', disabled = false, error, hint, id, label, labelAction, onChange, onClear, name, required = false, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+selectButtonTitle: _selectButtonTitle, size = 'M', step, value, initialDate, ...props }, forwardedRef) => {
+    const DatePickerElement = React__default.useRef(null);
+    const [dateValue, setDateValue] = useControllableState({
+        defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : undefined,
+        prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? undefined,
+        onChange(date) {
+            if (onChange) {
+                onChange(date?.toDate(getLocalTimeZone()));
+            }
+        },
+    });
+    const context = useDesignSystem('DateTimePicker');
+    const timeFormatter = useDateFormatter(context.locale, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+    const timeValue = dateValue ? timeFormatter.format(dateValue.toDate(getLocalTimeZone())) : '';
+    // React.useEffect(() => {
+    //   setTimeTextValue((s) => (s === timeValue ? s : timeValue));
+    // }, [timeValue]);
+    const handleDateChange = (date) => {
+        let newDate = date ? convertUTCDateToCalendarDateTime(date) : undefined;
+        /**
+         * If the date hasn't changed, don't do anything.
+         */
+        if (newDate && dateValue && newDate.compare(dateValue) === 0) {
+            return;
+        }
+        if (timeValue && newDate) {
+            const [hours, minutes] = timeValue.split(':');
+            newDate = newDate.set({ hour: parseInt(hours, 10), minute: parseInt(minutes, 10) });
+        }
+        setDateValue(newDate);
+    };
+    const handleTimeChange = (time) => {
+        if (!time) {
+            return;
+        }
+        const [hours, minutes] = time.split(':');
+        const dateToSet = dateValue
+            ? dateValue.set({ hour: parseInt(hours, 10), minute: parseInt(minutes, 10) })
+            : convertUTCDateToCalendarDateTime(new Date()).set({
+                hour: parseInt(hours, 10),
+                minute: parseInt(minutes, 10),
+            });
+        setDateValue(dateToSet);
+    };
+    const handleDateClear = (e) => {
+        setDateValue(undefined);
+        // setTimeTextValue('');
+        if (onClear) {
+            onClear(e);
+        }
+    };
+    const handleTimeClear = () => {
+        const newDate = dateValue ? dateValue.set({ hour: 0, minute: 0 }) : convertUTCDateToCalendarDateTime(new Date());
+        setDateValue(newDate);
+        // setTimeTextValue('');
+    };
+    const generatedId = useId(id);
+    const timeId = useId();
+    const dateId = useId();
+    const composedRefs = useComposedRefs(DatePickerElement, forwardedRef);
+    return (jsx(Field, { name: name, as: "fieldset", id: generatedId, "aria-labelledby": generatedId, hint: hint, error: error, required: required, children: jsxs(Flex, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [jsx(FieldLabel, { onClick: () => {
+                        /**
+                         * We're using fieldsets and legends and because they're not directly associated with the input
+                         * we want to manually focus the input because the labels for these inputs are visually hidden.
+                         */
+                        DatePickerElement.current.focus();
+                    }, as: "legend", id: generatedId, action: labelAction, children: label }), jsxs(Flex, { flex: "1", gap: 1, children: [jsx(VisuallyHidden, { as: "label", htmlFor: dateId, children: dateLabel }), jsx(DatePicker, { ...props, selectedDate: dateValue?.toDate('UTC'), onChange: handleDateChange, error: typeof error === 'string', required: required, size: size, onClear: onClear ? handleDateClear : undefined, clearLabel: `${clearLabel} date`, disabled: disabled, id: dateId, ref: composedRefs, "aria-describedby": `${generatedId}-hint ${generatedId}-error` }), jsx(VisuallyHidden, { as: "label", htmlFor: timeId, children: timeLabel }), jsx(TimePicker, { size: size, error: typeof error === 'string', value: timeValue, onChange: handleTimeChange, onClear: onClear && timeValue !== undefined && timeValue !== '00:00' ? handleTimeClear : undefined, clearLabel: `${clearLabel} time`, required: required, disabled: disabled, step: step, id: timeId, "aria-describedby": `${generatedId}-hint ${generatedId}-error` })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+const warnOnce = once(console.warn);
+const convertUTCDateToCalendarDateTime = (date, resetTime = true) => {
+    /**
+     * TODO: remove this in V2, it's a deprecated API
+     */
+    if (typeof date === 'string') {
+        warnOnce("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
+        const timestamp = Date.parse(date);
+        if (!Number.isNaN(timestamp)) {
+            date = new Date(timestamp);
+        }
+        else {
+            date = new Date();
+        }
+    }
+    const utcDateString = date.toISOString();
+    let zonedDateTime = parseAbsoluteToLocal(utcDateString);
+    if (resetTime) {
+        zonedDateTime = zonedDateTime.set({ hour: 0, minute: 0 });
+    }
+    /**
+     * ZonedDateTime can't have weeks added,
+     * see – https://github.com/adobe/react-spectrum/issues/3667
+     */
+    return toCalendarDateTime(zonedDateTime);
+};
+const DatePicker = styled(DatePickerInput) `
+  flex: 1 1 70%;
+  min-width: 120px;
+`;
+const TimePicker = styled(TimePickerInput) `
+  flex: 1 1 30%;
+  min-width: 120px;
+`;
+
+export { DateTimePicker, convertUTCDateToCalendarDateTime };

package/dist/DateTimePicker/index.js

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

package/dist/DateTimePicker/index.mjs

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

package/dist/DesignSystemProvider.js

@@ -1,10 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
-import { createContext as i } from "./helpers/context.js";
-import { ThemeProvider as a } from "./ThemeProvider/ThemeProvider.js";
-const r = "en-EN", t = () => typeof navigator > "u" ? r : navigator.language ? navigator.language : r, [s, l] = i("StrapiDesignSystem", {
-  locale: t()
-}), u = ({ locale: o = t(), ...n }) => e(s, { locale: o, children: e(a, { ...n }) });
-export {
-  u as DesignSystemProvider,
-  l as useDesignSystem
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('./helpers/context.js');
+const ThemeProvider = require('./ThemeProvider/ThemeProvider.js');
+
+const DEFAULT_LOCALE = 'en-EN';
+const getDefaultLocale = () => {
+    if (typeof navigator === 'undefined') {
+        return DEFAULT_LOCALE;
+    }
+    if (navigator.language) {
+        return navigator.language;
+    }
+    return DEFAULT_LOCALE;
 };
+const [Provider, useDesignSystem] = context.createContext('StrapiDesignSystem', {
+    locale: getDefaultLocale(),
+});
+const DesignSystemProvider = ({ locale = getDefaultLocale(), ...restProps }) => {
+    return (jsxRuntime.jsx(Provider, { locale: locale, children: jsxRuntime.jsx(ThemeProvider.ThemeProvider, { ...restProps }) }));
+};
+
+exports.DesignSystemProvider = DesignSystemProvider;
+exports.useDesignSystem = useDesignSystem;

package/dist/DesignSystemProvider.mjs

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext } from './helpers/context.mjs';
+import { ThemeProvider } from './ThemeProvider/ThemeProvider.mjs';
+
+const DEFAULT_LOCALE = 'en-EN';
+const getDefaultLocale = () => {
+    if (typeof navigator === 'undefined') {
+        return DEFAULT_LOCALE;
+    }
+    if (navigator.language) {
+        return navigator.language;
+    }
+    return DEFAULT_LOCALE;
+};
+const [Provider, useDesignSystem] = createContext('StrapiDesignSystem', {
+    locale: getDefaultLocale(),
+});
+const DesignSystemProvider = ({ locale = getDefaultLocale(), ...restProps }) => {
+    return (jsx(Provider, { locale: locale, children: jsx(ThemeProvider, { ...restProps }) }));
+};
+
+export { DesignSystemProvider, useDesignSystem };

package/dist/Dialog/Dialog.js

@@ -1,31 +1,44 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import e from "styled-components";
-import { DismissibleLayer as c } from "../DismissibleLayer/index.js";
-import { setOpacity as u } from "../helpers/setOpacity.js";
-import { useId as f } from "../hooks/useId.js";
-import h from "../hooks/useLockScroll.js";
-import { FocusTrap as g } from "../FocusTrap/FocusTrap.js";
-import { Box as i } from "../Box/Box.js";
-import { Flex as b } from "../Flex/Flex.js";
-import { Portal as x } from "../Portal/Portal.js";
-import { Typography as y } from "../Typography/Typography.js";
-const D = e(i)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const index = require('../DismissibleLayer/index.js');
+const setOpacity = require('../helpers/setOpacity.js');
+const useId = require('../hooks/useId.js');
+const useLockScroll = require('../hooks/useLockScroll.js');
+const FocusTrap = require('../FocusTrap/FocusTrap.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Portal = require('../Portal/Portal.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const DialogWrapper = styled__default.default(Box.Box) `
   inset: 0;
-  background: ${({ theme: r }) => u(r.colors.neutral800, 0.2)};
-`, w = e(i)`
+  background: ${({ theme }) => setOpacity.setOpacity(theme.colors.neutral800, 0.2)};
+`;
+const DialogContainer = styled__default.default(Box.Box) `
   max-width: ${412 / 16}rem;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 10%;
-`, $ = e(b)`
-  border-bottom: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, C = ({ onClose: r, title: n, as: l = "h2", isOpen: t, id: d, ...m }) => {
-  const s = f(d);
-  if (h(t), !t)
-    return null;
-  const a = `${s}-label`;
-  return o(x, { children: o(D, { padding: 8, position: "fixed", zIndex: 4, children: o(g, { children: o(c, { onEscapeKeyDown: r, onPointerDownOutside: r, children: p(w, { "aria-labelledby": a, "aria-modal": !0, background: "neutral0", hasRadius: !0, shadow: "popupShadow", role: "dialog", children: [o($, { padding: 6, justifyContent: "center", children: o(y, { variant: "beta", as: l, id: a, children: n }) }), o(i, { ...m })] }) }) }) }) });
-};
-export {
-  C as Dialog
+`;
+const DialogHeader = styled__default.default(Flex.Flex) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
+    const generatedId = useId.useId(id);
+    useLockScroll(isOpen);
+    if (!isOpen) {
+        return null;
+    }
+    const labelledBy = `${generatedId}-label`;
+    return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: 4, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { children: jsxRuntime.jsx(index.DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxRuntime.jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsxRuntime.jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsxRuntime.jsx(Box.Box, { ...props })] }) }) }) }) }));
 };
+
+exports.Dialog = Dialog;

package/dist/Dialog/Dialog.mjs

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { DismissibleLayer } from '../DismissibleLayer/index.mjs';
+import { setOpacity } from '../helpers/setOpacity.mjs';
+import { useId } from '../hooks/useId.mjs';
+import useLockScroll from '../hooks/useLockScroll.mjs';
+import { FocusTrap } from '../FocusTrap/FocusTrap.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Portal } from '../Portal/Portal.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const DialogWrapper = styled(Box) `
+  inset: 0;
+  background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
+`;
+const DialogContainer = styled(Box) `
+  max-width: ${412 / 16}rem;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-top: 10%;
+`;
+const DialogHeader = styled(Flex) `
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
+    const generatedId = useId(id);
+    useLockScroll(isOpen);
+    if (!isOpen) {
+        return null;
+    }
+    const labelledBy = `${generatedId}-label`;
+    return (jsx(Portal, { children: jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: 4, children: jsx(FocusTrap, { children: jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsx(Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsx(Box, { ...props })] }) }) }) }) }));
+};
+
+export { Dialog };

package/dist/Dialog/DialogBody.js

@@ -1,17 +1,28 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import n from "styled-components";
-import { Box as r } from "../Box/Box.js";
-import { Flex as e } from "../Flex/Flex.js";
-const p = n(r)`
+'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 Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const IconContainer = styled__default.default(Box.Box) `
   svg {
-    width: ${({ theme: o }) => o.spaces[6]};
-    height: ${({ theme: o }) => o.spaces[6]};
+    width: ${({ theme }) => theme.spaces[6]};
+    height: ${({ theme }) => theme.spaces[6]};
 
     path {
-      fill: ${({ theme: o }) => o.colors.danger600};
+      fill: ${({ theme }) => theme.colors.danger600};
     }
   }
-`, c = ({ children: o, icon: t }) => d(r, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [t && i(p, { paddingBottom: 2, children: i(e, { justifyContent: "center", children: t }) }), o] });
-export {
-  c as DialogBody
+`;
+const DialogBody = ({ children, icon }) => {
+    return (jsxRuntime.jsxs(Box.Box, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [icon && (jsxRuntime.jsx(IconContainer, { paddingBottom: 2, children: jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", children: icon }) })), children] }));
 };
+
+exports.DialogBody = DialogBody;