@planningcenter/tapestry 3.4.1-rc.8 → 3.4.1-rc.9

package/dist/components/button/BaseButton.d.ts

@@ -12,5 +12,5 @@ export interface BaseButtonProps extends Omit<BaseComponentProps, "kind"> {
     loadingAriaLabel?: string;
 }
 export type BaseButtonElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps | "children"> & BaseButtonProps;
-export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps | "children"> & BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const BaseButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | keyof BaseButtonProps> & BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=BaseButton.d.ts.map

package/dist/components/button/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAyBjB,eAAO,MAAM,UAAU,qLAiDtB,CAAA"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAEd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,sCAAsC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAEjB,eAAO,MAAM,UAAU,qLAgDtB,CAAA"}

package/dist/components/button/BaseButton.js

@@ -1,27 +1,16 @@
 import LoadingSpinner from '../internal/LoadingSpinner.js';
-import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
+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 buildComponentClassName = ({ className, fullWidth, kind, loading, size, }) => {
-    return classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className);
-};
 const BaseButton = forwardRef(({ "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
-    const combinedClassName = buildComponentClassName({
-        className,
-        fullWidth,
-        kind,
-        loading,
-        size,
-    });
-    const prefixElement = enhanceElementWithClassName(prefix, "prefix");
-    const suffixElement = enhanceElementWithClassName(suffix, "suffix");
+    const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
     const isDisabled = disabled || loading;
     return (React__default.createElement("button", { type: "button", className: combinedClassName, ref: ref, ...restProps, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
         loading && React__default.createElement(LoadingSpinner, null),
-        prefixElement,
+        wrapStringWithSpan(prefix),
         loading ? React__default.createElement("span", null, label) : label,
-        suffixElement));
+        wrapStringWithSpan(suffix)));
 });
 BaseButton.displayName = "BaseButton";
 

package/dist/components/button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  ComponentSize,\n  enhanceElementWithClassName,\n} from \"@utilities/buttonLinkShared\"\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nconst buildComponentClassName = ({\n  className,\n  fullWidth,\n  kind,\n  loading,\n  size,\n}: {\n  className?: string\n  fullWidth?: boolean\n  kind?: ComponentKind\n  loading?: boolean\n  size?: ComponentSize\n}): string => {\n  return classNames(\n    kind && \"tds-btn\",\n    size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n    kind && COMPONENT_KIND_CLASS_MAP[kind],\n    fullWidth && \"tds-btn--full-width\",\n    loading && \"tds-btn--loading\",\n    className\n  )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const combinedClassName = buildComponentClassName({\n      className,\n      fullWidth,\n      kind,\n      loading,\n      size,\n    })\n\n    const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n    const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n    const isDisabled = disabled || loading\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        aria-busy={loading || undefined}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {prefixElement}\n        {loading ? <span>{label}</span> : label}\n        {suffixElement}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":["React"],"mappings":";;;;;AA+BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;MAEY,UAAU,GAAG,UAAU,CAClC,CACE,EACE,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,eACF,OAAO,IAAI,SAAS,EAAA,eAAA,EAChB,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,aAAa;QACb,OAAO,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\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, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n  /** The visual style of the button. */\n  kind?: ComponentKind\n  /** The text content of the button. */\n  label: React.ReactNode\n  /** Whether the button is in a loading state. When true, the button is disabled and shows a loading spinner. */\n  loading?: boolean\n  /** Accessible label to use when the button is in loading state. */\n  loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof BaseButtonProps | \"children\"\n> &\n  BaseButtonProps\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n  (\n    {\n      \"aria-label\": ariaLabel,\n      className,\n      disabled = false,\n      fullWidth,\n      kind = \"secondary\",\n      label,\n      loading = false,\n      loadingAriaLabel = \"Loading...\",\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseButtonElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      kind && \"tds-btn\",\n      size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n      kind && COMPONENT_KIND_CLASS_MAP[kind],\n      fullWidth && \"tds-btn--full-width\",\n      loading && \"tds-btn--loading\",\n      className,\n      { \"tds-btn--prefix\": prefix, \"tds-btn--suffix\": suffix }\n    )\n\n    const isDisabled = disabled || loading\n\n    return (\n      <button\n        type=\"button\"\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        aria-busy={loading || undefined}\n        aria-disabled={isDisabled || undefined}\n        disabled={isDisabled}\n        aria-label={loading ? loadingAriaLabel : ariaLabel}\n      >\n        {loading && <LoadingSpinner />}\n        {wrapStringWithSpan(prefix)}\n        {loading ? <span>{label}</span> : label}\n        {wrapStringWithSpan(suffix)}\n      </button>\n    )\n  }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":["React"],"mappings":";;;;;MA8Ba,UAAU,GAAG,UAAU,CAClC,CACE,EACE,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,EACT,EAAE,iBAAiB,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,CACzD;AAED,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,eACF,OAAO,IAAI,SAAS,EAAA,eAAA,EAChB,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,kBAAkB,CAAC,MAAM,CAAC;QAC1B,OAAO,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;AACtC,QAAA,kBAAkB,CAAC,MAAM,CAAC,CACpB;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/button/DropdownButton.d.ts

@@ -27,5 +27,5 @@ export declare function dropdownProps({ className }: {
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}
  */
-export declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof import("./BaseButton").BaseButtonProps | "children"> & import("./BaseButton").BaseButtonProps & DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | keyof import("./BaseButton").BaseButtonProps> & import("./BaseButton").BaseButtonProps & DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=DropdownButton.d.ts.map

package/dist/components/button/DropdownButton.js

@@ -7,7 +7,7 @@ import { BaseButton } from './BaseButton.js';
 function dropdownProps({ className }) {
     return {
         className: classNames(className, "tds-btn--dropdown"),
-        suffix: React__default.createElement(Icon, { symbol: "general#down-caret", "aria-hidden": true }),
+        suffix: React__default.createElement(Icon, { className: "suffix", symbol: "general#down-caret", "aria-hidden": true }),
     };
 }
 /**

package/dist/components/button/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n  /**\n   * ID of the element controlled by this dropdown button. Optional when wrapped\n   * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from\n   * `PressResponderContext`); required when used standalone to drive a custom popover.\n   */\n  \"aria-controls\"?: string\n  /**\n   * Whether the dropdown is expanded or not. Optional when wrapped in\n   * `<DropdownTrigger>`; required when used standalone.\n   */\n  \"aria-expanded\"?: boolean\n  suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n  return {\n    className: classNames(className, \"tds-btn--dropdown\"),\n    suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n  }\n}\n\n/**\n * A button that toggles a dropdown menu or popover. Appends a caret suffix\n * and wires up `aria-controls` and `aria-expanded` to the controlled element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}\n */\nexport const DropdownButton = forwardRef<\n  HTMLButtonElement,\n  BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <BaseButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":["React"],"mappings":";;;;;;AAwBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KACzD;AACH;AAEA;;;;;;AAMG;AACI,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport { DropdownTriggerContext } from \"@components/dropdown/DropdownTriggerContext\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, useContext } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n  /**\n   * ID of the element controlled by this dropdown button. Optional when wrapped\n   * in `<DropdownTrigger>` (RA's `<Pressable>` injects it from\n   * `PressResponderContext`); required when used standalone to drive a custom popover.\n   */\n  \"aria-controls\"?: string\n  /**\n   * Whether the dropdown is expanded or not. Optional when wrapped in\n   * `<DropdownTrigger>`; required when used standalone.\n   */\n  \"aria-expanded\"?: boolean\n  suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n  return {\n    className: classNames(className, \"tds-btn--dropdown\"),\n    suffix: <Icon className=\"suffix\" symbol=\"general#down-caret\" aria-hidden />,\n  }\n}\n\n/**\n * A button that toggles a dropdown menu or popover. Appends a caret suffix\n * and wires up `aria-controls` and `aria-expanded` to the controlled element.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-button-dropdown-button--docs | Storybook Documentation}\n */\nexport const DropdownButton = forwardRef<\n  HTMLButtonElement,\n  BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n  const contextProps = useContext(DropdownTriggerContext)\n  return (\n    <BaseButton\n      ref={ref}\n      {...props}\n      {...contextProps}\n      {...dropdownProps(props)}\n    />\n  )\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":["React"],"mappings":";;;;;;AAwBM,SAAU,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;QACrD,MAAM,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAC,oBAAoB,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe;KAC5E;AACH;AAEA;;;;;;AAMG;AACI,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,sBAAsB,CAAC;AACvD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,UAAU,IACT,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,GACL,YAAY,KACZ,aAAa,CAAC,KAAK,CAAC,EAAA,CACxB;AAEN,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

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,EAGd,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;AAiBD,eAAO,MAAM,QAAQ,gGA4CpB,CAAA"}
+{"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"}

package/dist/components/link/BaseLink.js

@@ -1,21 +1,16 @@
-import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
+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 buildComponentClassName = (size, kind, fullWidth, className) => {
-    return 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);
-};
 const BaseLink = forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
-    const combinedClassName = buildComponentClassName(size, kind, fullWidth, className);
-    const prefixElement = enhanceElementWithClassName(prefix, "prefix");
-    const suffixElement = enhanceElementWithClassName(suffix, "suffix");
+    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 },
-        prefixElement,
+        wrapStringWithSpan(prefix),
         label || children,
-        suffixElement));
+        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  ComponentSize,\n  enhanceElementWithClassName,\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\nconst buildComponentClassName = (\n  size?: ComponentSize,\n  kind?: ComponentKind,\n  fullWidth?: boolean,\n  className?: string\n): string => {\n  return 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  )\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 = buildComponentClassName(\n      size,\n      kind,\n      fullWidth,\n      className\n    )\n\n    const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n    const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\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        {prefixElement}\n        {label || children}\n        {suffixElement}\n      </a>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":["React"],"mappings":";;;;AA0BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAmB,EACnB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,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,CACV;AACH,CAAC;AAEM,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;AACF,IAAA,MAAM,iBAAiB,GAAG,uBAAuB,CAC/C,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,SAAS,CACV;IAED,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,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,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;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 {\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;;;;"}

package/dist/index.css

@@ -1595,11 +1595,19 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   transition-property:color, background-color, border-color, box-shadow, fill, stroke, opacity;
 }
 
-.tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
+.tds-btn:where(.tds-btn--icononly,.tds-btn--prefix){
     padding-left:var(--tds-btn-padding-truncated-x);
   }
 
-.tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
+.tds-btn:where(.tds-btn--icononly,.tds-btn--suffix){
+    padding-right:var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn.tds-btn--icononly,.tds-btn.tds-btn--prefix{
+    padding-left:var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn.tds-btn--icononly,.tds-btn.tds-btn--suffix{
     padding-right:var(--tds-btn-padding-truncated-x);
   }