@hitachivantara/uikit-react-core 5.26.3 → 5.26.5

package/dist/cjs/components/Dropdown/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.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          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 5,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.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          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 5,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}

package/dist/cjs/components/Grid/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/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\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\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\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based in a 12-column grid layout.\n *\n * It is is based in 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-575[       | 16              | 4                 |\n * | sm         | [576-767[     | 16              | 8                 |\n * | md         | [768-991[     | 32              | 12                |\n * | lg         | [992-1199[    | 32              | 12                |\n * | xl         | [1200-...[    | 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    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  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.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\n  return (\n    <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;;;;AAgBA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,kBAAAA,QAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,MAAAA,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,wCACGe,SAAAA,MAAO;AAAA,IAACV;AAAAA,IAAUI;AAAAA,IAAiB,GAAKK;AAAAA,IAAc,GAAMH;AAAAA,EAAAA,CAAS;AAE1E,CAAC;;;"}
+{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/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\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\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\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    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  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.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\n  return (\n    <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;;;;AAgBA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,kBAAAA,QAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,MAAAA,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,wCACGe,SAAAA,MAAO;AAAA,IAACV;AAAAA,IAAUI;AAAAA,IAAiB,GAAKK;AAAAA,IAAc,GAAMH;AAAAA,EAAAA,CAAS;AAE1E,CAAC;;;"}

package/dist/cjs/components/MultiButton/MultiButton.styles.cjs

@@ -5,7 +5,7 @@ const classes = require("../../utils/classes.cjs");
 const {
   staticClasses,
   useClasses
-} = classes.createClasses("HvFooter", {
+} = classes.createClasses("HvMultiButton", {
   root: {
     display: "flex",
     height: 32,

package/dist/cjs/components/MultiButton/MultiButton.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFooter\", {\n  root: {\n    display: \"flex\",\n    height: 32,\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      height: 32,\n      width: \"100%\",\n      minWidth: 32,\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      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\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      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\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    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\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      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\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    },\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      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      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\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} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\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});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\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      height: 32,\n      width: \"100%\",\n      minWidth: 32,\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      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\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      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\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    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\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      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\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    },\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      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      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\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} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\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});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}

package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs

@@ -10,22 +10,25 @@ const HvSimpleGrid = (props) => {
     spacing = "sm",
     cols,
     className,
+    classes: classesProp,
     ...others
   } = useDefaultProps.useDefaultProps("HvSimpleGrid", props);
   const {
+    classes,
     cx,
     css
-  } = SimpleGrid_styles.useClasses();
+  } = SimpleGrid_styles.useClasses(classesProp);
   const containerStyle = SimpleGrid_styles.getContainerStyle({
     breakpoints,
     spacing,
     cols
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(css(containerStyle), className),
+    className: cx(css(containerStyle), classes.root, className),
     ...others,
     children
   });
 };
+exports.simpleGridClasses = SimpleGrid_styles.staticClasses;
 exports.HvSimpleGrid = HvSimpleGrid;
 //# sourceMappingURL=SimpleGrid.cjs.map

package/dist/cjs/components/SimpleGrid/SimpleGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Breakpoint, Spacing } from \"./types\";\nimport { getContainerStyle, useClasses } from \"./SimpleGrid.styles\";\n\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /**\n   * Spacing with pre-defined values according the values defined in the theme\n   */\n  spacing?: Spacing;\n  /**\n   * Provide an array to define responsive behavior:\n   *\n   *    maxWidth or minWidth: max-width or min-width at which media query will work\n   *\n   *    cols: number of columns per row at given max-width\n   *\n   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /**\n   * Number of how many columns the content will be displayed\n   */\n  cols?: number;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing = \"sm\",\n    cols,\n    className,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { cx, css } = useClasses();\n\n  const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n  return (\n    <div className={cx(css(containerStyle), className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvSimpleGrid","props","children","breakpoints","spacing","cols","className","others","useDefaultProps","cx","css","useClasses","containerStyle","getContainerStyle"],"mappings":";;;;;AA2BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBP,KAAK;AAEnC,QAAA;AAAA,IAAEQ;AAAAA,IAAIC;AAAAA,MAAQC,kBAAW,WAAA;AAE/B,QAAMC,iBAAiBC,kBAAAA,kBAAkB;AAAA,IAAEV;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,EAAAA,CAAM;AAEvE,wCACE,OAAA;AAAA,IAAKC,WAAWG,GAAGC,IAAIE,cAAc,GAAGN,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAML;AAAAA,EAAAA,CAEzD;AAET;;"}
+{"version":3,"file":"SimpleGrid.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { Breakpoint, Spacing } from \"./types\";\nimport {\n  getContainerStyle,\n  staticClasses,\n  useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /**\n   * Spacing with pre-defined values according the values defined in the theme\n   */\n  spacing?: Spacing;\n  /**\n   * Provide an array to define responsive behavior:\n   *\n   *    maxWidth or minWidth: max-width or min-width at which media query will work\n   *\n   *    cols: number of columns per row at given max-width\n   *\n   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /**\n   * Number of how many columns the content will be displayed\n   */\n  cols?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing = \"sm\",\n    cols,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n  return (\n    <div\n      className={cx(css(containerStyle), classes.root, className)}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["HvSimpleGrid","props","children","breakpoints","spacing","cols","className","classes","classesProp","others","useDefaultProps","cx","css","useClasses","containerStyle","getContainerStyle","root"],"mappings":";;;;;AAuCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEM;AAAAA,IAASI;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWL,WAAW;AAEnD,QAAMM,iBAAiBC,kBAAAA,kBAAkB;AAAA,IAAEZ;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,EAAAA,CAAM;AAEvE,wCACE,OAAA;AAAA,IACEC,WAAWK,GAAGC,IAAIE,cAAc,GAAGP,QAAQS,MAAMV,SAAS;AAAA,IAAE,GACxDG;AAAAA,IAAMP;AAAAA,EAAAA,CAGP;AAET;;;"}

package/dist/cjs/components/SimpleGrid/SimpleGrid.styles.cjs

@@ -5,7 +5,9 @@ const classes = require("../../utils/classes.cjs");
 const {
   staticClasses,
   useClasses
-} = classes.createClasses("HvSimpleGrid", {});
+} = classes.createClasses("HvSimpleGrid", {
+  root: {}
+});
 function size(props) {
   if (typeof props.size === "number") {
     return props.size;

package/dist/cjs/components/SimpleGrid/SimpleGrid.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.styles.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { CSSObject } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { Spacing, Breakpoint } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {});\n\nfunction size(props: { size: any; sizes: any }) {\n  if (typeof props.size === \"number\") {\n    return props.size;\n  }\n\n  return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n  if (breakpoints.length === 0) {\n    return breakpoints;\n  }\n\n  const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n  const sorted = [...breakpoints].sort(\n    (a, b) =>\n      size({ size: b[property], sizes: theme.breakpoints }) -\n      size({ size: a[property], sizes: theme.breakpoints })\n  );\n\n  return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n  breakpoints,\n  spacing,\n  cols,\n}: {\n  breakpoints?: Breakpoint[];\n  spacing: Spacing;\n  cols?: number;\n}): CSSObject => {\n  return {\n    boxSizing: \"border-box\",\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap: theme.space[spacing],\n    ...(breakpoints &&\n      getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {\n        const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n        const breakpointSize = size({\n          size:\n            property === \"max-width\"\n              ? breakpoint.maxWidth\n              : breakpoint.minWidth,\n          sizes: theme.breakpoints,\n        });\n\n        acc[\n          `@media (${property}: ${\n            breakpointSize + (property === \"max-width\" ? 0 : 1)\n          }px)`\n        ] = {\n          gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n          gap: theme.space[spacing],\n        };\n\n        return acc;\n      }, {})),\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","size","props","sizes","md","getSortedBreakpoints","breakpoints","length","property","sorted","sort","a","b","theme","reverse","getContainerStyle","spacing","cols","boxSizing","display","gridTemplateColumns","gap","space","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth"],"mappings":";;;;AAQa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB,EAAE;AAE7E,SAASC,KAAKC,OAAkC;AAC1C,MAAA,OAAOA,MAAMD,SAAS,UAAU;AAClC,WAAOC,MAAMD;AAAAA,EACf;AAEOC,SAAAA,MAAMC,MAAMD,MAAMD,IAAI,KAAKC,MAAMD,QAAQC,MAAMC,MAAMC;AAC9D;AAEA,SAASC,qBAAqBC,aAA2B;AACnDA,MAAAA,YAAYC,WAAW,GAAG;AACrBD,WAAAA;AAAAA,EACT;AAEA,QAAME,WAAW,cAAcF,YAAY,CAAC,IAAI,aAAa;AACvDG,QAAAA,SAAS,CAAC,GAAGH,WAAW,EAAEI,KAC9B,CAACC,GAAGC,MACFX,KAAK;AAAA,IAAEA,MAAMW,EAAEJ,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,IACpDL,KAAK;AAAA,IAAEA,MAAMU,EAAEH,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,CACxD;AAEA,SAAOE,aAAa,aAAaC,OAAOK,QAAAA,IAAYL;AACtD;AAEO,MAAMM,oBAAoBA,CAAC;AAAA,EAChCT;AAAAA,EACAU;AAAAA,EACAC;AAKF,MAAiB;AACR,SAAA;AAAA,IACLC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,qBAAsB,UAASH;AAAAA,IAC/BI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,IACxB,GAAIV,eACFD,qBAAqBC,WAAW,EAAEiB,OAAO,CAACC,KAAKC,eAAe;AACtDjB,YAAAA,WAAW,cAAciB,aAAa,cAAc;AAC1D,YAAMC,iBAAiBzB,KAAK;AAAA,QAC1BA,MACEO,aAAa,cACTiB,WAAWE,WACXF,WAAWG;AAAAA,QACjBzB,OAAOU,YAAMP,MAAAA;AAAAA,MAAAA,CACd;AAEDkB,UACG,WAAUhB,aACTkB,kBAAkBlB,aAAa,cAAc,IAAI,OAC9C,IACH;AAAA,QACFY,qBAAsB,UAASK,WAAWR;AAAAA,QAC1CI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,MAAA;AAGnBQ,aAAAA;AAAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;;;;"}
+{"version":3,"file":"SimpleGrid.styles.cjs","sources":["../../../../src/components/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import { CSSObject } from \"@emotion/serialize\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { Spacing, Breakpoint } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n  root: {},\n});\n\nfunction size(props: { size: any; sizes: any }) {\n  if (typeof props.size === \"number\") {\n    return props.size;\n  }\n\n  return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n  if (breakpoints.length === 0) {\n    return breakpoints;\n  }\n\n  const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n  const sorted = [...breakpoints].sort(\n    (a, b) =>\n      size({ size: b[property], sizes: theme.breakpoints }) -\n      size({ size: a[property], sizes: theme.breakpoints })\n  );\n\n  return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n  breakpoints,\n  spacing,\n  cols,\n}: {\n  breakpoints?: Breakpoint[];\n  spacing: Spacing;\n  cols?: number;\n}): CSSObject => {\n  return {\n    boxSizing: \"border-box\",\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap: theme.space[spacing],\n    ...(breakpoints &&\n      getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {\n        const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n        const breakpointSize = size({\n          size:\n            property === \"max-width\"\n              ? breakpoint.maxWidth\n              : breakpoint.minWidth,\n          sizes: theme.breakpoints,\n        });\n\n        acc[\n          `@media (${property}: ${\n            breakpointSize + (property === \"max-width\" ? 0 : 1)\n          }px)`\n        ] = {\n          gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n          gap: theme.space[spacing],\n        };\n\n        return acc;\n      }, {})),\n  };\n};\n"],"names":["staticClasses","useClasses","createClasses","root","size","props","sizes","md","getSortedBreakpoints","breakpoints","length","property","sorted","sort","a","b","theme","reverse","getContainerStyle","spacing","cols","boxSizing","display","gridTemplateColumns","gap","space","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth"],"mappings":";;;;AAQa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM,CAAC;AACT,CAAC;AAED,SAASC,KAAKC,OAAkC;AAC1C,MAAA,OAAOA,MAAMD,SAAS,UAAU;AAClC,WAAOC,MAAMD;AAAAA,EACf;AAEOC,SAAAA,MAAMC,MAAMD,MAAMD,IAAI,KAAKC,MAAMD,QAAQC,MAAMC,MAAMC;AAC9D;AAEA,SAASC,qBAAqBC,aAA2B;AACnDA,MAAAA,YAAYC,WAAW,GAAG;AACrBD,WAAAA;AAAAA,EACT;AAEA,QAAME,WAAW,cAAcF,YAAY,CAAC,IAAI,aAAa;AACvDG,QAAAA,SAAS,CAAC,GAAGH,WAAW,EAAEI,KAC9B,CAACC,GAAGC,MACFX,KAAK;AAAA,IAAEA,MAAMW,EAAEJ,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,IACpDL,KAAK;AAAA,IAAEA,MAAMU,EAAEH,QAAQ;AAAA,IAAGL,OAAOU,YAAMP,MAAAA;AAAAA,EAAa,CAAA,CACxD;AAEA,SAAOE,aAAa,aAAaC,OAAOK,QAAAA,IAAYL;AACtD;AAEO,MAAMM,oBAAoBA,CAAC;AAAA,EAChCT;AAAAA,EACAU;AAAAA,EACAC;AAKF,MAAiB;AACR,SAAA;AAAA,IACLC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,qBAAsB,UAASH;AAAAA,IAC/BI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,IACxB,GAAIV,eACFD,qBAAqBC,WAAW,EAAEiB,OAAO,CAACC,KAAKC,eAAe;AACtDjB,YAAAA,WAAW,cAAciB,aAAa,cAAc;AAC1D,YAAMC,iBAAiBzB,KAAK;AAAA,QAC1BA,MACEO,aAAa,cACTiB,WAAWE,WACXF,WAAWG;AAAAA,QACjBzB,OAAOU,YAAMP,MAAAA;AAAAA,MAAAA,CACd;AAEDkB,UACG,WAAUhB,aACTkB,kBAAkBlB,aAAa,cAAc,IAAI,OAC9C,IACH;AAAA,QACFY,qBAAsB,UAASK,WAAWR;AAAAA,QAC1CI,KAAKR,YAAAA,MAAMS,MAAMN,OAAO;AAAA,MAAA;AAGnBQ,aAAAA;AAAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;;;;"}

package/dist/cjs/components/Table/TableHeader/TableHeader.styles.cjs

@@ -116,7 +116,7 @@ const {
       boxShadow: "none",
       backgroundColor: "transparent",
       "&:hover": {
-        backgroundColor: "red"
+        backgroundColor: uikitStyles.theme.table.sortButtonHoverColor
       }
     }
   },

package/dist/cjs/components/Table/TableHeader/TableHeader.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.styles.cjs","sources":["../../../../../src/components/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing([0, \"xs\", 0, 32]),\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    ...theme.typography.label,\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: `1px solid ${theme.table.headerBorderTopColor}`,\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottom: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \"&:hover\": {\n        backgroundColor: theme.table.headerHoverColor,\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.table.headerHoverColor,\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  stickyColumnLeastRight: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostLeft: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      visibility: \"visible\",\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \"$root$sortable &\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n      \"&:hover\": {\n        backgroundColor: \"red\",\n      },\n    },\n  },\n  sortIcon: { display: \"inline-flex\", visibility: \"hidden\" },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottom: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTop: 0,\n      height: 16,\n    },\n  },\n  resizable: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  resizing: { borderRight: `solid 2px ${theme.colors.secondary}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 10,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","verticalAlign","textAlign","padding","theme","spacing","borderBottom","colors","atmo4","head","paddingTop","typography","label","transition","backgroundColor","atmo1","borderTop","table","headerBorderTopColor","paddingLeft","cursor","headerHoverColor","visibility","body","footer","stickyColumn","position","zIndex","borderLeft","stickyColumnMostLeft","borderRight","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","headerContent","display","alignItems","width","headerText","overflow","textOverflow","headerParagraph","sortableHeaderText","sorted","sortable","sortButton","boxShadow","sortIcon","alignLeft","alignRight","flexDirection","alignCenter","alignJustify","alignFlexLeft","justifyContent","alignFlexRight","alignFlexCenter","alignFlexJustify","variantCheckbox","maxWidth","variantExpand","variantActions","variantNone","variantList","resizable","resizing","secondary","resizer","right","top","transform","touchAction"],"mappings":"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"}
+{"version":3,"file":"TableHeader.styles.cjs","sources":["../../../../../src/components/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing([0, \"xs\", 0, 32]),\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    ...theme.typography.label,\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    backgroundColor: theme.colors.atmo1,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: `1px solid ${theme.table.headerBorderTopColor}`,\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottom: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \"&:hover\": {\n        backgroundColor: theme.table.headerHoverColor,\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.table.headerHoverColor,\n\n        \"& $sortIcon\": {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  stickyColumnLeastRight: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostLeft: { borderLeft: `solid 1px ${theme.colors.atmo4}` },\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      visibility: \"visible\",\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \"$root$sortable &\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n      \"&:hover\": {\n        backgroundColor: theme.table.sortButtonHoverColor,\n      },\n    },\n  },\n  sortIcon: { display: \"inline-flex\", visibility: \"hidden\" },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottom: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTop: 0,\n      height: 16,\n    },\n  },\n  resizable: { borderRight: `solid 1px ${theme.colors.atmo4}` },\n  resizing: { borderRight: `solid 2px ${theme.colors.secondary}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 10,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","verticalAlign","textAlign","padding","theme","spacing","borderBottom","colors","atmo4","head","paddingTop","typography","label","transition","backgroundColor","atmo1","borderTop","table","headerBorderTopColor","paddingLeft","cursor","headerHoverColor","visibility","body","footer","stickyColumn","position","zIndex","borderLeft","stickyColumnMostLeft","borderRight","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","headerContent","display","alignItems","width","headerText","overflow","textOverflow","headerParagraph","sortableHeaderText","sorted","sortable","sortButton","boxShadow","sortButtonHoverColor","sortIcon","alignLeft","alignRight","flexDirection","alignCenter","alignJustify","alignFlexLeft","justifyContent","alignFlexRight","alignFlexCenter","alignFlexJustify","variantCheckbox","maxWidth","variantExpand","variantActions","variantNone","variantList","resizable","resizing","secondary","resizer","right","top","transform","touchAction"],"mappings":"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"}

package/dist/cjs/components/TimePicker/TimePicker.cjs

@@ -100,7 +100,8 @@ const HvTimePicker = (props) => {
   const state = datepicker.useTimeFieldState(stateProps);
   const {
     labelProps,
-    fieldProps
+    fieldProps,
+    descriptionProps
   } = datepicker$1.useTimeField({
     ...stateProps,
     id,
@@ -134,6 +135,7 @@ const HvTimePicker = (props) => {
         ...labelProps
       }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
         className: classes.description,
+        ...descriptionProps,
         children: description
       })]
     }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
@@ -176,6 +178,8 @@ const HvTimePicker = (props) => {
       },
       "aria-haspopup": "dialog",
       "aria-label": ariaLabel,
+      "aria-labelledby": fieldProps["aria-labelledby"],
+      "aria-describedby": fieldProps["aria-describedby"],
       "aria-invalid": isStateInvalid ? true : void 0,
       "aria-errormessage": errorMessageId,
       disablePortal,

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,SAASA,CAACC,UAA8B;AAC5C,MAAI,CAACA;AAAcC,WAAAA;AACb,QAAA;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,EAAYJ,IAAAA;AACpC,SAAO,IAAIK,KAAAA,KAAKH,OAAOC,SAASC,OAAO;AACzC;AAEA,MAAME,YAAYA,CAACC,eAA4B;AAC7C,MAAIA,cAAc;AAAa,WAAA;AACxBA,SAAAA,eAAe,OAAO,KAAK;AACpC;AAuFaC,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC,IAAIC;AAAAA,IACJC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IAEA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACA,qBAAqBC;AAAAA,IAErBC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC,qBAAqB;AAAA,IACrBC,qBAAqB;AAAA,IAErB9B,OAAO+B;AAAAA,IACPC,cAAcC;AAAAA,IAEd1B;AAAAA,IACA2B;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IAETC;AAAAA,IACAC;AAAAA;AAAAA,IAGAC,gBAAgB;AAAA,IAChBC,sBAAsB;AAAA,IACtBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBlC,KAAK;AACnCI,QAAAA,KAAK+B,YAAAA,YAAY9B,QAAQ,cAAc;AACvC+B,QAAAA,MAAMC,aAAuB,IAAI;AACjC,QAAA;AAAA,IAAEpC;AAAAA,IAASqC;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWrC,WAAW;AAE9C,QAAMsC,aAAoC;AAAA,IACxCjD,OAAOD,OAAOgC,SAAS;AAAA,IACvBC,cAAcjC,OAAOkC,gBAAgB;AAAA,IACrCd;AAAAA,IACAiB;AAAAA,IACAc,YAAYlC;AAAAA,IACZmC,YAAYjC;AAAAA,IACZkC,YAAYnC;AAAAA,IACZoC,aAAa;AAAA,IACbC,WAAWhD,UAAUC,UAAU;AAAA,IAC/B+B,UAAWtC,CAAU,UAAA;AACb,YAAA;AAAA,QAAEuD,MAAMrD;AAAAA,QAAOsD,QAAQrD;AAAAA,QAASsD,QAAQrD;AAAAA,MAAYJ,IAAAA;AAC/C,2CAAA;AAAA,QAAEE;AAAAA,QAAOC;AAAAA,QAASC;AAAAA,MAAAA;AAAAA,IAC/B;AAAA,EAAA;AAEIsD,QAAAA,QAAQC,6BAAkBV,UAAU;AACpC,QAAA;AAAA,IAAEW;AAAAA,IAAYC;AAAAA,MAAeC,0BACjC;AAAA,IACE,GAAGb;AAAAA,IACHpC;AAAAA,IACA,cAAcO;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBE;AAAAA,EAAAA,GAEtBmC,OACAb,GACF;AAEA,QAAM,CAACkB,MAAMC,OAAO,IAAIC,eAAS,KAAK;AAEtC,QAAM,CAACC,iBAAiB,IAAIC,cAAAA,cAAc1C,eAAe,UAAU;AACnE,QAAM,CAAC2C,eAAe,IAAID,cAAAA,cAAc3C,QAAQ,SAAS;AAEnD6C,QAAAA,eAAeC,MAAAA,QACnB,OAAO;AAAA,IACLf,MAAM3B;AAAAA,IACN4B,QAAQ3B;AAAAA,IACR4B,QAAQ3B;AAAAA,EAEV,IAAA,CAACF,kBAAkBC,oBAAoBC,kBAAkB,CAC3D;AAMMyC,QAAAA,eACJ7C,oBAAoB,SAClBF,WAAWvB,UAAawB,kBAAkBxB,UACzCuB,WAAWvB,UAAae;AAE7B,QAAMwD,iBAAiBJ,oBAAoB;AAC3C,QAAMK,iBAAiBD,iBACnBD,eACEG,YAAM7D,IAAI,OAAO,IACjBa,mBACFzB;AAEJ,yCACG0E,YAAAA,eAAa;AAAA,IACZ5D;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAO,QAAQ4C;AAAAA,IACRxD,WAAWmC,GAAGrC,QAAQkE,MAAMhE,SAAS;AAAA,IAAE,GACnC8B;AAAAA,IAAMmC,YAER1D,SAASG,gDACT,OAAA;AAAA,MAAKV,WAAWF,QAAQoE;AAAAA,MAAeD,UACpC1D,CAAAA,SACC4D,2BAAAA,IAACC,eAAO;AAAA,QAAC7D;AAAAA,QAAcP,WAAWF,QAAQS;AAAAA,QAAM,GAAKyC;AAAAA,MAAAA,CAAa,GAEnEtC,eACCyD,2BAAAA,IAACE,2BAAa;AAAA,QAACrE,WAAWF,QAAQY;AAAAA,QAAYuD,UAC3CvD;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAGPyD,2BAAAA,IAACG,6BAAc;AAAA,MACbC,MAAK;AAAA,MACLC,eAAa;AAAA,MACbnE;AAAAA,MACAC;AAAAA,MACAS,aACEA,eAAe,CAAC+B,MAAM1D,QACpB2B,6CAEC0D,yBAAW;AAAA,QACVxC;AAAAA,QACA9B;AAAAA,QACA2C;AAAAA,QACAW;AAAAA,QACAzD,WAAWmC,GAAGrC,QAAQiB,aAAa;AAAA,UACjC,CAACjB,QAAQ4E,mBAAmB,GAAGrE;AAAAA,QAAAA,CAChC;AAAA,QAAE,GACC4C;AAAAA,MAAAA,CACL;AAAA,MAGLnD,SAAS;AAAA,QACP6E,QAAQxC,GAAGrC,QAAQ8E,gBAAgB;AAAA,UACjC,CAAC9E,QAAQ+E,qBAAqB,GAAGjB;AAAAA,QAAAA,CAClC;AAAA,QACDkB,OAAOhF,QAAQiF;AAAAA,QACfC,YAAYlF,QAAQmF;AAAAA,MACtB;AAAA,MACAC,WAAU;AAAA,MACVC,0CACGC,sBAAQ;AAAA,QACPC,OAAOhF,WAAW,iBAAiBhB;AAAAA,QACnCW,WAAWF,QAAQwF;AAAAA,MAAAA,CACpB;AAAA,MAEHC,UAAUpC;AAAAA,MACV1B,UAAUA,CAAC+D,KAAKC,YAAY;AACtBlE,YAAAA;AAAe;AACnB6B,gBAAQqC,OAAO;AACfhE,6CAAW+D,KAAKC;AAAAA,MAClB;AAAA,MACAC,qBAAsBC,CAAiB,iBAAA;;AACrCA,2DAAcC,qBAAqB,SAAS,OAA5CD,mBAAgDE;AAAAA,MAClD;AAAA,MACA,iBAAc;AAAA,MACd,cAAYrF;AAAAA,MACZ,gBAAcoD,iBAAiB,OAAOvE;AAAAA,MACtC,qBAAmBwE;AAAAA,MACnBlC;AAAAA,MACAmE,aAAa;AAAA,QACXC,WAAW,CACT;AAAA,UAAE5F,MAAM;AAAA,UAAmB6F,SAASpE;AAAAA,QAAAA,CAAqB;AAAA,MAE7D;AAAA,MAAE,GACEC;AAAAA,MAAaoC,yCAEjB,OAAA;AAAA,QAAKhC;AAAAA,QAAUjC,WAAWF,QAAQmG;AAAAA,QAAoBhC,UACnDnB,MAAMoD,SAASC,IAAI,CAACC,SAASC,qCAC3BC,WAAI;AAAA,UAEHxD;AAAAA,UACAsD;AAAAA,UACArF,aAAa0C,aAAa2C,QAAQG,IAAI;AAAA,UACtCC,OAAOA,MAAM1D,MAAM2D,UAAUL,QAAQG,IAAI;AAAA,UACzCG,OAAOA,MAAM5D,MAAM6D,UAAUP,QAAQG,IAAI;AAAA,UACzC7E,UAAUA,CAAC8D,KAAKoB,QAAQ;AACtB9D,kBAAM+D,WAAWT,QAAQG,MAAMO,OAAOF,GAAG,CAAC;AAAA,UAC5C;AAAA,QAAE,GARGP,CASN,CACF;AAAA,MAAA,CACE;AAAA,IAAA,CACS,GAEf1C,gBACCQ,2BAAAA,IAAC4C,2BAAa;AAAA,MACZ9G,IAAI6D,MAAAA,MAAM7D,IAAI,OAAO;AAAA,MACrB+G,eAAa;AAAA,MACbhH,WAAWF,QAAQmH;AAAAA,MAAMhD,UAExBX;AAAAA,IAAAA,CACY,CAChB;AAAA,EAAA,CACY;AAEnB;;;"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps, descriptionProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage\n              className={classes.description}\n              {...descriptionProps}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={fieldProps[\"aria-labelledby\"]}\n        aria-describedby={fieldProps[\"aria-describedby\"]}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs

@@ -38,6 +38,9 @@ const HvVerticalNavigationAction = ({
       [classes.minimized]: !isOpen
     }, className),
     tabIndex: 0,
+    ...!isOpen && {
+      "aria-label": label
+    },
     onKeyDown: handleKeyDown,
     onClick,
     ...others,

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes: classesProp,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={cx(\n        classes.action,\n        {\n          [classes.noIcon]: !icon,\n          [classes.minimized]: !isOpen,\n        },\n        className\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </HvTypography>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IACVC,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes: classesProp,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={cx(\n        classes.action,\n        {\n          [classes.noIcon]: !icon,\n          [classes.minimized]: !isOpen,\n        },\n        className\n      )}\n      tabIndex={0}\n      {...(!isOpen && { \"aria-label\": label })}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </HvTypography>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IAAE,GACP,CAAChB,UAAU;AAAA,MAAE,cAAcJ;AAAAA,IAAM;AAAA,IACtCqB,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}

package/dist/cjs/index.cjs

@@ -99,6 +99,7 @@ const Panel_styles = require("./components/Panel/Panel.styles.cjs");
 const Panel = require("./components/Panel/Panel.cjs");
 const ProgressBar_styles = require("./components/ProgressBar/ProgressBar.styles.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
+const SimpleGrid_styles = require("./components/SimpleGrid/SimpleGrid.styles.cjs");
 const SimpleGrid = require("./components/SimpleGrid/SimpleGrid.cjs");
 const Stack_styles = require("./components/Stack/Stack.styles.cjs");
 const Stack = require("./components/Stack/Stack.cjs");
@@ -419,6 +420,7 @@ exports.panelClasses = Panel_styles.staticClasses;
 exports.HvPanel = Panel.HvPanel;
 exports.progressBarClasses = ProgressBar_styles.staticClasses;
 exports.HvProgressBar = ProgressBar.HvProgressBar;
+exports.simpleGridClasses = SimpleGrid_styles.staticClasses;
 exports.HvSimpleGrid = SimpleGrid.HvSimpleGrid;
 exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = Stack.HvStack;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}