@planningcenter/tapestry 3.6.0 → 3.7.0-rc.0

package/dist/components/flex/Flex.d.ts

@@ -18,7 +18,6 @@ interface FlexSizing {
     /** The flex shrink factor of this flex item. */
     shrink?: 0 | 1;
 }
-export type FlexResponsive = Partial<Record<Breakpoint, Omit<FlexBaseProps, "as" | "expand" | "inline" | "responsive">>>;
 export type FlexElement = "article" | "aside" | "dd" | "div" | "dl" | "dt" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "ul";
 type FlexBaseProps = {
     /** The alignment of children along the cross axis. */
@@ -44,8 +43,11 @@ type FlexBaseProps = {
     /** The padding on the inline axis. Overrides `padding` on the inline axis. Tapestry spacing scale. */
     paddingInline?: Spacing;
     /**
-     * Responsive overrides. Mobile-first with breakpoints as keys.
+     * Responsive overrides. Accepts viewport breakpoint keys and/or a
+     * `container` map of container query conditions.
+     * **`container` is experimental.**
      * @example { md: { direction: "row", gap: 2 } }
+     * @example { container: { "(inline-size > 20rem)": { direction: "row" } } }
      */
     responsive?: FlexResponsive;
     /** The row gap between children. Overrides `gap` on the row axis. Tapestry spacing scale. */
@@ -53,6 +55,20 @@ type FlexBaseProps = {
     /** Whether children are forced onto one line or can wrap onto multiple lines. */
     wrap?: "nowrap" | "wrap" | "wrap-reverse";
 } & (FlexSizingExpand | FlexSizing);
+export type FlexResponsiveValue = Omit<FlexBaseProps, "as" | "expand" | "inline" | "responsive">;
+export type FlexResponsive = Partial<Record<Breakpoint, FlexResponsiveValue>> & {
+    /**
+     * Container query overrides. Keys are `inline-size` condition strings —
+     * optionally prefixed with a named container — and values are the props to
+     * apply when the condition is met. Requires an ancestor with
+     * `container-type: inline-size` (or equivalent) to establish the
+     * containment context.
+     * @experimental
+     * @example { "(inline-size > 20rem)": { direction: "row" } }
+     * @example { "sidebar (inline-size >= 16rem)": { gap: 1 } }
+     */
+    container?: Record<string, FlexResponsiveValue>;
+};
 export type FlexProps = FlexBaseProps & Omit<React.HTMLAttributes<HTMLElement>, keyof FlexBaseProps>;
 interface FlexComponent {
     (props: FlexProps & React.RefAttributes<HTMLElement>): React.ReactElement | null;
@@ -62,7 +78,7 @@ interface FlexComponent {
  * A flexbox layout primitive with token-constrained spacing.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-flex--docs | Storybook Documentation}
  */
 export declare const Flex: FlexComponent;
 export {};

package/dist/components/flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gJAAgJ;IAChJ,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,MAAM,CAAC,EAAE,KAAK,CAAA;CACf;AAED,UAAU,UAAU;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACZ,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CACf;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,MAAM,CACJ,UAAU,EACV,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,CAAC,CAC/D,CACF,CAAA;AAED,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,QAAQ,GACR,QAAQ,GACR,IAAI,GACJ,MAAM,GACN,KAAK,GACL,IAAI,GACJ,SAAS,GACT,IAAI,CAAA;AAER,KAAK,aAAa,GAAG;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IAC3D,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IACxE,kCAAkC;IAClC,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,mGAAmG;IACnG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAA;IAC/D,wDAAwD;IACxD,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,0DAA0D;IAC1D,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,iFAAiF;IACjF,OAAO,CAAC,EACJ,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,GACd,cAAc,CAAA;IAClB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oGAAoG;IACpG,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,6FAA6F;IAC7F,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iFAAiF;IACjF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;CAC1C,GAAG,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAA;AAEnC,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,aAAa,CAAC,CAAA;AAE9D,UAAU,aAAa;IACrB,CACE,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,GAClD,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,EAgIA,aAAa,CAAA"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/flex/Flex.tsx"],"names":[],"mappings":"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"}

package/dist/components/flex/Flex.js

@@ -1,3 +1,4 @@
+import { useContainerClass } from '../../utilities/useContainerClass.js';
 import classNames from 'classnames';
 import React__default, { forwardRef } from 'react';
 
@@ -5,12 +6,13 @@ import React__default, { forwardRef } from 'react';
  * A flexbox layout primitive with token-constrained spacing.
  *
  * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-flex--docs | Storybook Documentation}
  */
 const Flex = forwardRef(function Flex({ align, alignSelf, as: Element = "div", basis, className, columnGap, direction, expand, gap, grow, inline, justify, padding, paddingBlock, paddingInline, responsive, rowGap, shrink, wrap, ...rest }, ref) {
-    const { xs, sm, md, lg, xl } = responsive ?? {};
+    const { xs, sm, md, lg, xl, container } = responsive ?? {};
+    const containerClass = useContainerClass(container);
     const Tag = Element;
-    return (React__default.createElement(Tag, { ...rest, className: classNames("tds-flex", className), ref: ref, "data-flex-align": align, "data-flex-align-self": alignSelf, "data-flex-basis": basis, "data-flex-direction": direction, "data-flex-expand": expand || undefined, "data-flex-gap": gap, "data-flex-row-gap": rowGap, "data-flex-column-gap": columnGap, "data-flex-grow": grow, "data-flex-inline": inline || undefined, "data-flex-justify": justify, "data-flex-shrink": shrink, "data-flex-wrap": wrap, "data-padding": padding, "data-padding-block": paddingBlock, "data-padding-inline": paddingInline, "data-flex-align-xs": xs?.align, "data-flex-align-self-xs": xs?.alignSelf, "data-flex-basis-xs": xs?.basis, "data-flex-direction-xs": xs?.direction, "data-flex-gap-xs": xs?.gap, "data-flex-row-gap-xs": xs?.rowGap, "data-flex-column-gap-xs": xs?.columnGap, "data-flex-grow-xs": xs?.grow, "data-flex-justify-xs": xs?.justify, "data-flex-shrink-xs": xs?.shrink, "data-flex-wrap-xs": xs?.wrap, "data-padding-xs": xs?.padding, "data-padding-block-xs": xs?.paddingBlock, "data-padding-inline-xs": xs?.paddingInline, "data-flex-align-sm": sm?.align, "data-flex-align-self-sm": sm?.alignSelf, "data-flex-basis-sm": sm?.basis, "data-flex-direction-sm": sm?.direction, "data-flex-gap-sm": sm?.gap, "data-flex-row-gap-sm": sm?.rowGap, "data-flex-column-gap-sm": sm?.columnGap, "data-flex-grow-sm": sm?.grow, "data-flex-justify-sm": sm?.justify, "data-flex-shrink-sm": sm?.shrink, "data-flex-wrap-sm": sm?.wrap, "data-padding-sm": sm?.padding, "data-padding-block-sm": sm?.paddingBlock, "data-padding-inline-sm": sm?.paddingInline, "data-flex-align-md": md?.align, "data-flex-align-self-md": md?.alignSelf, "data-flex-basis-md": md?.basis, "data-flex-direction-md": md?.direction, "data-flex-gap-md": md?.gap, "data-flex-row-gap-md": md?.rowGap, "data-flex-column-gap-md": md?.columnGap, "data-flex-grow-md": md?.grow, "data-flex-justify-md": md?.justify, "data-flex-shrink-md": md?.shrink, "data-flex-wrap-md": md?.wrap, "data-padding-md": md?.padding, "data-padding-block-md": md?.paddingBlock, "data-padding-inline-md": md?.paddingInline, "data-flex-align-lg": lg?.align, "data-flex-align-self-lg": lg?.alignSelf, "data-flex-basis-lg": lg?.basis, "data-flex-direction-lg": lg?.direction, "data-flex-gap-lg": lg?.gap, "data-flex-row-gap-lg": lg?.rowGap, "data-flex-column-gap-lg": lg?.columnGap, "data-flex-grow-lg": lg?.grow, "data-flex-justify-lg": lg?.justify, "data-flex-shrink-lg": lg?.shrink, "data-flex-wrap-lg": lg?.wrap, "data-padding-lg": lg?.padding, "data-padding-block-lg": lg?.paddingBlock, "data-padding-inline-lg": lg?.paddingInline, "data-flex-align-xl": xl?.align, "data-flex-align-self-xl": xl?.alignSelf, "data-flex-basis-xl": xl?.basis, "data-flex-direction-xl": xl?.direction, "data-flex-gap-xl": xl?.gap, "data-flex-row-gap-xl": xl?.rowGap, "data-flex-column-gap-xl": xl?.columnGap, "data-flex-grow-xl": xl?.grow, "data-flex-justify-xl": xl?.justify, "data-flex-shrink-xl": xl?.shrink, "data-flex-wrap-xl": xl?.wrap, "data-padding-xl": xl?.padding, "data-padding-block-xl": xl?.paddingBlock, "data-padding-inline-xl": xl?.paddingInline }));
+    return (React__default.createElement(Tag, { ...rest, className: classNames("tds-flex", containerClass, className), ref: ref, "data-flex-align": align, "data-flex-align-self": alignSelf, "data-flex-basis": basis, "data-flex-direction": direction, "data-flex-expand": expand || undefined, "data-flex-gap": gap, "data-flex-row-gap": rowGap, "data-flex-column-gap": columnGap, "data-flex-grow": grow, "data-flex-inline": inline || undefined, "data-flex-justify": justify, "data-flex-shrink": shrink, "data-flex-wrap": wrap, "data-padding": padding, "data-padding-block": paddingBlock, "data-padding-inline": paddingInline, "data-flex-align-xs": xs?.align, "data-flex-align-self-xs": xs?.alignSelf, "data-flex-basis-xs": xs?.basis, "data-flex-direction-xs": xs?.direction, "data-flex-gap-xs": xs?.gap, "data-flex-row-gap-xs": xs?.rowGap, "data-flex-column-gap-xs": xs?.columnGap, "data-flex-grow-xs": xs?.grow, "data-flex-justify-xs": xs?.justify, "data-flex-shrink-xs": xs?.shrink, "data-flex-wrap-xs": xs?.wrap, "data-padding-xs": xs?.padding, "data-padding-block-xs": xs?.paddingBlock, "data-padding-inline-xs": xs?.paddingInline, "data-flex-align-sm": sm?.align, "data-flex-align-self-sm": sm?.alignSelf, "data-flex-basis-sm": sm?.basis, "data-flex-direction-sm": sm?.direction, "data-flex-gap-sm": sm?.gap, "data-flex-row-gap-sm": sm?.rowGap, "data-flex-column-gap-sm": sm?.columnGap, "data-flex-grow-sm": sm?.grow, "data-flex-justify-sm": sm?.justify, "data-flex-shrink-sm": sm?.shrink, "data-flex-wrap-sm": sm?.wrap, "data-padding-sm": sm?.padding, "data-padding-block-sm": sm?.paddingBlock, "data-padding-inline-sm": sm?.paddingInline, "data-flex-align-md": md?.align, "data-flex-align-self-md": md?.alignSelf, "data-flex-basis-md": md?.basis, "data-flex-direction-md": md?.direction, "data-flex-gap-md": md?.gap, "data-flex-row-gap-md": md?.rowGap, "data-flex-column-gap-md": md?.columnGap, "data-flex-grow-md": md?.grow, "data-flex-justify-md": md?.justify, "data-flex-shrink-md": md?.shrink, "data-flex-wrap-md": md?.wrap, "data-padding-md": md?.padding, "data-padding-block-md": md?.paddingBlock, "data-padding-inline-md": md?.paddingInline, "data-flex-align-lg": lg?.align, "data-flex-align-self-lg": lg?.alignSelf, "data-flex-basis-lg": lg?.basis, "data-flex-direction-lg": lg?.direction, "data-flex-gap-lg": lg?.gap, "data-flex-row-gap-lg": lg?.rowGap, "data-flex-column-gap-lg": lg?.columnGap, "data-flex-grow-lg": lg?.grow, "data-flex-justify-lg": lg?.justify, "data-flex-shrink-lg": lg?.shrink, "data-flex-wrap-lg": lg?.wrap, "data-padding-lg": lg?.padding, "data-padding-block-lg": lg?.paddingBlock, "data-padding-inline-lg": lg?.paddingInline, "data-flex-align-xl": xl?.align, "data-flex-align-self-xl": xl?.alignSelf, "data-flex-basis-xl": xl?.basis, "data-flex-direction-xl": xl?.direction, "data-flex-gap-xl": xl?.gap, "data-flex-row-gap-xl": xl?.rowGap, "data-flex-column-gap-xl": xl?.columnGap, "data-flex-grow-xl": xl?.grow, "data-flex-justify-xl": xl?.justify, "data-flex-shrink-xl": xl?.shrink, "data-flex-wrap-xl": xl?.wrap, "data-padding-xl": xl?.padding, "data-padding-block-xl": xl?.paddingBlock, "data-padding-inline-xl": xl?.paddingInline }));
 });
 Flex.displayName = "Flex";
 

package/dist/components/flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import \"../../css/layout.css\"\n\nimport { type Breakpoint } from \"@utilities/breakpoints\"\nimport { type Spacing } from \"@utilities/spacingTokens\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\ninterface FlexSizingExpand {\n  basis?: never\n  /** A convenience prop that sets `flex: 1 1 0%; min-width: 0` to fill remaining space. Mutually exclusive with `grow`, `shrink`, and `basis`. */\n  expand?: true\n  grow?: never\n  shrink?: never\n}\n\ninterface FlexSizing {\n  /** The initial main size of this flex item before space is distributed. */\n  basis?: 0 | \"auto\" | \"100%\"\n  expand?: never\n  /** The flex grow factor of this flex item. */\n  grow?: 0 | 1\n  /** The flex shrink factor of this flex item. */\n  shrink?: 0 | 1\n}\n\nexport type FlexResponsive = Partial<\n  Record<\n    Breakpoint,\n    Omit<FlexBaseProps, \"as\" | \"expand\" | \"inline\" | \"responsive\">\n  >\n>\n\nexport type FlexElement =\n  | \"article\"\n  | \"aside\"\n  | \"dd\"\n  | \"div\"\n  | \"dl\"\n  | \"dt\"\n  | \"footer\"\n  | \"header\"\n  | \"li\"\n  | \"main\"\n  | \"nav\"\n  | \"ol\"\n  | \"section\"\n  | \"ul\"\n\ntype FlexBaseProps = {\n  /** The alignment of children along the cross axis. */\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n  /** The alignment of this flex item along the cross axis, overriding the container's `align`. */\n  alignSelf?: \"auto\" | \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n  /** The HTML element to render. */\n  as?: FlexElement\n  /** The column gap between children. Overrides `gap` on the column axis. Tapestry spacing scale. */\n  columnGap?: Spacing\n  /** The direction of the main axis. */\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"\n  /** The gap between children. Tapestry spacing scale. */\n  gap?: Spacing\n  /** If set, renders as `inline-flex` instead of `flex`. */\n  inline?: true\n  /** The distribution of space between and around children along the main axis. */\n  justify?:\n    | \"start\"\n    | \"center\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n  /** The padding on all sides. Tapestry spacing scale. */\n  padding?: Spacing\n  /** The padding on the block axis. Overrides `padding` on the block axis. Tapestry spacing scale. */\n  paddingBlock?: Spacing\n  /** The padding on the inline axis. Overrides `padding` on the inline axis. Tapestry spacing scale. */\n  paddingInline?: Spacing\n  /**\n   * Responsive overrides. Mobile-first with breakpoints as keys.\n   * @example { md: { direction: \"row\", gap: 2 } }\n   */\n  responsive?: FlexResponsive\n  /** The row gap between children. Overrides `gap` on the row axis. Tapestry spacing scale. */\n  rowGap?: Spacing\n  /** Whether children are forced onto one line or can wrap onto multiple lines. */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\"\n} & (FlexSizingExpand | FlexSizing)\n\nexport type FlexProps = FlexBaseProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof FlexBaseProps>\n\ninterface FlexComponent {\n  (\n    props: FlexProps & React.RefAttributes<HTMLElement>\n  ): React.ReactElement | null\n  displayName?: string\n}\n\n/**\n * A flexbox layout primitive with token-constrained spacing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/unstable-flex--docs | Storybook Documentation}\n */\nexport const Flex = forwardRef(function Flex(\n  {\n    align,\n    alignSelf,\n    as: Element = \"div\",\n    basis,\n    className,\n    columnGap,\n    direction,\n    expand,\n    gap,\n    grow,\n    inline,\n    justify,\n    padding,\n    paddingBlock,\n    paddingInline,\n    responsive,\n    rowGap,\n    shrink,\n    wrap,\n    ...rest\n  }: FlexProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { xs, sm, md, lg, xl } = responsive ?? {}\n\n  const Tag = Element as unknown as React.ComponentType<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  >\n  return (\n    <Tag\n      {...rest}\n      className={classNames(\"tds-flex\", className)}\n      ref={ref}\n      data-flex-align={align}\n      data-flex-align-self={alignSelf}\n      data-flex-basis={basis}\n      data-flex-direction={direction}\n      data-flex-expand={expand || undefined}\n      data-flex-gap={gap}\n      data-flex-row-gap={rowGap}\n      data-flex-column-gap={columnGap}\n      data-flex-grow={grow}\n      data-flex-inline={inline || undefined}\n      data-flex-justify={justify}\n      data-flex-shrink={shrink}\n      data-flex-wrap={wrap}\n      data-padding={padding}\n      data-padding-block={paddingBlock}\n      data-padding-inline={paddingInline}\n      /* Breakpoint xs */\n      data-flex-align-xs={xs?.align}\n      data-flex-align-self-xs={xs?.alignSelf}\n      data-flex-basis-xs={xs?.basis}\n      data-flex-direction-xs={xs?.direction}\n      data-flex-gap-xs={xs?.gap}\n      data-flex-row-gap-xs={xs?.rowGap}\n      data-flex-column-gap-xs={xs?.columnGap}\n      data-flex-grow-xs={xs?.grow}\n      data-flex-justify-xs={xs?.justify}\n      data-flex-shrink-xs={xs?.shrink}\n      data-flex-wrap-xs={xs?.wrap}\n      data-padding-xs={xs?.padding}\n      data-padding-block-xs={xs?.paddingBlock}\n      data-padding-inline-xs={xs?.paddingInline}\n      /* Breakpoint sm */\n      data-flex-align-sm={sm?.align}\n      data-flex-align-self-sm={sm?.alignSelf}\n      data-flex-basis-sm={sm?.basis}\n      data-flex-direction-sm={sm?.direction}\n      data-flex-gap-sm={sm?.gap}\n      data-flex-row-gap-sm={sm?.rowGap}\n      data-flex-column-gap-sm={sm?.columnGap}\n      data-flex-grow-sm={sm?.grow}\n      data-flex-justify-sm={sm?.justify}\n      data-flex-shrink-sm={sm?.shrink}\n      data-flex-wrap-sm={sm?.wrap}\n      data-padding-sm={sm?.padding}\n      data-padding-block-sm={sm?.paddingBlock}\n      data-padding-inline-sm={sm?.paddingInline}\n      /* Breakpoint md */\n      data-flex-align-md={md?.align}\n      data-flex-align-self-md={md?.alignSelf}\n      data-flex-basis-md={md?.basis}\n      data-flex-direction-md={md?.direction}\n      data-flex-gap-md={md?.gap}\n      data-flex-row-gap-md={md?.rowGap}\n      data-flex-column-gap-md={md?.columnGap}\n      data-flex-grow-md={md?.grow}\n      data-flex-justify-md={md?.justify}\n      data-flex-shrink-md={md?.shrink}\n      data-flex-wrap-md={md?.wrap}\n      data-padding-md={md?.padding}\n      data-padding-block-md={md?.paddingBlock}\n      data-padding-inline-md={md?.paddingInline}\n      /* Breakpoint lg */\n      data-flex-align-lg={lg?.align}\n      data-flex-align-self-lg={lg?.alignSelf}\n      data-flex-basis-lg={lg?.basis}\n      data-flex-direction-lg={lg?.direction}\n      data-flex-gap-lg={lg?.gap}\n      data-flex-row-gap-lg={lg?.rowGap}\n      data-flex-column-gap-lg={lg?.columnGap}\n      data-flex-grow-lg={lg?.grow}\n      data-flex-justify-lg={lg?.justify}\n      data-flex-shrink-lg={lg?.shrink}\n      data-flex-wrap-lg={lg?.wrap}\n      data-padding-lg={lg?.padding}\n      data-padding-block-lg={lg?.paddingBlock}\n      data-padding-inline-lg={lg?.paddingInline}\n      /* Breakpoint xl */\n      data-flex-align-xl={xl?.align}\n      data-flex-align-self-xl={xl?.alignSelf}\n      data-flex-basis-xl={xl?.basis}\n      data-flex-direction-xl={xl?.direction}\n      data-flex-gap-xl={xl?.gap}\n      data-flex-row-gap-xl={xl?.rowGap}\n      data-flex-column-gap-xl={xl?.columnGap}\n      data-flex-grow-xl={xl?.grow}\n      data-flex-justify-xl={xl?.justify}\n      data-flex-shrink-xl={xl?.shrink}\n      data-flex-wrap-xl={xl?.wrap}\n      data-padding-xl={xl?.padding}\n      data-padding-block-xl={xl?.paddingBlock}\n      data-padding-inline-xl={xl?.paddingInline}\n    />\n  )\n}) as unknown as FlexComponent\n\nFlex.displayName = \"Flex\"\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import \"../../css/layout.css\"\n\nimport { type Breakpoint } from \"@utilities/breakpoints\"\nimport { type Spacing } from \"@utilities/spacingTokens\"\nimport { useContainerClass } from \"@utilities/useContainerClass\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\ninterface FlexSizingExpand {\n  basis?: never\n  /** A convenience prop that sets `flex: 1 1 0%; min-width: 0` to fill remaining space. Mutually exclusive with `grow`, `shrink`, and `basis`. */\n  expand?: true\n  grow?: never\n  shrink?: never\n}\n\ninterface FlexSizing {\n  /** The initial main size of this flex item before space is distributed. */\n  basis?: 0 | \"auto\" | \"100%\"\n  expand?: never\n  /** The flex grow factor of this flex item. */\n  grow?: 0 | 1\n  /** The flex shrink factor of this flex item. */\n  shrink?: 0 | 1\n}\n\nexport type FlexElement =\n  | \"article\"\n  | \"aside\"\n  | \"dd\"\n  | \"div\"\n  | \"dl\"\n  | \"dt\"\n  | \"footer\"\n  | \"header\"\n  | \"li\"\n  | \"main\"\n  | \"nav\"\n  | \"ol\"\n  | \"section\"\n  | \"ul\"\n\ntype FlexBaseProps = {\n  /** The alignment of children along the cross axis. */\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n  /** The alignment of this flex item along the cross axis, overriding the container's `align`. */\n  alignSelf?: \"auto\" | \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"\n  /** The HTML element to render. */\n  as?: FlexElement\n  /** The column gap between children. Overrides `gap` on the column axis. Tapestry spacing scale. */\n  columnGap?: Spacing\n  /** The direction of the main axis. */\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"\n  /** The gap between children. Tapestry spacing scale. */\n  gap?: Spacing\n  /** If set, renders as `inline-flex` instead of `flex`. */\n  inline?: true\n  /** The distribution of space between and around children along the main axis. */\n  justify?:\n    | \"start\"\n    | \"center\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n  /** The padding on all sides. Tapestry spacing scale. */\n  padding?: Spacing\n  /** The padding on the block axis. Overrides `padding` on the block axis. Tapestry spacing scale. */\n  paddingBlock?: Spacing\n  /** The padding on the inline axis. Overrides `padding` on the inline axis. Tapestry spacing scale. */\n  paddingInline?: Spacing\n  /**\n   * Responsive overrides. Accepts viewport breakpoint keys and/or a\n   * `container` map of container query conditions.\n   * **`container` is experimental.**\n   * @example { md: { direction: \"row\", gap: 2 } }\n   * @example { container: { \"(inline-size > 20rem)\": { direction: \"row\" } } }\n   */\n  responsive?: FlexResponsive\n  /** The row gap between children. Overrides `gap` on the row axis. Tapestry spacing scale. */\n  rowGap?: Spacing\n  /** Whether children are forced onto one line or can wrap onto multiple lines. */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\"\n} & (FlexSizingExpand | FlexSizing)\n\nexport type FlexResponsiveValue = Omit<\n  FlexBaseProps,\n  \"as\" | \"expand\" | \"inline\" | \"responsive\"\n>\n\nexport type FlexResponsive = Partial<\n  Record<Breakpoint, FlexResponsiveValue>\n> & {\n  /**\n   * Container query overrides. Keys are `inline-size` condition strings —\n   * optionally prefixed with a named container — and values are the props to\n   * apply when the condition is met. Requires an ancestor with\n   * `container-type: inline-size` (or equivalent) to establish the\n   * containment context.\n   * @experimental\n   * @example { \"(inline-size > 20rem)\": { direction: \"row\" } }\n   * @example { \"sidebar (inline-size >= 16rem)\": { gap: 1 } }\n   */\n  container?: Record<string, FlexResponsiveValue>\n}\n\nexport type FlexProps = FlexBaseProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof FlexBaseProps>\n\ninterface FlexComponent {\n  (\n    props: FlexProps & React.RefAttributes<HTMLElement>\n  ): React.ReactElement | null\n  displayName?: string\n}\n\n/**\n * A flexbox layout primitive with token-constrained spacing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-flex--docs | Storybook Documentation}\n */\nexport const Flex = forwardRef(function Flex(\n  {\n    align,\n    alignSelf,\n    as: Element = \"div\",\n    basis,\n    className,\n    columnGap,\n    direction,\n    expand,\n    gap,\n    grow,\n    inline,\n    justify,\n    padding,\n    paddingBlock,\n    paddingInline,\n    responsive,\n    rowGap,\n    shrink,\n    wrap,\n    ...rest\n  }: FlexProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { xs, sm, md, lg, xl, container } = responsive ?? {}\n\n  const containerClass = useContainerClass(\n    container as Record<string, object> | undefined\n  )\n\n  const Tag = Element as unknown as React.ComponentType<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  >\n  return (\n    <Tag\n      {...rest}\n      className={classNames(\"tds-flex\", containerClass, className)}\n      ref={ref}\n      data-flex-align={align}\n      data-flex-align-self={alignSelf}\n      data-flex-basis={basis}\n      data-flex-direction={direction}\n      data-flex-expand={expand || undefined}\n      data-flex-gap={gap}\n      data-flex-row-gap={rowGap}\n      data-flex-column-gap={columnGap}\n      data-flex-grow={grow}\n      data-flex-inline={inline || undefined}\n      data-flex-justify={justify}\n      data-flex-shrink={shrink}\n      data-flex-wrap={wrap}\n      data-padding={padding}\n      data-padding-block={paddingBlock}\n      data-padding-inline={paddingInline}\n      /* Breakpoint xs */\n      data-flex-align-xs={xs?.align}\n      data-flex-align-self-xs={xs?.alignSelf}\n      data-flex-basis-xs={xs?.basis}\n      data-flex-direction-xs={xs?.direction}\n      data-flex-gap-xs={xs?.gap}\n      data-flex-row-gap-xs={xs?.rowGap}\n      data-flex-column-gap-xs={xs?.columnGap}\n      data-flex-grow-xs={xs?.grow}\n      data-flex-justify-xs={xs?.justify}\n      data-flex-shrink-xs={xs?.shrink}\n      data-flex-wrap-xs={xs?.wrap}\n      data-padding-xs={xs?.padding}\n      data-padding-block-xs={xs?.paddingBlock}\n      data-padding-inline-xs={xs?.paddingInline}\n      /* Breakpoint sm */\n      data-flex-align-sm={sm?.align}\n      data-flex-align-self-sm={sm?.alignSelf}\n      data-flex-basis-sm={sm?.basis}\n      data-flex-direction-sm={sm?.direction}\n      data-flex-gap-sm={sm?.gap}\n      data-flex-row-gap-sm={sm?.rowGap}\n      data-flex-column-gap-sm={sm?.columnGap}\n      data-flex-grow-sm={sm?.grow}\n      data-flex-justify-sm={sm?.justify}\n      data-flex-shrink-sm={sm?.shrink}\n      data-flex-wrap-sm={sm?.wrap}\n      data-padding-sm={sm?.padding}\n      data-padding-block-sm={sm?.paddingBlock}\n      data-padding-inline-sm={sm?.paddingInline}\n      /* Breakpoint md */\n      data-flex-align-md={md?.align}\n      data-flex-align-self-md={md?.alignSelf}\n      data-flex-basis-md={md?.basis}\n      data-flex-direction-md={md?.direction}\n      data-flex-gap-md={md?.gap}\n      data-flex-row-gap-md={md?.rowGap}\n      data-flex-column-gap-md={md?.columnGap}\n      data-flex-grow-md={md?.grow}\n      data-flex-justify-md={md?.justify}\n      data-flex-shrink-md={md?.shrink}\n      data-flex-wrap-md={md?.wrap}\n      data-padding-md={md?.padding}\n      data-padding-block-md={md?.paddingBlock}\n      data-padding-inline-md={md?.paddingInline}\n      /* Breakpoint lg */\n      data-flex-align-lg={lg?.align}\n      data-flex-align-self-lg={lg?.alignSelf}\n      data-flex-basis-lg={lg?.basis}\n      data-flex-direction-lg={lg?.direction}\n      data-flex-gap-lg={lg?.gap}\n      data-flex-row-gap-lg={lg?.rowGap}\n      data-flex-column-gap-lg={lg?.columnGap}\n      data-flex-grow-lg={lg?.grow}\n      data-flex-justify-lg={lg?.justify}\n      data-flex-shrink-lg={lg?.shrink}\n      data-flex-wrap-lg={lg?.wrap}\n      data-padding-lg={lg?.padding}\n      data-padding-block-lg={lg?.paddingBlock}\n      data-padding-inline-lg={lg?.paddingInline}\n      /* Breakpoint xl */\n      data-flex-align-xl={xl?.align}\n      data-flex-align-self-xl={xl?.alignSelf}\n      data-flex-basis-xl={xl?.basis}\n      data-flex-direction-xl={xl?.direction}\n      data-flex-gap-xl={xl?.gap}\n      data-flex-row-gap-xl={xl?.rowGap}\n      data-flex-column-gap-xl={xl?.columnGap}\n      data-flex-grow-xl={xl?.grow}\n      data-flex-justify-xl={xl?.justify}\n      data-flex-shrink-xl={xl?.shrink}\n      data-flex-wrap-xl={xl?.wrap}\n      data-padding-xl={xl?.padding}\n      data-padding-block-xl={xl?.paddingBlock}\n      data-padding-inline-xl={xl?.paddingInline}\n    />\n  )\n}) as unknown as FlexComponent\n\nFlex.displayName = \"Flex\"\n"],"names":["React"],"mappings":"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"}

package/dist/components/link/BaseLink.d.ts

@@ -1,12 +1,26 @@
 import "../button/btn.css";
 import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
+import { Simplify } from "../../utilities/typeUtils";
 import React, { AnchorHTMLAttributes } from "react";
-export interface BaseLinkElementProps extends BaseComponentProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseComponentProps | "children"> {
+type BaseLinkBaseProps = BaseComponentProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseComponentProps | "children" | "href"> & {
     children?: React.ReactNode;
     external?: boolean;
-    href: string;
     kind?: ComponentKind;
     label?: React.ReactNode;
-}
+};
+export type BaseLinkElementProps = Simplify<BaseLinkBaseProps & {
+    /**
+     * When true, merges the link's styling onto the child element instead
+     * of rendering an `<a>`. Use to wrap a router link (e.g. react-router,
+     * Next.js) or any link-like component. The `external` prop still
+     * applies — it spreads `rel`/`target` onto the child element.
+     */
+    asChild: true;
+    href?: never;
+}> | Simplify<BaseLinkBaseProps & {
+    asChild?: false;
+    href: string;
+}>;
 export declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkElementProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};
 //# sourceMappingURL=BaseLink.d.ts.map

package/dist/components/link/BaseLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,eAAO,MAAM,QAAQ,gGA4CpB,CAAA"}
+{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,KAAK,iBAAiB,GAAG,kBAAkB,GACzC,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,CAC/C,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAEH,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,CACN,iBAAiB,GAAG;IAClB;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CACF,GACD,QAAQ,CAAC,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAEnE,eAAO,MAAM,QAAQ,gGA+CpB,CAAA"}

package/dist/components/link/BaseLink.js

@@ -1,15 +1,17 @@
+import { Slot, Slottable } from '@radix-ui/react-slot';
 import { COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP, wrapStringWithSpan } from '../../utilities/buttonLinkShared.js';
 import classNames from 'classnames';
 import React__default, { forwardRef } from 'react';
 
-const BaseLink = forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
+const BaseLink = forwardRef(({ asChild = false, children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
     const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
     const externalProps = external
         ? { rel: "noopener noreferrer", target: "_blank" }
         : {};
-    return (React__default.createElement("a", { href: href, className: combinedClassName, ref: ref, ...restProps, ...externalProps },
+    const Comp = asChild ? Slot : "a";
+    return (React__default.createElement(Comp, { ...(!asChild && { href }), className: combinedClassName, ref: ref, ...restProps, ...externalProps },
         wrapStringWithSpan(prefix),
-        label || children,
+        React__default.createElement(Slottable, null, label || children),
         wrapStringWithSpan(suffix)));
 });
 BaseLink.displayName = "BaseLink";

package/dist/components/link/BaseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseLinkElementProps\n  extends BaseComponentProps,\n    Omit<\n      AnchorHTMLAttributes<HTMLAnchorElement>,\n      keyof BaseComponentProps | \"children\"\n    > {\n  children?: React.ReactNode\n  external?: boolean\n  href: string\n  kind?: ComponentKind\n  label?: React.ReactNode\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      children,\n      className,\n      external = false,\n      fullWidth,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    return (\n      <a\n        href={href}\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        {...externalProps}\n      >\n        {wrapStringWithSpan(prefix)}\n        {label || children}\n        {wrapStringWithSpan(suffix)}\n      </a>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;AAyBO,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;IAED,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,kBAAkB,CAAC,MAAM,CAAC;AAC1B,QAAA,KAAK,IAAI,QAAQ;AACjB,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACzB;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  wrapStringWithSpan,\n} from \"@utilities/buttonLinkShared\"\nimport { Simplify } from \"@utilities/typeUtils\"\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\ntype BaseLinkBaseProps = BaseComponentProps &\n  Omit<\n    AnchorHTMLAttributes<HTMLAnchorElement>,\n    keyof BaseComponentProps | \"children\" | \"href\"\n  > & {\n    children?: React.ReactNode\n    external?: boolean\n    kind?: ComponentKind\n    label?: React.ReactNode\n  }\n\nexport type BaseLinkElementProps =\n  | Simplify<\n      BaseLinkBaseProps & {\n        /**\n         * When true, merges the link's styling onto the child element instead\n         * of rendering an `<a>`. Use to wrap a router link (e.g. react-router,\n         * Next.js) or any link-like component. The `external` prop still\n         * applies — it spreads `rel`/`target` onto the child element.\n         */\n        asChild: true\n        href?: never\n      }\n    >\n  | Simplify<BaseLinkBaseProps & { asChild?: false; href: string }>\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      asChild = false,\n      children,\n      className,\n      external = false,\n      fullWidth,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    const Comp = asChild ? Slot : \"a\"\n\n    return (\n      <Comp\n        {...(!asChild && { href })}\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        {...externalProps}\n      >\n        {wrapStringWithSpan(prefix)}\n        <Slottable>{label || children}</Slottable>\n        {wrapStringWithSpan(suffix)}\n      </Comp>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;;AAwCO,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;IAED,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;IAEN,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,GAAG;IAEjC,QACEA,6BAAC,IAAI,EAAA,EAAA,IACE,CAAC,OAAO,IAAI,EAAE,IAAI,EAAE,CAAC,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,GACT,aAAa,EAAA;QAEhB,kBAAkB,CAAC,MAAM,CAAC;AAC3B,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,EAAE,KAAK,IAAI,QAAQ,CAAa;AACzC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACtB;AAEX,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/link/IconLink.d.ts

@@ -1,7 +1,9 @@
 import "../button/btn.css";
 import React from "react";
 import { BaseLinkElementProps } from "./BaseLink";
-export type IconLinkProps = Omit<BaseLinkElementProps, "label" | "children"> & {
+export type IconLinkProps = Omit<Extract<BaseLinkElementProps, {
+    asChild?: false;
+}>, "label" | "children"> & {
     "aria-label": string;
     /** The icon element to display. */
     icon: React.ReactNode;
@@ -13,7 +15,289 @@ export type IconLinkProps = Omit<BaseLinkElementProps, "label" | "children"> & {
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-link-icon-link--docs | Storybook Documentation}
  */
-export declare const IconLink: React.ForwardRefExoticComponent<Omit<BaseLinkElementProps, "label" | "children"> & {
+export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
+    fullWidth?: boolean | undefined;
+    kind?: import("../../utilities/buttonLinkShared").ComponentKind | undefined;
+    prefix?: React.ReactNode;
+    size?: import("../../utilities/buttonLinkShared").ComponentSize | undefined;
+    suffix?: React.ReactNode;
+    slot?: string | undefined | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    type?: string | undefined | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCapitalize?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onResize?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onResizeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLAnchorElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLAnchorElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
+    media?: string | undefined | undefined;
+    target?: React.HTMLAttributeAnchorTarget | undefined;
+    download?: any;
+    hrefLang?: string | undefined | undefined;
+    ping?: string | undefined | undefined;
+    referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
+    children?: React.ReactNode;
+    external?: boolean | undefined;
+    label?: React.ReactNode;
+    asChild?: false | undefined;
+    href: string;
+}, "label" | "children"> & {
     "aria-label": string;
     /** The icon element to display. */
     icon: React.ReactNode;

package/dist/components/link/IconLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC7E,YAAY,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ;kBAZL,MAAM;IACpB,mCAAmC;UAC7B,KAAK,CAAC,SAAS;2CAwBtB,CAAA"}
+{"version":3,"file":"IconLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/IconLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,OAAO,CAAC,oBAAoB,EAAE;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,EAClD,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,YAAY,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAZL,MAAM;IACpB,mCAAmC;UAC7B,KAAK,CAAC,SAAS;2CAwBtB,CAAA"}

package/dist/components/link/IconLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n  \"aria-label\": string\n  /** The icon element to display. */\n  icon: React.ReactNode\n}\n\n/**\n * An icon-only link component that renders as an HTML `<a>` element with\n * button-like styling. Requires an `icon` and `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-link-icon-link--docs | Storybook Documentation}\n */\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n  ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    return (\n      <BaseLink\n        href={href}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n        {...restProps}\n      />\n    )\n  }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;AAaA;;;;;;AAMG;MACU,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<\n  Extract<BaseLinkElementProps, { asChild?: false }>,\n  \"label\" | \"children\"\n> & {\n  \"aria-label\": string\n  /** The icon element to display. */\n  icon: React.ReactNode\n}\n\n/**\n * An icon-only link component that renders as an HTML `<a>` element with\n * button-like styling. Requires an `icon` and `aria-label` for accessibility.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-link-icon-link--docs | Storybook Documentation}\n */\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n  ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n    const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n    return (\n      <BaseLink\n        href={href}\n        label={icon}\n        className={iconOnlyClassName}\n        ref={ref}\n        {...restProps}\n      />\n    )\n  }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":["React"],"mappings":";;;;AAgBA;;;;;;AAMG;MACU,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACEA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,EAAA,CACb;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/link/Link.d.ts

@@ -1,10 +1,16 @@
 import "../button/btn.css";
+import { Simplify } from "../../utilities/typeUtils";
 import React from "react";
 import { BaseLinkElementProps } from "./BaseLink";
-export type LinkProps = Omit<BaseLinkElementProps, "label"> & {
-    children?: React.ReactNode;
+export type LinkProps = Simplify<Omit<Extract<BaseLinkElementProps, {
+    asChild?: false;
+}>, "label"> & {
     label?: string;
-};
+}> | Simplify<Omit<Extract<BaseLinkElementProps, {
+    asChild: true;
+}>, "label"> & {
+    label?: string;
+}>;
 /**
  * A link component that renders as an HTML `<a>` element with button-like
  * styling. Use for navigation; for actions that don't change the URL, use
@@ -14,8 +20,5 @@ export type LinkProps = Omit<BaseLinkElementProps, "label"> & {
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-link--docs | Storybook Documentation}
  * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}
  */
-export declare const Link: React.ForwardRefExoticComponent<Omit<BaseLinkElementProps, "label"> & {
-    children?: React.ReactNode;
-    label?: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=Link.d.ts.map

package/dist/components/link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GAAG;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI;eAbJ,KAAK,CAAC,SAAS;YAClB,MAAM;2CAgBf,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAY,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,MAAM,SAAS,GACjB,QAAQ,CACN,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,GACD,QAAQ,CACN,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,EAAE,OAAO,CAAC,GAAG;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAEL;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,qFAKhB,CAAA"}

package/dist/components/link/Link.js

@@ -10,8 +10,9 @@ import { BaseLink } from './BaseLink.js';
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-link--docs | Storybook Documentation}
  * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}
  */
-const Link = forwardRef(({ href, ...restProps }, ref) => {
-    return React__default.createElement(BaseLink, { href: href, ref: ref, ...restProps });
+const Link = forwardRef((props, ref) => {
+    // eslint-disable-next-line tapestry/valid-href
+    return React__default.createElement(BaseLink, { ref: ref, ...props });
 });
 Link.displayName = "Link";