@planningcenter/tapestry 3.8.0-rc.0 → 3.8.0

package/dist/components/modal/ModalFooter.d.ts

@@ -0,0 +1,22 @@
+import "./index.css";
+import React, { type HTMLAttributes } from "react";
+export interface ModalFooterProps {
+    /** `Button` elements in source order; optionally one marked `slot="start"` for a leading button. */
+    children: React.ReactNode;
+}
+export type ModalFooterElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof ModalFooterProps> & ModalFooterProps;
+/**
+ * The footer region of a `Modal`, intended for `Button` components.
+ *
+ * Buttons render in source order and are spaced automatically.
+ * By default, buttons are right-aligned. To pin a specific button
+ * to the far left (start edge), add the `slot="start"` attribute to it.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+export declare function ModalFooter({ children, className, ...restProps }: ModalFooterElementProps): React.JSX.Element;
+export declare namespace ModalFooter {
+    var displayName: string;
+}
+//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/modal/ModalFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,gBAAgB;IAC/B,oGAAoG;IACpG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,gBAAgB,CACvB,GACC,gBAAgB,CAAA;AAElB;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAQzB;yBAZe,WAAW"}

package/dist/components/modal/ModalFooter.js

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import React__default from 'react';
+
+/**
+ * The footer region of a `Modal`, intended for `Button` components.
+ *
+ * Buttons render in source order and are spaced automatically.
+ * By default, buttons are right-aligned. To pin a specific button
+ * to the far left (start edge), add the `slot="start"` attribute to it.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+function ModalFooter({ children, className, ...restProps }) {
+    const combinedClassName = classNames("tds-modal-footer", className);
+    return (React__default.createElement("footer", { ...restProps, className: combinedClassName }, children));
+}
+ModalFooter.displayName = "ModalFooter";
+
+export { ModalFooter };
+//# sourceMappingURL=ModalFooter.js.map

package/dist/components/modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sources":["../../../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport interface ModalFooterProps {\n  /** `Button` elements in source order; optionally one marked `slot=\"start\"` for a leading button. */\n  children: React.ReactNode\n}\n\nexport type ModalFooterElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof ModalFooterProps\n> &\n  ModalFooterProps\n\n/**\n * The footer region of a `Modal`, intended for `Button` components.\n *\n * Buttons render in source order and are spaced automatically.\n * By default, buttons are right-aligned. To pin a specific button\n * to the far left (start edge), add the `slot=\"start\"` attribute to it.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}\n */\nexport function ModalFooter({\n  children,\n  className,\n  ...restProps\n}: ModalFooterElementProps) {\n  const combinedClassName = classNames(\"tds-modal-footer\", className)\n\n  return (\n    <footer {...restProps} className={combinedClassName}>\n      {children}\n    </footer>\n  )\n}\n\nModalFooter.displayName = \"ModalFooter\"\n"],"names":["React"],"mappings":";;;AAgBA;;;;;;;;;AASG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACY,EAAA;IACxB,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;IAEnE,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAY,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA,EAChD,QAAQ,CACF;AAEb;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/modal/ModalHeader.d.ts

@@ -0,0 +1,23 @@
+import "./index.css";
+import React, { type HTMLAttributes } from "react";
+export interface ModalHeaderProps {
+    /** Secondary line under the title. */
+    subtitle?: string;
+    /** The dialog's accessible name. */
+    title: string;
+}
+export type ModalHeaderElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof ModalHeaderProps | "children"> & ModalHeaderProps;
+/**
+ * The header region of a `Modal` — renders the title, an optional subtitle,
+ * and the close button. `dismissible` on `Modal` controls whether the close
+ * button renders here, so there's a single knob rather than a second prop to
+ * keep in sync. Must be rendered inside a `Modal`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+export declare function ModalHeader({ className, subtitle, title, ...restProps }: ModalHeaderElementProps): React.JSX.Element;
+export declare namespace ModalHeader {
+    var displayName: string;
+}
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/modal/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAA;AAI9D,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,gBAAgB,GAAG,UAAU,CACpC,GACC,gBAAgB,CAAA;AAElB;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACb,EAAE,uBAAuB,qBA2BzB;yBAhCe,WAAW"}

package/dist/components/modal/ModalHeader.js

@@ -0,0 +1,32 @@
+import '../button/Button.js';
+import '../button/DropdownButton.js';
+import '../button/DropdownIconButton.js';
+import { IconButton } from '../button/IconButton.js';
+import '../button/LoadingButton.js';
+import '../button/PageHeaderActionsDropdownButton.js';
+import Icon from '../../utilities/Icon.js';
+import classNames from 'classnames';
+import React__default, { useContext } from 'react';
+import { ModalContext } from './ModalContext.js';
+
+/**
+ * The header region of a `Modal` — renders the title, an optional subtitle,
+ * and the close button. `dismissible` on `Modal` controls whether the close
+ * button renders here, so there's a single knob rather than a second prop to
+ * keep in sync. Must be rendered inside a `Modal`.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+function ModalHeader({ className, subtitle, title, ...restProps }) {
+    const { dismissible, requestClose, subtitleId, titleId } = useContext(ModalContext) ?? {};
+    const combinedClassName = classNames("tds-modal-header", className);
+    return (React__default.createElement("header", { ...restProps, className: combinedClassName },
+        React__default.createElement("h2", { className: "tds-modal-title", id: titleId }, title),
+        subtitle && (React__default.createElement("p", { className: "tds-modal-subtitle", id: subtitleId }, subtitle)),
+        dismissible && (React__default.createElement(IconButton, { "aria-label": "Close", className: "tds-modal-close", icon: React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }), kind: "ghost", onClick: requestClose, size: "sm" }))));
+}
+ModalHeader.displayName = "ModalHeader";
+
+export { ModalHeader };
+//# sourceMappingURL=ModalHeader.js.map

package/dist/components/modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/modal/ModalHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport interface ModalHeaderProps {\n  /** Secondary line under the title. */\n  subtitle?: string\n  /** The dialog's accessible name. */\n  title: string\n}\n\nexport type ModalHeaderElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof ModalHeaderProps | \"children\"\n> &\n  ModalHeaderProps\n\n/**\n * The header region of a `Modal` — renders the title, an optional subtitle,\n * and the close button. `dismissible` on `Modal` controls whether the close\n * button renders here, so there's a single knob rather than a second prop to\n * keep in sync. Must be rendered inside a `Modal`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}\n */\nexport function ModalHeader({\n  className,\n  subtitle,\n  title,\n  ...restProps\n}: ModalHeaderElementProps) {\n  const { dismissible, requestClose, subtitleId, titleId } =\n    useContext(ModalContext) ?? {}\n  const combinedClassName = classNames(\"tds-modal-header\", className)\n\n  return (\n    <header {...restProps} className={combinedClassName}>\n      <h2 className=\"tds-modal-title\" id={titleId}>\n        {title}\n      </h2>\n      {subtitle && (\n        <p className=\"tds-modal-subtitle\" id={subtitleId}>\n          {subtitle}\n        </p>\n      )}\n      {dismissible && (\n        <IconButton\n          aria-label=\"Close\"\n          className=\"tds-modal-close\"\n          icon={<Icon aria-hidden symbol=\"general#x\" />}\n          kind=\"ghost\"\n          onClick={requestClose}\n          size=\"sm\"\n        />\n      )}\n    </header>\n  )\n}\n\nModalHeader.displayName = \"ModalHeader\"\n"],"names":["React"],"mappings":";;;;;;;;;;;AAsBA;;;;;;;;AAQG;AACG,SAAU,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACY,EAAA;AACxB,IAAA,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,GACtD,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE;IAChC,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;AAEnE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAY,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA;QACjDA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,iBAAiB,EAAC,EAAE,EAAE,OAAO,EAAA,EACxC,KAAK,CACH;AACJ,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,UAAU,EAAA,EAC7C,QAAQ,CACP,CACL;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,OAAO,EAClB,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,WAAW,EAAA,CAAG,EAC7C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,EAAA,CACT,CACH,CACM;AAEb;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,10 @@
+import "./index.css";
+export type { ModalElementProps, ModalProps, ModalSize } from "./Modal";
+export { Modal } from "./Modal";
+export type { ModalBodyElementProps, ModalBodyProps } from "./ModalBody";
+export { ModalBody } from "./ModalBody";
+export type { ModalFooterElementProps, ModalFooterProps } from "./ModalFooter";
+export { ModalFooter } from "./ModalFooter";
+export type { ModalHeaderElementProps, ModalHeaderProps } from "./ModalHeader";
+export { ModalHeader } from "./ModalHeader";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/number-stepper/NumberStepper.d.ts

@@ -9,7 +9,7 @@ export interface NumberStepperProps {
     /** The default uncontrolled value. */
     defaultValue?: number;
     /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
-    description?: string;
+    description?: React.ReactNode;
     /** Disables the input and stepper buttons. */
     disabled?: boolean;
     /** If `true`, renders the label visually hidden. */

package/dist/components/number-stepper/NumberStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,gBAAgB,IAAI,oBAAoB,EAE9C,MAAM,mCAAmC,CAAA;AAE1C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,KAAK,0BAA0B,GAC3B,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,oBAAoB,CAAA;AAExB,KAAK,6BAA6B,GAC9B,eAAe,GACf,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAA;AAEX,MAAM,MAAM,yBAAyB,GAAG,+BAA+B,CACrE,oBAAoB,EACpB,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAmD3B"}
+{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,gBAAgB,IAAI,oBAAoB,EAE9C,MAAM,mCAAmC,CAAA;AAE1C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,KAAK,0BAA0B,GAC3B,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,oBAAoB,CAAA;AAExB,KAAK,6BAA6B,GAC9B,eAAe,GACf,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAA;AAEX,MAAM,MAAM,yBAAyB,GAAG,+BAA+B,CACrE,oBAAoB,EACpB,kBAAkB,EAClB,0BAA0B,EAC1B,6BAA6B,CAC9B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,yBAAyB,qBAmD3B"}

package/dist/components/number-stepper/NumberStepper.js

@@ -1,6 +1,6 @@
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import { NumberField, Label, Group, Input, Button, Text } from 'react-aria-components/NumberField';
 
 /**
@@ -19,16 +19,16 @@ function NumberStepper({ className, defaultValue, description, disabled, hideLab
         "tds-field--lg": size === "lg",
         "tds-number-stepper--lg": size === "lg",
     }, className);
-    return (React__default.createElement(NumberField, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max, minValue: min },
-        !hideLabel && React__default.createElement(Label, { className: "tds-field-label" }, label),
-        React__default.createElement(Group, { className: "tds-field-control tds-number-stepper-field" },
-            React__default.createElement(Input, { className: "tds-number-stepper-input" }),
-            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "decrement" },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#minus" })),
-            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "increment" },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#plus" }))),
-        description && (React__default.createElement(Text, { className: "tds-field-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+    return (React.createElement(NumberField, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max, minValue: min },
+        !hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
+        React.createElement(Group, { className: "tds-field-control tds-number-stepper-field" },
+            React.createElement(Input, { className: "tds-number-stepper-input" }),
+            React.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "decrement" },
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#minus" })),
+            React.createElement(Button, { className: "tds-btn tds-btn--infield tds-number-stepper-button", slot: "increment" },
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#plus" }))),
+        description && (React.createElement(Text, { className: "tds-field-description", slot: "description" },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));
 }
 

package/dist/components/number-stepper/NumberStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField as AriaNumberField,\n  type NumberFieldProps as AriaNumberFieldProps,\n  Text,\n} from \"react-aria-components/NumberField\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n  /** The default uncontrolled value. */\n  defaultValue?: number\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and stepper buttons. */\n  disabled?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum allowed value. */\n  max?: number\n  /** Minimum allowed value. */\n  min?: number\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the number stepper. */\n  size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n  | \"children\"\n  | \"render\"\n  | \"slot\"\n  | \"validate\"\n  | \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n  | \"formatOptions\"\n  | \"name\"\n  | \"onChange\"\n  | \"step\"\n  | \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n  AriaNumberFieldProps,\n  NumberStepperProps,\n  AriaNumberFieldPropsToOmit,\n  AriaNumberFieldPropsToInclude\n>\n\n/**\n * A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n *\n * Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}\n */\nexport function NumberStepper({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: NumberStepperElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-number-stepper\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-number-stepper--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  return (\n    <AriaNumberField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max}\n      minValue={min}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-number-stepper-field\">\n        <Input className=\"tds-number-stepper-input\" />\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"decrement\"\n        >\n          <Icon aria-hidden symbol=\"general#minus\" />\n        </Button>\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"increment\"\n        >\n          <Icon aria-hidden symbol=\"general#plus\" />\n        </Button>\n      </Group>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaNumberField>\n  )\n}\n"],"names":["React","AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACEA,6BAACC,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACTA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxDA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}
+{"version":3,"file":"NumberStepper.js","sources":["../../../src/components/number-stepper/NumberStepper.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField as AriaNumberField,\n  type NumberFieldProps as AriaNumberFieldProps,\n  Text,\n} from \"react-aria-components/NumberField\"\n\nexport type NumberStepperSize = \"md\" | \"lg\"\n\nexport interface NumberStepperProps {\n  /** The default uncontrolled value. */\n  defaultValue?: number\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: React.ReactNode\n  /** Disables the input and stepper buttons. */\n  disabled?: boolean\n  /** If `true`, renders the label visually hidden. */\n  hideLabel?: boolean\n  /** If `true`, applies error styling to the field and description. */\n  invalid?: boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum allowed value. */\n  max?: number\n  /** Minimum allowed value. */\n  min?: number\n  /** Allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk after the label text. */\n  required?: boolean\n  /** The size of the number stepper. */\n  size?: NumberStepperSize\n}\n\ntype AriaNumberFieldPropsToOmit =\n  | \"children\"\n  | \"render\"\n  | \"slot\"\n  | \"validate\"\n  | \"validationBehavior\"\n\ntype AriaNumberFieldPropsToInclude =\n  | \"formatOptions\"\n  | \"name\"\n  | \"onChange\"\n  | \"step\"\n  | \"value\"\n\nexport type NumberStepperElementProps = CombineAriaPropsWithCustomProps<\n  AriaNumberFieldProps,\n  NumberStepperProps,\n  AriaNumberFieldPropsToOmit,\n  AriaNumberFieldPropsToInclude\n>\n\n/**\n * A number stepper component that pairs a numeric input with increment and\n * decrement buttons. Use it when users need to enter or adjust a number by\n * small amounts, such as quantities or counts.\n *\n * Constrain the input with `min`, `max`, and `step`, and customize display\n * (currency, percentage, decimal precision) via the `formatOptions` prop.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-numberstepper--docs | Storybook Documentation}\n */\nexport function NumberStepper({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: NumberStepperElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-number-stepper\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-number-stepper--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  return (\n    <AriaNumberField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={defaultValue}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={max}\n      minValue={min}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-number-stepper-field\">\n        <Input className=\"tds-number-stepper-input\" />\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"decrement\"\n        >\n          <Icon aria-hidden symbol=\"general#minus\" />\n        </Button>\n        <Button\n          className=\"tds-btn tds-btn--infield tds-number-stepper-button\"\n          slot=\"increment\"\n        >\n          <Icon aria-hidden symbol=\"general#plus\" />\n        </Button>\n      </Group>\n      {description && (\n        <Text className=\"tds-field-description\" slot=\"description\">\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaNumberField>\n  )\n}\n"],"names":["AriaNumberField"],"mappings":";;;;;AAkEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACc,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,8BAA8B,EAC9B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,wBAAwB,EAAE,IAAI,KAAK,IAAI;KACxC,EACD,SAAS,CACV;IAED,QACE,oBAACA,WAAe,EAAA,EAAA,GACV,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,GAAG,EAAA;QAEZ,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,CAAG;YAC9C,KAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,eAAe,GAAG,CACpC;YACT,KAAA,CAAA,aAAA,CAAC,MAAM,IACL,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAC,WAAW,EAAA;AAEhB,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,cAAc,EAAA,CAAG,CACnC,CACH;QACP,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,EAAA;YACxD,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACe;AAEtB;;;;"}

package/dist/components/radio/Radio.d.ts

@@ -2,8 +2,8 @@ import "./index.css";
 import React, { InputHTMLAttributes } from "react";
 export type RadioSize = "md" | "sm";
 interface RadioBaseProps {
-    /** Optional description text that appears below the radio label. */
-    description?: string;
+    /** Optional description that appears below the radio label. */
+    description?: React.ReactNode;
     /** The name of the radio group. All radios in the group must have the same name. */
     name: string;
     /** The size of the radio. */

package/dist/components/radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n  /** Optional description text that appears below the radio label. */\n  description?: string\n  /** The name of the radio group. All radios in the group must have the same name. */\n  name: string\n  /** The size of the radio. */\n  size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n  \"aria-labelledby\"?: never\n  /**\n   * Label content for the radio. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n  \"aria-labelledby\": string\n  label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof RadioProps | \"type\"\n> &\n  RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n  (\n    {\n      className,\n      description,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: RadioElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-radio\",\n      size && size === \"sm\" && `tds-radio--sm`,\n      className\n    )\n\n    const stableId = useId()\n    const radioId = id || `tds-radio-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <input\n          {...restProps}\n          aria-describedby={description ? `${radioId}-description` : undefined}\n          id={radioId}\n          ref={ref}\n          type=\"radio\"\n        />\n        {label && <label htmlFor={radioId}>{label}</label>}\n        {description && (\n          <p id={`${radioId}-description`} className=\"tds-radio-description\">\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n  /** Optional description that appears below the radio label. */\n  description?: React.ReactNode\n  /** The name of the radio group. All radios in the group must have the same name. */\n  name: string\n  /** The size of the radio. */\n  size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n  \"aria-labelledby\"?: never\n  /**\n   * Label content for the radio. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n  \"aria-labelledby\": string\n  label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof RadioProps | \"type\"\n> &\n  RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n  (\n    {\n      className,\n      description,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: RadioElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-radio\",\n      size && size === \"sm\" && `tds-radio--sm`,\n      className\n    )\n\n    const stableId = useId()\n    const radioId = id || `tds-radio-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <input\n          {...restProps}\n          aria-describedby={description ? `${radioId}-description` : undefined}\n          id={radioId}\n          ref={ref}\n          type=\"radio\"\n        />\n        {label && <label htmlFor={radioId}>{label}</label>}\n        {description && (\n          <p id={`${radioId}-description`} className=\"tds-radio-description\">\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["React"],"mappings":";;;;AAyCA;;;;;;;;;;;;;;;;AAgBG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/radio-group/RadioGroup.d.ts

@@ -2,8 +2,8 @@ import "./index.css";
 import React, { FieldsetHTMLAttributes } from "react";
 export type RadioGroupSize = "md" | "sm";
 export interface RadioGroupProps {
-    /** Optional description text that appears below the label. */
-    description?: string;
+    /** Optional description that appears below the label. */
+    description?: React.ReactNode;
     /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to "Please select an option". */
     invalid?: boolean;
     /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */

package/dist/components/radio-group/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uJAAuJ;IACvJ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,eAAe,CACtB,GACC,eAAe,CAAA;AAEjB;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;+EAQpB,sBAAsB;;CAiCxB,CAAA"}

package/dist/components/radio-group/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" | \"sm\"\n\nexport interface RadioGroupProps {\n  /** Optional description text that appears below the label. */\n  description?: string\n  /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". */\n  invalid?: boolean\n  /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */\n  label: string\n  /** The size. Does not affect child radios. */\n  size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n  FieldsetHTMLAttributes<HTMLFieldSetElement>,\n  keyof RadioGroupProps\n> &\n  RadioGroupProps\n\n/**\n * A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio-group--docs | Storybook Documentation}\n */\nexport const RadioGroup = ({\n  children,\n  className,\n  description,\n  invalid,\n  label,\n  size = \"md\",\n  ...restProps\n}: RadioGroupElementProps) => {\n  const combinedClassName = classNames(\n    \"tds-radio-group\",\n    size && size === \"sm\" && \"tds-radio-group--sm\",\n    className\n  )\n  const stableId = useId()\n\n  const displayDescription =\n    description || (invalid ? \"Please select an option\" : undefined)\n  const descriptionId = `tds-radio-group-${stableId}-description`\n\n  return (\n    <fieldset\n      {...restProps}\n      aria-describedby={displayDescription ? descriptionId : undefined}\n      aria-invalid={invalid ? \"true\" : undefined}\n      className={combinedClassName}\n    >\n      <legend>{label}</legend>\n      {displayDescription && (\n        <p id={descriptionId} className=\"tds-radio-group-description\">\n          <Icon\n            className=\"tds-radio-group-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n            aria-hidden\n          />\n          {displayDescription}\n        </p>\n      )}\n      <div className=\"tds-radio-group-fields\">{children}</div>\n    </fieldset>\n  )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;;;AAQG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { FieldsetHTMLAttributes } from \"react\"\n\nexport type RadioGroupSize = \"md\" | \"sm\"\n\nexport interface RadioGroupProps {\n  /** Optional description that appears below the label. */\n  description?: React.ReactNode\n  /** Is invalid. If true, include a description to explain why; and if no description is provided, description defaults to \"Please select an option\". */\n  invalid?: boolean\n  /** The label text (required). Renders as `<legend>` (not `<label>`) because `RadioGroup` is a `<fieldset>`. */\n  label: string\n  /** The size. Does not affect child radios. */\n  size?: RadioGroupSize\n}\n\nexport type RadioGroupElementProps = Omit<\n  FieldsetHTMLAttributes<HTMLFieldSetElement>,\n  keyof RadioGroupProps\n> &\n  RadioGroupProps\n\n/**\n * A radio group component that renders as a fieldset with legend.\n * Use to group two or more Radio components.\n * Supports label and description text, sizes, invalid, and disabled state.\n * Label is required and must be a string. Renders as <legend>.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-radio-group--docs | Storybook Documentation}\n */\nexport const RadioGroup = ({\n  children,\n  className,\n  description,\n  invalid,\n  label,\n  size = \"md\",\n  ...restProps\n}: RadioGroupElementProps) => {\n  const combinedClassName = classNames(\n    \"tds-radio-group\",\n    size && size === \"sm\" && \"tds-radio-group--sm\",\n    className\n  )\n  const stableId = useId()\n\n  const displayDescription =\n    description || (invalid ? \"Please select an option\" : undefined)\n  const descriptionId = `tds-radio-group-${stableId}-description`\n\n  return (\n    <fieldset\n      {...restProps}\n      aria-describedby={displayDescription ? descriptionId : undefined}\n      aria-invalid={invalid ? \"true\" : undefined}\n      className={combinedClassName}\n    >\n      <legend>{label}</legend>\n      {displayDescription && (\n        <p id={descriptionId} className=\"tds-radio-group-description\">\n          <Icon\n            className=\"tds-radio-group-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n            aria-hidden\n          />\n          {displayDescription}\n        </p>\n      )}\n      <div className=\"tds-radio-group-fields\">{children}</div>\n    </fieldset>\n  )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["React"],"mappings":";;;;;AA0BA;;;;;;;;AAQG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACW,KAAI;AAC3B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,iBAAiB,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,qBAAqB,EAC9C,SAAS,CACV;AACD,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AAExB,IAAA,MAAM,kBAAkB,GACtB,WAAW,KAAK,OAAO,GAAG,yBAAyB,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,QAAQ,cAAc;IAE/D,QACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,kBAAkB,GAAG,aAAa,GAAG,SAAS,kBAClD,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,iBAAiB,EAAA;AAE5B,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU;QACvB,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,6BAA6B,EAAA;YAC3DA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,0CAA0C,EACpD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,kBAAkB,CACjB,CACL;QACDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,EAAE,QAAQ,CAAO,CAC/C;AAEf;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/select/Select.d.ts

@@ -85,7 +85,7 @@ interface SelectBaseProps {
      * `invalid`. Defaults to `"Please select an option"` when `invalid` is true
      * and no description is provided.
      */
-    description?: string;
+    description?: React.ReactNode;
     /**
      * Whether the select is in an invalid state. Shows the default description
      * if none is provided.

package/dist/components/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,OAAO,KAAK,EAAE,EAAc,KAAK,oBAAoB,EAAU,MAAM,OAAO,CAAA;AAS5E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpC;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,0EAA0E;IAC1E,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;;;GAMG;AACH,MAAM,WAAW,yBAAyB;IACxC,0EAA0E;IAC1E,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,kDAAkD;IAClD,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,YAAY,GACpB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,CAAA;AAE7B;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAM1D,UAAU,eAAe;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0DAA0D;IAC1D,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,UAAU,sBAAuB,SAAQ,eAAe;IACtD,mEAAmE;IACnE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,qBAAsB,SAAQ,eAAe;IACrD,mEAAmE;IACnE,SAAS,EAAE,IAAI,CAAA;IACf,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,mBAAoB,SAAQ,eAAe;IACnD,yEAAyE;IACzE,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,wBAAyB,SAAQ,eAAe;IACxD;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,WAAW,GACnB,mBAAmB,GACnB,wBAAwB,GACxB,qBAAqB,GACrB,sBAAsB,CAAA;AAE1B,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CACxC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,WAAW,GAAG;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAEH,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAC5D,WAAW,GAAG;IACZ,OAAO,EAAE,IAAI,CAAA;CACd,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAC1B,wBAAwB,GACxB,yBAAyB,CAAA;AAkB7B;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,8FAgHlB,CAAA"}

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
 import Icon from '../../utilities/Icon.js';
 import { useId } from '../../utilities/useId.js';
 import classNames from 'classnames';
-import React__default, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { SelectNative } from './SelectNative.js';
 import { SelectPopover } from './SelectPopover.js';
 
@@ -66,14 +66,14 @@ const Select = forwardRef(function Select(props, ref) {
     };
     const handleComplexLabelClick = () => triggerRef.current?.focus();
     const SelectComponent = complex ? SelectPopover : SelectNative;
-    return (React__default.createElement("div", { className: computedClassName },
+    return (React.createElement("div", { className: computedClassName },
         showLabel &&
             (complex ? (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly
-            React__default.createElement("div", { className: "tds-select-label", id: labelId, onClick: handleComplexLabelClick }, label)) : (React__default.createElement("label", { htmlFor: controlId, id: labelId }, label))),
-        React__default.createElement(SelectComponent, { ...sharedControlProps, ref: ref, id: controlId, onChange: onChange, ...(complex && { triggerRef }) }),
-        resolvedDescription && descriptionId && (React__default.createElement("p", { className: "tds-select-description", id: descriptionId },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-select-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            React.createElement("div", { className: "tds-select-label", id: labelId, onClick: handleComplexLabelClick }, label)) : (React.createElement("label", { htmlFor: controlId, id: labelId }, label))),
+        React.createElement(SelectComponent, { ...sharedControlProps, ref: ref, id: controlId, onChange: onChange, ...(complex && { triggerRef }) }),
+        resolvedDescription && descriptionId && (React.createElement("p", { className: "tds-select-description", id: descriptionId },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-select-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             resolvedDescription))));
 });
 Select.displayName = "Select";

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\n/**\n * String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n */\nexport interface SelectOptionWithTextLabel {\n  /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n  [key: `data-${string}`]: boolean | number | string | undefined\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /** Displayed as the option content and used for type-ahead matching. */\n  label: string\n  textValue?: never\n  /** Unique identifier for the option. */\n  value: string\n}\n\n/**\n * Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n */\nexport interface SelectOptionWithNodeLabel {\n  /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n  [key: `data-${string}`]: boolean | number | string | undefined\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /**\n   * Option content. Rendered as JSX in complex mode; in native mode, the\n   * visible text comes from `textValue` instead.\n   */\n  label: React.ReactNode\n  /**\n   * Plain-text fallback for type-ahead matching, screen reader\n   * announcements, and the native `<select>`'s visible option text when\n   * `label` is a React node.\n   */\n  textValue: string\n  /** Unique identifier for the option. */\n  value: string\n}\n\n/**\n * Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n */\nexport interface SelectOptionDivider {\n  disabled?: never\n  /** Renders a visual separator between options. */\n  divider: true\n  label?: never\n  textValue?: never\n  value?: never\n}\n\nexport type SelectOption =\n  | SelectOptionDivider\n  | SelectOptionWithNodeLabel\n  | SelectOptionWithTextLabel\n\n/**\n * A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n */\nexport interface SelectOptionsGroup {\n  /**\n   * Whether all options in this group are non-interactive. Disables every\n   * nested option regardless of its own `disabled` flag.\n   */\n  disabled?: boolean\n  /** Visible heading displayed above the group's options. */\n  label: string\n  /** The selectable options nested under this group. */\n  options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n  /**\n   * When true, renders as a popover listbox instead of a native `<select>`.\n   * Enables rich content in options (icons, descriptions).\n   */\n  complex?: boolean\n  /**\n   * Helper text displayed below the select. Styled as error text when\n   * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n   * and no description is provided.\n   */\n  description?: string\n  /**\n   * Whether the select is in an invalid state. Shows the default description\n   * if none is provided.\n   */\n  invalid?: boolean\n  /** A flat or mixed array of options and option groups. */\n  options: SelectItem[]\n  /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n  placeholder?: string\n  /** The size of the select. */\n  size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /**\n   * The label text for the select. Required unless `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the select. Must be a string when hidden. */\n  label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n  /** Accessible label for the select. Use when no visible label exists. */\n  \"aria-label\": string\n  hideLabel?: never\n  label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n  /**\n   * ID of an external label element. Use instead of `label` when a visible\n   * label exists elsewhere on the page.\n   */\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type SelectProps =\n  | SelectWithAriaLabel\n  | SelectWithAriaLabelledBy\n  | SelectWithHiddenLabel\n  | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex?: false\n  }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex: true\n  }\n\nexport type SelectElementProps =\n  | NativeSelectElementProps\n  | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n  value:\n    | NativeSelectElementProps[\"defaultValue\"]\n    | NativeSelectElementProps[\"value\"]\n    | ComplexSelectElementProps[\"defaultValue\"]\n    | ComplexSelectElementProps[\"value\"]\n) {\n  if (value === undefined || value === null) return undefined\n  if (Array.isArray(value)) return value[0]\n  return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\n/**\n * A select component for choosing a single value from a list of options.\n * By default renders a native `<select>`; set `complex` to render a popover\n * listbox that supports rich option content (icons, descriptions). Supports\n * option groups, dividers, invalid state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-select--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n  function Select(props: SelectElementProps, ref) {\n    const {\n      \"aria-label\": userAriaLabel,\n      \"aria-labelledby\": userAriaLabelledBy,\n      className,\n      complex,\n      defaultValue,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onChange,\n      options,\n      placeholder,\n      required,\n      size,\n      value,\n      ...restProps\n    } = props\n\n    const triggerRef = useRef<HTMLButtonElement>(null)\n    const stableId = useId()\n    const controlId = id || `tds-select-${stableId}`\n    const labelId = `${controlId}-label`\n    const resolvedDescription =\n      description || (invalid ? \"Please select an option\" : undefined)\n    const descriptionId = resolvedDescription\n      ? `${controlId}-description`\n      : undefined\n    const computedClassName = classNames(\n      \"tds-select\",\n      {\n        \"tds-select--invalid\": invalid,\n        \"tds-select--lg\": size === \"lg\",\n        \"tds-select--required\": required,\n      },\n      className\n    )\n\n    const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n    const normalizedValue = normalizeSelectValue(value)\n\n    const computedDefaultValue =\n      normalizedDefaultValue === undefined && normalizedValue === undefined\n        ? \"\"\n        : normalizedDefaultValue\n    const effectivePlaceholder =\n      normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n        ? null\n        : placeholder || \"Select an option\"\n    const showLabel = !!label && !hideLabel\n    const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n    const computedAriaLabelledBy =\n      userAriaLabelledBy ??\n      (computedAriaLabel || !showLabel ? undefined : labelId)\n\n    const sharedControlProps = {\n      ...restProps,\n      \"aria-describedby\": descriptionId,\n      \"aria-label\": computedAriaLabel,\n      \"aria-labelledby\": computedAriaLabelledBy,\n      defaultValue: computedDefaultValue,\n      invalid,\n      options,\n      placeholder: effectivePlaceholder,\n      required,\n      value: normalizedValue,\n    }\n\n    const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n    const SelectComponent = complex ? SelectPopover : SelectNative\n\n    return (\n      <div className={computedClassName}>\n        {showLabel &&\n          (complex ? (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n            <div\n              className=\"tds-select-label\"\n              id={labelId}\n              onClick={handleComplexLabelClick}\n            >\n              {label}\n            </div>\n          ) : (\n            <label htmlFor={controlId} id={labelId}>\n              {label}\n            </label>\n          ))}\n        <SelectComponent\n          {...sharedControlProps}\n          ref={ref}\n          id={controlId}\n          onChange={onChange}\n          {...(complex && { triggerRef })}\n        />\n        {resolvedDescription && descriptionId && (\n          <p className=\"tds-select-description\" id={descriptionId}>\n            <Icon\n              aria-hidden\n              className=\"tds-select-description-invalid-icon\"\n              symbol=\"general#exclamation-triangle\"\n            />\n            {resolvedDescription}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type SelectHTMLAttributes, useRef } from \"react\"\n\nimport { SelectNative } from \"./SelectNative\"\nimport { SelectPopover } from \"./SelectPopover\"\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type SelectSize = \"lg\" | \"md\"\n\n/**\n * String-labelled option variant. Valid in both native (`complex={false}`)\n * and complex (`complex={true}`) modes. The `label` doubles as the type-ahead\n * search target.\n */\nexport interface SelectOptionWithTextLabel {\n  /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n  [key: `data-${string}`]: boolean | number | string | undefined\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /** Displayed as the option content and used for type-ahead matching. */\n  label: string\n  textValue?: never\n  /** Unique identifier for the option. */\n  value: string\n}\n\n/**\n * Rich-content option variant. The popover (`complex={true}`) renders the\n * `label` node directly; the native `<select>` (`complex={false}`) falls back\n * to `textValue` for the visible text. Requires a plain-text `textValue` so\n * type-ahead matching, screen reader announcements, and the native fallback\n * all have something stable to use.\n */\nexport interface SelectOptionWithNodeLabel {\n  /** Arbitrary `data-*` attributes are forwarded to the rendered option. */\n  [key: `data-${string}`]: boolean | number | string | undefined\n  /** Whether this option is non-interactive. */\n  disabled?: boolean\n  divider?: never\n  /**\n   * Option content. Rendered as JSX in complex mode; in native mode, the\n   * visible text comes from `textValue` instead.\n   */\n  label: React.ReactNode\n  /**\n   * Plain-text fallback for type-ahead matching, screen reader\n   * announcements, and the native `<select>`'s visible option text when\n   * `label` is a React node.\n   */\n  textValue: string\n  /** Unique identifier for the option. */\n  value: string\n}\n\n/**\n * Visual-separator option variant. Renders a divider line between options\n * (or between groups of options). Carries no value of its own.\n */\nexport interface SelectOptionDivider {\n  disabled?: never\n  /** Renders a visual separator between options. */\n  divider: true\n  label?: never\n  textValue?: never\n  value?: never\n}\n\nexport type SelectOption =\n  | SelectOptionDivider\n  | SelectOptionWithNodeLabel\n  | SelectOptionWithTextLabel\n\n/**\n * A group entry in `Select`'s `options` array. Renders a heading above its\n * `options` and nests them visually beneath it.\n */\nexport interface SelectOptionsGroup {\n  /**\n   * Whether all options in this group are non-interactive. Disables every\n   * nested option regardless of its own `disabled` flag.\n   */\n  disabled?: boolean\n  /** Visible heading displayed above the group's options. */\n  label: string\n  /** The selectable options nested under this group. */\n  options: SelectOption[]\n}\n\nexport type SelectItem = SelectOption | SelectOptionsGroup\n\n// ---------------------------------------------------------------------------\n// Select component props\n// ---------------------------------------------------------------------------\n\ninterface SelectBaseProps {\n  /**\n   * When true, renders as a popover listbox instead of a native `<select>`.\n   * Enables rich content in options (icons, descriptions).\n   */\n  complex?: boolean\n  /**\n   * Helper text displayed below the select. Styled as error text when\n   * `invalid`. Defaults to `\"Please select an option\"` when `invalid` is true\n   * and no description is provided.\n   */\n  description?: React.ReactNode\n  /**\n   * Whether the select is in an invalid state. Shows the default description\n   * if none is provided.\n   */\n  invalid?: boolean\n  /** A flat or mixed array of options and option groups. */\n  options: SelectItem[]\n  /** Placeholder text shown when no option is selected. Defaults to `\"Select an option\"`. */\n  placeholder?: string\n  /** The size of the select. */\n  size?: SelectSize\n}\n\ninterface SelectWithVisibleLabel extends SelectBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /**\n   * The label text for the select. Required unless `aria-label` or\n   * `aria-labelledby` is provided.\n   */\n  label: string\n}\n\ninterface SelectWithHiddenLabel extends SelectBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the select. Must be a string when hidden. */\n  label: string\n}\n\ninterface SelectWithAriaLabel extends SelectBaseProps {\n  /** Accessible label for the select. Use when no visible label exists. */\n  \"aria-label\": string\n  hideLabel?: never\n  label?: never\n}\n\ninterface SelectWithAriaLabelledBy extends SelectBaseProps {\n  /**\n   * ID of an external label element. Use instead of `label` when a visible\n   * label exists elsewhere on the page.\n   */\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type SelectProps =\n  | SelectWithAriaLabel\n  | SelectWithAriaLabelledBy\n  | SelectWithHiddenLabel\n  | SelectWithVisibleLabel\n\ntype BaseSelectElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectProps | \"multiple\" | \"size\"\n>\n\nexport type NativeSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex?: false\n  }\n\nexport type ComplexSelectElementProps = BaseSelectElementProps &\n  SelectProps & {\n    complex: true\n  }\n\nexport type SelectElementProps =\n  | NativeSelectElementProps\n  | ComplexSelectElementProps\n\nfunction normalizeSelectValue(\n  value:\n    | NativeSelectElementProps[\"defaultValue\"]\n    | NativeSelectElementProps[\"value\"]\n    | ComplexSelectElementProps[\"defaultValue\"]\n    | ComplexSelectElementProps[\"value\"]\n) {\n  if (value === undefined || value === null) return undefined\n  if (Array.isArray(value)) return value[0]\n  return String(value)\n}\n\n// ---------------------------------------------------------------------------\n// Select (public)\n// ---------------------------------------------------------------------------\n\n/**\n * A select component for choosing a single value from a list of options.\n * By default renders a native `<select>`; set `complex` to render a popover\n * listbox that supports rich option content (icons, descriptions). Supports\n * option groups, dividers, invalid state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-select--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectElementProps>(\n  function Select(props: SelectElementProps, ref) {\n    const {\n      \"aria-label\": userAriaLabel,\n      \"aria-labelledby\": userAriaLabelledBy,\n      className,\n      complex,\n      defaultValue,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onChange,\n      options,\n      placeholder,\n      required,\n      size,\n      value,\n      ...restProps\n    } = props\n\n    const triggerRef = useRef<HTMLButtonElement>(null)\n    const stableId = useId()\n    const controlId = id || `tds-select-${stableId}`\n    const labelId = `${controlId}-label`\n    const resolvedDescription =\n      description || (invalid ? \"Please select an option\" : undefined)\n    const descriptionId = resolvedDescription\n      ? `${controlId}-description`\n      : undefined\n    const computedClassName = classNames(\n      \"tds-select\",\n      {\n        \"tds-select--invalid\": invalid,\n        \"tds-select--lg\": size === \"lg\",\n        \"tds-select--required\": required,\n      },\n      className\n    )\n\n    const normalizedDefaultValue = normalizeSelectValue(defaultValue)\n    const normalizedValue = normalizeSelectValue(value)\n\n    const computedDefaultValue =\n      normalizedDefaultValue === undefined && normalizedValue === undefined\n        ? \"\"\n        : normalizedDefaultValue\n    const effectivePlaceholder =\n      normalizedDefaultValue !== undefined && normalizedDefaultValue !== \"\"\n        ? null\n        : placeholder || \"Select an option\"\n    const showLabel = !!label && !hideLabel\n    const computedAriaLabel = userAriaLabel ?? (hideLabel ? label : undefined)\n    const computedAriaLabelledBy =\n      userAriaLabelledBy ??\n      (computedAriaLabel || !showLabel ? undefined : labelId)\n\n    const sharedControlProps = {\n      ...restProps,\n      \"aria-describedby\": descriptionId,\n      \"aria-label\": computedAriaLabel,\n      \"aria-labelledby\": computedAriaLabelledBy,\n      defaultValue: computedDefaultValue,\n      invalid,\n      options,\n      placeholder: effectivePlaceholder,\n      required,\n      value: normalizedValue,\n    }\n\n    const handleComplexLabelClick = () => triggerRef.current?.focus()\n\n    const SelectComponent = complex ? SelectPopover : SelectNative\n\n    return (\n      <div className={computedClassName}>\n        {showLabel &&\n          (complex ? (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- mirrors native label click-to-focus; keyboard users interact with the combobox directly\n            <div\n              className=\"tds-select-label\"\n              id={labelId}\n              onClick={handleComplexLabelClick}\n            >\n              {label}\n            </div>\n          ) : (\n            <label htmlFor={controlId} id={labelId}>\n              {label}\n            </label>\n          ))}\n        <SelectComponent\n          {...sharedControlProps}\n          ref={ref}\n          id={controlId}\n          onChange={onChange}\n          {...(complex && { triggerRef })}\n        />\n        {resolvedDescription && descriptionId && (\n          <p className=\"tds-select-description\" id={descriptionId}>\n            <Icon\n              aria-hidden\n              className=\"tds-select-description-invalid-icon\"\n              symbol=\"general#exclamation-triangle\"\n            />\n            {resolvedDescription}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n"],"names":[],"mappings":"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"}

package/dist/components/select/SelectNative.js

@@ -1,4 +1,4 @@
-import React__default, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useState, useEffect } from 'react';
 import { SelectOptions } from './SelectOptions.js';
 
 // ---------------------------------------------------------------------------
@@ -32,11 +32,11 @@ const SelectNative = forwardRef(function SelectNative({ invalid, options, placeh
             setIsCustom(true);
         }
     }, []);
-    return (React__default.createElement("select", { ...restProps, "aria-invalid": invalid ? "true" : undefined, ref: ref },
-        isCustom && (React__default.createElement("button", null,
-            React__default.createElement("selectedcontent", null))),
-        placeholder && (React__default.createElement("option", { key: `__placeholder__${placeholder}`, disabled: true, hidden: true, value: "" }, placeholder)),
-        React__default.createElement(SelectOptions, { items: options, supportsBaseSelect: isCustom })));
+    return (React.createElement("select", { ...restProps, "aria-invalid": invalid ? "true" : undefined, ref: ref },
+        isCustom && (React.createElement("button", null,
+            React.createElement("selectedcontent", null))),
+        placeholder && (React.createElement("option", { key: `__placeholder__${placeholder}`, disabled: true, hidden: true, value: "" }, placeholder)),
+        React.createElement(SelectOptions, { items: options, supportsBaseSelect: isCustom })));
 });
 SelectNative.displayName = "SelectNative";
 

package/dist/components/select/SelectNative.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectNative.js","sources":["../../../src/components/select/SelectNative.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  type SelectHTMLAttributes,\n  useEffect,\n  useState,\n} from \"react\"\n\nimport type { SelectItem } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\n// ---------------------------------------------------------------------------\n// base-select feature detection (cached)\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelect: boolean | null = null\n\nfunction supportsBaseSelect(): boolean {\n  if (_supportsBaseSelect === null) {\n    _supportsBaseSelect =\n      typeof CSS !== \"undefined\" &&\n      typeof CSS.supports === \"function\" &&\n      CSS.supports(\"appearance\", \"base-select\")\n  }\n  return _supportsBaseSelect\n}\n\n// ---------------------------------------------------------------------------\n// JSX augmentation for <selectedcontent>\n// ---------------------------------------------------------------------------\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      selectedcontent: React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      >\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------\n// SelectNative\n// ---------------------------------------------------------------------------\n\nexport interface SelectNativeProps {\n  /** Triggers invalid state (maps to aria-invalid). */\n  invalid?: boolean\n  /** Options to render inside the select. */\n  options: SelectItem[]\n  /** Placeholder text rendered as a disabled hidden option. `null` suppresses the option. */\n  placeholder: string | null\n}\n\nexport type SelectNativeElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectNativeProps | \"multiple\"\n> &\n  SelectNativeProps\n\n/**\n * Internal component. Not intended for direct use — consume `Select` instead.\n *\n * The native `<select>` implementation used by `Select` when `complex` is\n * not set. Renders a real `<select>` element so the browser handles\n * keyboard, type-ahead, and mobile UI natively. When the browser supports\n * `appearance: base-select`, it upgrades to a customizable trigger.\n *\n * @internal\n */\nexport const SelectNative = forwardRef<\n  HTMLSelectElement,\n  SelectNativeElementProps\n>(function SelectNative(\n  { invalid, options, placeholder, ...restProps }: SelectNativeElementProps,\n  ref\n) {\n  // Keep first render deterministic for SSR/hydration, then detect support on mount.\n  const [isCustom, setIsCustom] = useState(false)\n\n  useEffect(() => {\n    if (supportsBaseSelect()) {\n      setIsCustom(true)\n    }\n  }, [])\n\n  return (\n    <select\n      {...restProps}\n      aria-invalid={invalid ? \"true\" : undefined}\n      ref={ref}\n    >\n      {isCustom && (\n        <button>\n          <selectedcontent />\n        </button>\n      )}\n      {placeholder && (\n        <option key={`__placeholder__${placeholder}`} disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      <SelectOptions items={options} supportsBaseSelect={isCustom} />\n    </select>\n  )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":["React"],"mappings":";;;AAUA;AACA;AACA;AAEA,IAAI,mBAAmB,GAAmB,IAAI;AAE9C,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAChC,mBAAmB;YACjB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AACA,IAAA,OAAO,mBAAmB;AAC5B;AAqCA;;;;;;;;;AASG;MACU,YAAY,GAAG,UAAU,CAGpC,SAAS,YAAY,CACrB,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAA4B,EACzE,GAAG,EAAA;;IAGH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,kBAAkB,EAAE,EAAE;YACxB,WAAW,CAAC,IAAI,CAAC;QACnB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAE,EAAE,QAAQ,EAAA,IAAA,EAAC,MAAM,QAAC,KAAK,EAAC,EAAE,EAAA,EACnE,WAAW,CACL,CACV;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"SelectNative.js","sources":["../../../src/components/select/SelectNative.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  type SelectHTMLAttributes,\n  useEffect,\n  useState,\n} from \"react\"\n\nimport type { SelectItem } from \"./Select\"\nimport { SelectOptions } from \"./SelectOptions\"\n\n// ---------------------------------------------------------------------------\n// base-select feature detection (cached)\n// ---------------------------------------------------------------------------\n\nlet _supportsBaseSelect: boolean | null = null\n\nfunction supportsBaseSelect(): boolean {\n  if (_supportsBaseSelect === null) {\n    _supportsBaseSelect =\n      typeof CSS !== \"undefined\" &&\n      typeof CSS.supports === \"function\" &&\n      CSS.supports(\"appearance\", \"base-select\")\n  }\n  return _supportsBaseSelect\n}\n\n// ---------------------------------------------------------------------------\n// JSX augmentation for <selectedcontent>\n// ---------------------------------------------------------------------------\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      selectedcontent: React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement>,\n        HTMLElement\n      >\n    }\n  }\n}\n\n// ---------------------------------------------------------------------------\n// SelectNative\n// ---------------------------------------------------------------------------\n\nexport interface SelectNativeProps {\n  /** Triggers invalid state (maps to aria-invalid). */\n  invalid?: boolean\n  /** Options to render inside the select. */\n  options: SelectItem[]\n  /** Placeholder text rendered as a disabled hidden option. `null` suppresses the option. */\n  placeholder: string | null\n}\n\nexport type SelectNativeElementProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  keyof SelectNativeProps | \"multiple\"\n> &\n  SelectNativeProps\n\n/**\n * Internal component. Not intended for direct use — consume `Select` instead.\n *\n * The native `<select>` implementation used by `Select` when `complex` is\n * not set. Renders a real `<select>` element so the browser handles\n * keyboard, type-ahead, and mobile UI natively. When the browser supports\n * `appearance: base-select`, it upgrades to a customizable trigger.\n *\n * @internal\n */\nexport const SelectNative = forwardRef<\n  HTMLSelectElement,\n  SelectNativeElementProps\n>(function SelectNative(\n  { invalid, options, placeholder, ...restProps }: SelectNativeElementProps,\n  ref\n) {\n  // Keep first render deterministic for SSR/hydration, then detect support on mount.\n  const [isCustom, setIsCustom] = useState(false)\n\n  useEffect(() => {\n    if (supportsBaseSelect()) {\n      setIsCustom(true)\n    }\n  }, [])\n\n  return (\n    <select\n      {...restProps}\n      aria-invalid={invalid ? \"true\" : undefined}\n      ref={ref}\n    >\n      {isCustom && (\n        <button>\n          <selectedcontent />\n        </button>\n      )}\n      {placeholder && (\n        <option key={`__placeholder__${placeholder}`} disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      <SelectOptions items={options} supportsBaseSelect={isCustom} />\n    </select>\n  )\n})\n\nSelectNative.displayName = \"SelectNative\"\n"],"names":[],"mappings":";;;AAUA;AACA;AACA;AAEA,IAAI,mBAAmB,GAAmB,IAAI;AAE9C,SAAS,kBAAkB,GAAA;AACzB,IAAA,IAAI,mBAAmB,KAAK,IAAI,EAAE;QAChC,mBAAmB;YACjB,OAAO,GAAG,KAAK,WAAW;AAC1B,gBAAA,OAAO,GAAG,CAAC,QAAQ,KAAK,UAAU;AAClC,gBAAA,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,aAAa,CAAC;IAC7C;AACA,IAAA,OAAO,mBAAmB;AAC5B;AAqCA;;;;;;;;;AASG;MACU,YAAY,GAAG,UAAU,CAGpC,SAAS,YAAY,CACrB,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAA4B,EACzE,GAAG,EAAA;;IAGH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,kBAAkB,EAAE,EAAE;YACxB,WAAW,CAAC,IAAI,CAAC;QACnB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,SAAS,EAAA,cAAA,EACC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,GAAG,EAAE,GAAG,EAAA;AAEP,QAAA,QAAQ,KACP,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,CAAmB,CACZ,CACV;AACA,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAE,EAAE,QAAQ,EAAA,IAAA,EAAC,MAAM,QAAC,KAAK,EAAC,EAAE,EAAA,EACnE,WAAW,CACL,CACV;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAA,CAAI,CACxD;AAEb,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/components/select/SelectOptions.js

@@ -1,5 +1,5 @@
 import { getDataAttributes } from '../../utilities/selectUtils.js';
-import React__default from 'react';
+import React from 'react';
 
 function isGroup(item) {
     return "options" in item;
@@ -10,25 +10,25 @@ function getOptionLabel(option) {
     return option.textValue ?? option.value ?? "";
 }
 function Option({ option }) {
-    return (React__default.createElement("option", { ...getDataAttributes(option), disabled: option.disabled, value: option.value }, getOptionLabel(option)));
+    return (React.createElement("option", { ...getDataAttributes(option), disabled: option.disabled, value: option.value }, getOptionLabel(option)));
 }
 function SelectOptions({ items, supportsBaseSelect = false, }) {
     return items.map((item, index) => {
         if (isGroup(item)) {
-            return (React__default.createElement("optgroup", { key: `${item.label}-${index}`, disabled: item.disabled, label: item.label },
-                supportsBaseSelect && (React__default.createElement("legend", null,
-                    React__default.createElement("span", null, item.label))),
+            return (React.createElement("optgroup", { key: `${item.label}-${index}`, disabled: item.disabled, label: item.label },
+                supportsBaseSelect && (React.createElement("legend", null,
+                    React.createElement("span", null, item.label))),
                 item.options.map((opt, optIndex) => {
                     if (opt.divider) {
-                        return React__default.createElement("hr", { key: `divider-${optIndex}` });
+                        return React.createElement("hr", { key: `divider-${optIndex}` });
                     }
-                    return React__default.createElement(Option, { key: opt.value ?? `opt-${optIndex}`, option: opt });
+                    return React.createElement(Option, { key: opt.value ?? `opt-${optIndex}`, option: opt });
                 })));
         }
         if (item.divider) {
-            return React__default.createElement("hr", { key: `divider-${index}` });
+            return React.createElement("hr", { key: `divider-${index}` });
         }
-        return React__default.createElement(Option, { key: item.value ?? `opt-${index}`, option: item });
+        return React.createElement(Option, { key: item.value ?? `opt-${index}`, option: item });
     });
 }
 

package/dist/components/select/SelectOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptions.js","sources":["../../../src/components/select/SelectOptions.tsx"],"sourcesContent":["import { getDataAttributes } from \"@utilities/selectUtils\"\nimport React from \"react\"\n\nimport type {\n  SelectItem,\n  SelectOptionsGroup,\n  SelectOptionWithNodeLabel,\n  SelectOptionWithTextLabel,\n} from \"./Select\"\n\ninterface OptionProps {\n  option: SelectOptionWithNodeLabel | SelectOptionWithTextLabel\n}\n\ninterface SelectOptionsProps {\n  items: SelectItem[]\n  supportsBaseSelect?: boolean\n}\n\nfunction isGroup(item: SelectItem): item is SelectOptionsGroup {\n  return \"options\" in item\n}\n\nfunction getOptionLabel(option: {\n  label: React.ReactNode\n  textValue?: string\n  value?: string\n}): string {\n  if (typeof option.label === \"string\") return option.label\n  return option.textValue ?? option.value ?? \"\"\n}\n\nfunction Option({ option }: OptionProps) {\n  return (\n    <option\n      {...getDataAttributes(option)}\n      disabled={option.disabled}\n      value={option.value}\n    >\n      {getOptionLabel(option)}\n    </option>\n  )\n}\n\nexport function SelectOptions({\n  items,\n  supportsBaseSelect = false,\n}: SelectOptionsProps): React.ReactNode {\n  return items.map((item, index) => {\n    if (isGroup(item)) {\n      return (\n        <optgroup\n          key={`${item.label}-${index}`}\n          disabled={item.disabled}\n          label={item.label}\n        >\n          {supportsBaseSelect && (\n            <legend>\n              <span>{item.label}</span>\n            </legend>\n          )}\n          {item.options.map((opt, optIndex) => {\n            if (opt.divider) {\n              return <hr key={`divider-${optIndex}`} />\n            }\n            return <Option key={opt.value ?? `opt-${optIndex}`} option={opt} />\n          })}\n        </optgroup>\n      )\n    }\n\n    if (item.divider) {\n      return <hr key={`divider-${index}`} />\n    }\n\n    return <Option key={item.value ?? `opt-${index}`} option={item} />\n  })\n}\n"],"names":["React"],"mappings":";;;AAmBA,SAAS,OAAO,CAAC,IAAgB,EAAA;IAC/B,OAAO,SAAS,IAAI,IAAI;AAC1B;AAEA,SAAS,cAAc,CAAC,MAIvB,EAAA;AACC,IAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK;IACzD,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE;AAC/C;AAEA,SAAS,MAAM,CAAC,EAAE,MAAM,EAAe,EAAA;IACrC,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,iBAAiB,CAAC,MAAM,CAAC,EAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,EAElB,cAAc,CAAC,MAAM,CAAC,CAChB;AAEb;AAEM,SAAU,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkB,GAAG,KAAK,GACP,EAAA;IACnB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,QAAA,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,QACEA,2CACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;AAEhB,gBAAA,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACV;gBACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;AAClC,oBAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,wBAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,QAAQ,CAAA,CAAE,GAAI;oBAC3C;AACA,oBAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAE,EAAE,MAAM,EAAE,GAAG,GAAI;gBACrE,CAAC,CAAC,CACO;QAEf;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,OAAOA,qCAAI,GAAG,EAAE,WAAW,KAAK,CAAA,CAAE,GAAI;QACxC;AAEA,QAAA,OAAOA,6BAAC,MAAM,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAE,EAAE,MAAM,EAAE,IAAI,GAAI;AACpE,IAAA,CAAC,CAAC;AACJ;;;;"}
+{"version":3,"file":"SelectOptions.js","sources":["../../../src/components/select/SelectOptions.tsx"],"sourcesContent":["import { getDataAttributes } from \"@utilities/selectUtils\"\nimport React from \"react\"\n\nimport type {\n  SelectItem,\n  SelectOptionsGroup,\n  SelectOptionWithNodeLabel,\n  SelectOptionWithTextLabel,\n} from \"./Select\"\n\ninterface OptionProps {\n  option: SelectOptionWithNodeLabel | SelectOptionWithTextLabel\n}\n\ninterface SelectOptionsProps {\n  items: SelectItem[]\n  supportsBaseSelect?: boolean\n}\n\nfunction isGroup(item: SelectItem): item is SelectOptionsGroup {\n  return \"options\" in item\n}\n\nfunction getOptionLabel(option: {\n  label: React.ReactNode\n  textValue?: string\n  value?: string\n}): string {\n  if (typeof option.label === \"string\") return option.label\n  return option.textValue ?? option.value ?? \"\"\n}\n\nfunction Option({ option }: OptionProps) {\n  return (\n    <option\n      {...getDataAttributes(option)}\n      disabled={option.disabled}\n      value={option.value}\n    >\n      {getOptionLabel(option)}\n    </option>\n  )\n}\n\nexport function SelectOptions({\n  items,\n  supportsBaseSelect = false,\n}: SelectOptionsProps): React.ReactNode {\n  return items.map((item, index) => {\n    if (isGroup(item)) {\n      return (\n        <optgroup\n          key={`${item.label}-${index}`}\n          disabled={item.disabled}\n          label={item.label}\n        >\n          {supportsBaseSelect && (\n            <legend>\n              <span>{item.label}</span>\n            </legend>\n          )}\n          {item.options.map((opt, optIndex) => {\n            if (opt.divider) {\n              return <hr key={`divider-${optIndex}`} />\n            }\n            return <Option key={opt.value ?? `opt-${optIndex}`} option={opt} />\n          })}\n        </optgroup>\n      )\n    }\n\n    if (item.divider) {\n      return <hr key={`divider-${index}`} />\n    }\n\n    return <Option key={item.value ?? `opt-${index}`} option={item} />\n  })\n}\n"],"names":[],"mappings":";;;AAmBA,SAAS,OAAO,CAAC,IAAgB,EAAA;IAC/B,OAAO,SAAS,IAAI,IAAI;AAC1B;AAEA,SAAS,cAAc,CAAC,MAIvB,EAAA;AACC,IAAA,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK;IACzD,OAAO,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE;AAC/C;AAEA,SAAS,MAAM,CAAC,EAAE,MAAM,EAAe,EAAA;IACrC,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,iBAAiB,CAAC,MAAM,CAAC,EAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,EAElB,cAAc,CAAC,MAAM,CAAC,CAChB;AAEb;AAEM,SAAU,aAAa,CAAC,EAC5B,KAAK,EACL,kBAAkB,GAAG,KAAK,GACP,EAAA;IACnB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC/B,QAAA,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,QACE,kCACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA;AAEhB,gBAAA,kBAAkB,KACjB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CAClB,CACV;gBACA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;AAClC,oBAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,wBAAA,OAAO,4BAAI,GAAG,EAAE,WAAW,QAAQ,CAAA,CAAE,GAAI;oBAC3C;AACA,oBAAA,OAAO,oBAAC,MAAM,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,QAAQ,CAAA,CAAE,EAAE,MAAM,EAAE,GAAG,GAAI;gBACrE,CAAC,CAAC,CACO;QAEf;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,OAAO,4BAAI,GAAG,EAAE,WAAW,KAAK,CAAA,CAAE,GAAI;QACxC;AAEA,QAAA,OAAO,oBAAC,MAAM,EAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAE,EAAE,MAAM,EAAE,IAAI,GAAI;AACpE,IAAA,CAAC,CAAC;AACJ;;;;"}