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

package/dist/Card/CardTitle.js

@@ -1,11 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useCard as a } from "./CardContext.js";
-import { Typography as o } from "../Typography/Typography.js";
-const l = (t) => {
-  const { id: i } = a();
-  return r(o, { variant: "pi", id: `${i}-title`, textColor: "neutral800", fontWeight: "bold", as: "div", ...t });
-}, p = (t) => r(o, { variant: "pi", ...t, textColor: "neutral600", as: "div" });
-export {
-  p as CardSubtitle,
-  l as CardTitle
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const CardContext = require('./CardContext.js');
+const Typography = require('../Typography/Typography.js');
+
+const CardTitle = (props) => {
+    const { id } = CardContext.useCard();
+    return jsxRuntime.jsx(Typography.Typography, { variant: "pi", id: `${id}-title`, textColor: "neutral800", fontWeight: "bold", as: "div", ...props });
 };
+const CardSubtitle = (props) => {
+    return jsxRuntime.jsx(Typography.Typography, { variant: "pi", ...props, textColor: "neutral600", as: "div" });
+};
+
+exports.CardSubtitle = CardSubtitle;
+exports.CardTitle = CardTitle;

package/dist/Card/CardTitle.mjs

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCard } from './CardContext.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const CardTitle = (props) => {
+    const { id } = useCard();
+    return jsx(Typography, { variant: "pi", id: `${id}-title`, textColor: "neutral800", fontWeight: "bold", as: "div", ...props });
+};
+const CardSubtitle = (props) => {
+    return jsx(Typography, { variant: "pi", ...props, textColor: "neutral600", as: "div" });
+};
+
+export { CardSubtitle, CardTitle };

package/dist/Card/index.js

@@ -1,23 +1,28 @@
-import { Card as e } from "./Card.js";
-import { CardAction as d } from "./CardAction.js";
-import { CardAsset as C } from "./CardAsset.js";
-import { CardBadge as x } from "./CardBadge.js";
-import { CardBody as p } from "./CardBody.js";
-import { CardCheckbox as n } from "./CardCheckbox.js";
-import { CardContent as c } from "./CardContent.js";
-import { CardHeader as s } from "./CardHeader.js";
-import { CardTimer as B } from "./CardTimer.js";
-import { CardSubtitle as g, CardTitle as h } from "./CardTitle.js";
-export {
-  e as Card,
-  d as CardAction,
-  C as CardAsset,
-  x as CardBadge,
-  p as CardBody,
-  n as CardCheckbox,
-  c as CardContent,
-  s as CardHeader,
-  g as CardSubtitle,
-  B as CardTimer,
-  h as CardTitle
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Card = require('./Card.js');
+const CardAction = require('./CardAction.js');
+const CardAsset = require('./CardAsset.js');
+const CardBadge = require('./CardBadge.js');
+const CardBody = require('./CardBody.js');
+const CardCheckbox = require('./CardCheckbox.js');
+const CardContent = require('./CardContent.js');
+const CardHeader = require('./CardHeader.js');
+const CardTimer = require('./CardTimer.js');
+const CardTitle = require('./CardTitle.js');
+
+
+
+exports.Card = Card.Card;
+exports.CardAction = CardAction.CardAction;
+exports.CardAsset = CardAsset.CardAsset;
+exports.CardBadge = CardBadge.CardBadge;
+exports.CardBody = CardBody.CardBody;
+exports.CardCheckbox = CardCheckbox.CardCheckbox;
+exports.CardContent = CardContent.CardContent;
+exports.CardHeader = CardHeader.CardHeader;
+exports.CardTimer = CardTimer.CardTimer;
+exports.CardSubtitle = CardTitle.CardSubtitle;
+exports.CardTitle = CardTitle.CardTitle;

package/dist/Card/index.mjs

@@ -0,0 +1,10 @@
+export { Card } from './Card.mjs';
+export { CardAction } from './CardAction.mjs';
+export { CardAsset } from './CardAsset.mjs';
+export { CardBadge } from './CardBadge.mjs';
+export { CardBody } from './CardBody.mjs';
+export { CardCheckbox } from './CardCheckbox.mjs';
+export { CardContent } from './CardContent.mjs';
+export { CardHeader } from './CardHeader.mjs';
+export { CardTimer } from './CardTimer.mjs';
+export { CardSubtitle, CardTitle } from './CardTitle.mjs';

package/dist/CarouselInput/Carousel.js

@@ -1,40 +1,81 @@
-import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
-import * as o from "react";
-import { ChevronLeft as k, ChevronRight as D } from "@strapi/icons";
-import c from "styled-components";
-import { KeyboardKeys as h } from "../helpers/keyboardKeys.js";
-import { Tooltip as K } from "../Tooltip/Tooltip.js";
-import { Box as i } from "../Box/Box.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { Icon as f } from "../Icon/Icon.js";
-import { Typography as T } from "../Typography/Typography.js";
-const j = c(i)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const Tooltip = require('../Tooltip/Tooltip.js');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+const Icon = require('../Icon/Icon.js');
+const Typography = require('../Typography/Typography.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 CarouselGrid = styled__default.default(Box.Box) `
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
-`, F = c(g)`
+`;
+const CarouselSlides = styled__default.default(Flex.Flex) `
   grid-area: slides;
-`, m = c(i)`
-  grid-area: ${({ area: r }) => r};
+`;
+const CarouselAction = styled__default.default(Box.Box) `
+  grid-area: ${({ area }) => area};
 
   &:focus svg path,
   &:hover svg path {
-    fill: ${({ theme: r }) => r.colors.neutral900};
+    fill: ${({ theme }) => theme.colors.neutral900};
   }
-`, J = ({ actions: r, children: y, label: C, nextLabel: b, onNext: p, onPrevious: u, previousLabel: x, secondaryLabel: n, selectedSlide: R, ...v }) => {
-  const a = o.useRef(null), l = o.useRef(null), d = o.Children.map(y, (t, w) => o.cloneElement(t, { selected: w === R }));
-  return e(i, { ...v, onKeyDown: (t) => {
-    switch (t.key) {
-      case h.RIGHT: {
-        t.preventDefault(), l?.current && l.current.focus(), p();
-        break;
-      }
-      case h.LEFT: {
-        t.preventDefault(), a?.current && a.current.focus(), u();
-        break;
-      }
-    }
-  }, children: s(i, { padding: 2, borderColor: "neutral200", hasRadius: !0, background: "neutral100", children: [s(j, { as: "section", "aria-roledescription": "carousel", "aria-label": C, display: "grid", position: "relative", children: [d && d.length > 1 && s(A, { children: [e(m, { as: "button", onClick: u, area: "startAction", ref: a, "aria-label": x, type: "button", children: e(f, { as: k, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) }), e(m, { as: "button", onClick: p, area: "endAction", ref: l, "aria-label": b, type: "button", children: e(f, { as: D, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) })] }), e(F, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: d }), r] }), n && e(i, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: e(K, { label: n, children: e(g, { justifyContent: "center", children: e(T, { variant: "pi", textColor: "neutral600", ellipsis: !0, children: n }) }) }) })] }) });
-};
-export {
-  J as Carousel
-};
+`;
+const Carousel = React__namespace.forwardRef(({ actions, children, label, nextLabel, onNext, onPrevious, previousLabel, secondaryLabel, selectedSlide, ...props }, forwardedRef) => {
+    const prevActionRef = React__namespace.useRef(null);
+    const nextActionRef = React__namespace.useRef(null);
+    const childrenArray = React__namespace.Children.map(children, (node, index) => React__namespace.cloneElement(node, { selected: index === selectedSlide }));
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case keyboardKeys.KeyboardKeys.RIGHT: {
+                event.preventDefault();
+                if (nextActionRef?.current) {
+                    nextActionRef.current.focus();
+                }
+                onNext();
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.LEFT: {
+                event.preventDefault();
+                if (prevActionRef?.current) {
+                    prevActionRef.current.focus();
+                }
+                onPrevious();
+                break;
+            }
+        }
+    };
+    return (jsxRuntime.jsx(Box.Box, { ref: forwardedRef, ...props, onKeyDown: handleKeyDown, children: jsxRuntime.jsxs(Box.Box, { padding: 2, borderColor: "neutral200", hasRadius: true, background: "neutral100", children: [jsxRuntime.jsxs(CarouselGrid, { as: "section", "aria-roledescription": "carousel", "aria-label": label, display: "grid", position: "relative", children: [childrenArray && childrenArray.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, "aria-label": previousLabel, type: "button", children: jsxRuntime.jsx(Icon.Icon, { as: icons.ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) }), jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, "aria-label": nextLabel, type: "button", children: jsxRuntime.jsx(Icon.Icon, { as: icons.ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) })] })), jsxRuntime.jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }), actions] }), secondaryLabel && (jsxRuntime.jsx(Box.Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: jsxRuntime.jsx(Tooltip.Tooltip, { label: secondaryLabel, children: jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) }))] }) }));
+});
+
+exports.Carousel = Carousel;

package/dist/CarouselInput/Carousel.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from '@strapi/icons';
+import styled from 'styled-components';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const CarouselGrid = styled(Box) `
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+`;
+const CarouselSlides = styled(Flex) `
+  grid-area: slides;
+`;
+const CarouselAction = styled(Box) `
+  grid-area: ${({ area }) => area};
+
+  &:focus svg path,
+  &:hover svg path {
+    fill: ${({ theme }) => theme.colors.neutral900};
+  }
+`;
+const Carousel = React.forwardRef(({ actions, children, label, nextLabel, onNext, onPrevious, previousLabel, secondaryLabel, selectedSlide, ...props }, forwardedRef) => {
+    const prevActionRef = React.useRef(null);
+    const nextActionRef = React.useRef(null);
+    const childrenArray = React.Children.map(children, (node, index) => React.cloneElement(node, { selected: index === selectedSlide }));
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case KeyboardKeys.RIGHT: {
+                event.preventDefault();
+                if (nextActionRef?.current) {
+                    nextActionRef.current.focus();
+                }
+                onNext();
+                break;
+            }
+            case KeyboardKeys.LEFT: {
+                event.preventDefault();
+                if (prevActionRef?.current) {
+                    prevActionRef.current.focus();
+                }
+                onPrevious();
+                break;
+            }
+        }
+    };
+    return (jsx(Box, { ref: forwardedRef, ...props, onKeyDown: handleKeyDown, children: jsxs(Box, { padding: 2, borderColor: "neutral200", hasRadius: true, background: "neutral100", children: [jsxs(CarouselGrid, { as: "section", "aria-roledescription": "carousel", "aria-label": label, display: "grid", position: "relative", children: [childrenArray && childrenArray.length > 1 && (jsxs(Fragment, { children: [jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, "aria-label": previousLabel, type: "button", children: jsx(Icon, { as: ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) }), jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, "aria-label": nextLabel, type: "button", children: jsx(Icon, { as: ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) })] })), jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }), actions] }), secondaryLabel && (jsx(Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: jsx(Tooltip, { label: secondaryLabel, children: jsx(Flex, { justifyContent: "center", children: jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) }))] }) }));
+});
+
+export { Carousel };

package/dist/CarouselInput/CarouselActions.js

@@ -1,6 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Flex as i } from "../Flex/Flex.js";
-const c = ({ horizontal: t = !0, spacing: o = 1, ...e }) => r(i, { justifyContent: "center", gap: o, direction: t ? "row" : "column", alignItems: t ? "center" : "stretch", position: "absolute", width: "100%", bottom: 1, ...e });
-export {
-  c as CarouselActions
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Flex = require('../Flex/Flex.js');
+
+const CarouselActions = ({ horizontal = true, spacing = 1, ...props }) => (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', position: "absolute", width: "100%", bottom: 1, ...props }));
+
+exports.CarouselActions = CarouselActions;

package/dist/CarouselInput/CarouselActions.mjs

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CarouselActions = ({ horizontal = true, spacing = 1, ...props }) => (jsx(Flex, { justifyContent: "center", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', position: "absolute", width: "100%", bottom: 1, ...props }));
+
+export { CarouselActions };

package/dist/CarouselInput/CarouselImage.js

@@ -1,17 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as s } from "react";
-import l from "styled-components";
-import { ellipsisStyle as a } from "../Typography/utils.js";
-import { Box as n } from "../Box/Box.js";
-import { Tooltip as f } from "../Tooltip/Tooltip.js";
-const o = l(n)`
-  ${a({ ellipsis: !0 })}
-`, x = (r) => {
-  const [e, i] = s(!1), m = () => {
-    i(!0);
-  };
-  return e ? t(f, { description: r.alt ?? "", children: t(o, { as: "img", height: "100%", maxWidth: "100%", ...r }) }) : t(o, { as: "img", height: "100%", maxWidth: "100%", ...r, onError: m });
-};
-export {
-  x as CarouselImage
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const utils = require('../Typography/utils.js');
+const Box = require('../Box/Box.js');
+const Tooltip = require('../Tooltip/Tooltip.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledImage = styled__default.default(Box.Box) `
+  ${utils.ellipsisStyle({ ellipsis: true })}
+`;
+const CarouselImage = (props) => {
+    const [isError, setIsError] = React.useState(false);
+    const handleImageError = () => {
+        setIsError(true);
+    };
+    if (isError) {
+        return (jsxRuntime.jsx(Tooltip.Tooltip, { description: props.alt ?? '', children: jsxRuntime.jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props }) }));
+    }
+    return jsxRuntime.jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
 };
+
+exports.CarouselImage = CarouselImage;

package/dist/CarouselInput/CarouselImage.mjs

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { ellipsisStyle } from '../Typography/utils.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+
+const StyledImage = styled(Box) `
+  ${ellipsisStyle({ ellipsis: true })}
+`;
+const CarouselImage = (props) => {
+    const [isError, setIsError] = useState(false);
+    const handleImageError = () => {
+        setIsError(true);
+    };
+    if (isError) {
+        return (jsx(Tooltip, { description: props.alt ?? '', children: jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props }) }));
+    }
+    return jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
+};
+
+export { CarouselImage };

package/dist/CarouselInput/CarouselInput.js

@@ -1,15 +1,20 @@
-import { jsx as r, jsxs as F } from "react/jsx-runtime";
-import { Carousel as I } from "./Carousel.js";
-import { useId as L } from "../hooks/useId.js";
-import { Field as b } from "../Field/Field.js";
-import { FieldLabel as g } from "../Field/FieldLabel.js";
-import { FieldHint as j } from "../Field/FieldHint.js";
-import { FieldError as v } from "../Field/FieldError.js";
-import { Flex as C } from "../Flex/Flex.js";
-const w = ({ actions: i, children: t, error: n, hint: d, label: e, labelAction: m, nextLabel: l, onNext: s, onPrevious: c, previousLabel: p, required: a, secondaryLabel: u, selectedSlide: f, id: h, ...x }) => {
-  const o = L(h);
-  return r(b, { hint: d, error: n, id: o, required: a, children: F(C, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(g, { action: m, children: e }), r(I, { actions: i, label: e, nextLabel: l, onNext: s, onPrevious: c, previousLabel: p, secondaryLabel: u, selectedSlide: f, id: o, ...x, children: t }), r(j, {}), r(v, {})] }) });
-};
-export {
-  w as CarouselInput
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Carousel = require('./Carousel.js');
+const useId = require('../hooks/useId.js');
+const Field = require('../Field/Field.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+const Flex = require('../Flex/Flex.js');
+
+const CarouselInput = React.forwardRef(({ actions, children, error, hint, label, labelAction, nextLabel, onNext, onPrevious, previousLabel, required, secondaryLabel, selectedSlide, id, ...props }, forwardedRef) => {
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(Carousel.Carousel, { ref: forwardedRef, actions: actions, label: label, nextLabel: nextLabel, onNext: onNext, onPrevious: onPrevious, previousLabel: previousLabel, secondaryLabel: secondaryLabel, selectedSlide: selectedSlide, id: generatedId, ...props, children: children }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+
+exports.CarouselInput = CarouselInput;

package/dist/CarouselInput/CarouselInput.mjs

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Carousel } from './Carousel.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Field } from '../Field/Field.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CarouselInput = forwardRef(({ actions, children, error, hint, label, labelAction, nextLabel, onNext, onPrevious, previousLabel, required, secondaryLabel, selectedSlide, id, ...props }, forwardedRef) => {
+    const generatedId = useId(id);
+    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsx(FieldLabel, { action: labelAction, children: label }), jsx(Carousel, { ref: forwardedRef, actions: actions, label: label, nextLabel: nextLabel, onNext: onNext, onPrevious: onPrevious, previousLabel: previousLabel, secondaryLabel: secondaryLabel, selectedSlide: selectedSlide, id: generatedId, ...props, children: children }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+
+export { CarouselInput };

package/dist/CarouselInput/CarouselSlide.js

@@ -1,6 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Flex as t } from "../Flex/Flex.js";
-const s = ({ label: e, children: r, selected: i = !1, ...l }) => o(t, { alignItems: "center", display: i ? "flex" : "none", role: "group", "aria-roledescription": "slide", "aria-label": e, justifyContent: "center", height: "124px", width: "100%", ...l, children: r });
-export {
-  s as CarouselSlide
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Flex = require('../Flex/Flex.js');
+
+const CarouselSlide = ({ label, children, selected = false, ...props }) => (jsxRuntime.jsx(Flex.Flex, { alignItems: "center", display: selected ? 'flex' : 'none', role: "group", "aria-roledescription": "slide", "aria-label": label, justifyContent: "center", height: "124px", width: "100%", ...props, children: children }));
+
+exports.CarouselSlide = CarouselSlide;

package/dist/CarouselInput/CarouselSlide.mjs

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { Flex } from '../Flex/Flex.mjs';
+
+const CarouselSlide = ({ label, children, selected = false, ...props }) => (jsx(Flex, { alignItems: "center", display: selected ? 'flex' : 'none', role: "group", "aria-roledescription": "slide", "aria-label": label, justifyContent: "center", height: "124px", width: "100%", ...props, children: children }));
+
+export { CarouselSlide };

package/dist/CarouselInput/index.js

@@ -1,12 +1,17 @@
-import { Carousel as e } from "./Carousel.js";
-import { CarouselInput as a } from "./CarouselInput.js";
-import { CarouselActions as m } from "./CarouselActions.js";
-import { CarouselImage as s } from "./CarouselImage.js";
-import { CarouselSlide as f } from "./CarouselSlide.js";
-export {
-  e as Carousel,
-  m as CarouselActions,
-  s as CarouselImage,
-  a as CarouselInput,
-  f as CarouselSlide
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Carousel = require('./Carousel.js');
+const CarouselInput = require('./CarouselInput.js');
+const CarouselActions = require('./CarouselActions.js');
+const CarouselImage = require('./CarouselImage.js');
+const CarouselSlide = require('./CarouselSlide.js');
+
+
+
+exports.Carousel = Carousel.Carousel;
+exports.CarouselInput = CarouselInput.CarouselInput;
+exports.CarouselActions = CarouselActions.CarouselActions;
+exports.CarouselImage = CarouselImage.CarouselImage;
+exports.CarouselSlide = CarouselSlide.CarouselSlide;

package/dist/CarouselInput/index.mjs

@@ -0,0 +1,5 @@
+export { Carousel } from './Carousel.mjs';
+export { CarouselInput } from './CarouselInput.mjs';
+export { CarouselActions } from './CarouselActions.mjs';
+export { CarouselImage } from './CarouselImage.mjs';
+export { CarouselSlide } from './CarouselSlide.mjs';

package/dist/Checkbox/Checkbox.js

@@ -1,28 +1,64 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import a from "styled-components";
-import { useId as c } from "../hooks/useId.js";
-import { useField as p } from "../Field/FieldContext.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { Field as x } from "../Field/Field.js";
-import { Flex as h } from "../Flex/Flex.js";
-import { Box as b } from "../Box/Box.js";
-import { FieldHint as u } from "../Field/FieldHint.js";
-import { FieldError as g } from "../Field/FieldError.js";
-import { BaseCheckbox as k } from "../BaseCheckbox/BaseCheckbox.js";
-const y = a(f)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const useId = require('../hooks/useId.js');
+const FieldContext = require('../Field/FieldContext.js');
+const Typography = require('../Typography/Typography.js');
+const BaseCheckbox = require('../BaseCheckbox/BaseCheckbox.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.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 CheckboxLabel = styled__default.default(Typography.Typography) `
   display: flex;
   align-items: flex-start;
   * {
-    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   }
-`, C = (e) => {
-  const { id: o } = p();
-  return r(k, { id: o, ...e });
-}, q = ({ children: e, disabled: o = !1, id: s, hint: l, error: m, ...n }) => {
-  const i = c(s);
-  let t;
-  return m ? t = `${i}-error` : l && (t = `${i}-hint`), r(x, { id: i, hint: l, error: m, children: d(h, { direction: "column", alignItems: "stretch", gap: 1, children: [d(y, { as: "label", textColor: "neutral800", disabled: o, children: [r(C, { disabled: o, "aria-describedby": t, ...n }), r(b, { paddingLeft: 2, children: e })] }), r(u, {}), r(g, {})] }) });
-};
-export {
-  q as Checkbox
-};
+`;
+const CheckboxTick = React__namespace.forwardRef((props, forwardedRef) => {
+    const { id } = FieldContext.useField();
+    return jsxRuntime.jsx(BaseCheckbox.BaseCheckbox, { ref: forwardedRef, id: id, ...props });
+});
+const Checkbox = React__namespace.forwardRef(({ children, disabled = false, id, hint, error, ...props }, forwardedRef) => {
+    const generatedId = useId.useId(id);
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${generatedId}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${generatedId}-hint`;
+    }
+    return (jsxRuntime.jsx(Field.Field, { id: generatedId, hint: hint, error: error, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsxs(CheckboxLabel, { as: "label", textColor: "neutral800", disabled: disabled, children: [jsxRuntime.jsx(CheckboxTick, { ref: forwardedRef, disabled: disabled, "aria-describedby": ariaDescription, ...props }), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: children })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+
+exports.Checkbox = Checkbox;