@strapi/design-system 1.9.0 → 1.10.0

package/dist/Tag/Tag.js

@@ -1,23 +1,38 @@
-import { jsxs as n, jsx as p } from "react/jsx-runtime";
-import t from "styled-components";
-import { Flex as s } from "../Flex/Flex.js";
-import { Typography as d } from "../Typography/Typography.js";
-const x = ({ children: r, icon: a, disabled: o = !1, onClick: i, ...e }) => n(g, { as: "button", background: o ? "neutral200" : "primary100", color: o ? "neutral700" : "primary600", paddingLeft: 3, paddingRight: 3, onClick: (l) => {
-  o || !i || i(l);
-}, "aria-disabled": o, disabled: o, borderWidth: "1px", borderStyle: "solid", borderColor: o ? "neutral300" : "primary200", hasRadius: !0, height: `${32 / 16}rem`, gap: 2, ...e, children: [p(c, { $disabled: o, variant: "pi", fontWeight: "bold", as: "span", children: r }), a] }), g = t(s)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const Tag = ({ children, icon, disabled = false, onClick, ...props }) => {
+    const handleClick = (e) => {
+        if (disabled || !onClick)
+            return;
+        onClick(e);
+    };
+    return (jsxRuntime.jsxs(TagWrapper, { as: "button", background: disabled ? 'neutral200' : 'primary100', color: disabled ? 'neutral700' : 'primary600', paddingLeft: 3, paddingRight: 3, onClick: handleClick, "aria-disabled": disabled, disabled: disabled, borderWidth: "1px", borderStyle: "solid", borderColor: disabled ? 'neutral300' : 'primary200', hasRadius: true, height: `${32 / 16}rem`, gap: 2, ...props, children: [jsxRuntime.jsx(TagText, { "$disabled": disabled, variant: "pi", fontWeight: "bold", as: "span", children: children }), icon] }));
+};
+const TagWrapper = styled__default.default(Flex.Flex) `
   & > svg {
     height: ${8 / 16}rem;
     width: ${8 / 16}rem;
   }
 
   & > svg path {
-    fill: ${({ theme: r, ...a }) => a["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
+    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
   }
-`, c = t(d)`
+`;
+const TagText = styled__default.default(Typography.Typography) `
   color: inherit;
-  border-right: 1px solid ${({ theme: r, $disabled: a }) => a ? r.colors.neutral300 : r.colors.primary200};
-  padding-right: ${({ theme: r }) => r.spaces[2]};
+  border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)};
+  padding-right: ${({ theme }) => theme.spaces[2]};
 `;
-export {
-  x as Tag
-};
+
+exports.Tag = Tag;

package/dist/Tag/Tag.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const Tag = ({ children, icon, disabled = false, onClick, ...props }) => {
+    const handleClick = (e) => {
+        if (disabled || !onClick)
+            return;
+        onClick(e);
+    };
+    return (jsxs(TagWrapper, { as: "button", background: disabled ? 'neutral200' : 'primary100', color: disabled ? 'neutral700' : 'primary600', paddingLeft: 3, paddingRight: 3, onClick: handleClick, "aria-disabled": disabled, disabled: disabled, borderWidth: "1px", borderStyle: "solid", borderColor: disabled ? 'neutral300' : 'primary200', hasRadius: true, height: `${32 / 16}rem`, gap: 2, ...props, children: [jsx(TagText, { "$disabled": disabled, variant: "pi", fontWeight: "bold", as: "span", children: children }), icon] }));
+};
+const TagWrapper = styled(Flex) `
+  & > svg {
+    height: ${8 / 16}rem;
+    width: ${8 / 16}rem;
+  }
+
+  & > svg path {
+    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
+  }
+`;
+const TagText = styled(Typography) `
+  color: inherit;
+  border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)};
+  padding-right: ${({ theme }) => theme.spaces[2]};
+`;
+
+export { Tag };

package/dist/Tag/index.js

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

package/dist/Tag/index.mjs

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

package/dist/TextButton/TextButton.js

@@ -1,40 +1,71 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import * as c from "react";
-import { Loader as u } from "@strapi/icons";
-import i, { keyframes as h } from "styled-components";
-import { buttonFocusStyle as y } from "../themes/utils.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { Typography as x } from "../Typography/Typography.js";
-const b = h`
+'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 utils = require('../themes/utils.js');
+const Flex = require('../Flex/Flex.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 rotation = styled.keyframes `
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, v = i.div`
-  animation: ${b} 2s infinite linear;
+`;
+const LoadingWrapper = styled__default.default.div `
+  animation: ${rotation} 2s infinite linear;
   will-change: transform;
-`, T = i(g)`
+`;
+const TextButtonWrapper = styled__default.default(Flex.Flex) `
   border: none;
 
   &[aria-disabled='true'] {
     pointer-events: none;
     svg path {
-      fill: ${({ theme: r }) => r.colors.neutral600};
+      fill: ${({ theme }) => theme.colors.neutral600};
     }
   }
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.primary600};
+    fill: ${({ theme }) => theme.colors.primary600};
   }
 
-  ${y}
-`, $ = c.forwardRef(({ children: r, startIcon: s, endIcon: l, onClick: o, disabled: e = !1, loading: a = !1, ...p }, m) => {
-  const f = o && !e ? o : void 0, n = e || a;
-  return d(T, { ref: m, "aria-disabled": n, onClick: f, as: "button", type: "button", background: "transparent", gap: 2, ...p, children: [a ? t(v, { "aria-hidden": !0, children: t(u, {}) }) : s, t(x, { variant: "pi", textColor: n ? "neutral600" : "primary600", children: r }), l] });
+  ${utils.buttonFocusStyle}
+`;
+const TextButton = React__namespace.forwardRef(({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : undefined;
+    const isDisabled = disabled || loading;
+    return (jsxRuntime.jsxs(TextButtonWrapper, { ref: ref, "aria-disabled": isDisabled, onClick: handleClick, as: "button", type: "button", background: "transparent", gap: 2, ...props, children: [loading ? (jsxRuntime.jsx(LoadingWrapper, { "aria-hidden": true, children: jsxRuntime.jsx(icons.Loader, {}) })) : (startIcon), jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: isDisabled ? 'neutral600' : 'primary600', children: children }), endIcon] }));
 });
-$.displayName = "TextButton";
-export {
-  $ as TextButton
-};
+TextButton.displayName = 'TextButton';
+
+exports.TextButton = TextButton;

package/dist/TextButton/TextButton.mjs

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Loader } from '@strapi/icons';
+import styled, { keyframes } from 'styled-components';
+import { buttonFocusStyle } from '../themes/utils.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const rotation = keyframes `
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+const LoadingWrapper = styled.div `
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+const TextButtonWrapper = styled(Flex) `
+  border: none;
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+
+  ${buttonFocusStyle}
+`;
+const TextButton = React.forwardRef(({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : undefined;
+    const isDisabled = disabled || loading;
+    return (jsxs(TextButtonWrapper, { ref: ref, "aria-disabled": isDisabled, onClick: handleClick, as: "button", type: "button", background: "transparent", gap: 2, ...props, children: [loading ? (jsx(LoadingWrapper, { "aria-hidden": true, children: jsx(Loader, {}) })) : (startIcon), jsx(Typography, { variant: "pi", textColor: isDisabled ? 'neutral600' : 'primary600', children: children }), endIcon] }));
+});
+TextButton.displayName = 'TextButton';
+
+export { TextButton };

package/dist/TextButton/index.js

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

package/dist/TextButton/index.mjs

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

package/dist/TextInput/TextInput.js

@@ -1,22 +1,33 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as h, useRef as n, useImperativeHandle as I } from "react";
-import { useId as x } from "../hooks/useId.js";
-import { Field as F } from "../Field/Field.js";
-import { Flex as R } from "../Flex/Flex.js";
-import { FieldLabel as T } from "../Field/FieldLabel.js";
-import { FieldInput as g } from "../Field/FieldInput.js";
-import { FieldHint as w } from "../Field/FieldHint.js";
-import { FieldError as b } from "../Field/FieldError.js";
-const j = h(({ name: m, hint: p, error: l, label: e, labelAction: d, id: a, required: f, ...t }, u) => {
-  const s = x(a), i = n(null), o = n(null);
-  if (!e && !t["aria-label"])
-    throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-  return I(u, () => ({
-    input: o,
-    inputWrapperRef: i
-  }), []), r("div", { ref: i, children: r(F, { name: m, hint: p, error: l, id: s, required: f, children: c(R, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(T, { action: d, children: e }), r(g, { ref: o, ...t }), r(w, {}), r(b, {})] }) }) });
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useId = require('../hooks/useId.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldInput = require('../Field/FieldInput.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const TextInput = React.forwardRef(({ name, hint, error, label, labelAction, id, required, ...props }, ref) => {
+    const generatedId = useId.useId(id);
+    const inputWrapperRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    if (!label && !props['aria-label']) {
+        throw new Error('The TextInput component needs a "label" or an "aria-label" props');
+    }
+    /**
+     * TODO: for V2, remove this.
+     */
+    React.useImperativeHandle(ref, () => ({
+        input: inputRef,
+        inputWrapperRef,
+    }), []);
+    return (jsxRuntime.jsx("div", { ref: inputWrapperRef, children: jsxRuntime.jsx(Field.Field, { name: name, 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(FieldInput.FieldInput, { ref: inputRef, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }) }));
 });
-j.displayName = "TextInput";
-export {
-  j as TextInput
-};
+TextInput.displayName = 'TextInput';
+
+exports.TextInput = TextInput;

package/dist/TextInput/TextInput.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useId } from '../hooks/useId.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldInput } from '../Field/FieldInput.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const TextInput = forwardRef(({ name, hint, error, label, labelAction, id, required, ...props }, ref) => {
+    const generatedId = useId(id);
+    const inputWrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    if (!label && !props['aria-label']) {
+        throw new Error('The TextInput component needs a "label" or an "aria-label" props');
+    }
+    /**
+     * TODO: for V2, remove this.
+     */
+    useImperativeHandle(ref, () => ({
+        input: inputRef,
+        inputWrapperRef,
+    }), []);
+    return (jsx("div", { ref: inputWrapperRef, children: jsx(Field, { name: name, 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(FieldInput, { ref: inputRef, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }) }));
+});
+TextInput.displayName = 'TextInput';
+
+export { TextInput };

package/dist/TextInput/index.js

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

package/dist/TextInput/index.mjs

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

package/dist/Textarea/Textarea.js

@@ -1,39 +1,55 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import m from "react";
-import c from "styled-components";
-import { useId as g } from "../hooks/useId.js";
-import { inputFocusStyle as F } from "../themes/utils.js";
-import { Box as u } from "../Box/Box.js";
-import { useField as $ } from "../Field/FieldContext.js";
-import { Field as R } from "../Field/Field.js";
-import { Flex as b } from "../Flex/Flex.js";
-import { FieldLabel as w } from "../Field/FieldLabel.js";
-import { FieldHint as y } from "../Field/FieldHint.js";
-import { FieldError as z } from "../Field/FieldError.js";
-const E = c(u)`
-  ${F()}
-`, I = c(u)`
+'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 utils = require('../themes/utils.js');
+const Box = require('../Box/Box.js');
+const FieldContext = require('../Field/FieldContext.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.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 Wrapper = styled__default.default(Box.Box) `
+  ${utils.inputFocusStyle()}
+`;
+const TextareaElement = styled__default.default(Box.Box) `
   border: none;
   resize: none;
 
   ::placeholder {
-    color: ${({ theme: r }) => r.colors.neutral500};
-    font-size: ${({ theme: r }) => r.fontSizes[2]};
-    color: ${({ theme: r }) => r.colors.neutral500};
+    color: ${({ theme }) => theme.colors.neutral500};
+    font-size: ${({ theme }) => theme.fontSizes[2]};
+    color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
   }
 
   &:focus-within {
     outline: none;
   }
-`, q = m.forwardRef(({ disabled: r, ...a }, d) => {
-  const { id: o, error: i, hint: l, required: s } = $(), t = !!i;
-  let n = l ? `${o}-hint` : void 0;
-  return i && (n = `${o}-error`), e(E, { borderColor: t ? "danger600" : "neutral200", hasError: t, hasRadius: !0, children: e(I, { "aria-describedby": n, "aria-invalid": t, "aria-required": s, as: "textarea", background: r ? "neutral150" : "neutral0", color: r ? "neutral600" : "neutral800", disabled: r, fontSize: 2, hasRadius: !0, height: `${105 / 16}rem`, id: o, ref: d, lineHeight: 4, padding: 4, width: "100%", ...a }) });
-}), A = m.forwardRef(({ name: r, hint: a, error: d, label: o, labelAction: i, id: l, required: s = !1, children: t, value: n, ...f }, p) => {
-  const h = g(l);
-  return e(R, { name: r, hint: a, error: d, id: h, required: s, children: x(b, { direction: "column", alignItems: "stretch", gap: 1, children: [o && e(w, { action: i, children: o }), e(q, { ref: p, value: t ?? n, ...f }), e(y, {}), e(z, {})] }) });
+`;
+const TextareaInput = React__default.default.forwardRef(({ disabled, ...props }, ref) => {
+    const { id, error, hint, required } = FieldContext.useField();
+    const hasError = Boolean(error);
+    let ariaDescription = hint ? `${id}-hint` : undefined;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    return (jsxRuntime.jsx(Wrapper, { borderColor: hasError ? 'danger600' : 'neutral200', hasError: hasError, hasRadius: true, children: jsxRuntime.jsx(TextareaElement, { "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-required": required, as: "textarea", background: disabled ? 'neutral150' : 'neutral0', color: disabled ? 'neutral600' : 'neutral800', disabled: disabled, fontSize: 2, hasRadius: true, height: `${105 / 16}rem`, id: id, ref: ref, lineHeight: 4, padding: 4, width: "100%", ...props }) }));
+});
+const Textarea = React__default.default.forwardRef(({ name, hint, error, label, labelAction, id, required = false, children, value, ...props }, ref) => {
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { name: name, 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(TextareaInput, { ref: ref, value: children ?? value, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
 });
-export {
-  A as Textarea
-};
+
+exports.Textarea = Textarea;

package/dist/Textarea/Textarea.mjs

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useId } from '../hooks/useId.mjs';
+import { inputFocusStyle } from '../themes/utils.mjs';
+import { Box } from '../Box/Box.mjs';
+import { useField } from '../Field/FieldContext.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const Wrapper = styled(Box) `
+  ${inputFocusStyle()}
+`;
+const TextareaElement = styled(Box) `
+  border: none;
+  resize: none;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.neutral500};
+    font-size: ${({ theme }) => theme.fontSizes[2]};
+    color: ${({ theme }) => theme.colors.neutral500};
+    opacity: 1;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+`;
+const TextareaInput = React__default.forwardRef(({ disabled, ...props }, ref) => {
+    const { id, error, hint, required } = useField();
+    const hasError = Boolean(error);
+    let ariaDescription = hint ? `${id}-hint` : undefined;
+    if (error) {
+        ariaDescription = `${id}-error`;
+    }
+    return (jsx(Wrapper, { borderColor: hasError ? 'danger600' : 'neutral200', hasError: hasError, hasRadius: true, children: jsx(TextareaElement, { "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-required": required, as: "textarea", background: disabled ? 'neutral150' : 'neutral0', color: disabled ? 'neutral600' : 'neutral800', disabled: disabled, fontSize: 2, hasRadius: true, height: `${105 / 16}rem`, id: id, ref: ref, lineHeight: 4, padding: 4, width: "100%", ...props }) }));
+});
+const Textarea = React__default.forwardRef(({ name, hint, error, label, labelAction, id, required = false, children, value, ...props }, ref) => {
+    const generatedId = useId(id);
+    return (jsx(Field, { name: name, 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(TextareaInput, { ref: ref, value: children ?? value, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+
+export { Textarea };

package/dist/Textarea/index.js

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

package/dist/Textarea/index.mjs

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

package/dist/ThemeProvider/ThemeProvider.js

@@ -1,8 +1,13 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { createGlobalStyle as i, ThemeProvider as n } from "styled-components";
-import { LiveRegions as l } from "../LiveRegions/LiveRegions.js";
-import { lightTheme as s } from "../themes/lightTheme/index.js";
-const a = i`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const LiveRegions = require('../LiveRegions/LiveRegions.js');
+const index = require('../themes/lightTheme/index.js');
+
+const GlobalStyle = styled.createGlobalStyle `
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -139,7 +144,7 @@ const a = i`
   }
 
   *:focus-visible {
-    outline: 2px solid ${({ theme: e }) => e.colors.primary600};
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: 2px;
   }
 
@@ -174,7 +179,9 @@ const a = i`
     height: 100vh;
     overflow-y: hidden;
   }
-`, h = ({ children: e, theme: t = s }) => r(n, { theme: t, children: [e, o(l, {}), o(a, {})] });
-export {
-  h as ThemeProvider
+`;
+const ThemeProvider = ({ children, theme = index.lightTheme }) => {
+    return (jsxRuntime.jsxs(styled.ThemeProvider, { theme: theme, children: [children, jsxRuntime.jsx(LiveRegions.LiveRegions, {}), jsxRuntime.jsx(GlobalStyle, {})] }));
 };
+
+exports.ThemeProvider = ThemeProvider;

package/dist/ThemeProvider/{ThemeProvider.cjs → ThemeProvider.mjs}

@@ -1,4 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("styled-components"),r=require("../LiveRegions/LiveRegions.cjs"),n=require("../themes/lightTheme/index.cjs"),s=t.createGlobalStyle`
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { LiveRegions } from '../LiveRegions/LiveRegions.mjs';
+import { lightTheme } from '../themes/lightTheme/index.mjs';
+
+const GlobalStyle = createGlobalStyle `
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -135,7 +140,7 @@
   }
 
   *:focus-visible {
-    outline: 2px solid ${({theme:e})=>e.colors.primary600};
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
     outline-offset: 2px;
   }
 
@@ -170,4 +175,9 @@
     height: 100vh;
     overflow-y: hidden;
   }
-`,l=({children:e,theme:i=n.lightTheme})=>o.jsxs(t.ThemeProvider,{theme:i,children:[e,o.jsx(r.LiveRegions,{}),o.jsx(s,{})]});exports.ThemeProvider=l;
+`;
+const ThemeProvider = ({ children, theme = lightTheme }) => {
+    return (jsxs(ThemeProvider$1, { theme: theme, children: [children, jsx(LiveRegions, {}), jsx(GlobalStyle, {})] }));
+};
+
+export { ThemeProvider };

package/dist/ThemeProvider/hooks.js

@@ -1,5 +1,11 @@
-import { useTheme as e } from "styled-components";
-const r = () => e();
-export {
-  r as useTheme
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+
+const useTheme = () => {
+    return styled.useTheme();
 };
+
+exports.useTheme = useTheme;

package/dist/ThemeProvider/hooks.mjs

@@ -0,0 +1,7 @@
+import { useTheme as useTheme$1 } from 'styled-components';
+
+const useTheme = () => {
+    return useTheme$1();
+};
+
+export { useTheme };

package/dist/ThemeProvider/index.js

@@ -1,6 +1,11 @@
-import { ThemeProvider as o } from "./ThemeProvider.js";
-import { useTheme as f } from "./hooks.js";
-export {
-  o as ThemeProvider,
-  f as useTheme
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ThemeProvider = require('./ThemeProvider.js');
+const hooks = require('./hooks.js');
+
+
+
+exports.ThemeProvider = ThemeProvider.ThemeProvider;
+exports.useTheme = hooks.useTheme;