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

package/dist-cjs/logo/LogoSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport logoSeparatorCss from \"./LogoSeparator.css\";\n\nexport type LogoSeparatorProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogoSeparator\");\n\nexport const LogoSeparator = forwardRef<HTMLImageElement, LogoSeparatorProps>(\n  function LogoSeparator(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-separator\",\n      css: logoSeparatorCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span {...rest} className={clsx(withBaseName(), className)} ref={ref} />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LogoSeparator","useWindow","useComponentCssInjection","logoSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,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,IACE,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,GAAG,IAAM,EAAA,SAAA,EAAWC,UAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAAU,EAAA,CAAA;AAAA;AAG5E;;;;"}
+{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport logoSeparatorCss from \"./LogoSeparator.css\";\n\nexport type LogoSeparatorProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogoSeparator\");\n\nexport const LogoSeparator = forwardRef<HTMLImageElement, LogoSeparatorProps>(\n  function LogoSeparator(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-separator\",\n      css: logoSeparatorCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span {...rest} className={clsx(withBaseName(), className)} ref={ref} />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LogoSeparator","useWindow","useComponentCssInjection","logoSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,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,IACE,uBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,GAAG,IAAM,EAAA,SAAA,EAAWC,UAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAAU,EAAA,CAAA;AAAA;AAG5E;;;;"}

package/dist-cjs/menu-button/MenuButton.js

@@ -5,8 +5,8 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var react = require('react');
 var CascadingMenu = require('../cascading-menu/CascadingMenu.js');
-var MenuButtonTrigger = require('./MenuButtonTrigger.js');
 var MenuButton$1 = require('./MenuButton.css.js');
+var MenuButtonTrigger = require('./MenuButtonTrigger.js');
 
 const MenuButton = react.forwardRef(
   function MenuButton2({ variant = "secondary", CascadingMenuProps = {}, children, ...restProps }, ref) {

package/dist-cjs/menu-button/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactNode, forwardRef, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nimport menuButtonCss from \"./MenuButton.css\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["forwardRef","MenuButton","useWindow","useComponentCssInjection","menuButtonCss","useState","useCallback","jsx","CascadingMenu","MenuButtonTrigger"],"mappings":";;;;;;;;;;AAgBO,MAAM,UAAa,GAAAA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,GAAqB,EAAC,EAAG,QAAU,EAAA,GAAG,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,kBAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,KACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IACE,uBAAAC,cAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,MAAQ,EAAA,UAAA;AAAA,QACP,GAAG,aAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAACE,mCAAA;AAAA,UAAA;AAAA,YACC,eAAe,EAAA,UAAA;AAAA,YACf,eAAa,EAAA,IAAA;AAAA,YACb,UAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef, type ReactNode, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport menuButtonCss from \"./MenuButton.css\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["forwardRef","MenuButton","useWindow","useComponentCssInjection","menuButtonCss","useState","useCallback","jsx","CascadingMenu","MenuButtonTrigger"],"mappings":";;;;;;;;;;AAeO,MAAM,UAAa,GAAAA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,GAAqB,EAAC,EAAG,QAAU,EAAA,GAAG,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,kBAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,KACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IACE,uBAAAC,cAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,MAAQ,EAAA,UAAA;AAAA,QACP,GAAG,aAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAACE,mCAAA;AAAA,UAAA;AAAA,YACC,eAAe,EAAA,UAAA;AAAA,YACf,eAAa,EAAA,IAAA;AAAA,YACb,UAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/menu-button/MenuButtonTrigger.js

@@ -2,10 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var react = require('react');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
 var MenuButtonTrigger$1 = require('./MenuButtonTrigger.css.js');
 
 const withBaseName = core.makePrefixer("saltMenuButtonTrigger");

package/dist-cjs/menu-button/MenuButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","MenuButtonTrigger","useWindow","useComponentCssInjection","menuButtonTrigger","useIcon","jsxs","Button","clsx","jsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AASlD,MAAM,iBAAoB,GAAAC,gBAAA,CAG/B,SAASC,kBAAAA,CACT,EAAE,SAAA,EAAW,SAAW,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAE/B,EACE,uBAAAC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,OAC/B,CAAA;AAAA,MACD,aAAY,EAAA,qBAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,SACA,oBAAAC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,aAAY,EAAA;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","MenuButtonTrigger","useWindow","useComponentCssInjection","menuButtonTrigger","useIcon","jsxs","Button","clsx","jsx"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AASlD,MAAM,iBAAoB,GAAAC,gBAAA,CAG/B,SAASC,kBAAAA,CACT,EAAE,SAAA,EAAW,SAAW,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAE/B,EACE,uBAAAC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,OAC/B,CAAA;AAAA,MACD,aAAY,EAAA,qBAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,SACA,oBAAAC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,aAAY,EAAA;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-cjs/metric/Metric.js

@@ -2,11 +2,11 @@
 
 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 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");

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

@@ -1 +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;;;;"}
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\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":";;;;;;;;;;;AASA,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

@@ -1,6 +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";
+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-sentiment-positive-foreground-decorative);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-positive-foreground-informative);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-negative-foreground-decorative);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-negative-foreground-informative);\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.js

@@ -3,11 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 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 = {

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

@@ -1 +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;;;;"}
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  makePrefixer,\n  Text,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, forwardRef, type HTMLAttributes } from \"react\";\nimport { useMetricContext } from \"./internal\";\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":";;;;;;;;;;;;AAuCA,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.js

@@ -2,11 +2,11 @@
 
 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 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");

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

@@ -1 +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;;;;"}
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\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":";;;;;;;;;;;AA0BA,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/number-input/NumberInput.css.js

@@ -1,6 +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";
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\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  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--numberInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-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/* 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  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\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-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\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-size-fixed-200);\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/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\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-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\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-startAdornmentContainer {\n  margin-left: 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(--button-borderWidth));\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  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n\n.saltNumberInput-numberButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=NumberInput.css.js.map

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

@@ -6,6 +6,7 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
+var useCaret = require('./internal/useCaret.js');
 var utils = require('./internal/utils.js');
 var NumberInput$1 = require('./NumberInput.css.js');
 var useNumberInput = require('./useNumberInput.js');
@@ -13,28 +14,32 @@ var useNumberInput = require('./useNumberInput.js');
 const withBaseName = core.makePrefixer("saltNumberInput");
 const NumberInput = react.forwardRef(
   function NumberInput2({
-    bordered,
+    bordered = false,
     className: classNameProp,
-    decimalPlaces = 0,
-    defaultValue: defaultValueProp,
+    clamp = false,
     disabled,
     emptyReadOnlyMarker = "\u2014",
     endAdornment,
+    format,
     hideButtons,
+    id: idProp,
     inputProps: inputPropsProp = {},
     inputRef: inputRefProp,
     max = Number.MAX_SAFE_INTEGER,
     min = Number.MIN_SAFE_INTEGER,
     onChange: onChangeProp,
+    parse,
     placeholder,
+    decimalScale: decimalScaleProp,
     readOnly: readOnlyProp,
     startAdornment,
     step = 1,
-    stepBlock = 10,
+    stepMultiplier = 2,
     textAlign = "left",
     validationStatus: validationStatusProp,
     value: valueProp,
     variant = "primary",
+    defaultValue: defaultValueProp = "",
     ...restProps
   }, ref) {
     const targetWindow = window.useWindow();
@@ -43,7 +48,6 @@ const NumberInput = react.forwardRef(
       css: NumberInput$1,
       window: targetWindow
     });
-    const { IncreaseIcon, DecreaseIcon } = core.useIcon();
     const {
       a11yProps: {
         "aria-describedby": formFieldDescribedBy,
@@ -57,6 +61,12 @@ const NumberInput = react.forwardRef(
     const isDisabled = disabled || formFieldDisabled;
     const isReadOnly = readOnlyProp || formFieldReadOnly;
     const validationStatus = formFieldValidationStatus ?? validationStatusProp;
+    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
+    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const validationStatusId = core.useId(idProp);
+    const inputRef = react.useRef(null);
+    const handleInputRef = core.useForkRef(inputRefProp, inputRef);
+    const { IncreaseIcon, DecreaseIcon } = core.useIcon();
     const {
       "aria-describedby": inputDescribedBy,
       "aria-labelledby": inputLabelledBy,
@@ -69,60 +79,112 @@ const NumberInput = react.forwardRef(
       ...restInputProps
     } = inputPropsProp;
     const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputRequired;
+    const isAdjustingRef = react.useRef(false);
+    const [isEditing, setIsEditing] = react.useState(false);
+    const [isFocused, setIsFocused] = react.useState(false);
+    const [recordCaret, restoreCaret, resetCaret] = useCaret({
+      inputRef
+    });
     const [value, setValue] = core.useControlled({
       controlled: valueProp,
-      default: typeof defaultValueProp === "number" ? utils.toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
+      default: defaultValue,
       name: "NumberInput",
       state: "value"
     });
-    const [focused, setFocused] = react.useState(false);
-    const inputRef = react.useRef(null);
-    const forkedInputRef = core.useForkRef(inputRef, inputRefProp);
+    const decimalScale = decimalScaleProp || Math.max(utils.getNumberPrecision(value), utils.getNumberPrecision(step));
+    const [displayValue, setDisplayValue] = react.useState(value);
+    const clampAndFix = (value2) => {
+      const clampedValue = clamp ? utils.clampToRange(min, max, value2) : value2;
+      return !format ? clampedValue.toFixed(decimalScale) : clampedValue;
+    };
     const {
       decrementButtonProps,
       decrementValue,
       incrementButtonProps,
       incrementValue
     } = useNumberInput.useNumberInput({
-      inputRef,
-      setValue,
-      decimalPlaces,
+      clampAndFix,
+      decimalScale,
       disabled,
+      format,
+      inputRef,
+      isAdjustingRef,
       max,
       min,
       onChange: onChangeProp,
+      parse,
       readOnly: isReadOnly,
+      setIsEditing,
+      setValue,
       step,
-      stepBlock,
+      stepMultiplier,
       value
     });
+    react.useEffect(() => {
+      const formatValue = () => {
+        const sanitizedValue = utils.sanitizeInput(value);
+        const floatValue = utils.toFloat(sanitizedValue);
+        if (!isAdjustingRef.current && (isEditing || utils.isEmpty(value) || Number.isNaN(floatValue) || isReadOnly)) {
+          return value;
+        }
+        if (isAdjustingRef.current) {
+          return clampAndFix(utils.toFloat(value));
+        }
+        const clampedValue = clampAndFix(floatValue);
+        return format ? format(clampedValue) : clampedValue;
+      };
+      const updatedValue = formatValue();
+      setDisplayValue(updatedValue);
+    }, [value, isEditing, isReadOnly, format, clamp, decimalScale, min, max]);
+    react.useLayoutEffect(() => {
+      if (isAdjustingRef.current) {
+        resetCaret();
+      } else {
+        restoreCaret();
+      }
+    }, [displayValue, value]);
     const handleInputFocus = (event) => {
-      setFocused(true);
+      setIsFocused(true);
+      if (isReadOnly) return;
+      const parsedValue = (parse == null ? void 0 : parse(value)) ?? value;
+      const updatedValue = !utils.isEmpty(parsedValue) ? clampAndFix(utils.toFloat(parsedValue)) : parsedValue;
+      setDisplayValue(updatedValue);
       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);
+      setIsFocused(false);
+      if (isReadOnly) return;
+      setIsEditing(false);
+      isAdjustingRef.current = false;
+      resetCaret();
+      const inputValue = event.target.value;
+      if (utils.isEmpty(inputValue)) {
+        return;
       }
+      const sanitizedValue = utils.sanitizeInput(event.target.value);
+      const floatValue = utils.toFloat(sanitizedValue);
+      const clampedValue = clampAndFix(floatValue);
+      if (clampedValue.toString() !== value.toString()) {
+        setValue(clampedValue);
+        onChangeProp == null ? void 0 : onChangeProp(event, clampedValue);
+      }
+      const formattedValue = format ? format(clampedValue) : clampedValue;
+      setDisplayValue(formattedValue);
       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);
+      recordCaret();
+      const raw = utils.sanitizeInput(event.target.value);
+      if (raw.toString() === value.toString()) {
+        return;
+      }
+      const parsed = parse && !isEditing ? parse(raw) : raw;
+      setValue(parsed);
+      onChangeProp == null ? void 0 : onChangeProp(event, parsed);
     };
     const handleInputKeyDown = (event) => {
+      setIsEditing(true);
+      isAdjustingRef.current = false;
       switch (event.key) {
         case "ArrowUp": {
           event.preventDefault();
@@ -161,66 +223,69 @@ const NumberInput = react.forwardRef(
       }
       inputOnKeyDown == null ? void 0 : inputOnKeyDown(event);
     };
+    const handleBeforeInput = () => {
+      setIsEditing(true);
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx.clsx(withBaseName(), classNameProp),
+        className: clsx.clsx(
+          withBaseName(),
+          withBaseName(variant),
+          {
+            [withBaseName("focused")]: isFocused,
+            [withBaseName("disabled")]: isDisabled,
+            [withBaseName("readOnly")]: isReadOnly,
+            [withBaseName("hiddenButtons")]: hideButtons,
+            [withBaseName(validationStatus || "")]: validationStatus,
+            [withBaseName("bordered")]: bordered
+          },
+          classNameProp
+        ),
         ...restProps,
         ref,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+          startAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("startAdornmentContainer"), children: startAdornment }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
+              "aria-describedby": clsx.clsx(
+                validationStatusId,
+                formFieldDescribedBy,
+                inputDescribedBy
+              ),
+              "aria-labelledby": clsx.clsx(formFieldLabelledBy, inputLabelledBy),
+              "aria-invalid": !isReadOnly ? utils.isOutOfRange(value, min, max) || validationStatus === "error" : void 0,
+              "aria-valuemax": !isReadOnly ? max : void 0,
+              "aria-valuemin": !isReadOnly ? min : void 0,
+              "aria-valuenow": value && !Number.isNaN(utils.toFloat(value)) && !isReadOnly ? utils.toFloat((parse == null ? void 0 : parse(value)) || value) : void 0,
+              ...!isReadOnly && { "aria-valuetext": value.toString() },
               className: clsx.clsx(
-                withBaseName("inputContainer"),
-                withBaseName(variant),
-                {
-                  [withBaseName("focused")]: !isDisabled && focused,
-                  [withBaseName("disabled")]: isDisabled,
-                  [withBaseName("readOnly")]: isReadOnly,
-                  [withBaseName(validationStatus || "")]: validationStatus,
-                  [withBaseName("bordered")]: bordered
-                }
+                withBaseName("input"),
+                withBaseName(`inputTextAlign${core.capitalize(textAlign)}`),
+                inputClassName
               ),
-              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") })
-              ]
+              disabled: isDisabled,
+              onBlur: handleInputBlur,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus,
+              onKeyDown: handleInputKeyDown,
+              onBeforeInput: handleBeforeInput,
+              placeholder,
+              readOnly: isReadOnly,
+              "aria-readonly": isReadOnly ? "true" : void 0,
+              ref: handleInputRef,
+              required: isRequired,
+              role: isReadOnly ? "textbox" : "spinbutton",
+              tabIndex: isDisabled ? -1 : 0,
+              value: displayValue,
+              ...restInputProps
             }
           ),
-          !hideButtons && !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("buttonContainer"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("activationIndicator") }),
+          !isDisabled && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, { status: validationStatus, id: validationStatusId }),
+          endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("endAdornmentContainer"), children: endAdornment }),
+          !isReadOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("buttonContainer")), children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               core.Button,
               {
@@ -228,6 +293,7 @@ const NumberInput = react.forwardRef(
                   withBaseName("numberButton"),
                   withBaseName("numberButtonIncrement")
                 ),
+                appearance: "transparent",
                 ...incrementButtonProps,
                 children: /* @__PURE__ */ jsxRuntime.jsx(IncreaseIcon, { "aria-hidden": true })
               }
@@ -239,6 +305,7 @@ const NumberInput = react.forwardRef(
                   withBaseName("numberButton"),
                   withBaseName("numberButtonDecrement")
                 ),
+                appearance: "transparent",
                 ...decrementButtonProps,
                 children: /* @__PURE__ */ jsxRuntime.jsx(DecreaseIcon, { "aria-hidden": true })
               }