@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/cjs/index.cjs

@@ -37,7 +37,7 @@ const suggestionsClasses = require("./components/Forms/Suggestions/suggestionsCl
 const Suggestions = require("./components/Forms/Suggestions/Suggestions.cjs");
 const BaseInput_styles = require("./components/BaseInput/BaseInput.styles.cjs");
 const BaseInput = require("./components/BaseInput/BaseInput.cjs");
-const baseDropdownClasses = require("./components/BaseDropdown/baseDropdownClasses.cjs");
+const BaseDropdown_styles = require("./components/BaseDropdown/BaseDropdown.styles.cjs");
 const BaseDropdown = require("./components/BaseDropdown/BaseDropdown.cjs");
 const ActionBar_styles = require("./components/ActionBar/ActionBar.styles.cjs");
 const ActionBar = require("./components/ActionBar/ActionBar.cjs");
@@ -58,7 +58,7 @@ const Content_styles = require("./components/Card/Content/Content.styles.cjs");
 const Content = require("./components/Card/Content/Content.cjs");
 const Media_styles = require("./components/Card/Media/Media.styles.cjs");
 const Media = require("./components/Card/Media/Media.cjs");
-const containerClasses = require("./components/Container/containerClasses.cjs");
+const Container_styles = require("./components/Container/Container.styles.cjs");
 const Container = require("./components/Container/Container.cjs");
 const Title_styles = require("./components/Dialog/Title/Title.styles.cjs");
 const Title = require("./components/Dialog/Title/Title.cjs");
@@ -70,7 +70,7 @@ const Dialog_styles = require("./components/Dialog/Dialog.styles.cjs");
 const Dialog = require("./components/Dialog/Dialog.cjs");
 const Drawer_styles = require("./components/Drawer/Drawer.styles.cjs");
 const Drawer = require("./components/Drawer/Drawer.cjs");
-const emptyStateClasses = require("./components/EmptyState/emptyStateClasses.cjs");
+const EmptyState_styles = require("./components/EmptyState/EmptyState.styles.cjs");
 const EmptyState = require("./components/EmptyState/EmptyState.cjs");
 const footerClasses = require("./components/Footer/footerClasses.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
@@ -113,37 +113,37 @@ const tooltipClasses = require("./components/Tooltip/tooltipClasses.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
 const overflowTooltipClasses = require("./components/OverflowTooltip/overflowTooltipClasses.cjs");
 const OverflowTooltip = require("./components/OverflowTooltip/OverflowTooltip.cjs");
-const baseCheckBoxClasses = require("./components/BaseCheckBox/baseCheckBoxClasses.cjs");
+const BaseCheckBox_styles = require("./components/BaseCheckBox/BaseCheckBox.styles.cjs");
 const BaseCheckBox = require("./components/BaseCheckBox/BaseCheckBox.cjs");
-const baseRadioClasses = require("./components/BaseRadio/baseRadioClasses.cjs");
+const BaseRadio_styles = require("./components/BaseRadio/BaseRadio.styles.cjs");
 const BaseRadio = require("./components/BaseRadio/BaseRadio.cjs");
 const AppSwitcher_styles = require("./components/AppSwitcher/AppSwitcher.styles.cjs");
 const AppSwitcher = require("./components/AppSwitcher/AppSwitcher.cjs");
 const Action_styles = require("./components/AppSwitcher/Action/Action.styles.cjs");
 const Action = require("./components/AppSwitcher/Action/Action.cjs");
-const baseSwitchClasses = require("./components/BaseSwitch/baseSwitchClasses.cjs");
+const BaseSwitch_styles = require("./components/BaseSwitch/BaseSwitch.styles.cjs");
 const BaseSwitch = require("./components/BaseSwitch/BaseSwitch.cjs");
-const checkBoxClasses = require("./components/CheckBox/checkBoxClasses.cjs");
+const CheckBox_styles = require("./components/CheckBox/CheckBox.styles.cjs");
 const CheckBox = require("./components/CheckBox/CheckBox.cjs");
 const Input_styles = require("./components/Input/Input.styles.cjs");
 const Input = require("./components/Input/Input.cjs");
-const switchClasses = require("./components/Switch/switchClasses.cjs");
+const Switch_styles = require("./components/Switch/Switch.styles.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
-const radioClasses = require("./components/Radio/radioClasses.cjs");
+const Radio_styles = require("./components/Radio/Radio.styles.cjs");
 const Radio = require("./components/Radio/Radio.cjs");
 const textAreaClasses = require("./components/TextArea/textAreaClasses.cjs");
 const TextArea = require("./components/TextArea/TextArea.cjs");
 const tagsInputClasses = require("./components/TagsInput/tagsInputClasses.cjs");
 const TagsInput = require("./components/TagsInput/TagsInput.cjs");
-const checkBoxGroupClasses = require("./components/CheckBoxGroup/checkBoxGroupClasses.cjs");
+const CheckBoxGroup_styles = require("./components/CheckBoxGroup/CheckBoxGroup.styles.cjs");
 const CheckBoxGroup = require("./components/CheckBoxGroup/CheckBoxGroup.cjs");
 const listClasses = require("./components/List/listClasses.cjs");
 const List = require("./components/List/List.cjs");
-const radioGroupClasses = require("./components/RadioGroup/radioGroupClasses.cjs");
+const RadioGroup_styles = require("./components/RadioGroup/RadioGroup.styles.cjs");
 const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
-const previewClasses = require("./components/FileUploader/Preview/previewClasses.cjs");
+const Preview_styles = require("./components/FileUploader/Preview/Preview.styles.cjs");
 const Preview = require("./components/FileUploader/Preview/Preview.cjs");
-const fileClasses = require("./components/FileUploader/File/fileClasses.cjs");
+const File_styles = require("./components/FileUploader/File/File.styles.cjs");
 const File = require("./components/FileUploader/File/File.cjs");
 const FileUploader = require("./components/FileUploader/FileUploader.cjs");
 const DropDownMenu_styles = require("./components/DropDownMenu/DropDownMenu.styles.cjs");
@@ -152,7 +152,7 @@ const Pagination_styles = require("./components/Pagination/Pagination.styles.cjs
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const ActionsGeneric_styles = require("./components/ActionsGeneric/ActionsGeneric.styles.cjs");
 const ActionsGeneric = require("./components/ActionsGeneric/ActionsGeneric.cjs");
-const breadCrumbClasses = require("./components/BreadCrumb/breadCrumbClasses.cjs");
+const BreadCrumb_styles = require("./components/BreadCrumb/BreadCrumb.styles.cjs");
 const BreadCrumb = require("./components/BreadCrumb/BreadCrumb.cjs");
 const DotPagination_styles = require("./components/DotPagination/DotPagination.styles.cjs");
 const DotPagination = require("./components/DotPagination/DotPagination.cjs");
@@ -164,9 +164,9 @@ const Snackbar_styles = require("./components/Snackbar/Snackbar.styles.cjs");
 const Snackbar = require("./components/Snackbar/Snackbar.cjs");
 const SnackbarProvider_styles = require("./components/Snackbar/SnackbarProvider/SnackbarProvider.styles.cjs");
 const SnackbarProvider = require("./components/Snackbar/SnackbarProvider/SnackbarProvider.cjs");
-const SnackbarContentWrapper_styles = require("./components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.cjs");
-const SnackbarContentWrapper = require("./components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.cjs");
-const bulkActionsClasses = require("./components/BulkActions/bulkActionsClasses.cjs");
+const SnackbarContent_styles = require("./components/Snackbar/SnackbarContent/SnackbarContent.styles.cjs");
+const SnackbarContent = require("./components/Snackbar/SnackbarContent/SnackbarContent.cjs");
+const BulkActions_styles = require("./components/BulkActions/BulkActions.styles.cjs");
 const BulkActions = require("./components/BulkActions/BulkActions.cjs");
 const globalActionsClasses = require("./components/GlobalActions/globalActionsClasses.cjs");
 const GlobalActions = require("./components/GlobalActions/GlobalActions.cjs");
@@ -205,11 +205,11 @@ const fallbacks = require("./components/Table/utils/fallbacks.cjs");
 const utils$1 = require("./components/Table/utils/utils.cjs");
 const loginClasses = require("./components/Login/loginClasses.cjs");
 const Login = require("./components/Login/Login.cjs");
-const controlClasses = require("./components/Controls/controlClasses.cjs");
+const Controls_styles = require("./components/Controls/Controls.styles.cjs");
 const Controls = require("./components/Controls/Controls.cjs");
-const leftControlClasses = require("./components/Controls/LeftControl/leftControlClasses.cjs");
+const LeftControl_styles = require("./components/Controls/LeftControl/LeftControl.styles.cjs");
 const LeftControl = require("./components/Controls/LeftControl/LeftControl.cjs");
-const rightControlClasses = require("./components/Controls/RightControl/rightControlClasses.cjs");
+const RightControl_styles = require("./components/Controls/RightControl/RightControl.styles.cjs");
 const RightControl = require("./components/Controls/RightControl/RightControl.cjs");
 const calendarClasses = require("./components/Calendar/calendarClasses.cjs");
 const Calendar = require("./components/Calendar/Calendar.cjs");
@@ -263,6 +263,8 @@ const TimePicker = require("./components/TimePicker/TimePicker.cjs");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
 const useControlled = require("./hooks/useControlled.cjs");
 const useForkRef = require("./hooks/useForkRef.cjs");
+const useCss = require("./hooks/useCss.cjs");
+const useDefaultProps = require("./hooks/useDefaultProps.cjs");
 const useImageLoaded = require("./hooks/useImageLoaded.cjs");
 const useWidth = require("./hooks/useWidth.cjs");
 const useLabels = require("./hooks/useLabels.cjs");
@@ -353,7 +355,7 @@ exports.suggestionsClasses = suggestionsClasses.default;
 exports.HvSuggestions = Suggestions.HvSuggestions;
 exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = BaseInput.HvBaseInput;
-exports.baseDropdownClasses = baseDropdownClasses.default;
+exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
 exports.HvBaseDropdown = BaseDropdown.HvBaseDropdown;
 exports.actionBarClasses = ActionBar_styles.staticClasses;
 exports.HvActionBar = ActionBar.HvActionBar;
@@ -376,7 +378,7 @@ exports.cardContentClasses = Content_styles.staticClasses;
 exports.HvCardContent = Content.HvCardContent;
 exports.cardMediaClasses = Media_styles.staticClasses;
 exports.HvCardMedia = Media.HvCardMedia;
-exports.containerClasses = containerClasses.default;
+exports.containerClasses = Container_styles.staticClasses;
 exports.HvContainer = Container.HvContainer;
 exports.dialogTitleClasses = Title_styles.staticClasses;
 exports.HvDialogTitle = Title.HvDialogTitle;
@@ -388,7 +390,7 @@ exports.dialogClasses = Dialog_styles.staticClasses;
 exports.HvDialog = Dialog.HvDialog;
 exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = Drawer.HvDrawer;
-exports.emptyStateClasses = emptyStateClasses.default;
+exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = EmptyState.HvEmptyState;
 exports.footerClasses = footerClasses.default;
 exports.HvFooter = Footer.HvFooter;
@@ -431,38 +433,38 @@ exports.tooltipClasses = tooltipClasses.default;
 exports.HvTooltip = Tooltip.HvTooltip;
 exports.overflowTooltipClasses = overflowTooltipClasses.default;
 exports.HvOverflowTooltip = OverflowTooltip.HvOverflowTooltip;
-exports.baseCheckBoxClasses = baseCheckBoxClasses.default;
+exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = BaseCheckBox.HvBaseCheckBox;
-exports.baseRadioClasses = baseRadioClasses.default;
+exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = BaseRadio.HvBaseRadio;
 exports.getSelectorIcons = BaseRadio.getSelectorIcons;
 exports.appSwitcherClasses = AppSwitcher_styles.staticClasses;
 exports.HvAppSwitcher = AppSwitcher.HvAppSwitcher;
 exports.appSwitcherActionClasses = Action_styles.staticClasses;
 exports.HvAppSwitcherAction = Action.HvAppSwitcherAction;
-exports.baseSwitchClasses = baseSwitchClasses.default;
+exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
 exports.HvBaseSwitch = BaseSwitch.HvBaseSwitch;
-exports.checkBoxClasses = checkBoxClasses.default;
+exports.checkBoxClasses = CheckBox_styles.staticClasses;
 exports.HvCheckBox = CheckBox.HvCheckBox;
 exports.inputClasses = Input_styles.staticClasses;
 exports.HvInput = Input.HvInput;
-exports.switchClasses = switchClasses.default;
+exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
-exports.radioClasses = radioClasses.default;
+exports.radioClasses = Radio_styles.staticClasses;
 exports.HvRadio = Radio.HvRadio;
 exports.textAreaClasses = textAreaClasses.default;
 exports.HvTextArea = TextArea.HvTextArea;
 exports.tagsInputClasses = tagsInputClasses.default;
 exports.HvTagsInput = TagsInput.HvTagsInput;
-exports.checkBoxGroupClasses = checkBoxGroupClasses.default;
+exports.checkBoxGroupClasses = CheckBoxGroup_styles.staticClasses;
 exports.HvCheckBoxGroup = CheckBoxGroup.HvCheckBoxGroup;
 exports.listClasses = listClasses.default;
 exports.HvList = List.HvList;
-exports.radioGroupClasses = radioGroupClasses.default;
+exports.radioGroupClasses = RadioGroup_styles.staticClasses;
 exports.HvRadioGroup = RadioGroup.HvRadioGroup;
-exports.fileUploaderPreviewClasses = previewClasses.default;
+exports.fileUploaderPreviewClasses = Preview_styles.staticClasses;
 exports.HvFileUploaderPreview = Preview.HvFileUploaderPreview;
-exports.fileClasses = fileClasses.default;
+exports.fileClasses = File_styles.staticClasses;
 exports.HvFile = File.HvFile;
 exports.HvFileUploader = FileUploader.HvFileUploader;
 exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
@@ -471,7 +473,7 @@ exports.paginationClasses = Pagination_styles.staticClasses;
 exports.HvPagination = Pagination.HvPagination;
 exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
 exports.HvActionsGeneric = ActionsGeneric.HvActionsGeneric;
-exports.breadCrumbClasses = breadCrumbClasses.default;
+exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
 exports.HvBreadCrumb = BreadCrumb.HvBreadCrumb;
 exports.dotPaginationClasses = DotPagination_styles.staticClasses;
 exports.HvDotPagination = DotPagination.HvDotPagination;
@@ -484,9 +486,9 @@ exports.HvSnackbar = Snackbar.HvSnackbar;
 exports.snackbarProviderClasses = SnackbarProvider_styles.staticClasses;
 exports.HvSnackbarProvider = SnackbarProvider.HvSnackbarProvider;
 exports.useHvSnackbar = SnackbarProvider.useHvSnackbar;
-exports.snackbarContentClasses = SnackbarContentWrapper_styles.staticClasses;
-exports.HvSnackbarContent = SnackbarContentWrapper.HvSnackbarContent;
-exports.bulkActionsClasses = bulkActionsClasses.default;
+exports.snackbarContentClasses = SnackbarContent_styles.staticClasses;
+exports.HvSnackbarContent = SnackbarContent.HvSnackbarContent;
+exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = BulkActions.HvBulkActions;
 exports.globalActionsClasses = globalActionsClasses.default;
 exports.HvGlobalActions = GlobalActions.HvGlobalActions;
@@ -559,11 +561,11 @@ exports.hvStringFallback = fallbacks.hvStringFallback;
 exports.getBorderStyles = utils$1.getBorderStyles;
 exports.loginClasses = loginClasses.default;
 exports.HvLogin = Login.HvLogin;
-exports.controlsClasses = controlClasses.default;
+exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = Controls.HvControls;
-exports.leftControlClasses = leftControlClasses.default;
+exports.leftControlClasses = LeftControl_styles.staticClasses;
 exports.HvLeftControl = LeftControl.HvLeftControl;
-exports.rightControlClasses = rightControlClasses.default;
+exports.rightControlClasses = RightControl_styles.staticClasses;
 exports.HvRightControl = RightControl.HvRightControl;
 exports.calendarClasses = calendarClasses.default;
 exports.HvCalendar = Calendar.HvCalendar;
@@ -617,6 +619,9 @@ exports.HvTimePicker = TimePicker.HvTimePicker;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useControlled = useControlled.useControlled;
 exports.useForkRef = useForkRef.useForkRef;
+exports.useCss = useCss.useCss;
+exports.filterProps = useDefaultProps.filterProps;
+exports.useDefaultProps = useDefaultProps.useDefaultProps;
 exports.useImageLoaded = useImageLoaded.useImageLoaded;
 exports.useWidth = useWidth.useWidth;
 exports.useLabels = useLabels.useLabels;

package/dist/cjs/index.cjs.map

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

package/dist/esm/components/Accordion/Accordion.js

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
@@ -6,21 +7,22 @@ import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
-const HvAccordion = ({
-  id,
-  className,
-  classes: classesProp,
-  disabled = false,
-  label,
-  onChange,
-  children,
-  expanded,
-  headingLevel,
-  defaultExpanded = false,
-  containerProps,
-  labelVariant = "label",
-  ...others
-}) => {
+const HvAccordion = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    disabled = false,
+    label,
+    onChange,
+    children,
+    expanded,
+    headingLevel,
+    defaultExpanded = false,
+    containerProps,
+    labelVariant = "label",
+    ...others
+  } = useDefaultProps("HvAccordion", props);
   const {
     classes,
     cx

package/dist/esm/components/Accordion/Accordion.js.map

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

package/dist/esm/components/ActionBar/ActionBar.js

@@ -1,3 +1,4 @@
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./ActionBar.styles.js";
 import { staticClasses } from "./ActionBar.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
@@ -7,7 +8,7 @@ const HvActionBar = (props) => {
     className,
     children,
     ...others
-  } = props;
+  } = useDefaultProps("HvActionBar", props);
   const {
     classes,
     cx

package/dist/esm/components/ActionBar/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const { classes: classesProp, className, children, ...others } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvActionBar","props","classes","classesProp","className","children","others","cx","useClasses","root"],"mappings":";;;AAeaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAaC;AAAAA,IAAWC;AAAAA,IAAU,GAAGC;AAAAA,EAAWL,IAAAA;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAE9C,6BACE,OAAA;AAAA,IAAKC,WAAWG,GAAGL,QAAQO,MAAML,SAAS;AAAA,IAAE,GAAKE;AAAAA,IAAMD;AAAAA,EAAAA,CAElD;AAET;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvActionBar","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","root"],"mappings":";;;;AAgBaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeN,KAAK;AAClC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACE,OAAA;AAAA,IAAKC,WAAWI,GAAGN,QAAQQ,MAAMN,SAAS;AAAA,IAAE,GAAKE;AAAAA,IAAMD;AAAAA,EAAAA,CAElD;AAET;"}

package/dist/esm/components/ActionsGeneric/ActionsGeneric.js

@@ -1,4 +1,5 @@
 import { isValidElement } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
@@ -9,17 +10,18 @@ import { staticClasses } from "./ActionsGeneric.styles.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
-const HvActionsGeneric = ({
-  id,
-  classes: classesProp,
-  className,
-  category = "secondaryGhost",
-  disabled = false,
-  actions = [],
-  actionsCallback,
-  maxVisibleActions = Infinity,
-  ...others
-}) => {
+const HvActionsGeneric = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    category = "secondaryGhost",
+    disabled = false,
+    actions = [],
+    actionsCallback,
+    maxVisibleActions = Infinity,
+    ...others
+  } = useDefaultProps("HvActionsGeneric", props);
   const {
     classes,
     cx,

package/dist/esm/components/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = ({\n  id,\n  classes: classesProp,\n  className,\n  category = \"secondaryGhost\",\n  disabled = false,\n  actions = [],\n  actionsCallback,\n  maxVisibleActions = Infinity,\n  ...others\n}: HvActionsGenericProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                activeTheme?.colors?.modes[selectedMode].base_light ||\n                  theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","cx","css","useClasses","activeTheme","selectedMode","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","HvButton","variant","backgroundColor","hexToRgbA","colors","modes","base_light","theme","button","onClick","event","startIcon","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","actionContainer"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                activeTheme?.colors?.modes[selectedMode].base_light ||\n                  theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","HvButton","variant","backgroundColor","hexToRgbA","colors","modes","base_light","theme","button","onClick","event","startIcon","children","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","_Fragment","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","color","placement","dataList","keepOpened","disablePortal","actionOverflow","length","actionContainer"],"mappings":";;;;;;;;;;;;AAgDaA,MAAAA,mBAAmBA,CAACC,UAAiC;AAC1D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU,CAAE;AAAA,IACZC;AAAAA,IACAC,oBAAoBC;AAAAA,IACpB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,oBAAoBZ,KAAK;AAEvC,QAAA;AAAA,IAAEE;AAAAA,IAASW;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWZ,WAAW;AAE7C,QAAA;AAAA,IAAEa;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAE3C,MAAA,CAACC,MAAMC,QAAQb,OAAO;AAAUc,WAAAA,eAAed,OAAO,IAAIA,UAAU;AAElEe,QAAAA,eAAeA,CAACC,QAAyBC,QAAgB;;AACvD,UAAA;AAAA,MAAElB,UAAUmB;AAAAA,MAAaxB,IAAIyB;AAAAA,MAAOC;AAAAA,MAAMC;AAAAA,MAAO,GAAGC;AAAAA,IAAUN,IAAAA;AACpE,UAAMO,WAAWC,MAAM9B,IAAIuB,KAAK,UAAUD,OAAOtB,EAAE;AAEnD,UAAM+B,eAAeX,eAAeM,IAAI,IACpCA,OACCA,6BAAoB;AAAA,MAAEM,YAAY3B;AAAAA,IAAAA;AAEvC,+BACG4B,UAAQ;AAAA,MACPjC,IAAI6B;AAAAA,MAEJK,SAAS9B;AAAAA,MACTD,WAAWS,GACTC,IAAI;AAAA,QACF,WAAW;AAAA,UACTsB,iBAAiBC,YACfrB,gDAAasB,WAAbtB,mBAAqBuB,MAAMtB,cAAcuB,eACvCC,MAAMH,OAAOE,YACf,GACF;AAAA,QACF;AAAA,MAAA,CACD,GACDtC,QAAQwC,MACV;AAAA,MACApC,UAAUmB,eAAenB;AAAAA,MACzBqC,SAAUC,CAAUpC,UAAAA,mDAAkBoC,OAAO3C,MAAM,IAAIsB;AAAAA,MACvDsB,WAAWb;AAAAA,MAAa,GACpBH;AAAAA,MAAKiB,UAERlB;AAAAA,IAAAA,GAnBIE,YAAYN,GAoBT;AAAA,EAAA;AAId,QAAMuB,oBAAoBA,MAAM;AAC9B,UAAMC,cAAczC,QAAQ0C,MAAM,GAAGxC,iBAAiB;AAChDyC,UAAAA,eAAe3C,QAAQ0C,MAAMxC,iBAAiB;AAEpD,UAAM0C,WAAW9C,aAAa;AAC9B,UAAM+C,YACH9C,YAAY,kBAAoB6C,YAAY,eAAgBE;AAE/D,gCACEC,UAAA;AAAA,MAAAR,UAAA,CACGE,YAAYO,IAAI,CAAChC,QAAQC,QAAQF,aAAaC,QAAQC,GAAG,CAAC,uBAC1DgC,gBAAc;AAAA,QACbvD,IAAI8B,MAAM9B,IAAI,MAAM;AAAA,QACpBK;AAAAA,QACAD;AAAAA,QACAH,SAAS;AAAA,UACPuD,MAAMvD,QAAQwD;AAAAA,UACd/B,MAAMzB,QAAQyD;AAAAA,UACdC,cAAc1D,QAAQ2D;AAAAA,QACxB;AAAA,QACAlC,0BAAOmC,qBAAmB;AAAA,UAACC,OAAOX;AAAAA,QAAAA,CAAY;AAAA,QAC9CY,WAAU;AAAA,QACVrB,SAASA,CAACC,OAAOrB,WACff,mDAAkBoC,OAAO3C,MAAM,IAAIsB;AAAAA,QAErC0C,UAAUf;AAAAA,QACVgB,YAAY;AAAA,QACZC,eAAe;AAAA,MAAA,CAChB,CAAC;AAAA,IAAA,CACF;AAAA,EAAA;AAIAC,QAAAA,iBAAiB7D,QAAQ8D,SAAS5D;AAExC,6BACE,OAAA;AAAA,IACEL,WAAWS,GACTX,QAAQuD,MACR;AAAA,MAAE,CAACvD,QAAQoE,eAAe,GAAGF;AAAAA,OAC7BhE,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMmC,UAETsB,iBACGrB,kBAAkB,IAClBxC,QAAQgD,IAAI,CAAChC,QAAQC,QAAQF,aAAaC,QAAQC,GAAG,CAAC;AAAA,EAAA,CACvD;AAET;"}

package/dist/esm/components/AppSwitcher/AppSwitcher.js

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./AppSwitcher.styles.js";
 import { staticClasses } from "./AppSwitcher.styles.js";
 import TitleWithTooltip from "./TitleWithTooltip.js";
@@ -6,20 +7,21 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvAppSwitcherAction } from "./Action/Action.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
-const HvAppSwitcher = ({
-  id,
-  className,
-  classes: classesProp,
-  layout = "single",
-  title,
-  applications,
-  onActionClickedCallback = () => {
-  },
-  isActionSelectedCallback = () => false,
-  header,
-  footer,
-  isOpen
-}) => {
+const HvAppSwitcher = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    layout = "single",
+    title,
+    applications,
+    onActionClickedCallback = () => {
+    },
+    isActionSelectedCallback = () => false,
+    header,
+    footer,
+    isOpen
+  } = useDefaultProps("HvAppSwitcher", props);
   const {
     classes,
     cx

package/dist/esm/components/AppSwitcher/AppSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = ({\n  id,\n  className,\n  classes: classesProp,\n  layout = \"single\",\n  title,\n  applications,\n  onActionClickedCallback = () => {},\n  isActionSelectedCallback = () => false,\n  header,\n  footer,\n  isOpen,\n}: HvAppSwitcherProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && <TitleWithTooltip className={classes.title} title={title} />)}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvAppSwitcher","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","open","closed","children","_jsx","HvTypography","component","variant","TitleWithTooltip","HvListContainer","disableGutters","actionsContainer","footerContainer"],"mappings":";;;;;;;;AA6CO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,0BAA0BA,MAAM;AAAA,EAAC;AAAA,EACjCC,2BAA2BA,MAAM;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,eAAeC,QACnB,MACET,iBACAA,6CAAcU,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,iCACGC,qBAAmB;AAAA,QAElBF;AAAAA,QACAG,iBAAiBb;AAAAA,QACjBc,oBAAoBb;AAAAA,QACpBN,SAAS;AAAA,UACPoB,MAAMpB,QAAQqB;AAAAA,UACdC,UAAUtB,QAAQuB;AAAAA,UAClBC,UAAUxB,QAAQyB;AAAAA,UAClBC,YAAY1B,QAAQ2B;AAAAA,UACpBC,MAAM5B,QAAQ6B;AAAAA,UACd1B,OAAOH,QAAQ8B;AAAAA,UACfC,UAAU/B,QAAQgC;AAAAA,QACpB;AAAA,MAAA,GAZKjB,YAAYjB,MAAO,GAAEiB,YAAYC,QAAQD,YAAYkB,KAa3D;AAAA,IAEL;AAEOC,WAAAA;AAAAA,EAAAA,KAEX,CAAC9B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAEA,8BACE,OAAA;AAAA,IACEP;AAAAA,IACAC,WAAWW,GACTV,QAAQoB,MACRpB,QAAQE,MAAM,GACd;AAAA,MAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,MAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,OACzDV,SACF;AAAA,IAAEsC,UAEA9B,CAAAA,UACA+B,oBAACC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAQ1C,WAAWC,QAAQG;AAAAA,MAAMkC,UACpE9B;AAAAA,IAAAA,CACW,KAEbJ,SAASmC,oBAACI,kBAAgB;AAAA,MAAC3C,WAAWC,QAAQG;AAAAA,MAAOA;AAAAA,IAAAA,CAAe,GACvEmC,oBAACK,iBAAe;AAAA,MAACC,gBAAc;AAAA,MAAC7C,WAAWC,QAAQ6C;AAAAA,MAAiBR,UACjEzB;AAAAA,IAAAA,CACc,GAChBJ,UACC8B,oBAACC,cAAY;AAAA,MACXC,WAAU;AAAA,MACVC,SAAQ;AAAA,MACR1C,WAAWC,QAAQ8C;AAAAA,MAAgBT,UAElC7B;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;"}
+{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && <TitleWithTooltip className={classes.title} title={title} />)}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","open","closed","children","_jsx","HvTypography","component","variant","TitleWithTooltip","HvListContainer","disableGutters","actionsContainer","footerContainer"],"mappings":";;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,QACnB,MACEV,iBACAA,6CAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,iCACGC,qBAAmB;AAAA,QAElBF;AAAAA,QACAG,iBAAiBd;AAAAA,QACjBe,oBAAoBd;AAAAA,QACpBN,SAAS;AAAA,UACPqB,MAAMrB,QAAQsB;AAAAA,UACdC,UAAUvB,QAAQwB;AAAAA,UAClBC,UAAUzB,QAAQ0B;AAAAA,UAClBC,YAAY3B,QAAQ4B;AAAAA,UACpBC,MAAM7B,QAAQ8B;AAAAA,UACd3B,OAAOH,QAAQ+B;AAAAA,UACfC,UAAUhC,QAAQiC;AAAAA,QACpB;AAAA,MAAA,GAZKjB,YAAYlB,MAAO,GAAEkB,YAAYC,QAAQD,YAAYkB,KAa3D;AAAA,IAEL;AAEOC,WAAAA;AAAAA,EAAAA,KAEX,CAAC/B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAEA,8BACE,OAAA;AAAA,IACEP;AAAAA,IACAC,WAAWY,GACTX,QAAQqB,MACRrB,QAAQE,MAAM,GACd;AAAA,MAAE,CAACF,QAAQoC,IAAI,GAAG,CAAC,CAAC3B;AAAAA,MAAQ,CAACT,QAAQqC,MAAM,GAAG5B,WAAW;AAAA,OACzDV,SACF;AAAA,IAAEuC,UAEA/B,CAAAA,UACAgC,oBAACC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAQ3C,WAAWC,QAAQG;AAAAA,MAAMmC,UACpE/B;AAAAA,IAAAA,CACW,KAEbJ,SAASoC,oBAACI,kBAAgB;AAAA,MAAC5C,WAAWC,QAAQG;AAAAA,MAAOA;AAAAA,IAAAA,CAAe,GACvEoC,oBAACK,iBAAe;AAAA,MAACC,gBAAc;AAAA,MAAC9C,WAAWC,QAAQ8C;AAAAA,MAAiBR,UACjEzB;AAAAA,IAAAA,CACc,GAChBL,UACC+B,oBAACC,cAAY;AAAA,MACXC,WAAU;AAAA,MACVC,SAAQ;AAAA,MACR3C,WAAWC,QAAQ+C;AAAAA,MAAgBT,UAElC9B;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,3 +1,4 @@
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import MuiAvatar from "@mui/material/Avatar";
@@ -7,26 +8,27 @@ import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
-const HvAvatar = ({
-  className,
-  style,
-  classes: classesProp,
-  children: childrenProp,
-  component = "div",
-  size = "sm",
-  backgroundColor = "secondary",
-  color = "atmo1",
-  src,
-  srcSet,
-  sizes,
-  alt,
-  imgProps,
-  status,
-  badge,
-  variant = "circular",
-  avatarProps,
-  ...others
-}) => {
+const HvAvatar = (props) => {
+  const {
+    className,
+    style,
+    classes: classesProp,
+    children: childrenProp,
+    component = "div",
+    size = "sm",
+    backgroundColor = "secondary",
+    color = "atmo1",
+    src,
+    srcSet,
+    sizes,
+    alt,
+    imgProps,
+    status,
+    badge,
+    variant = "circular",
+    avatarProps,
+    ...others
+  } = useDefaultProps("HvAvatar", props);
   const {
     classes,
     cx