@elliemae/ds-slider-v2 3.62.1 → 3.70.0-alpha.10

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, 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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.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  return (\n    <StyledTickMarksContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      columnCount={tickMarkPositions.length}\n      columnWidth={columnWidth}\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    </StyledTickMarksContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCb;AAhCV,SAAS,YAAY,eAAe;AACpC,OAAO,uBAAuB;AAC9B,SAAS,eAAe;AACxB,SAAS,qBAAqB,gCAAgC;AAEvD,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACvC,cAAM,aAAa,QAAQ,OAAO,WAAW;AAE7C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,UAL5B,GAAG,WAAW,IAAI,KAAK;AAAA,QAM9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Track.js

@@ -1,30 +1,36 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
+import DSSliderV2Context from "../DSSliderV2CTX.js";
 import { TickMarks } from "./TickMarks.js";
 import { TickMarksValues } from "./TickMarksValues.js";
-import { StyledTrack } from "../styles.js";
-import DSSliderV2Context from "../DSSliderV2CTX.js";
-const Track = ({ children, props, disabled }) => {
+import { StyledTrack } from "./styles.js";
+const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
   const {
-    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },
+    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks, multiple },
     rangeValues,
     getOwnerProps,
     getOwnerPropsArguments
   } = useContext(DSSliderV2Context);
-  const { ref, ...rest } = props;
+  const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;
+  const sanitizedStyle = useMemo(() => {
+    if (disabled || applyAriaDisabled || readOnly) return { ...trackStyle, cursor: "not-allowed" };
+    return trackStyle;
+  }, [applyAriaDisabled, disabled, readOnly, trackStyle]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       StyledTrack,
       {
-        ...rest,
+        style: sanitizedStyle,
+        ...propsFromReactRangeTookAsIsForTheTrack,
         innerRef: ref,
         disabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        $readOnly: readOnly,
+        $applyAriaDisabled: applyAriaDisabled,
         minValue,
         maxValue,
         rangeValues,
-        multiple: rangeValues.length === 2,
+        multiple,
         getOwnerProps,
         getOwnerPropsArguments,
         children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Track.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n  const {\n    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { ref, ...rest } = props;\n\n  return (\n    <>\n      <StyledTrack\n        {...rest} // This is needed because it's received from the library\n        innerRef={ref}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled || readOnly}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        multiple={rangeValues.length === 2}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n        {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n      </StyledTrack>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBnB,mBAc2D,KAbzD,YADF;AAlBJ,SAAgB,kBAAkB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,UAAU,qBAAqB,cAAc;AAAA,IACxG;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,mBAAmB,qBAAqB;AAAA,QACxC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,oBAAC,aAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from './styles.js';\n\nexport const Track = ({ children, props: reactRangeOpinionatedProps, disabled }: IRenderTrackParams) => {\n  const {\n    propsWithDefault: { minValue, maxValue, applyAriaDisabled, readOnly, withTickMarksValues, withTickMarks, multiple },\n    rangeValues,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = useContext(DSSliderV2Context);\n\n  const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;\n\n  const sanitizedStyle = useMemo(() => {\n    // we want to keep the cursor but when disabled, we want it to show as 'not-allowed'\n    if (disabled || applyAriaDisabled || readOnly) return { ...trackStyle, cursor: 'not-allowed' };\n    return trackStyle;\n  }, [applyAriaDisabled, disabled, readOnly, trackStyle]);\n\n  return (\n    <>\n      <StyledTrack\n        style={sanitizedStyle}\n        {...propsFromReactRangeTookAsIsForTheTrack} // This is needed because it's received from the library\n        innerRef={ref}\n        disabled={disabled}\n        $readOnly={readOnly}\n        $applyAriaDisabled={applyAriaDisabled}\n        minValue={minValue}\n        maxValue={maxValue}\n        rangeValues={rangeValues}\n        multiple={multiple}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n        {withTickMarks && (!disabled || !applyAriaDisabled) && <TickMarks />}\n      </StyledTrack>\n      {withTickMarksValues && <TickMarksValues />}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwBnB,mBAgB2D,KAfzD,YADF;AAxBJ,SAAS,YAAY,eAAe;AAEpC,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,4BAA4B,SAAS,MAA0B;AACtG,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,mBAAmB,UAAU,qBAAqB,eAAe,SAAS;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,KAAK,OAAO,YAAY,GAAG,uCAAuC,IAAI;AAE9E,QAAM,iBAAiB,QAAQ,MAAM;AAEnC,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,YAAY,QAAQ,cAAc;AAC7F,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,kBAAkB,CAAC,YAAY,CAAC,sBAAsB,oBAAC,aAAU;AAAA;AAAA;AAAA,IACpE;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
   "names": []
 }

package/dist/esm/{styles.js → parts/styles.js}

@@ -1,27 +1,38 @@
 import * as React from "react";
-import { getTrackBackground } from "react-range";
 import { Grid } from "@elliemae/ds-grid";
-import { styled } from "@elliemae/ds-system";
-import { DSSliderV2Name, SLIDER_V2_SLOTS } from "./constants/index.js";
+import { css, styled } from "@elliemae/ds-system";
+import { getTrackBackground } from "react-range";
+import { DSSliderV2Name, SLIDER_V2_SLOTS } from "../constants/index.js";
 const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;
 const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;
+const TrackStates = css`
+  ${({ theme, disabled, $applyAriaDisabled, $readOnly, rangeValues, multiple, minValue, maxValue }) => {
+  if (disabled) return `background: ${theme.colors.neutral[400]};`;
+  let trackColorSelected = theme.colors.brand[600];
+  const trackColorUnselected = theme.colors.neutral[400];
+  if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];
+  const reactRangeColors = multiple ? [trackColorUnselected, trackColorSelected, trackColorUnselected] : [trackColorSelected, trackColorUnselected];
+  if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];
+  return `background: ${getTrackBackground({
+    values: rangeValues,
+    colors: reactRangeColors,
+    min: minValue,
+    max: maxValue
+  })};`;
+}}
+`;
 const StyledTrack = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })`
   position: relative;
   height: ${(props) => props.theme.space.xxxs};
   width: 100%;
   min-width: ${(props) => props.theme.space.xl};
   border-radius: ${(props) => props.theme.space.xxxs};
-  background: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : getTrackBackground({
-  values: props.rangeValues,
-  colors: props.multiple ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
-  min: props.minValue,
-  max: props.maxValue
-})};
+  ${TrackStates}
 `;
 const StyledDot = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`
   &:after {
     content: '';
-    background: ${(props) => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400]};
+    background: ${(props) => props.theme.colors.neutral["000"]};
     border-radius: ${(props) => props.theme.space.xxxs};
     display: block;
     position: relative;
@@ -66,27 +77,45 @@ const StyledTickMarksContainer = styled("div", {
   // this next property-value reverts the sanitize.css value
   overflow-wrap: normal;
 `;
+const ThumbStates = css`
+  ${({ theme, disabled, $applyAriaDisabled, $readOnly }) => {
+  if (disabled)
+    return `
+      background-color: ${theme.colors.neutral[400]};
+    `;
+  const standardBgColorAndBorder = `
+      background-color: ${theme.colors.neutral["000"]};
+      border: 1px solid ${theme.colors.neutral[400]};
+    `;
+  const standardFocusRing = `:focus {
+        border: 2px solid ${theme.colors.brand[700]};
+        outline: unset;
+      }`;
+  if ($applyAriaDisabled || $readOnly)
+    return `
+      ${standardBgColorAndBorder}
+      :hover{
+        background-color: ${theme.colors.neutral["050"]};
+      }
+      ${standardFocusRing}`;
+  return `
+      ${standardBgColorAndBorder}
+      :hover{
+        background-color: ${theme.colors.brand[200]};
+      }
+      :hover:not(:focus){
+        border: 1px solid ${theme.colors.brand[600]};
+      }
+      ${standardFocusRing}`;
+}}
+`;
 const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })`
   height: 20px;
   width: 20px;
+  border-radius: 50%;
   top: 0;
-  background-color: ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
-  border-radius: 10px;
-  border: 1px solid
-    ${(props) => props.disabled || props.applyAriaDisabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
-
-  :focus {
-    border: 2px solid brand-700;
-    outline: unset;
-  }
-
-  :hover {
-    background-color: ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
-  }
-
-  cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : void 0};
-
   z-index: ${(props) => props.theme.zIndex.tooltip};
+  ${ThumbStates}
 `;
 export {
   StyledDot,

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { getTrackBackground } from 'react-range';\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\ninterface TrackProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}\n\nconst TrackStates = css<TrackProps>`\n  ${({ theme, disabled, $applyAriaDisabled, $readOnly, rangeValues, multiple, minValue, maxValue }) => {\n    if (disabled) return `background: ${theme.colors.neutral[400]};`;\n\n    let trackColorSelected = theme.colors.brand[600];\n    const trackColorUnselected = theme.colors.neutral[400];\n\n    if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];\n\n    const reactRangeColors = multiple\n      ? [trackColorUnselected, trackColorSelected, trackColorUnselected]\n      : [trackColorSelected, trackColorUnselected];\n\n    if ($applyAriaDisabled || $readOnly) trackColorSelected = theme.colors.neutral[700];\n\n    return `background: ${getTrackBackground({\n      values: rangeValues,\n      colors: reactRangeColors,\n      min: minValue,\n      max: maxValue,\n    })};`;\n  }}\n`;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<TrackProps>`\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  ${TrackStates}\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`\n  &:after {\n    content: '';\n    background: ${(props) => props.theme.colors.neutral['000']};\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\ninterface ThumbProps {\n  disabled: boolean;\n  $applyAriaDisabled: boolean;\n  $readOnly: boolean;\n}\nconst ThumbStates = css<ThumbProps>`\n  ${({ theme, disabled, $applyAriaDisabled, $readOnly }) => {\n    // ---------------------------------------------------------\n    //  THE CURSOR IS HANDLED BY THE LIBRARY VIA INLINE STYLES\n    // ---------------------------------------------------------\n    if (disabled)\n      return `\n      background-color: ${theme.colors.neutral[400]};\n    `;\n\n    const standardBgColorAndBorder = `\n      background-color: ${theme.colors.neutral['000']};\n      border: 1px solid ${theme.colors.neutral[400]};\n    `;\n    const standardFocusRing = `:focus {\n        border: 2px solid ${theme.colors.brand[700]};\n        outline: unset;\n      }`;\n\n    if ($applyAriaDisabled || $readOnly)\n      return `\n      ${standardBgColorAndBorder}\n      :hover{\n        background-color: ${theme.colors.neutral['050']};\n      }\n      ${standardFocusRing}`;\n\n    return `\n      ${standardBgColorAndBorder}\n      :hover{\n        background-color: ${theme.colors.brand[200]};\n      }\n      :hover:not(:focus){\n        border: 1px solid ${theme.colors.brand[600]};\n      }\n      ${standardFocusRing}`;\n  }}\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<ThumbProps>`\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  top: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n  ${ThumbStates}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,KAAK,cAAc;AAC5B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAEvF,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAY5G,MAAM,cAAc;AAAA,IAChB,CAAC,EAAE,OAAO,UAAU,oBAAoB,WAAW,aAAa,UAAU,UAAU,SAAS,MAAM;AACnG,MAAI,SAAU,QAAO,eAAe,MAAM,OAAO,QAAQ,GAAG,CAAC;AAE7D,MAAI,qBAAqB,MAAM,OAAO,MAAM,GAAG;AAC/C,QAAM,uBAAuB,MAAM,OAAO,QAAQ,GAAG;AAErD,MAAI,sBAAsB,UAAW,sBAAqB,MAAM,OAAO,QAAQ,GAAG;AAElF,QAAM,mBAAmB,WACrB,CAAC,sBAAsB,oBAAoB,oBAAoB,IAC/D,CAAC,oBAAoB,oBAAoB;AAE7C,MAAI,sBAAsB,UAAW,sBAAqB,MAAM,OAAO,QAAQ,GAAG;AAElF,SAAO,eAAe,mBAAmB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,KAAK;AAAA,EACP,CAAC,CAAC;AACJ,CAAC;AAAA;AAGI,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA,YAElF,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA,eAE9B,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA,mBAC3B,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,IAChD,WAAW;AAAA;AAGR,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,qBACzC,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,CAAC;AAAA;AAG/C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA,WAEpC,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,kCAEiC,CAAC,UAAU,MAAM,WAAW,UAAU,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAYpG,MAAM,cAAc;AAAA,IAChB,CAAC,EAAE,OAAO,UAAU,oBAAoB,UAAU,MAAM;AAIxD,MAAI;AACF,WAAO;AAAA,0BACa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG/C,QAAM,2BAA2B;AAAA,0BACX,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,0BAC3B,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAE/C,QAAM,oBAAoB;AAAA,4BACF,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI/C,MAAI,sBAAsB;AACxB,WAAO;AAAA,QACL,wBAAwB;AAAA;AAAA,4BAEJ,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,QAE/C,iBAAiB;AAErB,SAAO;AAAA,QACH,wBAAwB;AAAA;AAAA,4BAEJ,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,4BAGvB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAE3C,iBAAiB;AACvB,CAAC;AAAA;AAGI,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKjF,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,IAC9C,WAAW;AAAA;",
+  "names": []
+}

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

@@ -22,12 +22,15 @@ const DSSliderV2PropTypes = {
   ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(
+    "The current value of the slider. Can be a single number or an array of two numbers for multiple sliders."
+  ).isRequired,
+  onValueChange: PropTypes.func.description("change handler, if multiple is true it will receive an array of two numbers").signature("(value: number) => void | (value: [number, number]) => void").defaultValue(() => {
+  }),
   disabled: PropTypes.bool.description("disable slider").defaultValue(false),
   minValue: PropTypes.number.description("min value for slider").defaultValue(0),
   maxValue: PropTypes.number.description("max value for slider").defaultValue(100),
   step: PropTypes.number.description("steps of values from min to max").defaultValue(5),
-  onValueChange: PropTypes.func.description("change handler").defaultValue(() => {
-  }),
   withTickMarks: PropTypes.bool.description("add tick marks between steps").defaultValue(false),
   withTickMarksValues: PropTypes.bool.description("add step value to tickmark").defaultValue(false),
   customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([]),
@@ -36,7 +39,10 @@ const DSSliderV2PropTypes = {
   ).defaultValue(false),
   readOnly: PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
-  ).defaultValue(false)
+  ).defaultValue(false),
+  minRange: PropTypes.number.description(
+    "In a multiple selection scenario, this defines the minimum range that must be maintained between the two values."
+  ).defaultValue(0)
 };
 const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
 export {

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, 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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n\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  /* **************************************************************************************************************\n   *                                           SLIDER V2 IS POLYMORPHIC                                           *\n   ****************************************************************************************************************\n   *                                           DEFINE COMMONS INTERFACES                                          *\n   ************************************************************************************************************** */\n  export type CommonRequiredProps = {\n    minValue: number;\n    maxValue: number;\n  };\n  export type CommonDefaultProps = {\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    step: number;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  };\n  export interface CommonOptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSSliderV2Name,\n    typeof SLIDER_V2_SLOTS\n  > {\n    className?: string;\n  }\n\n  /* **************************************************************************************************************\n   *                                        DEFINE EACH POLYMORPH INTERFACE                                       *\n   ****************************************************************************************************************\n   *                            make sure to expand the relevant commons interfaces!!!                            *\n   ************************************************************************************************************** */\n\n  /* **************************************************************************************************************\n   *                                            MULTIPLE(range version)                                           *\n   ************************************************************************************************************** */\n\n  // MULTIPLE POLYMORPH TYPES\n  export type RequiredPropsMultiple = CommonRequiredProps & {\n    value: [number, number];\n  };\n  export type DefaultPropsMultiple = CommonDefaultProps & {\n    multiple: true; // this must be ACTUALLY true, it's used as the distinguisher from typescript\n    onValueChange: (newValue: [number, number]) => void;\n    minRange: number; // for the \"multiple\" version, the minimum range is a default prop\n  };\n  export type OptionalPropsMultiple = CommonOptionalProps;\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsMultiple = Partial<DefaultPropsMultiple> &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n  export type InternalPropsMultiple = DefaultPropsMultiple &\n    OptionalPropsMultiple &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsMultiple | keyof OptionalPropsMultiple | keyof XstyledProps | keyof RequiredPropsMultiple\n    > &\n    XstyledProps &\n    RequiredPropsMultiple;\n\n  /* **************************************************************************************************************\n   *                                         SINGLE(number picker version)                                        *\n   ************************************************************************************************************** */\n  // SINGLE POLYMORPH TYPES\n  export type RequiredPropsSingle = CommonRequiredProps & {\n    value: number;\n  };\n  export type DefaultPropsSingle = CommonDefaultProps & {\n    multiple: false; // this must be ACTUALLY false, it's used as the distinguisher from typescript\n    onValueChange: (newValue: number) => void;\n  };\n  export type OptionalPropsSingle = CommonOptionalProps & {\n    // for the \"single\" version, the minimum range is not applicable\n    // keeping this minRange here helps typescript to discriminate if the component is being used in \"single\" or \"multiple\" mode\n    // by setting it to \"never\", we ensure that if someone tries to use \"minRange\" with the single version, TypeScript will throw an error\n    minRange?: never;\n  };\n  /* **************************************************************************************************************\n   *                    each polimorphism needs it's own \"Props\" and \"InternalProps\" defined!!!                   *\n   ************************************************************************************************************** */\n  export type PropsSingle = Partial<DefaultPropsSingle> &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n  export type InternalPropsSingle = DefaultPropsSingle &\n    OptionalPropsSingle &\n    Omit<\n      GlobalAttributesT<HTMLButtonElement>,\n      keyof DefaultPropsSingle | keyof OptionalPropsSingle | keyof XstyledProps | keyof RequiredPropsSingle\n    > &\n    XstyledProps &\n    RequiredPropsSingle;\n\n  /* **************************************************************************************************************\n   *                                       WRAP UP THE POLYMORPHIC CONTRACT                                       *\n   ************************************************************************************************************** */\n  export type DefaultProps = DefaultPropsMultiple | DefaultPropsSingle;\n  export type RequiredProps = RequiredPropsMultiple | RequiredPropsSingle;\n  export type OptionalProps = OptionalPropsMultiple | OptionalPropsSingle;\n  export type Props = PropsMultiple | PropsSingle;\n  export type InternalProps = InternalPropsMultiple | InternalPropsSingle;\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(\n    'The current value of the slider. Can be a single number or an array of two numbers for multiple sliders.',\n  ).isRequired,\n  onValueChange: PropTypes.func\n    .description('change handler, if multiple is true it will receive an array of two numbers')\n    .signature('(value: number) => void | (value: [number, number]) => void')\n    .defaultValue(() => {}),\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  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  minRange: PropTypes.number\n    .description(\n      'In a multiple selection scenario, this defines the minimum range that must be maintained between the two values.',\n    )\n    .defaultValue(0),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as ValidationMap<DSSliderV2T.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AAmHzC,MAAM,eAAyC;AAAA,EACpD,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,sBAA4D;AAAA,EACvE,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,IAClF;AAAA,EACF,EAAE;AAAA,EACF,eAAe,UAAU,KACtB,YAAY,6EAA6E,EACzF,UAAU,6DAA6D,EACvE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,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,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;AAAA,EACrB,UAAU,UAAU,OACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC;AACnB;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSSliderV2 } from "../index.js";
+const testRequiredProps = {
+  value: [10, 50],
+  minValue: 0,
+  maxValue: 100
+};
+const testOptionalProps = {};
+const testPartialDefaults = {
+  multiple: true,
+  applyAriaDisabled: false
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  multiple: true,
+  disabled: false,
+  step: 5,
+  onValueChange: () => {
+  },
+  withTickMarks: false,
+  withTickMarksValues: false,
+  customTickMarksValues: [],
+  applyAriaDisabled: false,
+  readOnly: false,
+  minRange: 10
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  value: [10, 50],
+  minValue: 0,
+  maxValue: 100,
+  multiple: true
+};
+const testInferedTypeCompatibility = {
+  value: [10, 50],
+  minValue: 0,
+  maxValue: 100,
+  multiple: true
+};
+const testDefinitionAsConst = {
+  value: [10, 50],
+  minValue: 0,
+  maxValue: 100,
+  multiple: true
+};
+const onValueChange = (value) => {
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSSliderV2, { multiple: true, value: [0, 100], minValue: 0, maxValue: 100, onValueChange })
+] });
+//# sourceMappingURL=typescript-slider-v2-valid-auto-polymorph-multiple.js.map

package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: true,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: true,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n  minRange: 10,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: [10, 50] as [number, number],\n  minValue: 0,\n  maxValue: 100,\n  multiple: true,\n} as const;\n\nconst onValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onValueChange} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuFrB,mBAEE,KAFF;AAtFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAA4B;AAAC;AAEpD,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClG;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSSliderV2 } from "../index.js";
+const testRequiredProps = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100
+};
+const testOptionalProps = {
+  minRange: void 0
+};
+const testPartialDefaults = {
+  multiple: false,
+  applyAriaDisabled: false
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  multiple: false,
+  disabled: false,
+  step: 5,
+  onValueChange: () => {
+  },
+  withTickMarks: false,
+  withTickMarksValues: false,
+  customTickMarksValues: [],
+  applyAriaDisabled: false,
+  readOnly: false
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const testInferedTypeCompatibility = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const testDefinitionAsConst = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const onValueChange = (value) => {
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSSliderV2, { value: 0, minValue: 0, maxValue: 100, onValueChange })
+] });
+//# sourceMappingURL=typescript-slider-v2-valid-auto-polymorph-single.js.map

package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  minRange: undefined,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onValueChange} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwFrB,mBAEE,KAFF;AAvFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAIA,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAAkB;AAAC;AAE1C,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClF;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-slider-v2-valid-multiple.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSSliderV2 } from "../index.js";
+const testRequiredProps = {
+  value: [10, 50],
+  minValue: 0,
+  maxValue: 100
+};
+const testOptionalProps = {};
+const testPartialDefaults = {
+  multiple: true,
+  applyAriaDisabled: false
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  multiple: true,
+  onValueChange: (newVal) => {
+  },
+  disabled: false,
+  step: 5,
+  withTickMarks: false,
+  withTickMarksValues: false,
+  customTickMarksValues: [],
+  applyAriaDisabled: false,
+  readOnly: false,
+  minRange: 0
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  value: [10, 50],
+  multiple: true,
+  minValue: 0,
+  maxValue: 100,
+  minRange: 1
+};
+const testInferedTypeCompatibility = {
+  value: [10, 50],
+  multiple: true,
+  minValue: 0,
+  maxValue: 100
+};
+const testDefinitionAsConst = {
+  value: [10, 50],
+  multiple: true,
+  minValue: 0,
+  maxValue: 100,
+  minRange: 1
+};
+const onMultipleValueChange = (value) => {
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSSliderV2, { multiple: true, value: [0, 100], minValue: 0, maxValue: 100, onValueChange: onMultipleValueChange })
+] });
+//# sourceMappingURL=typescript-slider-v2-valid-multiple.js.map

package/dist/esm/typescript-testing/typescript-slider-v2-valid-multiple.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-multiple.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsMultiple;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsMultiple;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsMultiple;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsMultiple;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsMultiple;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: [10, 50],\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: true,\n  applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: true,\n  onValueChange: (newVal: [number, number]) => {},\n  disabled: false,\n  step: 5,\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n  minRange: 0,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: [10, 50],\n  multiple: true,\n  minValue: 0,\n  maxValue: 100,\n  minRange: 1,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: [10, 50],\n  multiple: true,\n  minValue: 0,\n  maxValue: 100,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: [10, 50] as [number, number],\n  multiple: true,\n  minValue: 0,\n  maxValue: 100,\n  minRange: 1,\n} as const;\n\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* multiple auto inference works */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsFrB,mBAEE,KAFF;AArFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,eAAe,CAAC,WAA6B;AAAA,EAAC;AAAA,EAC9C,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
+  "names": []
+}

package/dist/esm/typescript-testing/{typescript-slider-v2-valid.js → typescript-slider-v2-valid-single.js}

@@ -63,13 +63,10 @@ const testDefinitionAsConst = {
 };
 const onSingleValueChange = (value) => {
 };
-const onMultipleValueChange = (value) => {
-};
 const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSSliderV2, { ...testExplicitDefinition }),
   /* @__PURE__ */ jsx(DSSliderV2, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ jsx(DSSliderV2, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ jsx(DSSliderV2, { value: 0, minValue: 0, maxValue: 100, onValueChange: onSingleValueChange }),
-  /* @__PURE__ */ jsx(DSSliderV2, { multiple: true, value: [0, 100], minValue: 0, maxValue: 100, onValueChange: onMultipleValueChange })
+  /* @__PURE__ */ jsx(DSSliderV2, { value: 0, minValue: 0, maxValue: 100, onValueChange: onSingleValueChange })
 ] });
-//# sourceMappingURL=typescript-slider-v2-valid.js.map
+//# sourceMappingURL=typescript-slider-v2-valid-single.js.map

package/dist/esm/typescript-testing/{typescript-slider-v2-valid.js.map → typescript-slider-v2-valid-single.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n  applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n    {/* multiple auto inference works */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoFrB,mBAEE,KAFF;AAnFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAChD,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-single.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsSingle;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsSingle;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsSingle;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsSingle;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsSingle;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n  applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  applyAriaDisabled: false,\n  readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsFrB,mBAEE,KAFF;AArFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAEhD,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,GACxF;",
   "names": []
 }