@hitachivantara/uikit-react-core 5.24.0 → 5.24.1

package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js

@@ -1,49 +1,27 @@
-import _styled from "@emotion/styled/base";
-import { Popper } from "@mui/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { HvSelectionList } from "../../SelectionList/SelectionList.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eqrftyh2"
-} : {
-  target: "eqrftyh2",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "bjn8wh",
-  styles: "position:relative",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IFBvcHBlciB9IGZyb20gXCJAbXVpL2Jhc2VcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9TZWxlY3Rpb25MaXN0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VsZWN0aW9uTGlzdCA9IHN0eWxlZChIdlNlbGVjdGlvbkxpc3QpKHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gIHdpZHRoOiBcIjEwMCVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wcGVyID0gc3R5bGVkKFBvcHBlcikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGUzZCgwLCAtMXB4LCAwKSAhaW1wb3J0YW50XCIsXG4gIHpJbmRleDogdGhlbWUuekluZGljZXMudG9vbHRpcCxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvSuggestions", {
+  root: {
+    position: "relative"
+  },
+  list: {
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: theme.colors.shadow,
+    padding: theme.space.xs,
+    width: "100%"
+  },
+  popper: {
+    width: "100%",
+    position: "absolute",
+    transform: "translate3d(0, -1px, 0) !important",
+    zIndex: theme.zIndices.tooltip
+  }
 });
-const StyledSelectionList = /* @__PURE__ */ _styled(HvSelectionList, process.env.NODE_ENV === "production" ? {
-  target: "eqrftyh1"
-} : {
-  target: "eqrftyh1",
-  label: "StyledSelectionList"
-})({
-  backgroundColor: theme.colors.atmo1,
-  boxShadow: theme.colors.shadow,
-  padding: theme.space.xs,
-  width: "100%"
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IFBvcHBlciB9IGZyb20gXCJAbXVpL2Jhc2VcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9TZWxlY3Rpb25MaXN0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VsZWN0aW9uTGlzdCA9IHN0eWxlZChIdlNlbGVjdGlvbkxpc3QpKHtcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgcGFkZGluZzogdGhlbWUuc3BhY2UueHMsXG4gIHdpZHRoOiBcIjEwMCVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wcGVyID0gc3R5bGVkKFBvcHBlcikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGUzZCgwLCAtMXB4LCAwKSAhaW1wb3J0YW50XCIsXG4gIHpJbmRleDogdGhlbWUuekluZGljZXMudG9vbHRpcCxcbn0pO1xuIl19 */");
-const StyledPopper = /* @__PURE__ */ _styled(Popper, process.env.NODE_ENV === "production" ? {
-  target: "eqrftyh0"
-} : {
-  target: "eqrftyh0",
-  label: "StyledPopper"
-})({
-  width: "100%",
-  position: "absolute",
-  transform: "translate3d(0, -1px, 0) !important",
-  zIndex: theme.zIndices.tooltip
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZTZWxlY3Rpb25MaXN0IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvU2VsZWN0aW9uTGlzdFwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */");
 export {
-  StyledPopper,
-  StyledRoot,
-  StyledSelectionList
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Suggestions.styles.js.map

package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { Popper } from \"@mui/base\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvSelectionList } from \"@core/components/SelectionList\";\n\nexport const StyledRoot = styled(\"div\")({\n  position: \"relative\",\n});\n\nexport const StyledSelectionList = styled(HvSelectionList)({\n  backgroundColor: theme.colors.atmo1,\n  boxShadow: theme.colors.shadow,\n  padding: theme.space.xs,\n  width: \"100%\",\n});\n\nexport const StyledPopper = styled(Popper)({\n  width: \"100%\",\n  position: \"absolute\",\n  transform: \"translate3d(0, -1px, 0) !important\",\n  zIndex: theme.zIndices.tooltip,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSelectionList","HvSelectionList","backgroundColor","theme","colors","atmo1","boxShadow","shadow","padding","space","xs","width","StyledPopper","Popper","position","transform","zIndex","zIndices","tooltip"],"mappings":";;;;;;;AAQO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEtC;AAEM,MAAMC,sBAA6BC,wBAAAA,iBAAeX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzDQ,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,WAAWH,MAAMC,OAAOG;AAAAA,EACxBC,SAASL,MAAMM,MAAMC;AAAAA,EACrBC,OAAO;AACT,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q3CAAA;AAEK,MAAMoB,eAAsBC,wBAAAA,QAAMvB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,OAAO;AAAA,EACPG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,QAAQb,MAAMc,SAASC;AACzB,GAAC5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,y3CAAA;"}
+{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSuggestions\", {\n  root: { position: \"relative\" },\n  list: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    padding: theme.space.xs,\n    width: \"100%\",\n  },\n  popper: {\n    width: \"100%\",\n    position: \"absolute\",\n    transform: \"translate3d(0, -1px, 0) !important\",\n    zIndex: theme.zIndices.tooltip,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","list","backgroundColor","theme","colors","atmo1","boxShadow","shadow","padding","space","xs","width","popper","transform","zIndex","zIndices","tooltip"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IAAEC,UAAU;AAAA,EAAW;AAAA,EAC7BC,MAAM;AAAA,IACJC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,WAAWH,MAAMC,OAAOG;AAAAA,IACxBC,SAASL,MAAMM,MAAMC;AAAAA,IACrBC,OAAO;AAAA,EACT;AAAA,EACAC,QAAQ;AAAA,IACND,OAAO;AAAA,IACPX,UAAU;AAAA,IACVa,WAAW;AAAA,IACXC,QAAQX,MAAMY,SAASC;AAAAA,EACzB;AACF,CAAC;"}

package/dist/esm/components/Forms/WarningText/WarningText.js

@@ -1,18 +1,19 @@
 import { useContext } from "react";
-import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
 import isNil from "lodash/isNil";
+import { Fail } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { setId } from "../../../utils/setId.js";
-import { StyledIcon, StyledRoot, StyledTypography } from "./WarningText.styles.js";
-import warningTextClasses from "./warningTextClasses.js";
+import { useClasses } from "./WarningText.styles.js";
+import { staticClasses } from "./WarningText.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
+import { HvTypography } from "../../Typography/Typography.js";
 const HvWarningText = (props) => {
   const {
     children,
     adornment,
     isVisible,
-    classes,
+    classes: classesProp,
     className,
     id,
     disabled,
@@ -22,6 +23,10 @@ const HvWarningText = (props) => {
     hideText = false,
     ...others
   } = useDefaultProps("HvWarningText", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     elementId,
     elementStatus,
@@ -32,19 +37,21 @@ const HvWarningText = (props) => {
   const localId = id ?? setId(elementId, "error");
   const showWarning = localVisible && !localDisabled;
   const content = showWarning ? children : "";
-  const localAdornment = adornment || /* @__PURE__ */ jsx(StyledIcon, {
-    className: clsx(warningTextClasses.defaultIcon, classes == null ? void 0 : classes.defaultIcon),
+  const localAdornment = adornment || /* @__PURE__ */ jsx(Fail, {
+    className: classes.defaultIcon,
     semantic: "negative"
   });
-  return /* @__PURE__ */ jsxs(StyledRoot, {
-    className: clsx(className, warningTextClasses.root, classes == null ? void 0 : classes.root, showWarning && clsx(warningTextClasses.show, classes == null ? void 0 : classes.show), !disableBorder && clsx(warningTextClasses.topBorder, classes == null ? void 0 : classes.topBorder)),
-    $show: showWarning,
-    $topBorder: !disableBorder,
-    children: [!disableAdornment && localAdornment, /* @__PURE__ */ jsx(StyledTypography, {
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.root, {
+      [classes.show]: showWarning,
+      [classes.topBorder]: !disableBorder
+    }, className),
+    children: [!disableAdornment && localAdornment, /* @__PURE__ */ jsx(HvTypography, {
       id: localId,
-      className: clsx(warningTextClasses.warningText, classes == null ? void 0 : classes.warningText, !disableGutter && clsx(warningTextClasses.topGutter, classes == null ? void 0 : classes.topGutter), hideText && clsx(warningTextClasses.hideText, classes == null ? void 0 : classes.hideText)),
-      $topGutter: !disableGutter,
-      $hideText: hideText,
+      className: cx(classes.warningText, {
+        [classes.topGutter]: !disableGutter,
+        [classes.hideText]: hideText
+      }),
       role: "status",
       "aria-relevant": "additions text",
       ...others,
@@ -53,6 +60,7 @@ const HvWarningText = (props) => {
   });
 };
 export {
-  HvWarningText
+  HvWarningText,
+  staticClasses as warningTextClasses
 };
 //# sourceMappingURL=WarningText.js.map

package/dist/esm/components/Forms/WarningText/WarningText.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { StyledRoot, StyledTypography, StyledIcon } from \"./WarningText.styles\";\nimport warningTextClasses, { HvWarningTextClasses } from \"./warningTextClasses\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <StyledIcon\n      className={clsx(warningTextClasses.defaultIcon, classes?.defaultIcon)}\n      semantic=\"negative\"\n    />\n  );\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        warningTextClasses.root,\n        classes?.root,\n        showWarning && clsx(warningTextClasses.show, classes?.show),\n        !disableBorder && clsx(warningTextClasses.topBorder, classes?.topBorder)\n      )}\n      $show={showWarning}\n      $topBorder={!disableBorder}\n    >\n      {!disableAdornment && localAdornment}\n      <StyledTypography\n        id={localId}\n        className={clsx(\n          warningTextClasses.warningText,\n          classes?.warningText,\n          !disableGutter &&\n            clsx(warningTextClasses.topGutter, classes?.topGutter),\n          hideText && clsx(warningTextClasses.hideText, classes?.hideText)\n        )}\n        $topGutter={!disableGutter}\n        $hideText={hideText}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </StyledTypography>\n    </StyledRoot>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","StyledIcon","clsx","warningTextClasses","defaultIcon","semantic","StyledRoot","root","show","topBorder","$show","$topBorder","StyledTypography","warningText","topGutter","$topGutter","$hideText","role"],"mappings":";;;;;;;;;AAoCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBb,KAAK;AAEpC,QAAA;AAAA,IAAEc;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBZ,YAAYS;AAClC,QAAMI,eAAe,CAACC,MAAMlB,SAAS,IACjCA,YACAY,kBAAkB;AACtB,QAAMO,UAAUhB,MAAMiB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAcvB,WAAW;AACnCyB,QAAAA,iBAAiBxB,aACrByB,oBAACC,YAAU;AAAA,IACTvB,WAAWwB,KAAKC,mBAAmBC,aAAa3B,mCAAS2B,WAAW;AAAA,IACpEC,UAAS;AAAA,EAAA,CACV;AAGH,8BACGC,YAAU;AAAA,IACT5B,WAAWwB,KACTxB,WACAyB,mBAAmBI,MACnB9B,mCAAS8B,MACTV,eAAeK,KAAKC,mBAAmBK,MAAM/B,mCAAS+B,IAAI,GAC1D,CAAC1B,iBAAiBoB,KAAKC,mBAAmBM,WAAWhC,mCAASgC,SAAS,CACzE;AAAA,IACAC,OAAOb;AAAAA,IACPc,YAAY,CAAC7B;AAAAA,IAAcR,UAAA,CAE1B,CAACS,oBAAoBgB,oCACrBa,kBAAgB;AAAA,MACfjC,IAAIgB;AAAAA,MACJjB,WAAWwB,KACTC,mBAAmBU,aACnBpC,mCAASoC,aACT,CAAChC,iBACCqB,KAAKC,mBAAmBW,WAAWrC,mCAASqC,SAAS,GACvD9B,YAAYkB,KAAKC,mBAAmBnB,UAAUP,mCAASO,QAAQ,CACjE;AAAA,MACA+B,YAAY,CAAClC;AAAAA,MACbmC,WAAWhC;AAAAA,MACXiC,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1BhC;AAAAA,MAAMX,UAETuB,eAAeC;AAAAA,IAAAA,CACA,CAAC;AAAA,EAAA,CACT;AAEhB;"}
+{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail className={classes.defaultIcon} semantic=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,MAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,oBAACC,MAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,8BACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,oCACrBQ,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;"}

package/dist/esm/components/Forms/WarningText/WarningText.styles.js

@@ -1,60 +1,29 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { Fail } from "@hitachivantara/uikit-react-icons";
-import { transientOptions } from "../../../utils/transientOptions.js";
-import { HvTypography } from "../../Typography/Typography.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvWarningText", {
+  root: {
+    display: "none"
+  },
+  defaultIcon: {
+    minWidth: "32px"
+  },
+  warningText: {
+    color: theme.colors.negative,
+    paddingRight: theme.space.xs,
+    "&:first-of-type": {
+      paddingLeft: theme.space.xs
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1jkc0dp2"
-}, transientOptions) : _extends({}, {
-  target: "e1jkc0dp2",
-  label: "StyledRoot"
-}, transientOptions))(({
-  $show,
-  $topBorder
-}) => ({
-  display: "none",
-  ...$show && {
-    display: "flex"
   },
-  ...$topBorder && {
-    borderTop: `solid 1px ${theme.colors.negative}`
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHQvV2FybmluZ1RleHQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9XYXJuaW5nVGV4dC9XYXJuaW5nVGV4dC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEZhaWwgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWljb25zXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc2hvdywgJHRvcEJvcmRlciB9OiB7ICRzaG93OiBib29sZWFuOyAkdG9wQm9yZGVyOiBib29sZWFuIH0pID0+ICh7XG4gIGRpc3BsYXk6IFwibm9uZVwiLFxuICAuLi4oJHNob3cgJiYge1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICB9KSxcbiAgLi4uKCR0b3BCb3JkZXIgJiYge1xuICAgIGJvcmRlclRvcDogYHNvbGlkIDFweCAke3RoZW1lLmNvbG9ycy5uZWdhdGl2ZX1gLFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFR5cG9ncmFwaHkgPSBzdHlsZWQoXG4gIEh2VHlwb2dyYXBoeSxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkdG9wR3V0dGVyLCAkaGlkZVRleHQgfTogeyAkdG9wR3V0dGVyOiBib29sZWFuOyAkaGlkZVRleHQ6IGJvb2xlYW4gfSkgPT4gKHtcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgXCImOmZpcnN0LW9mLXR5cGVcIjoge1xuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbiAgLi4uKCR0b3BHdXR0ZXIgJiYge1xuICAgIHBhZGRpbmdUb3A6IDYsXG4gIH0pLFxuICAuLi4oJGhpZGVUZXh0ICYmIHtcbiAgICAvLyBkaXNwbGF5IG5vbmUgb3IgdmlzaWJpbGl0eSBoaWRkZW4gcHJldmVudHNcbiAgICAvLyBicm93c2VyIHRvIHRyaWdnZXIgdGhlIGFyaWEtYWxlcnRcbiAgICB3aWR0aDogMCxcbiAgICBoZWlnaHQ6IDAsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZChGYWlsKSh7XG4gIG1pbldpZHRoOiBcIjMycHhcIixcbn0pO1xuIl19 */");
-const StyledTypography = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1jkc0dp1"
-}, transientOptions) : _extends({}, {
-  target: "e1jkc0dp1",
-  label: "StyledTypography"
-}, transientOptions))(({
-  $topGutter,
-  $hideText
-}) => ({
-  color: theme.colors.negative,
-  paddingRight: theme.space.xs,
-  "&:first-of-type": {
-    paddingLeft: theme.space.xs
+  show: {
+    display: "flex"
   },
-  ...$topGutter && {
+  topGutter: {
     paddingTop: 6
   },
-  ...$hideText && {
+  hideText: {
     // display none or visibility hidden prevents
     // browser to trigger the aria-alert
     width: 0,
@@ -62,25 +31,13 @@ const StyledTypography = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_
     padding: 0,
     margin: 0,
     overflow: "hidden"
+  },
+  topBorder: {
+    borderTop: `solid 1px ${theme.colors.negative}`
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHQvV2FybmluZ1RleHQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQmdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHQvV2FybmluZ1RleHQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBGYWlsIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNob3csICR0b3BCb3JkZXIgfTogeyAkc2hvdzogYm9vbGVhbjsgJHRvcEJvcmRlcjogYm9vbGVhbiB9KSA9PiAoe1xuICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgLi4uKCRzaG93ICYmIHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgfSksXG4gIC4uLigkdG9wQm9yZGVyICYmIHtcbiAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHRvcEd1dHRlciwgJGhpZGVUZXh0IH06IHsgJHRvcEd1dHRlcjogYm9vbGVhbjsgJGhpZGVUZXh0OiBib29sZWFuIH0pID0+ICh7XG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG4gIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIFwiJjpmaXJzdC1vZi10eXBlXCI6IHtcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG4gIC4uLigkdG9wR3V0dGVyICYmIHtcbiAgICBwYWRkaW5nVG9wOiA2LFxuICB9KSxcbiAgLi4uKCRoaWRlVGV4dCAmJiB7XG4gICAgLy8gZGlzcGxheSBub25lIG9yIHZpc2liaWxpdHkgaGlkZGVuIHByZXZlbnRzXG4gICAgLy8gYnJvd3NlciB0byB0cmlnZ2VyIHRoZSBhcmlhLWFsZXJ0XG4gICAgd2lkdGg6IDAsXG4gICAgaGVpZ2h0OiAwLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgbWFyZ2luOiAwLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoRmFpbCkoe1xuICBtaW5XaWR0aDogXCIzMnB4XCIsXG59KTtcbiJdfQ== */");
-const StyledIcon = /* @__PURE__ */ _styled(Fail, process.env.NODE_ENV === "production" ? {
-  target: "e1jkc0dp0"
-} : {
-  target: "e1jkc0dp0",
-  label: "StyledIcon"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9q39xd",
-  styles: "min-width:32px"
-} : {
-  name: "9q39xd",
-  styles: "min-width:32px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHQvV2FybmluZ1RleHQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QzBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvV2FybmluZ1RleHQvV2FybmluZ1RleHQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBGYWlsIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNob3csICR0b3BCb3JkZXIgfTogeyAkc2hvdzogYm9vbGVhbjsgJHRvcEJvcmRlcjogYm9vbGVhbiB9KSA9PiAoe1xuICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgLi4uKCRzaG93ICYmIHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgfSksXG4gIC4uLigkdG9wQm9yZGVyICYmIHtcbiAgICBib3JkZXJUb3A6IGBzb2xpZCAxcHggJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHRvcEd1dHRlciwgJGhpZGVUZXh0IH06IHsgJHRvcEd1dHRlcjogYm9vbGVhbjsgJGhpZGVUZXh0OiBib29sZWFuIH0pID0+ICh7XG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG4gIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2UueHMsXG4gIFwiJjpmaXJzdC1vZi10eXBlXCI6IHtcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG4gIC4uLigkdG9wR3V0dGVyICYmIHtcbiAgICBwYWRkaW5nVG9wOiA2LFxuICB9KSxcbiAgLi4uKCRoaWRlVGV4dCAmJiB7XG4gICAgLy8gZGlzcGxheSBub25lIG9yIHZpc2liaWxpdHkgaGlkZGVuIHByZXZlbnRzXG4gICAgLy8gYnJvd3NlciB0byB0cmlnZ2VyIHRoZSBhcmlhLWFsZXJ0XG4gICAgd2lkdGg6IDAsXG4gICAgaGVpZ2h0OiAwLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgbWFyZ2luOiAwLFxuICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoRmFpbCkoe1xuICBtaW5XaWR0aDogXCIzMnB4XCIsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export {
-  StyledIcon,
-  StyledRoot,
-  StyledTypography
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=WarningText.styles.js.map

package/dist/esm/components/Forms/WarningText/WarningText.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.styles.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(({ $show, $topBorder }: { $show: boolean; $topBorder: boolean }) => ({\n  display: \"none\",\n  ...($show && {\n    display: \"flex\",\n  }),\n  ...($topBorder && {\n    borderTop: `solid 1px ${theme.colors.negative}`,\n  }),\n}));\n\nexport const StyledTypography = styled(\n  HvTypography,\n  transientOptions\n)(({ $topGutter, $hideText }: { $topGutter: boolean; $hideText: boolean }) => ({\n  color: theme.colors.negative,\n  paddingRight: theme.space.xs,\n  \"&:first-of-type\": {\n    paddingLeft: theme.space.xs,\n  },\n  ...($topGutter && {\n    paddingTop: 6,\n  }),\n  ...($hideText && {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  }),\n}));\n\nexport const StyledIcon = styled(Fail)({\n  minWidth: \"32px\",\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$show","$topBorder","display","borderTop","theme","colors","negative","StyledTypography","HvTypography","$topGutter","$hideText","color","paddingRight","space","xs","paddingLeft","paddingTop","width","height","padding","margin","overflow","StyledIcon","Fail","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQaA,MAAAA,qCACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAAA,EAAOC;AAAoD,OAAO;AAAA,EACrEC,SAAS;AAAA,EACT,GAAIF,SAAS;AAAA,IACXE,SAAS;AAAA,EACX;AAAA,EACA,GAAID,cAAc;AAAA,IAChBE,WAAY,aAAYC,MAAMC,OAAOC;AAAAA,EACvC;AACF,IAAEb,QAAAC,IAAAC,aAAC,eAAA,KAAA,imEAAA;AAEUY,MAAAA,2CACXC,cAAYf,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEW;AAAAA,EAAYC;AAAuD,OAAO;AAAA,EAC7EC,OAAOP,MAAMC,OAAOC;AAAAA,EACpBM,cAAcR,MAAMS,MAAMC;AAAAA,EAC1B,mBAAmB;AAAA,IACjBC,aAAaX,MAAMS,MAAMC;AAAAA,EAC3B;AAAA,EACA,GAAIL,cAAc;AAAA,IAChBO,YAAY;AAAA,EACd;AAAA,EACA,GAAIN,aAAa;AAAA;AAAA;AAAA,IAGfO,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,EACZ;AACF,IAAE5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,qmEAAA;AAEI,MAAM2B,aAAoBC,wBAAAA,MAAI9B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAA6B,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAErC;"}
+{"version":3,"file":"WarningText.styles.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: { display: \"none\" },\n  defaultIcon: { minWidth: \"32px\" },\n  warningText: {\n    color: theme.colors.negative,\n    paddingRight: theme.space.xs,\n    \"&:first-of-type\": {\n      paddingLeft: theme.space.xs,\n    },\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: 6 },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: `solid 1px ${theme.colors.negative}` },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","defaultIcon","minWidth","warningText","color","theme","colors","negative","paddingRight","space","xs","paddingLeft","show","topGutter","paddingTop","hideText","width","height","padding","margin","overflow","topBorder","borderTop"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAO;AAAA,EACxBC,aAAa;AAAA,IAAEC,UAAU;AAAA,EAAO;AAAA,EAChCC,aAAa;AAAA,IACXC,OAAOC,MAAMC,OAAOC;AAAAA,IACpBC,cAAcH,MAAMI,MAAMC;AAAAA,IAC1B,mBAAmB;AAAA,MACjBC,aAAaN,MAAMI,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAE,MAAM;AAAA,IAAEZ,SAAS;AAAA,EAAO;AAAA,EACxBa,WAAW;AAAA,IAAEC,YAAY;AAAA,EAAE;AAAA,EAC3BC,UAAU;AAAA;AAAA;AAAA,IAGRC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,UAAU;AAAA,EACZ;AAAA,EACAC,WAAW;AAAA,IAAEC,WAAY,aAAYjB,MAAMC,OAAOC;AAAAA,EAAW;AAC/D,CAAC;"}

package/dist/esm/components/Header/Actions/Actions.js

@@ -1,22 +1,26 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { StyledDiv } from "./Actions.styles.js";
-import headerActionsClasses from "./actionsClasses.js";
+import { useClasses } from "./Actions.styles.js";
+import { staticClasses } from "./Actions.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvHeaderActions = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     children,
     ...others
   } = useDefaultProps("HvHeaderActions", props);
-  return /* @__PURE__ */ jsx(StyledDiv, {
-    className: clsx(className, headerActionsClasses.root, classes == null ? void 0 : classes.root),
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.root, className),
     ...others,
     children
   });
 };
 export {
-  HvHeaderActions
+  HvHeaderActions,
+  staticClasses as headerActionsClasses
 };
 //# sourceMappingURL=Actions.js.map

package/dist/esm/components/Header/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledDiv } from \"./Actions.styles\";\nimport headerActionsClasses, { HvHeaderActionsClasses } from \"./actionsClasses\";\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = (props: HvHeaderActionsProps) => {\n  const { classes, className, children, ...others } = useDefaultProps(\n    \"HvHeaderActions\",\n    props\n  );\n\n  return (\n    <StyledDiv\n      className={clsx(className, headerActionsClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvHeaderActions","props","classes","className","children","others","useDefaultProps","StyledDiv","clsx","headerActionsClasses","root"],"mappings":";;;;;AAYaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAWC;AAAAA,IAAU,GAAGC;AAAAA,EAAAA,IAAWC,gBAClD,mBACAL,KACF;AAEA,6BACGM,WAAS;AAAA,IACRJ,WAAWK,KAAKL,WAAWM,qBAAqBC,MAAMR,mCAASQ,IAAI;AAAA,IAAE,GACjEL;AAAAA,IAAMD;AAAAA,EAAAA,CAGD;AAEf;"}
+{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = (props: HvHeaderActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvHeaderActions\", props);\n\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":["HvHeaderActions","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","root"],"mappings":";;;;AAcaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBN,KAAK;AAEtC,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/Header/Actions/Actions.styles.js

@@ -1,29 +1,27 @@
 var _a;
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses } from "../../Button/Button.styles.js";
+import { createClasses } from "../../../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../../Button/Button.styles.js";
 import "../../Button/Button.js";
-const StyledDiv = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yl6wvv0"
-} : {
-  target: "e1yl6wvv0",
-  label: "StyledDiv"
-})({
-  backgroundColor: "transparent",
-  display: "flex",
-  gap: theme.space.xs,
-  alignItems: "center",
-  marginLeft: "auto",
-  "& > *": {
-    marginLeft: theme.space.xs
-  },
-  [`& .${(_a = staticClasses) == null ? void 0 : _a.root}`]: {
-    "&:hover": {
-      backgroundColor: theme.header.hoverColor
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvHeader-Actions", {
+  root: {
+    backgroundColor: "transparent",
+    display: "flex",
+    gap: theme.space.xs,
+    alignItems: "center",
+    marginLeft: "auto",
+    [`& .${(_a = staticClasses$1) == null ? void 0 : _a.root}`]: {
+      "&:hover": {
+        backgroundColor: theme.header.hoverColor
+      }
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0FjdGlvbnMvQWN0aW9ucy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU15QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0hlYWRlci9BY3Rpb25zL0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IGJ1dHRvbkNsYXNzZXMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9CdXR0b25cIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZERpdiA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGdhcDogdGhlbWUuc3BhY2UueHMsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIG1hcmdpbkxlZnQ6IFwiYXV0b1wiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBtYXJnaW5MZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgfSxcbiAgW2AmIC4ke2J1dHRvbkNsYXNzZXM/LnJvb3R9YF06IHtcbiAgICBcIiY6aG92ZXJcIjogeyBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmhlYWRlci5ob3ZlckNvbG9yIH0sXG4gIH0sXG59KTtcbiJdfQ== */");
+});
 export {
-  StyledDiv
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Actions.styles.js.map

package/dist/esm/components/Header/Actions/Actions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"@core/components/Button\";\n\nexport const StyledDiv = styled.div({\n  backgroundColor: \"transparent\",\n  display: \"flex\",\n  gap: theme.space.xs,\n  alignItems: \"center\",\n  marginLeft: \"auto\",\n  \"& > *\": {\n    marginLeft: theme.space.xs,\n  },\n  [`& .${buttonClasses?.root}`]: {\n    \"&:hover\": { backgroundColor: theme.header.hoverColor },\n  },\n});\n"],"names":["StyledDiv","process","env","NODE_ENV","target","label","backgroundColor","display","gap","theme","space","xs","alignItems","marginLeft","buttonClasses","root","header","hoverColor"],"mappings":";;;;;AAMO,MAAMA,2CAAYC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAW,EAAA;AAAA,EAClCC,iBAAiB;AAAA,EACjBC,SAAS;AAAA,EACTC,KAAKC,MAAMC,MAAMC;AAAAA,EACjBC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZ,SAAS;AAAA,IACPA,YAAYJ,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EACA,CAAE,OAAKG,0CAAeC,MAAM,GAAG;AAAA,IAC7B,WAAW;AAAA,MAAET,iBAAiBG,MAAMO,OAAOC;AAAAA,IAAW;AAAA,EACxD;AACF,GAAChB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qoCAAA;"}
+{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"@core/components/Button\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n  root: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    gap: theme.space.xs,\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    [`& .${buttonClasses?.root}`]: {\n      \"&:hover\": { backgroundColor: theme.header.hoverColor },\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundColor","display","gap","theme","space","xs","alignItems","marginLeft","buttonClasses","header","hoverColor"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,iBAAiB;AAAA,IACjBC,SAAS;AAAA,IACTC,KAAKC,MAAMC,MAAMC;AAAAA,IACjBC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZ,CAAE,OAAKC,4CAAeT,MAAM,GAAG;AAAA,MAC7B,WAAW;AAAA,QAAEC,iBAAiBG,MAAMM,OAAOC;AAAAA,MAAW;AAAA,IACxD;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Header/Brand/Brand.js

@@ -1,28 +1,38 @@
-import { clsx } from "clsx";
+import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { BrandRoot, BrandSeparator, BrandName } from "./Brand.styles.js";
-import headerBrandClasses from "./brandClasses.js";
+import { useClasses } from "./Brand.styles.js";
+import { staticClasses } from "./Brand.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
 const HvHeaderBrand = (props) => {
   const {
-    classes,
+    classes: classesProp,
     logo,
     name,
     className,
     ...others
   } = useDefaultProps("HvHeaderBrand", props);
-  return /* @__PURE__ */ jsxs(BrandRoot, {
-    className: clsx(classes == null ? void 0 : classes.root, headerBrandClasses.root, className),
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(classes.root, className),
     ...others,
-    children: [logo, logo && name && /* @__PURE__ */ jsx(BrandSeparator, {
-      className: clsx(classes == null ? void 0 : classes.separator, headerBrandClasses.separator)
-    }), name && /* @__PURE__ */ jsx(BrandName, {
+    children: [logo, logo && name && /* @__PURE__ */ jsx("div", {
+      className: classes.separator
+    }), name && /* @__PURE__ */ jsx(HvTypography, {
+      className: css({
+        color: theme.header.brandColor
+      }),
       variant: "label",
       children: name
     })]
   });
 };
 export {
-  HvHeaderBrand
+  HvHeaderBrand,
+  staticClasses as headerBrandClasses
 };
 //# sourceMappingURL=Brand.js.map

package/dist/esm/components/Header/Brand/Brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { BrandRoot, BrandSeparator, BrandName } from \"./Brand.styles\";\nimport headerBrandClasses, { HvHeaderBrandClasses } from \"./brandClasses\";\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const { classes, logo, name, className, ...others } = useDefaultProps(\n    \"HvHeaderBrand\",\n    props\n  );\n\n  return (\n    <BrandRoot\n      className={clsx(classes?.root, headerBrandClasses.root, className)}\n      {...others}\n    >\n      {logo}\n      {logo && name && (\n        <BrandSeparator\n          className={clsx(classes?.separator, headerBrandClasses.separator)}\n        />\n      )}\n      {name && <BrandName variant=\"label\">{name}</BrandName>}\n    </BrandRoot>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","logo","name","className","others","useDefaultProps","BrandRoot","clsx","root","headerBrandClasses","children","BrandSeparator","separator","_jsx","BrandName","variant"],"mappings":";;;;;AAiBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAMC;AAAAA,IAAMC;AAAAA,IAAW,GAAGC;AAAAA,EAAAA,IAAWC,gBACpD,iBACAN,KACF;AAEA,8BACGO,WAAS;AAAA,IACRH,WAAWI,KAAKP,mCAASQ,MAAMC,mBAAmBD,MAAML,SAAS;AAAA,IAAE,GAC/DC;AAAAA,IAAMM,UAAA,CAETT,MACAA,QAAQC,4BACNS,gBAAc;AAAA,MACbR,WAAWI,KAAKP,mCAASY,WAAWH,mBAAmBG,SAAS;AAAA,IAAA,CACjE,GAEFV,QAAQW,oBAACC,WAAS;AAAA,MAACC,SAAQ;AAAA,MAAOL,UAAER;AAAAA,IAAAA,CAAgB,CAAC;AAAA,EAAA,CAC7C;AAEf;"}
+{"version":3,"file":"Brand.js","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography\n          className={css({ color: theme.header.brandColor })}\n          variant=\"label\"\n        >\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","css","useClasses","root","children","separator","_jsx","HvTypography","color","theme","header","brandColor","variant"],"mappings":";;;;;;AAsBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,8BACE,OAAA;AAAA,IAAKG,WAAWG,GAAGP,QAAQU,MAAMN,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMM,WACpDT,MACAA,QAAQC,4BAAQ,OAAA;AAAA,MAAKC,WAAWJ,QAAQY;AAAAA,IAAAA,CAAY,GACpDT,QACCU,oBAACC,cAAY;AAAA,MACXV,WAAWI,IAAI;AAAA,QAAEO,OAAOC,MAAMC,OAAOC;AAAAA,MAAAA,CAAY;AAAA,MACjDC,SAAQ;AAAA,MAAOR,UAEdR;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;"}

package/dist/esm/components/Header/Brand/Brand.styles.js

@@ -1,52 +1,22 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { forwardRef } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvTypography } from "../../Typography/Typography.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const BrandRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk2"
-} : {
-  target: "e1mg4lzk2",
-  label: "BrandRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center"
-} : {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IEJyYW5kUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFNlcGFyYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IHRoZW1lLnNwYWNlLnNtLFxuICBtYXJnaW46IHRoZW1lLnNwYWNlLnhzLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG59KTtcblxuZXhwb3J0IGNvbnN0IEJyYW5kTmFtZSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgY29sb3I6IHRoZW1lLmhlYWRlci5icmFuZENvbG9yLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvHeader-Brand", {
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  separator: {
+    width: 1,
+    height: theme.space.sm,
+    margin: theme.space.xs,
+    backgroundColor: theme.colors.secondary
+  }
 });
-const BrandSeparator = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk1"
-} : {
-  target: "e1mg4lzk1",
-  label: "BrandSeparator"
-})({
-  width: 1,
-  height: theme.space.sm,
-  margin: theme.space.xs,
-  backgroundColor: theme.colors.secondary
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYThCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5LCBIdlR5cG9ncmFwaHlQcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGNvbnN0IEJyYW5kUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFNlcGFyYXRvciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IHRoZW1lLnNwYWNlLnNtLFxuICBtYXJnaW46IHRoZW1lLnNwYWNlLnhzLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG59KTtcblxuZXhwb3J0IGNvbnN0IEJyYW5kTmFtZSA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2VHlwb2dyYXBoeVByb3BzLCByZWY/OiBSZWY8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgcmV0dXJuIDxIdlR5cG9ncmFwaHkgey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgY29sb3I6IHRoZW1lLmhlYWRlci5icmFuZENvbG9yLFxufSk7XG4iXX0= */");
-const BrandName = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(HvTypography, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1mg4lzk0"
-} : {
-  target: "e1mg4lzk0",
-  label: "BrandName"
-})({
-  color: theme.header.brandColor
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvSGVhZGVyL0JyYW5kL0JyYW5kLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0hlYWRlci9CcmFuZC9CcmFuZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgZm9yd2FyZFJlZiwgUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSwgSHZUeXBvZ3JhcGh5UHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5cbmV4cG9ydCBjb25zdCBCcmFuZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgQnJhbmRTZXBhcmF0b3IgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogMSxcbiAgaGVpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgbWFyZ2luOiB0aGVtZS5zcGFjZS54cyxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5LFxufSk7XG5cbmV4cG9ydCBjb25zdCBCcmFuZE5hbWUgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdlR5cG9ncmFwaHlQcm9wcywgcmVmPzogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZUeXBvZ3JhcGh5IHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIGNvbG9yOiB0aGVtZS5oZWFkZXIuYnJhbmRDb2xvcixcbn0pO1xuIl19 */");
 export {
-  BrandName,
-  BrandRoot,
-  BrandSeparator
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Brand.styles.js.map