@hitachivantara/uikit-react-core 5.57.0 → 5.58.0

package/dist/esm/FilterGroup/FilterGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroupContext.js","sources":["../../../src/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport isEqual from \"lodash/isEqual\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./types\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = (props: HvFilterGroupProviderProps) => {\n  const { defaultValue, value, filters, children } = useDefaultProps(\n    \"HvFilterGroupProvider\",\n    props\n  );\n\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ]\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,uBAAuB,cAAyC;AAAA,EAC3E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAe,CAAC;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe;AAAA,EACf,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAChB,CAAC;AAED,MAAM,SAAS,CAAC,YAAkC,QAAQ,IAAI,MAAM,CAAE,CAAA;AASzD,MAAA,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,cAAc,OAAO,SAAS,SAAa,IAAA;AAAA,IACjD;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,OAAO,cAAc,IAAI,SAAiB,CAAC;AAC5C,QAAA,CAAC,cAAc,iBAAiB,iBAAiB,cAAc,IACnE,cAAkC,SAAS,OAAO,OAAO,CAAC;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,KAAK;AAEjE,YAAU,MAAM;AACd,oBAAgB,OAAO,IAAI;AAAA,EAAA,GAC1B,CAAC,OAAO,eAAe,CAAC;AAE3B,YAAU,MAAM;AACG,qBAAA,QAAQ,cAAc,cAAc,CAAC;AAAA,EAAA,GACrD,CAAC,cAAc,cAAc,CAAC;AAE3B,QAAA,eAAe,YAAY,MAAM;AACrB,oBAAA,gBAAgB,OAAO,OAAO,CAAC;AAAA,EAC9C,GAAA,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAErC,QAAA,eAAe,YAAY,MAAM;AACrC,oBAAgB,cAAc,IAAI;AAAA,EAAA,GACjC,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,eAA0C;AAAA,IAC9C,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,6BACG,qBAAqB,UAArB,EAA8B,OAAO,cACnC,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"FilterGroupContext.js","sources":["../../../src/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { isEqual } from \"../utils/helpers\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./types\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = (props: HvFilterGroupProviderProps) => {\n  const { defaultValue, value, filters, children } = useDefaultProps(\n    \"HvFilterGroupProvider\",\n    props\n  );\n\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ]\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,uBAAuB,cAAyC;AAAA,EAC3E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAe,CAAC;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe;AAAA,EACf,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAChB,CAAC;AAED,MAAM,SAAS,CAAC,YAAkC,QAAQ,IAAI,MAAM,CAAE,CAAA;AASzD,MAAA,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,cAAc,OAAO,SAAS,SAAa,IAAA;AAAA,IACjD;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,OAAO,cAAc,IAAI,SAAiB,CAAC;AAC5C,QAAA,CAAC,cAAc,iBAAiB,iBAAiB,cAAc,IACnE,cAAkC,SAAS,OAAO,OAAO,CAAC;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,KAAK;AAEjE,YAAU,MAAM;AACd,oBAAgB,OAAO,IAAI;AAAA,EAAA,GAC1B,CAAC,OAAO,eAAe,CAAC;AAE3B,YAAU,MAAM;AACG,qBAAA,QAAQ,cAAc,cAAc,CAAC;AAAA,EAAA,GACrD,CAAC,cAAc,cAAc,CAAC;AAE3B,QAAA,eAAe,YAAY,MAAM;AACrB,oBAAA,gBAAgB,OAAO,OAAO,CAAC;AAAA,EAC9C,GAAA,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAErC,QAAA,eAAe,YAAY,MAAM;AACrC,oBAAgB,cAAc,IAAI;AAAA,EAAA,GACjC,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,eAA0C;AAAA,IAC9C,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,6BACG,qBAAqB,UAArB,EAA8B,OAAO,cACnC,SACH,CAAA;AAEJ;"}

package/dist/esm/FilterGroup/RightPanel/RightPanel.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { useState, useContext, useMemo, useCallback, useEffect } from "react";
-import cloneDeep from "lodash/cloneDeep";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
@@ -69,7 +68,7 @@ const HvFilterGroupRightPanel = ({
     setFilterValues(newFilterValues);
   };
   const handleSelectAll = useCallback(() => {
-    const newFilterValues = cloneDeep(filterValues);
+    const newFilterValues = structuredClone(filterValues);
     if (anySelected) {
       if (searchStr !== "") {
         newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(

package/dist/esm/FilterGroup/RightPanel/RightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())\n      );\n\n      return {\n        all: filteredOptions.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            .filter((option) => !option.disabled)\n            .map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value)\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${allActiveGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())\n      );\n\n      return {\n        all: filteredOptions.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            .filter((option) => !option.disabled)\n            .map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value)\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = structuredClone(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${allActiveGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Grid/Grid.js

@@ -1,7 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiGrid from "@mui/material/Grid";
-import isString from "lodash/isString";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useWidth } from "../hooks/useWidth.js";
 import { useClasses } from "./Grid.styles.js";
@@ -22,7 +21,7 @@ const BREAKPOINT_COLUMNS = {
 };
 function getGridSpacing(spacing) {
   let gridSpacing;
-  if (isString(spacing)) {
+  if (typeof spacing === "string") {
     if (spacing === "auto") {
       gridSpacing = BREAKPOINT_GUTTERS;
     } else {

package/dist/esm/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\n\nimport isString from \"lodash/isString\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useWidth } from \"../hooks/useWidth\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"]\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAeA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,SAAS,OAAO,GAAG;AACrB,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,CAAC,UAAU,GACT,mBAAmB,QAAQ,UAAU,CAAC,KAAK,QAAQ,UAAU;AAAA,MAAA;AAAA,MAEjE,CAAC;AAAA,IAAA;AAAA,EACH,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI;EAAE,OACjB;AACS,kBAAA;AAAA,EAChB;AAEO,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EACpB;AAEO,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW;AAEjB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EACjD;AACA,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EACvD;AACA,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAC7D;AACA,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EACrD;AAEO,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,OACjE,IAAA;AAEF,QAAM,QAAQ;AAEd,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,MAEF;AAEJ,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,OAAQ,CAAA;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAAwC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEM,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useWidth } from \"../hooks/useWidth\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (typeof spacing === \"string\") {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"]\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAaA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,CAAC,UAAU,GACT,mBAAmB,QAAQ,UAAU,CAAC,KAAK,QAAQ,UAAU;AAAA,MAAA;AAAA,MAEjE,CAAC;AAAA,IAAA;AAAA,EACH,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI;EAAE,OACjB;AACS,kBAAA;AAAA,EAChB;AAEO,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EACpB;AAEO,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW;AAEjB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EACjD;AACA,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EACvD;AACA,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAC7D;AACA,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EACrD;AAEO,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,OACjE,IAAA;AAEF,QAAM,QAAQ;AAEd,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,MAEF;AAEJ,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,OAAQ,CAAA;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAAwC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEM,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Loading/Loading.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { getColor } from "@hitachivantara/uikit-styles";
-import range from "lodash/range";
+import { range } from "../utils/helpers.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./Loading.styles.js";
 import { staticClasses } from "./Loading.styles.js";
@@ -35,7 +35,7 @@ const HvLoading = (props) => {
       ),
       ...others,
       children: [
-        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(0, 3).map((e) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(3).map((e) => /* @__PURE__ */ jsx(
           "div",
           {
             style: inline,

package/dist/esm/Loading/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvTypography } from \"../Typography\";\n\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: string | React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+Ba,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,QAAQ,UAAU;AACvC,QAAM,UAAU,GAAG,IAAI,GAAG,YAAY;AAEtC,QAAM,SAAS;AAAA,IACb,iBAAiB,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,UAAA,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,YACP,WAAW,GAAG,QAAQ,YAAY,QAAQ,OAAO,CAAC;AAAA,UAAA;AAAA,UAF7C;AAAA,QAIR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Loading.js","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { range } from \"../utils/helpers\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvTypography } from \"../Typography\";\n\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: string | React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8Ba,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,QAAQ,UAAU;AACvC,QAAM,UAAU,GAAG,IAAI,GAAG,YAAY;AAEtC,QAAM,SAAS;AAAA,IACb,iBAAiB,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,gBAAM,CAAC,EAAE,IAAI,CAAC,MACb;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,YACP,WAAW,GAAG,QAAQ,YAAY,QAAQ,OAAO,CAAC;AAAA,UAAA;AAAA,UAF7C;AAAA,QAIR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/MultiButton/MultiButton.js

@@ -24,7 +24,8 @@ const HvMultiButton = (props) => {
         {
           [classes.vertical]: vertical,
           [classes[variant]]: variant,
-          [classes.splitGroup]: split
+          [classes.splitGroup]: split,
+          [classes.splitGroupDisabled]: split && disabled
         },
         className
       ),

package/dist/esm/MultiButton/MultiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, index) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]:\n                    index === React.Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < React.Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC1C,YAAAA,eAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GACjB,UAAUA,eAAM,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC7C,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,eAAM,SAAS,MAAM,QAAQ,IAAI,KACjD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,8BAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, index) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]:\n                    index === React.Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < React.Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC1C,YAAAA,eAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GACjB,UAAUA,eAAM,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC7C,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,eAAM,SAAS,MAAM,QAAQ,IAAI,KACjD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,8BAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/MultiButton/MultiButton.styles.js

@@ -87,7 +87,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
           zIndex: 1,
           color: theme.colors.secondary_60,
           background: theme.colors.atmo1,
-          border: `solid 1px ${theme.colors.secondary}`
+          border: `solid 1px ${theme.colors.atmo4}`
         }
       }
     },
@@ -295,6 +295,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       }
     }
   },
+  splitGroupDisabled: { background: "transparent" },
   button: {},
   selected: {},
   // vertical button display Styling
@@ -497,7 +498,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       color: theme.colors.secondary
     },
     "&$splitDisabled": {
-      background: theme.colors.atmo3,
+      background: "transparent",
       color: theme.colors.secondary_60,
       borderTop: "none",
       borderBottom: "none"

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

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      minWidth: \"unset\",\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      fontSize: theme.typography.body.fontSize,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover\": {\n          background: theme.colors.atmo3,\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        // prevent the focus ring to be hidden by sibling hover background\n        // even when selected\n        \"&.HvIsFocusVisible\": {\n          zIndex: 5,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`&.${dropDownMenuClasses.container}`]: {\n        width: \"unset\",\n      },\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderLeft: \"solid 1px transparent\",\n        borderRight: \"solid 1px transparent\",\n        borderRadius: 0,\n        \"&:disabled\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          \"&:hover\": {\n            borderTop: `solid 1px ${theme.colors.atmo4}`,\n            borderBottom: `solid 1px ${theme.colors.atmo4}`,\n            borderLeft: \"solid 1px transparent\",\n            borderRight: \"solid 1px transparent\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderTopLeftRadius: theme.radii.base,\n          borderBottomLeftRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTopRightRadius: theme.radii.base,\n          borderBottomRightRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n          \"&:disabled:hover\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: \"-1px\",\n      },\n    },\n  },\n  splitGroup: {\n    background: theme.colors.atmo1,\n    \"& button$button\": {\n      marginLeft: -1,\n      \"&:disabled\": {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n        \"&:hover\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n        },\n      },\n      \"&$firstButton\": {\n        \"&:not($selected):disabled\": {\n          borderLeft: \"none\",\n          \"&:hover\": {\n            borderLeft: \"none\",\n          },\n        },\n      },\n      \"&$lastButton\": {\n        \"&:not($selected):disabled\": {\n          borderRight: \"none\",\n          \"&:hover\": {\n            borderRight: \"none\",\n          },\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      marginLeft: -1,\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        zIndex: 2,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderLeft: \"none\",\n            \"&:hover\": {\n              borderLeft: \"none\",\n            },\n          },\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderRight: \"none\",\n            \"&:hover\": {\n              borderRight: \"none\",\n            },\n          },\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: 0,\n      },\n    },\n    \"&$secondarySubtle\": {\n      \"& button$button\": {\n        borderTop: `solid 1px ${theme.colors.secondary}`,\n        borderBottom: `solid 1px ${theme.colors.secondary}`,\n        \"&$firstButton\": {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&$lastButton\": {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&:not($selected):disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n          \"&$firstButton\": {\n            \"&:not($selected):disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n          \"&$lastButton\": {\n            \"&:not($selected):disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n      \"& $button\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderTop: `solid 1px ${theme.colors.secondary}`,\n          borderBottom: `solid 1px ${theme.colors.secondary}`,\n          \"&:disabled\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n            \"&:hover\": {\n              borderTop: \"none\",\n              borderBottom: \"none\",\n            },\n          },\n        },\n        \"&$firstButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderLeft: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n        },\n        \"&$lastButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderRight: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      minWidth: 32,\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&$lastButton\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n  primary: {\n    \"& button$button\": {\n      borderTop: \"none\",\n      borderBottom: \"none\",\n\n      \"&$firstButton\": {\n        borderLeft: \"none\",\n      },\n      \"&$lastButton\": {\n        borderRight: \"none\",\n      },\n      \"&$selected\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n    },\n\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primarySubtle: {\n    \"& button$button\": {\n      borderTop: `solid 1px ${theme.colors.primary}`,\n      borderBottom: `solid 1px ${theme.colors.primary}`,\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.primary}`,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.primary}`,\n        borderBottom: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {\n    \"& button$button\": {\n      \"&:disabled\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          background: theme.colors.atmo3,\n        },\n      },\n    },\n  },\n  firstButton: {},\n  lastButton: {},\n  split: {\n    width: 1,\n    height: \"100%\",\n    background: \"currentColor\",\n  },\n  splitContainer: {\n    zIndex: 1,\n    marginLeft: -1,\n    width: 1,\n    height: \"100%\",\n    paddingTop: 4,\n    paddingBottom: 4,\n    color: theme.colors.secondary,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    \"&$primary\": {\n      color: theme.colors.atmo1,\n      backgroundColor: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primarySubtle\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primaryGhost\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$secondarySubtle\": {\n      color: theme.colors.secondary,\n      borderTop: `1px solid ${theme.colors.secondary}`,\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&$secondaryGhost\": {\n      color: theme.colors.secondary,\n    },\n    \"&$splitDisabled\": {\n      background: theme.colors.atmo3,\n      color: theme.colors.secondary_60,\n      borderTop: \"none\",\n      borderBottom: \"none\",\n    },\n  },\n  splitDisabled: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      minWidth: \"unset\",\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      fontSize: theme.typography.body.fontSize,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover\": {\n          background: theme.colors.atmo3,\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        // prevent the focus ring to be hidden by sibling hover background\n        // even when selected\n        \"&.HvIsFocusVisible\": {\n          zIndex: 5,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n\n    // dropdown menu styles\n    \"& $button\": {\n      [`&.${dropDownMenuClasses.container}`]: {\n        width: \"unset\",\n      },\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderLeft: \"solid 1px transparent\",\n        borderRight: \"solid 1px transparent\",\n        borderRadius: 0,\n        \"&:disabled\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          \"&:hover\": {\n            borderTop: `solid 1px ${theme.colors.atmo4}`,\n            borderBottom: `solid 1px ${theme.colors.atmo4}`,\n            borderLeft: \"solid 1px transparent\",\n            borderRight: \"solid 1px transparent\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderTopLeftRadius: theme.radii.base,\n          borderBottomLeftRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTopRightRadius: theme.radii.base,\n          borderBottomRightRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n          \"&:disabled:hover\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: \"-1px\",\n      },\n    },\n  },\n  splitGroup: {\n    background: theme.colors.atmo1,\n    \"& button$button\": {\n      marginLeft: -1,\n      \"&:disabled\": {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n        \"&:hover\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n        },\n      },\n      \"&$firstButton\": {\n        \"&:not($selected):disabled\": {\n          borderLeft: \"none\",\n          \"&:hover\": {\n            borderLeft: \"none\",\n          },\n        },\n      },\n      \"&$lastButton\": {\n        \"&:not($selected):disabled\": {\n          borderRight: \"none\",\n          \"&:hover\": {\n            borderRight: \"none\",\n          },\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      marginLeft: -1,\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        zIndex: 2,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderLeft: \"none\",\n            \"&:hover\": {\n              borderLeft: \"none\",\n            },\n          },\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderRight: \"none\",\n            \"&:hover\": {\n              borderRight: \"none\",\n            },\n          },\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: 0,\n      },\n    },\n    \"&$secondarySubtle\": {\n      \"& button$button\": {\n        borderTop: `solid 1px ${theme.colors.secondary}`,\n        borderBottom: `solid 1px ${theme.colors.secondary}`,\n        \"&$firstButton\": {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&$lastButton\": {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&:not($selected):disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n          \"&$firstButton\": {\n            \"&:not($selected):disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n          \"&$lastButton\": {\n            \"&:not($selected):disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n      \"& $button\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderTop: `solid 1px ${theme.colors.secondary}`,\n          borderBottom: `solid 1px ${theme.colors.secondary}`,\n          \"&:disabled\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n            \"&:hover\": {\n              borderTop: \"none\",\n              borderBottom: \"none\",\n            },\n          },\n        },\n        \"&$firstButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderLeft: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n        },\n        \"&$lastButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderRight: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  splitGroupDisabled: { background: \"transparent\" },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      minWidth: 32,\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&$lastButton\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n  primary: {\n    \"& button$button\": {\n      borderTop: \"none\",\n      borderBottom: \"none\",\n\n      \"&$firstButton\": {\n        borderLeft: \"none\",\n      },\n      \"&$lastButton\": {\n        borderRight: \"none\",\n      },\n      \"&$selected\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n    },\n\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primarySubtle: {\n    \"& button$button\": {\n      borderTop: `solid 1px ${theme.colors.primary}`,\n      borderBottom: `solid 1px ${theme.colors.primary}`,\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.primary}`,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.primary}`,\n        borderBottom: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {\n    \"& button$button\": {\n      \"&:disabled\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          background: theme.colors.atmo3,\n        },\n      },\n    },\n  },\n  firstButton: {},\n  lastButton: {},\n  split: {\n    width: 1,\n    height: \"100%\",\n    background: \"currentColor\",\n  },\n  splitContainer: {\n    zIndex: 1,\n    marginLeft: -1,\n    width: 1,\n    height: \"100%\",\n    paddingTop: 4,\n    paddingBottom: 4,\n    color: theme.colors.secondary,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    \"&$primary\": {\n      color: theme.colors.atmo1,\n      backgroundColor: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primarySubtle\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primaryGhost\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$secondarySubtle\": {\n      color: theme.colors.secondary,\n      borderTop: `1px solid ${theme.colors.secondary}`,\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&$secondaryGhost\": {\n      color: theme.colors.secondary,\n    },\n    \"&$splitDisabled\": {\n      background: \"transparent\",\n      color: theme.colors.secondary_60,\n      borderTop: \"none\",\n      borderBottom: \"none\",\n    },\n  },\n  splitDisabled: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}

package/dist/esm/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import clamp from "lodash/clamp";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { clamp } from "../utils/helpers.js";
 import { useClasses } from "./ProgressBar.styles.js";
 import { staticClasses } from "./ProgressBar.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -15,7 +15,7 @@ const HvProgressBar = (props) => {
     ...others
   } = useDefaultProps("HvProgressBar", props);
   const { classes, cx } = useClasses(classesProp);
-  const clampedValue = clamp(value, 0, 100);
+  const clampedValue = clamp(value, 100);
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/esm/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import clamp from \"lodash/clamp\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n  /**\n   * True if the text label should not be displayed.\n   */\n  hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    hideLabel,\n    ...others\n  } = useDefaultProps(\"HvProgressBar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <div\n      className={cx(classes.root, classes.progress, className)}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <div className={classes.progressContainer}>\n        {!hideLabel && (\n          <HvTypography\n            className={classes.progressBarLabel}\n            variant=\"caption2\"\n            style={{ width: `${clampedValue}%` }}\n            {...labelProps}\n          >\n            {`${clampedValue}%`}\n          </HvTypography>\n        )}\n        <div className={classes.progressBarContainer}>\n          <div\n            style={{ width: `${clampedValue}%` }}\n            className={cx(classes.progressBar, {\n              [classes.progressDone]: status === \"completed\",\n              [classes.progressError]: status === \"error\",\n            })}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAyCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe,MAAM,OAAO,GAAG,GAAG;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\n\nimport { clamp } from \"../utils/helpers\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n  /**\n   * True if the text label should not be displayed.\n   */\n  hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    hideLabel,\n    ...others\n  } = useDefaultProps(\"HvProgressBar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const clampedValue = clamp(value, 100);\n\n  return (\n    <div\n      className={cx(classes.root, classes.progress, className)}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <div className={classes.progressContainer}>\n        {!hideLabel && (\n          <HvTypography\n            className={classes.progressBarLabel}\n            variant=\"caption2\"\n            style={{ width: `${clampedValue}%` }}\n            {...labelProps}\n          >\n            {`${clampedValue}%`}\n          </HvTypography>\n        )}\n        <div className={classes.progressBarContainer}>\n          <div\n            style={{ width: `${clampedValue}%` }}\n            className={cx(classes.progressBar, {\n              [classes.progressDone]: status === \"completed\",\n              [classes.progressError]: status === \"error\",\n            })}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAwCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,MAAM,OAAO,GAAG;AAGnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/QueryBuilder/QueryBuilder.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useState, useReducer, useMemo, useEffect } from "react";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { isEqual } from "../utils/helpers.js";
 import { HvQueryBuilderProvider, defaultOperators, defaultCombinators, defaultLabels } from "./Context.js";
 import { emptyGroup, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
@@ -36,7 +35,7 @@ const HvQueryBuilder = (props) => {
   const [state, dispatchAction] = useReducer(
     reducer,
     // Deep clone is needed to make sure that the "query" prop and "initialQuery" are not mutated
-    cloneDeep(initialQuery.current)
+    structuredClone(initialQuery.current)
   );
   const value = useMemo(
     () => ({
@@ -80,7 +79,7 @@ const HvQueryBuilder = (props) => {
         setInitialState(false);
       }
       onChange?.(clearNodeIds(state));
-      setPrevState(cloneDeep(state));
+      setPrevState(structuredClone(state));
     }
   }, [initialState, onChange, prevState, state]);
   const handleConfirm = () => {

package/dist/esm/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  HvQueryBuilderProvider,\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderQuery,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderChangedQuery,\n  HvQueryBuilderRenderers,\n  defaultRendererKey,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The initial query representation. */\n  query?: HvQueryBuilderQuery;\n  /** Callback fired when query changes. */\n  onChange?: (value: HvQueryBuilderChangedQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - uncontrolled vs controlled: users should be able to control the state\n// - \"query\" renamed to \"initialQuery\" and \"query\" used to control the state\n// - \"query\" provided with ids by the user but removed through \"onChange\"\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null\n  );\n\n  const initialQuery = useRef(query ?? emptyGroup());\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [prevState, setPrevState] = useState(initialQuery.current);\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    // Deep clone is needed to make sure that the \"query\" prop and \"initialQuery\" are not mutated\n    cloneDeep(initialQuery.current)\n  );\n\n  const value = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ]\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified\n  useEffect(() => {\n    if (!isEqual(state, prevState)) {\n      if (initialState) {\n        setInitialState(false);\n      }\n\n      onChange?.(clearNodeIds(state) as HvQueryBuilderChangedQuery);\n      setPrevState(cloneDeep(state));\n    }\n  }, [initialState, onChange, prevState, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={value}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAgFa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB,CAAC,SAAS,YAAY;AAAA,IACtC,SAAS;AAAA,EAAA,IACP,gBAAgB,kBAAkB,KAAK;AAmB3C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB;AAAA,EAAA;AAGF,QAAM,eAAe,OAAO,SAAS,WAAY,CAAA;AAEjD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAoB;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa,OAAO;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAE/C,QAAA,CAAC,OAAO,cAAc,IAAI;AAAA,IAC9B;AAAA;AAAA,IAEA,UAAU,aAAa,OAAO;AAAA,EAAA;AAGhC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAIF,YAAU,MAAM;AACV,QAAA,kBAAkB,WAAW,MAAM;AAErC,wBAAkB,UAAU;AAAA,IAAA,WACnB,kBAAkB,YAAY,YAAY;AAEnD,wBAAkB,UAAU;AACb,qBAAA,EAAE,MAAM,cAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,OAAO,SAAS,GAAG;AAC9B,UAAI,cAAc;AAChB,wBAAgB,KAAK;AAAA,MACvB;AAEW,iBAAA,aAAa,KAAK,CAA+B;AAC/C,mBAAA,UAAU,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAAC,cAAc,UAAU,WAAW,KAAK,CAAC;AAE7C,QAAM,gBAAgB,MAAM;AAC1B,QAAI,eAAe;AACjB,uBAAiB,MAAS;AAC1B,oBAAc,QAAQ,QAAQ,CAAC,WAAW,eAAe,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAM,eAAe,MAAM;AACzB,qBAAiB,MAAS;AAAA,EAAA;AAI1B,SAAC,qBAAA,0BAAuB,OACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,IAAI,MAAM;AAAA,QACV,YAAY,MAAM;AAAA,QAClB,OAAO,MAAM;AAAA,QACb;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ,iBAAiB;AAAA,QACzB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,eAAe,OAAO,eAAe;AAAA,QAC5C,SAAS,eAAe,OAAO,iBAAiB;AAAA,QAChD,oBAAoB,eAAe,OAAO,iBAAiB;AAAA,QAC3D,mBAAmB,eAAe,OAAO,gBAAgB;AAAA,QACzD,oBAAoB,eAAe,OAAO,sBAAsB;AAAA,MAAA;AAAA,IAClE;AAAA,KACF;AAEJ;"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  HvQueryBuilderProvider,\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderQuery,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderChangedQuery,\n  HvQueryBuilderRenderers,\n  defaultRendererKey,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The initial query representation. */\n  query?: HvQueryBuilderQuery;\n  /** Callback fired when query changes. */\n  onChange?: (value: HvQueryBuilderChangedQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - uncontrolled vs controlled: users should be able to control the state\n// - \"query\" renamed to \"initialQuery\" and \"query\" used to control the state\n// - \"query\" provided with ids by the user but removed through \"onChange\"\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null\n  );\n\n  const initialQuery = useRef(query ?? emptyGroup());\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [prevState, setPrevState] = useState(initialQuery.current);\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    // Deep clone is needed to make sure that the \"query\" prop and \"initialQuery\" are not mutated\n    structuredClone(initialQuery.current)\n  );\n\n  const value = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ]\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified\n  useEffect(() => {\n    if (!isEqual(state, prevState)) {\n      if (initialState) {\n        setInitialState(false);\n      }\n\n      onChange?.(clearNodeIds(state) as HvQueryBuilderChangedQuery);\n      setPrevState(structuredClone(state));\n    }\n  }, [initialState, onChange, prevState, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={value}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA+Ea,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB,CAAC,SAAS,YAAY;AAAA,IACtC,SAAS;AAAA,EAAA,IACP,gBAAgB,kBAAkB,KAAK;AAmB3C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB;AAAA,EAAA;AAGF,QAAM,eAAe,OAAO,SAAS,WAAY,CAAA;AAEjD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAoB;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa,OAAO;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAE/C,QAAA,CAAC,OAAO,cAAc,IAAI;AAAA,IAC9B;AAAA;AAAA,IAEA,gBAAgB,aAAa,OAAO;AAAA,EAAA;AAGtC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAIF,YAAU,MAAM;AACV,QAAA,kBAAkB,WAAW,MAAM;AAErC,wBAAkB,UAAU;AAAA,IAAA,WACnB,kBAAkB,YAAY,YAAY;AAEnD,wBAAkB,UAAU;AACb,qBAAA,EAAE,MAAM,cAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,OAAO,SAAS,GAAG;AAC9B,UAAI,cAAc;AAChB,wBAAgB,KAAK;AAAA,MACvB;AAEW,iBAAA,aAAa,KAAK,CAA+B;AAC/C,mBAAA,gBAAgB,KAAK,CAAC;AAAA,IACrC;AAAA,KACC,CAAC,cAAc,UAAU,WAAW,KAAK,CAAC;AAE7C,QAAM,gBAAgB,MAAM;AAC1B,QAAI,eAAe;AACjB,uBAAiB,MAAS;AAC1B,oBAAc,QAAQ,QAAQ,CAAC,WAAW,eAAe,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAM,eAAe,MAAM;AACzB,qBAAiB,MAAS;AAAA,EAAA;AAI1B,SAAC,qBAAA,0BAAuB,OACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,IAAI,MAAM;AAAA,QACV,YAAY,MAAM;AAAA,QAClB,OAAO,MAAM;AAAA,QACb;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ,iBAAiB;AAAA,QACzB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,eAAe,OAAO,eAAe;AAAA,QAC5C,SAAS,eAAe,OAAO,iBAAiB;AAAA,QAChD,oBAAoB,eAAe,OAAO,iBAAiB;AAAA,QAC3D,mBAAmB,eAAe,OAAO,gBAAgB;AAAA,QACzD,oBAAoB,eAAe,OAAO,sBAAsB;AAAA,MAAA;AAAA,IAClE;AAAA,KACF;AAEJ;"}

package/dist/esm/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useCallback, useMemo, memo } from "react";
-import uniqueId from "lodash/uniqueId";
 import dayjs from "dayjs";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { uniqueId } from "../../../../utils/helpers.js";
 import { useQueryBuilderContext } from "../../../Context.js";
 import { padTime, parseDate, parseTime } from "./utils.js";
 import { useClasses } from "./DateTimeValue.styles.js";