@pega/cosmos-react-core 4.0.0-dev.12.1 → 4.0.0-dev.14.0

package/lib/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  KeyboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  CSSProperties,\n  forwardRef,\n  Ref,\n  TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n  StyledSlider,\n  StyledTrack,\n  StyledThumb,\n  StyledSliderTrackWrapper,\n  StyledBar,\n  StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      min = 0,\n      max = 100,\n      step = 1,\n      value = min,\n      orientation = 'horizontal',\n      preview,\n      disabled = false,\n      readOnly = false,\n      showInput = true,\n      showProgress,\n      ticks = {},\n      onChange,\n      autoFocus,\n      onDragStart,\n      onDragEnd: onDragEndProp,\n      ...restProps\n    } = props;\n\n    const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const trackRef = useRef<HTMLDivElement>(null);\n    const [inDrag, setInDrag] = useState(false);\n    const [inputValue, setInputValue] = useState(value.toString());\n\n    const setValue = useCallback(\n      (newValue: number) => {\n        if (disabled || readOnly) return;\n        const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n        setInputValue(normalizedValue.toString());\n        onChange(normalizedValue);\n      },\n      [disabled, readOnly, onChange]\n    );\n\n    const { start, end } = useDirection();\n\n    const moveThumb = useCallback(\n      (e: MouseEvent | TouchEvent) => {\n        if (disabled || readOnly) return;\n        if (trackRef.current) {\n          const track = trackRef.current.getBoundingClientRect();\n          const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n          const newPosition =\n            orientation === 'horizontal'\n              ? (clientX - track[start]) / (track[end] - track[start])\n              : (clientY - track.bottom) / (track.top - track.bottom);\n\n          const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n          setValue(getNearestValue(normalizedValue, min, max, step));\n        }\n        thumbRef.current?.focus();\n      },\n      [disabled, readOnly, step, min, max, setValue, start, end]\n    );\n\n    const onThumbKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (\n          [\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'PageUp',\n            'PageDown',\n            'Home',\n            'End'\n          ].includes(e.key)\n        )\n          e.preventDefault();\n\n        switch (e.key) {\n          case 'ArrowDown':\n          case `Arrow${cap(start)}`:\n            setValue(value - step);\n            break;\n          case 'ArrowUp':\n          case `Arrow${cap(end)}`:\n            setValue(value + step);\n            break;\n          case 'PageUp':\n            setValue(value + 10 * step);\n            break;\n          case 'PageDown':\n            setValue(value - 10 * step);\n            break;\n          case 'Home':\n            setValue(min);\n            break;\n          case 'End':\n            setValue(max);\n            break;\n          default:\n        }\n      },\n      [setValue, value, step, start, end]\n    );\n\n    useEffect(() => {\n      const onDragEnd = () => {\n        setInDrag(false);\n        if (inDrag) onDragEndProp?.();\n      };\n\n      document.addEventListener('mouseup', onDragEnd);\n      document.addEventListener('touchend', onDragEnd);\n      document.addEventListener('touchcancel', onDragEnd);\n      if (inDrag) {\n        document.addEventListener('mousemove', moveThumb);\n        document.addEventListener('touchmove', moveThumb);\n      }\n\n      return () => {\n        document.removeEventListener('mouseup', onDragEnd);\n        document.removeEventListener('touchend', onDragEnd);\n        document.removeEventListener('touchcancel', onDragEnd);\n        document.removeEventListener('mousemove', moveThumb);\n        document.removeEventListener('touchmove', moveThumb);\n      };\n    }, [inDrag, moveThumb, onDragEndProp]);\n\n    useEffect(() => {\n      if (autoFocus) thumbRef.current?.focus();\n    }, [autoFocus]);\n\n    const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n    const Comp = (\n      <Flex\n        {...restProps}\n        as={StyledSlider}\n        container={{\n          alignItems: 'start',\n          direction: orientation === 'horizontal' ? 'row' : 'column'\n        }}\n        orientation={orientation}\n        {...{ status, disabled, readOnly }}\n        style={\n          {\n            '--slider-value': `${percentage}%`,\n            userSelect: inDrag ? 'none' : 'auto'\n          } as CSSProperties\n        }\n      >\n        <Grid as={StyledSliderTrackWrapper} container>\n          <Flex\n            as={StyledTrack}\n            ref={trackRef}\n            onMouseDown={moveThumb}\n            container={{ alignItems: 'center', justify: 'center' }}\n          >\n            <StyledBar showProgress={showProgress} />\n            <StyledThumb\n              ref={thumbRef}\n              role='slider'\n              tabIndex={0}\n              onKeyDown={onThumbKeyDown}\n              onMouseDown={() => {\n                setInDrag(true);\n                onDragStart?.();\n              }}\n              onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n                setInDrag(true);\n                e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n                onDragStart?.();\n              }}\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={value}\n              aria-orientation={orientation}\n              aria-readonly={readOnly || undefined}\n              aria-disabled={disabled || undefined}\n              id={id}\n              aria-label={label?.toString()}\n              aria-describedby={`${id}-info`}\n              aria-controls={`${id}-value`}\n            />\n          </Flex>\n          {Object.keys(ticks).length > 0 && (\n            <SliderTicks\n              ticks={ticks}\n              min={min}\n              max={max}\n              step={step}\n              orientation={orientation}\n              onClick={setValue}\n            />\n          )}\n        </Grid>\n        {showInput && !preview && (\n          <NumberInput\n            id={`${id}-value`}\n            status={status}\n            min={min}\n            max={max}\n            step={step}\n            value={inputValue}\n            onChange={setInputValue}\n            onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n            size={calculateValueLength(min, max, step)}\n            readOnly={readOnly}\n            disabled={disabled}\n            aria-label={label?.toString()}\n          />\n        )}\n        {preview && (\n          <StyledPreview\n            id={`${id}-value`}\n            value={value.toString()}\n            size={calculateValueLength(min, max, step)}\n          />\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Slider;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  KeyboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  CSSProperties,\n  forwardRef,\n  Ref,\n  TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useTestIds, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n  StyledSlider,\n  StyledTrack,\n  StyledThumb,\n  StyledSliderTrackWrapper,\n  StyledBar,\n  StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\nimport { getSliderTestIds } from './Slider.test-ids';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      testId,\n      id = uid,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      min = 0,\n      max = 100,\n      step = 1,\n      value = min,\n      orientation = 'horizontal',\n      preview,\n      disabled = false,\n      readOnly = false,\n      showInput = true,\n      showProgress,\n      ticks = {},\n      onChange,\n      autoFocus,\n      onDragStart,\n      onDragEnd: onDragEndProp,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getSliderTestIds);\n\n    const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const trackRef = useRef<HTMLDivElement>(null);\n    const [inDrag, setInDrag] = useState(false);\n    const [inputValue, setInputValue] = useState(value.toString());\n\n    const setValue = useCallback(\n      (newValue: number) => {\n        if (disabled || readOnly) return;\n        const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n        setInputValue(normalizedValue.toString());\n        onChange(normalizedValue);\n      },\n      [disabled, readOnly, onChange]\n    );\n\n    const { start, end } = useDirection();\n\n    const moveThumb = useCallback(\n      (e: MouseEvent | TouchEvent) => {\n        if (disabled || readOnly) return;\n        if (trackRef.current) {\n          const track = trackRef.current.getBoundingClientRect();\n          const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n          const newPosition =\n            orientation === 'horizontal'\n              ? (clientX - track[start]) / (track[end] - track[start])\n              : (clientY - track.bottom) / (track.top - track.bottom);\n\n          const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n          setValue(getNearestValue(normalizedValue, min, max, step));\n        }\n        thumbRef.current?.focus();\n      },\n      [disabled, readOnly, step, min, max, setValue, start, end]\n    );\n\n    const onThumbKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (\n          [\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'PageUp',\n            'PageDown',\n            'Home',\n            'End'\n          ].includes(e.key)\n        )\n          e.preventDefault();\n\n        switch (e.key) {\n          case 'ArrowDown':\n          case `Arrow${cap(start)}`:\n            setValue(value - step);\n            break;\n          case 'ArrowUp':\n          case `Arrow${cap(end)}`:\n            setValue(value + step);\n            break;\n          case 'PageUp':\n            setValue(value + 10 * step);\n            break;\n          case 'PageDown':\n            setValue(value - 10 * step);\n            break;\n          case 'Home':\n            setValue(min);\n            break;\n          case 'End':\n            setValue(max);\n            break;\n          default:\n        }\n      },\n      [setValue, value, step, start, end]\n    );\n\n    useEffect(() => {\n      const onDragEnd = () => {\n        setInDrag(false);\n        if (inDrag) onDragEndProp?.();\n      };\n\n      document.addEventListener('mouseup', onDragEnd);\n      document.addEventListener('touchend', onDragEnd);\n      document.addEventListener('touchcancel', onDragEnd);\n      if (inDrag) {\n        document.addEventListener('mousemove', moveThumb);\n        document.addEventListener('touchmove', moveThumb);\n      }\n\n      return () => {\n        document.removeEventListener('mouseup', onDragEnd);\n        document.removeEventListener('touchend', onDragEnd);\n        document.removeEventListener('touchcancel', onDragEnd);\n        document.removeEventListener('mousemove', moveThumb);\n        document.removeEventListener('touchmove', moveThumb);\n      };\n    }, [inDrag, moveThumb, onDragEndProp]);\n\n    useEffect(() => {\n      if (autoFocus) thumbRef.current?.focus();\n    }, [autoFocus]);\n\n    const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n    const Comp = (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledSlider}\n        container={{\n          alignItems: 'start',\n          direction: orientation === 'horizontal' ? 'row' : 'column'\n        }}\n        orientation={orientation}\n        {...{ status, disabled, readOnly }}\n        style={\n          {\n            '--slider-value': `${percentage}%`,\n            userSelect: inDrag ? 'none' : 'auto'\n          } as CSSProperties\n        }\n      >\n        <Grid as={StyledSliderTrackWrapper} container>\n          <Flex\n            as={StyledTrack}\n            ref={trackRef}\n            onMouseDown={moveThumb}\n            container={{ alignItems: 'center', justify: 'center' }}\n          >\n            <StyledBar showProgress={showProgress} />\n            <StyledThumb\n              ref={thumbRef}\n              role='slider'\n              tabIndex={0}\n              onKeyDown={onThumbKeyDown}\n              onMouseDown={() => {\n                setInDrag(true);\n                onDragStart?.();\n              }}\n              onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n                setInDrag(true);\n                e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n                onDragStart?.();\n              }}\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={value}\n              aria-orientation={orientation}\n              aria-readonly={readOnly || undefined}\n              aria-disabled={disabled || undefined}\n              id={id}\n              aria-label={label?.toString()}\n              aria-describedby={`${id}-info`}\n              aria-controls={`${id}-value`}\n            />\n          </Flex>\n          {Object.keys(ticks).length > 0 && (\n            <SliderTicks\n              ticks={ticks}\n              min={min}\n              max={max}\n              step={step}\n              orientation={orientation}\n              onClick={setValue}\n            />\n          )}\n        </Grid>\n        {showInput && !preview && (\n          <NumberInput\n            data-testid={testIds.control}\n            id={`${id}-value`}\n            status={status}\n            min={min}\n            max={max}\n            step={step}\n            value={inputValue}\n            onChange={setInputValue}\n            onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n            size={calculateValueLength(min, max, step)}\n            readOnly={readOnly}\n            disabled={disabled}\n            aria-label={label?.toString()}\n          />\n        )}\n        {preview && (\n          <StyledPreview\n            id={`${id}-value`}\n            value={value.toString()}\n            size={calculateValueLength(min, max, step)}\n          />\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ testId: testIds, label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Slider;\n"]}

package/lib/components/Slider/Slider.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,yGAoCvB,CAAC;AAIF,eAAO,MAAM,SAAS;;SAuCpB,CAAC;AAIH,eAAO,MAAM,WAAW,yGA6BvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAUhC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,aAAa;UAAiC,MAAM;SAGhE,CAAC;AAIF,eAAO,MAAM,YAAY;iBACV,UAAU,GAAG,YAAY;YAC9B,gBAAgB,CAAC,QAAQ,CAAC;SAuIlC,CAAC;AAIH,eAAO,MAAM,cAAc;;;iBAGZ,YAAY,GAAG,UAAU;SA8DtC,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAO5B,CAAC"}
+{"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,yGAoCvB,CAAC;AAIF,eAAO,MAAM,SAAS;;SAuCpB,CAAC;AAIH,eAAO,MAAM,WAAW,yGA6BvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAUhC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,aAAa;UAAiC,MAAM;SAGhE,CAAC;AAIF,eAAO,MAAM,YAAY;iBACV,UAAU,GAAG,YAAY;YAC9B,gBAAgB,CAAC,QAAQ,CAAC;SA+HlC,CAAC;AAIH,eAAO,MAAM,cAAc;;;iBAGZ,YAAY,GAAG,UAAU;SAwDtC,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAO5B,CAAC"}

package/lib/components/Slider/Slider.styles.js

@@ -119,101 +119,78 @@ export const StyledSlider = styled.div(props => {
       line-height: calc(${spacing} * 4);
     }
 
-    ${status &&
-        css `
-      ${StyledBar}::before {
-        background-color: ${statusColor};
-      }
-
-      ${StyledThumb} {
-        border-color: ${borderColor};
-        :hover,
-        :active {
-          background-color: ${thumbBgColor};
-        }
-      }
-    `}
-
-    ${orientation === 'horizontal' &&
-        css `
-      ${StyledSliderTrackWrapper} {
-        margin-inline: calc(1.5 * ${spacing});
-
-        ${StyledTrack},
-        ${StyledThumb} {
-          grid-row: 1;
-        }
-
-        ${StyledBar} {
-          /* extend by thumb width */
-          min-width: calc(100% + ${spacing} * 3);
-        }
+    ${orientation === 'horizontal'
+        ? css `
+          ${StyledSliderTrackWrapper} {
+            margin-inline: calc(1.5 * ${spacing});
 
-        ${StyledTicksContainer} {
-          grid-row: 2;
-        }
+            ${StyledTrack},
+            ${StyledThumb} {
+              grid-row: 1;
+            }
 
-        & + ${StyledNumberInput}, & + ${StyledPreview} {
-          margin-inline-start: calc(2 * ${spacing});
-        }
-      }
-    `}
+            ${StyledBar} {
+              /* extend by thumb width */
+              min-width: calc(100% + ${spacing} * 3);
+            }
 
-    /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */
+            ${StyledTicksContainer} {
+              grid-row: 2;
+            }
 
-    /* stylelint-disable no-duplicate-selectors */
-    ${orientation === 'vertical' &&
-        css `
-      ${StyledSliderTrackWrapper} {
-        grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);
-        grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;
-        margin-top: ${spacing};
+            & + ${StyledNumberInput}, & + ${StyledPreview} {
+              margin-inline-start: calc(2 * ${spacing});
+            }
+          }
+        `
+        : css `
+          ${StyledSliderTrackWrapper} {
+            grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);
+            grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;
+            margin-top: ${spacing};
 
-        ${StyledTrack} {
-          grid-row: track-start / track-end;
-          height: 100%;
-          transform: scale(-1);
+            ${StyledTrack} {
+              grid-row: track-start / track-end;
+              height: 100%;
+              transform: scale(-1);
 
-          ${StyledBar} {
-            height: 100%;
-            width: ${spacing};
+              ${StyledBar} {
+                height: 100%;
+                width: ${spacing};
 
-            ::before {
-              transform: translateY(calc(-100% + var(--slider-value, 0)));
+                ::before {
+                  transform: translateY(calc(-100% + var(--slider-value, 0)));
+                }
+              }
             }
-          }
-        }
 
-        ${StyledThumb} {
-          grid-row: track-start / track-end;
-          top: auto;
-          bottom: calc(100% - var(--slider-value));
-          left: calc(${spacing} / 2);
-          right: calc(${spacing} / 2);
-          transform: translate(0, 50%);
-        }
+            ${StyledThumb} {
+              grid-row: track-start / track-end;
+              top: auto;
+              bottom: calc(100% - var(--slider-value));
+              left: calc(${spacing} / 2);
+              right: calc(${spacing} / 2);
+              transform: translate(0, 50%);
+            }
 
-        ${StyledTicksContainer} {
-          grid-row: 1 / -1;
-          height: 100%;
-        }
+            ${StyledTicksContainer} {
+              grid-row: 1 / -1;
+              height: 100%;
+            }
 
-        & + ${StyledNumberInput}, & + ${StyledPreview} {
-          margin-top: calc(2 * ${spacing});
-          width: calc(${spacing} * 4);
-          text-align: center;
+            & + ${StyledNumberInput}, & + ${StyledPreview} {
+              margin-top: calc(2 * ${spacing});
+              width: calc(${spacing} * 4);
+              text-align: center;
 
-          /* fix NumberInput double padding issue */
-          &,
-          & > input {
-            padding: 0;
+              /* fix NumberInput double padding issue */
+              &,
+              & > input {
+                padding: 0;
+              }
+            }
           }
-        }
-      }
-    `}
-
-    /* stylelint-enable no-duplicate-selectors */
-
+        `}
 
     &[disabled],
     &[readonly] {
@@ -230,6 +207,21 @@ export const StyledSlider = styled.div(props => {
         }
       }
     }
+
+    ${status &&
+        css `
+      ${StyledBar}::before {
+        background-color: ${statusColor};
+      }
+
+      ${StyledThumb} {
+        border-color: ${borderColor};
+        :hover,
+        :active {
+          background-color: ${thumbBgColor};
+        }
+      }
+    `}
   `;
 });
 StyledSlider.defaultProps = defaultThemeProp;
@@ -237,60 +229,54 @@ export const StyledTickItem = styled(StyledGrid)(({ lowerBoundaryItem, upperBoun
     const spacing = theme.base.spacing;
     const { ltr } = useDirection();
     return css `
-    /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */
+    overflow: hidden;
 
-    /* stylelint-disable no-duplicate-selectors */
-    ${orientation === 'horizontal' &&
-        css `
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &::before {
-        width: 0.0625rem;
-        height: ${spacing};
-        transform: translateY(-50%);
-        margin: 0 auto;
-      }
+    ${orientation === 'horizontal'
+        ? css `
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &::before {
+            width: 0.0625rem;
+            height: ${spacing};
+            transform: translateY(-50%);
+            margin: 0 auto;
+          }
 
-      ${lowerBoundaryItem &&
+          ${lowerBoundaryItem &&
             css `
-        text-align: start;
-        transform: translate(-0.5ch, 0);
-        &::before {
-          margin-inline-start: 0.5ch;
-        }
-      `}
+            text-align: start;
+            transform: translate(-0.5ch, 0);
+            &::before {
+              margin-inline-start: 0.5ch;
+            }
+          `}
 
-      ${upperBoundaryItem &&
+          ${upperBoundaryItem &&
             css `
-        text-align: end;
-        transform: translate(0.5ch, 0);
-        &::before {
-          margin-inline-end: 0.5ch;
-        }
-      `}
-    `}
-
-    ${orientation === 'vertical' &&
-        css `
-      display: flex;
-      align-items: center;
+            text-align: end;
+            transform: translate(0.5ch, 0);
+            &::before {
+              margin-inline-end: 0.5ch;
+            }
+          `}
+        `
+        : css `
+          display: flex;
+          align-items: center;
 
-      &::before {
-        width: ${spacing};
-        height: calc(${spacing} / 8);
-        ${ltr
+          &::before {
+            width: ${spacing};
+            height: calc(${spacing} / 8);
+            ${ltr
             ? css `
-              transform: translateX(-50%);
-            `
+                  transform: translateX(-50%);
+                `
             : css `
-              transform: translateX(50%);
-            `}
-      }
-    `}
-
-    /* stylelint-enable no-duplicate-selectors */
-    overflow: hidden;
+                  transform: translateX(50%);
+                `}
+          }
+        `}
   `;
 });
 StyledTickItem.defaultProps = defaultThemeProp;

package/lib/components/Slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAM7D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CACnC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,oBAAoB,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,EACtE,OAAO,EACP,eAAe,EAAE,YAAY,EAC9B,EACD,UAAU,EAAE,EACV,QAAQ,EAAE,EAAE,gBAAgB,EAAE,OAAO,EAAE,EACvC,MAAM,EACP,EACF,EACF,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;gBACE,MAAM,CAAC,cAAc,CAAC,UAAU,WAAW;4BAC/B,YAAY;;0BAEd,OAAO;oBACb,OAAO;qBACN,OAAO;;;;sBAIN,MAAM,CAAC,cAAc,CAAC;;;;;4BAKhB,YAAY;wBAChB,OAAO;;KAE1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA6B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE;IAC1F,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,EACxD,UAAU,EAAE,EACV,QAAQ,EAAE,EAAE,gBAAgB,EAAE,aAAa,EAAE,EAC9C,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;qBACS,YAAY;cACnB,OAAO;;;;wBAIG,MAAM,CAAC,IAAI,CAAC,KAAK;;MAEnC,YAAY;QACd,GAAG,CAAA;;;;;;;;;4BASqB,aAAa;UAC/B,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;;aAEF;YACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;KAER;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CACnC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;qBACO,OAAO;;;;;UAKlB,WAAW;;;oBAGD,OAAO;;;UAGjB,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;KAER,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;oBAO1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;CAGhE,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC,CAAkB;WACzD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;CAE7B,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAGnC,KAAK,CAAC,EAAE;IACT,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACxC,EACD,MAAM,EACN,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GACf,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAClF,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAE1F,MAAM,WAAW,GACf,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;;0BAEc,OAAO;;;MAG3B,MAAM;QACR,GAAG,CAAA;QACC,SAAS;4BACW,WAAW;;;QAG/B,WAAW;wBACK,WAAW;;;8BAGL,YAAY;;;KAGrC;;MAEC,WAAW,KAAK,YAAY;QAC9B,GAAG,CAAA;QACC,wBAAwB;oCACI,OAAO;;UAEjC,WAAW;UACX,WAAW;;;;UAIX,SAAS;;mCAEgB,OAAO;;;UAGhC,oBAAoB;;;;cAIhB,iBAAiB,SAAS,aAAa;0CACX,OAAO;;;KAG5C;;;;;MAKC,WAAW,KAAK,UAAU;QAC5B,GAAG,CAAA;QACC,wBAAwB;sCACM,OAAO;8DACiB,OAAO;sBAC/C,OAAO;;UAEnB,WAAW;;;;;YAKT,SAAS;;qBAEA,OAAO;;;;;;;;UAQlB,WAAW;;;;uBAIE,OAAO;wBACN,OAAO;;;;UAIrB,oBAAoB;;;;;cAKhB,iBAAiB,SAAS,aAAa;iCACpB,OAAO;wBAChB,OAAO;;;;;;;;;;KAU1B;;;;;;;QAOG,WAAW;;;;QAIX,WAAW;;wBAEK,OAAO,CAAC,aAAa,CAAC;;;8BAGhB,OAAO,CAAC,kBAAkB,CAAC;;;;GAItD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAI7C,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnC,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;MAIN,WAAW,KAAK,YAAY;QAC9B,GAAG,CAAA;;;;;;kBAMW,OAAO;;;;;QAKjB,iBAAiB;YACnB,GAAG,CAAA;;;;;;OAMF;;QAEC,iBAAiB;YACnB,GAAG,CAAA;;;;;;OAMF;KACF;;MAEC,WAAW,KAAK,UAAU;QAC5B,GAAG,CAAA;;;;;iBAKU,OAAO;uBACD,OAAO;UACpB,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;;aAEF;YACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;KAER;;;;GAIF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;CAO1C,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport { NumberDisplay } from '../Number';\nimport StyledNumberInput from '../Number/NumberInput.styles';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n  ({\n    theme: {\n      base: {\n        palette: { 'primary-background': bgColor, 'border-line': borderColor },\n        spacing,\n        'border-radius': borderRadius\n      },\n      components: {\n        progress: { 'progress-color': fgColor },\n        button\n      }\n    }\n  }) => {\n    const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n    return css`\n      border: ${button['border-width']} solid ${borderColor};\n      border-radius: calc(${borderRadius} * 3);\n      outline: none;\n      background-color: ${bgColor};\n      width: calc(${spacing} * 3);\n      height: calc(${spacing} * 3);\n      cursor: pointer;\n\n      &:focus {\n        box-shadow: ${button['focus-shadow']};\n      }\n\n      &:hover,\n      &:active {\n        background-color: ${hoverBgColor};\n        border-color: ${fgColor};\n      }\n    `;\n  }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n  const {\n    base: { spacing, colors, 'border-radius': borderRadius },\n    components: {\n      progress: { 'progress-color': progressColor }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  return css`\n    border-radius: ${borderRadius};\n    height: ${spacing};\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    background-color: ${colors.gray.light};\n\n    ${showProgress &&\n    css`\n      ::before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        content: '';\n        display: block;\n        width: 100%;\n        height: 100%;\n        background-color: ${progressColor};\n        ${ltr\n          ? css`\n              transform: translateX(calc(-100% + var(--slider-value, 0)));\n            `\n          : css`\n              transform: translateX(calc(100% - var(--slider-value, 0)));\n            `}\n      }\n    `}\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    const { ltr } = useDirection();\n    return css`\n      height: calc(${spacing} * 4);\n      width: 100%;\n      cursor: pointer;\n      position: relative;\n\n      > ${StyledThumb} {\n        z-index: 1;\n        position: absolute;\n        top: calc(${spacing} / 2);\n        left: var(--slider-value);\n        right: var(--slider-value);\n        ${ltr\n          ? css`\n              transform: translate(-50%, 0);\n            `\n          : css`\n              transform: translate(50%, 0);\n            `}\n      }\n    `;\n  }\n);\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n  width: 100%;\n\n  div {\n    &::before {\n      content: '';\n      display: table;\n      background: ${p => p.theme.base.palette['foreground-color']};\n    }\n  }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n  width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled(NumberDisplay)<{ size: number }>`\n  width: ${props => props.size}ch;\n  flex-shrink: 0;\n`;\n\nStyledPreview.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n  orientation: 'vertical' | 'horizontal';\n  status: FormControlProps['status'];\n}>(props => {\n  const {\n    theme: {\n      base: { spacing, palette },\n      components: { 'form-field': formField }\n    },\n    status,\n    orientation\n  } = props;\n\n  const statusColor =\n    status && formField[status] ? formField[status]['status-color'] : 'transparent';\n  const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n  const borderColor =\n    status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n  return css`\n    > span {\n      line-height: calc(${spacing} * 4);\n    }\n\n    ${status &&\n    css`\n      ${StyledBar}::before {\n        background-color: ${statusColor};\n      }\n\n      ${StyledThumb} {\n        border-color: ${borderColor};\n        :hover,\n        :active {\n          background-color: ${thumbBgColor};\n        }\n      }\n    `}\n\n    ${orientation === 'horizontal' &&\n    css`\n      ${StyledSliderTrackWrapper} {\n        margin-inline: calc(1.5 * ${spacing});\n\n        ${StyledTrack},\n        ${StyledThumb} {\n          grid-row: 1;\n        }\n\n        ${StyledBar} {\n          /* extend by thumb width */\n          min-width: calc(100% + ${spacing} * 3);\n        }\n\n        ${StyledTicksContainer} {\n          grid-row: 2;\n        }\n\n        & + ${StyledNumberInput}, & + ${StyledPreview} {\n          margin-inline-start: calc(2 * ${spacing});\n        }\n      }\n    `}\n\n    /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */\n\n    /* stylelint-disable no-duplicate-selectors */\n    ${orientation === 'vertical' &&\n    css`\n      ${StyledSliderTrackWrapper} {\n        grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);\n        grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n        margin-top: ${spacing};\n\n        ${StyledTrack} {\n          grid-row: track-start / track-end;\n          height: 100%;\n          transform: scale(-1);\n\n          ${StyledBar} {\n            height: 100%;\n            width: ${spacing};\n\n            ::before {\n              transform: translateY(calc(-100% + var(--slider-value, 0)));\n            }\n          }\n        }\n\n        ${StyledThumb} {\n          grid-row: track-start / track-end;\n          top: auto;\n          bottom: calc(100% - var(--slider-value));\n          left: calc(${spacing} / 2);\n          right: calc(${spacing} / 2);\n          transform: translate(0, 50%);\n        }\n\n        ${StyledTicksContainer} {\n          grid-row: 1 / -1;\n          height: 100%;\n        }\n\n        & + ${StyledNumberInput}, & + ${StyledPreview} {\n          margin-top: calc(2 * ${spacing});\n          width: calc(${spacing} * 4);\n          text-align: center;\n\n          /* fix NumberInput double padding issue */\n          &,\n          & > input {\n            padding: 0;\n          }\n        }\n      }\n    `}\n\n    /* stylelint-enable no-duplicate-selectors */\n\n\n    &[disabled],\n    &[readonly] {\n      ${StyledTrack} {\n        cursor: default;\n      }\n\n      ${StyledThumb} {\n        cursor: default;\n        border-color: ${palette['border-line']};\n        :hover,\n        :active {\n          background-color: ${palette['background-color']};\n        }\n      }\n    }\n  `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n  lowerBoundaryItem?: boolean;\n  upperBoundaryItem?: boolean;\n  orientation: 'horizontal' | 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n  const spacing = theme.base.spacing;\n\n  const { ltr } = useDirection();\n\n  return css`\n    /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */\n\n    /* stylelint-disable no-duplicate-selectors */\n    ${orientation === 'horizontal' &&\n    css`\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &::before {\n        width: 0.0625rem;\n        height: ${spacing};\n        transform: translateY(-50%);\n        margin: 0 auto;\n      }\n\n      ${lowerBoundaryItem &&\n      css`\n        text-align: start;\n        transform: translate(-0.5ch, 0);\n        &::before {\n          margin-inline-start: 0.5ch;\n        }\n      `}\n\n      ${upperBoundaryItem &&\n      css`\n        text-align: end;\n        transform: translate(0.5ch, 0);\n        &::before {\n          margin-inline-end: 0.5ch;\n        }\n      `}\n    `}\n\n    ${orientation === 'vertical' &&\n    css`\n      display: flex;\n      align-items: center;\n\n      &::before {\n        width: ${spacing};\n        height: calc(${spacing} / 8);\n        ${ltr\n          ? css`\n              transform: translateX(-50%);\n            `\n          : css`\n              transform: translateX(50%);\n            `}\n      }\n    `}\n\n    /* stylelint-enable no-duplicate-selectors */\n    overflow: hidden;\n  `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n  cursor: pointer;\n  line-height: 1em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport { NumberDisplay } from '../Number';\nimport StyledNumberInput from '../Number/NumberInput.styles';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n  ({\n    theme: {\n      base: {\n        palette: { 'primary-background': bgColor, 'border-line': borderColor },\n        spacing,\n        'border-radius': borderRadius\n      },\n      components: {\n        progress: { 'progress-color': fgColor },\n        button\n      }\n    }\n  }) => {\n    const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n    return css`\n      border: ${button['border-width']} solid ${borderColor};\n      border-radius: calc(${borderRadius} * 3);\n      outline: none;\n      background-color: ${bgColor};\n      width: calc(${spacing} * 3);\n      height: calc(${spacing} * 3);\n      cursor: pointer;\n\n      &:focus {\n        box-shadow: ${button['focus-shadow']};\n      }\n\n      &:hover,\n      &:active {\n        background-color: ${hoverBgColor};\n        border-color: ${fgColor};\n      }\n    `;\n  }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n  const {\n    base: { spacing, colors, 'border-radius': borderRadius },\n    components: {\n      progress: { 'progress-color': progressColor }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  return css`\n    border-radius: ${borderRadius};\n    height: ${spacing};\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    background-color: ${colors.gray.light};\n\n    ${showProgress &&\n    css`\n      ::before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        content: '';\n        display: block;\n        width: 100%;\n        height: 100%;\n        background-color: ${progressColor};\n        ${ltr\n          ? css`\n              transform: translateX(calc(-100% + var(--slider-value, 0)));\n            `\n          : css`\n              transform: translateX(calc(100% - var(--slider-value, 0)));\n            `}\n      }\n    `}\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    const { ltr } = useDirection();\n    return css`\n      height: calc(${spacing} * 4);\n      width: 100%;\n      cursor: pointer;\n      position: relative;\n\n      > ${StyledThumb} {\n        z-index: 1;\n        position: absolute;\n        top: calc(${spacing} / 2);\n        left: var(--slider-value);\n        right: var(--slider-value);\n        ${ltr\n          ? css`\n              transform: translate(-50%, 0);\n            `\n          : css`\n              transform: translate(50%, 0);\n            `}\n      }\n    `;\n  }\n);\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n  width: 100%;\n\n  div {\n    &::before {\n      content: '';\n      display: table;\n      background: ${p => p.theme.base.palette['foreground-color']};\n    }\n  }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n  width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled(NumberDisplay)<{ size: number }>`\n  width: ${props => props.size}ch;\n  flex-shrink: 0;\n`;\n\nStyledPreview.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n  orientation: 'vertical' | 'horizontal';\n  status: FormControlProps['status'];\n}>(props => {\n  const {\n    theme: {\n      base: { spacing, palette },\n      components: { 'form-field': formField }\n    },\n    status,\n    orientation\n  } = props;\n\n  const statusColor =\n    status && formField[status] ? formField[status]['status-color'] : 'transparent';\n  const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n  const borderColor =\n    status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n  return css`\n    > span {\n      line-height: calc(${spacing} * 4);\n    }\n\n    ${orientation === 'horizontal'\n      ? css`\n          ${StyledSliderTrackWrapper} {\n            margin-inline: calc(1.5 * ${spacing});\n\n            ${StyledTrack},\n            ${StyledThumb} {\n              grid-row: 1;\n            }\n\n            ${StyledBar} {\n              /* extend by thumb width */\n              min-width: calc(100% + ${spacing} * 3);\n            }\n\n            ${StyledTicksContainer} {\n              grid-row: 2;\n            }\n\n            & + ${StyledNumberInput}, & + ${StyledPreview} {\n              margin-inline-start: calc(2 * ${spacing});\n            }\n          }\n        `\n      : css`\n          ${StyledSliderTrackWrapper} {\n            grid-template-columns: calc(${spacing} * 4) minmax(0, 1fr);\n            grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n            margin-top: ${spacing};\n\n            ${StyledTrack} {\n              grid-row: track-start / track-end;\n              height: 100%;\n              transform: scale(-1);\n\n              ${StyledBar} {\n                height: 100%;\n                width: ${spacing};\n\n                ::before {\n                  transform: translateY(calc(-100% + var(--slider-value, 0)));\n                }\n              }\n            }\n\n            ${StyledThumb} {\n              grid-row: track-start / track-end;\n              top: auto;\n              bottom: calc(100% - var(--slider-value));\n              left: calc(${spacing} / 2);\n              right: calc(${spacing} / 2);\n              transform: translate(0, 50%);\n            }\n\n            ${StyledTicksContainer} {\n              grid-row: 1 / -1;\n              height: 100%;\n            }\n\n            & + ${StyledNumberInput}, & + ${StyledPreview} {\n              margin-top: calc(2 * ${spacing});\n              width: calc(${spacing} * 4);\n              text-align: center;\n\n              /* fix NumberInput double padding issue */\n              &,\n              & > input {\n                padding: 0;\n              }\n            }\n          }\n        `}\n\n    &[disabled],\n    &[readonly] {\n      ${StyledTrack} {\n        cursor: default;\n      }\n\n      ${StyledThumb} {\n        cursor: default;\n        border-color: ${palette['border-line']};\n        :hover,\n        :active {\n          background-color: ${palette['background-color']};\n        }\n      }\n    }\n\n    ${status &&\n    css`\n      ${StyledBar}::before {\n        background-color: ${statusColor};\n      }\n\n      ${StyledThumb} {\n        border-color: ${borderColor};\n        :hover,\n        :active {\n          background-color: ${thumbBgColor};\n        }\n      }\n    `}\n  `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n  lowerBoundaryItem?: boolean;\n  upperBoundaryItem?: boolean;\n  orientation: 'horizontal' | 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n  const spacing = theme.base.spacing;\n\n  const { ltr } = useDirection();\n\n  return css`\n    overflow: hidden;\n\n    ${orientation === 'horizontal'\n      ? css`\n          text-align: center;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          &::before {\n            width: 0.0625rem;\n            height: ${spacing};\n            transform: translateY(-50%);\n            margin: 0 auto;\n          }\n\n          ${lowerBoundaryItem &&\n          css`\n            text-align: start;\n            transform: translate(-0.5ch, 0);\n            &::before {\n              margin-inline-start: 0.5ch;\n            }\n          `}\n\n          ${upperBoundaryItem &&\n          css`\n            text-align: end;\n            transform: translate(0.5ch, 0);\n            &::before {\n              margin-inline-end: 0.5ch;\n            }\n          `}\n        `\n      : css`\n          display: flex;\n          align-items: center;\n\n          &::before {\n            width: ${spacing};\n            height: calc(${spacing} / 8);\n            ${ltr\n              ? css`\n                  transform: translateX(-50%);\n                `\n              : css`\n                  transform: translateX(50%);\n                `}\n          }\n        `}\n  `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n  cursor: pointer;\n  line-height: 1em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Slider/Slider.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+//# sourceMappingURL=Slider.test-ids.d.ts.map

package/lib/components/Slider/Slider.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}

package/lib/components/Slider/Slider.test-ids.js

@@ -0,0 +1,4 @@
+import { createTestIds } from '../../utils';
+import { elements } from '../FormField/FormField.test-ids';
+export const getSliderTestIds = createTestIds('slider', ['control', ...elements]);
+//# sourceMappingURL=Slider.test-ids.js.map

package/lib/components/Slider/Slider.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.test-ids.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getSliderTestIds = createTestIds('slider', ['control', ...elements] as const);\n"]}

package/lib/components/Slider/Slider.types.d.ts

@@ -1,6 +1,6 @@
-import { BaseProps, NoChildrenProp } from '../../types';
+import { BaseProps, NoChildrenProp, TestIdProp } from '../../types';
 import { FormControlProps } from '../FormControl';
-export default interface SliderProps extends BaseProps, NoChildrenProp {
+export default interface SliderProps extends BaseProps, NoChildrenProp, TestIdProp {
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.

package/lib/components/Slider/Slider.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IACpE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/components/Slider/Slider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps, NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value: number;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Will automatically focus the thumb on render if true */\n  autoFocus?: boolean;\n  /**\n   * Minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Maximum value.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Step value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Slider orientation.\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Show slider color progress bar.\n   * @default false\n   */\n  showProgress?: boolean;\n  /**\n   * Show current value.\n   * @default false\n   */\n  preview?: boolean;\n  /**\n   * Display input to provide value.\n   * @default true\n   */\n  showInput?: boolean;\n  /**\n   * Display defined ticks.\n   */\n  ticks?: { [key: number]: string };\n  /**\n   * On change callback.\n   * @param value new input value\n   */\n  onChange: (value: number) => void;\n  /**\n   * Called when the user starts dragging the slider thumb.\n   */\n  onDragStart?: () => void;\n  /**\n   * Called when the user stops dragging the slider thumb.\n   */\n  onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n  start: number;\n  end: number;\n  value: number;\n  label: string;\n}\n"]}
+{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value: number;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Will automatically focus the thumb on render if true */\n  autoFocus?: boolean;\n  /**\n   * Minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Maximum value.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Step value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Slider orientation.\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Show slider color progress bar.\n   * @default false\n   */\n  showProgress?: boolean;\n  /**\n   * Show current value.\n   * @default false\n   */\n  preview?: boolean;\n  /**\n   * Display input to provide value.\n   * @default true\n   */\n  showInput?: boolean;\n  /**\n   * Display defined ticks.\n   */\n  ticks?: { [key: number]: string };\n  /**\n   * On change callback.\n   * @param value new input value\n   */\n  onChange: (value: number) => void;\n  /**\n   * Called when the user starts dragging the slider thumb.\n   */\n  onDragStart?: () => void;\n  /**\n   * Called when the user stops dragging the slider thumb.\n   */\n  onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n  start: number;\n  end: number;\n  value: number;\n  label: string;\n}\n"]}

package/lib/components/Slider/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,QACL,MAAM,WACH,OAAO,KACf,cAAc,EAkDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAW7E,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,QACL,MAAM,WACH,OAAO,KACf,cAAc,EAiDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAW7E,CAAC"}

package/lib/components/Slider/utils.js

@@ -37,7 +37,6 @@ export const calculateTicksRegions = (ticksMap, min, max, step, stretch) => {
     const maxCell = (max - min) / step + 2;
     const result = [];
     // extend the tick segments one by one
-    // eslint-disable-next-line no-restricted-syntax
     for (const { prev, current, next } of triple(defs)) {
         let start = current.start;
         let end = current.end;

package/lib/components/Slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { triple } from '../../utils';\n\nimport SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^  ^----2----^^----3----^      ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param step step in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n  ticksMap: NonNullable<SliderProps['ticks']>,\n  min: number,\n  max: number,\n  step: number,\n  stretch: boolean\n): TickDefinition[] => {\n  // calculate initial positions for every tick, the tick segment has the width = 1\n  const defs = Object.entries(ticksMap)\n    .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n    .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n    .map(([tickValue, tickLabel]) => {\n      const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1\n      const cellStart = cell;\n      const cellEnd = cellStart + 1;\n      return {\n        start: cellStart,\n        end: cellEnd,\n        value: Number(tickValue),\n        label: tickLabel\n      };\n    });\n\n  if (!stretch) return defs;\n\n  const maxCell = (max - min) / step + 2;\n\n  const result = [];\n  // extend the tick segments one by one\n  // eslint-disable-next-line no-restricted-syntax\n  for (const { prev, current, next } of triple(defs)) {\n    let start = current.start;\n    let end = current.end;\n    if (start === 1) {\n      // if the tick is marginal (starting) - expand to the 'right'\n      end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n    } else if (end === maxCell) {\n      // if the tick is marginal (ending) - expand to the 'left'\n      start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n    } else {\n      // calculate length between current and prev / next tick and choose the smaller value\n      const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n      // expand the segment to the left\n      start -= Math.floor(length / 2);\n      // expand to the right\n      end += Math.floor(length / 2);\n    }\n    result.push({\n      start,\n      end,\n      value: current.value,\n      label: current.label\n    });\n  }\n\n  return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n  const output = Math.round(input / step) * step;\n\n  const decimals = step.toString().split('.')[1]?.length;\n  return Number(output.toFixed(decimals || 0));\n};\n\n/**\n * Function calculates minimum length of the field where any value from the set of possible values will fit in.\n * @param min minimum value\n * @param max maximum value\n * @param step step in range\n * @returns minimum number of characters the field needs\n */\nexport const calculateValueLength = (min: number, max: number, step: number): number => {\n  const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');\n  const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');\n  const stepDecimalPart = step.toString().split('.')[1] ?? '';\n  return (\n    Math.max(minIntegerPart.length, maxIntegerPart.length) +\n    Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +\n    (maxDecimalPart || minDecimalPart || stepDecimalPart\n      ? 1 // if there's decimal part, reserve a space for the separator\n      : 0)\n  );\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { triple } from '../../utils';\n\nimport SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^  ^----2----^^----3----^      ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param step step in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n  ticksMap: NonNullable<SliderProps['ticks']>,\n  min: number,\n  max: number,\n  step: number,\n  stretch: boolean\n): TickDefinition[] => {\n  // calculate initial positions for every tick, the tick segment has the width = 1\n  const defs = Object.entries(ticksMap)\n    .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n    .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n    .map(([tickValue, tickLabel]) => {\n      const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1\n      const cellStart = cell;\n      const cellEnd = cellStart + 1;\n      return {\n        start: cellStart,\n        end: cellEnd,\n        value: Number(tickValue),\n        label: tickLabel\n      };\n    });\n\n  if (!stretch) return defs;\n\n  const maxCell = (max - min) / step + 2;\n\n  const result = [];\n  // extend the tick segments one by one\n  for (const { prev, current, next } of triple(defs)) {\n    let start = current.start;\n    let end = current.end;\n    if (start === 1) {\n      // if the tick is marginal (starting) - expand to the 'right'\n      end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n    } else if (end === maxCell) {\n      // if the tick is marginal (ending) - expand to the 'left'\n      start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n    } else {\n      // calculate length between current and prev / next tick and choose the smaller value\n      const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n      // expand the segment to the left\n      start -= Math.floor(length / 2);\n      // expand to the right\n      end += Math.floor(length / 2);\n    }\n    result.push({\n      start,\n      end,\n      value: current.value,\n      label: current.label\n    });\n  }\n\n  return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n  const output = Math.round(input / step) * step;\n\n  const decimals = step.toString().split('.')[1]?.length;\n  return Number(output.toFixed(decimals || 0));\n};\n\n/**\n * Function calculates minimum length of the field where any value from the set of possible values will fit in.\n * @param min minimum value\n * @param max maximum value\n * @param step step in range\n * @returns minimum number of characters the field needs\n */\nexport const calculateValueLength = (min: number, max: number, step: number): number => {\n  const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');\n  const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');\n  const stepDecimalPart = step.toString().split('.')[1] ?? '';\n  return (\n    Math.max(minIntegerPart.length, maxIntegerPart.length) +\n    Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +\n    (maxDecimalPart || minDecimalPart || stepDecimalPart\n      ? 1 // if there's decimal part, reserve a space for the separator\n      : 0)\n  );\n};\n"]}

package/lib/components/SummaryItem/SummaryItem.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, Ref, ElementType } from 'react';
 import { GridContainerProps } from '../Grid';
-import { ForwardProps, NoChildrenProp } from '../../types';
-export interface SummaryItemProps extends NoChildrenProp {
+import { ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
+export interface SummaryItemProps extends NoChildrenProp, TestIdProp {
     /** Region for the primary information. */
     primary: NonNullable<ReactNode>;
     /** Region for displaying supporting metadata. */

package/lib/components/SummaryItem/SummaryItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,UAAU;IAClE,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryItem/SummaryItem.js

@@ -4,6 +4,8 @@ import styled, { css } from 'styled-components';
 import Grid from '../Grid';
 import { defaultThemeProp } from '../../theme';
 import { StyledProgressRing } from '../Progress';
+import { useTestIds } from '../../hooks';
+import { getSummaryItemTestIds } from './SummaryItem.test-ids';
 export const StyledVisual = styled.div `
   > ${StyledProgressRing}, img {
     display: block;
@@ -54,13 +56,14 @@ const getColumns = ({ visual, actions }) => {
 const getAreas = ({ secondary, visual, actions }) => {
     return `"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}"${secondary ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"` : ''}`;
 };
-const SummaryItem = forwardRef(({ visual, primary, secondary, actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) => {
-    return (_jsxs(Grid, { ...restProps, ref: ref, container: {
+const SummaryItem = forwardRef(({ testId, visual, primary, secondary, actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) => {
+    const testIds = useTestIds(testId, getSummaryItemTestIds);
+    return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, ref: ref, container: {
             cols: getColumns({ visual, actions }),
             colGap: 2,
             areas: getAreas({ secondary, visual, actions }),
             ...container
-        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual })), _jsx(StyledPrimary, { item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }), secondary && (_jsx(StyledSecondary, { item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy, children: secondary })), actions && (_jsx(Grid, { as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }))] }));
+        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { "data-testid": testIds.visual, as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual })), _jsx(StyledPrimary, { "data-testid": testIds.primary, item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }), secondary && (_jsx(StyledSecondary, { "data-testid": testIds.secondary, item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy, children: secondary })), actions && (_jsx(Grid, { "data-testid": testIds.actions, as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }))] }));
 });
 export default SummaryItem;
 //# sourceMappingURL=SummaryItem.js.map