@elliemae/ds-slider-v2 3.52.0-rc.9 → 3.52.0

package/dist/cjs/config/useSliderV2.js

@@ -53,6 +53,7 @@ const useSliderV2 = (propsFromUser) => {
   const tickMarkPositions = (0, import_useTickMarksValues.useTickMarksValues)(propsWithDefault);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSSliderV2PropTypes, { tickMarkPositions });
   const ownerPropConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = import_react.default.useState(false);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
@@ -60,9 +61,19 @@ const useSliderV2 = (propsFromUser) => {
       instanceUid,
       rangeValues,
       tickMarkPositions,
+      hasUserInteractedAfterFocus,
+      setHasUserInteractedAfterFocus,
       ...ownerPropConfig
     }),
-    [propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig]
+    [
+      propsWithDefault,
+      xstyledProps,
+      instanceUid,
+      rangeValues,
+      tickMarkPositions,
+      hasUserInteractedAfterFocus,
+      ownerPropConfig
+    ]
   );
 };
 //# sourceMappingURL=useSliderV2.js.map

package/dist/cjs/config/useSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useSliderV2.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n  propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n    propsFromUser,\n    defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n  );\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value as [number, number];\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      ...ownerPropConfig,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAY5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AAEtD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,aAAa,mBAAmB,eAAe;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n  propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n    propsFromUser,\n    defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n  );\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value as [number, number];\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      ownerPropConfig,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,8BAAgF;AAChF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AACjC,gCAAmC;AAc5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,iBAAa,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,wBAAoB,8CAAmB,gBAAgB;AAK7D,gDAAiB,kBAAkB,kDAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,sBAAkB,uCAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1F,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/MainContent.js

@@ -45,7 +45,9 @@ const MainContent = () => {
     xstyledProps,
     rangeValues,
     getOwnerProps,
-    getOwnerPropsArguments
+    getOwnerPropsArguments,
+    setHasUserInteractedAfterFocus,
+    hasUserInteractedAfterFocus
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledWrapper,
@@ -81,6 +83,9 @@ const MainContent = () => {
                 } else {
                   onValueChange(values);
                 }
+                if (!hasUserInteractedAfterFocus) {
+                  setHasUserInteractedAfterFocus(true);
+                }
               },
               renderTrack: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.Track, { ...args }),
               renderThumb: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Thumb.Thumb, { ...args }),

package/dist/cjs/parts/MainContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={['auto', 'auto']}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={['28px', 'auto']}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={(values) => {\n            if (applyAriaDisabled || readOnly) return;\n            if (values.length === 1) {\n              onValueChange(values[0]);\n            } else {\n              onValueChange(values as DSSliderV2T.ValueType<true>);\n            }\n          }}\n          renderTrack={(args) => <Track {...args} />}\n          renderThumb={(args) => <Thumb {...args} />}\n          allowOverlap\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDU;AAjDjC,mBAA2B;AAC3B,yBAAsB;AACtB,2BAA8B;AAC9B,oBAAkD;AAClD,mBAAsB;AACtB,mBAAsB;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,mBAAmB,UAAU,eAAe,UAAU;AAAA,IAC9G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,qBAAqB,SAAU;AACnC,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    setHasUserInteractedAfterFocus,\n    hasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={['auto', 'auto']}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={['28px', 'auto']}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={(values) => {\n            if (applyAriaDisabled || readOnly) return;\n            if (values.length === 1) {\n              onValueChange(values[0]);\n            } else {\n              onValueChange(values as DSSliderV2T.ValueType<true>);\n            }\n            if (!hasUserInteractedAfterFocus) {\n              setHasUserInteractedAfterFocus(true);\n            }\n          }}\n          renderTrack={(args) => <Track {...args} />}\n          renderThumb={(args) => <Thumb {...args} />}\n          allowOverlap\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDU;AAtDjC,mBAA2B;AAC3B,yBAAsB;AACtB,2BAA8B;AAC9B,oBAAkD;AAClD,mBAAsB;AACtB,mBAAsB;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,mBAAmB,UAAU,eAAe,UAAU;AAAA,IAC9G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,qBAAqB,SAAU;AACnC,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AACA,oBAAI,CAAC,6BAA6B;AAChC,iDAA+B,IAAI;AAAA,gBACrC;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,4CAAC,sBAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/Thumb.js

@@ -43,10 +43,12 @@ const Thumb = ({ index, props, isDragged }) => {
     propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
     rangeValues,
     getOwnerProps,
-    getOwnerPropsArguments
+    hasUserInteractedAfterFocus,
+    setHasUserInteractedAfterFocus
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
   const [isHovered, setIsHovered] = (0, import_react.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const [isTooltipDismissed, setIsTooltipDismissed] = (0, import_react.useState)(false);
   const { ref, ...rest } = props;
   const label = (0, import_thumbLabels.conformedThumbLabel)({ rangeValues, customTickMarksValues, index, step, minValue });
   const thumbStyle = (0, import_react.useMemo)(
@@ -58,6 +60,14 @@ const Thumb = ({ index, props, isDragged }) => {
     }),
     [rest.style, disabled, applyAriaDisabled, readOnly]
   );
+  const getOwnerPropsArguments = (0, import_react.useCallback)(
+    () => ({
+      index,
+      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus
+    }),
+    [index, hasUserInteractedAfterFocus]
+  );
+  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledThumb,
     {
@@ -71,24 +81,29 @@ const Thumb = ({ index, props, isDragged }) => {
       onMouseEnter: () => {
         setIsHovered(true);
         setIsFocused(false);
+        setIsTooltipDismissed(false);
       },
       onMouseLeave: () => setIsHovered(false),
-      onKeyDownCapture: () => setIsFocused(true),
-      onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false),
+      onKeyDownCapture: (e) => {
+        if (e.key === "Escape" && showPopover) {
+          e.stopPropagation();
+          setIsTooltipDismissed(true);
+        } else {
+          setIsFocused(true);
+          setIsTooltipDismissed(false);
+        }
+      },
+      onFocus: () => {
+        setIsFocused(true);
+        setIsTooltipDismissed(false);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        setHasUserInteractedAfterFocus(false);
+      },
       getOwnerProps,
       getOwnerPropsArguments,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_tooltip_v3.DSTooltipV3,
-        {
-          text: label,
-          showPopover: isDragged || isHovered || isFocused,
-          customOffset: [0, 20],
-          withoutAnimation: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
-        },
-        label
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: label, showPopover, customOffset: [0, 20], withoutAnimation: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}) }, label)
     }
   );
 };

package/dist/cjs/parts/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Thumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const { ref, ...rest } = props;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const thumbStyle = useMemo(\n    () => ({\n      ...rest.style,\n      zIndex: undefined,\n      cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n      // we override the library cursor's style for disable state\n    }),\n    [rest.style, disabled, applyAriaDisabled, readOnly],\n  );\n\n  return (\n    <StyledThumb\n      {...rest}\n      style={thumbStyle}\n      innerRef={ref}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled || readOnly}\n      aria-disabled={disabled || applyAriaDisabled || readOnly}\n      aria-readonly={readOnly}\n      onMouseEnter={() => {\n        setIsHovered(true);\n        setIsFocused(false);\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      onKeyDownCapture={() => setIsFocused(true)}\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3\n        key={label}\n        text={label}\n        showPopover={isDragged || isHovered || isFocused}\n        customOffset={[0, 20]}\n        withoutAnimation\n      >\n        <span></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAAqD;AAErD,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,YAAQ,wCAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,sDAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n  const { ref, ...rest } = props;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const thumbStyle = useMemo(\n    () => ({\n      ...rest.style,\n      zIndex: undefined,\n      cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n      // we override the library cursor's style for disable state\n    }),\n    [rest.style, disabled, applyAriaDisabled, readOnly],\n  );\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  return (\n    <StyledThumb\n      {...rest}\n      style={thumbStyle}\n      innerRef={ref}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled || readOnly}\n      aria-disabled={disabled || applyAriaDisabled || readOnly}\n      aria-readonly={readOnly}\n      onMouseEnter={() => {\n        setIsHovered(true);\n        setIsFocused(false);\n        setIsTooltipDismissed(false);\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && showPopover) {\n          e.stopPropagation();\n          setIsTooltipDismissed(true);\n        } else {\n          setIsFocused(true);\n          setIsTooltipDismissed(false);\n        }\n      }}\n      onFocus={() => {\n        setIsFocused(true);\n        setIsTooltipDismissed(false);\n      }}\n      onBlur={() => {\n        setIsFocused(false);\n        setHasUserInteractedAfterFocus(false);\n      }}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} customOffset={[0, 20]} withoutAnimation>\n        <span></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgFf;AAhFR,mBAAkE;AAElE,2BAA4B;AAC5B,yBAAoC;AACpC,oBAA4B;AAC5B,2BAA8B;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,YAAQ,wCAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAClB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,CAAC,MAAM;AACvB,YAAI,EAAE,QAAQ,YAAY,aAAa;AACrC,YAAE,gBAAgB;AAClB,gCAAsB,IAAI;AAAA,QAC5B,OAAO;AACL,uBAAa,IAAI;AACjB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,IAAI;AACjB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAClB,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,oCAAwB,MAAM,OAAO,aAA0B,cAAc,CAAC,GAAG,EAAE,GAAG,kBAAgB,MACrG,sDAAC,UAAK,KADU,KAElB;AAAA;AAAA,EACF;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/parts/TickMarksValues.js

@@ -39,13 +39,18 @@ var import_inRange = require("../utils/inRange.js");
 var import_DSSliderV2CTX = __toESM(require("../DSSliderV2CTX.js"));
 const TickMarksValues = () => {
   const {
-    propsWithDefault: { customTickMarksValues },
+    propsWithDefault: { customTickMarksValues, maxValue, minValue },
     rangeValues,
     tickMarkPositions,
     instanceUid,
     getOwnerProps,
     getOwnerPropsArguments
   } = (0, import_react.useContext)(import_DSSliderV2CTX.default);
+  const { columnWidth } = (0, import_react.useMemo)(() => {
+    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);
+    const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
+    return { columnWidth: calculatedColumnWidthPercentage };
+  }, [maxValue, minValue, tickMarkPositions.length]);
   const markValues = (0, import_react.useMemo)(
     () => tickMarkPositions.map((value, index) => {
       const isSelected = (0, import_inRange.inRange)(value, rangeValues);
@@ -62,6 +67,15 @@ const TickMarksValues = () => {
     }),
     [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTickMarksContainer, { getOwnerProps, getOwnerPropsArguments, children: markValues });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledTickMarksContainer,
+    {
+      getOwnerProps,
+      getOwnerPropsArguments,
+      columnCount: tickMarkPositions.length,
+      columnWidth,
+      children: markValues
+    }
+  );
 };
 //# sourceMappingURL=TickMarksValues.js.map

package/dist/cjs/parts/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TickMarksValues.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const markValues = useMemo(\n    () =>\n      tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      }),\n    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n  );\n\n  return (\n    <StyledTickMarksContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {markValues}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBb;AApBV,mBAA2C;AAC3C,oBAA8D;AAC9D,qBAAwB;AACxB,2BAA8B;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,sBAAsB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,iBAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,iBAAa,wBAAQ,OAAO,WAAW;AAC7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE,4CAAC,0CAAyB,eAA8B,wBACrD,sBACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  const markValues = useMemo(\n    () =>\n      tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      }),\n    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n  );\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {markValues}\n    </StyledTickMarksContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bb;AA3BV,mBAA2C;AAC3C,oBAA8D;AAC9D,qBAAwB;AACxB,2BAA8B;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,qBAAAA,OAAiB;AAEhC,QAAM,EAAE,YAAY,QAAI,sBAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,QAAM,iBAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,iBAAa,wBAAQ,OAAO,WAAW;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
   "names": ["DSSliderV2Context"]
 }

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  export type ValueType<TMultiple extends boolean> = TMultiple extends true\n    ? [number, number]\n    : TMultiple extends false\n      ? number\n      : number | [number, number];\n\n  export interface RequiredProps<TMultiple extends boolean> {\n    value: ValueType<TMultiple>;\n    minValue: number;\n    maxValue: number;\n  }\n\n  export interface DefaultProps<TMultiple extends boolean> {\n    multiple: TMultiple;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    onValueChange: (newValue: ValueType<TMultiple>) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props<TMultiple extends boolean = false>\n    extends Partial<DefaultProps<TMultiple>>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n\n  export interface InternalProps<TMultiple extends boolean = false>\n    extends DefaultProps<TMultiple>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false as boolean,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AA6CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  export type ValueType<TMultiple extends boolean> = TMultiple extends true\n    ? [number, number]\n    : TMultiple extends false\n      ? number\n      : number | [number, number];\n\n  export interface RequiredProps<TMultiple extends boolean> {\n    value: ValueType<TMultiple>;\n    minValue: number;\n    maxValue: number;\n  }\n\n  export interface DefaultProps<TMultiple extends boolean> {\n    multiple: TMultiple;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    onValueChange: (newValue: ValueType<TMultiple>) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props<TMultiple extends boolean = false>\n    extends Partial<DefaultProps<TMultiple>>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n\n  export interface InternalProps<TMultiple extends boolean = false>\n    extends DefaultProps<TMultiple>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false as boolean,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAAgD;AA+CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,kCAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -88,14 +88,20 @@ const StyledTickMarkValue = (0, import_ds_system.styled)("div", { name: import_c
   text-align: center;
   min-height: ${(props) => props.theme.space.xs};
   overflow: visible;
-  width: ${(props) => props.theme.space.xxxs};
   color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
+  place-self: baseline;
+  transform: translateX(-50%);
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
 `;
 const StyledTickMarksContainer = (0, import_ds_system.styled)("div", {
   name: import_constants.DSSliderV2Name,
   slot: import_constants.SLIDER_V2_SLOTS.TICK_MARK_CONTAINER
 })`
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));
+  gap: 4px;
   justify-content: space-between;
   // this next property-value reverts the sanitize.css value
   overflow-wrap: normal;

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  background: ${(props) =>\n    props.disabled || props.applyAriaDisabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.multiple\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  width: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}>`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid\n    ${(props) =>\n      props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n  :focus {\n    border: 2px solid brand-700;\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  background: ${(props) =>\n    props.disabled || props.applyAriaDisabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.multiple\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n  place-self: baseline;\n  transform: translateX(-50%);\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n  gap: 4px;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}>`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid\n    ${(props) =>\n      props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n  :focus {\n    border: 2px solid brand-700;\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useSliderV2.js

@@ -20,6 +20,7 @@ const useSliderV2 = (propsFromUser) => {
   const tickMarkPositions = useTickMarksValues(propsWithDefault);
   useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });
   const ownerPropConfig = useOwnerProps(propsWithDefault);
+  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React2.useState(false);
   return React2.useMemo(
     () => ({
       propsWithDefault,
@@ -27,9 +28,19 @@ const useSliderV2 = (propsFromUser) => {
       instanceUid,
       rangeValues,
       tickMarkPositions,
+      hasUserInteractedAfterFocus,
+      setHasUserInteractedAfterFocus,
       ...ownerPropConfig
     }),
-    [propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig]
+    [
+      propsWithDefault,
+      xstyledProps,
+      instanceUid,
+      rangeValues,
+      tickMarkPositions,
+      hasUserInteractedAfterFocus,
+      ownerPropConfig
+    ]
   );
 };
 export {

package/dist/esm/config/useSliderV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSliderV2.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n  propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n    propsFromUser,\n    defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n  );\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value as [number, number];\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      ...ownerPropConfig,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAY5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AAEtD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,aAAa,mBAAmB,eAAe;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n  propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n  xstyledProps: XstyledProps;\n  instanceUid: string;\n  rangeValues: [number, number] | [number];\n  tickMarkPositions: number[];\n  getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n  getOwnerPropsArguments: () => Record<string, unknown>;\n  hasUserInteractedAfterFocus: boolean;\n  setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n    propsFromUser,\n    defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n  );\n\n  const { multiple, value } = propsWithDefault;\n\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n  const rangeValues = React.useMemo(() => {\n    if (multiple === true) return value as [number, number];\n    return [value] as [number];\n  }, [multiple, value]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n  // ===========================================================================\n  // VALIDATE PROPS\n  // ===========================================================================\n  useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n  const ownerPropConfig = useOwnerProps(propsWithDefault);\n  const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      setHasUserInteractedAfterFocus,\n      ...ownerPropConfig,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      rangeValues,\n      tickMarkPositions,\n      hasUserInteractedAfterFocus,\n      ownerPropConfig,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAc5B,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAE1F,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/MainContent.js

@@ -12,7 +12,9 @@ const MainContent = () => {
     xstyledProps,
     rangeValues,
     getOwnerProps,
-    getOwnerPropsArguments
+    getOwnerPropsArguments,
+    setHasUserInteractedAfterFocus,
+    hasUserInteractedAfterFocus
   } = useContext(DSSliderV2Context);
   return /* @__PURE__ */ jsx(
     StyledWrapper,
@@ -48,6 +50,9 @@ const MainContent = () => {
                 } else {
                   onValueChange(values);
                 }
+                if (!hasUserInteractedAfterFocus) {
+                  setHasUserInteractedAfterFocus(true);
+                }
               },
               renderTrack: (args) => /* @__PURE__ */ jsx(Track, { ...args }),
               renderThumb: (args) => /* @__PURE__ */ jsx(Thumb, { ...args }),

package/dist/esm/parts/MainContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={['auto', 'auto']}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={['28px', 'auto']}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={(values) => {\n            if (applyAriaDisabled || readOnly) return;\n            if (values.length === 1) {\n              onValueChange(values[0]);\n            } else {\n              onValueChange(values as DSSliderV2T.ValueType<true>);\n            }\n          }}\n          renderTrack={(args) => <Track {...args} />}\n          renderThumb={(args) => <Thumb {...args} />}\n          allowOverlap\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDU;AAjDjC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,mBAAmB,UAAU,eAAe,UAAU;AAAA,IAC9G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,qBAAqB,SAAU;AACnC,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n  const {\n    propsWithDefault: { step, minValue, maxValue, disabled, applyAriaDisabled, readOnly, onValueChange, className },\n    xstyledProps,\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    setHasUserInteractedAfterFocus,\n    hasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  return (\n    <StyledWrapper\n      width=\"100%\"\n      alignItems=\"center\"\n      rows={['auto', 'auto']}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      className={className}\n      {...xstyledProps}\n    >\n      <StyledRangeWrapper\n        rows={['28px', 'auto']}\n        alignItems=\"center\"\n        margin=\"0 16px\"\n        minHeight=\"28px\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Range\n          step={step}\n          min={minValue}\n          max={maxValue}\n          values={rangeValues}\n          disabled={disabled}\n          onChange={(values) => {\n            if (applyAriaDisabled || readOnly) return;\n            if (values.length === 1) {\n              onValueChange(values[0]);\n            } else {\n              onValueChange(values as DSSliderV2T.ValueType<true>);\n            }\n            if (!hasUserInteractedAfterFocus) {\n              setHasUserInteractedAfterFocus(true);\n            }\n          }}\n          renderTrack={(args) => <Track {...args} />}\n          renderThumb={(args) => <Thumb {...args} />}\n          allowOverlap\n          draggableTrack\n        />\n      </StyledRangeWrapper>\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDU;AAtDjC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,mBAAmB,UAAU,eAAe,UAAU;AAAA,IAC9G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,qBAAqB,SAAU;AACnC,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AACA,oBAAI,CAAC,6BAA6B;AAChC,iDAA+B,IAAI;AAAA,gBACrC;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,cAAY;AAAA,cACZ,gBAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Thumb.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
 import { conformedThumbLabel } from "../utils/thumbLabels.js";
 import { StyledThumb } from "../styles.js";
@@ -10,10 +10,12 @@ const Thumb = ({ index, props, isDragged }) => {
     propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },
     rangeValues,
     getOwnerProps,
-    getOwnerPropsArguments
+    hasUserInteractedAfterFocus,
+    setHasUserInteractedAfterFocus
   } = useContext(DSSliderV2Context);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);
   const { ref, ...rest } = props;
   const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
   const thumbStyle = useMemo(
@@ -25,6 +27,14 @@ const Thumb = ({ index, props, isDragged }) => {
     }),
     [rest.style, disabled, applyAriaDisabled, readOnly]
   );
+  const getOwnerPropsArguments = useCallback(
+    () => ({
+      index,
+      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus
+    }),
+    [index, hasUserInteractedAfterFocus]
+  );
+  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
   return /* @__PURE__ */ jsx(
     StyledThumb,
     {
@@ -38,24 +48,29 @@ const Thumb = ({ index, props, isDragged }) => {
       onMouseEnter: () => {
         setIsHovered(true);
         setIsFocused(false);
+        setIsTooltipDismissed(false);
       },
       onMouseLeave: () => setIsHovered(false),
-      onKeyDownCapture: () => setIsFocused(true),
-      onFocus: () => setIsFocused(true),
-      onBlur: () => setIsFocused(false),
+      onKeyDownCapture: (e) => {
+        if (e.key === "Escape" && showPopover) {
+          e.stopPropagation();
+          setIsTooltipDismissed(true);
+        } else {
+          setIsFocused(true);
+          setIsTooltipDismissed(false);
+        }
+      },
+      onFocus: () => {
+        setIsFocused(true);
+        setIsTooltipDismissed(false);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+        setHasUserInteractedAfterFocus(false);
+      },
       getOwnerProps,
       getOwnerPropsArguments,
-      children: /* @__PURE__ */ jsx(
-        DSTooltipV3,
-        {
-          text: label,
-          showPopover: isDragged || isHovered || isFocused,
-          customOffset: [0, 20],
-          withoutAnimation: true,
-          children: /* @__PURE__ */ jsx("span", {})
-        },
-        label
-      )
+      children: /* @__PURE__ */ jsx(DSTooltipV3, { text: label, showPopover, customOffset: [0, 20], withoutAnimation: true, children: /* @__PURE__ */ jsx("span", {}) }, label)
     }
   );
 };

package/dist/esm/parts/Thumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Thumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const { ref, ...rest } = props;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const thumbStyle = useMemo(\n    () => ({\n      ...rest.style,\n      zIndex: undefined,\n      cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n      // we override the library cursor's style for disable state\n    }),\n    [rest.style, disabled, applyAriaDisabled, readOnly],\n  );\n\n  return (\n    <StyledThumb\n      {...rest}\n      style={thumbStyle}\n      innerRef={ref}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled || readOnly}\n      aria-disabled={disabled || applyAriaDisabled || readOnly}\n      aria-readonly={readOnly}\n      onMouseEnter={() => {\n        setIsHovered(true);\n        setIsFocused(false);\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      onKeyDownCapture={() => setIsFocused(true)}\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3\n        key={label}\n        text={label}\n        showPopover={isDragged || isHovered || isFocused}\n        customOffset={[0, 20]}\n        withoutAnimation\n      >\n        <span></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Df;AA3DR,SAAgB,YAAY,SAAS,gBAAgB;AAErD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,8BAAC,UAAK;AAAA;AAAA,QAND;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n  const {\n    propsWithDefault: { disabled, applyAriaDisabled, readOnly, customTickMarksValues, step, minValue },\n    rangeValues,\n    getOwnerProps,\n    hasUserInteractedAfterFocus,\n    setHasUserInteractedAfterFocus,\n  } = useContext(DSSliderV2Context);\n\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n  const { ref, ...rest } = props;\n\n  const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n  const thumbStyle = useMemo(\n    () => ({\n      ...rest.style,\n      zIndex: undefined,\n      cursor: disabled || applyAriaDisabled || readOnly ? 'not-allowed' : rest.style.cursor,\n      // we override the library cursor's style for disable state\n    }),\n    [rest.style, disabled, applyAriaDisabled, readOnly],\n  );\n\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n      shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n    }),\n    [index, hasUserInteractedAfterFocus],\n  );\n\n  const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n  return (\n    <StyledThumb\n      {...rest}\n      style={thumbStyle}\n      innerRef={ref}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled || readOnly}\n      aria-disabled={disabled || applyAriaDisabled || readOnly}\n      aria-readonly={readOnly}\n      onMouseEnter={() => {\n        setIsHovered(true);\n        setIsFocused(false);\n        setIsTooltipDismissed(false);\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && showPopover) {\n          e.stopPropagation();\n          setIsTooltipDismissed(true);\n        } else {\n          setIsFocused(true);\n          setIsTooltipDismissed(false);\n        }\n      }}\n      onFocus={() => {\n        setIsFocused(true);\n        setIsTooltipDismissed(false);\n      }}\n      onBlur={() => {\n        setIsFocused(false);\n        setHasUserInteractedAfterFocus(false);\n      }}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <DSTooltipV3 key={label} text={label} showPopover={showPopover} customOffset={[0, 20]} withoutAnimation>\n        <span></span>\n      </DSTooltipV3>\n    </StyledThumb>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFf;AAhFR,SAAgB,aAAa,YAAY,SAAS,gBAAgB;AAElE,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,mBAAmB,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,YAAY,qBAAqB,WAAW,gBAAgB,KAAK,MAAM;AAAA;AAAA,IAEjF;AAAA,IACA,CAAC,KAAK,OAAO,UAAU,mBAAmB,QAAQ;AAAA,EACpD;AAEA,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACxC,iBAAe,YAAY,qBAAqB;AAAA,MAChD,iBAAe;AAAA,MACf,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAClB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,CAAC,MAAM;AACvB,YAAI,EAAE,QAAQ,YAAY,aAAa;AACrC,YAAE,gBAAgB;AAClB,gCAAsB,IAAI;AAAA,QAC5B,OAAO;AACL,uBAAa,IAAI;AACjB,gCAAsB,KAAK;AAAA,QAC7B;AAAA,MACF;AAAA,MACA,SAAS,MAAM;AACb,qBAAa,IAAI;AACjB,8BAAsB,KAAK;AAAA,MAC7B;AAAA,MACA,QAAQ,MAAM;AACZ,qBAAa,KAAK;AAClB,uCAA+B,KAAK;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,eAAwB,MAAM,OAAO,aAA0B,cAAc,CAAC,GAAG,EAAE,GAAG,kBAAgB,MACrG,8BAAC,UAAK,KADU,KAElB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/TickMarksValues.js

@@ -6,13 +6,18 @@ import { inRange } from "../utils/inRange.js";
 import DSSliderV2Context from "../DSSliderV2CTX.js";
 const TickMarksValues = () => {
   const {
-    propsWithDefault: { customTickMarksValues },
+    propsWithDefault: { customTickMarksValues, maxValue, minValue },
     rangeValues,
     tickMarkPositions,
     instanceUid,
     getOwnerProps,
     getOwnerPropsArguments
   } = useContext(DSSliderV2Context);
+  const { columnWidth } = useMemo(() => {
+    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);
+    const calculatedColumnWidthPercentage = `${distanceBetweenDots / (maxValue - minValue) * 100}%`;
+    return { columnWidth: calculatedColumnWidthPercentage };
+  }, [maxValue, minValue, tickMarkPositions.length]);
   const markValues = useMemo(
     () => tickMarkPositions.map((value, index) => {
       const isSelected = inRange(value, rangeValues);
@@ -29,7 +34,16 @@ const TickMarksValues = () => {
     }),
     [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
   );
-  return /* @__PURE__ */ jsx(StyledTickMarksContainer, { getOwnerProps, getOwnerPropsArguments, children: markValues });
+  return /* @__PURE__ */ jsx(
+    StyledTickMarksContainer,
+    {
+      getOwnerProps,
+      getOwnerPropsArguments,
+      columnCount: tickMarkPositions.length,
+      columnWidth,
+      children: markValues
+    }
+  );
 };
 export {
   TickMarksValues

package/dist/esm/parts/TickMarksValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarksValues.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const markValues = useMemo(\n    () =>\n      tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      }),\n    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n  );\n\n  return (\n    <StyledTickMarksContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {markValues}\n    </StyledTickMarksContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBb;AApBV,SAAgB,YAAY,eAAe;AAC3C,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,sBAAsB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,aAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,aAAa,QAAQ,OAAO,WAAW;AAC7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE,oBAAC,4BAAyB,eAA8B,wBACrD,sBACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n  const {\n    propsWithDefault: { customTickMarksValues, maxValue, minValue },\n    rangeValues,\n    tickMarkPositions,\n    instanceUid,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { columnWidth } = useMemo(() => {\n    const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n    const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n    return { columnWidth: calculatedColumnWidthPercentage };\n  }, [maxValue, minValue, tickMarkPositions.length]);\n\n  const markValues = useMemo(\n    () =>\n      tickMarkPositions.map((value, index) => {\n        const isSelected = inRange(value, rangeValues);\n\n        return (\n          <StyledTickMarkValue\n            key={`${instanceUid}-${value}`}\n            isSelected={isSelected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {customTickMarksValues[index] ?? value}\n          </StyledTickMarkValue>\n        );\n      }),\n    [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n  );\n\n  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\n    >\n      {markValues}\n    </StyledTickMarksContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2Bb;AA3BV,SAAgB,YAAY,eAAe;AAC3C,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,YAAY,IAAI,QAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,QAAM,aAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,aAAa,QAAQ,OAAO,WAAW;AAE7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,MAM9B;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  export type ValueType<TMultiple extends boolean> = TMultiple extends true\n    ? [number, number]\n    : TMultiple extends false\n      ? number\n      : number | [number, number];\n\n  export interface RequiredProps<TMultiple extends boolean> {\n    value: ValueType<TMultiple>;\n    minValue: number;\n    maxValue: number;\n  }\n\n  export interface DefaultProps<TMultiple extends boolean> {\n    multiple: TMultiple;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    onValueChange: (newValue: ValueType<TMultiple>) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props<TMultiple extends boolean = false>\n    extends Partial<DefaultProps<TMultiple>>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n\n  export interface InternalProps<TMultiple extends boolean = false>\n    extends DefaultProps<TMultiple>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false as boolean,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AA6CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSliderV2T {\n  export type ValueType<TMultiple extends boolean> = TMultiple extends true\n    ? [number, number]\n    : TMultiple extends false\n      ? number\n      : number | [number, number];\n\n  export interface RequiredProps<TMultiple extends boolean> {\n    value: ValueType<TMultiple>;\n    minValue: number;\n    maxValue: number;\n  }\n\n  export interface DefaultProps<TMultiple extends boolean> {\n    multiple: TMultiple;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    onValueChange: (newValue: ValueType<TMultiple>) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props<TMultiple extends boolean = false>\n    extends Partial<DefaultProps<TMultiple>>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n\n  export interface InternalProps<TMultiple extends boolean = false>\n    extends DefaultProps<TMultiple>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false as boolean,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props<boolean>>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AA+CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/esm/styles.js

@@ -48,14 +48,20 @@ const StyledTickMarkValue = styled("div", { name: DSSliderV2Name, slot: SLIDER_V
   text-align: center;
   min-height: ${(props) => props.theme.space.xs};
   overflow: visible;
-  width: ${(props) => props.theme.space.xxxs};
   color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
+  place-self: baseline;
+  transform: translateX(-50%);
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
 `;
 const StyledTickMarksContainer = styled("div", {
   name: DSSliderV2Name,
   slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER
 })`
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));
+  gap: 4px;
   justify-content: space-between;
   // this next property-value reverts the sanitize.css value
   overflow-wrap: normal;

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  background: ${(props) =>\n    props.disabled || props.applyAriaDisabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.multiple\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  width: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}>`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid\n    ${(props) =>\n      props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n  :focus {\n    border: 2px solid brand-700;\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  background: ${(props) =>\n    props.disabled || props.applyAriaDisabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.multiple\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n  place-self: baseline;\n  transform: translateX(-50%);\n  white-space: normal;\n  overflow-wrap: break-word;\n  word-break: break-word;\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})<{ columnCount: number; columnWidth: string }>`\n  display: grid;\n  grid-template-columns: repeat(${(props) => props.columnCount}, calc(${(props) => props.columnWidth} - 4px));\n  gap: 4px;\n  justify-content: space-between;\n  // this next property-value reverts the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}>`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid\n    ${(props) =>\n      props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};\n\n  :focus {\n    border: 2px solid brand-700;\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, applyAriaDisabled, theme }) =>\n      disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};\n  }\n\n  cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : undefined)};\n\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/config/useSliderV2.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { XstyledProps } from '@elliemae/ds-props-helpers';
 import { type DSSliderV2T } from '../react-desc-prop-types.js';
 export interface DSSliderV2CTX<TMultiple extends boolean> {
@@ -8,6 +9,8 @@ export interface DSSliderV2CTX<TMultiple extends boolean> {
     tickMarkPositions: number[];
     getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;
     getOwnerPropsArguments: () => Record<string, unknown>;
+    hasUserInteractedAfterFocus: boolean;
+    setHasUserInteractedAfterFocus: (value: boolean) => void;
 }
 export declare const useSliderV2: <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {
     getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;
@@ -17,4 +20,6 @@ export declare const useSliderV2: <TMultiple extends boolean>(propsFromUser: DSS
     instanceUid: string;
     rangeValues: [number, number] | [number];
     tickMarkPositions: number[];
+    hasUserInteractedAfterFocus: boolean;
+    setHasUserInteractedAfterFocus: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/dist/types/react-desc-prop-types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="prop-types" />
-import type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
+import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
 export declare namespace DSSliderV2T {
@@ -23,9 +23,9 @@ export declare namespace DSSliderV2T {
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {
         className?: string;
     }
-    interface Props<TMultiple extends boolean = false> extends Partial<DefaultProps<TMultiple>>, OptionalProps, XstyledProps, RequiredProps<TMultiple> {
+    interface Props<TMultiple extends boolean = false> extends Partial<DefaultProps<TMultiple>>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>, XstyledProps, RequiredProps<TMultiple> {
     }
-    interface InternalProps<TMultiple extends boolean = false> extends DefaultProps<TMultiple>, OptionalProps, XstyledProps, RequiredProps<TMultiple> {
+    interface InternalProps<TMultiple extends boolean = false> extends DefaultProps<TMultiple>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps<TMultiple> | keyof XstyledProps | 'value'>, XstyledProps, RequiredProps<TMultiple> {
     }
 }
 export declare const defaultProps: DSSliderV2T.DefaultProps<boolean>;

package/dist/types/styles.d.ts

@@ -16,7 +16,10 @@ export declare const StyledDotsContainer: import("styled-components").StyledComp
 export declare const StyledTickMarkValue: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     isSelected: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    columnCount: number;
+    columnWidth: string;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledThumb: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     disabled: boolean;
     applyAriaDisabled: boolean;

package/dist/types/tests/DSSliderV2.data-testid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSSliderV2.events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSSliderV2.exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSSliderV2.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSSliderv2.api.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-slider-v2",
-  "version": "3.52.0-rc.9",
+  "version": "3.52.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Slider V 2",
   "files": [
@@ -38,25 +38,25 @@
   "dependencies": {
     "react-range": "~1.8.14",
     "uid": "^2.0.2",
-    "@elliemae/ds-grid": "3.52.0-rc.9",
-    "@elliemae/ds-typescript-helpers": "3.52.0-rc.9",
-    "@elliemae/ds-tooltip-v3": "3.52.0-rc.9",
-    "@elliemae/ds-system": "3.52.0-rc.9",
-    "@elliemae/ds-props-helpers": "3.52.0-rc.9",
-    "@elliemae/ds-truncated-tooltip-text": "3.52.0-rc.9"
+    "@elliemae/ds-grid": "3.52.0",
+    "@elliemae/ds-props-helpers": "3.52.0",
+    "@elliemae/ds-system": "3.52.0",
+    "@elliemae/ds-tooltip-v3": "3.52.0",
+    "@elliemae/ds-truncated-tooltip-text": "3.52.0",
+    "@elliemae/ds-typescript-helpers": "3.52.0"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.55",
+    "@elliemae/pui-cli": "9.0.0-next.63",
     "jest": "~29.7.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.52.0-rc.9"
+    "@elliemae/ds-monorepo-devops": "3.52.0"
   },
   "peerDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "~14.5.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "~5.3.9"