@salt-ds/core 1.7.1 → 1.8.0-rc.1

package/dist-es/{packages/core/src/spinner → spinner}/Spinner.js

@@ -9,7 +9,9 @@ import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { SpinnerSVG } from './svgSpinners/SpinnerSVG.js';
-import './Spinner.css.js';
+import css_248z from './Spinner.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 
 const SpinnerSizeValues = ["default", "large"];
 const withBaseName = makePrefixer("saltSpinner");
@@ -27,6 +29,12 @@ const Spinner = forwardRef(
     ...rest
   }, ref) {
     const id = useId(idProp);
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-spinner",
+      css: css_248z,
+      window: targetWindow
+    });
     const { announce } = useAriaAnnouncer();
     useEffect(() => {
       if (disableAnnouncer)

package/dist-es/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport spinnerCss from \"./Spinner.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"default | large\" />\n */\n\nexport const SpinnerSizeValues = [\"default\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"default\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG id={id} />\n      </div>\n    );\n  }\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;AAiBa,MAAA,iBAAA,GAAoB,CAAC,SAAA,EAAW,OAAO,EAAA;AAEpD,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAqCxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA,CAAA;AAClC,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MAC7D,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,EAAA;AAAA,OAAQ,CAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/{packages/core/src/stack-layout → stack-layout}/StackLayout.css.js

@@ -1,7 +1,4 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
 var css_248z = "/* Default variables applied to the root element */\n.saltStackLayout {\n  --stackLayout-gap-multiplier: var(--stackLayout-gap-density-multiplier, 3);\n  --stackLayout-separator-weight: var(--salt-size-border, 1);\n  --stackLayout-gap: calc(var(--salt-size-unit) * var(--stackLayout-gap-multiplier));\n}\n\n.saltStackLayout-separator > * {\n  position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* \n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n  --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n  height: 100%;\n  width: var(--stackLayout-separator-weight);\n  right: var(--stackLayout-seperator-offset);\n  top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n  width: 100%;\n  height: var(--stackLayout-separator-weight);\n  bottom: var(--stackLayout-seperator-offset);\n  left: 0;\n}\n";
-styleInject(css_248z);
 
 export { css_248z as default };
 //# sourceMappingURL=StackLayout.css.js.map

package/{dist-cjs/packages/core/src → dist-es}/stack-layout/StackLayout.css.js.map

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

package/dist-es/{packages/core/src/stack-layout → stack-layout}/StackLayout.js

@@ -6,7 +6,9 @@ import '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import { useResponsiveProp } from '../utils/useResponsiveProp.js';
 import { clsx } from 'clsx';
-import './StackLayout.css.js';
+import css_248z from './StackLayout.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 
 const withBaseName = makePrefixer("saltStackLayout");
 const StackLayout = forwardRef(
@@ -19,6 +21,12 @@ const StackLayout = forwardRef(
     style,
     ...rest
   }, ref) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-stack-layout",
+      css: css_248z,
+      window: targetWindow
+    });
     const flexGap = useResponsiveProp(gap, 3);
     const separatorAlignment = separators === true ? "center" : separators;
     const flexDirection = useResponsiveProp(direction, "column");

package/dist-es/stack-layout/StackLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  LayoutDirection,\n  LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  ResponsiveProp,\n  useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport stackLayoutCss from \"./StackLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const flexGap = useResponsiveProp(gap, 3);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = useResponsiveProp(direction, \"column\");\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap-multiplier\": flexGap,\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          withBaseName(flexDirection),\n          {\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["stackLayoutCss"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/status-adornment/ErrorAdornment.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const ErrorAdornmentIcon = forwardRef(function ErrorAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    ref,
+    viewBox: "0 0 8 8",
+    children: /* @__PURE__ */ jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z"
+    })
+  });
+});
+
+export { ErrorAdornmentIcon };
+//# sourceMappingURL=ErrorAdornment.js.map

package/dist-es/status-adornment/ErrorAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAdornment.js","sources":["../src/status-adornment/ErrorAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type ErrorAdornmentIconProps = IconProps;\n\nexport const ErrorAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  ErrorAdornmentIconProps\n>(function ErrorAdornmentIcon(\n  { children, className, ...rest }: ErrorAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg className={className} {...rest} role=\"img\" ref={ref} viewBox=\"0 0 8 8\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z\"\n      />\n    </svg>\n  );\n});\n"],"names":["ErrorAdornmentIcon"],"mappings":";;;AAKa,MAAA,kBAAA,GAAqB,WAGhC,SAASA,mBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,IAAuB,GAAG,IAAA;AAAA,IAAM,IAAK,EAAA,KAAA;AAAA,IAAM,GAAA;AAAA,IAAU,OAAQ,EAAA,SAAA;AAAA,IAChE,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,WAAU,EAAA,SAAA;AAAA,MACV,WAAU,EAAA,SAAA;AAAA,MACV,CAAE,EAAA,uGAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/status-adornment/StatusAdornment.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltStatusAdornment {\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  display: inline-block;\n  position: relative;\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=StatusAdornment.css.js.map

package/dist-es/status-adornment/StatusAdornment.css.js.map

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

package/dist-es/status-adornment/StatusAdornment.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { ErrorAdornmentIcon } from './ErrorAdornment.js';
+import { SuccessAdornmentIcon } from './SuccessAdornment.js';
+import { WarningAdornmentIcon } from './WarningAdornment.js';
+import css_248z from './StatusAdornment.css.js';
+
+const icons = {
+  error: ErrorAdornmentIcon,
+  warning: WarningAdornmentIcon,
+  success: SuccessAdornmentIcon
+};
+const statusToAriaLabelMap = {
+  error: "error",
+  warning: "warning",
+  success: "success"
+};
+const withBaseName = makePrefixer("saltStatusAdornment");
+const StatusAdornment = forwardRef(
+  function StatusAdornment2({ className, status, ...restProps }, ref) {
+    const AdornmentComponent = icons[status];
+    const ariaLabel = statusToAriaLabelMap[status];
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-status-adornment",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(AdornmentComponent, {
+      className: clsx(withBaseName(), withBaseName(status), className),
+      "aria-label": ariaLabel,
+      ...restProps,
+      ref
+    });
+  }
+);
+
+export { StatusAdornment };
+//# sourceMappingURL=StatusAdornment.js.map

package/dist-es/status-adornment/StatusAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n  error: ErrorAdornmentIcon,\n  warning: WarningAdornmentIcon,\n  success: SuccessAdornmentIcon,\n};\n\ntype AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n  /**\n   * Status adornment to be displayed.\n   */\n  status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n  error: \"error\",\n  warning: \"warning\",\n  success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n  function StatusAdornment({ className, status, ...restProps }, ref) {\n    const AdornmentComponent = icons[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-adornment\",\n      css: statusAdornmentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <AdornmentComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/status-adornment/SuccessAdornment.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const SuccessAdornmentIcon = forwardRef(function SuccessAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 10 8",
+    ref,
+    children: /* @__PURE__ */ jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z"
+    })
+  });
+});
+
+export { SuccessAdornmentIcon };
+//# sourceMappingURL=SuccessAdornment.js.map

package/dist-es/status-adornment/SuccessAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n  { children, className, ...rest }: SuccessAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg\n      className={className}\n      {...rest}\n      role=\"img\"\n      viewBox=\"0 0 10 8\"\n      ref={ref}\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z\"\n      />\n    </svg>\n  );\n});\n"],"names":["SuccessAdornmentIcon"],"mappings":";;;AAKa,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,UAAA;AAAA,IACR,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,WAAU,EAAA,SAAA;AAAA,MACV,WAAU,EAAA,SAAA;AAAA,MACV,CAAE,EAAA,2FAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/status-adornment/WarningAdornment.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const WarningAdornmentIcon = forwardRef(function WarningAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 9 8",
+    ref,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M0 8L4.5 0L9 8H0Z"
+    })
+  });
+});
+
+export { WarningAdornmentIcon };
+//# sourceMappingURL=WarningAdornment.js.map

package/dist-es/status-adornment/WarningAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningAdornment.js","sources":["../src/status-adornment/WarningAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type WarningAdornmentIconProps = IconProps;\n\nexport const WarningAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  WarningAdornmentIconProps\n>(function WarningAdornmentIcon(\n  { children, className, ...rest }: WarningAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg className={className} {...rest} role=\"img\" viewBox=\"0 0 9 8\" ref={ref}>\n      <path d=\"M0 8L4.5 0L9 8H0Z\" />\n    </svg>\n  );\n});\n"],"names":["WarningAdornmentIcon"],"mappings":";;;AAKa,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,IAAuB,GAAG,IAAA;AAAA,IAAM,IAAK,EAAA,KAAA;AAAA,IAAM,OAAQ,EAAA,SAAA;AAAA,IAAU,GAAA;AAAA,IAChE,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MAAK,CAAE,EAAA,mBAAA;AAAA,KAAoB,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/{packages/core/src/status-indicator → status-indicator}/StatusIndicator.css.js

@@ -1,7 +1,4 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
 var css_248z = ".saltStatusIndicator {\n  --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n  --statusIndicator-info-color: var(--salt-status-info-foreground);\n  --statusIndicator-success-color: var(--salt-status-success-foreground);\n  --statusIndicator-error-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusIndicator-error {\n  --saltIcon-color: var(--saltStatusIndicator-color, var(--statusIndicator-error-color));\n}\n\n.saltStatusIndicator-warning {\n  --saltIcon-color: var(--saltStatusIndicator-color, var(--statusIndicator-warning-color));\n}\n\n.saltStatusIndicator-success {\n  --saltIcon-color: var(--saltStatusIndicator-color, var(--statusIndicator-success-color));\n}\n\n.saltStatusIndicator-info {\n  --saltIcon-color: var(--saltStatusIndicator-color, var(--statusIndicator-info-color));\n}\n";
-styleInject(css_248z);
 
 export { css_248z as default };
 //# sourceMappingURL=StatusIndicator.css.js.map

package/{dist-cjs/packages/core/src → dist-es}/status-indicator/StatusIndicator.css.js.map

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

package/dist-es/{packages/core/src/status-indicator → status-indicator}/StatusIndicator.js

@@ -7,7 +7,9 @@ import '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import './StatusIndicator.css.js';
+import css_248z from './StatusIndicator.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 
 const icons = {
   error: ErrorSolidIcon,
@@ -24,6 +26,12 @@ const statusToAriaLabelMap = {
 const withBaseName = makePrefixer("saltStatusIndicator");
 const StatusIndicator = forwardRef(
   function StatusIndicator2({ className, status, size = DEFAULT_ICON_SIZE, ...restProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-status-indicator",
+      css: css_248z,
+      window: targetWindow
+    });
     const IconComponent = icons[status];
     const ariaLabel = statusToAriaLabelMap[status];
     return /* @__PURE__ */ jsx(IconComponent, {

package/dist-es/status-indicator/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n  DEFAULT_ICON_SIZE,\n  ErrorSolidIcon,\n  IconProps,\n  InfoSolidIcon,\n  SuccessTickIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst icons = {\n  error: ErrorSolidIcon,\n  success: SuccessTickIcon,\n  warning: WarningSolidIcon,\n  info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n  /**\n   * Status indicator to be displayed.\n   */\n  status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n  error: \"error\",\n  success: \"success\",\n  warning: \"warning\",\n  info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n  function StatusIndicator(\n    { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-indicator\",\n      css: statusIndicatorCss,\n      window: targetWindow,\n    });\n\n    const IconComponent = icons[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    return (\n      <IconComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        size={size}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["StatusIndicator","statusIndicatorCss"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,cAAA;AAAA,EACP,OAAS,EAAA,eAAA;AAAA,EACT,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AACR,CAAA,CAAA;AASA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AACR,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,iBACP,EAAE,SAAA,EAAW,QAAQ,IAAO,GAAA,iBAAA,EAAA,GAAsB,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA,CAAA;AAC5B,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/{packages/core/src/text → text}/Text.css.js

@@ -1,7 +1,4 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
 var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
-styleInject(css_248z);
 
 export { css_248z as default };
 //# sourceMappingURL=Text.css.js.map

package/{dist-cjs/packages/core/src → dist-es}/text/Text.css.js.map

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

package/dist-es/{packages/core/src/text → text}/Text.js

@@ -6,7 +6,9 @@ import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { clsx } from 'clsx';
-import './Text.css.js';
+import css_248z from './Text.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 
 const withBaseName = makePrefixer("saltText");
 const Text = forwardRef(
@@ -21,6 +23,12 @@ const Text = forwardRef(
     variant = "primary",
     ...restProps
   }, ref) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-text",
+      css: css_248z,
+      window: targetWindow
+    });
     const Component = as || "div";
     const textStyles = { "--text-max-rows": maxRows, ...style };
     return /* @__PURE__ */ jsx(Component, {

package/dist-es/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\";\n    /**\n     * Change text color palette\n     */\n    variant?: \"primary\" | \"secondary\";\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant = \"primary\",\n      ...restProps\n    }: TextProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-text\",\n      css: textCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n\n    const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"lineClamp\")]: maxRows,\n            [withBaseName(styleAs || \"\")]: styleAs,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        style={textStyles}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/{packages/core/src/tooltip → tooltip}/Tooltip.css.js

@@ -1,7 +1,4 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
 var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
-styleInject(css_248z);
 
 export { css_248z as default };
 //# sourceMappingURL=Tooltip.css.js.map

package/{dist-cjs/packages/core/src → dist-es}/tooltip/Tooltip.css.js.map

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

package/dist-es/{packages/core/src/tooltip → tooltip}/Tooltip.js

@@ -2,6 +2,8 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI.js';
@@ -11,7 +13,9 @@ import { SaltProvider } from '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { mergeProps } from '../utils/mergeProps.js';
 import { useTooltip } from './useTooltip.js';
-import './Tooltip.css.js';
+import css_248z from './Tooltip.css.js';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 
 const withBaseName = makePrefixer("saltTooltip");
 const Tooltip = forwardRef(
@@ -19,17 +23,30 @@ const Tooltip = forwardRef(
     const {
       children,
       className,
-      disabled,
+      disabled: disabledProp,
       hideArrow = false,
       hideIcon = false,
       open: openProp,
       content,
-      status = "info",
+      status: statusProp = "info",
       placement = "right",
       enterDelay = 300,
       leaveDelay = 0,
       ...rest
     } = props;
+    const {
+      a11yProps,
+      disabled: formFieldDisabled,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
+    const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
+    const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tooltip",
+      css: css_248z,
+      window: targetWindow
+    });
     const hookProps = {
       open: openProp,
       placement,
@@ -76,6 +93,7 @@ const Tooltip = forwardRef(
                       className: withBaseName("icon")
                     }),
                     /* @__PURE__ */ jsx("span", {
+                      id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
                       className: withBaseName("content"),
                       children: content
                     })

package/dist-es/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      a11yProps,\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status = formFieldValidationStatus ?? statusProp;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tooltip\",\n      css: tooltipCss,\n      window: targetWindow,\n    });\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span\n                    id={a11yProps?.[\"aria-describedby\"]}\n                    className={withBaseName(\"content\")}\n                  >\n                    {content}\n                  </span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}

package/dist-types/avatar/Avatar.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-import "./Avatar.css";
 export declare type NameToInitials = (name?: string) => string;
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     /**

package/dist-types/banner/Banner.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+import { ValidationStatus } from "../status-indicator";
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Emphasize the styling by applying a background color: defaults to false
+     */
+    variant?: "primary" | "secondary";
+    /**
+     *  A string to determine the current state of the Banner
+     */
+    status?: ValidationStatus;
+}
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/banner/BannerActions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const BannerActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/banner/BannerContent.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const BannerContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/banner/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Banner";
+export * from "./BannerActions";
+export * from "./BannerContent";

package/dist-types/border-item/BorderItem.d.ts

@@ -1,6 +1,5 @@
 import { ElementType, ReactElement } from "react";
 import { GridItemProps } from "../grid-item";
-import "./BorderItem.css";
 import { PolymorphicComponentPropWithRef } from "../utils";
 export declare const BORDER_POSITION: readonly ["north", "west", "center", "east", "south"];
 export declare type BorderPosition = typeof BORDER_POSITION[number];

package/dist-types/button/Button.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPropsWithoutRef } from "react";
-import "./Button.css";
 export declare const ButtonVariantValues: readonly ["primary", "secondary", "cta"];
 export declare type ButtonVariant = typeof ButtonVariantValues[number];
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {

package/dist-types/card/Card.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPropsWithoutRef } from "react";
-import "./Card.css";
 export interface CardProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * **Deprecated:** Use the InteractableCard component instead

package/dist-types/card/InteractableCard.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CardProps } from "./Card";
-import "./InteractableCard.css";
 export interface InteractableCardProps extends Omit<CardProps, "disabled" | "interactable"> {
     /**
      * Accent border position: defaults to "bottom"

package/dist-types/checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
-import "./Checkbox.css";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
     /**
      * If `true`, the checkbox will be checked.

package/dist-types/checkbox/CheckboxGroup.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
-import "./CheckboxGroup.css";
 export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
     /**
      * The current checked options.

package/dist-types/checkbox/CheckboxIcon.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import "./CheckboxIcon.css";
 export interface CheckboxIconProps {
     checked?: boolean;
     className?: string;

package/dist-types/flex-item/FlexItem.d.ts

@@ -1,6 +1,5 @@
 import { ElementType, ReactElement, CSSProperties } from "react";
 import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
-import "./FlexItem.css";
 export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
 export declare type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];
 export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {

package/dist-types/flex-layout/FlexLayout.d.ts

@@ -1,6 +1,5 @@
 import { ElementType, ReactElement } from "react";
 import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
-import "./FlexLayout.css";
 export declare type LayoutSeparator = "start" | "center" | "end";
 export declare type LayoutDirection = "row" | "column";
 export declare const FLEX_ALIGNMENT_BASE: readonly ["start", "end", "center"];

package/dist-types/form-field/FormField.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react";
+import { A11yValueProps } from "../form-field-context";
+export declare type FormFieldLabelPlacement = "top" | "left";
+export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValueProps {
+    /**
+     * Disabled prop
+     */
+    disabled?: boolean;
+    /**
+     * Location of the label, values: 'top' (default) or 'left'
+     */
+    labelPlacement?: FormFieldLabelPlacement;
+    /**
+     * Readonly prop
+     */
+    readOnly?: boolean;
+    /**
+     * Optional id prop
+     *
+     * Used as suffix of FormFieldLabel id: `label-{id}`
+     * Used as suffix of FormFieldHelperText id: `helperText-{id}`
+     */
+    id?: string;
+    /**
+     * Validation status
+     */
+    validationStatus?: "error" | "warning" | "success";
+}
+export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/form-field/FormFieldControlWrapper.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare const FormFieldControlWrapper: ({ children }: PropsWithChildren) => JSX.Element;

package/dist-types/form-field/FormFieldHelperText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextProps } from "../text";
+export declare const FormFieldHelperText: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;

package/dist-types/form-field/FormFieldLabel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextProps } from "../text";
+export declare const FormFieldLabel: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;

package/dist-types/form-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormField";
+export * from "./FormFieldControlWrapper";
+export * from "./FormFieldHelperText";
+export * from "./FormFieldLabel";