@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.70

package/dist-cjs/metric/Metric.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var MetricContext = require('./internal/MetricContext.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var Metric$1 = require('./Metric.css.js');
+
+const withBaseName = core.makePrefixer("saltMetric");
+const Metric = react.forwardRef(function Metric2({
+  className,
+  children,
+  direction,
+  showIndicator,
+  align = "left",
+  orientation = "vertical",
+  indicatorPosition = "end",
+  headingAriaLevel = 2,
+  id: idProp,
+  size = "medium",
+  ...restProps
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-metric",
+    css: Metric$1,
+    window: targetWindow
+  });
+  const id = core.useId(idProp);
+  const titleId = `metric-title-${id}`;
+  const subtitleId = `metric-subtitle-${id}`;
+  const valueId = `metric-value-${id}`;
+  const value = react.useMemo(
+    () => ({
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    }),
+    [
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MetricContext.MetricContextProvider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...restProps,
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(`size-${size}`),
+        {
+          [withBaseName(`direction-${direction}`)]: direction,
+          [withBaseName(`orientation-${orientation}`)]: orientation,
+          [withBaseName(`align-${align}`)]: align
+        },
+        className
+      ),
+      id,
+      ref,
+      children
+    }
+  ) });
+});
+
+exports.Metric = Metric;
+//# sourceMappingURL=Metric.js.map

package/dist-cjs/metric/Metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Metric","useWindow","useComponentCssInjection","metricCSS","useId","useMemo","jsx","MetricContextProvider","clsx"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAmBjC,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAClC,EAAM,MAAA,UAAA,GAAa,mBAAmB,EAAE,CAAA,CAAA;AACxC,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAElC,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAAC,cAAA,CAACC,uCAAsB,KACrB,EAAA,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAAE,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC,GAAG,SAAA;AAAA,UAC1C,CAAC,YAAa,CAAA,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAC,GAAG,WAAA;AAAA,UAC9C,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG;AAAA,SACpC;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/metric/MetricContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MetricContent.css.js.map

package/dist-cjs/metric/MetricContent.css.js.map

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

package/dist-cjs/metric/MetricContent.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var clsx = require('clsx');
+var react = require('react');
+var MetricContext = require('./internal/MetricContext.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var MetricContent$1 = require('./MetricContent.css.js');
+
+const iconComponentMap = {
+  down: icons.ArrowDownIcon,
+  up: icons.ArrowUpIcon
+};
+const withBaseName = core.makePrefixer("saltMetricContent");
+const MetricContent = react.forwardRef(
+  function MetricContent2({
+    IndicatorIconProps,
+    IndicatorIconComponent,
+    className,
+    value,
+    subvalue,
+    ...restProps
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-metric-content",
+      css: MetricContent$1,
+      window: targetWindow
+    });
+    const {
+      direction,
+      showIndicator,
+      indicatorPosition,
+      size = "medium",
+      valueId,
+      titleId,
+      subtitleId
+    } = MetricContext.useMetricContext();
+    const iconSize = size === "large" ? 2 : 1;
+    const valueComponentMap = {
+      small: core.Display3,
+      medium: core.Display2,
+      large: core.Display1
+    };
+    const ValueComponent = valueComponentMap[size];
+    const iconProps = {
+      "aria-label": direction,
+      className: withBaseName("indicator"),
+      name: direction ? `movement-${direction}` : "",
+      size: iconSize,
+      ...IndicatorIconProps
+    };
+    const IconComponent = IndicatorIconComponent ?? (direction ? iconComponentMap[direction] : void 0);
+    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { ...iconProps }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...restProps,
+        className: clsx.clsx(withBaseName(), className),
+        "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("value-container"), children: [
+            indicatorPosition === "start" && icon,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ValueComponent,
+              {
+                "data-testid": "metric-value",
+                id: valueId,
+                className: withBaseName("value"),
+                children: value
+              }
+            ),
+            indicatorPosition === "end" && icon
+          ] }),
+          subvalue && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
+            {
+              className: withBaseName("subvalue"),
+              "data-testid": "metric-subvalue",
+              children: subvalue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.MetricContent = MetricContent;
+//# sourceMappingURL=MetricContent.js.map

package/dist-cjs/metric/MetricContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  Text,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type HTMLAttributes, forwardRef } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricContentCss from \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-content\",\n      css: metricContentCss,\n      window: targetWindow,\n    });\n\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["ArrowDownIcon","ArrowUpIcon","makePrefixer","forwardRef","MetricContent","useWindow","useComponentCssInjection","metricContentCss","useMetricContext","Display3","Display2","Display1","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;AAwCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAAA,mBAAA;AAAA,EACN,EAAI,EAAAC;AACN,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,QACEC,8BAAiB,EAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAAC,aAAA;AAAA,MACP,MAAQ,EAAAC,aAAA;AAAA,MACR,KAAO,EAAAC;AAAA,KACT;AACA,IAAM,MAAA,cAAA,GAAiB,kBAAkB,IAAI,CAAA;AAE7C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAM,EAAA,SAAA,GAAY,CAAY,SAAA,EAAA,SAAS,CAAK,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,KACC,SAAY,GAAA,gBAAA,CAAiB,SAAS,CAAI,GAAA,MAAA,CAAA;AAE7C,IAAA,MAAM,OACJ,aAAiB,IAAA,aAAA,kCAAiB,aAAe,EAAA,EAAA,GAAG,WAAW,CAAK,GAAA,IAAA;AAEtE,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,mBAAiB,CAAG,EAAA,OAAA,IAAW,EAAE,CAAA,CAAA,EAAI,cAAc,EAAE,CAAA,CAAA;AAAA,QACrD,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,CAC3C,EAAA,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BAClCE,cAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,aAAY,EAAA,cAAA;AAAA,gBACZ,EAAI,EAAA,OAAA;AAAA,gBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,gBAE9B,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,sBAAsB,KAAS,IAAA;AAAA,WAClC,EAAA,CAAA;AAAA,UACC,QACC,oBAAAA,cAAA;AAAA,YAACC,SAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,aAAY,EAAA,iBAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}

package/dist-cjs/metric/MetricHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MetricHeader.css.js.map

package/dist-cjs/metric/MetricHeader.css.js.map

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

package/dist-cjs/metric/MetricHeader.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var MetricContext = require('./internal/MetricContext.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var MetricHeader$1 = require('./MetricHeader.css.js');
+
+const withBaseName = core.makePrefixer("saltMetricHeader");
+const MetricHeader = react.forwardRef(
+  function MetricHeader2({ SubtitleLinkProps, className, title, subtitle, ...restProps }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-metric-header",
+      css: MetricHeader$1,
+      window: targetWindow
+    });
+    const { titleId, subtitleId, headingAriaLevel } = MetricContext.useMetricContext();
+    const renderSubtitle = react.useCallback(() => {
+      if (!subtitle) return null;
+      const subtitleComponent = /* @__PURE__ */ jsxRuntime.jsx(
+        core.Text,
+        {
+          id: subtitleId,
+          className: withBaseName("subtitle"),
+          "data-testid": "metric-subtitle",
+          variant: "secondary",
+          children: subtitle
+        }
+      );
+      if (SubtitleLinkProps) {
+        const { href = "", ...restLinkProps } = SubtitleLinkProps;
+        return /* @__PURE__ */ jsxRuntime.jsx(core.Link, { href, ...restLinkProps, children: subtitleComponent });
+      }
+      return subtitleComponent;
+    }, [subtitle, subtitleId, SubtitleLinkProps]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...restProps, className: clsx.clsx(withBaseName(), className), ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Text,
+        {
+          styleAs: "h4",
+          className: withBaseName("title"),
+          "data-testid": "metric-title",
+          id: titleId,
+          role: "heading",
+          "aria-level": headingAriaLevel,
+          children: title
+        }
+      ),
+      renderSubtitle()
+    ] });
+  }
+);
+
+exports.MetricHeader = MetricHeader;
+//# sourceMappingURL=MetricHeader.js.map

package/dist-cjs/metric/MetricHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, Text, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n          variant=\"secondary\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MetricHeader","useWindow","useComponentCssInjection","metricHeaderCss","useMetricContext","useCallback","jsx","Text","Link","jsxs","clsx"],"mappings":";;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aACP,CAAA,EAAE,iBAAmB,EAAA,SAAA,EAAW,OAAO,QAAU,EAAA,GAAG,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqBC,8BAAiB,EAAA;AAEnE,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAI,IAAA,CAAC,UAAiB,OAAA,IAAA;AAEtB,MAAA,MAAM,iBACJ,mBAAAC,cAAA;AAAA,QAACC,SAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,UAAA;AAAA,UACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UACZ,OAAQ,EAAA,WAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OACH;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAI,EAAA,GAAG,eAAkB,GAAA,iBAAA;AAExC,QAAA,uBACGD,cAAA,CAAAE,SAAA,EAAA,EAAK,IAAa,EAAA,GAAG,eACnB,QACH,EAAA,iBAAA,EAAA,CAAA;AAAA;AAIJ,MAAO,OAAA,iBAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAE5C,IACE,uBAAAC,eAAA,CAAC,KAAK,EAAA,EAAA,GAAG,SAAW,EAAA,SAAA,EAAWC,UAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAC9D,EAAA,QAAA,EAAA;AAAA,sBAAAJ,cAAA;AAAA,QAACC,SAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,cAAe;AAAA,KAClB,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/metric/internal/MetricContext.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var react = require('react');
+
+const MetricContext = react.createContext({});
+const { Provider: MetricContextProvider } = MetricContext;
+const useMetricContext = () => react.useContext(MetricContext);
+
+exports.MetricContextProvider = MetricContextProvider;
+exports.useMetricContext = useMetricContext;
+//# sourceMappingURL=MetricContext.js.map

package/dist-cjs/metric/internal/MetricContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContext.js","sources":["../src/metric/internal/MetricContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface MetricContextValue {\n  /**\n   * Text and value alignment.\n   */\n  align?: \"left\" | \"center\" | \"right\";\n  /**\n   * The direction of the main value\n   */\n  direction?: \"up\" | \"down\";\n  /**\n   * The position of the indicator with regards to the main value.\n   */\n  indicatorPosition?: \"start\" | \"end\";\n  /**\n   * The metric orientation (layout flow direction).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * If 'true', an indicator will be displayed which shows the direction of the main value\n   */\n  showIndicator?: boolean;\n  /**\n   * Set title's heading level. Defaults to 2\n   */\n  headingAriaLevel?: number;\n  /**\n   * Size of the metric value. Defaults to 'medium'\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface MetricContextComponentIds {\n  /**\n   * id of the subtitle\n   */\n  subtitleId?: string;\n  /**\n   * id of the title\n   */\n  titleId?: string;\n  /**\n   * id of the value\n   */\n  valueId?: string;\n}\n\nconst MetricContext = createContext<\n  MetricContextValue & MetricContextComponentIds\n>({});\n\nexport const { Provider: MetricContextProvider } = MetricContext;\nexport const useMetricContext = (): MetricContextValue &\n  MetricContextComponentIds => useContext(MetricContext);\n"],"names":["createContext","useContext"],"mappings":";;;;AAgDA,MAAM,aAAA,GAAgBA,mBAEpB,CAAA,EAAE,CAAA;AAES,MAAA,EAAE,QAAU,EAAA,qBAAA,EAA0B,GAAA;AACtC,MAAA,gBAAA,GAAmB,MACDC,gBAAA,CAAW,aAAa;;;;;"}

package/dist-cjs/number-input/NumberInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: none;\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: var(--salt-size-base);\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  width: 100%;\n  box-sizing: border-box;\n\n  gap: var(--salt-spacing-50);\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--numberInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-active: var(--salt-editable-primary-background-active);\n  --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-active: var(--salt-editable-secondary-background-active);\n  --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-background-active: var(--salt-status-error-background);\n  --numberInput-background-hover: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-background-active: var(--salt-status-warning-background);\n  --numberInput-background-hover: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-background-active: var(--salt-status-success-background);\n  --numberInput-background-hover: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n.saltNumberInput-inputContainer {\n  display: flex;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border: var(--numberInput-border);\n  box-sizing: border-box;\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  overflow: hidden;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  flex-grow: 1;\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltNumberInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltNumberInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --numberInput-borderWidth: var(--salt-size-border);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-readOnly .saltNumberInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n  text-align: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  text-align: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-size-border-strong);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n  --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);\n  --saltButton-width: var(--salt-size-base);\n}\n\n.saltNumberInput-numberButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=NumberInput.css.js.map

package/dist-cjs/number-input/NumberInput.css.js.map

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

package/dist-cjs/number-input/NumberInput.js

@@ -0,0 +1,254 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var utils = require('./internal/utils.js');
+var NumberInput$1 = require('./NumberInput.css.js');
+var useNumberInput = require('./useNumberInput.js');
+
+const withBaseName = core.makePrefixer("saltNumberInput");
+const NumberInput = react.forwardRef(
+  function NumberInput2({
+    bordered,
+    className: classNameProp,
+    decimalPlaces = 0,
+    defaultValue: defaultValueProp,
+    disabled,
+    emptyReadOnlyMarker = "\u2014",
+    endAdornment,
+    hideButtons,
+    inputProps: inputPropsProp = {},
+    inputRef: inputRefProp,
+    max = Number.MAX_SAFE_INTEGER,
+    min = Number.MIN_SAFE_INTEGER,
+    onChange: onChangeProp,
+    placeholder,
+    readOnly: readOnlyProp,
+    startAdornment,
+    step = 1,
+    stepBlock = 10,
+    textAlign = "left",
+    validationStatus: validationStatusProp,
+    value: valueProp,
+    variant = "primary",
+    ...restProps
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-number-input",
+      css: NumberInput$1,
+      window: targetWindow
+    });
+    const { IncreaseIcon, DecreaseIcon } = core.useIcon();
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = core.useFormFieldProps();
+    const isDisabled = disabled || formFieldDisabled;
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
+    const validationStatus = formFieldValidationStatus ?? validationStatusProp;
+    const {
+      "aria-describedby": inputDescribedBy,
+      "aria-labelledby": inputLabelledBy,
+      className: inputClassName,
+      onBlur: inputOnBlur,
+      onChange: inputOnChange,
+      onFocus: inputOnFocus,
+      required: inputRequired,
+      onKeyDown: inputOnKeyDown,
+      ...restInputProps
+    } = inputPropsProp;
+    const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputRequired;
+    const [value, setValue] = core.useControlled({
+      controlled: valueProp,
+      default: typeof defaultValueProp === "number" ? utils.toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
+      name: "NumberInput",
+      state: "value"
+    });
+    const [focused, setFocused] = react.useState(false);
+    const inputRef = react.useRef(null);
+    const forkedInputRef = core.useForkRef(inputRef, inputRefProp);
+    const {
+      decrementButtonProps,
+      decrementValue,
+      incrementButtonProps,
+      incrementValue
+    } = useNumberInput.useNumberInput({
+      inputRef,
+      setValue,
+      decimalPlaces,
+      disabled,
+      max,
+      min,
+      onChange: onChangeProp,
+      readOnly: isReadOnly,
+      step,
+      stepBlock,
+      value
+    });
+    const handleInputFocus = (event) => {
+      setFocused(true);
+      inputOnFocus == null ? void 0 : inputOnFocus(event);
+    };
+    const handleInputBlur = (event) => {
+      setFocused(false);
+      if (value === void 0) return;
+      const floatValue = utils.toFloat(value);
+      if (Number.isNaN(floatValue)) {
+        setValue(value);
+        onChangeProp == null ? void 0 : onChangeProp(event, value);
+      } else {
+        const roundedValue = utils.toFixedDecimalPlaces(floatValue, decimalPlaces);
+        if (value !== "" && !utils.isAllowedNonNumeric(value)) {
+          setValue(roundedValue);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(event, roundedValue);
+      }
+      inputOnBlur == null ? void 0 : inputOnBlur(event);
+    };
+    const handleInputChange = (event) => {
+      const changedValue = event.target.value;
+      setValue(utils.sanitizedInput(changedValue));
+      onChangeProp == null ? void 0 : onChangeProp(event, utils.sanitizedInput(changedValue));
+      inputOnChange == null ? void 0 : inputOnChange(event);
+    };
+    const handleInputKeyDown = (event) => {
+      switch (event.key) {
+        case "ArrowUp": {
+          event.preventDefault();
+          const block = event.shiftKey;
+          incrementValue(event, block);
+          break;
+        }
+        case "ArrowDown": {
+          event.preventDefault();
+          const block = event.shiftKey;
+          decrementValue(event, block);
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          setValue(min);
+          onChangeProp == null ? void 0 : onChangeProp(event, min);
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          setValue(max);
+          onChangeProp == null ? void 0 : onChangeProp(event, max);
+          break;
+        }
+        case "PageUp": {
+          event.preventDefault();
+          incrementValue(event, true);
+          break;
+        }
+        case "PageDown": {
+          event.preventDefault();
+          decrementValue(event, true);
+          break;
+        }
+      }
+      inputOnKeyDown == null ? void 0 : inputOnKeyDown(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), classNameProp),
+        ...restProps,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: clsx.clsx(
+                withBaseName("inputContainer"),
+                withBaseName(variant),
+                {
+                  [withBaseName("focused")]: !isDisabled && focused,
+                  [withBaseName("disabled")]: isDisabled,
+                  [withBaseName("readOnly")]: isReadOnly,
+                  [withBaseName(validationStatus || "")]: validationStatus,
+                  [withBaseName("bordered")]: bordered
+                }
+              ),
+              children: [
+                startAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("startAdornmentContainer"), children: startAdornment }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    "aria-describedby": clsx.clsx(formFieldDescribedBy, inputDescribedBy),
+                    "aria-labelledby": clsx.clsx(formFieldLabelledBy, inputLabelledBy),
+                    "aria-invalid": !isReadOnly ? utils.isOutOfRange(value, min, max) : void 0,
+                    "aria-valuemax": !isReadOnly ? utils.toFloat(utils.toFixedDecimalPlaces(max, decimalPlaces)) : void 0,
+                    "aria-valuemin": !isReadOnly ? utils.toFloat(utils.toFixedDecimalPlaces(min, decimalPlaces)) : void 0,
+                    "aria-valuenow": value && !Number.isNaN(utils.toFloat(value)) && !isReadOnly ? utils.toFloat(utils.toFixedDecimalPlaces(utils.toFloat(value), decimalPlaces)) : void 0,
+                    className: clsx.clsx(
+                      withBaseName("input"),
+                      withBaseName(`inputTextAlign${core.capitalize(textAlign)}`),
+                      inputClassName
+                    ),
+                    disabled: isDisabled,
+                    onBlur: handleInputBlur,
+                    onChange: handleInputChange,
+                    onFocus: !isDisabled ? handleInputFocus : void 0,
+                    onKeyDown: handleInputKeyDown,
+                    placeholder,
+                    readOnly: isReadOnly,
+                    "aria-readonly": isReadOnly ? "true" : void 0,
+                    ref: forkedInputRef,
+                    required: isRequired,
+                    role: isReadOnly ? "textbox" : "spinbutton",
+                    tabIndex: isDisabled ? -1 : 0,
+                    value,
+                    ...restInputProps
+                  }
+                ),
+                !isDisabled && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, { status: validationStatus }),
+                endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("endAdornmentContainer"), children: endAdornment }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("activationIndicator") })
+              ]
+            }
+          ),
+          !hideButtons && !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("buttonContainer"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.Button,
+              {
+                className: clsx.clsx(
+                  withBaseName("numberButton"),
+                  withBaseName("numberButtonIncrement")
+                ),
+                ...incrementButtonProps,
+                children: /* @__PURE__ */ jsxRuntime.jsx(IncreaseIcon, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.Button,
+              {
+                className: clsx.clsx(
+                  withBaseName("numberButton"),
+                  withBaseName("numberButtonDecrement")
+                ),
+                ...decrementButtonProps,
+                children: /* @__PURE__ */ jsxRuntime.jsx(DecreaseIcon, { "aria-hidden": true })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+exports.NumberInput = NumberInput;
+//# sourceMappingURL=NumberInput.js.map