@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = ({\n  id: idProp,\n  classes: classesProp,\n  className,\n  icon,\n  placement = \"right\",\n  dataList,\n  disablePortal = false,\n  onToggle,\n  onClick,\n  keepOpened = true,\n  disabled = false,\n  expanded,\n  defaultExpanded = false,\n  category = \"secondaryGhost\",\n  ...others\n}: HvDropDownMenuProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(className, classes.container)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(className, classes.container)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              role=\"presentation\"\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","role","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}

package/dist/cjs/components/Dropdown/Dropdown.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const clsx = require("clsx");
 const setId = require("../../utils/setId.cjs");
 const utils = require("./utils.cjs");
@@ -65,7 +66,7 @@ const HvDropdown = (props) => {
     baseDropdownProps = {},
     listProps = {},
     ...others
-  } = props;
+  } = useDefaultProps.useDefaultProps("HvDropdown", props);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId.useUniqueId(id, "hvdropdown");
   const [validationState, setValidationState] = useControlled.useControlled(status, "standBy");

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseDropdownProps } from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n} from \"@core/components/Forms\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport dropdownClasses, { HvDropdownClasses } from \"./dropdownClasses\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport {\n  StyledDropdown,\n  StyledHvFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledTypography,\n} from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\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. 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  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   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = props;\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        $isOpen={isOpen || hasSelection}\n        variant=\"body\"\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n      >\n        {selectionLabel.selected}\n      </StyledTypography>\n    ) : (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </StyledTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\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 = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <StyledHvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={clsx(className, dropdownClasses.root, classes?.root)}\n      $selectionDisabled={disabled}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            dropdownClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={clsx(classes?.label, dropdownClasses.label)}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={clsx(\n                classes?.description,\n                dropdownClasses.description\n              )}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </StyledLabelContainer>\n      )}\n      <StyledDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: clsx(classes?.dropdown, dropdownClasses.dropdown),\n          arrow: clsx(classes?.arrow, dropdownClasses.arrow),\n          header: clsx(\n            dropdownClasses.dropdownHeader,\n            classes?.dropdownHeader,\n            isStateInvalid &&\n              clsx(\n                dropdownClasses.dropdownHeaderInvalid,\n                classes?.dropdownHeaderInvalid\n              )\n          ),\n          headerOpen: clsx(\n            dropdownClasses.dropdownHeaderOpen,\n            classes?.dropdownHeaderOpen\n          ),\n        }}\n        $dropdownHeaderInvalid={isStateInvalid}\n        $readOnly={readOnly}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: clsx(dropdownClasses.rootList, classes?.rootList),\n            dropdownListContainer: clsx(\n              dropdownClasses.dropdownListContainer,\n              classes?.dropdownListContainer\n            ),\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </StyledDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(dropdownClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledHvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","StyledTypography","component","$selectionDisabled","$isOpen","variant","clsx","dropdownClasses","selectionDisabled","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","StyledHvFormElement","root","StyledLabelContainer","labelContainer","StyledLabel","HvInfoMessage","StyledDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","$dropdownHeaderInvalid","$readOnly","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseDropdownProps } from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n} from \"@core/components/Forms\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport dropdownClasses, { HvDropdownClasses } from \"./dropdownClasses\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport {\n  StyledDropdown,\n  StyledHvFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledTypography,\n} from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\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. 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  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   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        $isOpen={isOpen || hasSelection}\n        variant=\"body\"\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n      >\n        {selectionLabel.selected}\n      </StyledTypography>\n    ) : (\n      <StyledTypography\n        component=\"div\"\n        $selectionDisabled={disabled}\n        className={clsx(\n          dropdownClasses?.placeholder,\n          classes?.placeholder,\n          disabled &&\n            clsx(dropdownClasses?.selectionDisabled, classes?.selectionDisabled)\n        )}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </StyledTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\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 = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <StyledHvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={clsx(className, dropdownClasses.root, classes?.root)}\n      $selectionDisabled={disabled}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            dropdownClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={clsx(classes?.label, dropdownClasses.label)}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={clsx(\n                classes?.description,\n                dropdownClasses.description\n              )}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </StyledLabelContainer>\n      )}\n      <StyledDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: clsx(classes?.dropdown, dropdownClasses.dropdown),\n          arrow: clsx(classes?.arrow, dropdownClasses.arrow),\n          header: clsx(\n            dropdownClasses.dropdownHeader,\n            classes?.dropdownHeader,\n            isStateInvalid &&\n              clsx(\n                dropdownClasses.dropdownHeaderInvalid,\n                classes?.dropdownHeaderInvalid\n              )\n          ),\n          headerOpen: clsx(\n            dropdownClasses.dropdownHeaderOpen,\n            classes?.dropdownHeaderOpen\n          ),\n        }}\n        $dropdownHeaderInvalid={isStateInvalid}\n        $readOnly={readOnly}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: clsx(dropdownClasses.rootList, classes?.rootList),\n            dropdownListContainer: clsx(\n              dropdownClasses.dropdownListContainer,\n              classes?.dropdownListContainer\n            ),\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </StyledDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(dropdownClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledHvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","StyledTypography","component","$selectionDisabled","$isOpen","variant","clsx","dropdownClasses","selectionDisabled","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","StyledHvFormElement","root","StyledLabelContainer","labelContainer","StyledLabel","HvInfoMessage","StyledDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","$dropdownHeaderInvalid","$readOnly","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/cjs/components/EmptyState/EmptyState.cjs

@@ -1,48 +1,67 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const EmptyState_styles = require("./EmptyState.styles.cjs");
-const emptyStateClasses = require("./emptyStateClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Typography = require("../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const HvEmptyState = (props) => {
-  const {
-    activeTheme
-  } = useTheme.useTheme();
-  const muiTheme = styles.useTheme();
-  const renderNode = (type, variant, node, className2) => node && /* @__PURE__ */ jsxRuntime.jsx(EmptyState_styles.StyledTypography, {
-    $type: type,
-    variant,
-    className: className2,
-    children: node
-  });
   const {
     action,
     icon,
     title,
     message,
-    classes,
+    classes: classesProp,
     className,
     ...others
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(EmptyState_styles.StyledRoot, {
-    className: clsx.clsx(className, emptyStateClasses.default.root, classes == null ? void 0 : classes.root),
+  } = useDefaultProps.useDefaultProps("HvEmptyState", props);
+  const {
+    classes,
+    cx,
+    css
+  } = EmptyState_styles.useClasses(classesProp);
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const muiTheme = styles.useTheme();
+  const onlyXs = useMediaQuery__default.default(muiTheme.breakpoints.only("xs"));
+  const upSm = useMediaQuery__default.default(muiTheme.breakpoints.up("sm"));
+  const messageOnly = !!(message && !(title || action));
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+    variant,
+    className: style,
+    children: node
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, className),
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState_styles.StyledContainer, {
-      className: clsx.clsx(emptyStateClasses.default.container, classes == null ? void 0 : classes.container, !!(message && !(title || action)) && clsx.clsx(emptyStateClasses.default.containerMessageOnly, classes == null ? void 0 : classes.containerMessageOnly)),
-      $breakpoints: muiTheme.breakpoints,
-      $messageOnly: !!(message && !(title || action)),
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(classes.container, onlyXs && css({
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center"
+      }), {
+        [classes.containerMessageOnly]: messageOnly
+      }, onlyXs && messageOnly && css({
+        flexDirection: "row"
+      })),
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(emptyStateClasses.default.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         children: icon
-      }), /* @__PURE__ */ jsxRuntime.jsxs(EmptyState_styles.StyledTextContainer, {
-        $breakpoints: muiTheme.breakpoints,
-        className: clsx.clsx(emptyStateClasses.default.textContainer, classes == null ? void 0 : classes.textContainer),
-        children: [renderNode("title", activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, clsx.clsx(emptyStateClasses.default.titleContainer, classes == null ? void 0 : classes.titleContainer)), renderNode("message", "body", message, clsx.clsx(emptyStateClasses.default.messageContainer, classes == null ? void 0 : classes.messageContainer)), renderNode("action", "body", action, clsx.clsx(emptyStateClasses.default.actionContainer, classes == null ? void 0 : classes.actionContainer))]
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(classes.textContainer, upSm && css({
+          marginLeft: uikitStyles.theme.space.xs
+        })),
+        children: [renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer), renderNode("body", message, classes.messageContainer), renderNode("body", action, classes.actionContainer)]
       })]
     })
   });
 };
+exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = HvEmptyState;
 //# sourceMappingURL=EmptyState.cjs.map

package/dist/cjs/components/EmptyState/EmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  StyledContainer,\n  StyledRoot,\n  StyledTextContainer,\n  StyledTypography,\n} from \"./EmptyState.styles\";\nimport emptyStateClasses, { HvEmptyStateClasses } from \"./emptyStateClasses\";\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const renderNode = (\n    type: \"action\" | \"message\" | \"title\",\n    variant?: HvTypographyProps[\"variant\"],\n    node?: string | React.ReactNode,\n    className?: string\n  ) =>\n    node && (\n      <StyledTypography $type={type} variant={variant} className={className}>\n        {node}\n      </StyledTypography>\n    );\n\n  const { action, icon, title, message, classes, className, ...others } = props;\n\n  return (\n    <StyledRoot\n      className={clsx(className, emptyStateClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledContainer\n        className={clsx(\n          emptyStateClasses.container,\n          classes?.container,\n          !!(message && !(title || action)) &&\n            clsx(\n              emptyStateClasses.containerMessageOnly,\n              classes?.containerMessageOnly\n            )\n        )}\n        $breakpoints={muiTheme.breakpoints}\n        $messageOnly={!!(message && !(title || action))}\n      >\n        <div\n          className={clsx(\n            emptyStateClasses.iconContainer,\n            classes?.iconContainer\n          )}\n        >\n          {icon}\n        </div>\n        <StyledTextContainer\n          $breakpoints={muiTheme.breakpoints}\n          className={clsx(\n            emptyStateClasses.textContainer,\n            classes?.textContainer\n          )}\n        >\n          {renderNode(\n            \"title\",\n            activeTheme?.emptyState.titleVariant,\n            title,\n            clsx(emptyStateClasses.titleContainer, classes?.titleContainer)\n          )}\n          {renderNode(\n            \"message\",\n            \"body\",\n            message,\n            clsx(emptyStateClasses.messageContainer, classes?.messageContainer)\n          )}\n          {renderNode(\n            \"action\",\n            \"body\",\n            action,\n            clsx(emptyStateClasses.actionContainer, classes?.actionContainer)\n          )}\n        </StyledTextContainer>\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvEmptyState","props","activeTheme","useHvTheme","muiTheme","useTheme","renderNode","type","variant","node","className","StyledTypography","$type","children","action","icon","title","message","classes","others","StyledRoot","clsx","emptyStateClasses","root","StyledContainer","container","containerMessageOnly","$breakpoints","breakpoints","$messageOnly","_jsx","iconContainer","_jsxs","StyledTextContainer","textContainer","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;AAmCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAW,SAAA;AAEnC,QAAMC,WAAWC,OAAAA;AAEXC,QAAAA,aAAaA,CACjBC,MACAC,SACAC,MACAC,eAEAD,uCACGE,oCAAgB;AAAA,IAACC,OAAOL;AAAAA,IAAMC;AAAAA,IAAkBE,WAAWA;AAAAA,IAAUG,UACnEJ;AAAAA,EAAAA,CACe;AAGhB,QAAA;AAAA,IAAEK;AAAAA,IAAQC;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,IAASR;AAAAA,IAAW,GAAGS;AAAAA,EAAWlB,IAAAA;AAExE,wCACGmB,kBAAAA,YAAU;AAAA,IACTV,WAAWW,KAAKX,KAAAA,WAAWY,kBAAkBC,QAAAA,MAAML,mCAASK,IAAI;AAAA,IAAE,GAC9DJ;AAAAA,IAAMN,0CAETW,mCAAe;AAAA,MACdd,WAAWW,KACTC,KAAAA,0BAAkBG,WAClBP,mCAASO,WACT,CAAC,EAAER,WAAW,EAAED,SAASF,YACvBO,KAAAA,KACEC,0BAAkBI,sBAClBR,mCAASQ,oBACX,CACJ;AAAA,MACAC,cAAcvB,SAASwB;AAAAA,MACvBC,cAAc,CAAC,EAAEZ,WAAW,EAAED,SAASF;AAAAA,MAASD,WAEhDiB,2BAAAA,IAAA,OAAA;AAAA,QACEpB,WAAWW,KAAAA,KACTC,kBAAAA,QAAkBS,eAClBb,mCAASa,aACX;AAAA,QAAElB,UAEDE;AAAAA,MAAAA,CACE,GACLiB,2BAAAA,KAACC,uCAAmB;AAAA,QAClBN,cAAcvB,SAASwB;AAAAA,QACvBlB,WAAWW,KAAAA,KACTC,kBAAAA,QAAkBY,eAClBhB,mCAASgB,aACX;AAAA,QAAErB,UAEDP,CAAAA,WACC,SACAJ,2CAAaiC,WAAWC,cACxBpB,OACAK,KAAKC,KAAAA,kBAAAA,QAAkBe,gBAAgBnB,mCAASmB,cAAc,CAChE,GACC/B,WACC,WACA,QACAW,SACAI,KAAAA,KAAKC,0BAAkBgB,kBAAkBpB,mCAASoB,gBAAgB,CACpE,GACChC,WACC,UACA,QACAQ,QACAO,KAAAA,KAAKC,kBAAkBiB,QAAAA,iBAAiBrB,mCAASqB,eAAe,CAClE,CAAC;AAAA,MAAA,CACkB,CAAC;AAAA,IAAA,CACP;AAAA,EAAA,CACP;AAEhB;;"}
+{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","HvTypography","children","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","_jsx","iconContainer","_jsxs","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW,SAAA;AAEnC,QAAMC,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,uBAAAA,QAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,uBAAAA,QAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAE7C,QAAMuB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,uCACGE,yBAAY;AAAA,IAACH;AAAAA,IAAkBlB,WAAWoB;AAAAA,IAAME,UAC9CH;AAAAA,EAAAA,CACW;AAGlB,wCACE,OAAA;AAAA,IAAKnB,WAAWG,GAAGL,QAAQyB,MAAMvB,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMqB,0CACrD,OAAA;AAAA,MACEtB,WAAWG,GACTL,QAAQ0B,WACRd,UACEN,IAAI;AAAA,QACFqB,eAAe;AAAA,QACfC,YAAY;AAAA,QACZC,WAAW;AAAA,MAAA,CACZ,GACH;AAAA,QACE,CAAC7B,QAAQ8B,oBAAoB,GAAGZ;AAAAA,MAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,QAAEqB,eAAe;AAAA,MAAA,CAAO,CACvD;AAAA,MAAEH,WAEFO,2BAAAA,IAAA,OAAA;AAAA,QAAK7B,WAAWF,QAAQgC;AAAAA,QAAcR,UAAE3B;AAAAA,MAAAA,CAAU,GAClDoC,2BAAAA,KAAA,OAAA;AAAA,QACE/B,WAAWG,GACTL,QAAQkC,eACRlB,QAAQV,IAAI;AAAA,UAAE6B,YAAYC,YAAAA,MAAMC,MAAMC;AAAAA,QAAAA,CAAI,CAC5C;AAAA,QAAEd,WAEDL,WACCX,2CAAa+B,WAAWC,cACxB1C,OACAE,QAAQyC,cACV,GACCtB,WAAW,QAAQpB,SAASC,QAAQ0C,gBAAgB,GACpDvB,WAAW,QAAQvB,QAAQI,QAAQ2C,eAAe,CAAC;AAAA,MAAA,CACjD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AAET;;;"}

package/dist/cjs/components/EmptyState/EmptyState.styles.cjs

@@ -1,106 +1,46 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const emptyStateClasses = require("./emptyStateClasses.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1r2ohw13"
-} : {
-  target: "e1r2ohw13",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zcbaso",
-  styles: "width:100%;height:100%;display:flex;justify-content:center"
-} : {
-  name: "zcbaso",
-  styles: "width:100%;height:100%;display:flex;justify-content:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVzBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBCcmVha3BvaW50cyBhcyBNdWlCcmVha3BvaW50cyB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgZW1wdHlTdGF0ZUNsYXNzZXMgZnJvbSBcIi4vZW1wdHlTdGF0ZUNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICRtZXNzYWdlT25seSxcbiAgICAkYnJlYWtwb2ludHMsXG4gIH06IHtcbiAgICAkbWVzc2FnZU9ubHk6IGJvb2xlYW47XG4gICAgJGJyZWFrcG9pbnRzOiBNdWlCcmVha3BvaW50cztcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcInJvd1wiLFxuICAgIFskYnJlYWtwb2ludHMub25seShcInhzXCIpXToge1xuICAgICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgfSxcbiAgICAuLi4oJG1lc3NhZ2VPbmx5ICYmIHtcbiAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICBbJGJyZWFrcG9pbnRzLm9ubHkoXCJ4c1wiKV06IHtcbiAgICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIH0sXG4gICAgICBbYCYgLiR7ZW1wdHlTdGF0ZUNsYXNzZXMudGV4dENvbnRhaW5lcn1gXToge1xuICAgICAgICBtYXJnaW5MZWZ0OiAwLFxuICAgICAgfSxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUZXh0Q29udGFpbmVyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRicmVha3BvaW50cyB9OiB7ICRicmVha3BvaW50czogTXVpQnJlYWtwb2ludHMgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogXCJ0cmFuc3BhcmVudFwiLFxuICBtYXhXaWR0aDogXCI1MTBweFwiLFxuICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgWyRicmVha3BvaW50cy51cChcInNtXCIpXToge1xuICAgIG1hcmdpbkxlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICB9LFxuICBcIiYgYVwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5wcmltYXJ5LFxuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFR5cG9ncmFwaHkgPSBzdHlsZWQoXG4gIEh2VHlwb2dyYXBoeSxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdHlwZSB9OiB7ICR0eXBlOiBcInRpdGxlXCIgfCBcIm1lc3NhZ2VcIiB8IFwiYWN0aW9uXCIgfSkgPT4gKHtcbiAgLi4uKCR0eXBlID09PSBcInRpdGxlXCIgJiYge1xuICAgIG1hcmdpblRvcDogdGhlbWUuZW1wdHlTdGF0ZS50aXRsZU1hcmdpblRvcCxcbiAgICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNlLnNtLFxuICB9KSxcbiAgLi4uKCR0eXBlID09PSBcImFjdGlvblwiICYmIHtcbiAgICBtYXJnaW5Ub3A6IHRoZW1lLnNwYWNlLnNtLFxuICB9KSxcbn0pKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1r2ohw12"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1r2ohw12",
-  label: "StyledContainer"
-}, transientOptions.transientOptions))(({
-  $messageOnly,
-  $breakpoints
-}) => ({
-  display: "flex",
-  flexDirection: "row",
-  [$breakpoints.only("xs")]: {
-    flexDirection: "column",
-    alignItems: "center",
-    textAlign: "center"
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvEmptyState", {
+  root: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center"
   },
-  ...$messageOnly && {
+  container: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  containerMessageOnly: {
     alignItems: "center",
-    [$breakpoints.only("xs")]: {
-      flexDirection: "row"
-    },
-    [`& .${emptyStateClasses.default.textContainer}`]: {
+    "& $textContainer": {
       marginLeft: 0
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0IrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0VtcHR5U3RhdGUvRW1wdHlTdGF0ZS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgQnJlYWtwb2ludHMgYXMgTXVpQnJlYWtwb2ludHMgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuaW1wb3J0IGVtcHR5U3RhdGVDbGFzc2VzIGZyb20gXCIuL2VtcHR5U3RhdGVDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkbWVzc2FnZU9ubHksXG4gICAgJGJyZWFrcG9pbnRzLFxuICB9OiB7XG4gICAgJG1lc3NhZ2VPbmx5OiBib29sZWFuO1xuICAgICRicmVha3BvaW50czogTXVpQnJlYWtwb2ludHM7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICBbJGJyZWFrcG9pbnRzLm9ubHkoXCJ4c1wiKV06IHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIH0sXG4gICAgLi4uKCRtZXNzYWdlT25seSAmJiB7XG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgWyRicmVha3BvaW50cy5vbmx5KFwieHNcIildOiB7XG4gICAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgICB9LFxuICAgICAgW2AmIC4ke2VtcHR5U3RhdGVDbGFzc2VzLnRleHRDb250YWluZXJ9YF06IHtcbiAgICAgICAgbWFyZ2luTGVmdDogMCxcbiAgICAgIH0sXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGV4dENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYnJlYWtwb2ludHMgfTogeyAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IFwidHJhbnNwYXJlbnRcIixcbiAgbWF4V2lkdGg6IFwiNTEwcHhcIixcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIFskYnJlYWtwb2ludHMudXAoXCJzbVwiKV06IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbiAgXCImIGFcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSxcbiAgICB0ZXh0RGVjb3JhdGlvbjogXCJub25lXCIsXG4gIH0sXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHR5cGUgfTogeyAkdHlwZTogXCJ0aXRsZVwiIHwgXCJtZXNzYWdlXCIgfCBcImFjdGlvblwiIH0pID0+ICh7XG4gIC4uLigkdHlwZSA9PT0gXCJ0aXRsZVwiICYmIHtcbiAgICBtYXJnaW5Ub3A6IHRoZW1lLmVtcHR5U3RhdGUudGl0bGVNYXJnaW5Ub3AsXG4gICAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG4gIC4uLigkdHlwZSA9PT0gXCJhY3Rpb25cIiAmJiB7XG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG59KSk7XG4iXX0= */");
-const StyledTextContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1r2ohw11"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1r2ohw11",
-  label: "StyledTextContainer"
-}, transientOptions.transientOptions))(({
-  $breakpoints
-}) => ({
-  background: "transparent",
-  maxWidth: "510px",
-  overflow: "hidden",
-  [$breakpoints.up("sm")]: {
-    marginLeft: uikitStyles.theme.space.xs
   },
-  "& a": {
-    color: uikitStyles.theme.colors.primary,
-    textDecoration: "none"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0RtQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0VtcHR5U3RhdGUvRW1wdHlTdGF0ZS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgQnJlYWtwb2ludHMgYXMgTXVpQnJlYWtwb2ludHMgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuaW1wb3J0IGVtcHR5U3RhdGVDbGFzc2VzIGZyb20gXCIuL2VtcHR5U3RhdGVDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkbWVzc2FnZU9ubHksXG4gICAgJGJyZWFrcG9pbnRzLFxuICB9OiB7XG4gICAgJG1lc3NhZ2VPbmx5OiBib29sZWFuO1xuICAgICRicmVha3BvaW50czogTXVpQnJlYWtwb2ludHM7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICBbJGJyZWFrcG9pbnRzLm9ubHkoXCJ4c1wiKV06IHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIH0sXG4gICAgLi4uKCRtZXNzYWdlT25seSAmJiB7XG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgWyRicmVha3BvaW50cy5vbmx5KFwieHNcIildOiB7XG4gICAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgICB9LFxuICAgICAgW2AmIC4ke2VtcHR5U3RhdGVDbGFzc2VzLnRleHRDb250YWluZXJ9YF06IHtcbiAgICAgICAgbWFyZ2luTGVmdDogMCxcbiAgICAgIH0sXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGV4dENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYnJlYWtwb2ludHMgfTogeyAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IFwidHJhbnNwYXJlbnRcIixcbiAgbWF4V2lkdGg6IFwiNTEwcHhcIixcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIFskYnJlYWtwb2ludHMudXAoXCJzbVwiKV06IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbiAgXCImIGFcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSxcbiAgICB0ZXh0RGVjb3JhdGlvbjogXCJub25lXCIsXG4gIH0sXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHR5cGUgfTogeyAkdHlwZTogXCJ0aXRsZVwiIHwgXCJtZXNzYWdlXCIgfCBcImFjdGlvblwiIH0pID0+ICh7XG4gIC4uLigkdHlwZSA9PT0gXCJ0aXRsZVwiICYmIHtcbiAgICBtYXJnaW5Ub3A6IHRoZW1lLmVtcHR5U3RhdGUudGl0bGVNYXJnaW5Ub3AsXG4gICAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG4gIC4uLigkdHlwZSA9PT0gXCJhY3Rpb25cIiAmJiB7XG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG59KSk7XG4iXX0= */");
-const StyledTypography = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1r2ohw10"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1r2ohw10",
-  label: "StyledTypography"
-}, transientOptions.transientOptions))(({
-  $type
-}) => ({
-  ...$type === "title" && {
+  iconContainer: {},
+  titleContainer: {
     marginTop: uikitStyles.theme.emptyState.titleMarginTop,
     marginBottom: uikitStyles.theme.space.sm
   },
-  ...$type === "action" && {
+  textContainer: {
+    background: "transparent",
+    maxWidth: "510px",
+    overflow: "hidden",
+    "& a": {
+      color: uikitStyles.theme.colors.primary,
+      textDecoration: "none"
+    }
+  },
+  messageContainer: {},
+  actionContainer: {
     marginTop: uikitStyles.theme.space.sm
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRW1wdHlTdGF0ZS9FbXB0eVN0YXRlLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0VnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0VtcHR5U3RhdGUvRW1wdHlTdGF0ZS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgQnJlYWtwb2ludHMgYXMgTXVpQnJlYWtwb2ludHMgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuaW1wb3J0IGVtcHR5U3RhdGVDbGFzc2VzIGZyb20gXCIuL2VtcHR5U3RhdGVDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkbWVzc2FnZU9ubHksXG4gICAgJGJyZWFrcG9pbnRzLFxuICB9OiB7XG4gICAgJG1lc3NhZ2VPbmx5OiBib29sZWFuO1xuICAgICRicmVha3BvaW50czogTXVpQnJlYWtwb2ludHM7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICBbJGJyZWFrcG9pbnRzLm9ubHkoXCJ4c1wiKV06IHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIH0sXG4gICAgLi4uKCRtZXNzYWdlT25seSAmJiB7XG4gICAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgICAgWyRicmVha3BvaW50cy5vbmx5KFwieHNcIildOiB7XG4gICAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgICB9LFxuICAgICAgW2AmIC4ke2VtcHR5U3RhdGVDbGFzc2VzLnRleHRDb250YWluZXJ9YF06IHtcbiAgICAgICAgbWFyZ2luTGVmdDogMCxcbiAgICAgIH0sXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGV4dENvbnRhaW5lciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYnJlYWtwb2ludHMgfTogeyAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IFwidHJhbnNwYXJlbnRcIixcbiAgbWF4V2lkdGg6IFwiNTEwcHhcIixcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIFskYnJlYWtwb2ludHMudXAoXCJzbVwiKV06IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbiAgXCImIGFcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSxcbiAgICB0ZXh0RGVjb3JhdGlvbjogXCJub25lXCIsXG4gIH0sXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHR5cGUgfTogeyAkdHlwZTogXCJ0aXRsZVwiIHwgXCJtZXNzYWdlXCIgfCBcImFjdGlvblwiIH0pID0+ICh7XG4gIC4uLigkdHlwZSA9PT0gXCJ0aXRsZVwiICYmIHtcbiAgICBtYXJnaW5Ub3A6IHRoZW1lLmVtcHR5U3RhdGUudGl0bGVNYXJnaW5Ub3AsXG4gICAgbWFyZ2luQm90dG9tOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG4gIC4uLigkdHlwZSA9PT0gXCJhY3Rpb25cIiAmJiB7XG4gICAgbWFyZ2luVG9wOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSksXG59KSk7XG4iXX0= */");
-exports.StyledContainer = StyledContainer;
-exports.StyledRoot = StyledRoot;
-exports.StyledTextContainer = StyledTextContainer;
-exports.StyledTypography = StyledTypography;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=EmptyState.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.styles.cjs","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { Breakpoints as MuiBreakpoints } from \"@mui/material\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport emptyStateClasses from \"./emptyStateClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n  width: \"100%\",\n  height: \"100%\",\n  display: \"flex\",\n  justifyContent: \"center\",\n});\n\nexport const StyledContainer = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $messageOnly,\n    $breakpoints,\n  }: {\n    $messageOnly: boolean;\n    $breakpoints: MuiBreakpoints;\n  }) => ({\n    display: \"flex\",\n    flexDirection: \"row\",\n    [$breakpoints.only(\"xs\")]: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      textAlign: \"center\",\n    },\n    ...($messageOnly && {\n      alignItems: \"center\",\n      [$breakpoints.only(\"xs\")]: {\n        flexDirection: \"row\",\n      },\n      [`& .${emptyStateClasses.textContainer}`]: {\n        marginLeft: 0,\n      },\n    }),\n  })\n);\n\nexport const StyledTextContainer = styled(\n  \"div\",\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  background: \"transparent\",\n  maxWidth: \"510px\",\n  overflow: \"hidden\",\n  [$breakpoints.up(\"sm\")]: {\n    marginLeft: theme.space.xs,\n  },\n  \"& a\": {\n    color: theme.colors.primary,\n    textDecoration: \"none\",\n  },\n}));\n\nexport const StyledTypography = styled(\n  HvTypography,\n  transientOptions\n)(({ $type }: { $type: \"title\" | \"message\" | \"action\" }) => ({\n  ...($type === \"title\" && {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  }),\n  ...($type === \"action\" && {\n    marginTop: theme.space.sm,\n  }),\n}));\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledContainer","_extends","transientOptions","$messageOnly","$breakpoints","display","flexDirection","only","alignItems","textAlign","emptyStateClasses","textContainer","marginLeft","StyledTextContainer","background","maxWidth","overflow","up","theme","space","xs","color","colors","primary","textDecoration","StyledTypography","HvTypography","$type","marginTop","emptyState","titleMarginTop","marginBottom","sm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAKtC;AAEYC,MAAAA,2DACX,OAAKV,QAAAC,IAAAC,4BAAAS,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,GACLS,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBQ,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCC;AAAAA,EACAC;AAIF,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,eAAe;AAAA,EACf,CAACF,aAAaG,KAAK,IAAI,CAAC,GAAG;AAAA,IACzBD,eAAe;AAAA,IACfE,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACA,GAAIN,gBAAgB;AAAA,IAClBK,YAAY;AAAA,IACZ,CAACJ,aAAaG,KAAK,IAAI,CAAC,GAAG;AAAA,MACzBD,eAAe;AAAA,IACjB;AAAA,IACA,CAAE,MAAKI,0BAAkBC,eAAe,GAAG;AAAA,MACzCC,YAAY;AAAA,IACd;AAAA,EACF;AACF,IAAEtB,QAAAC,IAAAC,88FACJ;AAEaqB,MAAAA,+DACX,OAAKvB,QAAAC,IAAAC,4BAAAS,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,GACLS,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBQ,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDU,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,UAAU;AAAA,EACV,CAACZ,aAAaa,GAAG,IAAI,CAAC,GAAG;AAAA,IACvBL,YAAYM,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EACA,OAAO;AAAA,IACLC,OAAOH,YAAAA,MAAMI,OAAOC;AAAAA,IACpBC,gBAAgB;AAAA,EAClB;AACF,IAAElC,QAAAC,IAAAC,aAAC,eAAA,KAAA,66FAAA;AAEUiC,MAAAA,4DACXC,WAAAA,cAAYpC,QAAAC,IAAAC,4BAAAS,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,GACZS,iBAAgB,gBAAA,IAAAD,SAAA,IAAA;AAAA,EAAAR,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBQ,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEyB;AAAiD,OAAO;AAAA,EAC3D,GAAIA,UAAU,WAAW;AAAA,IACvBC,WAAWV,YAAAA,MAAMW,WAAWC;AAAAA,IAC5BC,cAAcb,YAAAA,MAAMC,MAAMa;AAAAA,EAC5B;AAAA,EACA,GAAIL,UAAU,YAAY;AAAA,IACxBC,WAAWV,YAAAA,MAAMC,MAAMa;AAAAA,EACzB;AACF,IAAE1C,QAAAC,IAAAC,aAAC,eAAA,KAAA,66FAAA;;;;;"}
+{"version":3,"file":"EmptyState.styles.cjs","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: { display: \"flex\", flexDirection: \"row\" },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  titleContainer: {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  },\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n    \"& a\": {\n      color: theme.colors.primary,\n      textDecoration: \"none\",\n    },\n  },\n  messageContainer: {},\n  actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","display","justifyContent","container","flexDirection","containerMessageOnly","alignItems","marginLeft","iconContainer","titleContainer","marginTop","theme","emptyState","titleMarginTop","marginBottom","space","sm","textContainer","background","maxWidth","overflow","color","colors","primary","textDecoration","messageContainer","actionContainer"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,WAAW;AAAA,IAAEF,SAAS;AAAA,IAAQG,eAAe;AAAA,EAAM;AAAA,EACnDC,sBAAsB;AAAA,IACpBC,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB;AAAA,IACdC,WAAWC,YAAAA,MAAMC,WAAWC;AAAAA,IAC5BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,EAC5B;AAAA,EACAC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,UAAU;AAAA,IACV,OAAO;AAAA,MACLC,OAAOV,YAAAA,MAAMW,OAAOC;AAAAA,MACpBC,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACAC,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IAAEhB,WAAWC,YAAAA,MAAMI,MAAMC;AAAAA,EAAG;AAC/C,CAAC;;;"}