@planningcenter/tapestry 3.8.0-rc.0 → 3.8.0

package/dist/components/date-picker/DatePicker.js

@@ -3,7 +3,7 @@ import { today as $ad063034c8620db8$export$d0bdf45af03a6ea3, getLocalTimeZone as
 import { parseDate as $58246871e4652552$export$6b862160d295c8e } from './../../ext/@internationalized/date/dist/private/string.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default, { useState, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { CalendarStateContext } from 'react-aria-components/Calendar';
 import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button, Popover, Calendar, Text, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components/DatePicker';
 import { Dialog } from 'react-aria-components/Dialog';
@@ -27,7 +27,7 @@ function toCalendarDate(input) {
     return $58246871e4652552$export$6b862160d295c8e(input);
 }
 function DatePickerOverlay({ children, variant, }) {
-    return (React__default.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: `tds-date-picker-overlay tds-date-picker-overlay--${variant}`, role: "dialog" }, children));
+    return (React.createElement("div", { "aria-label": `Select ${variant}`, "aria-modal": "true", className: `tds-date-picker-overlay tds-date-picker-overlay--${variant}`, role: "dialog" }, children));
 }
 function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
     // Read and drive Calendar's focused date through its state context. This
@@ -52,14 +52,14 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
         state.setFocusedDate(new $2aaf608024c21ca1$export$99faa760c7908e4f(year, focusedDate.month, 1));
         setActiveOverlay(null);
     }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("header", { className: "tds-date-picker-calendar-header" },
-            React__default.createElement("div", { className: "tds-date-picker-calendar-heading" },
-                React__default.createElement(Button, { "aria-expanded": activeOverlay === "month", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "month" ? null : "month"), slot: null }, longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))),
-                React__default.createElement(Button, { "aria-expanded": activeOverlay === "year", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "year" ? null : "year"), slot: null }, focusedDate.year)),
-            activeOverlay ? (React__default.createElement(Button, { "aria-label": `Close ${activeOverlay} picker`, className: "tds-date-picker-calendar-nav", onPress: () => setActiveOverlay(null), slot: null },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }))) : (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg", style: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("header", { className: "tds-date-picker-calendar-header" },
+            React.createElement("div", { className: "tds-date-picker-calendar-heading" },
+                React.createElement(Button, { "aria-expanded": activeOverlay === "month", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "month" ? null : "month"), slot: null }, longMonthFormatter.format(new Date(2000, focusedDate.month - 1, 1))),
+                React.createElement(Button, { "aria-expanded": activeOverlay === "year", "aria-haspopup": "dialog", className: "tds-date-picker-calendar-overlay-trigger", onPress: () => setActiveOverlay(activeOverlay === "year" ? null : "year"), slot: null }, focusedDate.year)),
+            activeOverlay ? (React.createElement(Button, { "aria-label": `Close ${activeOverlay} picker`, className: "tds-date-picker-calendar-nav", onPress: () => setActiveOverlay(null), slot: null },
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#x" }))) : (React.createElement(React.Fragment, null,
+                React.createElement(Button, { "aria-label": "Go to today", className: "tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg", style: {
                         visibility: focusedDate.month === today.month &&
                             focusedDate.year === today.year
                             ? "hidden"
@@ -68,30 +68,30 @@ function DatePickerCalendarBody({ activeOverlay, setActiveOverlay, }) {
                         state.setFocusedDate(today);
                         state.setFocused(true);
                     }, slot: null },
-                    React__default.createElement("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", className: "symbol" },
-                        React__default.createElement("path", { d: "M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555" }),
-                        React__default.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
-                React__default.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
-                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" })),
-                React__default.createElement(Button, { "aria-label": "Next month", className: "tds-date-picker-calendar-nav", slot: "next" },
-                    React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }))))),
-        React__default.createElement("div", { className: "tds-date-picker-calendar-body" },
-            activeOverlay === "month" && (React__default.createElement(DatePickerOverlay, { variant: "month" },
-                React__default.createElement(ListBox, { "aria-label": "Months", 
+                    React.createElement("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16", className: "symbol" },
+                        React.createElement("path", { d: "M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555" }),
+                        React.createElement("circle", { cx: "8", cy: "9.75", r: "2.25" }))),
+                React.createElement(Button, { "aria-label": "Previous month", className: "tds-date-picker-calendar-nav", slot: "previous" },
+                    React.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" })),
+                React.createElement(Button, { "aria-label": "Next month", className: "tds-date-picker-calendar-nav", slot: "next" },
+                    React.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }))))),
+        React.createElement("div", { className: "tds-date-picker-calendar-body" },
+            activeOverlay === "month" && (React.createElement(DatePickerOverlay, { variant: "month" },
+                React.createElement(ListBox, { "aria-label": "Months", 
                     // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
                     autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleMonthSelect), selectedKeys: [String(focusedDate.month - 1)], selectionMode: "single" }, MONTHS.map((i) => {
                     const date = new Date(2000, i, 1);
                     const shortMonth = shortMonthFormatter.format(date);
                     const longMonth = longMonthFormatter.format(date);
-                    return (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(i), key: i, "aria-label": longMonth, textValue: longMonth }, shortMonth));
+                    return (React.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(i), key: i, "aria-label": longMonth, textValue: longMonth }, shortMonth));
                 })))),
-            activeOverlay === "year" && (React__default.createElement(DatePickerOverlay, { variant: "year" },
-                React__default.createElement(ListBox, { "aria-label": "Years", 
+            activeOverlay === "year" && (React.createElement(DatePickerOverlay, { variant: "year" },
+                React.createElement(ListBox, { "aria-label": "Years", 
                     // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices
-                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleYearSelect), selectedKeys: [String(focusedDate.year)], selectionMode: "single" }, YEARS.map((year) => (React__default.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(year), key: year, textValue: String(year) }, year)))))),
-            React__default.createElement(CalendarGrid, { className: "tds-date-picker-calendar-grid" },
-                React__default.createElement(CalendarGridHeader, { className: "tds-date-picker-calendar-grid-header" }, (day) => (React__default.createElement(CalendarHeaderCell, { className: "tds-date-picker-calendar-header-cell" }, day))),
-                React__default.createElement(CalendarGridBody, { className: "tds-date-picker-calendar-grid-body" }, (date) => (React__default.createElement(CalendarCell, { className: "tds-date-picker-calendar-cell-button", date: date })))))));
+                    autoFocus: true, className: "tds-date-picker-overlay-list", disallowEmptySelection: true, escapeKeyBehavior: "none", layout: "grid", onSelectionChange: (keys) => handleOverlaySelectionChange(keys, handleYearSelect), selectedKeys: [String(focusedDate.year)], selectionMode: "single" }, YEARS.map((year) => (React.createElement(ListBoxItem, { className: "tds-date-picker-overlay-cell", id: String(year), key: year, textValue: String(year) }, year)))))),
+            React.createElement(CalendarGrid, { className: "tds-date-picker-calendar-grid" },
+                React.createElement(CalendarGridHeader, { className: "tds-date-picker-calendar-grid-header" }, (day) => (React.createElement(CalendarHeaderCell, { className: "tds-date-picker-calendar-header-cell" }, day))),
+                React.createElement(CalendarGridBody, { className: "tds-date-picker-calendar-grid-body" }, (date) => (React.createElement(CalendarCell, { className: "tds-date-picker-calendar-cell-button", date: date })))))));
 }
 /**
  * A date picker allows a user to select a particular date.
@@ -119,25 +119,25 @@ function DatePicker({ className, description, disabled, firstDayOfWeek, hideLabe
         "tds-field--lg": size === "lg",
     }, className);
     const [activeOverlay, setActiveOverlay] = useState(null);
-    return (React__default.createElement(DatePicker$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, isDateUnavailable: isDateUnavailable, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: convertedMax, minValue: convertedMin, onChange: onChange ?? undefined, onOpenChange: (isOpen) => {
+    return (React.createElement(DatePicker$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, isDateUnavailable: isDateUnavailable, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: convertedMax, minValue: convertedMin, onChange: onChange ?? undefined, onOpenChange: (isOpen) => {
             if (!isOpen)
                 setActiveOverlay(null);
         }, value: convertedValue },
-        !hideLabel && React__default.createElement(Label, { className: "tds-field-label" }, label),
-        React__default.createElement(Group, { className: "tds-field-control tds-date-picker-field" },
-            React__default.createElement(DateInput, { className: "tds-date-picker-input" }, (segment) => (React__default.createElement(DateSegment, { className: segment.type === "literal"
+        !hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
+        React.createElement(Group, { className: "tds-field-control tds-date-picker-field" },
+            React.createElement(DateInput, { className: "tds-date-picker-input" }, (segment) => (React.createElement(DateSegment, { className: segment.type === "literal"
                     ? "tds-field-date-segment-separator"
                     : "tds-field-date-segment", segment: segment }))),
-            React__default.createElement(Button, { className: "tds-btn tds-btn--infield tds-date-picker-button" },
-                React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#calendar" }))),
-        React__default.createElement(Popover, { className: classNames("tds-date-picker-popover", {
+            React.createElement(Button, { className: "tds-btn tds-btn--infield tds-date-picker-button" },
+                React.createElement(Icon, { "aria-hidden": true, symbol: "general#calendar" }))),
+        React.createElement(Popover, { className: classNames("tds-date-picker-popover", {
                 "tds-date-picker-popover--lg": size === "lg",
             }), offset: 2 },
-            React__default.createElement(Dialog, null,
-                React__default.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek },
-                    React__default.createElement(DatePickerCalendarBody, { activeOverlay: activeOverlay, setActiveOverlay: setActiveOverlay })))),
-        description && (React__default.createElement(Text, { elementType: "p", className: "tds-field-description", slot: "description" },
-            React__default.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
+            React.createElement(Dialog, null,
+                React.createElement(Calendar, { className: "tds-date-picker-calendar", firstDayOfWeek: firstDayOfWeek },
+                    React.createElement(DatePickerCalendarBody, { activeOverlay: activeOverlay, setActiveOverlay: setActiveOverlay })))),
+        description && (React.createElement(Text, { elementType: "p", className: "tds-field-description", slot: "description" },
+            React.createElement(Icon, { "aria-hidden": true, className: "tds-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
             description))));
 }
 DatePicker.displayName = "DatePicker";

package/dist/components/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  CalendarDate,\n  type DateValue,\n  getLocalTimeZone,\n  parseDate,\n  today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport { CalendarStateContext } from \"react-aria-components/Calendar\"\nimport {\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  type DatePickerProps as AriaDatePickerProps,\n  DateSegment,\n  Group,\n  Label,\n  Popover,\n  Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n  month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n  input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n  if (input === null) return null\n  if (input === undefined) return undefined\n\n  if (typeof input === \"object\" && \"calendar\" in input) {\n    return input\n  }\n\n  return parseDate(input)\n}\n\nexport interface DatePickerProps {\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: string\n  /** Disables the input and calendar button. */\n  disabled?: boolean\n  /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n  firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Callback that returns `true` for dates that should be visible but not selectable. */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n  max?: DatePickerDateValue\n  /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n  min?: DatePickerDateValue\n  /** Called when the selected date changes. */\n  onChange?: (value: DateValue | null) => void\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the date picker. */\n  size?: DatePickerSize\n  /** The controlled value. Accepts a DateValue or ISO date string. */\n  value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n  | \"children\"\n  | \"defaultOpen\"\n  | \"defaultValue\"\n  | \"granularity\"\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"pageBehavior\"\n  | \"placeholderValue\"\n  | \"shouldCloseOnSelect\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n  AriaDatePickerProps<DateValue>,\n  DatePickerProps,\n  AriaDatePickerPropsToOmit,\n  AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n  children,\n  variant,\n}: {\n  children: ReactNode\n  variant: \"month\" | \"year\"\n}) {\n  return (\n    <div\n      aria-label={`Select ${variant}`}\n      aria-modal=\"true\"\n      className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n      role=\"dialog\"\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction DatePickerCalendarBody({\n  activeOverlay,\n  setActiveOverlay,\n}: {\n  activeOverlay: \"month\" | \"year\" | null\n  setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n  // Read and drive Calendar's focused date through its state context. This\n  // lets react-aria-components own the \"open to selected month\" behavior:\n  // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n  // current value (whether typed into the input segments or set via `value`).\n  const state = useContext(CalendarStateContext)!\n  const focusedDate = state.focusedDate\n  const today = todayCalendar(getLocalTimeZone())\n\n  function handleOverlaySelectionChange(\n    keys: \"all\" | Set<number | string>,\n    onSelect: (key: number) => void\n  ) {\n    if (keys === \"all\") return\n    const [first] = Array.from(keys)\n    if (first !== undefined) onSelect(Number(first))\n  }\n\n  function handleMonthSelect(monthIndex: number) {\n    state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n    setActiveOverlay(null)\n  }\n\n  function handleYearSelect(year: number) {\n    state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n    setActiveOverlay(null)\n  }\n\n  return (\n    <>\n      <header className=\"tds-date-picker-calendar-header\">\n        <div className=\"tds-date-picker-calendar-heading\">\n          <Button\n            aria-expanded={activeOverlay === \"month\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n            }\n            slot={null}\n          >\n            {longMonthFormatter.format(\n              new Date(2000, focusedDate.month - 1, 1)\n            )}\n          </Button>\n          <Button\n            aria-expanded={activeOverlay === \"year\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n            }\n            slot={null}\n          >\n            {focusedDate.year}\n          </Button>\n        </div>\n        {activeOverlay ? (\n          <Button\n            aria-label={`Close ${activeOverlay} picker`}\n            className=\"tds-date-picker-calendar-nav\"\n            onPress={() => setActiveOverlay(null)}\n            slot={null}\n          >\n            <Icon aria-hidden symbol=\"general#x\" />\n          </Button>\n        ) : (\n          <>\n            <Button\n              aria-label=\"Go to today\"\n              className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n              style={{\n                visibility:\n                  focusedDate.month === today.month &&\n                  focusedDate.year === today.year\n                    ? \"hidden\"\n                    : undefined,\n              }}\n              onPress={() => {\n                state.setFocusedDate(today)\n                state.setFocused(true)\n              }}\n              slot={null}\n            >\n              {/* TODO: Add to icon library and use Icon once icon is decided on */}\n              <svg\n                aria-hidden\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                className=\"symbol\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n                <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n              </svg>\n            </Button>\n            <Button\n              aria-label=\"Previous month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"previous\"\n            >\n              <Icon aria-hidden symbol=\"general#left-chevron\" />\n            </Button>\n            <Button\n              aria-label=\"Next month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"next\"\n            >\n              <Icon aria-hidden symbol=\"general#right-chevron\" />\n            </Button>\n          </>\n        )}\n      </header>\n      <div className=\"tds-date-picker-calendar-body\">\n        {activeOverlay === \"month\" && (\n          <DatePickerOverlay variant=\"month\">\n            <ListBox\n              aria-label=\"Months\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleMonthSelect)\n              }\n              selectedKeys={[String(focusedDate.month - 1)]}\n              selectionMode=\"single\"\n            >\n              {MONTHS.map((i) => {\n                const date = new Date(2000, i, 1)\n                const shortMonth = shortMonthFormatter.format(date)\n                const longMonth = longMonthFormatter.format(date)\n\n                return (\n                  <ListBoxItem\n                    className=\"tds-date-picker-overlay-cell\"\n                    id={String(i)}\n                    key={i}\n                    aria-label={longMonth}\n                    textValue={longMonth}\n                  >\n                    {shortMonth}\n                  </ListBoxItem>\n                )\n              })}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        {activeOverlay === \"year\" && (\n          <DatePickerOverlay variant=\"year\">\n            <ListBox\n              aria-label=\"Years\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleYearSelect)\n              }\n              selectedKeys={[String(focusedDate.year)]}\n              selectionMode=\"single\"\n            >\n              {YEARS.map((year) => (\n                <ListBoxItem\n                  className=\"tds-date-picker-overlay-cell\"\n                  id={String(year)}\n                  key={year}\n                  textValue={String(year)}\n                >\n                  {year}\n                </ListBoxItem>\n              ))}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n          <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n            {(day) => (\n              <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n                {day}\n              </CalendarHeaderCell>\n            )}\n          </CalendarGridHeader>\n          <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n            {(date) => (\n              <CalendarCell\n                className=\"tds-date-picker-calendar-cell-button\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function DatePicker({\n  className,\n  description,\n  disabled,\n  firstDayOfWeek,\n  hideLabel,\n  invalid,\n  isDateUnavailable,\n  label,\n  max,\n  min,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: DatePickerElementProps) {\n  const convertedValue = toCalendarDate(value)\n  const convertedMin = toCalendarDate(min) ?? undefined\n  const convertedMax = toCalendarDate(max) ?? undefined\n\n  const combinedClassName = classNames(\n    \"tds-field tds-date-picker\",\n    {\n      \"tds-date-picker--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n    null\n  )\n\n  return (\n    <AriaDatePicker\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      isDateUnavailable={isDateUnavailable}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={convertedMax}\n      minValue={convertedMin}\n      onChange={onChange ?? undefined}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) setActiveOverlay(null)\n      }}\n      value={convertedValue}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-date-picker-field\">\n        <DateInput className=\"tds-date-picker-input\">\n          {(segment) => (\n            <DateSegment\n              className={\n                segment.type === \"literal\"\n                  ? \"tds-field-date-segment-separator\"\n                  : \"tds-field-date-segment\"\n              }\n              segment={segment}\n            />\n          )}\n        </DateInput>\n        <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n          <Icon aria-hidden symbol=\"general#calendar\" />\n        </Button>\n      </Group>\n      <Popover\n        className={classNames(\"tds-date-picker-popover\", {\n          \"tds-date-picker-popover--lg\": size === \"lg\",\n        })}\n        offset={2}\n      >\n        <Dialog>\n          <Calendar\n            className=\"tds-date-picker-calendar\"\n            firstDayOfWeek={firstDayOfWeek}\n          >\n            <DatePickerCalendarBody\n              activeOverlay={activeOverlay}\n              setActiveOverlay={setActiveOverlay}\n            />\n          </Calendar>\n        </Dialog>\n      </Popover>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaDatePicker>\n  )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","React","CalendarDate","AriaDatePicker"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import \"../button/btn.css\"\nimport \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  CalendarDate,\n  type DateValue,\n  getLocalTimeZone,\n  parseDate,\n  today as todayCalendar,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useContext, useState } from \"react\"\nimport { CalendarStateContext } from \"react-aria-components/Calendar\"\nimport {\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  type DatePickerProps as AriaDatePickerProps,\n  DateSegment,\n  Group,\n  Label,\n  Popover,\n  Text,\n} from \"react-aria-components/DatePicker\"\nimport { Dialog } from \"react-aria-components/Dialog\"\nimport { ListBox, ListBoxItem } from \"react-aria-components/ListBox\"\n\nconst _today = todayCalendar(getLocalTimeZone())\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst YEARS = Array.from({ length: 131 }, (_, i) => _today.year - 100 + i)\nconst shortMonthFormatter = new Intl.DateTimeFormat(undefined, {\n  month: \"short\",\n})\nconst longMonthFormatter = new Intl.DateTimeFormat(undefined, { month: \"long\" })\n\nexport type DatePickerSize = \"md\" | \"lg\"\n\nexport type DatePickerDateValue = DateValue | string\n\nfunction toCalendarDate(\n  input: DatePickerDateValue | null | undefined\n): DateValue | null | undefined {\n  if (input === null) return null\n  if (input === undefined) return undefined\n\n  if (typeof input === \"object\" && \"calendar\" in input) {\n    return input\n  }\n\n  return parseDate(input)\n}\n\nexport interface DatePickerProps {\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: ReactNode\n  /** Disables the input and calendar button. */\n  disabled?: boolean\n  /** Sets the first day of the week in the calendar. Defaults to locale-appropriate value. */\n  firstDayOfWeek?: \"fri\" | \"mon\" | \"sat\" | \"sun\" | \"thu\" | \"tue\" | \"wed\"\n  /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n  hideLabel?: boolean\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** Callback that returns `true` for dates that should be visible but not selectable. */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /** Accessible label for the field. */\n  label: string\n  /** Maximum selectable date. Accepts a DateValue or ISO date string. */\n  max?: DatePickerDateValue\n  /** Minimum selectable date. Accepts a DateValue or ISO date string. */\n  min?: DatePickerDateValue\n  /** Called when the selected date changes. */\n  onChange?: (value: DateValue | null) => void\n  /** If `true`, allows the value to be read but not changed. */\n  readOnly?: boolean\n  /** If `true`, appends an asterisk at the end of the label text. */\n  required?: boolean\n  /** The size of the date picker. */\n  size?: DatePickerSize\n  /** The controlled value. Accepts a DateValue or ISO date string. */\n  value?: DatePickerDateValue | null\n}\n\ntype AriaDatePickerPropsToOmit =\n  | \"children\"\n  | \"defaultOpen\"\n  | \"defaultValue\"\n  | \"granularity\"\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"pageBehavior\"\n  | \"placeholderValue\"\n  | \"shouldCloseOnSelect\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaDatePickerPropsToInclude = \"isOpen\" | \"name\" | \"onOpenChange\"\n\nexport type DatePickerElementProps = CombineAriaPropsWithCustomProps<\n  AriaDatePickerProps<DateValue>,\n  DatePickerProps,\n  AriaDatePickerPropsToOmit,\n  AriaDatePickerPropsToInclude\n>\n\nfunction DatePickerOverlay({\n  children,\n  variant,\n}: {\n  children: ReactNode\n  variant: \"month\" | \"year\"\n}) {\n  return (\n    <div\n      aria-label={`Select ${variant}`}\n      aria-modal=\"true\"\n      className={`tds-date-picker-overlay tds-date-picker-overlay--${variant}`}\n      role=\"dialog\"\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction DatePickerCalendarBody({\n  activeOverlay,\n  setActiveOverlay,\n}: {\n  activeOverlay: \"month\" | \"year\" | null\n  setActiveOverlay: (overlay: \"month\" | \"year\" | null) => void\n}) {\n  // Read and drive Calendar's focused date through its state context. This\n  // lets react-aria-components own the \"open to selected month\" behavior:\n  // when the popover opens, Calendar mounts and auto-focuses the DatePicker's\n  // current value (whether typed into the input segments or set via `value`).\n  const state = useContext(CalendarStateContext)!\n  const focusedDate = state.focusedDate\n  const today = todayCalendar(getLocalTimeZone())\n\n  function handleOverlaySelectionChange(\n    keys: \"all\" | Set<number | string>,\n    onSelect: (key: number) => void\n  ) {\n    if (keys === \"all\") return\n    const [first] = Array.from(keys)\n    if (first !== undefined) onSelect(Number(first))\n  }\n\n  function handleMonthSelect(monthIndex: number) {\n    state.setFocusedDate(new CalendarDate(focusedDate.year, monthIndex + 1, 1))\n    setActiveOverlay(null)\n  }\n\n  function handleYearSelect(year: number) {\n    state.setFocusedDate(new CalendarDate(year, focusedDate.month, 1))\n    setActiveOverlay(null)\n  }\n\n  return (\n    <>\n      <header className=\"tds-date-picker-calendar-header\">\n        <div className=\"tds-date-picker-calendar-heading\">\n          <Button\n            aria-expanded={activeOverlay === \"month\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"month\" ? null : \"month\")\n            }\n            slot={null}\n          >\n            {longMonthFormatter.format(\n              new Date(2000, focusedDate.month - 1, 1)\n            )}\n          </Button>\n          <Button\n            aria-expanded={activeOverlay === \"year\"}\n            aria-haspopup=\"dialog\"\n            className=\"tds-date-picker-calendar-overlay-trigger\"\n            onPress={() =>\n              setActiveOverlay(activeOverlay === \"year\" ? null : \"year\")\n            }\n            slot={null}\n          >\n            {focusedDate.year}\n          </Button>\n        </div>\n        {activeOverlay ? (\n          <Button\n            aria-label={`Close ${activeOverlay} picker`}\n            className=\"tds-date-picker-calendar-nav\"\n            onPress={() => setActiveOverlay(null)}\n            slot={null}\n          >\n            <Icon aria-hidden symbol=\"general#x\" />\n          </Button>\n        ) : (\n          <>\n            <Button\n              aria-label=\"Go to today\"\n              className=\"tds-date-picker-calendar-nav tds-date-picker-calendar-nav--lg\"\n              style={{\n                visibility:\n                  focusedDate.month === today.month &&\n                  focusedDate.year === today.year\n                    ? \"hidden\"\n                    : undefined,\n              }}\n              onPress={() => {\n                state.setFocusedDate(today)\n                state.setFocused(true)\n              }}\n              slot={null}\n            >\n              {/* TODO: Add to icon library and use Icon once icon is decided on */}\n              <svg\n                aria-hidden\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 16 16\"\n                className=\"symbol\"\n              >\n                <path d=\"M13.444 14.222H2.556V5.667h10.888zm0-12.444h-.777V.222h-1.556v1.556H4.889V.222H3.333v1.556h-.777a1.55 1.55 0 0 0-1.548 1.555L1 14.222a1.555 1.555 0 0 0 1.556 1.556h10.888A1.56 1.56 0 0 0 15 14.222V3.333a1.56 1.56 0 0 0-1.556-1.555\" />\n                <circle cx=\"8\" cy=\"9.75\" r=\"2.25\" />\n              </svg>\n            </Button>\n            <Button\n              aria-label=\"Previous month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"previous\"\n            >\n              <Icon aria-hidden symbol=\"general#left-chevron\" />\n            </Button>\n            <Button\n              aria-label=\"Next month\"\n              className=\"tds-date-picker-calendar-nav\"\n              slot=\"next\"\n            >\n              <Icon aria-hidden symbol=\"general#right-chevron\" />\n            </Button>\n          </>\n        )}\n      </header>\n      <div className=\"tds-date-picker-calendar-body\">\n        {activeOverlay === \"month\" && (\n          <DatePickerOverlay variant=\"month\">\n            <ListBox\n              aria-label=\"Months\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleMonthSelect)\n              }\n              selectedKeys={[String(focusedDate.month - 1)]}\n              selectionMode=\"single\"\n            >\n              {MONTHS.map((i) => {\n                const date = new Date(2000, i, 1)\n                const shortMonth = shortMonthFormatter.format(date)\n                const longMonth = longMonthFormatter.format(date)\n\n                return (\n                  <ListBoxItem\n                    className=\"tds-date-picker-overlay-cell\"\n                    id={String(i)}\n                    key={i}\n                    aria-label={longMonth}\n                    textValue={longMonth}\n                  >\n                    {shortMonth}\n                  </ListBoxItem>\n                )\n              })}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        {activeOverlay === \"year\" && (\n          <DatePickerOverlay variant=\"year\">\n            <ListBox\n              aria-label=\"Years\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- focusing the active item on dialog open is required per ARIA authoring practices\n              autoFocus\n              className=\"tds-date-picker-overlay-list\"\n              disallowEmptySelection\n              escapeKeyBehavior=\"none\"\n              layout=\"grid\"\n              onSelectionChange={(keys) =>\n                handleOverlaySelectionChange(keys, handleYearSelect)\n              }\n              selectedKeys={[String(focusedDate.year)]}\n              selectionMode=\"single\"\n            >\n              {YEARS.map((year) => (\n                <ListBoxItem\n                  className=\"tds-date-picker-overlay-cell\"\n                  id={String(year)}\n                  key={year}\n                  textValue={String(year)}\n                >\n                  {year}\n                </ListBoxItem>\n              ))}\n            </ListBox>\n          </DatePickerOverlay>\n        )}\n        <CalendarGrid className=\"tds-date-picker-calendar-grid\">\n          <CalendarGridHeader className=\"tds-date-picker-calendar-grid-header\">\n            {(day) => (\n              <CalendarHeaderCell className=\"tds-date-picker-calendar-header-cell\">\n                {day}\n              </CalendarHeaderCell>\n            )}\n          </CalendarGridHeader>\n          <CalendarGridBody className=\"tds-date-picker-calendar-grid-body\">\n            {(date) => (\n              <CalendarCell\n                className=\"tds-date-picker-calendar-cell-button\"\n                date={date}\n              />\n            )}\n          </CalendarGridBody>\n        </CalendarGrid>\n      </div>\n    </>\n  )\n}\n\n/**\n * A date picker allows a user to select a particular date.\n * The input supports keyboard entry of individual day, month, and year segments;\n * the calendar offers month and year quick-pick overlays plus a \"go to today\" shortcut.\n *\n * The date picker automatically displays the value and calendar from the user's locale,\n * and does not require a specific date format.\n *\n * Values are exchanged as `DateValue` from `@internationalized/date`, but\n * `value`, `min`, and `max` also accept ISO date strings (`\"YYYY-MM-DD\"`) for\n * convenience. Restrict the selectable range with `min`/`max`, or mark\n * individual dates as unavailable via `isDateUnavailable`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-datepicker--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function DatePicker({\n  className,\n  description,\n  disabled,\n  firstDayOfWeek,\n  hideLabel,\n  invalid,\n  isDateUnavailable,\n  label,\n  max,\n  min,\n  onChange,\n  readOnly,\n  required,\n  size = \"md\",\n  value,\n  ...restProps\n}: DatePickerElementProps) {\n  const convertedValue = toCalendarDate(value)\n  const convertedMin = toCalendarDate(min) ?? undefined\n  const convertedMax = toCalendarDate(max) ?? undefined\n\n  const combinedClassName = classNames(\n    \"tds-field tds-date-picker\",\n    {\n      \"tds-date-picker--lg\": size === \"lg\",\n      \"tds-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const [activeOverlay, setActiveOverlay] = useState<\"month\" | \"year\" | null>(\n    null\n  )\n\n  return (\n    <AriaDatePicker\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      isDateUnavailable={isDateUnavailable}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={convertedMax}\n      minValue={convertedMin}\n      onChange={onChange ?? undefined}\n      onOpenChange={(isOpen) => {\n        if (!isOpen) setActiveOverlay(null)\n      }}\n      value={convertedValue}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <Group className=\"tds-field-control tds-date-picker-field\">\n        <DateInput className=\"tds-date-picker-input\">\n          {(segment) => (\n            <DateSegment\n              className={\n                segment.type === \"literal\"\n                  ? \"tds-field-date-segment-separator\"\n                  : \"tds-field-date-segment\"\n              }\n              segment={segment}\n            />\n          )}\n        </DateInput>\n        <Button className=\"tds-btn tds-btn--infield tds-date-picker-button\">\n          <Icon aria-hidden symbol=\"general#calendar\" />\n        </Button>\n      </Group>\n      <Popover\n        className={classNames(\"tds-date-picker-popover\", {\n          \"tds-date-picker-popover--lg\": size === \"lg\",\n        })}\n        offset={2}\n      >\n        <Dialog>\n          <Calendar\n            className=\"tds-date-picker-calendar\"\n            firstDayOfWeek={firstDayOfWeek}\n          >\n            <DatePickerCalendarBody\n              activeOverlay={activeOverlay}\n              setActiveOverlay={setActiveOverlay}\n            />\n          </Calendar>\n        </Dialog>\n      </Popover>\n      {description && (\n        <Text\n          elementType=\"p\"\n          className=\"tds-field-description\"\n          slot=\"description\"\n        >\n          <Icon\n            aria-hidden\n            className=\"tds-field-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n          />\n          {description}\n        </Text>\n      )}\n    </AriaDatePicker>\n  )\n}\n\nDatePicker.displayName = \"DatePicker\"\n"],"names":["todayCalendar","getLocalTimeZone","parseDate","CalendarDate","AriaDatePicker"],"mappings":"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"}

package/dist/components/input/Input.d.ts

@@ -6,7 +6,7 @@ interface InputBaseProps {
     /** If true, the input width grows to fit content. */
     autoWidth?: boolean;
     /** Helper text displayed below the input. Styled as an error when `invalid`. */
-    description?: string;
+    description?: React.ReactNode;
     /** Whether the input is in an invalid state. */
     invalid?: boolean;
     /** If true, all text is selected when the input receives focus. */

package/dist/components/input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEnE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAA;AAET,UAAU,cAAc;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,mEAAmE;IACnE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,oCAAoC;IACpC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,mEAAmE;IACnE,SAAS,EAAE,IAAI,CAAA;IACf,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,oBAAoB,GACpB,qBAAqB,CAAA;AAEzB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CACnC,GACC,UAAU,CAAA;AAEZ;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,4FA2EjB,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEnE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,CAAA;AAET,UAAU,cAAc;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,qBAAsB,SAAQ,cAAc;IACpD,mEAAmE;IACnE,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,oCAAoC;IACpC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,oBAAqB,SAAQ,cAAc;IACnD,mEAAmE;IACnE,SAAS,EAAE,IAAI,CAAA;IACf,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,oBAAoB,GACpB,qBAAqB,CAAA;AAEzB;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CACnC,GACC,UAAU,CAAA;AAEZ;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,4FA2EjB,CAAA"}

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\"\n\ninterface InputBaseProps {\n  /** If true, the input width grows to fit content. */\n  autoWidth?: boolean\n  /** Helper text displayed below the input. Styled as an error when `invalid`. */\n  description?: string\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** If true, all text is selected when the input receives focus. */\n  selectTextOnFocus?: boolean\n  /** The size of the input. */\n  size?: InputSize\n  /** Supported input types — defaults to 'text' */\n  type?: InputType\n}\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /** The label text for the input. */\n  label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the input. Must be a string when hidden. */\n  label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type InputProps =\n  | InputWithAriaLabelledBy\n  | InputWithHiddenLabel\n  | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof InputProps | \"size\" | \"type\"\n> &\n  InputProps\n\n/**\n * A text input component that renders as an HTML `<input>` with a label and\n * optional description. Supports the standard text-like input types\n * (`text`, `email`, `password`, `search`, `tel`, `url`, `number`), invalid\n * state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-input--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n  function Input(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      autoComplete,\n      autoWidth,\n      className,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onFocus,\n      selectTextOnFocus,\n      size = \"md\",\n      type = \"text\",\n      ...restProps\n    }: InputElementProps,\n    ref\n  ) {\n    const autoCompleteBlockingProps =\n      autoComplete === \"off\"\n        ? {\n            \"data-1p-ignore\": true,\n            \"data-bwignore\": true,\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": true,\n          }\n        : {}\n\n    const handleFocus = selectTextOnFocus\n      ? (event: React.FocusEvent<HTMLInputElement>) => {\n          try {\n            event.currentTarget.select()\n          } catch {\n            // Some input types (e.g. number) do not support text selection.\n          }\n          onFocus?.(event)\n        }\n      : onFocus\n\n    const wrapperClassName = classNames(\n      { \"tds-input--auto-width\": autoWidth },\n      className\n    )\n\n    return (\n      <InputTextBase\n        className={wrapperClassName}\n        description={description}\n        hideLabel={hideLabel || !!ariaLabelledBy}\n        id={id}\n        invalid={invalid}\n        label={label}\n        size={size}\n      >\n        {({ descriptionId, inputId }) => (\n          <input\n            {...restProps}\n            {...autoCompleteBlockingProps}\n            aria-describedby={descriptionId}\n            aria-invalid={invalid || undefined}\n            aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            autoComplete={autoComplete}\n            id={inputId}\n            onFocus={handleFocus}\n            ref={ref}\n            type={type}\n          />\n        )}\n      </InputTextBase>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n"],"names":["React"],"mappings":";;;;AAmEA;;;;;;;;;AASG;MACU,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,EAAE,uBAAuB,EAAE,SAAS,EAAE,EACtC,SAAS,CACV;IAED,QACEA,6BAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EAAA,EAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,GACT,yBAAyB,sBACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,gBACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,qBACjD,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACa;AAEpB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\"\n\ninterface InputBaseProps {\n  /** If true, the input width grows to fit content. */\n  autoWidth?: boolean\n  /** Helper text displayed below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** If true, all text is selected when the input receives focus. */\n  selectTextOnFocus?: boolean\n  /** The size of the input. */\n  size?: InputSize\n  /** Supported input types — defaults to 'text' */\n  type?: InputType\n}\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /** The label text for the input. */\n  label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the input. Must be a string when hidden. */\n  label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type InputProps =\n  | InputWithAriaLabelledBy\n  | InputWithHiddenLabel\n  | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof InputProps | \"size\" | \"type\"\n> &\n  InputProps\n\n/**\n * A text input component that renders as an HTML `<input>` with a label and\n * optional description. Supports the standard text-like input types\n * (`text`, `email`, `password`, `search`, `tel`, `url`, `number`), invalid\n * state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-input--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n  function Input(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      autoComplete,\n      autoWidth,\n      className,\n      description,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onFocus,\n      selectTextOnFocus,\n      size = \"md\",\n      type = \"text\",\n      ...restProps\n    }: InputElementProps,\n    ref\n  ) {\n    const autoCompleteBlockingProps =\n      autoComplete === \"off\"\n        ? {\n            \"data-1p-ignore\": true,\n            \"data-bwignore\": true,\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": true,\n          }\n        : {}\n\n    const handleFocus = selectTextOnFocus\n      ? (event: React.FocusEvent<HTMLInputElement>) => {\n          try {\n            event.currentTarget.select()\n          } catch {\n            // Some input types (e.g. number) do not support text selection.\n          }\n          onFocus?.(event)\n        }\n      : onFocus\n\n    const wrapperClassName = classNames(\n      { \"tds-input--auto-width\": autoWidth },\n      className\n    )\n\n    return (\n      <InputTextBase\n        className={wrapperClassName}\n        description={description}\n        hideLabel={hideLabel || !!ariaLabelledBy}\n        id={id}\n        invalid={invalid}\n        label={label}\n        size={size}\n      >\n        {({ descriptionId, inputId }) => (\n          <input\n            {...restProps}\n            {...autoCompleteBlockingProps}\n            aria-describedby={descriptionId}\n            aria-invalid={invalid || undefined}\n            aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            autoComplete={autoComplete}\n            id={inputId}\n            onFocus={handleFocus}\n            ref={ref}\n            type={type}\n          />\n        )}\n      </InputTextBase>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n"],"names":["React"],"mappings":";;;;AAmEA;;;;;;;;;AASG;MACU,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,EAAE,uBAAuB,EAAE,SAAS,EAAE,EACtC,SAAS,CACV;IAED,QACEA,6BAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EAAA,EAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,GACT,yBAAyB,sBACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,gBACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,qBACjD,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACa;AAEpB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/input-text-base/InputTextBase.d.ts

@@ -4,7 +4,7 @@ interface InputTextBaseProps {
         descriptionId?: string;
         inputId: string;
     }) => React.ReactNode;
-    description?: string;
+    description?: React.ReactNode;
     hideLabel?: boolean;
     id?: string;
     invalid?: boolean;

package/dist/components/input-text-base/InputTextBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputTextBase.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,OAAO,EAAE,MAAM,CAAA;KAChB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,yBAAyB,qBAiC3B"}
+{"version":3,"file":"InputTextBase.d.ts","sourceRoot":"","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,OAAO,EAAE,MAAM,CAAA;KAChB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,MAAM,kBAAkB,CACzB,GACC,kBAAkB,CAAA;AAEpB,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACL,EAAE,yBAAyB,qBAiC3B"}

package/dist/components/input-text-base/InputTextBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputTextBase.js","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport * as React from \"react\"\n\ninterface InputTextBaseProps {\n  children: (props: {\n    descriptionId?: string\n    inputId: string\n  }) => React.ReactNode\n  description?: string\n  hideLabel?: boolean\n  id?: string\n  invalid?: boolean\n  label?: React.ReactNode\n  size?: \"md\" | \"lg\"\n}\n\nexport type InputTextBaseElementProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  keyof InputTextBaseProps\n> &\n  InputTextBaseProps\n\nexport function InputTextBase({\n  children,\n  className,\n  description,\n  hideLabel,\n  id,\n  label,\n  invalid,\n  size,\n}: InputTextBaseElementProps) {\n  const combinedClassName = classNames(\"tds-input\", className, {\n    \"tds-input--invalid\": invalid,\n    \"tds-input--lg\": size === \"lg\",\n  })\n\n  const stableId = useId()\n  const inputId = id || `tds-input-${stableId}`\n  const resolvedDescription =\n    description || (invalid ? \"This field is required\" : undefined)\n  const descriptionId = resolvedDescription\n    ? `${inputId}-description`\n    : undefined\n\n  return (\n    <div className={combinedClassName}>\n      {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n      {children({\n        descriptionId,\n        inputId,\n      })}\n      {resolvedDescription && (\n        <p id={descriptionId} className=\"tds-input-description\">\n          <Icon\n            className=\"tds-input-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n            aria-hidden\n          />\n          {resolvedDescription}\n        </p>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;SAwBgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACsB,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;AAC3D,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;AAC/B,KAAA,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,mBAAmB,GACvB,WAAW,KAAK,OAAO,GAAG,wBAAwB,GAAG,SAAS,CAAC;IACjE,MAAM,aAAa,GAAG;UAClB,CAAA,EAAG,OAAO,CAAA,YAAA;UACV,SAAS;AAEb,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACrE,QAAA,QAAQ,CAAC;YACR,aAAa;YACb,OAAO;SACR,CAAC;QACD,mBAAmB,KAClB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,uBAAuB,EAAA;YACrD,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,mBAAmB,CAClB,CACL,CACG;AAEV;;;;"}
+{"version":3,"file":"InputTextBase.js","sources":["../../../src/components/input-text-base/InputTextBase.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport * as React from \"react\"\n\ninterface InputTextBaseProps {\n  children: (props: {\n    descriptionId?: string\n    inputId: string\n  }) => React.ReactNode\n  description?: React.ReactNode\n  hideLabel?: boolean\n  id?: string\n  invalid?: boolean\n  label?: React.ReactNode\n  size?: \"md\" | \"lg\"\n}\n\nexport type InputTextBaseElementProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  keyof InputTextBaseProps\n> &\n  InputTextBaseProps\n\nexport function InputTextBase({\n  children,\n  className,\n  description,\n  hideLabel,\n  id,\n  label,\n  invalid,\n  size,\n}: InputTextBaseElementProps) {\n  const combinedClassName = classNames(\"tds-input\", className, {\n    \"tds-input--invalid\": invalid,\n    \"tds-input--lg\": size === \"lg\",\n  })\n\n  const stableId = useId()\n  const inputId = id || `tds-input-${stableId}`\n  const resolvedDescription =\n    description || (invalid ? \"This field is required\" : undefined)\n  const descriptionId = resolvedDescription\n    ? `${inputId}-description`\n    : undefined\n\n  return (\n    <div className={combinedClassName}>\n      {!hideLabel && label ? <label htmlFor={inputId}>{label}</label> : null}\n      {children({\n        descriptionId,\n        inputId,\n      })}\n      {resolvedDescription && (\n        <p id={descriptionId} className=\"tds-input-description\">\n          <Icon\n            className=\"tds-input-description-invalid-icon\"\n            symbol=\"general#exclamation-triangle\"\n            aria-hidden\n          />\n          {resolvedDescription}\n        </p>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;SAwBgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,KAAK,EACL,OAAO,EACP,IAAI,GACsB,EAAA;AAC1B,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;AAC3D,QAAA,oBAAoB,EAAE,OAAO;QAC7B,eAAe,EAAE,IAAI,KAAK,IAAI;AAC/B,KAAA,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAC7C,IAAA,MAAM,mBAAmB,GACvB,WAAW,KAAK,OAAO,GAAG,wBAAwB,GAAG,SAAS,CAAC;IACjE,MAAM,aAAa,GAAG;UAClB,CAAA,EAAG,OAAO,CAAA,YAAA;UACV,SAAS;AAEb,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC9B,QAAA,CAAC,SAAS,IAAI,KAAK,GAAG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,IAAG,KAAK,CAAS,GAAG,IAAI;AACrE,QAAA,QAAQ,CAAC;YACR,aAAa;YACb,OAAO;SACR,CAAC;QACD,mBAAmB,KAClB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,aAAa,EAAE,SAAS,EAAC,uBAAuB,EAAA;YACrD,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,mBAAmB,CAClB,CACL,CACG;AAEV;;;;"}

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

@@ -0,0 +1,20 @@
+import "./index.css";
+import React, { type DialogHTMLAttributes } from "react";
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+export interface ModalProps {
+    /**
+     * A `<ModalHeader>` followed by a `<ModalBody>` and a `<ModalFooter>`.
+     */
+    children: React.ReactNode;
+    /** Default `false`. `true` enables Esc, backdrop-click, and the close button together. */
+    dismissible?: boolean;
+    /** Fires on every dismissal — Esc, backdrop, close button, or programmatic. */
+    onClose?: () => void;
+    /** Controls the dialog. Synced to `showModal()`/`close()`. */
+    open: boolean;
+    /** Default `'md'`. */
+    size?: ModalSize;
+}
+export type ModalElementProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, keyof ModalProps | "onCancel"> & ModalProps;
+export declare const Modal: React.ForwardRefExoticComponent<Omit<React.DialogHTMLAttributes<HTMLDialogElement>, keyof ModalProps | "onCancel"> & ModalProps & React.RefAttributes<HTMLDialogElement>>;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EACZ,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEjD,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAA;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,UAAU,GAAG,UAAU,CAC9B,GACC,UAAU,CAAA;AAuCZ,eAAO,MAAM,KAAK,2KAyHjB,CAAA"}

package/dist/components/modal/Modal.js

@@ -0,0 +1,113 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
+import React__default, { forwardRef, useRef, useEffect, useCallback } from 'react';
+import { ModalContext } from './ModalContext.js';
+
+function supportsRequestClose(dialogEl) {
+    return "requestClose" in dialogEl;
+}
+function supportsClosedBy(dialogEl) {
+    return "closedBy" in dialogEl;
+}
+function getActiveFocusableElement() {
+    return document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+}
+function isBackdropClick(event, dialogEl) {
+    return event.target === dialogEl;
+}
+function closeViaRequestOrDirect(dialogEl, dismissible) {
+    const dialogWithRequestClose = dialogEl;
+    if (supportsRequestClose(dialogEl)) {
+        dialogWithRequestClose.requestClose?.();
+    }
+    else if (dismissible) {
+        dialogEl.close();
+    }
+}
+const Modal = forwardRef(function Modal({ children, className, dismissible = false, id, onClose, open, size = "md", ...restProps }, ref) {
+    const stableId = useId();
+    const modalId = id || `tds-modal-${stableId}`;
+    const titleId = `${modalId}-title`;
+    const subtitleId = `${modalId}-subtitle`;
+    const dialogRef = useRef(null);
+    const previouslyFocusedElementRef = useRef(null);
+    const onCloseRef = useRef(onClose);
+    const requestClose = () => {
+        const dialogEl = dialogRef.current;
+        if (dialogEl)
+            closeViaRequestOrDirect(dialogEl, dismissible);
+    };
+    const contextValue = { dismissible, requestClose, subtitleId, titleId };
+    useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    const setDialogRef = useCallback((element) => {
+        dialogRef.current = element;
+        if (typeof ref === "function") {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+    }, [ref]);
+    useEffect(() => {
+        const dialogEl = dialogRef.current;
+        if (!dialogEl)
+            return;
+        if (open && !dialogEl.open) {
+            previouslyFocusedElementRef.current = getActiveFocusableElement();
+            dialogEl.showModal();
+        }
+        else if (!open && dialogEl.open) {
+            dialogEl.close();
+        }
+    }, [open]);
+    useEffect(() => {
+        const dialogEl = dialogRef.current;
+        if (!dialogEl)
+            return;
+        const handleClose = () => {
+            onCloseRef.current?.();
+            previouslyFocusedElementRef.current?.focus();
+            previouslyFocusedElementRef.current = null;
+        };
+        const handleCancel = (event) => {
+            if (!dismissible)
+                event.preventDefault();
+        };
+        dialogEl.addEventListener("close", handleClose);
+        dialogEl.addEventListener("cancel", handleCancel);
+        let handleBackdropClick;
+        if (supportsClosedBy(dialogEl)) {
+            dialogEl.setAttribute("closedby", dismissible ? "any" : "none");
+        }
+        else {
+            handleBackdropClick = (event) => {
+                if (isBackdropClick(event, dialogEl)) {
+                    closeViaRequestOrDirect(dialogEl, dismissible);
+                }
+            };
+            dialogEl.addEventListener("click", handleBackdropClick);
+        }
+        return () => {
+            dialogEl.removeEventListener("close", handleClose);
+            dialogEl.removeEventListener("cancel", handleCancel);
+            if (handleBackdropClick) {
+                dialogEl.removeEventListener("click", handleBackdropClick);
+            }
+        };
+    }, [dismissible]);
+    const combinedClassName = classNames("tds-modal", {
+        "tds-modal--lg": size === "lg",
+        "tds-modal--sm": size === "sm",
+        "tds-modal--xl": size === "xl",
+    }, className);
+    return (React__default.createElement("dialog", { ...restProps, ref: setDialogRef, "aria-describedby": subtitleId, "aria-labelledby": titleId, className: combinedClassName, id: modalId },
+        React__default.createElement(ModalContext.Provider, { value: contextValue }, children)));
+});
+Modal.displayName = "Modal";
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n  type DialogHTMLAttributes,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\"\n\nimport { ModalContext } from \"./ModalContext\"\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport interface ModalProps {\n  /**\n   * A `<ModalHeader>` followed by a `<ModalBody>` and a `<ModalFooter>`.\n   */\n  children: React.ReactNode\n  /** Default `false`. `true` enables Esc, backdrop-click, and the close button together. */\n  dismissible?: boolean\n  /** Fires on every dismissal — Esc, backdrop, close button, or programmatic. */\n  onClose?: () => void\n  /** Controls the dialog. Synced to `showModal()`/`close()`. */\n  open: boolean\n  /** Default `'md'`. */\n  size?: ModalSize\n}\n\nexport type ModalElementProps = Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  keyof ModalProps | \"onCancel\"\n> &\n  ModalProps\n\ntype DialogWithRequestClose = HTMLDialogElement & {\n  requestClose?: (returnValue?: string) => void\n}\n\nfunction supportsRequestClose(dialogEl: HTMLDialogElement): boolean {\n  return \"requestClose\" in dialogEl\n}\n\nfunction supportsClosedBy(dialogEl: HTMLDialogElement): boolean {\n  return \"closedBy\" in dialogEl\n}\n\nfunction getActiveFocusableElement(): HTMLElement | null {\n  return document.activeElement instanceof HTMLElement\n    ? document.activeElement\n    : null\n}\n\nfunction isBackdropClick(\n  event: MouseEvent,\n  dialogEl: HTMLDialogElement\n): boolean {\n  return event.target === dialogEl\n}\n\nfunction closeViaRequestOrDirect(\n  dialogEl: HTMLDialogElement,\n  dismissible: boolean\n) {\n  const dialogWithRequestClose = dialogEl as DialogWithRequestClose\n  if (supportsRequestClose(dialogEl)) {\n    dialogWithRequestClose.requestClose?.()\n  } else if (dismissible) {\n    dialogEl.close()\n  }\n}\n\nexport const Modal = forwardRef<HTMLDialogElement, ModalElementProps>(\n  function Modal(\n    {\n      children,\n      className,\n      dismissible = false,\n      id,\n      onClose,\n      open,\n      size = \"md\",\n      ...restProps\n    }: ModalElementProps,\n    ref\n  ) {\n    const stableId = useId()\n    const modalId = id || `tds-modal-${stableId}`\n    const titleId = `${modalId}-title`\n    const subtitleId = `${modalId}-subtitle`\n\n    const dialogRef = useRef<HTMLDialogElement | null>(null)\n    const previouslyFocusedElementRef = useRef<HTMLElement | null>(null)\n    const onCloseRef = useRef(onClose)\n\n    const requestClose = () => {\n      const dialogEl = dialogRef.current\n      if (dialogEl) closeViaRequestOrDirect(dialogEl, dismissible)\n    }\n\n    const contextValue = { dismissible, requestClose, subtitleId, titleId }\n\n    useEffect(() => {\n      onCloseRef.current = onClose\n    }, [onClose])\n\n    const setDialogRef = useCallback(\n      (element: HTMLDialogElement | null) => {\n        dialogRef.current = element\n        if (typeof ref === \"function\") {\n          ref(element)\n        } else if (ref) {\n          ref.current = element\n        }\n      },\n      [ref]\n    )\n\n    useEffect(() => {\n      const dialogEl = dialogRef.current\n      if (!dialogEl) return\n\n      if (open && !dialogEl.open) {\n        previouslyFocusedElementRef.current = getActiveFocusableElement()\n        dialogEl.showModal()\n      } else if (!open && dialogEl.open) {\n        dialogEl.close()\n      }\n    }, [open])\n\n    useEffect(() => {\n      const dialogEl = dialogRef.current\n      if (!dialogEl) return\n\n      const handleClose = () => {\n        onCloseRef.current?.()\n        previouslyFocusedElementRef.current?.focus()\n        previouslyFocusedElementRef.current = null\n      }\n\n      const handleCancel = (event: Event) => {\n        if (!dismissible) event.preventDefault()\n      }\n\n      dialogEl.addEventListener(\"close\", handleClose)\n      dialogEl.addEventListener(\"cancel\", handleCancel)\n\n      let handleBackdropClick: ((event: MouseEvent) => void) | undefined\n      if (supportsClosedBy(dialogEl)) {\n        dialogEl.setAttribute(\"closedby\", dismissible ? \"any\" : \"none\")\n      } else {\n        handleBackdropClick = (event) => {\n          if (isBackdropClick(event, dialogEl)) {\n            closeViaRequestOrDirect(dialogEl, dismissible)\n          }\n        }\n        dialogEl.addEventListener(\"click\", handleBackdropClick)\n      }\n\n      return () => {\n        dialogEl.removeEventListener(\"close\", handleClose)\n        dialogEl.removeEventListener(\"cancel\", handleCancel)\n        if (handleBackdropClick) {\n          dialogEl.removeEventListener(\"click\", handleBackdropClick)\n        }\n      }\n    }, [dismissible])\n\n    const combinedClassName = classNames(\n      \"tds-modal\",\n      {\n        \"tds-modal--lg\": size === \"lg\",\n        \"tds-modal--sm\": size === \"sm\",\n        \"tds-modal--xl\": size === \"xl\",\n      },\n      className\n    )\n\n    return (\n      <dialog\n        {...restProps}\n        ref={setDialogRef}\n        aria-describedby={subtitleId}\n        aria-labelledby={titleId}\n        className={combinedClassName}\n        id={modalId}\n      >\n        <ModalContext.Provider value={contextValue}>\n          {children}\n        </ModalContext.Provider>\n      </dialog>\n    )\n  }\n)\n\nModal.displayName = \"Modal\"\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import "./index.css";
+import React, { type HTMLAttributes } from "react";
+export interface ModalBodyProps {
+    /** Content to display between the header and footer. */
+    children: React.ReactNode;
+    /** Default `false`. `true` removes the body's horizontal padding. */
+    fullWidth?: boolean;
+}
+export type ModalBodyElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof ModalBodyProps> & ModalBodyProps;
+/**
+ * The body region of a `Modal` — holds arbitrary content between the header
+ * and footer.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+export declare function ModalBody({ children, className, fullWidth, ...restProps }: ModalBodyElementProps): React.JSX.Element;
+export declare namespace ModalBody {
+    var displayName: string;
+}
+//# sourceMappingURL=ModalBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,cAAc,CACrB,GACC,cAAc,CAAA;AAEhB;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAYvB;yBAjBe,SAAS"}

package/dist/components/modal/ModalBody.js

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import React__default from 'react';
+
+/**
+ * The body region of a `Modal` — holds arbitrary content between the header
+ * and footer.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}
+ */
+function ModalBody({ children, className, fullWidth, ...restProps }) {
+    const combinedClassName = classNames("tds-modal-body", { "tds-modal-body--full-width": fullWidth }, className);
+    return (React__default.createElement("div", { ...restProps, className: combinedClassName }, children));
+}
+ModalBody.displayName = "ModalBody";
+
+export { ModalBody };
+//# sourceMappingURL=ModalBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sources":["../../../src/components/modal/ModalBody.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes } from \"react\"\n\nexport interface ModalBodyProps {\n  /** Content to display between the header and footer. */\n  children: React.ReactNode\n  /** Default `false`. `true` removes the body's horizontal padding. */\n  fullWidth?: boolean\n}\n\nexport type ModalBodyElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof ModalBodyProps\n> &\n  ModalBodyProps\n\n/**\n * The body region of a `Modal` — holds arbitrary content between the header\n * and footer.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-modal--docs | Storybook Documentation}\n */\nexport function ModalBody({\n  children,\n  className,\n  fullWidth,\n  ...restProps\n}: ModalBodyElementProps) {\n  const combinedClassName = classNames(\n    \"tds-modal-body\",\n    { \"tds-modal-body--full-width\": fullWidth },\n    className\n  )\n\n  return (\n    <div {...restProps} className={combinedClassName}>\n      {children}\n    </div>\n  )\n}\n\nModalBody.displayName = \"ModalBody\"\n"],"names":["React"],"mappings":";;;AAkBA;;;;;;AAMG;AACG,SAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,gBAAgB,EAChB,EAAE,4BAA4B,EAAE,SAAS,EAAE,EAC3C,SAAS,CACV;IAED,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAA,EAC7C,QAAQ,CACL;AAEV;AAEA,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ModalContextValue {
+    dismissible: boolean;
+    requestClose: () => void;
+    subtitleId: string;
+    titleId: string;
+}
+export declare const ModalContext: React.Context<ModalContextValue | null>;
+//# sourceMappingURL=ModalContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,YAAY,yCAAsD,CAAA"}

package/dist/components/modal/ModalContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const ModalContext = React__default.createContext(null);
+
+export { ModalContext };
+//# sourceMappingURL=ModalContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sources":["../../../src/components/modal/ModalContext.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface ModalContextValue {\n  dismissible: boolean\n  requestClose: () => void\n  subtitleId: string\n  titleId: string\n}\n\nexport const ModalContext = React.createContext<ModalContextValue | null>(null)\n"],"names":["React"],"mappings":";;AASO,MAAM,YAAY,GAAGA,cAAK,CAAC,aAAa,CAA2B,IAAI;;;;"}