@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/cjs/Slider/Slider.cjs

@@ -263,7 +263,7 @@ const HvSlider = React.forwardRef((props, ref) => {
   };
   const createKnob = (knobNode, params) => {
     const { value: knobValue, dragging, index } = params;
-    const { className: knobClassName, style, ...restProps } = knobNode.props;
+    const { style = {}, ...restProps } = knobNode.props;
     const scaledKnobValue = utils.knobsPositionToScaledValue(
       knobValue,
       minPointValue,
@@ -299,7 +299,7 @@ const HvSlider = React.forwardRef((props, ref) => {
               {
                 id: indexedHandleId,
                 style,
-                className: cx(knobClassName, classes.handle),
+                className: classes.handle,
                 ...restProps,
                 "aria-label": `${label}-knob-${index}`,
                 "aria-valuenow": utils.knobsPositionToScaledValue(
@@ -379,72 +379,34 @@ const HvSlider = React.forwardRef((props, ref) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: [
-          isSingle && /* @__PURE__ */ jsxRuntime.jsx(
-            Slider__default.default,
-            {
-              ref,
-              handleRender: createKnob,
-              className: classes.sliderRoot,
-              min: 0,
-              max: divisionQuantity,
-              step: 1,
-              marks,
-              dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot,
-              onChange: (singleValue) => onChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              onBeforeChange: (singleValue) => onBeforeChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              onAfterChange: (singleValue) => onAfterChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              value: knobsPositions.length > 0 ? knobsPositions[0] : void 0,
-              allowCross: false,
-              disabled,
-              count: rangesCount,
-              railStyle: Slider_styles.sliderStyles.rail,
-              handleStyle: knobStyles.knobInner,
-              trackStyle: trackStyles,
-              ...sliderProps
-            }
-          ),
-          !isSingle && /* @__PURE__ */ jsxRuntime.jsx(
-            Slider__default.default,
-            {
-              ref,
-              range: true,
-              handleRender: createKnob,
-              className: cx(classes.sliderRoot, {
-                [classes.rootRange]: !isSingle
-              }),
-              min: 0,
-              max: divisionQuantity,
-              step: 1,
-              marks,
-              disabled,
-              dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot,
-              onChange: (singleValue) => onChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              onBeforeChange: (singleValue) => onBeforeChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              onAfterChange: (singleValue) => onAfterChangeHandler(
-                Array.isArray(singleValue) ? singleValue : [singleValue]
-              ),
-              value: knobsPositions.length > 0 ? [...knobsPositions] : void 0,
-              allowCross: false,
-              count: rangesCount,
-              railStyle: Slider_styles.sliderStyles.rail,
-              handleStyle: knobStyles.knobInner,
-              trackStyle: trackStyles,
-              draggableTrack: !readOnly && !isSingle,
-              ...sliderProps
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: /* @__PURE__ */ jsxRuntime.jsx(
+          Slider__default.default,
+          {
+            ref,
+            range: !isSingle,
+            handleRender: createKnob,
+            className: cx(classes.sliderRoot, {
+              [classes.rootRange]: !isSingle
+            }),
+            min: 0,
+            max: divisionQuantity,
+            step: 1,
+            marks,
+            dotStyle: disabled ? Slider_styles.sliderStyles.dotDisabled : Slider_styles.sliderStyles.dot,
+            onChange: (singleValue) => onChangeHandler(Array().concat(singleValue)),
+            onBeforeChange: (singleValue) => onBeforeChangeHandler(Array().concat(singleValue)),
+            onAfterChange: (singleValue) => onAfterChangeHandler(Array().concat(singleValue)),
+            value: knobsPositions.length === 0 ? void 0 : isSingle ? knobsPositions[0] : [...knobsPositions],
+            allowCross: false,
+            disabled,
+            count: rangesCount,
+            railStyle: Slider_styles.sliderStyles.rail,
+            handleStyle: knobStyles.knobInner,
+            trackStyle: trackStyles,
+            draggableTrack: !readOnly && !isSingle,
+            ...sliderProps
+          }
+        ) }),
         canShowError && /* @__PURE__ */ jsxRuntime.jsx(
           WarningText.HvWarningText,
           {

package/dist/cjs/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"../Input\";\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /**\n   * The slider name.\n   */\n  name?: string;\n  /**\n   * The label of the slider.\n   *\n   * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Indicates that the slider is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the slider is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user slider is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * What message to render when the value is required.\n   */\n  requiredMessage?: string;\n  /**\n   * If `true` the input that controls the slider is hidden.\n   */\n  hideInput?: boolean;\n  /**\n   * Attributes applied to the slider element.\n   */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus | HvFormStatus[];\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * The default values array to apply to the component\n   */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /**\n   * The object used to set the mark properties individually.\n   */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /**\n   * The function executed while a change is occurring in the slider.\n   */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   */\n  onAfterChange?: (value: number[]) => void;\n  /**\n   * The function executed after a blur ocurred in the slider.\n   */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[]\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /**\n   * How many subdivisions there are in the slider.\n   */\n  divisionQuantity?: number;\n  /**\n   * The value of the first point in the slider from left to right.\n   */\n  minPointValue?: number;\n  /**\n   * The value of the last point in the slider from left to right.\n   */\n  maxPointValue?: number;\n  /**\n   * The nax number of decimals if no format function is applied\n   */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n   */\n  noOverlap?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Attributes applied to the knob element.\n   */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /**\n   * The classes object to be applied into the root object.\n   */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    noOverlap = true,\n    hideInput = false,\n    required = false,\n    readOnly = false,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id, \"hvSlider\");\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue: number = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue]\n  );\n\n  const inverseStepValue: number = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      stepValue,\n    ]\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp]\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp]\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue\n      ),\n    [defaultValues, inverseStepValue, minPointValue]\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status]\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n  const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  const performValidation = useCallback(() => {\n    let invalid: boolean = false;\n\n    const newValidationState = knobsPositions.map((position) => {\n      if (position == null || Number.isNaN(position)) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    knobsPositions,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue\n        )\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = (\n    knobsCurrentPosition: number[]\n  ): { knobsPosition: number[]; knobsValues: number[] } => {\n    const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n    const knobsValues: number[] = [];\n\n    let duplicatedValue: number | null = null;\n\n    const findDuplicated: number[] = newKnobsPosition.filter(\n      (item, index) => newKnobsPosition.indexOf(item) !== index\n    );\n\n    if (noOverlap && findDuplicated.length > 0) {\n      [duplicatedValue] = findDuplicated;\n    }\n\n    newKnobsPosition.forEach((position, index, array) => {\n      const newArray: number[] = array;\n      let newPosition: number = position;\n\n      if (noOverlap && newPosition === duplicatedValue) {\n        const previousValue = knobsPositions[index];\n        if (previousValue !== newPosition) {\n          newPosition += newPosition > previousValue ? -1 : 1;\n          newArray[index] = newPosition;\n        }\n      }\n\n      knobsValues[index] = knobsPositionToScaledValue(\n        newPosition,\n        minPointValue,\n        stepValue\n      );\n    }, this);\n\n    return {\n      knobsPosition: newKnobsPosition,\n      knobsValues,\n    };\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   *\n   * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n   * @memberof HvSlider\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   *\n   * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n   * @memberof HvSlider\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   *\n   * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n   * @memberof HvSlider\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   *\n   * @param {Object} props - An object containing the properties of the knobs.\n   * @memberof HvSlider\n   */\n  const createKnob = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { className: knobClassName, style, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() =>\n            document.getElementById(indexedHandleId || \"\") as HTMLElement\n          }\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={cx(knobClassName, classes.handle)}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"slider\")}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsPositionsToKnobsValues(\n                knobsPositions,\n                stepValue,\n                minPointValue\n              )}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        {isSingle && (\n          <Slider\n            ref={ref}\n            handleRender={createKnob}\n            className={classes.sliderRoot}\n            min={0}\n            max={divisionQuantity}\n            step={1}\n            marks={marks}\n            dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n            onChange={(singleValue) =>\n              onChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            onBeforeChange={(singleValue) =>\n              onBeforeChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            onAfterChange={(singleValue) =>\n              onAfterChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n            allowCross={false}\n            disabled={disabled}\n            count={rangesCount}\n            railStyle={sliderStyles.rail}\n            handleStyle={knobStyles.knobInner}\n            trackStyle={trackStyles}\n            {...sliderProps}\n          />\n        )}\n        {!isSingle && (\n          <Slider\n            ref={ref}\n            range\n            handleRender={createKnob}\n            className={cx(classes.sliderRoot, {\n              [classes.rootRange]: !isSingle,\n            })}\n            min={0}\n            max={divisionQuantity}\n            step={1}\n            marks={marks}\n            disabled={disabled}\n            dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n            onChange={(singleValue) =>\n              onChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            onBeforeChange={(singleValue) =>\n              onBeforeChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            onAfterChange={(singleValue) =>\n              onAfterChangeHandler(\n                Array.isArray(singleValue) ? singleValue : [singleValue]\n              )\n            }\n            value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n            allowCross={false}\n            count={rangesCount}\n            railStyle={sliderStyles.rail}\n            handleStyle={knobStyles.knobInner}\n            trackStyle={trackStyles}\n            draggableTrack={!readOnly && !isSingle}\n            {...sliderProps}\n          />\n        )}\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useClasses","useRef","useUniqueId","setId","useMemo","calculateStepValue","createMark","isSingleSlider","knobsValuesToKnobsPositions","useControlled","convertStatusToArray","useState","generateDefaultKnobProperties","createTrackStyles","createKnobStyles","useCallback","validationStates","useEffect","knobsPositionToScaledValue","scaledValueToKnobsPositionValue","ensureValuesConsistency","jsx","Tooltip","jsxs","HvFormElement","statusArrayToFormStatus","HvLabel","HvSliderInput","knobsPositionsToKnobsValues","Slider","sliderStyles","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"../Input\";\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /**\n   * The slider name.\n   */\n  name?: string;\n  /**\n   * The label of the slider.\n   *\n   * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Indicates that the slider is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the slider is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user slider is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * What message to render when the value is required.\n   */\n  requiredMessage?: string;\n  /**\n   * If `true` the input that controls the slider is hidden.\n   */\n  hideInput?: boolean;\n  /**\n   * Attributes applied to the slider element.\n   */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus | HvFormStatus[];\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * The default values array to apply to the component\n   */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /**\n   * The object used to set the mark properties individually.\n   */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /**\n   * The function executed while a change is occurring in the slider.\n   */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /**\n   * The function executed after a blur ocurred in the slider.\n   */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[]\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /**\n   * How many subdivisions there are in the slider.\n   */\n  divisionQuantity?: number;\n  /**\n   * The value of the first point in the slider from left to right.\n   */\n  minPointValue?: number;\n  /**\n   * The value of the last point in the slider from left to right.\n   */\n  maxPointValue?: number;\n  /**\n   * The nax number of decimals if no format function is applied\n   */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n   */\n  noOverlap?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Attributes applied to the knob element.\n   */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /**\n   * The classes object to be applied into the root object.\n   */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    noOverlap = true,\n    hideInput = false,\n    required = false,\n    readOnly = false,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id, \"hvSlider\");\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue]\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      stepValue,\n    ]\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp]\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp]\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue\n      ),\n    [defaultValues, inverseStepValue, minPointValue]\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status]\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n\n    const newValidationState = knobsPositions.map((position) => {\n      if (position == null || Number.isNaN(position)) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    knobsPositions,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue\n        )\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = (\n    knobsCurrentPosition: number[]\n  ): { knobsPosition: number[]; knobsValues: number[] } => {\n    const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n    const knobsValues: number[] = [];\n\n    let duplicatedValue: number | null = null;\n\n    const findDuplicated: number[] = newKnobsPosition.filter(\n      (item, index) => newKnobsPosition.indexOf(item) !== index\n    );\n\n    if (noOverlap && findDuplicated.length > 0) {\n      [duplicatedValue] = findDuplicated;\n    }\n\n    newKnobsPosition.forEach((position, index, array) => {\n      const newArray: number[] = array;\n      let newPosition: number = position;\n\n      if (noOverlap && newPosition === duplicatedValue) {\n        const previousValue = knobsPositions[index];\n        if (previousValue !== newPosition) {\n          newPosition += newPosition > previousValue ? -1 : 1;\n          newArray[index] = newPosition;\n        }\n      }\n\n      knobsValues[index] = knobsPositionToScaledValue(\n        newPosition,\n        minPointValue,\n        stepValue\n      );\n    }, this);\n\n    return {\n      knobsPosition: newKnobsPosition,\n      knobsValues,\n    };\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() =>\n            document.getElementById(indexedHandleId || \"\") as HTMLElement\n          }\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"slider\")}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsPositionsToKnobsValues(\n                knobsPositions,\n                stepValue,\n                minPointValue\n              )}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n              ? knobsPositions[0]\n              : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useClasses","useRef","useUniqueId","setId","useMemo","calculateStepValue","createMark","isSingleSlider","knobsValuesToKnobsPositions","useControlled","convertStatusToArray","useState","generateDefaultKnobProperties","createTrackStyles","createKnobStyles","useCallback","validationStates","useEffect","knobsPositionToScaledValue","scaledValueToKnobsPositionValue","ensureValuesConsistency","jsx","Tooltip","jsxs","HvFormElement","statusArrayToFormStatus","HvLabel","HvSliderInput","knobsPositionsToKnobsValues","Slider","sliderStyles","HvWarningText"],"mappings":"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"}

package/dist/cjs/VerticalNavigation/Header/Header.cjs

@@ -9,8 +9,8 @@ const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const HvVerticalNavigationHeader = ({
   title,
-  openIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
-  closeIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
+  openIcon: openIconProp,
+  closeIcon: closeIconProp,
   collapseButtonProps,
   backButtonProps,
   className,
@@ -27,7 +27,8 @@ const HvVerticalNavigationHeader = ({
     parentItem
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Header_styles.useClasses(classesProp);
-  openIcon = !useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : openIcon;
+  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}));
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {});
   const backButtonClickHandler = () => {
     if (navigateToParentHandler)
       navigateToParentHandler();

package/dist/cjs/VerticalNavigation/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../src/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { MouseEventHandler, useContext, useMemo } from \"react\";\nimport { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvButton, HvButtonProps } from \"../../Button\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as verticalNavigationHeaderClasses };\n\nexport type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon = <Forwards />,\n  closeIcon = <Backwards />,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes: classesProp,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  openIcon = !useIcons ? <Menu /> : openIcon;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem, slider]\n  );\n\n  return shouldShowTitle ? (\n    <div\n      className={cx(classes.root, { [classes.minimized]: !isOpen }, className)}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton\n          icon\n          onClick={backButtonClickHandler}\n          aria-label=\"Back\"\n          {...backButtonProps}\n        >\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <HvButton\n          icon\n          onClick={onCollapseButtonClick}\n          className={classes.collapseButton}\n          classes={{\n            root: isOpen ? \"\" : classes.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </HvButton>\n      )}\n    </div>\n  ) : null;\n};\n"],"names":["Forwards","Backwards","useContext","VerticalNavigationContext","useClasses","jsx","Menu","useMemo","jsxs","HvButton","HvTypography"],"mappings":";;;;;;;;;AAqDO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,0CAAYA,gBAAS,UAAA,EAAA;AAAA,EACrB,2CAAaC,gBAAU,WAAA,EAAA;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAuC;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExC,QAAM,EAAE,SAAS,GAAG,IAAIC,yBAAW,WAAW;AAE9C,aAAW,CAAC,WAAYC,2BAAAA,IAAAC,gBAAAA,MAAA,CAAA,CAAK,IAAK;AAElC,QAAM,yBAAyB,MAAM;AAC/B,QAAA;AAAiD;EAAA;AAKvD,QAAM,kBAAkBC,MAAA;AAAA,IACtB,MAAM,CAAC,UAAW,UAAU,CAAC,MAAM,QAAQ,UAAU;AAAA,IACrD,CAAC,YAAY,MAAM;AAAA,EAAA;AAGrB,SAAO,kBACLC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO,GAAG,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,UAAU,eAAe,UACxBH,2BAAA;AAAA,UAACI,OAAA;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,SAAS;AAAA,YACT,cAAW;AAAA,YACV,GAAG;AAAA,YAEJ,UAAAJ,2BAAAA,IAACJ,gBAAAA,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,UAAA;AAAA,QAC3B;AAAA,QAED,UACEI,2BAAAA,IAAAK,WAAAA,cAAA,EAAa,SAAS,SAAS,UAAU,UACvC,UAAA,eAAe,SAAS,cAAc,MACzC,CAAA;AAAA,QAED,yBACCL,2BAAA;AAAA,UAACI,OAAA;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,SAAS;AAAA,YACT,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,SAAS,KAAK,QAAQ;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEH,mBAAS,YAAY;AAAA,UAAA;AAAA,QACxB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGF,IAAA;AACN;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/VerticalNavigation/Header/Header.tsx"],"sourcesContent":["import { MouseEventHandler, useContext, useMemo } from \"react\";\nimport { Backwards, Forwards, Menu } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvButton, HvButtonProps } from \"../../Button\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as verticalNavigationHeaderClasses };\n\nexport type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationHeaderProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The title text to show on Header.\n   */\n  title?: string;\n  /**\n   * Icon to show when Vertical Navigation is collapsed.\n   */\n  openIcon?: React.ReactNode;\n  /**\n   * Icon to show when Vertical Navigation is expanded.\n   */\n  closeIcon?: React.ReactNode;\n  /**\n   * Props for the collapse button.\n   */\n  collapseButtonProps?: HvButtonProps;\n  /**\n   * Props for the back button.\n   */\n  backButtonProps?: HvButtonProps;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationHeaderClasses;\n  /**\n   * Handler for the collapse button.\n   */\n  onCollapseButtonClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationHeader = ({\n  title,\n  openIcon: openIconProp,\n  closeIcon: closeIconProp,\n  collapseButtonProps,\n  backButtonProps,\n  className,\n  classes: classesProp,\n  onCollapseButtonClick,\n  ...others\n}: HvVerticalNavigationHeaderProps) => {\n  const {\n    isOpen,\n    useIcons,\n    headerTitle,\n    slider,\n    navigateToParentHandler,\n    parentItem,\n  } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const openIcon = openIconProp ?? (!useIcons ? <Menu /> : <Forwards />);\n  const closeIcon = closeIconProp ?? <Backwards />;\n\n  const backButtonClickHandler = () => {\n    if (navigateToParentHandler) navigateToParentHandler();\n  };\n\n  // whenever we're in a sublevel, the parentItem is always a single item.\n  // In the first level it's always an array with the first level elements.\n  const shouldShowTitle = useMemo(\n    () => !slider || (slider && !Array.isArray(parentItem)),\n    [parentItem, slider]\n  );\n\n  return shouldShowTitle ? (\n    <div\n      className={cx(classes.root, { [classes.minimized]: !isOpen }, className)}\n      {...others}\n    >\n      {isOpen && headerTitle && slider && (\n        <HvButton\n          icon\n          onClick={backButtonClickHandler}\n          aria-label=\"Back\"\n          {...backButtonProps}\n        >\n          <Backwards iconSize=\"XS\" />\n        </HvButton>\n      )}\n      {isOpen && (\n        <HvTypography variant={slider ? \"label\" : \"title3\"}>\n          {headerTitle && slider ? headerTitle : title}\n        </HvTypography>\n      )}\n      {onCollapseButtonClick && (\n        <HvButton\n          icon\n          onClick={onCollapseButtonClick}\n          className={classes.collapseButton}\n          classes={{\n            root: isOpen ? \"\" : classes.minimized,\n          }}\n          {...collapseButtonProps}\n        >\n          {isOpen ? closeIcon : openIcon}\n        </HvButton>\n      )}\n    </div>\n  ) : null;\n};\n"],"names":["useContext","VerticalNavigationContext","useClasses","Menu","Forwards","jsx","Backwards","useMemo","jsxs","HvButton","HvTypography"],"mappings":";;;;;;;;;AAqDO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAuC;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEA,MAAAA,WAAWC,0BAAAA,yBAAyB;AAExC,QAAM,EAAE,SAAS,GAAG,IAAIC,yBAAW,WAAW;AAExC,QAAA,WAAW,iBAAiB,CAAC,0CAAYC,gBAAAA,MAAK,CAAA,CAAA,mCAAMC,0BAAS,CAAA,CAAA;AAC7D,QAAA,YAAY,iBAAiBC,2BAAA,IAACC,gBAAU,WAAA,CAAA,CAAA;AAE9C,QAAM,yBAAyB,MAAM;AAC/B,QAAA;AAAiD;EAAA;AAKvD,QAAM,kBAAkBC,MAAA;AAAA,IACtB,MAAM,CAAC,UAAW,UAAU,CAAC,MAAM,QAAQ,UAAU;AAAA,IACrD,CAAC,YAAY,MAAM;AAAA,EAAA;AAGrB,SAAO,kBACLC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO,GAAG,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,UAAU,eAAe,UACxBH,2BAAA;AAAA,UAACI,OAAA;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,SAAS;AAAA,YACT,cAAW;AAAA,YACV,GAAG;AAAA,YAEJ,UAAAJ,2BAAAA,IAACC,gBAAAA,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,UAAA;AAAA,QAC3B;AAAA,QAED,UACED,2BAAAA,IAAAK,WAAAA,cAAA,EAAa,SAAS,SAAS,UAAU,UACvC,UAAA,eAAe,SAAS,cAAc,MACzC,CAAA;AAAA,QAED,yBACCL,2BAAA;AAAA,UAACI,OAAA;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,SAAS;AAAA,YACT,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,SAAS,KAAK,QAAQ;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEH,mBAAS,YAAY;AAAA,UAAA;AAAA,QACxB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGF,IAAA;AACN;;;"}

package/dist/esm/Accordion/Accordion.mjs

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useControlled } from "../hooks/useControlled.mjs";
+import { setId } from "../utils/setId.mjs";
+import { useClasses } from "./Accordion.styles.mjs";
+import { staticClasses } from "./Accordion.styles.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+const HvAccordion = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    disabled = false,
+    label,
+    onChange,
+    children,
+    expanded,
+    headingLevel,
+    defaultExpanded = false,
+    containerProps,
+    labelVariant = "label",
+    ...others
+  } = useDefaultProps("HvAccordion", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const handleAction = useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, isOpen);
+        setIsOpen(!isOpen);
+        return true;
+      }
+      return false;
+    },
+    [disabled, onChange, isOpen, setIsOpen]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      handleAction(event);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [handleAction]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      let isEventHandled = false;
+      const { key } = event;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+        return;
+      }
+      switch (key) {
+        case "Enter":
+        case " ":
+          isEventHandled = handleAction(event);
+          break;
+        default:
+          return;
+      }
+      if (isEventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [handleAction]
+  );
+  const accordionHeaderId = setId(id, "button");
+  const accordionContainer = setId(id, "container");
+  const accordionHeader = useMemo(() => {
+    const color = disabled ? "secondary_60" : void 0;
+    const accordionButton = /* @__PURE__ */ jsxs(
+      HvTypography,
+      {
+        id: accordionHeaderId,
+        component: "div",
+        role: "button",
+        className: cx(classes.label, { [classes.disabled]: disabled }),
+        disabled,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        variant: labelVariant,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(DropUpXS, { color }) : /* @__PURE__ */ jsx(DropDownXS, { color }),
+          label
+        ]
+      }
+    );
+    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsx(HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
+  }, [
+    cx,
+    classes,
+    handleClick,
+    handleKeyDown,
+    label,
+    accordionHeaderId,
+    disabled,
+    headingLevel,
+    isOpen,
+    labelVariant
+  ]);
+  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    accordionHeader,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: accordionContainer,
+        role: "region",
+        "aria-labelledby": accordionHeaderId,
+        className: cx(classes.container, { [classes.hidden]: !isOpen }),
+        hidden: !isOpen,
+        ...containerProps,
+        children
+      }
+    )
+  ] });
+};
+export {
+  HvAccordion,
+  staticClasses as accordionClasses
+};
+//# sourceMappingURL=Accordion.mjs.map

package/dist/esm/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { HvTypographyVariants, HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Accordion/Accordion.styles.mjs

@@ -0,0 +1,48 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvAccordion", {
+  root: {
+    "& + root": {
+      paddingTop: 8
+    }
+  },
+  hidden: { height: 0, display: "none" },
+  container: { paddingTop: 8, height: "auto" },
+  label: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    "&[disabled], &:active": {
+      outline: "none"
+    },
+    "&:focus": {
+      outline: "none",
+      background: theme.colors.atmo3
+    },
+    "&:hover": {
+      background: theme.colors.atmo3
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    },
+    cursor: "pointer"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: theme.colors.secondary_60,
+    "&:focus": {
+      background: "none"
+    },
+    "&:hover": {
+      background: "none"
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Accordion.styles.mjs.map

package/dist/esm/Accordion/Accordion.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.mjs","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ActionBar/ActionBar.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./ActionBar.styles.mjs";
+import { staticClasses } from "./ActionBar.styles.mjs";
+const HvActionBar = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    ...others
+  } = useDefaultProps("HvActionBar", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
+};
+export {
+  HvActionBar,
+  staticClasses as actionBarClasses
+};
+//# sourceMappingURL=ActionBar.mjs.map

package/dist/esm/ActionBar/ActionBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.mjs","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAgBa,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;"}

package/dist/esm/ActionBar/ActionBar.styles.mjs

@@ -0,0 +1,17 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvActionBar", {
+  root: {
+    width: "100%",
+    padding: theme.space.sm,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ActionBar.styles.mjs.map

package/dist/esm/ActionBar/ActionBar.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.styles.mjs","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;"}