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

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, BaseProps, ForwardProps, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\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?: FormControlProps['value'];\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  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean; readOnly: boolean }>(props => {\n  const { readOnly } = props;\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cSpell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      testId,\n      additionalInfo,\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getSelectTestIds);\n\n    const Comp = (\n      <StyledFormControl\n        data-testid={testIds.control}\n        {...restProps}\n        as={StyledSelect}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        label={label}\n        readOnly={readOnly}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n                if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          testId: testIds.root,\n          label: (\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          ),\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Select;\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, BaseProps, ForwardProps, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\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?: FormControlProps['value'];\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  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean; readOnly: boolean }>(props => {\n  const { readOnly } = props;\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cspell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${readOnly &&\n    css`\n      background-image: none;\n    `}\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      testId,\n      additionalInfo,\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getSelectTestIds);\n\n    const Comp = (\n      <StyledFormControl\n        data-testid={testIds.control}\n        {...restProps}\n        as={StyledSelect}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        label={label}\n        readOnly={readOnly}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n                if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          testId: testIds,\n          label: (\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          ),\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Select;\n"]}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.test-ids.js","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getSelectTestIds = createTestIds('select', ['control'] as const);\n"]}
+{"version":3,"file":"Select.test-ids.js","sourceRoot":"","sources":["../../../src/components/Select/Select.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 getSelectTestIds = createTestIds('select', ['control', ...elements] as const);\n"]}

package/lib/components/Slider/Slider.js

@@ -116,7 +116,7 @@ const Slider = forwardRef((props, ref) => {
                                     e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
                                     onDragStart?.();
                                 }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` })] }), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }))] }), showInput && !preview && (_jsx(NumberInput, { "data-testid": testIds.control, id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() })), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }))] }));
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled, testId }, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { ...{ testId: testIds, label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
 });
 export default Slider;
 //# sourceMappingURL=Slider.js.map

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, 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 {...{ label, labelHidden, id, info, status, required, disabled, testId }}>\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":"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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    ${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":"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,WAAW,KAAK,YAAY;QAC5B,CAAC,CAAC,GAAG,CAAA;YACC,wBAAwB;wCACI,OAAO;;cAEjC,WAAW;cACX,WAAW;;;;cAIX,SAAS;;uCAEgB,OAAO;;;cAGhC,oBAAoB;;;;kBAIhB,iBAAiB,SAAS,aAAa;8CACX,OAAO;;;SAG5C;QACH,CAAC,CAAC,GAAG,CAAA;YACC,wBAAwB;0CACM,OAAO;kEACiB,OAAO;0BAC/C,OAAO;;cAEnB,WAAW;;;;;gBAKT,SAAS;;yBAEA,OAAO;;;;;;;;cAQlB,WAAW;;;;2BAIE,OAAO;4BACN,OAAO;;;;cAIrB,oBAAoB;;;;;kBAKhB,iBAAiB,SAAS,aAAa;qCACpB,OAAO;4BAChB,OAAO;;;;;;;;;;SAU1B;;;;QAID,WAAW;;;;QAIX,WAAW;;wBAEK,OAAO,CAAC,aAAa,CAAC;;;8BAGhB,OAAO,CAAC,kBAAkB,CAAC;;;;;MAKnD,MAAM;QACR,GAAG,CAAA;QACC,SAAS;4BACW,WAAW;;;QAG/B,WAAW;wBACK,WAAW;;;8BAGL,YAAY;;;KAGrC;GACF,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;;;MAGN,WAAW,KAAK,YAAY;QAC5B,CAAC,CAAC,GAAG,CAAA;;;;;;sBAMW,OAAO;;;;;YAKjB,iBAAiB;YACnB,GAAG,CAAA;;;;;;WAMF;;YAEC,iBAAiB;YACnB,GAAG,CAAA;;;;;;WAMF;SACF;QACH,CAAC,CAAC,GAAG,CAAA;;;;;qBAKU,OAAO;2BACD,OAAO;cACpB,GAAG;YACH,CAAC,CAAC,GAAG,CAAA;;iBAEF;YACH,CAAC,CAAC,GAAG,CAAA;;iBAEF;;SAER;GACN,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    ${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

@@ -1,2 +1,2 @@
-export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["control"]>;
+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

@@ -1 +1 @@
-{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,gGAAgD,CAAC"}
+{"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

@@ -1,3 +1,4 @@
 import { createTestIds } from '../../utils';
-export const getSliderTestIds = createTestIds('slider', ['control']);
+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

@@ -1 +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;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getSliderTestIds = createTestIds('slider', ['control'] as const);\n"]}
+{"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/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.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
 //# sourceMappingURL=SummaryItem.test-ids.d.ts.map