@salt-ds/core 1.69.0 → 1.71.0

package/dist-cjs/drawer/DrawerHeader.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+require('../text/Code.js');
+require('../text/Display.js');
+var Headings = require('../text/Headings.js');
+require('../text/Label.js');
+var Text = require('../text/Text.js');
+require('../text/TextAction.js');
+require('../text/TextNotation.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var DrawerContext = require('./DrawerContext.js');
+var DrawerHeader$1 = require('./DrawerHeader.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltDrawerHeader");
+const DrawerHeader = React.forwardRef(
+  function DrawerHeader2(props, ref) {
+    const {
+      actions,
+      className,
+      description,
+      disableAccent,
+      header,
+      preheader,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-drawer-header",
+      css: DrawerHeader$1,
+      window: targetWindow
+    });
+    const { setHeaderId, setDescriptionId } = DrawerContext.useDrawerContext();
+    const headingId = useId.useId();
+    const descriptionId = useId.useId();
+    const hasHeading = Boolean(header || preheader);
+    const hasDescription = Boolean(description);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      setHeaderId == null ? void 0 : setHeaderId(hasHeading ? headingId : void 0);
+      return () => {
+        setHeaderId == null ? void 0 : setHeaderId(void 0);
+      };
+    }, [hasHeading, headingId, setHeaderId]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      setDescriptionId == null ? void 0 : setDescriptionId(hasDescription ? descriptionId : void 0);
+      return () => {
+        setDescriptionId == null ? void 0 : setDescriptionId(void 0);
+      };
+    }, [hasDescription, descriptionId, setDescriptionId]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("withAccent")]: !disableAccent
+          },
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
+            hasHeading && /* @__PURE__ */ jsxRuntime.jsxs(Headings.H2, { id: headingId, className: withBaseName("header"), children: [
+              preheader && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "span", color: "primary", children: preheader }),
+              header
+            ] }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                id: descriptionId,
+                color: "secondary",
+                className: withBaseName("description"),
+                children: description
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+        ]
+      }
+    );
+  }
+);
+
+exports.DrawerHeader = DrawerHeader;
+//# sourceMappingURL=DrawerHeader.js.map

package/dist-cjs/drawer/DrawerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerHeader","useWindow","useComponentCssInjection","drawerHeaderCss","useDrawerContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","Text","jsx"],"mappings":"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"}

package/dist-cjs/drawer/hasDrawerSection.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var DrawerContent = require('./DrawerContent.js');
+var DrawerFooter = require('./DrawerFooter.js');
+var DrawerHeader = require('./DrawerHeader.js');
+
+const drawerSectionTypes = [DrawerHeader.DrawerHeader, DrawerContent.DrawerContent, DrawerFooter.DrawerFooter];
+function hasDrawerSection(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (child.type === React.Fragment) {
+      return hasDrawerSection(
+        child.props.children
+      );
+    }
+    return drawerSectionTypes.some((sectionType) => child.type === sectionType);
+  });
+}
+
+exports.hasDrawerSection = hasDrawerSection;
+//# sourceMappingURL=hasDrawerSection.js.map

package/dist-cjs/drawer/hasDrawerSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasDrawerSection.js","sources":["../src/drawer/hasDrawerSection.ts"],"sourcesContent":["import { Children, Fragment, isValidElement, type ReactNode } from \"react\";\nimport { DrawerContent } from \"./DrawerContent\";\nimport { DrawerFooter } from \"./DrawerFooter\";\nimport { DrawerHeader } from \"./DrawerHeader\";\n\nconst drawerSectionTypes = [DrawerHeader, DrawerContent, DrawerFooter];\n\nexport function hasDrawerSection(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n\n    if (child.type === Fragment) {\n      return hasDrawerSection(\n        (child.props as { children?: ReactNode }).children,\n      );\n    }\n\n    return drawerSectionTypes.some((sectionType) => child.type === sectionType);\n  });\n}\n"],"names":["DrawerHeader","DrawerContent","DrawerFooter","Children","isValidElement","Fragment"],"mappings":";;;;;;;AAKA,MAAM,kBAAA,GAAqB,CAACA,yBAAA,EAAcC,2BAAA,EAAeC,yBAAY,CAAA;AAE9D,SAAS,iBAAiB,QAAA,EAA8B;AAC7D,EAAA,OAAOC,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAACC,oBAAA,CAAe,KAAK,CAAA,EAAG,OAAO,KAAA;AAEnC,IAAA,IAAI,KAAA,CAAM,SAASC,cAAA,EAAU;AAC3B,MAAA,OAAO,gBAAA;AAAA,QACJ,MAAM,KAAA,CAAmC;AAAA,OAC5C;AAAA,IACF;AAEA,IAAA,OAAO,mBAAmB,IAAA,CAAK,CAAC,WAAA,KAAgB,KAAA,CAAM,SAAS,WAAW,CAAA;AAAA,EAC5E,CAAC,CAAA;AACH;;;;"}

package/dist-cjs/form-field/FormField.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop.saltFormField-hasControls {\n  align-content: start;\n  grid-template-rows: min-content minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {\n  align-self: center;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n\n  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {\n    grid-template-rows: minmax(var(--salt-size-base), auto);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormField.css.js.map

package/dist-cjs/form-field/FormField.js

@@ -14,8 +14,21 @@ var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var FormField$1 = require('./FormField.css.js');
+var FormFieldHelperText = require('./FormFieldHelperText.js');
+var FormFieldLabel = require('./FormFieldLabel.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltFormField");
+function hasFormFieldControls(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) {
+      return true;
+    }
+    if (child.type === React.Fragment) {
+      return hasFormFieldControls(child.props.children);
+    }
+    return child.type !== FormFieldLabel.FormFieldLabel && child.type !== FormFieldHelperText.FormFieldHelperText;
+  });
+}
 const FormField = React.forwardRef(
   ({
     children,
@@ -37,6 +50,7 @@ const FormField = React.forwardRef(
     const formFieldRef = React.useRef(null);
     const handleRef = useForkRef.useForkRef(ref, formFieldRef);
     const formId = useId.useId(idProp);
+    const hasControls = hasFormFieldControls(children);
     const labelId = formId ? `label-${formId}` : void 0;
     const helperTextId = formId ? `helperText-${formId}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -47,6 +61,7 @@ const FormField = React.forwardRef(
           withBaseName(),
           {
             [withBaseName("disabled")]: disabled,
+            [withBaseName("hasControls")]: hasControls,
             [withBaseName(`label${capitalize.capitalize(labelPlacement)}`)]: labelPlacement
           },
           className

package/dist-cjs/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useRef } from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAASC,YAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAA,KAAA,EAAQC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  Fragment,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useRef,\n} from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      return hasFormFieldControls(child.props.children);\n    }\n\n    return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n  });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n    const hasControls = hasFormFieldControls(children);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"hasControls\")]: hasControls,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","isValidElement","Fragment","FormFieldLabel","FormFieldHelperText","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAOC,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAACC,oBAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAASC,cAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAASC,6BAAA,IAAkB,KAAA,CAAM,IAAA,KAASC,uCAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAASC,YAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/form-field/FormFieldLabel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n  width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n  width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldLabel.css.js.map

package/dist-cjs/index.js

@@ -44,6 +44,9 @@ var DialogHeader = require('./dialog/DialogHeader.js');
 var Divider = require('./divider/Divider.js');
 var Drawer = require('./drawer/Drawer.js');
 var DrawerCloseButton = require('./drawer/DrawerCloseButton.js');
+var DrawerContent = require('./drawer/DrawerContent.js');
+var DrawerFooter = require('./drawer/DrawerFooter.js');
+var DrawerHeader = require('./drawer/DrawerHeader.js');
 var Dropdown = require('./dropdown/Dropdown.js');
 var FileDropZone = require('./file-drop-zone/FileDropZone.js');
 var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
@@ -64,6 +67,7 @@ var InteractableCardGroup = require('./interactable-card/InteractableCardGroup.j
 var InteractableCardGroupContext = require('./interactable-card/InteractableCardGroupContext.js');
 var Kbd = require('./kbd/Kbd.js');
 var Link = require('./link/Link.js');
+var LinkButton = require('./link-button/LinkButton.js');
 var LinkCard = require('./link-card/LinkCard.js');
 var ListBox = require('./list-box/ListBox.js');
 var ListControlContext = require('./list-control/ListControlContext.js');
@@ -265,6 +269,9 @@ exports.DialogHeader = DialogHeader.DialogHeader;
 exports.Divider = Divider.Divider;
 exports.Drawer = Drawer.Drawer;
 exports.DrawerCloseButton = DrawerCloseButton.DrawerCloseButton;
+exports.DrawerContent = DrawerContent.DrawerContent;
+exports.DrawerFooter = DrawerFooter.DrawerFooter;
+exports.DrawerHeader = DrawerHeader.DrawerHeader;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FileDropZone = FileDropZone.FileDropZone;
 exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
@@ -290,6 +297,7 @@ exports.InteractableCardGroupContext = InteractableCardGroupContext.Interactable
 exports.useInteractableCardGroup = InteractableCardGroupContext.useInteractableCardGroup;
 exports.Kbd = Kbd.Kbd;
 exports.Link = Link.Link;
+exports.LinkButton = LinkButton.LinkButton;
 exports.LinkCard = LinkCard.LinkCard;
 exports.ListBox = ListBox.ListBox;
 exports.useListControlContext = ListControlContext.useListControlContext;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/interactable-card/InteractableCard.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  box-shadow: var(--salt-overlayable-shadow);\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--card-padding));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltInteractableCard.saltInteractableCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltInteractableCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-cursor-disabled);\n    box-shadow: none;\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:focus-visible,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  cursor: var(--salt-cursor-disabled);\n  outline: none;\n  opacity: 0.4;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));\n  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--card-padding));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --interactableCard-borderColor: var(--salt-container-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltInteractableCard.saltInteractableCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltInteractableCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltInteractableCard-flat {\n  box-shadow: var(--saltInteractableCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltInteractableCard-raised {\n  box-shadow: var(--saltInteractableCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltInteractableCard-borderColorStrong {\n  --interactableCard-borderColor: var(--salt-container-bold-borderColor);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltInteractableCard-borderColorSubtle {\n  --interactableCard-borderColor: var(--salt-container-subtle-borderColor);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltInteractableCard-borderColorNone {\n  --interactableCard-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:not(.saltInteractableCard-disabled):hover {\n    cursor: var(--salt-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:focus-visible,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  cursor: var(--salt-cursor-disabled);\n  outline: none;\n  opacity: 0.4;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/interactable-card/InteractableCard.js

@@ -23,9 +23,11 @@ const InteractableCard = React.forwardRef(function InteractableCard2(props, ref)
   const {
     accent,
     accentPlacement,
+    borderColor,
     children,
     className,
     disabled: disabledProp,
+    elevation = "raised",
     variant = "primary",
     value,
     onBlur,
@@ -90,6 +92,7 @@ const InteractableCard = React.forwardRef(function InteractableCard2(props, ref)
   const sectioned = hasCardSection.hasCardSection(children);
   return (
     // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -101,9 +104,11 @@ const InteractableCard = React.forwardRef(function InteractableCard2(props, ref)
         className: clsx.clsx(
           withBaseName(),
           withBaseName(variant),
+          borderColor && withBaseName(`borderColor${capitalize.capitalize(borderColor)}`),
           {
             [withBaseName("accent")]: accentValue,
             [withBaseName(`accent${capitalize.capitalize(accentValue ?? "")}`)]: accentValue,
+            [withBaseName(elevation || "")]: elevation,
             [withBaseName("active")]: role === "button" && active,
             [withBaseName("disabled")]: disabled,
             [withBaseName("selected")]: selected,

package/dist-cjs/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","hasCardSection","jsx","clsx","capitalize"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { hasCardSection } from \"../card/hasCardSection\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * @deprecated since 1.23.0. Use the `accent` prop instead.\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    borderColor,\n    children,\n    className,\n    disabled: disabledProp,\n    elevation = \"raised\",\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  const sectioned = hasCardSection(children);\n\n  return (\n    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard event handlers are provided by cardProps.\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(elevation || \"\")]: elevation,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"sectioned\")]: sectioned,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","hasCardSection","jsx","clsx","capitalize"],"mappings":"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"}

package/dist-cjs/link/Link.js

@@ -43,7 +43,7 @@ const Link = React.forwardRef(function Link2({
   const { ExternalIcon } = SemanticIconProvider.useIcon();
   const color = variant ?? colorProp ?? "primary";
   const LinkIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Text.Text,
     {
       as: LinkAction.LinkAction,
@@ -59,14 +59,12 @@ const Link = React.forwardRef(function Link2({
       ref,
       target,
       color: "inherit",
+      externalLinkContent: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        LinkIconComponent && /* @__PURE__ */ jsxRuntime.jsx(LinkIconComponent, { className: withBaseName("icon"), "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
+      ] }),
       ...rest,
-      children: [
-        children,
-        target === "_blank" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          LinkIconComponent && /* @__PURE__ */ jsxRuntime.jsx(LinkIconComponent, { className: withBaseName("icon"), "aria-hidden": true }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
-        ] })
-      ]
+      children
     }
   );
 });

package/dist-cjs/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","capitalize","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAOC,gBAAA,CAAyC,SAASC,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACEC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAIC,qBAAA;AAAA,MACJ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACL,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BACVJ,eAAA,CAAAK,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,iBAAA,mCACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,yCAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      externalLinkContent={\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      }\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsx","Text","LinkAction","clsx","capitalize","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAOC,gBAAA,CAAyC,SAASC,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAIC,qBAAA;AAAA,MACJ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACN,qCACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,iBAAA,mCACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,uCAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF,CAAA;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/link/LinkAction.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('clsx');
 var renderProps = require('../utils/renderProps.js');
@@ -9,8 +10,19 @@ require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 
 const LinkAction = React.forwardRef(
-  function LinkAction2(props, ref) {
-    return renderProps.renderProps("a", { ...props, ref });
+  function LinkAction2({ externalLinkContent, ...props }, ref) {
+    const link = renderProps.renderProps("a", { ...props, ref });
+    if (link.props.target !== "_blank" || !externalLinkContent) {
+      return link;
+    }
+    return React.cloneElement(
+      link,
+      void 0,
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        link.props.children,
+        externalLinkContent
+      ] })
+    );
   }
 );
 

package/dist-cjs/link/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction(props, ref) {\n    return renderProps(\"a\", { ...props, ref });\n  },\n);\n"],"names":["forwardRef","LinkAction","renderProps"],"mappings":";;;;;;;;;;AAKO,MAAM,UAAA,GAAaA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,OAAOC,wBAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA,EAC3C;AACF;;;;"}
+{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {\n  externalLinkContent?: ReactNode;\n}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction({ externalLinkContent, ...props }, ref) {\n    // Resolve the final element before deciding whether to append external-link\n    // content. A JSX `render` element can override `target`, so checking\n    // `props.target` would make the icon and announcement disagree with the\n    // rendered link.\n    const link = renderProps(\"a\", { ...props, ref });\n\n    if (link.props.target !== \"_blank\" || !externalLinkContent) {\n      return link;\n    }\n\n    return cloneElement(\n      link,\n      undefined,\n      <>\n        {link.props.children}\n        {externalLinkContent}\n      </>,\n    );\n  },\n);\n"],"names":["forwardRef","LinkAction","renderProps","cloneElement","jsxs","Fragment"],"mappings":";;;;;;;;;;;AAYO,MAAM,UAAA,GAAaA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,EAAE,qBAAqB,GAAG,KAAA,IAAS,GAAA,EAAK;AAK1D,IAAA,MAAM,OAAOC,uBAAA,CAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAE/C,IAAA,IAAI,IAAA,CAAK,KAAA,CAAM,MAAA,KAAW,QAAA,IAAY,CAAC,mBAAA,EAAqB;AAC1D,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,KAAA,CAAM,QAAA;AAAA,QACX;AAAA,OAAA,EACH;AAAA,KACF;AAAA,EACF;AACF;;;;"}

package/dist-cjs/link-button/LinkButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltLinkButton {\n  --linkButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltLinkButton-alignItems, center);\n  appearance: none;\n  background: var(--saltLinkButton-background, var(--linkButton-background));\n  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));\n  border-style: var(--saltLinkButton-borderStyle, solid);\n  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));\n  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltLinkButton-justifyContent, center);\n  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));\n  margin: var(--saltLinkButton-margin, 0);\n  height: var(--saltLinkButton-height, var(--salt-size-base));\n  min-width: var(--saltLinkButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: var(--linkButton-textDecoration, var(--salt-typography-textDecoration-underline));\n  text-underline-offset: var(--salt-spacing-fixed-200);\n  transition: none;\n  width: var(--saltLinkButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n.saltLinkButton-underlineDefault {\n  --linkButton-textDecoration: var(--salt-typography-textDecoration-underline);\n  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);\n}\n\n.saltLinkButton-underlineNever {\n  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n   Uses clip-path and prevents user selection so the text isn't included\n   when users copy the link button's visible content. */\n.saltLinkButton-externalLinkADA {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n@media (hover: hover) {\n  /* Pseudo-class applied to the root element on hover when LinkButton is not active or disabled */\n  .saltLinkButton:hover {\n    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));\n  }\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltLinkButton:focus-visible {\n  outline: var(--salt-focused-outline);\n\n  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));\n}\n\n/* Pseudo-class applied to the root element when LinkButton is active */\n.saltLinkButton.saltLinkButton-active:focus-visible,\n.saltLinkButton:focus-visible:active,\n.saltLinkButton:active,\n.saltLinkButton.saltLinkButton-active {\n  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));\n  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));\n  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n.saltLinkButton-neutral {\n  --linkButton-text-color: var(--salt-actionable-subtle-foreground);\n  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --linkButton-background: var(--salt-actionable-subtle-background);\n  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --linkButton-background-active: var(--salt-actionable-subtle-background-active);\n  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltLinkButton-accented {\n  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --linkButton-background: var(--salt-actionable-accented-subtle-background);\n  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LinkButton.css.js.map

package/dist-cjs/link-button/LinkButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/link-button/LinkButton.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+require('../button/Button.js');
+var useButton = require('../button/useButton.js');
+var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
+var capitalize = require('../utils/capitalize.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+var renderProps = require('../utils/renderProps.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var LinkButton$1 = require('./LinkButton.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltLinkButton");
+const LinkButton = React.forwardRef(
+  function LinkButton2(props, ref) {
+    const {
+      children,
+      className,
+      IconComponent,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp,
+      sentiment = "neutral",
+      target = "_self",
+      underline = "default",
+      ...rest
+    } = props;
+    const { active, buttonProps } = useButton.useButton({
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp
+    });
+    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-link-button",
+      css: LinkButton$1,
+      window: targetWindow
+    });
+    const { ExternalIcon } = SemanticIconProvider.useIcon();
+    const LinkButtonIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
+    const linkButton = renderProps.renderProps("a", {
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(sentiment),
+        withBaseName(`underline${capitalize.capitalize(underline)}`),
+        { [withBaseName("active")]: active },
+        className
+      ),
+      ...activeStateProps,
+      ...rest,
+      ref,
+      target,
+      children
+    });
+    if (linkButton.props.target !== "_blank") {
+      return linkButton;
+    }
+    return React.cloneElement(
+      linkButton,
+      void 0,
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        linkButton.props.children,
+        LinkButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(
+          LinkButtonIconComponent,
+          {
+            className: withBaseName("icon"),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
+      ] })
+    );
+  }
+);
+
+exports.LinkButton = LinkButton;
+//# sourceMappingURL=LinkButton.js.map

package/dist-cjs/link-button/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n} from \"../utils\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    if (linkButton.props.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButton.props.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LinkButton","useButton","useWindow","useComponentCssInjection","linkButtonCss","useIcon","renderProps","clsx","capitalize","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,mBAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAaC,wBAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACCC,cAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,uCAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}