@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.10

package/dist-es/contact-details/ContactAvatar.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { makePrefixer, Avatar } from '@salt-ds/core';
+import './internal/FavoriteToggleWithTooltip.js';
+import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
+import { clsx } from 'clsx';
+
+const withBaseName = makePrefixer("saltContactAvatar");
+const ContactAvatar = forwardRef(
+  function(props, ref) {
+    const { className, ...restProps } = props;
+    const context = useContactDetailsContext();
+    const { variant, primary, isStacked, setHasAvatar } = context;
+    useEffect(() => {
+      setHasAvatar(true);
+      return () => {
+        setHasAvatar(false);
+      };
+    }, [setHasAvatar]);
+    if (variant === "mini") {
+      return null;
+    }
+    const avatarSize = variant === "default" ? 3 : 2;
+    return /* @__PURE__ */ jsx(Avatar, {
+      ...restProps,
+      ref,
+      "aria-hidden": true,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("stacked")]: isStacked
+        },
+        className
+      ),
+      size: avatarSize,
+      children: primary ? primary.split(" ").map((x) => x.charAt(0)).slice(0, 2) : null
+    });
+  }
+);
+
+export { ContactAvatar };
+//# sourceMappingURL=ContactAvatar.js.map

package/dist-es/contact-details/ContactAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer, Avatar, AvatarProps } from \"@salt-ds/core\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport type ContactAvatarProps = AvatarProps;\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? 3 : 2;\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAC/C,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/contact-details/ContactDetails.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-text-primary-foreground);\n  --contactDetails-label-color: var(--salt-text-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ContactDetails.css.js.map

package/dist-es/contact-details/ContactDetails.css.js.map

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

package/dist-es/contact-details/ContactDetails.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { ContactDetailsContext } from './internal/ContactDetailsContext.js';
+import { useComponentSize } from './internal/useComponentSize.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ContactDetails.css.js';
+
+const withBaseName = makePrefixer("saltContactDetails");
+function getClassName(variant, isStacked) {
+  return withBaseName(`${variant}${isStacked ? "-stacked" : ""}`);
+}
+const ContactDetails = forwardRef(
+  function ContactDetails2(props, externalRef) {
+    const {
+      children,
+      variant = "default",
+      className,
+      stackAtBreakpoint = 300,
+      embedded,
+      ...restProps
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-contact-details",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [hasAvatar, setHasAvatar] = useState(false);
+    const [primary, setPrimary] = useState();
+    const [primaryId, setPrimaryId] = useState();
+    const [secondary, setSecondary] = useState();
+    const [secondaryId, setSecondaryId] = useState();
+    const [tertiary, setTertiary] = useState();
+    const [tertiaryId, setTertiaryId] = useState();
+    const [containerRef, componentSize] = useComponentSize(stackAtBreakpoint);
+    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;
+    variant === "compact" && isStacked && console.log("componentSize", componentSize.width, containerRef.current);
+    const ref = useForkRef(externalRef, containerRef);
+    const contextValue = {
+      variant,
+      hasAvatar,
+      setHasAvatar,
+      isStacked,
+      primary,
+      setPrimary,
+      primaryId,
+      setPrimaryId,
+      secondary,
+      setSecondary,
+      secondaryId,
+      setSecondaryId,
+      tertiary,
+      setTertiary,
+      tertiaryId,
+      setTertiaryId
+    };
+    const showNoAvatar = !hasAvatar && !embedded && variant !== "mini";
+    return /* @__PURE__ */ jsx(ContactDetailsContext.Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsxs("div", {
+        ...restProps,
+        ref,
+        className: clsx(
+          withBaseName(),
+          getClassName(variant, isStacked),
+          {
+            [withBaseName("embedded")]: embedded,
+            [withBaseName("noAvatar")]: showNoAvatar
+          },
+          className
+        ),
+        role: "article",
+        "aria-roledescription": "Contact Card",
+        children: [
+          children,
+          showNoAvatar ? /* @__PURE__ */ jsx("div", {
+            className: withBaseName("noAvatar-indicator")
+          }) : null
+        ]
+      })
+    });
+  }
+);
+
+export { ContactDetails };
+//# sourceMappingURL=ContactDetails.js.map

package/dist-es/contact-details/ContactDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactDetails.js","sources":["../src/contact-details/ContactDetails.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { ContactDetailsContext, useComponentSize } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport contactDetailsCss from \"./ContactDetails.css\";\n\nconst withBaseName = makePrefixer(\"saltContactDetails\");\n\nexport type ContactDetailsVariant = \"default\" | \"compact\" | \"mini\";\n\nexport interface ContactDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: ContactDetailsVariant;\n  stackAtBreakpoint?: number;\n  embedded?: boolean;\n}\n\nfunction getClassName(variant: ContactDetailsVariant, isStacked?: boolean) {\n  return withBaseName(`${variant}${isStacked ? \"-stacked\" : \"\"}`);\n}\n\nexport const ContactDetails = forwardRef<HTMLDivElement, ContactDetailsProps>(\n  function ContactDetails(props, externalRef) {\n    const {\n      children,\n      variant = \"default\",\n      className,\n      stackAtBreakpoint = 300,\n      embedded,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-contact-details\",\n      css: contactDetailsCss,\n      window: targetWindow,\n    });\n\n    const [hasAvatar, setHasAvatar] = useState<boolean>(false);\n    const [primary, setPrimary] = useState<string>();\n    const [primaryId, setPrimaryId] = useState<string>();\n\n    const [secondary, setSecondary] = useState<string>();\n    const [secondaryId, setSecondaryId] = useState<string>();\n\n    const [tertiary, setTertiary] = useState<string>();\n    const [tertiaryId, setTertiaryId] = useState<string>();\n\n    const [containerRef, componentSize] =\n      useComponentSize<HTMLDivElement>(stackAtBreakpoint);\n\n    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;\n\n    variant === \"compact\" &&\n      isStacked &&\n      console.log(\"componentSize\", componentSize.width, containerRef.current);\n\n    const ref = useForkRef(externalRef, containerRef);\n\n    const contextValue = {\n      variant,\n      hasAvatar,\n      setHasAvatar,\n      isStacked,\n      primary,\n      setPrimary,\n      primaryId,\n      setPrimaryId,\n      secondary,\n      setSecondary,\n      secondaryId,\n      setSecondaryId,\n      tertiary,\n      setTertiary,\n      tertiaryId,\n      setTertiaryId,\n    };\n\n    const showNoAvatar = !hasAvatar && !embedded && variant !== \"mini\";\n\n    return (\n      <ContactDetailsContext.Provider value={contextValue}>\n        <div\n          {...restProps}\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            getClassName(variant, isStacked),\n            {\n              [withBaseName(\"embedded\")]: embedded,\n              [withBaseName(\"noAvatar\")]: showNoAvatar,\n            },\n            className\n          )}\n          role=\"article\"\n          aria-roledescription=\"Contact Card\"\n        >\n          {children}\n          {showNoAvatar ? (\n            <div className={withBaseName(\"noAvatar-indicator\")} />\n          ) : null}\n        </div>\n      </ContactDetailsContext.Provider>\n    );\n  }\n);\n"],"names":["ContactDetails","contactDetailsCss"],"mappings":"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"}

package/dist-es/contact-details/ContactFavoriteToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactFavoriteToggle.js","sources":["../src/contact-details/ContactFavoriteToggle.tsx"],"sourcesContent":["import { TooltipProps, useControlled, useId } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport {\n  FavoriteToggleWithTooltip,\n  FavoriteToggleWithTooltipProps,\n} from \"./internal\";\n\nexport interface ContactFavoriteToggleProps\n  extends FavoriteToggleWithTooltipProps {\n  isFavorite?: boolean;\n  defaultIsFavorite?: boolean;\n  onChange?: (isFavorite: boolean) => void;\n  tooltipProps?: TooltipProps;\n}\n\nexport const ContactFavoriteToggle = forwardRef<\n  HTMLSpanElement,\n  ContactFavoriteToggleProps\n>(function ContactFavoriteToggle(props, ref) {\n  const {\n    id: idProp,\n    isFavorite: isFavoriteProp,\n    defaultIsFavorite = false,\n    onChange: onChangeProp,\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n\n  const [isFavorite, setIsFavorite] = useControlled({\n    controlled: isFavoriteProp,\n    default: defaultIsFavorite,\n    name: \"ContactDetails\",\n    state: \"isFavorite\",\n  });\n\n  const onChange = (isSelected: boolean) => {\n    setIsFavorite(isSelected);\n    if (onChangeProp) {\n      onChangeProp(isSelected);\n    }\n  };\n\n  const tooltipTitle = `${isFavorite ? \"Remove\" : \"Mark\"} as favorite`;\n\n  return (\n    <FavoriteToggleWithTooltip\n      {...restProps}\n      id={id}\n      ref={ref}\n      tooltipProps={tooltipProps}\n      aria-label=\"Favorite\"\n      isSelected={isFavorite}\n      onChange={onChange}\n      tooltipTitle={tooltipTitle}\n    />\n  );\n});\n"],"names":["ContactFavoriteToggle"],"mappings":";;;;;;AAeO,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAoB,GAAA,KAAA;AAAA,IACpB,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,iBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,CAAC,UAAwB,KAAA;AACxC,IAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAG,EAAA,UAAA,GAAa,QAAW,GAAA,MAAA,CAAA,YAAA,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,yBAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAW,EAAA,UAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/ContactMetadata.js

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, Button } from '@salt-ds/core';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
+
+const withBaseName = makePrefixer("saltContactMetadata");
+const ContactMetadata = forwardRef(
+  function ContactMetadata2(props, ref) {
+    const { collapsible, children, collapseButtonId, className, ...restProps } = props;
+    const { primaryId, variant, isStacked } = useContactDetailsContext();
+    const [showMetadata, setShowMetadata] = useState(!collapsible);
+    const toggleShowMetadata = () => {
+      setShowMetadata(!showMetadata);
+    };
+    if (variant !== "default") {
+      return null;
+    }
+    const variantClassName = withBaseName(isStacked ? "stacked" : "default");
+    const id = useId(collapseButtonId);
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        collapsible ? /* @__PURE__ */ jsx(Button, {
+          "aria-expanded": showMetadata,
+          "aria-label": showMetadata ? "Collapse" : "Expand",
+          "aria-labelledby": `${id} ${primaryId}`,
+          id,
+          onClick: toggleShowMetadata,
+          variant: "secondary",
+          className: withBaseName("expander"),
+          children: showMetadata ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
+        }) : null,
+        !collapsible || showMetadata ? /* @__PURE__ */ jsxs("div", {
+          ...restProps,
+          ref,
+          className: clsx(withBaseName(), variantClassName, className),
+          children: [
+            collapsible ? /* @__PURE__ */ jsx("div", {
+              className: withBaseName("separator")
+            }) : null,
+            children
+          ]
+        }) : null
+      ]
+    });
+  }
+);
+
+export { ContactMetadata };
+//# sourceMappingURL=ContactMetadata.js.map

package/dist-es/contact-details/ContactMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactMetadata.js","sources":["../src/contact-details/ContactMetadata.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadata\");\n\nexport interface ContactMetadataProps extends HTMLAttributes<HTMLDivElement> {\n  collapsible?: boolean;\n  collapseButtonId?: string;\n}\n\nexport const ContactMetadata = forwardRef<HTMLDivElement, ContactMetadataProps>(\n  function ContactMetadata(props, ref) {\n    const { collapsible, children, collapseButtonId, className, ...restProps } =\n      props;\n    const { primaryId, variant, isStacked } = useContactDetailsContext();\n\n    const [showMetadata, setShowMetadata] = useState<boolean>(!collapsible);\n\n    const toggleShowMetadata = () => {\n      setShowMetadata(!showMetadata);\n    };\n\n    if (variant !== \"default\") {\n      return null;\n    }\n\n    const variantClassName = withBaseName(isStacked ? \"stacked\" : \"default\");\n\n    const id = useId(collapseButtonId);\n\n    return (\n      <>\n        {collapsible ? (\n          <Button\n            aria-expanded={showMetadata}\n            aria-label={showMetadata ? \"Collapse\" : \"Expand\"}\n            aria-labelledby={`${id} ${primaryId}`}\n            id={id}\n            onClick={toggleShowMetadata}\n            variant=\"secondary\"\n            className={withBaseName(\"expander\")}\n          >\n            {showMetadata ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          </Button>\n        ) : null}\n        {!collapsible || showMetadata ? (\n          <div\n            {...restProps}\n            ref={ref}\n            className={clsx(withBaseName(), variantClassName, className)}\n          >\n            {collapsible ? <div className={withBaseName(\"separator\")} /> : null}\n            {children}\n          </div>\n        ) : null}\n      </>\n    );\n  }\n);\n"],"names":["ContactMetadata"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAOhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,KAAA,EAAO,GAAK,EAAA;AACnC,IAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,gBAAkB,EAAA,SAAA,EAAA,GAAc,WAC7D,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,SAAA,KAAc,wBAAyB,EAAA,CAAA;AAEnE,IAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAkB,CAAC,WAAW,CAAA,CAAA;AAEtE,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,eAAA,CAAgB,CAAC,YAAY,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,IAAI,YAAY,SAAW,EAAA;AACzB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,gBAAmB,GAAA,YAAA,CAAa,SAAY,GAAA,SAAA,GAAY,SAAS,CAAA,CAAA;AAEvE,IAAM,MAAA,EAAA,GAAK,MAAM,gBAAgB,CAAA,CAAA;AAEjC,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAA,WAAA,mBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,eAAe,EAAA,YAAA;AAAA,UACf,YAAA,EAAY,eAAe,UAAa,GAAA,QAAA;AAAA,UACxC,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,SAAA,CAAA,CAAA;AAAA,UAC1B,EAAA;AAAA,UACA,OAAS,EAAA,kBAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UACR,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAEjC,QAAe,EAAA,YAAA,mBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA,uBAAM,eAAgB,EAAA,EAAA,CAAA;AAAA,SACvD,CACE,GAAA,IAAA;AAAA,QACH,CAAC,WAAe,IAAA,YAAA,mBACd,IAAA,CAAA,KAAA,EAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,kBAAkB,SAAS,CAAA;AAAA,UAE1D,QAAA,EAAA;AAAA,YAAA,WAAA,mBAAe,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,aAAG,CAAK,GAAA,IAAA;AAAA,YAC9D,QAAA;AAAA,WAAA;AAAA,SACH,CACE,GAAA,IAAA;AAAA,OAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/contact-details/ContactPrimaryInfo.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, Text } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
+
+const withBaseName = makePrefixer("saltContactPrimaryInfo");
+const ContactPrimaryInfo = forwardRef(function ContactPrimaryInfo2(props, ref) {
+  const {
+    id: idProp,
+    text,
+    className,
+    "aria-level": ariaLevel = 2,
+    ...restProps
+  } = props;
+  const { setPrimary, setPrimaryId, secondaryId, tertiaryId, variant } = useContactDetailsContext();
+  const id = useId(idProp);
+  useEffect(() => {
+    setPrimary(text || "");
+    setPrimaryId(id);
+    return () => {
+      setPrimary(void 0);
+      setPrimaryId(void 0);
+    };
+  }, [setPrimary, id, text, setPrimaryId]);
+  return /* @__PURE__ */ jsx(Text, {
+    ...restProps,
+    maxRows: 1,
+    id,
+    ref,
+    styleAs: variant === "default" ? "h2" : "h4",
+    className: clsx(withBaseName(), className),
+    role: "heading",
+    "aria-labelledby": `${id} ${secondaryId != null ? secondaryId : null} ${tertiaryId != null ? tertiaryId : null}`,
+    "aria-level": ariaLevel,
+    "data-testid": "primary",
+    children: text
+  });
+});
+
+export { ContactPrimaryInfo };
+//# sourceMappingURL=ContactPrimaryInfo.js.map

package/dist-es/contact-details/ContactPrimaryInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactPrimaryInfo.js","sources":["../src/contact-details/ContactPrimaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactPrimaryInfo\");\n\nexport interface ContactPrimaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  text: string;\n}\n\nexport const ContactPrimaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactPrimaryInfoProps\n>(function ContactPrimaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    className,\n    \"aria-level\": ariaLevel = 2,\n    ...restProps\n  } = props;\n  const { setPrimary, setPrimaryId, secondaryId, tertiaryId, variant } =\n    useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setPrimary(text || \"\");\n    setPrimaryId(id);\n    return () => {\n      setPrimary(undefined);\n      setPrimaryId(undefined);\n    };\n  }, [setPrimary, id, text, setPrimaryId]);\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      id={id}\n      ref={ref}\n      styleAs={variant === \"default\" ? \"h2\" : \"h4\"}\n      className={clsx(withBaseName(), className)}\n      role=\"heading\"\n      aria-labelledby={`${id} ${secondaryId != null ? secondaryId : null} ${\n        tertiaryId != null ? tertiaryId : null\n      }`}\n      aria-level={ariaLevel}\n      data-testid=\"primary\"\n    >\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactPrimaryInfo"],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAOnD,MAAM,kBAAqB,GAAA,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAc,SAAY,GAAA,CAAA;AAAA,IACvB,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,UAAY,EAAA,YAAA,EAAc,aAAa,UAAY,EAAA,OAAA,KACzD,wBAAyB,EAAA,CAAA;AAC3B,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,QAAQ,EAAE,CAAA,CAAA;AACrB,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,KAAS,CAAA,CAAA,CAAA;AACpB,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,KACC,CAAC,UAAA,EAAY,EAAI,EAAA,IAAA,EAAM,YAAY,CAAC,CAAA,CAAA;AAEvC,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,EAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,IAAA;AAAA,IACxC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAK,EAAA,SAAA;AAAA,IACL,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,WAAA,IAAe,OAAO,WAAc,GAAA,IAAA,CAAA,CAAA,EAC5D,UAAc,IAAA,IAAA,GAAO,UAAa,GAAA,IAAA,CAAA,CAAA;AAAA,IAEpC,YAAY,EAAA,SAAA;AAAA,IACZ,aAAY,EAAA,SAAA;AAAA,IAEX,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/ContactSecondaryInfo.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, Text } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
+
+const withBaseName = makePrefixer("saltContactSecondaryInfo");
+const ContactSecondaryInfo = forwardRef(function ContactSecondaryInfo2(props, ref) {
+  const {
+    id: idProp,
+    text,
+    icon: Icon,
+    className,
+    ValueComponent,
+    ...restProps
+  } = props;
+  const { setSecondary, setSecondaryId, variant } = useContactDetailsContext();
+  const id = useId(idProp);
+  useEffect(() => {
+    setSecondary(text || "");
+    setSecondaryId(id);
+    return () => {
+      setSecondary(void 0);
+      setSecondaryId(void 0);
+    };
+  }, [id, text, setSecondary, setSecondaryId]);
+  return /* @__PURE__ */ jsxs(Text, {
+    styleAs: variant === "default" ? "h4" : void 0,
+    maxRows: 1,
+    ...restProps,
+    id,
+    ref,
+    className: clsx(withBaseName(), className),
+    "data-testid": "secondary",
+    children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, {
+        className: withBaseName("icon")
+      }) : null,
+      text
+    ]
+  });
+});
+
+export { ContactSecondaryInfo };
+//# sourceMappingURL=ContactSecondaryInfo.js.map

package/dist-es/contact-details/ContactSecondaryInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSecondaryInfo.js","sources":["../src/contact-details/ContactSecondaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactSecondaryInfo\");\n\nexport interface ContactSecondaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n  ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactSecondaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactSecondaryInfoProps\n>(function ContactSecondaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    icon: Icon,\n    className,\n    ValueComponent,\n    ...restProps\n  } = props;\n  const { setSecondary, setSecondaryId, variant } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setSecondary(text || \"\");\n    setSecondaryId(id);\n    return () => {\n      setSecondary(undefined);\n      setSecondaryId(undefined);\n    };\n  }, [id, text, setSecondary, setSecondaryId]);\n\n  return (\n    <Text\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      maxRows={1}\n      {...restProps}\n      id={id}\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      data-testid=\"secondary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactSecondaryInfo"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AASrD,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAM,EAAA,IAAA;AAAA,IACN,SAAA;AAAA,IACA,cAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,cAAgB,EAAA,OAAA,KAAY,wBAAyB,EAAA,CAAA;AAC3E,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,QAAQ,EAAE,CAAA,CAAA;AACvB,IAAA,cAAA,CAAe,EAAE,CAAA,CAAA;AACjB,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AACtB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,YAAA,EAAc,cAAc,CAAC,CAAA,CAAA;AAE3C,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,OAAS,EAAA,CAAA;AAAA,IACR,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,aAAY,EAAA,WAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/ContactTertiaryInfo.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, Text } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import './internal/FavoriteToggleWithTooltip.js';
+import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
+
+const withBaseName = makePrefixer("saltContactTertiaryInfo");
+const ContactTertiaryInfo = forwardRef(function ContactTertiaryInfo2(props, ref) {
+  const { id: idProp, text, icon: Icon, className, ...restProps } = props;
+  const { variant, setTertiary, setTertiaryId } = useContactDetailsContext();
+  const id = useId(idProp);
+  useEffect(() => {
+    setTertiary(text);
+    setTertiaryId(id);
+    return () => {
+      setTertiary(void 0);
+      setTertiaryId(void 0);
+    };
+  }, [id, text, setTertiary, setTertiaryId]);
+  if (variant === "mini") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Text, {
+    ...restProps,
+    maxRows: 1,
+    styleAs: variant === "default" ? "h4" : void 0,
+    id,
+    ref,
+    className: clsx(withBaseName(), className),
+    "data-testid": "tertiary",
+    children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, {
+        className: withBaseName("icon")
+      }) : null,
+      text
+    ]
+  });
+});
+
+export { ContactTertiaryInfo };
+//# sourceMappingURL=ContactTertiaryInfo.js.map

package/dist-es/contact-details/ContactTertiaryInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactTertiaryInfo.js","sources":["../src/contact-details/ContactTertiaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactTertiaryInfo\");\n\nexport interface ContactTertiaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n}\n\nexport const ContactTertiaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactTertiaryInfoProps\n>(function ContactTertiaryInfo(props, ref) {\n  const { id: idProp, text, icon: Icon, className, ...restProps } = props;\n  const { variant, setTertiary, setTertiaryId } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setTertiary(text);\n    setTertiaryId(id);\n    return () => {\n      setTertiary(undefined);\n      setTertiaryId(undefined);\n    };\n  }, [id, text, setTertiary, setTertiaryId]);\n\n  if (variant === \"mini\") {\n    return null;\n  }\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      id={id}\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      data-testid=\"tertiary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactTertiaryInfo"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAQpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAM,MAAA,EAAE,IAAI,MAAQ,EAAA,IAAA,EAAM,MAAM,IAAM,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,WAAa,EAAA,aAAA,KAAkB,wBAAyB,EAAA,CAAA;AACzE,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAChB,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,KACzB,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,WAAA,EAAa,aAAa,CAAC,CAAA,CAAA;AAEzC,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,aAAY,EAAA,UAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/MailLinkComponent.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { Link, Text } from '@salt-ds/core';
+import { isEmail } from '../utils/isEmail.js';
+import 'react';
+import '../utils/useFloatingUI.js';
+
+const MailLinkComponent = (props) => {
+  const { value, ...restProps } = props;
+  return isEmail(value) ? /* @__PURE__ */ jsx(Link, {
+    href: `mailto:${value}`,
+    tabIndex: 0,
+    maxRows: 1,
+    ...restProps,
+    children: value
+  }) : /* @__PURE__ */ jsx(Text, {
+    maxRows: 1,
+    children: value
+  });
+};
+
+export { MailLinkComponent };
+//# sourceMappingURL=MailLinkComponent.js.map

package/dist-es/contact-details/MailLinkComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}

package/dist-es/contact-details/internal/FavoriteToggleWithTooltip.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Tooltip } from '@salt-ds/core';
+import { FavoriteToggle } from './FavoriteToggle.js';
+
+const FavoriteToggleWithTooltip = forwardRef(function FavoriteToggleWithTooltip2(props, ref) {
+  const {
+    tooltipTitle = "Toggle favorite",
+    tooltipProps,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(Tooltip, {
+    enterDelay: 1500,
+    placement: "bottom",
+    content: tooltipTitle,
+    children: /* @__PURE__ */ jsx(FavoriteToggle, {
+      ref,
+      ...restProps
+    })
+  });
+});
+
+export { FavoriteToggleWithTooltip };
+//# sourceMappingURL=FavoriteToggleWithTooltip.js.map

package/dist-es/contact-details/internal/FavoriteToggleWithTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteToggleWithTooltip.js","sources":["../src/contact-details/internal/FavoriteToggleWithTooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { FavoriteToggle, FavoriteToggleProps } from \"./FavoriteToggle\";\n\nexport interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {\n  tooltipProps?: TooltipProps;\n  tooltipTitle?: string;\n}\n\nexport const FavoriteToggleWithTooltip = forwardRef<\n  HTMLSpanElement,\n  FavoriteToggleWithTooltipProps\n>(function FavoriteToggleWithTooltip(props, ref) {\n  const {\n    tooltipTitle = \"Toggle favorite\",\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  return (\n    <Tooltip enterDelay={1500} placement=\"bottom\" content={tooltipTitle}>\n      <FavoriteToggle ref={ref} {...restProps} />\n    </Tooltip>\n  );\n});\n"],"names":["FavoriteToggleWithTooltip"],"mappings":";;;;;AASO,MAAM,yBAA4B,GAAA,UAAA,CAGvC,SAASA,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,iBAAA;AAAA,IACf,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,UAAY,EAAA,IAAA;AAAA,IAAM,SAAU,EAAA,QAAA;AAAA,IAAS,OAAS,EAAA,YAAA;AAAA,IACrD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,MAAe,GAAA;AAAA,MAAW,GAAG,SAAA;AAAA,KAAW,CAAA;AAAA,GAC3C,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/contact-details/internal/StarIconContainer.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { StarIcon } from './StarIcon.js';
+
+const withBaseName = makePrefixer("saltContactFavoriteToggle");
+const StarIconContainer = forwardRef(function StarIconContainer2(props, ref) {
+  const {
+    isSelected,
+    isHighlighted,
+    isFocused,
+    isFocusVisible,
+    className,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx("span", {
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("focusVisible")]: isFocusVisible
+      },
+      className
+    ),
+    ...other,
+    ref,
+    children: /* @__PURE__ */ jsx(StarIcon, {
+      className: clsx(withBaseName("svg"), {
+        [withBaseName("focused")]: isFocusVisible && isFocused,
+        [withBaseName("selected")]: isSelected && !isHighlighted,
+        [withBaseName("selecting")]: !isSelected && isHighlighted,
+        [withBaseName("deselected")]: !isSelected && !isHighlighted,
+        [withBaseName("deselecting")]: isSelected && isHighlighted
+      }),
+      highlighted: isHighlighted,
+      selected: isSelected
+    })
+  });
+});
+
+export { StarIconContainer };
+//# sourceMappingURL=StarIconContainer.js.map

package/dist-es/contact-details/internal/StarIconContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarIconContainer.js","sources":["../src/contact-details/internal/StarIconContainer.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { StarIcon } from \"./StarIcon\";\n\nconst withBaseName = makePrefixer(\"saltContactFavoriteToggle\");\n\nexport interface StarIconContainerProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  isFocusVisible?: boolean;\n  isFocused?: boolean;\n  isHighlighted?: boolean;\n  isSelected?: boolean;\n}\n\nexport const StarIconContainer = forwardRef<\n  HTMLSpanElement,\n  StarIconContainerProps\n>(function StarIconContainer(props, ref) {\n  const {\n    isSelected,\n    isHighlighted,\n    isFocused,\n    isFocusVisible,\n    className,\n    ...other\n  } = props;\n\n  return (\n    <span\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focusVisible\")]: isFocusVisible,\n        },\n        className\n      )}\n      {...other}\n      ref={ref}\n    >\n      <StarIcon\n        className={clsx(withBaseName(\"svg\"), {\n          [withBaseName(\"focused\")]: isFocusVisible && isFocused,\n          [withBaseName(\"selected\")]: isSelected && !isHighlighted,\n          [withBaseName(\"selecting\")]: !isSelected && isHighlighted,\n          [withBaseName(\"deselected\")]: !isSelected && !isHighlighted,\n          [withBaseName(\"deselecting\")]: isSelected && isHighlighted,\n        })}\n        highlighted={isHighlighted}\n        selected={isSelected}\n      />\n    </span>\n  );\n});\n"],"names":["StarIconContainer"],"mappings":";;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA,CAAA;AAWtD,MAAM,iBAAoB,GAAA,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAK,EAAA;AACvC,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,cAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,KAAK,CAAG,EAAA;AAAA,QACnC,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,cAAkB,IAAA,SAAA;AAAA,QAC7C,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,cAAc,CAAC,aAAA;AAAA,QAC3C,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,UAAc,IAAA,aAAA;AAAA,QAC5C,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,cAAc,CAAC,aAAA;AAAA,QAC9C,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,UAAc,IAAA,aAAA;AAAA,OAC9C,CAAA;AAAA,MACD,WAAa,EAAA,aAAA;AAAA,MACb,QAAU,EAAA,UAAA;AAAA,KACZ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/content-status/ContentStatus.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-text-display1-fontWeight); /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ContentStatus.css.js.map

package/dist-es/content-status/ContentStatus.css.js.map

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

package/dist-es/content-status/ContentStatus.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useAriaAnnouncer, Text, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { StatusIndicator } from './internal/StatusIndicator.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ContentStatus.css.js';
+
+const withBaseName = makePrefixer("saltContentStatus");
+const ContentStatus = forwardRef(
+  function ContentStatus2({
+    CircularProgressProps,
+    SpinnerProps,
+    actionLabel,
+    buttonRef,
+    className,
+    children,
+    disableAnnouncer,
+    message,
+    onActionClick,
+    status = "info",
+    title,
+    unit = "%",
+    value,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-content-status",
+      css: css_248z,
+      window: targetWindow
+    });
+    const id = useId();
+    const hasDefaultActionContent = actionLabel && onActionClick;
+    const hasActions = children || hasDefaultActionContent;
+    const hasContent = title || message || hasActions;
+    const { announce } = useAriaAnnouncer();
+    useEffect(() => {
+      if (disableAnnouncer)
+        return;
+      const toBeAnnounced = [];
+      if (title) {
+        toBeAnnounced.push(title);
+      }
+      if (message) {
+        toBeAnnounced.push(message);
+      }
+      if (status !== "loading") {
+        toBeAnnounced.push(status);
+      }
+      if (toBeAnnounced.length > 0) {
+        announce(toBeAnnounced.join(" "));
+      }
+    }, [announce, disableAnnouncer, message, status, title]);
+    return /* @__PURE__ */ jsxs("div", {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(StatusIndicator, {
+          CircularProgressProps,
+          SpinnerProps,
+          disableAnnouncer,
+          id,
+          message,
+          status,
+          title,
+          unit,
+          value,
+          ...rest
+        }),
+        hasContent && /* @__PURE__ */ jsxs("div", {
+          "aria-labelledby": id,
+          className: clsx(withBaseName("content")),
+          id,
+          role: "region",
+          children: [
+            title && /* @__PURE__ */ jsx(Text, {
+              className: clsx(withBaseName("title")),
+              children: title
+            }),
+            message && /* @__PURE__ */ jsx(Text, {
+              className: clsx(withBaseName("message")),
+              children: message
+            }),
+            hasActions && /* @__PURE__ */ jsx("div", {
+              className: clsx(withBaseName("actions")),
+              children: children || /* @__PURE__ */ jsx(Button, {
+                onClick: onActionClick,
+                ref: buttonRef,
+                children: actionLabel
+              })
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
+
+export { ContentStatus };
+//# sourceMappingURL=ContentStatus.js.map