npm - @hitachivantara/uikit-react-core - Versions diffs - 5.24.0 → 5.24.1 - Mend

@hitachivantara/uikit-react-core 5.24.0 → 5.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (386) hide show

package/dist/cjs/components/Typography/Typography.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef, ~~AllHTMLAttributes, Ref~~ } from \"react\";\n\nimport { ~~HvBaseProps~~ } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n lTitle: \"h2\",\n sTitle: \"h4\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} as const;\n\nexport ~~interface~~ HvTypographyProps\n extends ~~Omit<AllHTMLAttributes<HTMLElement>,~~ \"~~disabled~~\"~~>,\~~n ~~HvBaseProps<HTMLElement>~~ {\n ~~component?: React.ElementType;\n~~ /** Use the variant prop to change the visual style of the Typography. /\n variant?: HvTypographyVariants \| HvTypographyLegacyVariants;\n /* If `true` the typography will display the look of a link. /\n link?: boolean;\n /* If `true` the typography will display the look of a disabled state. /\n disabled?: boolean;\n /* If `true`, the text will have a bottom margin. /\n paragraph?: boolean;\n /\n If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n \n Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n /\n noWrap?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTypographyClasses;\n}\n\n/\n Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = forwardRef(\n (props: HvTypographyProps, ref: ~~Ref~~<~~HTMLElement>~~) => {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n disabled = false,\n noWrap = false,\n paragraph = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.name);\n\n const Component =\n ComponentProp \|\| (paragraph && \"p\") \|\| HvTypographyMap[variant] \|\| \"span\";\n\n return (\n <Component\n ref={ref}\n className={cx(classes.root, classes[variant], className, {\n [classes.isLink]: link,\n [classes.noWrap]: noWrap,\n [classes.disabled]: disabled,\n })}\n {...others}\n />\n );\n }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;~~AA4BO~~,MAAMC,~~eAAeC~~,MAAAA,~~WAC1B~~,~~CAACC~~,~~OAA0BC~~,~~QAA0B~~;~~AAC7C~~,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,wCACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GAAGT,QAAQgB,MAAMhB,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
1	+ {"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n lTitle: \"h2\",\n sTitle: \"h4\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Typography. /\n variant?: HvTypographyVariants \| HvTypographyLegacyVariants;\n /* If `true` the typography will display the look of a link. /\n link?: boolean;\n /* If `true` the typography will display the look of a disabled state. /\n disabled?: boolean;\n /* If `true`, the text will have a bottom margin. /\n paragraph?: boolean;\n /\n If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n \n Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n /\n noWrap?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTypographyClasses;\n }\n >;\n\n/\n Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n props: HvTypographyProps<C>\n) => React.ReactElement \| null = forwardRef(\n <C extends React.ElementType = \"p\">(\n props: HvTypographyProps<C>,\n ref: PolymorphicRef<C>\n ) => {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n disabled = false,\n noWrap = false,\n paragraph = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.name);\n\n const Component =\n ComponentProp \|\| (paragraph && \"p\") \|\| HvTypographyMap[variant] \|\| \"span\";\n\n return (\n <Component\n ref={ref}\n className={cx(classes.root, classes[variant], className, {\n [classes.isLink]: link,\n [classes.noWrap]: noWrap,\n [classes.disabled]: disabled,\n })}\n {...others}\n />\n );\n }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,wCACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GAAGT,QAAQgB,MAAMhB,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -14,26 +14,26 @@ const listContainerClasses = require("./components/ListContainer/listContainerCl
 const ListContainer = require("./components/ListContainer/ListContainer.cjs");
 const listItemClasses = require("./components/ListContainer/ListItem/listItemClasses.cjs");
 const ListItem = require("./components/ListContainer/ListItem/ListItem.cjs");
-const charCounterClasses = require("./components/Forms/CharCounter/charCounterClasses.cjs");
+const CharCounter_styles = require("./components/Forms/CharCounter/CharCounter.styles.cjs");
 const CharCounter = require("./components/Forms/CharCounter/CharCounter.cjs");
-const adornmentClasses = require("./components/Forms/Adornment/adornmentClasses.cjs");
+const Adornment_styles = require("./components/Forms/Adornment/Adornment.styles.cjs");
 const Adornment = require("./components/Forms/Adornment/Adornment.cjs");
-const formElementClasses = require("./components/Forms/FormElement/formElementClasses.cjs");
+const FormElement_styles = require("./components/Forms/FormElement/FormElement.styles.cjs");
 const FormElement = require("./components/Forms/FormElement/FormElement.cjs");
 const FormElementContext = require("./components/Forms/FormElement/context/FormElementContext.cjs");
 const FormElementValueContext = require("./components/Forms/FormElement/context/FormElementValueContext.cjs");
 const FormElementDescriptorsContext = require("./components/Forms/FormElement/context/FormElementDescriptorsContext.cjs");
 const FormUtils = require("./components/Forms/FormElement/utils/FormUtils.cjs");
 const validationStates = require("./components/Forms/FormElement/validationStates.cjs");
-const labelClasses = require("./components/Forms/Label/labelClasses.cjs");
+const Label_styles = require("./components/Forms/Label/Label.styles.cjs");
 const Label = require("./components/Forms/Label/Label.cjs");
-const infoMessageClasses = require("./components/Forms/InfoMessage/infoMessageClasses.cjs");
+const InfoMessage_styles = require("./components/Forms/InfoMessage/InfoMessage.styles.cjs");
 const InfoMessage = require("./components/Forms/InfoMessage/InfoMessage.cjs");
-const warningTextClasses = require("./components/Forms/WarningText/warningTextClasses.cjs");
+const WarningText_styles = require("./components/Forms/WarningText/WarningText.styles.cjs");
 const WarningText = require("./components/Forms/WarningText/WarningText.cjs");
 const selectionListClasses = require("./components/SelectionList/selectionListClasses.cjs");
 const SelectionList = require("./components/SelectionList/SelectionList.cjs");
-const suggestionsClasses = require("./components/Forms/Suggestions/suggestionsClasses.cjs");
+const Suggestions_styles = require("./components/Forms/Suggestions/Suggestions.styles.cjs");
 const Suggestions = require("./components/Forms/Suggestions/Suggestions.cjs");
 const BaseInput_styles = require("./components/BaseInput/BaseInput.styles.cjs");
 const BaseInput = require("./components/BaseInput/BaseInput.cjs");
@@ -72,19 +72,19 @@ const Drawer_styles = require("./components/Drawer/Drawer.styles.cjs");
 const Drawer = require("./components/Drawer/Drawer.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_styles = require("./components/Footer/Footer.styles.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
 const gridClasses = require("./components/Grid/gridClasses.cjs");
 const Grid = require("./components/Grid/Grid.cjs");
-const headerClasses = require("./components/Header/headerClasses.cjs");
+const Header_styles$1 = require("./components/Header/Header.styles.cjs");
 const Header$1 = require("./components/Header/Header.cjs");
-const actionsClasses = require("./components/Header/Actions/actionsClasses.cjs");
+const Actions_styles$1 = require("./components/Header/Actions/Actions.styles.cjs");
 const Actions$1 = require("./components/Header/Actions/Actions.cjs");
-const brandClasses = require("./components/Header/Brand/brandClasses.cjs");
+const Brand_styles = require("./components/Header/Brand/Brand.styles.cjs");
 const Brand = require("./components/Header/Brand/Brand.cjs");
-const navigationClasses = require("./components/Header/Navigation/navigationClasses.cjs");
 const MenuBar = require("./components/Header/Navigation/MenuBar/MenuBar.cjs");
 const MenuItem = require("./components/Header/Navigation/MenuItem/MenuItem.cjs");
+const Navigation_styles = require("./components/Header/Navigation/Navigation.styles.cjs");
 const Navigation = require("./components/Header/Navigation/Navigation.cjs");
 const useSelectionPath = require("./components/Header/Navigation/useSelectionPath.cjs");
 const kpiClasses = require("./components/Kpi/kpiClasses.cjs");
@@ -95,9 +95,9 @@ const loadingClasses = require("./components/Loading/loadingClasses.cjs");
 const Loading = require("./components/Loading/Loading.cjs");
 const multiButtonClasses = require("./components/MultiButton/multiButtonClasses.cjs");
 const MultiButton = require("./components/MultiButton/MultiButton.cjs");
-const panelClasses = require("./components/Panel/panelClasses.cjs");
+const Panel_styles = require("./components/Panel/Panel.styles.cjs");
 const Panel = require("./components/Panel/Panel.cjs");
-const progressBarClasses = require("./components/ProgressBar/progressBarClasses.cjs");
+const ProgressBar_styles = require("./components/ProgressBar/ProgressBar.styles.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
 const SimpleGrid = require("./components/SimpleGrid/SimpleGrid.cjs");
 const stackClasses = require("./components/Stack/stackClasses.cjs");
@@ -170,17 +170,17 @@ const BulkActions_styles = require("./components/BulkActions/BulkActions.styles.
 const BulkActions = require("./components/BulkActions/BulkActions.cjs");
 const globalActionsClasses = require("./components/GlobalActions/globalActionsClasses.cjs");
 const GlobalActions = require("./components/GlobalActions/GlobalActions.cjs");
-const dropdownClasses = require("./components/Dropdown/dropdownClasses.cjs");
+const Dropdown_styles = require("./components/Dropdown/Dropdown.styles.cjs");
 const Dropdown = require("./components/Dropdown/Dropdown.cjs");
-const tableClasses = require("./components/Table/tableClasses.cjs");
+const Table_styles = require("./components/Table/Table.styles.cjs");
 const Table = require("./components/Table/Table.cjs");
-const tableContainerClasses = require("./components/Table/TableContainer/tableContainerClasses.cjs");
+const TableContainer_styles = require("./components/Table/TableContainer/TableContainer.styles.cjs");
 const TableContainer = require("./components/Table/TableContainer/TableContainer.cjs");
-const tableBodyClasses = require("./components/Table/TableBody/tableBodyClasses.cjs");
+const TableBody_styles = require("./components/Table/TableBody/TableBody.styles.cjs");
 const TableBody = require("./components/Table/TableBody/TableBody.cjs");
-const tableHeadClasses = require("./components/Table/TableHead/tableHeadClasses.cjs");
+const TableHead_styles = require("./components/Table/TableHead/TableHead.styles.cjs");
 const TableHead = require("./components/Table/TableHead/TableHead.cjs");
-const tableHeaderClasses = require("./components/Table/TableHeader/tableHeaderClasses.cjs");
+const TableHeader_styles = require("./components/Table/TableHeader/TableHeader.styles.cjs");
 const TableHeader = require("./components/Table/TableHeader/TableHeader.cjs");
 const TableRow_styles = require("./components/Table/TableRow/TableRow.styles.cjs");
 const TableRow = require("./components/Table/TableRow/TableRow.cjs");
@@ -203,7 +203,7 @@ const ProgressColumnCell = require("./components/Table/renderers/ProgressColumnC
 const SwitchColumnCell = require("./components/Table/renderers/SwitchColumnCell/SwitchColumnCell.cjs");
 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_styles = require("./components/Login/Login.styles.cjs");
 const Login = require("./components/Login/Login.cjs");
 const Controls_styles = require("./components/Controls/Controls.styles.cjs");
 const Controls = require("./components/Controls/Controls.cjs");
@@ -217,13 +217,13 @@ const calendarHeaderClasses = require("./components/Calendar/CalendarHeader/cale
 const CalendarHeader = require("./components/Calendar/CalendarHeader/CalendarHeader.cjs");
 const verticalNavigationClasses = require("./components/VerticalNavigation/verticalNavigationClasses.cjs");
 const VerticalNavigation = require("./components/VerticalNavigation/VerticalNavigation.cjs");
-const headerClasses$1 = require("./components/VerticalNavigation/Header/headerClasses.cjs");
+const headerClasses = require("./components/VerticalNavigation/Header/headerClasses.cjs");
 const Header$2 = require("./components/VerticalNavigation/Header/Header.cjs");
 const actionClasses = require("./components/VerticalNavigation/Actions/actionClasses.cjs");
-const actionsClasses$1 = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
+const actionsClasses = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
 const Actions$2 = require("./components/VerticalNavigation/Actions/Actions.cjs");
 const Action$1 = require("./components/VerticalNavigation/Actions/Action.cjs");
-const navigationClasses$1 = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
+const navigationClasses = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
 const Navigation$1 = require("./components/VerticalNavigation/Navigation/Navigation.cjs");
 const navigationSliderClasses = require("./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.cjs");
 const NavigationSlider = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs");
@@ -321,11 +321,11 @@ exports.listContainerClasses = listContainerClasses.default;
 exports.HvListContainer = ListContainer.HvListContainer;
 exports.listItemClasses = listItemClasses.default;
 exports.HvListItem = ListItem.HvListItem;
-exports.charCounterClasses = charCounterClasses.default;
+exports.charCounterClasses = CharCounter_styles.staticClasses;
 exports.HvCharCounter = CharCounter.HvCharCounter;
-exports.adornmentClasses = adornmentClasses.default;
+exports.adornmentClasses = Adornment_styles.staticClasses;
 exports.HvAdornment = Adornment.HvAdornment;
-exports.formElementClasses = formElementClasses.default;
+exports.formElementClasses = FormElement_styles.staticClasses;
 exports.HvFormElement = FormElement.HvFormElement;
 exports.HvFormElementContext = FormElementContext.HvFormElementContext;
 exports.HvFormElementContextConsumer = FormElementContext.HvFormElementContextConsumer;
@@ -343,15 +343,15 @@ exports.getIdReferenceFor = FormUtils.getIdReferenceFor;
 exports.getIdReferenceListFor = FormUtils.getIdReferenceListFor;
 exports.isInvalid = validationStates.isInvalid;
 exports.isValid = validationStates.isValid;
-exports.labelClasses = labelClasses.default;
+exports.labelClasses = Label_styles.staticClasses;
 exports.HvLabel = Label.HvLabel;
-exports.infoMessageClasses = infoMessageClasses.default;
+exports.infoMessageClasses = InfoMessage_styles.staticClasses;
 exports.HvInfoMessage = InfoMessage.HvInfoMessage;
-exports.warningTextClasses = warningTextClasses.default;
+exports.warningTextClasses = WarningText_styles.staticClasses;
 exports.HvWarningText = WarningText.HvWarningText;
 exports.selectionListClasses = selectionListClasses.default;
 exports.HvSelectionList = SelectionList.HvSelectionList;
-exports.suggestionsClasses = suggestionsClasses.default;
+exports.suggestionsClasses = Suggestions_styles.staticClasses;
 exports.HvSuggestions = Suggestions.HvSuggestions;
 exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = BaseInput.HvBaseInput;
@@ -392,19 +392,19 @@ exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = Drawer.HvDrawer;
 exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = EmptyState.HvEmptyState;
-exports.footerClasses = footerClasses.default;
+exports.footerClasses = Footer_styles.staticClasses;
 exports.HvFooter = Footer.HvFooter;
 exports.gridClasses = gridClasses.default;
 exports.HvGrid = Grid.HvGrid;
-exports.headerClasses = headerClasses.default;
+exports.headerClasses = Header_styles$1.staticClasses;
 exports.HvHeader = Header$1.HvHeader;
-exports.headerActionsClasses = actionsClasses.default;
+exports.headerActionsClasses = Actions_styles$1.staticClasses;
 exports.HvHeaderActions = Actions$1.HvHeaderActions;
-exports.headerBrandClasses = brandClasses.default;
+exports.headerBrandClasses = Brand_styles.staticClasses;
 exports.HvHeaderBrand = Brand.HvHeaderBrand;
-exports.headerNavigationClasses = navigationClasses.default;
 exports.HvHeaderMenuBar = MenuBar.HvHeaderMenuBar;
 exports.HvHeaderMenuItem = MenuItem.HvHeaderMenuItem;
+exports.headerNavigationClasses = Navigation_styles.staticClasses;
 exports.HvHeaderNavigation = Navigation.HvHeaderNavigation;
 exports.useSelectionPath = useSelectionPath.useSelectionPath;
 exports.kpiClasses = kpiClasses.default;
@@ -415,9 +415,9 @@ exports.loadingClasses = loadingClasses.default;
 exports.HvLoading = Loading.HvLoading;
 exports.multiButtonClasses = multiButtonClasses.default;
 exports.HvMultiButton = MultiButton.HvMultiButton;
-exports.panelClasses = panelClasses.default;
+exports.panelClasses = Panel_styles.staticClasses;
 exports.HvPanel = Panel.HvPanel;
-exports.progressBarClasses = progressBarClasses.default;
+exports.progressBarClasses = ProgressBar_styles.staticClasses;
 exports.HvProgressBar = ProgressBar.HvProgressBar;
 exports.HvSimpleGrid = SimpleGrid.HvSimpleGrid;
 exports.stackClasses = stackClasses.default;
@@ -492,17 +492,17 @@ exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = BulkActions.HvBulkActions;
 exports.globalActionsClasses = globalActionsClasses.default;
 exports.HvGlobalActions = GlobalActions.HvGlobalActions;
-exports.dropdownClasses = dropdownClasses.default;
+exports.dropdownClasses = Dropdown_styles.staticClasses;
 exports.HvDropdown = Dropdown.HvDropdown;
-exports.tableClasses = tableClasses.default;
+exports.tableClasses = Table_styles.staticClasses;
 exports.HvTable = Table.HvTable;
-exports.tableContainerClasses = tableContainerClasses.default;
+exports.tableContainerClasses = TableContainer_styles.staticClasses;
 exports.HvTableContainer = TableContainer.HvTableContainer;
-exports.tableBodyClasses = tableBodyClasses.default;
+exports.tableBodyClasses = TableBody_styles.staticClasses;
 exports.HvTableBody = TableBody.HvTableBody;
-exports.tableHeadClasses = tableHeadClasses.default;
+exports.tableHeadClasses = TableHead_styles.staticClasses;
 exports.HvTableHead = TableHead.HvTableHead;
-exports.tableHeaderClasses = tableHeaderClasses.default;
+exports.tableHeaderClasses = TableHeader_styles.staticClasses;
 exports.HvTableHeader = TableHeader.HvTableHeader;
 exports.tableRowClasses = TableRow_styles.staticClasses;
 exports.HvTableRow = TableRow.HvTableRow;
@@ -559,7 +559,7 @@ exports.hvNodeFallback = fallbacks.hvNodeFallback;
 exports.hvNumberFallback = fallbacks.hvNumberFallback;
 exports.hvStringFallback = fallbacks.hvStringFallback;
 exports.getBorderStyles = utils$1.getBorderStyles;
-exports.loginClasses = loginClasses.default;
+exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.controlsClasses = Controls_styles.staticClasses;
 exports.HvControls = Controls.HvControls;
@@ -573,13 +573,13 @@ exports.calendarHeaderClasses = calendarHeaderClasses.default;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
 exports.verticalNavigationClasses = verticalNavigationClasses.default;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.verticalNavigationHeaderClasses = headerClasses$1.default;
+exports.verticalNavigationHeaderClasses = headerClasses.default;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
 exports.actionClasses = actionClasses.default;
-exports.actionsClasses = actionsClasses$1.default;
+exports.actionsClasses = actionsClasses.default;
 exports.HvVerticalNavigationActions = Actions$2.HvVerticalNavigationActions;
 exports.HvVerticalNavigationAction = Action$1.HvVerticalNavigationAction;
-exports.verticalNavigationTreeClasses = navigationClasses$1.default;
+exports.verticalNavigationTreeClasses = navigationClasses.default;
 exports.HvVerticalNavigationTree = Navigation$1.HvVerticalNavigationTree;
 exports.verticalNavigationSliderClasses = navigationSliderClasses.default;
 exports.HvVerticalNavigationSlider = NavigationSlider.HvVerticalNavigationSlider;

package/dist/esm/components/AppSwitcher/Action/Action.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { useUniqueId } from "../../../hooks/useUniqueId.js";
 import TitleWithTooltip from "../TitleWithTooltip.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvAvatar } from "../../Avatar/Avatar.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
 const HvAppSwitcherAction = ({
@@ -60,7 +60,7 @@ const HvAppSwitcherAction = ({
     });
   };
   const isSelected = isSelectedCallback(application);
-  const handleOnClick = (event) => {
+  const handleOnClick = useCallback((event) => {
     if (disabled) {
       event.preventDefault();
       return;
@@ -69,9 +69,36 @@ const HvAppSwitcherAction = ({
       ...application,
       isSelected
     });
-  };
+  }, [application, disabled, isSelected, onClickCallback]);
   const isLink = url != null;
   const descriptionElementId = useUniqueId(id, "hvAction-description");
+  const renderApplication = useCallback((children) => {
+    const typographyProps = {
+      className: classes.typography,
+      onClick: handleOnClick,
+      style: {
+        borderColor: color
+      },
+      "aria-label": name,
+      ...description && {
+        "aria-describedby": descriptionElementId
+      }
+    };
+    if (isLink) {
+      return /* @__PURE__ */ jsx(HvTypography, {
+        component: "a",
+        href: url,
+        target: target || "_top",
+        ...typographyProps,
+        children
+      });
+    }
+    return /* @__PURE__ */ jsx(HvTypography, {
+      component: "button",
+      ...typographyProps,
+      children
+    });
+  }, [classes.typography, color, description, descriptionElementId, handleOnClick, isLink, name, target, url]);
   return /* @__PURE__ */ jsx(HvListItem, {
     id,
     interactive: true,
@@ -82,19 +109,7 @@ const HvAppSwitcherAction = ({
       [classes.disabled]: disabled,
       [classes.selected]: isSelected
     }, className),
-    children: /* @__PURE__ */ jsxs(HvTypography, {
-      component: isLink ? "a" : "button",
-      href: isLink ? url : void 0,
-      target: isLink ? target || "_top" : void 0,
-      className: classes.typography,
-      onClick: handleOnClick,
-      style: {
-        borderColor: color
-      },
-      "aria-label": name,
-      ...description && {
-        "aria-describedby": descriptionElementId
-      },
+    children: renderApplication(/* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
         className: classes.icon,
         children: renderApplicationIcon()
@@ -116,7 +131,7 @@ const HvAppSwitcherAction = ({
           })
         })
       })]
-    })
+    }))
   });
 };
 export {

package/dist/esm/components/AppSwitcher/Action/Action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. /\n id?: string;\n /* Name of the application, this is the value that will be displayed on the component. /\n name: string;\n /* URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. /\n iconUrl?: string;\n /* Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. /\n iconElement?: React.ReactElement;\n /* Small description of the application. /\n description?: string;\n /* URL where the application is accessible. /\n url?: string;\n /* Defines if the application should be opened in the same tab or in a new one. /\n target?: \"_top\" \| \"_blank\";\n /* If true, the item will be disabled. /\n disabled?: boolean;\n /* True when the application is selected, false otherwise. /\n isSelected?: boolean;\n /* The color of the application. /\n color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /* The application data to be used to render the Action object. /\n application: HvAppSwitcherActionApplication;\n /* Callback triggered when the action is clicked. /\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /* Must return a boolean stating if the action element is selected or not. /\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n theme.colors[color] \|\| color \|\| defaultColor;\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = disabled\n ? theme.colors.secondary_60\n : getColor(application?.color, theme.colors.secondary);\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /\n Handles the onClick event and triggers the appropriate callback if it exists.\n /\n const handleOnClick = (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n };\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className\n )}\n >\n {/ As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n In substitution is used the aria-label with the \"title\" value */}\n <HvTypography\n component={isLink ? \"a\" : \"button\"}\n href={isLink ? url : undefined}\n target={isLink ? target \|\| \"_top\" : undefined}\n className={classes.typography}\n onClick={handleOnClick}\n style={{ borderColor: color }}\n aria-label={name}\n {...(description && { \"aria-describedby\": descriptionElementId })}\n >\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <TitleWithTooltip title={name} className={classes.title} />\n\n {description && (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={<HvTypography>{description}</HvTypography>}\n >\n <div>\n <Info\n className={classes.iconInfo}\n role=\"img\"\n aria-label={description}\n id={descriptionElementId}\n />\n </div>\n </HvTooltip>\n )}\n </HvTypography>\n </HvListItem>\n );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","event","preventDefault","isLink","descriptionElementId","useUniqueId","HvListItem","interactive","tabIndex","selected","root","HvTypography","component","href","undefined","typography","onClick","style","borderColor","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}
1	+ {"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. /\n id?: string;\n /* Name of the application, this is the value that will be displayed on the component. /\n name: string;\n /* URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. /\n iconUrl?: string;\n /* Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. /\n iconElement?: React.ReactElement;\n /* Small description of the application. /\n description?: string;\n /* URL where the application is accessible. /\n url?: string;\n /* Defines if the application should be opened in the same tab or in a new one. /\n target?: \"_top\" \| \"_blank\";\n /* If true, the item will be disabled. /\n disabled?: boolean;\n /* True when the application is selected, false otherwise. /\n isSelected?: boolean;\n /* The color of the application. /\n color?: string;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /* The application data to be used to render the Action object. /\n application: HvAppSwitcherActionApplication;\n /* Callback triggered when the action is clicked. /\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication\n ) => void;\n /* Must return a boolean stating if the action element is selected or not. /\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAppSwitcherActionClasses;\n}\n\nconst getColor = (color: any, defaultColor: string) =>\n theme.colors[color] \|\| color \|\| defaultColor;\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = disabled\n ? theme.colors.secondary_60\n : getColor(application?.color, theme.colors.secondary);\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /\n Handles the onClick event and triggers the appropriate callback if it exists.\n /\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback]\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n const renderApplication = useCallback(\n (children: React.ReactNode) => {\n const typographyProps = {\n className: classes.typography,\n onClick: handleOnClick,\n style: { borderColor: color },\n \"aria-label\": name,\n ...(description && { \"aria-describedby\": descriptionElementId }),\n };\n\n if (isLink) {\n return (\n <HvTypography\n component=\"a\"\n href={url}\n target={target \|\| \"_top\"}\n {...typographyProps}\n >\n {children}\n </HvTypography>\n );\n }\n\n return (\n <HvTypography component=\"button\" {...typographyProps}>\n {children}\n </HvTypography>\n );\n },\n [\n classes.typography,\n color,\n description,\n descriptionElementId,\n handleOnClick,\n isLink,\n name,\n target,\n url,\n ]\n );\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className\n )}\n >\n {/ As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n In substitution is used the aria-label with the \"title\" value */}\n {renderApplication(\n <>\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <TitleWithTooltip title={name} className={classes.title} />\n\n {description && (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={<HvTypography>{description}</HvTypography>}\n >\n <div>\n <Info\n className={classes.iconInfo}\n role=\"img\"\n aria-label={description}\n id={descriptionElementId}\n />\n </div>\n </HvTooltip>\n )}\n </>\n )}\n </HvListItem>\n );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","typographyProps","typography","onClick","style","borderColor","HvTypography","component","href","HvListItem","interactive","tabIndex","selected","root","_jsxs","_Fragment","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}

package/dist/esm/components/BulkActions/BulkActions.js CHANGED Viewed

@@ -3,8 +3,7 @@ import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
-import { useClasses } from "./BulkActions.styles.js";
-import { staticClasses } from "./BulkActions.styles.js";
+import { useClasses, staticClasses } from "./BulkActions.styles.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -65,7 +64,7 @@ const HvBulkActions = (props) => {
     className: cx(classes.root, {
       [classes.semantic]: isSemantic
     }, isSemantic && css({
-      "& $selectAll div": {
+      [`& .${staticClasses.selectAll} div`]: {
         color: theme.colors.base_dark,
         "&:hover:not(:disabled)": {
           backgroundColor: hexToRgbA(baseColor, 0.3)
@@ -75,11 +74,11 @@ const HvBulkActions = (props) => {
           backgroundColor: "transparent"
         }
       },
-      "& $selectAll:focus-within div": {
+      [`& .${staticClasses.selectAll}:focus-within div`]: {
         backgroundColor: hexToRgbA(baseColor, 0.3)
       },
       // IE fallback code (using focus-within-polyfill)
-      "& $selectAll.focus-within div": {
+      [`& .${staticClasses.selectAll}.focus-within div`]: {
         backgroundColor: hexToRgbA(baseColor, 0.3)
       }
     }), className),

package/dist/esm/components/BulkActions/BulkActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n HvActionGeneric,\n HvActionsGeneric,\n HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n /*\n Custom label for select all checkbox\n /\n selectAllLabel?: React.ReactNode;\n /\n Custom label for select all checkbox conjunction\n /\n selectAllConjunctionLabel?: string;\n /\n Custom label for select all pages button\n /\n selectAllPagesLabel?: React.ReactNode;\n /\n Whether select all pages element should be visible\n /\n showSelectAllPages?: boolean;\n /\n The total number of elements\n /\n numTotal?: number;\n /\n The number of elements currently selected\n /\n numSelected?: number;\n /\n Function called when the \"select all\" Checkbox is toggled.\n /\n onSelectAll?: HvCheckBoxProps[\"onChange\"];\n /\n Function called when the \"select all pages\" button is clicked toggled.\n /\n onSelectAllPages?: HvButtonProps[\"onClick\"];\n /\n Whether the bulk actions should use the semantic styles when there are selected elements.\n /\n semantic?: boolean;\n /\n The renderable content inside the right actions slot,\n * or an Array of actions `{ id, label, icon, disabled, ... }`\n /\n actions?: React.ReactNode \| HvActionGeneric[];\n /\n Whether actions should be all disabled\n /\n actionsDisabled?: boolean;\n /\n The callback function ran when an action is triggered, receiving `action` as param\n /\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /\n The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n /\n maxVisibleActions?: number;\n /\n Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n * HvCheckbox API.\n /\n checkboxProps?: HvCheckBoxProps;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvBulkActionsClasses;\n}\n\n/\n Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n /\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n selectAllPagesLabel,\n actionsDisabled,\n maxVisibleActions,\n checkboxProps,\n actions,\n numTotal = 0,\n numSelected = 0,\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n showSelectAllPages = false,\n semantic = true,\n actionsCallback,\n onSelectAll,\n onSelectAllPages,\n ...others\n } = useDefaultProps(\"HvBulkActions\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { activeTheme, selectedMode } = useTheme();\n\n const baseColor =\n activeTheme?.colors?.modes[selectedMode].base_light \|\|\n theme.colors.base_light;\n const anySelected = numSelected > 0;\n const isSemantic = semantic && anySelected;\n\n const selectAllLabelComponent = (\n <HvTypography\n component=\"span\"\n disabled={checkboxProps?.disabled}\n variant=\"body\"\n >\n {!anySelected ? (\n <>\n <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n {` (${numTotal})`}\n </>\n ) : (\n <>\n <HvTypography variant=\"label\">{numSelected}</HvTypography>\n {` ${selectAllConjunctionLabel} ${numTotal}`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n { [classes.semantic]: isSemantic },\n isSemantic &&\n css({\n \"& $selectAll div\": {\n color: theme.colors.base_dark,\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n\n \"& \": {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n },\n },\n\n \"& $selectAll:focus-within div\": {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n\n // IE fallback code (using focus-within-polyfill)\n \"& $selectAll.focus-within div\": {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n }),\n className\n )}\n {...others}\n >\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select\")}\n className={classes.selectAll}\n checked={numSelected > 0}\n semantic={isSemantic}\n onChange={onSelectAll}\n indeterminate={numSelected > 0 && numSelected < numTotal}\n label={selectAllLabelComponent}\n {...checkboxProps}\n />\n {showSelectAllPages && anySelected && numSelected < numTotal && (\n <>\n <div className={classes.divider} />\n <HvButton\n id={setId(id, \"pages\")}\n className={classes.selectAllPages}\n variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n onClick={onSelectAllPages}\n >\n {selectAllPagesLabel ??\n `Select all ${numTotal} items across all pages`}\n </HvButton>\n </>\n )}\n </div>\n <HvActionsGeneric\n id={setId(id, \"actions\")}\n classes={{ root: classes.actions }}\n category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n actions={actions}\n disabled={actionsDisabled ?? numSelected === 0}\n actionsCallback={actionsCallback}\n maxVisibleActions={maxVisibleActions}\n />\n </div>\n );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","selectAll","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}
1	+ {"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"@core/components/CheckBox\";\nimport {\n HvActionGeneric,\n HvActionsGeneric,\n HvActionsGenericProps,\n} from \"@core/components/ActionsGeneric\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n /*\n Custom label for select all checkbox\n /\n selectAllLabel?: React.ReactNode;\n /\n Custom label for select all checkbox conjunction\n /\n selectAllConjunctionLabel?: string;\n /\n Custom label for select all pages button\n /\n selectAllPagesLabel?: React.ReactNode;\n /\n Whether select all pages element should be visible\n /\n showSelectAllPages?: boolean;\n /\n The total number of elements\n /\n numTotal?: number;\n /\n The number of elements currently selected\n /\n numSelected?: number;\n /\n Function called when the \"select all\" Checkbox is toggled.\n /\n onSelectAll?: HvCheckBoxProps[\"onChange\"];\n /\n Function called when the \"select all pages\" button is clicked toggled.\n /\n onSelectAllPages?: HvButtonProps[\"onClick\"];\n /\n Whether the bulk actions should use the semantic styles when there are selected elements.\n /\n semantic?: boolean;\n /\n The renderable content inside the right actions slot,\n * or an Array of actions `{ id, label, icon, disabled, ... }`\n /\n actions?: React.ReactNode \| HvActionGeneric[];\n /\n Whether actions should be all disabled\n /\n actionsDisabled?: boolean;\n /\n The callback function ran when an action is triggered, receiving `action` as param\n /\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /\n The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n /\n maxVisibleActions?: number;\n /\n Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n * HvCheckbox API.\n /\n checkboxProps?: HvCheckBoxProps;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvBulkActionsClasses;\n}\n\n/\n Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n /\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n selectAllPagesLabel,\n actionsDisabled,\n maxVisibleActions,\n checkboxProps,\n actions,\n numTotal = 0,\n numSelected = 0,\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n showSelectAllPages = false,\n semantic = true,\n actionsCallback,\n onSelectAll,\n onSelectAllPages,\n ...others\n } = useDefaultProps(\"HvBulkActions\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { activeTheme, selectedMode } = useTheme();\n\n const baseColor =\n activeTheme?.colors?.modes[selectedMode].base_light \|\|\n theme.colors.base_light;\n const anySelected = numSelected > 0;\n const isSemantic = semantic && anySelected;\n\n const selectAllLabelComponent = (\n <HvTypography\n component=\"span\"\n disabled={checkboxProps?.disabled}\n variant=\"body\"\n >\n {!anySelected ? (\n <>\n <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n {` (${numTotal})`}\n </>\n ) : (\n <>\n <HvTypography variant=\"label\">{numSelected}</HvTypography>\n {` ${selectAllConjunctionLabel} ${numTotal}`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n { [classes.semantic]: isSemantic },\n isSemantic &&\n css({\n [`& .${staticClasses.selectAll} div`]: {\n color: theme.colors.base_dark,\n\n \"&:hover:not(:disabled)\": {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n\n \"& \": {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n },\n },\n\n [`& .${staticClasses.selectAll}:focus-within div`]: {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n\n // IE fallback code (using focus-within-polyfill)\n [`& .${staticClasses.selectAll}.focus-within div`]: {\n backgroundColor: hexToRgbA(baseColor, 0.3),\n },\n }),\n className\n )}\n {...others}\n >\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select\")}\n className={classes.selectAll}\n checked={numSelected > 0}\n semantic={isSemantic}\n onChange={onSelectAll}\n indeterminate={numSelected > 0 && numSelected < numTotal}\n label={selectAllLabelComponent}\n {...checkboxProps}\n />\n {showSelectAllPages && anySelected && numSelected < numTotal && (\n <>\n <div className={classes.divider} />\n <HvButton\n id={setId(id, \"pages\")}\n className={classes.selectAllPages}\n variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n onClick={onSelectAllPages}\n >\n {selectAllPagesLabel ??\n `Select all ${numTotal} items across all pages`}\n </HvButton>\n </>\n )}\n </div>\n <HvActionsGeneric\n id={setId(id, \"actions\")}\n classes={{ root: classes.actions }}\n category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n actions={actions}\n disabled={actionsDisabled ?? numSelected === 0}\n actionsCallback={actionsCallback}\n maxVisibleActions={maxVisibleActions}\n />\n </div>\n );\n};\n"],"names":["HvBulkActions","props","id","className","classes","classesProp","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","useDefaultProps","cx","css","useClasses","activeTheme","selectedMode","useTheme","baseColor","colors","modes","base_light","theme","anySelected","isSemantic","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","root","staticClasses","selectAll","color","base_dark","backgroundColor","hexToRgbA","selectAllContainer","HvCheckBox","setId","checked","onChange","indeterminate","label","divider","HvButton","selectAllPages","onClick","HvActionsGeneric","category"],"mappings":"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"}

package/dist/esm/components/Card/Header/Header.js CHANGED Viewed

@@ -25,7 +25,7 @@ const HvCardHeader = ({
     subheader,
     action: icon,
     onClick,
-    className: cx(className, classes.root),
+    className: cx(classes.root, className),
     classes: {
       title: cx(css({
         ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]

package/dist/esm/components/Card/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n}: HvCardHeaderProps) => {\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(~~className,~~ classes.root)}\n classes={{\n title: cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.titleVariant],\n }),\n {\n [classes.titleShort]: icon,\n [classes.title]: !icon,\n }\n ),\n subheader: cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n color: activeTheme?.card.subheaderColor,\n }),\n classes.subheader\n ),\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","cx","useClasses","MuiCardHeader","action","root","typography","card","titleVariant","titleShort","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;AA6BO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAEnD,6BACGY,eAAa;AAAA,IACZV;AAAAA,IACAC;AAAAA,IACAU,QAAQT;AAAAA,IACRC;AAAAA,IACAJ,WAAWS,~~GAAGT~~,~~WAAWF,~~QAAQe,~~IAAI~~;AAAA,~~IACrCf~~,SAAS;AAAA,MACPG,OAAOQ,GACLD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKC;AAAAA,MAAY,CAC1D,GACD;AAAA,QACE,CAAClB,QAAQmB,UAAU,GAAGd;AAAAA,QACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,MAAAA,CAEtB;AAAA,MACAD,WAAWO,GACTD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;AAAAA,QAC7CC,OAAOb,2CAAaS,KAAKK;AAAAA,MAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,MACAU,QAAQd,QAAQc;AAAAA,MAChBS,SAASvB,QAAQuB;AAAAA,IACnB;AAAA,IAAE,GACEhB;AAAAA,EAAAA,CACL;AAEL;"}
1	+ {"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n}: HvCardHeaderProps) => {\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.titleVariant],\n }),\n {\n [classes.titleShort]: icon,\n [classes.title]: !icon,\n }\n ),\n subheader: cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n color: activeTheme?.card.subheaderColor,\n }),\n classes.subheader\n ),\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","cx","useClasses","MuiCardHeader","action","root","typography","card","titleVariant","titleShort","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;AA6BO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAEnD,6BACGY,eAAa;AAAA,IACZV;AAAAA,IACAC;AAAAA,IACAU,QAAQT;AAAAA,IACRC;AAAAA,IACAJ,WAAWS,GAAGX,QAAQe,MAAMb,SAAS;AAAA,IACrCF,SAAS;AAAA,MACPG,OAAOQ,GACLD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKC;AAAAA,MAAY,CAC1D,GACD;AAAA,QACE,CAAClB,QAAQmB,UAAU,GAAGd;AAAAA,QACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,MAAAA,CAEtB;AAAA,MACAD,WAAWO,GACTD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;AAAAA,QAC7CC,OAAOb,2CAAaS,KAAKK;AAAAA,MAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,MACAU,QAAQd,QAAQc;AAAAA,MAChBS,SAASvB,QAAQuB;AAAAA,IACnB;AAAA,IAAE,GACEhB;AAAAA,EAAAA,CACL;AAEL;"}

package/dist/esm/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -100,7 +100,7 @@ const HvColorPicker = (props) => {
     name,
     disabled,
     required,
-    className: cx(className, classes.root),
+    className: cx(classes.root, className),
     children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
       className: classes.labelContainer,
       children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {