@planningcenter/tapestry 4.11.0 → 4.12.0

package/dist/components/pane/PaneFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneFooter.js","sources":["../../../src/components/pane/PaneFooter.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport type { DistributiveOmit } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneFooterProps {\n  /**\n   * Action buttons only — per Figma guidance, a footer should be avoided\n   * outside the documented exceptions (top-down flows like forms/wizards, or\n   * when a primary action can't live in the header). Laid out in a row; pass\n   * any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneFooterElementProps = DistributiveOmit<FlexProps, \"as\"> &\n  PaneFooterProps\n\n/**\n * The footer region of a `Pane`, intended for action buttons. Lays its\n * children out in a `Flex` row and accepts every `Flex` prop, so the caller\n * controls spacing and alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneFooter({\n  children,\n  className,\n  ...restProps\n}: PaneFooterElementProps) {\n  const combinedClassName = classNames(\"tds-pane-footer\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={2}\n      justify=\"end\"\n      {...restProps}\n      as=\"footer\"\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneFooter.displayName = \"PaneFooter\"\n"],"names":["React"],"mappings":";;;;AAoBA;;;;;;;AAOG;AACG,SAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAElE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,KAAK,EAAA,GACT,SAAS,EACb,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,IAEX,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"PaneFooter.js","sources":["../../../src/components/pane/PaneFooter.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport type { DistributiveOmit } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneFooterProps {\n  /**\n   * Action buttons only — per Figma guidance, a footer should be avoided\n   * outside the documented exceptions (top-down flows like forms/wizards, or\n   * when a primary action can't live in the header). Laid out in a row; pass\n   * any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneFooterElementProps = DistributiveOmit<FlexProps, \"as\"> &\n  PaneFooterProps\n\n/**\n * The footer region of a `Pane`, intended for action buttons. Lays its\n * children out in a `Flex` row and accepts every `Flex` prop, so the caller\n * controls spacing and alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneFooter({\n  children,\n  className,\n  ...restProps\n}: PaneFooterElementProps) {\n  const combinedClassName = classNames(\"tds-pane-footer\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={2}\n      justify=\"end\"\n      {...restProps}\n      as=\"footer\"\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneFooter.displayName = \"PaneFooter\"\n"],"names":["React"],"mappings":";;;;AAoBA;;;;;;;AAOG;AACG,SAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACW,EAAA;IACvB,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAElE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,KAAK,EAAA,GACT,SAAS,EACb,EAAE,EAAC,QAAQ,EACX,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,IAEX,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/pane/PaneHeader.d.ts

@@ -41,7 +41,7 @@ export declare function hasRenderableContent(content: React.ReactNode): boolean;
  * `Pane`.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 export declare function PaneHeader({ children, className, helpContent, level, title, ...restProps }: PaneHeaderElementProps): React.JSX.Element;
 export declare namespace PaneHeader {

package/dist/components/pane/PaneHeader.js

@@ -23,7 +23,7 @@ function hasRenderableContent(content) {
  * `Pane`.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 function PaneHeader({ children, className, helpContent, level = 2, title, ...restProps }) {
     const { paneId, titleId } = useContext(PaneContext) ?? {};

package/dist/components/pane/PaneHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport { HelperShelf } from \"@components/internal/helper-shelf\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 | 3\n\nexport interface PaneHeaderProps {\n  /**\n   * Trailing header content, rendered after the title — typically a\n   * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n   */\n  children?: React.ReactNode\n  /**\n   * Content for the collapsible helper shelf. When set, the header renders a\n   * \"More info\" trigger after the title and the shelf beneath it. The shelf\n   * starts closed.\n   */\n  helpContent?: React.ReactNode\n  /**\n   * Controls which heading element renders (`h2` or `h3`) so the title fits\n   * the document outline wherever the Pane is nested. Visual style stays\n   * constant at every level. Defaults to `2`; override to `3` when nesting a\n   * Pane one level deeper in the heading outline.\n   */\n  level?: PaneHeaderLevel\n  /**\n   * The pane's title. Optional only in the documented exception — e.g. a\n   * wizard step whose title already lives in a Stepper component.\n   */\n  title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneHeaderProps\n> &\n  PaneHeaderProps\n\n/**\n * Whether `content` produces visible output — skips `undefined`, `null`, `\"\"`,\n * and booleans (e.g. `isEditing && \"Edit settings\"`). Used for both `title`\n * and `helpContent`, and shared with `Pane` so the root's `role=\"region\"` /\n * `aria-labelledby` stays in sync with whether the heading actually renders.\n */\nexport function hasRenderableContent(content: React.ReactNode): boolean {\n  return (\n    content !== undefined &&\n    content !== null &&\n    content !== \"\" &&\n    typeof content !== \"boolean\"\n  )\n}\n\n/**\n * The header region of a `Pane` — renders the title, an optional help trigger\n * and shelf (`helpContent`), then any children, which should be a\n * `PaneHeaderActions` when the pane has actions. Must be rendered inside a\n * `Pane`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneHeader({\n  children,\n  className,\n  helpContent,\n  level = 2,\n  title,\n  ...restProps\n}: PaneHeaderElementProps) {\n  const { paneId, titleId } = useContext(PaneContext) ?? {}\n  const combinedClassName = classNames(\"tds-pane-header\", className)\n  const Heading = `h${level}` as \"h2\" | \"h3\"\n  const hasTitle = hasRenderableContent(title)\n  const hasHelpContent = hasRenderableContent(helpContent)\n\n  return (\n    <Flex\n      as=\"header\"\n      align=\"center\"\n      gap={2}\n      justify=\"space-between\"\n      direction=\"row\"\n      wrap=\"wrap\"\n      {...restProps}\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {hasTitle && (\n        <Heading className=\"tds-pane-title\" id={titleId}>\n          {title}\n        </Heading>\n      )}\n      {hasHelpContent && (\n        <HelperShelf\n          id={paneId && `${paneId}-help`}\n          labelledById={hasTitle ? titleId : undefined}\n        >\n          {helpContent}\n        </HelperShelf>\n      )}\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;;AA2CA;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,OAAwB,EAAA;IAC3D,QACE,OAAO,KAAK,SAAS;AACrB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,OAAO,KAAK,SAAS;AAEhC;AAEA;;;;;;;;AAQG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACzD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,MAAM,IAAI,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,EAC9B,YAAY,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,EAE3C,WAAW,CACA,CACf;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"PaneHeader.js","sources":["../../../src/components/pane/PaneHeader.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex } from \"@components/flex\"\nimport { HelperShelf } from \"@components/internal/helper-shelf\"\nimport classNames from \"classnames\"\nimport React, { type HTMLAttributes, useContext } from \"react\"\n\nimport { PaneContext } from \"./PaneContext\"\n\nexport type PaneHeaderLevel = 2 | 3\n\nexport interface PaneHeaderProps {\n  /**\n   * Trailing header content, rendered after the title — typically a\n   * `PaneHeaderActions` wrapping the buttons that affect the whole pane.\n   */\n  children?: React.ReactNode\n  /**\n   * Content for the collapsible helper shelf. When set, the header renders a\n   * \"More info\" trigger after the title and the shelf beneath it. The shelf\n   * starts closed.\n   */\n  helpContent?: React.ReactNode\n  /**\n   * Controls which heading element renders (`h2` or `h3`) so the title fits\n   * the document outline wherever the Pane is nested. Visual style stays\n   * constant at every level. Defaults to `2`; override to `3` when nesting a\n   * Pane one level deeper in the heading outline.\n   */\n  level?: PaneHeaderLevel\n  /**\n   * The pane's title. Optional only in the documented exception — e.g. a\n   * wizard step whose title already lives in a Stepper component.\n   */\n  title?: React.ReactNode\n}\n\nexport type PaneHeaderElementProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  keyof PaneHeaderProps\n> &\n  PaneHeaderProps\n\n/**\n * Whether `content` produces visible output — skips `undefined`, `null`, `\"\"`,\n * and booleans (e.g. `isEditing && \"Edit settings\"`). Used for both `title`\n * and `helpContent`, and shared with `Pane` so the root's `role=\"region\"` /\n * `aria-labelledby` stays in sync with whether the heading actually renders.\n */\nexport function hasRenderableContent(content: React.ReactNode): boolean {\n  return (\n    content !== undefined &&\n    content !== null &&\n    content !== \"\" &&\n    typeof content !== \"boolean\"\n  )\n}\n\n/**\n * The header region of a `Pane` — renders the title, an optional help trigger\n * and shelf (`helpContent`), then any children, which should be a\n * `PaneHeaderActions` when the pane has actions. Must be rendered inside a\n * `Pane`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneHeader({\n  children,\n  className,\n  helpContent,\n  level = 2,\n  title,\n  ...restProps\n}: PaneHeaderElementProps) {\n  const { paneId, titleId } = useContext(PaneContext) ?? {}\n  const combinedClassName = classNames(\"tds-pane-header\", className)\n  const Heading = `h${level}` as \"h2\" | \"h3\"\n  const hasTitle = hasRenderableContent(title)\n  const hasHelpContent = hasRenderableContent(helpContent)\n\n  return (\n    <Flex\n      as=\"header\"\n      align=\"center\"\n      gap={2}\n      justify=\"space-between\"\n      direction=\"row\"\n      wrap=\"wrap\"\n      {...restProps}\n      className={combinedClassName}\n      role=\"group\"\n    >\n      {hasTitle && (\n        <Heading className=\"tds-pane-title\" id={titleId}>\n          {title}\n        </Heading>\n      )}\n      {hasHelpContent && (\n        <HelperShelf\n          id={paneId && `${paneId}-help`}\n          labelledById={hasTitle ? titleId : undefined}\n        >\n          {helpContent}\n        </HelperShelf>\n      )}\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeader.displayName = \"PaneHeader\"\n"],"names":["React"],"mappings":";;;;;;AA2CA;;;;;AAKG;AACG,SAAU,oBAAoB,CAAC,OAAwB,EAAA;IAC3D,QACE,OAAO,KAAK,SAAS;AACrB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,OAAO,KAAK,SAAS;AAEhC;AAEA;;;;;;;;AAQG;SACa,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GAAG,CAAC,EACT,KAAK,EACL,GAAG,SAAS,EACW,EAAA;AACvB,IAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;IACzD,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,KAAK,EAAiB;AAC1C,IAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAExD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,MAAM,EAAA,GACP,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,EAAC,EAAE,EAAE,OAAO,EAAA,EAC5C,KAAK,CACE,CACX;QACA,cAAc,KACbA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,EAAE,EAAE,MAAM,IAAI,CAAA,EAAG,MAAM,CAAA,KAAA,CAAO,EAC9B,YAAY,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAA,EAE3C,WAAW,CACA,CACf;QACA,QAAQ,CACJ;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/pane/PaneHeaderActions.d.ts

@@ -15,7 +15,7 @@ export type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps;
  * alignment without reaching for a wrapper element.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 export declare function PaneHeaderActions({ children, className, ...restProps }: PaneHeaderActionsElementProps): React.JSX.Element;
 export declare namespace PaneHeaderActions {

package/dist/components/pane/PaneHeaderActions.js

@@ -8,7 +8,7 @@ import React__default from 'react';
  * alignment without reaching for a wrapper element.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}
  */
 function PaneHeaderActions({ children, className, ...restProps }) {
     const combinedClassName = classNames("tds-pane-header-actions", className);

package/dist/components/pane/PaneHeaderActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaneHeaderActions.js","sources":["../../../src/components/pane/PaneHeaderActions.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneHeaderActionsProps {\n  /**\n   * The actions themselves — buttons that affect the whole pane (e.g. Save /\n   * Cancel). Laid out in a row; pass any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps\n\n/**\n * The trailing action cluster of a `PaneHeader`. Wraps its children in a\n * `Flex` row and accepts every `Flex` prop, so the caller controls spacing and\n * alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-pane--docs | Storybook Documentation}\n */\nexport function PaneHeaderActions({\n  children,\n  className,\n  ...restProps\n}: PaneHeaderActionsElementProps) {\n  const combinedClassName = classNames(\"tds-pane-header-actions\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={1}\n      {...restProps}\n      className={combinedClassName}\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeaderActions.displayName = \"PaneHeaderActions\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,MAAM,iBAAiB,GAAG,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAE1E,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EAAA,GACF,SAAS,EACb,SAAS,EAAE,iBAAiB,EAAA,EAE3B,QAAQ,CACJ;AAEX;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"PaneHeaderActions.js","sources":["../../../src/components/pane/PaneHeaderActions.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { Flex, type FlexProps } from \"@components/flex\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nexport interface PaneHeaderActionsProps {\n  /**\n   * The actions themselves — buttons that affect the whole pane (e.g. Save /\n   * Cancel). Laid out in a row; pass any `Flex` prop to adjust the layout.\n   */\n  children: React.ReactNode\n}\n\nexport type PaneHeaderActionsElementProps = FlexProps & PaneHeaderActionsProps\n\n/**\n * The trailing action cluster of a `PaneHeader`. Wraps its children in a\n * `Flex` row and accepts every `Flex` prop, so the caller controls spacing and\n * alignment without reaching for a wrapper element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/layout-pane--docs | Storybook Documentation}\n */\nexport function PaneHeaderActions({\n  children,\n  className,\n  ...restProps\n}: PaneHeaderActionsElementProps) {\n  const combinedClassName = classNames(\"tds-pane-header-actions\", className)\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"row\"\n      gap={1}\n      {...restProps}\n      className={combinedClassName}\n    >\n      {children}\n    </Flex>\n  )\n}\n\nPaneHeaderActions.displayName = \"PaneHeaderActions\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACkB,EAAA;IAC9B,MAAM,iBAAiB,GAAG,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAE1E,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,CAAC,EAAA,GACF,SAAS,EACb,SAAS,EAAE,iBAAiB,EAAA,EAE3B,QAAQ,CACJ;AAEX;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/sidenav/defineElements.js

@@ -1,4 +1,4 @@
-import '../../packages/tapestry-wc/dist/components/p-B2xqMgNQ.js';
+import '../../packages/tapestry-wc/dist/components/p-CBFtMIxJ.js';
 import { defineCustomElement } from '../../packages/tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/components/time-field/TimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,IAAI,EACT,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IACtC,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAyDvB"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,IAAI,EACT,KAAK,aAAa,EACnB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAGhF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAML,KAAK,cAAc,IAAI,kBAAkB,EAC1C,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,0GAA0G;IAC1G,YAAY,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IACtC,gGAAgG;IAChG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mGAAmG;IACnG,GAAG,CAAC,EAAE,cAAc,GAAG,MAAM,CAAA;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,KAAK,wBAAwB,GACzB,UAAU,GACV,aAAa,GACb,kBAAkB,GAClB,yBAAyB,GACzB,MAAM,CAAA;AAEV,KAAK,2BAA2B,GAC5B,cAAc,GACd,WAAW,GACX,MAAM,GACN,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,kBAAkB,CAAC,cAAc,CAAC,EAClC,cAAc,EACd,wBAAwB,EACxB,2BAA2B,CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB,qBA6DvB"}

package/dist/components/time-field/TimeField.js

@@ -1,7 +1,9 @@
 import { parseTime as $58246871e4652552$export$c9698ec7f05a07e1 } from './../../ext/@internationalized/date/dist/private/string.js';
 import Icon from '../../utilities/Icon.js';
+import { useDateFieldLocale } from '../../utilities/useDateFieldLocale.js';
 import classNames from 'classnames';
 import React from 'react';
+import { I18nProvider } from 'react-aria/I18nProvider';
 import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'react-aria-components/TimeField';
 
 /**
@@ -22,11 +24,13 @@ function TimeField({ className, defaultValue, description, disabled, forceLeadin
         "tds-field--lg": size === "lg",
         "tds-time-field--lg": size === "lg",
     }, className);
+    const dateFieldLocale = useDateFieldLocale();
     return (React.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: asTimeFieldValue(defaultValue), granularity: "minute", isDisabled: disabled, isReadOnly: readOnly, isRequired: required, maxValue: asTimeFieldValue(max), minValue: asTimeFieldValue(min), shouldForceLeadingZeros: forceLeadingZeros },
         !hideLabel && React.createElement(Label, { className: "tds-field-label" }, label),
-        React.createElement(DateInput, { "aria-invalid": invalid || undefined, className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { "aria-invalid": invalid || undefined, className: segment.type === "literal"
-                ? "tds-field-date-segment-separator"
-                : "tds-field-date-segment", segment: segment }))),
+        React.createElement(I18nProvider, { locale: dateFieldLocale },
+            React.createElement(DateInput, { "aria-invalid": invalid || undefined, className: "tds-field-control tds-time-field-input" }, (segment) => (React.createElement(DateSegment, { "aria-invalid": invalid || undefined, className: segment.type === "literal"
+                    ? "tds-field-date-segment-separator"
+                    : "tds-field-date-segment", segment: segment })))),
         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))));

package/dist/components/time-field/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  type CalendarDateTime,\n  parseTime,\n  type Time,\n  type ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"12:00\"`). */\n  defaultValue?: TimeFieldValue | string\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: React.ReactNode\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: 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  /** The maximum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"17:00\"`). */\n  max?: TimeFieldValue | string\n  /** The minimum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"09:00\"`). */\n  min?: TimeFieldValue | string\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 time field. */\n  size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n  | \"children\"\n  | \"granularity\"\n  | \"placeholderValue\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"name\"\n  | \"onChange\"\n  | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n  AriaTimeFieldProps<TimeFieldValue>,\n  TimeFieldProps,\n  AriaTimeFieldPropsToOmit,\n  AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-time-field\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-time-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={asTimeFieldValue(defaultValue)}\n      granularity=\"minute\"\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={asTimeFieldValue(max)}\n      minValue={asTimeFieldValue(min)}\n      shouldForceLeadingZeros={forceLeadingZeros}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <DateInput\n        aria-invalid={invalid || undefined}\n        className=\"tds-field-control tds-time-field-input\"\n      >\n        {(segment) => (\n          <DateSegment\n            aria-invalid={invalid || undefined}\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      {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    </AriaTimeField>\n  )\n}\n\nfunction asTimeFieldValue(\n  value: TimeFieldValue | string | undefined\n): TimeFieldValue | undefined {\n  if (typeof value === \"string\") {\n    return parseTime(value)\n  }\n  return value ?? undefined\n}\n"],"names":["AriaTimeField","parseTime"],"mappings":";;;;;;AA0EA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;IAED,QACE,KAAA,CAAA,aAAA,CAACA,WAAa,EAAA,EAAA,GACR,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,gBAAgB,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACM,OAAO,IAAI,SAAS,EAClC,SAAS,EAAC,wCAAwC,EAAA,EAEjD,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,cAAA,EACI,OAAO,IAAI,SAAS,EAClC,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;AAEA,SAAS,gBAAgB,CACvB,KAA0C,EAAA;AAE1C,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAOC,yCAAS,CAAC,KAAK,CAAC;IACzB;IACA,OAAO,KAAK,IAAI,SAAS;AAC3B;;;;"}
+{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"../field/index.css\"\nimport \"./index.css\"\n\nimport {\n  type CalendarDateTime,\n  parseTime,\n  type Time,\n  type ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport { useDateFieldLocale } from \"@utilities/useDateFieldLocale\"\nimport classNames from \"classnames\"\nimport React from \"react\"\nimport { I18nProvider } from \"react-aria/I18nProvider\"\nimport {\n  DateInput,\n  DateSegment,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n} from \"react-aria-components/TimeField\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n  /** The default value for the field, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"12:00\"`). */\n  defaultValue?: TimeFieldValue | string\n  /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n  description?: React.ReactNode\n  /** Disables the field. */\n  disabled?: boolean\n  /** If `true`, always shows leading zeros in the hour field. */\n  forceLeadingZeros?: 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  /** The maximum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"17:00\"`). */\n  max?: TimeFieldValue | string\n  /** The minimum allowed time, as a `TimeFieldValue` or an ISO 8601 time string (e.g. `\"09:00\"`). */\n  min?: TimeFieldValue | string\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 time field. */\n  size?: TimeFieldSize\n}\n\ntype AriaTimeFieldPropsToOmit =\n  | \"children\"\n  | \"granularity\"\n  | \"placeholderValue\"\n  | \"shouldForceLeadingZeros\"\n  | \"slot\"\n\ntype AriaTimeFieldPropsToInclude =\n  | \"hideTimeZone\"\n  | \"hourCycle\"\n  | \"name\"\n  | \"onChange\"\n  | \"value\"\n\nexport type TimeFieldElementProps = CombineAriaPropsWithCustomProps<\n  AriaTimeFieldProps<TimeFieldValue>,\n  TimeFieldProps,\n  AriaTimeFieldPropsToOmit,\n  AriaTimeFieldPropsToInclude\n>\n\n/**\n * A time field component allows users to enter and edit time values as individual\n * segments. Each segment supports keyboard entry, increment/decrement\n * with arrow keys, and respects the user's locale (12- vs 24-hour clock),\n * which can be overridden with `hourCycle`.\n *\n * Values are `Time`, `CalendarDateTime`, or `ZonedDateTime` from\n * `@internationalized/date`. Restrict the allowed range with `min`/`max`.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-timefield--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport function TimeField({\n  className,\n  defaultValue,\n  description,\n  disabled,\n  forceLeadingZeros,\n  hideLabel,\n  invalid,\n  label,\n  max,\n  min,\n  readOnly,\n  required,\n  size = \"md\",\n  ...restProps\n}: TimeFieldElementProps) {\n  const combinedClassName = classNames(\n    \"tds-field tds-time-field\",\n    {\n      \"tds-field--lg\": size === \"lg\",\n      \"tds-time-field--lg\": size === \"lg\",\n    },\n    className\n  )\n\n  const dateFieldLocale = useDateFieldLocale()\n\n  return (\n    <AriaTimeField\n      {...restProps}\n      aria-label={hideLabel ? label : undefined}\n      className={combinedClassName}\n      defaultValue={asTimeFieldValue(defaultValue)}\n      granularity=\"minute\"\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isRequired={required}\n      maxValue={asTimeFieldValue(max)}\n      minValue={asTimeFieldValue(min)}\n      shouldForceLeadingZeros={forceLeadingZeros}\n    >\n      {!hideLabel && <Label className=\"tds-field-label\">{label}</Label>}\n      <I18nProvider locale={dateFieldLocale}>\n        <DateInput\n          aria-invalid={invalid || undefined}\n          className=\"tds-field-control tds-time-field-input\"\n        >\n          {(segment) => (\n            <DateSegment\n              aria-invalid={invalid || undefined}\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      </I18nProvider>\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    </AriaTimeField>\n  )\n}\n\nfunction asTimeFieldValue(\n  value: TimeFieldValue | string | undefined\n): TimeFieldValue | undefined {\n  if (typeof value === \"string\") {\n    return parseTime(value)\n  }\n  return value ?? undefined\n}\n"],"names":["AriaTimeField","parseTime"],"mappings":";;;;;;;;AA4EA;;;;;;;;;;;;AAYG;AACG,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,0BAA0B,EAC1B;QACE,eAAe,EAAE,IAAI,KAAK,IAAI;QAC9B,oBAAoB,EAAE,IAAI,KAAK,IAAI;KACpC,EACD,SAAS,CACV;AAED,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE;IAE5C,QACE,KAAA,CAAA,aAAA,CAACA,WAAa,EAAA,EAAA,GACR,SAAS,EAAA,YAAA,EACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,gBAAgB,CAAC,YAAY,CAAC,EAC5C,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,QAAQ,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC/B,uBAAuB,EAAE,iBAAiB,EAAA;QAEzC,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,EAAE,KAAK,CAAS;AACjE,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA;AACnC,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,cAAA,EACM,OAAO,IAAI,SAAS,EAClC,SAAS,EAAC,wCAAwC,EAAA,EAEjD,CAAC,OAAO,MACP,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,cAAA,EACI,OAAO,IAAI,SAAS,EAClC,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,sBAAE;sBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS,CACC;AACd,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,aAAa,EAAA;YAElB,KAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,oCAAoC,EAC9C,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;AAEA,SAAS,gBAAgB,CACvB,KAA0C,EAAA;AAE1C,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAOC,yCAAS,CAAC,KAAK,CAAC;IACzB;IACA,OAAO,KAAK,IAAI,SAAS;AAC3B;;;;"}

package/dist/index.css

@@ -2770,33 +2770,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     border-color:var(--tds-btn-border-color-disabled);
   }
 
-.tds-loading-spinner{
-  position:absolute;
-  right:0;
-  left:0;
-  visibility:var(--tds-loading-spinner-visibility, hidden);
-  width:var(--tds-loading-spinner-size, 1.25em);
-  height:var(--tds-loading-spinner-size, 1.25em);
-  margin:auto;
-  border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
-  border-top-color:var(--tds-loading-spinner-color, currentcolor);
-  border-radius:50%;
-  animation:spinner-rotate 500ms infinite linear;
-  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
-}
-
-@keyframes spinner-rotate{
-  to{
-    transform:rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce){
-  [class*="--loading"] .tds-loading-spinner{
-    --tds-loading-spinner-animation-play-state:paused;
-  }
-}
-
 .tds-tooltip{
   --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
   --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
@@ -2871,6 +2844,33 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   transform:var(--tds-tooltip-arrow-rotate);
 }
 
+.tds-loading-spinner{
+  position:absolute;
+  right:0;
+  left:0;
+  visibility:var(--tds-loading-spinner-visibility, hidden);
+  width:var(--tds-loading-spinner-size, 1.25em);
+  height:var(--tds-loading-spinner-size, 1.25em);
+  margin:auto;
+  border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
+  border-top-color:var(--tds-loading-spinner-color, currentcolor);
+  border-radius:50%;
+  animation:spinner-rotate 500ms infinite linear;
+  animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
+}
+
+@keyframes spinner-rotate{
+  to{
+    transform:rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce){
+  [class*="--loading"] .tds-loading-spinner{
+    --tds-loading-spinner-animation-play-state:paused;
+  }
+}
+
 .tds-button-group{
   display:inline-flex;
 }
@@ -3388,6 +3388,15 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-loading-spinner-visibility:visible;
   --tds-loading-spinner-animation-play-state:running;
 }
+
+.tds-combo-box-loading-label--hidden{
+  position:absolute;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
 .tds-combo-box-list-section:not(:first-child){
     margin-block-start:var(--t-spacing-half);
   }
@@ -5272,6 +5281,139 @@ a.tds-dropdown-item:is(:hover, :active){
     margin-inline-end:var(--tds-number-stepper-button-offset);
   }
 
+.tds-pane{
+  --tds-pane-background-color:var(--t-surface-color-card);
+  --tds-pane-border-radius:var(--t-border-radius-lg);
+  --tds-pane-border-color:var(--t-border-color);
+
+  --tds-pane-header-padding-block:var(--t-spacing-1-half);
+  --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
+
+  --tds-pane-title-color:var(--t-text-color-headline);
+  --tds-pane-title-font-size:var(--t-font-size-lg);
+  --tds-pane-title-font-weight:var(--t-font-weight-medium);
+  --tds-pane-title-line-height:1.4;
+
+  --tds-pane-body-padding:var(--t-spacing-3);
+
+  --tds-pane-footer-padding-block:var(--t-spacing-2);
+  --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
+
+  --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
+  --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
+
+  background:var(--tds-pane-background-color);
+  border-radius:var(--tds-pane-border-radius);
+  border:var(--t-border-width) solid var(--tds-pane-border-color);
+  display:flex;
+  flex-direction:column;
+}
+
+.tds-pane-header{
+  border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
+  padding-block:var(--tds-pane-header-padding-block);
+  padding-inline:var(--tds-pane-header-padding-inline);
+}
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf-trigger{
+    margin-inline:calc(-1 * var(--t-spacing-1)) auto;
+  }
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf{
+    flex-basis:100%;
+    order:1;
+  }
+
+.tds-pane-header:has( > tds-helper-shelf){
+    row-gap:var(--tds-pane-header-padding-block);
+    padding-block-end:0;
+  }
+
+.tds-pane-header  > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
+    font-size:var(--t-font-size-md);
+    margin-block-end:var(--tds-pane-header-padding-block);
+  }
+
+.tds-pane-title{
+  color:var(--tds-pane-title-color);
+  font-size:var(--tds-pane-title-font-size);
+  font-weight:var(--tds-pane-title-font-weight);
+  line-height:var(--tds-pane-title-line-height);
+  margin:0;
+}
+
+.tds-pane-body{
+  padding:var(--tds-pane-body-padding);
+}
+
+.tds-pane-footer{
+  padding-block-end:var(--tds-pane-footer-padding-block);
+  padding-inline:var(--tds-pane-footer-padding-inline);
+}
+
+.tds-pane-divider{
+  border:0;
+  border-top:var(--t-border-width) solid var(--tds-pane-border-color);
+  margin-block:var(--tds-pane-divider-margin-block);
+  margin-inline:var(--tds-pane-divider-margin-inline);
+}
+
+.tds-pane-divider.tds-pane-divider--inset{
+    margin-inline:0;
+  }
+
+tds-helper-shelf{
+  display:contents;
+}
+
+.tds-helper-shelf{
+  --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
+  --tds-helper-shelf-border-radius:var(--t-border-radius-md);
+  --tds-helper-shelf-color:var(--t-text-color);
+  --tds-helper-shelf-font-size:var(--t-font-size-sm);
+  --tds-helper-shelf-line-height:1.5;
+  --tds-helper-shelf-padding:var(--t-spacing-1);
+
+  height:0;
+  overflow:hidden;
+  transition:height var(--t-duration-300) var(--t-ease-in);
+}
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-helper-shelf{
+    transition:none;
+}
+  }
+
+.tds-helper-shelf--expanded{
+  height:auto;
+  transition-timing-function:var(--t-ease-out);
+}
+
+@supports (interpolate-size: allow-keywords){
+  .tds-helper-shelf{
+    interpolate-size:allow-keywords;
+  }
+}
+
+.tds-helper-shelf-content{
+  padding:var(--tds-helper-shelf-padding);
+  font-size:var(--tds-helper-shelf-font-size);
+  line-height:var(--tds-helper-shelf-line-height);
+  color:var(--tds-helper-shelf-color);
+  background:var(--tds-helper-shelf-background-color);
+  border-radius:var(--tds-helper-shelf-border-radius);
+}
+
+.tds-helper-shelf-trigger{
+  --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
+}
+
+.tds-helper-shelf-trigger[aria-expanded="true"]{
+    --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
+  }
+
 .tds-popover{
   max-inline-size:24rem;
   overflow:auto;