@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

package/dist/cjs/components/Forms/Adornment/Adornment.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
 const Adornment_styles = require("./Adornment.styles.cjs");
-const adornmentClasses = require("./adornmentClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FormElementDescriptorsContext = require("../FormElement/context/FormElementDescriptorsContext.cjs");
 const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
@@ -11,7 +9,7 @@ const noop = () => {
 };
 const HvAdornment = React.forwardRef(({
   id,
-  classes,
+  classes: classesProp,
   className,
   icon,
   showWhen = void 0,
@@ -20,6 +18,10 @@ const HvAdornment = React.forwardRef(({
   ...others
 }, ref) => {
   var _a;
+  const {
+    classes,
+    cx
+  } = Adornment_styles.useClasses(classesProp);
   const {
     elementStatus = ""
   } = React.useContext(FormElementContext.HvFormElementContext);
@@ -28,34 +30,37 @@ const HvAdornment = React.forwardRef(({
   } = React.useContext(FormElementDescriptorsContext.HvFormElementDescriptorsContext);
   const displayIcon = isVisible ?? (showWhen === void 0 || elementStatus === showWhen);
   const isClickable = !!onClick;
-  return isClickable ? /* @__PURE__ */ jsxRuntime.jsx(Adornment_styles.StyledButton, {
+  return isClickable ? /* @__PURE__ */ jsxRuntime.jsx("button", {
     id,
     ref,
     type: "button",
     tabIndex: -1,
     "aria-controls": (_a = input == null ? void 0 : input[0]) == null ? void 0 : _a.id,
-    className: clsx.clsx(className, adornmentClasses.default.root, classes == null ? void 0 : classes.root, adornmentClasses.default.adornment, classes == null ? void 0 : classes.adornment, adornmentClasses.default.adornmentButton, classes == null ? void 0 : classes.adornmentButton, !displayIcon && clsx.clsx(adornmentClasses.default.hideIcon, classes == null ? void 0 : classes.hideIcon)),
+    className: cx(classes.root, classes.adornment, classes.adornmentButton, {
+      [classes.hideIcon]: !displayIcon
+    }, className),
     onClick,
     onMouseDown: (event) => event.preventDefault(),
     onKeyDown: noop,
-    $hideIcon: !displayIcon,
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Adornment_styles.StyledIcon, {
-      className: clsx.clsx(adornmentClasses.default.icon, classes == null ? void 0 : classes.icon),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.icon,
       children: icon
     })
-  }) : /* @__PURE__ */ jsxRuntime.jsx(Adornment_styles.StyledRoot, {
+  }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
     id,
     ref,
-    className: clsx.clsx(className, adornmentClasses.default.root, classes == null ? void 0 : classes.root, adornmentClasses.default.adornment, classes == null ? void 0 : classes.adornment, adornmentClasses.default.adornmentIcon, classes == null ? void 0 : classes.adornmentIcon, !displayIcon && clsx.clsx(adornmentClasses.default.hideIcon, classes == null ? void 0 : classes.hideIcon)),
-    $hideIcon: !displayIcon,
+    className: cx(classes.root, classes.adornment, classes.adornmentIcon, {
+      [classes.hideIcon]: !displayIcon
+    }, className),
     role: "presentation",
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Adornment_styles.StyledIcon, {
-      className: clsx.clsx(adornmentClasses.default.icon, classes == null ? void 0 : classes.icon),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.icon,
       children: icon
     })
   });
 });
+exports.adornmentClasses = Adornment_styles.staticClasses;
 exports.HvAdornment = HvAdornment;
 //# sourceMappingURL=Adornment.cjs.map

package/dist/cjs/components/Forms/Adornment/Adornment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Adornment.cjs","sources":["../../../../../src/components/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { useContext, forwardRef, MouseEventHandler, ForwardedRef } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledRoot, StyledIcon, StyledButton } from \"./Adornment.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormStatus,\n} from \"../FormElement\";\nimport adornmentClasses, { HvAdornmentClasses } from \"./adornmentClasses\";\n\nconst noop = () => {};\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(\n  (\n    {\n      id,\n      classes,\n      className,\n      icon,\n      showWhen = undefined,\n      onClick,\n      isVisible = undefined,\n      ...others\n    },\n    ref\n  ) => {\n    const { elementStatus = \"\" } = useContext(HvFormElementContext);\n\n    const { input } = useContext(HvFormElementDescriptorsContext);\n\n    const displayIcon =\n      isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n    const isClickable = !!onClick;\n\n    return isClickable ? (\n      <StyledButton\n        id={id}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        type=\"button\"\n        tabIndex={-1}\n        aria-controls={input?.[0]?.id}\n        className={clsx(\n          className,\n          adornmentClasses.root,\n          classes?.root,\n          adornmentClasses.adornment,\n          classes?.adornment,\n          adornmentClasses.adornmentButton,\n          classes?.adornmentButton,\n          !displayIcon && clsx(adornmentClasses.hideIcon, classes?.hideIcon)\n        )}\n        onClick={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        onKeyDown={noop}\n        $hideIcon={!displayIcon}\n        {...others}\n      >\n        <StyledIcon className={clsx(adornmentClasses.icon, classes?.icon)}>\n          {icon}\n        </StyledIcon>\n      </StyledButton>\n    ) : (\n      <StyledRoot\n        id={id}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        className={clsx(\n          className,\n          adornmentClasses.root,\n          classes?.root,\n          adornmentClasses.adornment,\n          classes?.adornment,\n          adornmentClasses.adornmentIcon,\n          classes?.adornmentIcon,\n          !displayIcon && clsx(adornmentClasses.hideIcon, classes?.hideIcon)\n        )}\n        $hideIcon={!displayIcon}\n        role=\"presentation\"\n        {...others}\n      >\n        <StyledIcon className={clsx(adornmentClasses.icon, classes?.icon)}>\n          {icon}\n        </StyledIcon>\n      </StyledRoot>\n    );\n  }\n);\n"],"names":["noop","HvAdornment","forwardRef","id","classes","className","icon","showWhen","undefined","onClick","isVisible","others","ref","elementStatus","useContext","HvFormElementContext","input","HvFormElementDescriptorsContext","displayIcon","isClickable","StyledButton","type","tabIndex","clsx","adornmentClasses","root","adornment","adornmentButton","hideIcon","onMouseDown","event","preventDefault","onKeyDown","$hideIcon","children","StyledIcon","_jsx","StyledRoot","adornmentIcon","role"],"mappings":";;;;;;;;;AAcA,MAAMA,OAAOA,MAAM;AAAC;AA8BPC,MAAAA,cAAcC,iBAIzB,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAWC;AAAAA,EACXC;AAAAA,EACAC,YAAYF;AAAAA,EACZ,GAAGG;AACL,GACAC,QACG;;AACG,QAAA;AAAA,IAAEC,gBAAgB;AAAA,EAAA,IAAOC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAExD,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAUF,MAAAA,WAAWG,8BAAAA,+BAA+B;AAE5D,QAAMC,cACJR,cAAcH,aAAaC,UAAaK,kBAAkBN;AAEtDY,QAAAA,cAAc,CAAC,CAACV;AAEfU,SAAAA,6CACJC,+BAAY;AAAA,IACXjB;AAAAA,IACAS;AAAAA,IACAS,MAAK;AAAA,IACLC,UAAU;AAAA,IACV,kBAAeN,oCAAQ,OAARA,mBAAYb;AAAAA,IAC3BE,WAAWkB,KAAAA,KACTlB,WACAmB,yBAAiBC,MACjBrB,mCAASqB,MACTD,iBAAAA,QAAiBE,WACjBtB,mCAASsB,WACTF,yBAAiBG,iBACjBvB,mCAASuB,iBACT,CAACT,eAAeK,UAAKC,iBAAAA,QAAiBI,UAAUxB,mCAASwB,QAAQ,CACnE;AAAA,IACAnB;AAAAA,IACAoB,aAAcC,CAAUA,UAAAA,MAAMC,eAAe;AAAA,IAC7CC,WAAWhC;AAAAA,IACXiC,WAAW,CAACf;AAAAA,IAAY,GACpBP;AAAAA,IAAMuB,yCAETC,6BAAU;AAAA,MAAC9B,WAAWkB,KAAAA,KAAKC,iBAAAA,QAAiBlB,MAAMF,mCAASE,IAAI;AAAA,MAAE4B,UAC/D5B;AAAAA,IAAAA,CACS;AAAA,EAAA,CACA,IAEd8B,2BAAAA,IAACC,6BAAU;AAAA,IACTlC;AAAAA,IACAS;AAAAA,IACAP,WAAWkB,KAAAA,KACTlB,WACAmB,yBAAiBC,MACjBrB,mCAASqB,MACTD,iBAAAA,QAAiBE,WACjBtB,mCAASsB,WACTF,yBAAiBc,eACjBlC,mCAASkC,eACT,CAACpB,eAAeK,UAAKC,iBAAAA,QAAiBI,UAAUxB,mCAASwB,QAAQ,CACnE;AAAA,IACAK,WAAW,CAACf;AAAAA,IACZqB,MAAK;AAAA,IAAc,GACf5B;AAAAA,IAAMuB,yCAETC,6BAAU;AAAA,MAAC9B,WAAWkB,KAAAA,KAAKC,iBAAAA,QAAiBlB,MAAMF,mCAASE,IAAI;AAAA,MAAE4B,UAC/D5B;AAAAA,IAAAA,CACS;AAAA,EAAA,CACF;AAEhB,CACF;;"}
+{"version":3,"file":"Adornment.cjs","sources":["../../../../../src/components/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { useContext, forwardRef, MouseEventHandler, ForwardedRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormStatus,\n} from \"../FormElement\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(\n  (\n    {\n      id,\n      classes: classesProp,\n      className,\n      icon,\n      showWhen = undefined,\n      onClick,\n      isVisible = undefined,\n      ...others\n    },\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const { elementStatus = \"\" } = useContext(HvFormElementContext);\n\n    const { input } = useContext(HvFormElementDescriptorsContext);\n\n    const displayIcon =\n      isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n    const isClickable = !!onClick;\n\n    return isClickable ? (\n      <button\n        id={id}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        type=\"button\"\n        tabIndex={-1}\n        aria-controls={input?.[0]?.id}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentButton,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        onClick={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        onKeyDown={noop}\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </button>\n    ) : (\n      <div\n        id={id}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentIcon,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        role=\"presentation\"\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </div>\n    );\n  }\n);\n"],"names":["noop","HvAdornment","forwardRef","id","classes","classesProp","className","icon","showWhen","undefined","onClick","isVisible","others","ref","cx","useClasses","elementStatus","useContext","HvFormElementContext","input","HvFormElementDescriptorsContext","displayIcon","isClickable","type","tabIndex","root","adornment","adornmentButton","hideIcon","onMouseDown","event","preventDefault","onKeyDown","children","_jsx","adornmentIcon","role"],"mappings":";;;;;;;AAYA,MAAMA,OAAOA,MAAM;AAAC;AAkCPC,MAAAA,cAAcC,iBAIzB,CACE;AAAA,EACEC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,WAAWC;AAAAA,EACXC;AAAAA,EACAC,YAAYF;AAAAA,EACZ,GAAGG;AACL,GACAC,QACG;;AACG,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWV,WAAW;AAExC,QAAA;AAAA,IAAEW,gBAAgB;AAAA,EAAA,IAAOC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAExD,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAUF,MAAAA,WAAWG,8BAAAA,+BAA+B;AAE5D,QAAMC,cACJV,cAAcH,aAAaC,UAAaO,kBAAkBR;AAEtDc,QAAAA,cAAc,CAAC,CAACZ;AAEfY,SAAAA,6CACL,UAAA;AAAA,IACEnB;AAAAA,IACAU;AAAAA,IACAU,MAAK;AAAA,IACLC,UAAU;AAAA,IACV,kBAAeL,oCAAQ,OAARA,mBAAYhB;AAAAA,IAC3BG,WAAWQ,GACTV,QAAQqB,MACRrB,QAAQsB,WACRtB,QAAQuB,iBACR;AAAA,MAAE,CAACvB,QAAQwB,QAAQ,GAAG,CAACP;AAAAA,OACvBf,SACF;AAAA,IACAI;AAAAA,IACAmB,aAAcC,CAAUA,UAAAA,MAAMC,eAAe;AAAA,IAC7CC,WAAWhC;AAAAA,IAAK,GACZY;AAAAA,IAAMqB,yCAEV,OAAA;AAAA,MAAK3B,WAAWF,QAAQG;AAAAA,MAAK0B,UAAE1B;AAAAA,IAAAA,CAAU;AAAA,EAAA,CACnC,IAER2B,2BAAAA,IAAA,OAAA;AAAA,IACE/B;AAAAA,IACAU;AAAAA,IACAP,WAAWQ,GACTV,QAAQqB,MACRrB,QAAQsB,WACRtB,QAAQ+B,eACR;AAAA,MAAE,CAAC/B,QAAQwB,QAAQ,GAAG,CAACP;AAAAA,OACvBf,SACF;AAAA,IACA8B,MAAK;AAAA,IAAc,GACfxB;AAAAA,IAAMqB,yCAEV,OAAA;AAAA,MAAK3B,WAAWF,QAAQG;AAAAA,MAAK0B,UAAE1B;AAAAA,IAAAA,CAAU;AAAA,EAAA,CACtC;AAET,CACF;;;"}

package/dist/cjs/components/Forms/Adornment/Adornment.styles.cjs

@@ -1,84 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const focusUtils = require("../../../utils/focusUtils.cjs");
-const transientOptions = require("../../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "ek2tbgi2"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "ek2tbgi2",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $hideIcon
-}) => ({
-  // adornment
-  backgroundColor: "transparent",
-  border: "none",
-  padding: 0,
-  margin: 0,
-  // adornmentIcon
-  cursor: "default",
-  pointerEvents: "none",
-  ...$hideIcon && {
-    display: "none"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQWRvcm5tZW50L0Fkb3JubWVudC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUswQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Zvcm1zL0Fkb3JubWVudC9BZG9ybm1lbnQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkaGlkZUljb24gfTogeyAkaGlkZUljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgLy8gYWRvcm5tZW50XG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBib3JkZXI6IFwibm9uZVwiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG4gIC8vIGFkb3JubWVudEljb25cbiAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG4gIC4uLigkaGlkZUljb24gJiYge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogMzIsXG4gIGhlaWdodDogMzIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZChcbiAgXCJidXR0b25cIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkaGlkZUljb24gfTogeyAkaGlkZUljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgLy8gYWRvcm5tZW50XG4gIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICBib3JkZXI6IFwibm9uZVwiLFxuICBwYWRkaW5nOiAwLFxuICBtYXJnaW46IDAsXG4gIC8vIGFkb3JubWVudEJ1dHRvblxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiY6Zm9jdXNcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG4gIC4uLigkaGlkZUljb24gJiYge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9KSxcbn0pKTtcbiJdfQ== */");
-const StyledIcon = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "ek2tbgi1"
-} : {
-  target: "ek2tbgi1",
-  label: "StyledIcon"
-})(process.env.NODE_ENV === "production" ? {
-  name: "68x97p",
-  styles: "width:32px;height:32px"
-} : {
-  name: "68x97p",
-  styles: "width:32px;height:32px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQWRvcm5tZW50L0Fkb3JubWVudC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9BZG9ybm1lbnQvQWRvcm5tZW50LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGhpZGVJY29uIH06IHsgJGhpZGVJY29uOiBib29sZWFuIH0pID0+ICh7XG4gIC8vIGFkb3JubWVudFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICAvLyBhZG9ybm1lbnRJY29uXG4gIGN1cnNvcjogXCJkZWZhdWx0XCIsXG4gIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiLFxuICAuLi4oJGhpZGVJY29uICYmIHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoXG4gIFwiYnV0dG9uXCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGhpZGVJY29uIH06IHsgJGhpZGVJY29uOiBib29sZWFuIH0pID0+ICh7XG4gIC8vIGFkb3JubWVudFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICAvLyBhZG9ybm1lbnRCdXR0b25cbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgXCImOmZvY3VzXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICAuLi4oJGhpZGVJY29uICYmIHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG59KSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledButton = /* @__PURE__ */ _styled__default.default("button", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "ek2tbgi0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "ek2tbgi0",
-  label: "StyledButton"
-}, transientOptions.transientOptions))(({
-  $hideIcon
-}) => ({
-  // adornment
-  backgroundColor: "transparent",
-  border: "none",
-  padding: 0,
-  margin: 0,
-  // adornmentButton
-  cursor: "pointer",
-  "&:focus": {
-    ...focusUtils.outlineStyles
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvAdornment", {
+  root: {},
+  icon: {
+    width: 32,
+    height: 32
+  },
+  adornment: {
+    backgroundColor: "transparent",
+    border: "none",
+    padding: 0,
+    margin: 0
   },
-  ...$hideIcon && {
+  adornmentIcon: {
+    cursor: "default",
+    pointerEvents: "none"
+  },
+  hideIcon: {
     display: "none"
+  },
+  adornmentButton: {
+    cursor: "pointer",
+    "&:focus": {
+      ...focusUtils.outlineStyles
+    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQWRvcm5tZW50L0Fkb3JubWVudC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9BZG9ybm1lbnQvQWRvcm5tZW50LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGhpZGVJY29uIH06IHsgJGhpZGVJY29uOiBib29sZWFuIH0pID0+ICh7XG4gIC8vIGFkb3JubWVudFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICAvLyBhZG9ybm1lbnRJY29uXG4gIGN1cnNvcjogXCJkZWZhdWx0XCIsXG4gIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiLFxuICAuLi4oJGhpZGVJY29uICYmIHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDMyLFxuICBoZWlnaHQ6IDMyLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoXG4gIFwiYnV0dG9uXCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGhpZGVJY29uIH06IHsgJGhpZGVJY29uOiBib29sZWFuIH0pID0+ICh7XG4gIC8vIGFkb3JubWVudFxuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgYm9yZGVyOiBcIm5vbmVcIixcbiAgcGFkZGluZzogMCxcbiAgbWFyZ2luOiAwLFxuICAvLyBhZG9ybm1lbnRCdXR0b25cbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgXCImOmZvY3VzXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICAuLi4oJGhpZGVJY29uICYmIHtcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgfSksXG59KSk7XG4iXX0= */");
-exports.StyledButton = StyledButton;
-exports.StyledIcon = StyledIcon;
-exports.StyledRoot = StyledRoot;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Adornment.styles.cjs.map

package/dist/cjs/components/Forms/Adornment/Adornment.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Adornment.styles.cjs","sources":["../../../../../src/components/Forms/Adornment/Adornment.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(({ $hideIcon }: { $hideIcon: boolean }) => ({\n  // adornment\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  padding: 0,\n  margin: 0,\n  // adornmentIcon\n  cursor: \"default\",\n  pointerEvents: \"none\",\n  ...($hideIcon && {\n    display: \"none\",\n  }),\n}));\n\nexport const StyledIcon = styled(\"div\")({\n  width: 32,\n  height: 32,\n});\n\nexport const StyledButton = styled(\n  \"button\",\n  transientOptions\n)(({ $hideIcon }: { $hideIcon: boolean }) => ({\n  // adornment\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  padding: 0,\n  margin: 0,\n  // adornmentButton\n  cursor: \"pointer\",\n  \"&:focus\": {\n    ...outlineStyles,\n  },\n  ...($hideIcon && {\n    display: \"none\",\n  }),\n}));\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$hideIcon","backgroundColor","border","padding","margin","cursor","pointerEvents","display","StyledIcon","_styled","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledButton","outlineStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKaA,MAAAA,sDACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAkC,OAAO;AAAA;AAAA,EAE5CC,iBAAiB;AAAA,EACjBC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,QAAQ;AAAA;AAAA,EAERC,QAAQ;AAAA,EACRC,eAAe;AAAA,EACf,GAAIN,aAAa;AAAA,IACfO,SAAS;AAAA,EACX;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,ywDAAA;AAEI,MAAMa,aAAoBC,iCAAA,QAAA,OAAKhB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAe,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGtC;AAEYC,MAAAA,wDACX,UAAQtB,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACRC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAkC,OAAO;AAAA;AAAA,EAE5CC,iBAAiB;AAAA,EACjBC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,QAAQ;AAAA;AAAA,EAERC,QAAQ;AAAA,EACR,WAAW;AAAA,IACT,GAAGW,WAAAA;AAAAA,EACL;AAAA,EACA,GAAIhB,aAAa;AAAA,IACfO,SAAS;AAAA,EACX;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,ywDAAA;;;;"}
+{"version":3,"file":"Adornment.styles.cjs","sources":["../../../../../src/components/Forms/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n  root: {},\n  icon: { width: 32, height: 32 },\n  adornment: {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    padding: 0,\n    margin: 0,\n  },\n  adornmentIcon: { cursor: \"default\", pointerEvents: \"none\" },\n  hideIcon: { display: \"none\" },\n  adornmentButton: {\n    cursor: \"pointer\",\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","icon","width","height","adornment","backgroundColor","border","padding","margin","adornmentIcon","cursor","pointerEvents","hideIcon","display","adornmentButton","outlineStyles"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AAAA,EACPC,MAAM;AAAA,IAAEC,OAAO;AAAA,IAAIC,QAAQ;AAAA,EAAG;AAAA,EAC9BC,WAAW;AAAA,IACTC,iBAAiB;AAAA,IACjBC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IAAEC,QAAQ;AAAA,IAAWC,eAAe;AAAA,EAAO;AAAA,EAC1DC,UAAU;AAAA,IAAEC,SAAS;AAAA,EAAO;AAAA,EAC5BC,iBAAiB;AAAA,IACfJ,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,GAAGK,WAAAA;AAAAA,IACL;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Forms/CharCounter/CharCounter.cjs

@@ -2,24 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const setId = require("../../../utils/setId.cjs");
 const CharCounter_styles = require("./CharCounter.styles.cjs");
-const charCounterClasses = require("./charCounterClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
+const Typography = require("../../Typography/Typography.cjs");
 const HvCharCounter = (props) => {
   const {
     separator = "/",
     maxCharQuantity,
     currentCharQuantity = 0,
-    classes,
+    classes: classesProp,
     className,
     id,
     disabled,
     disableGutter = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvCharCounter", props);
+  const {
+    classes,
+    cx
+  } = CharCounter_styles.useClasses(classesProp);
   const {
     elementId,
     elementDisabled
@@ -29,32 +32,36 @@ const HvCharCounter = (props) => {
   const currentId = setId.setId(localId, "currentQuantity");
   const maxQuantityId = setId.setId(localId, "maxQuantity");
   const isOverloaded = currentCharQuantity > maxCharQuantity;
-  return /* @__PURE__ */ jsxRuntime.jsxs(CharCounter_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     id: localId,
-    className: clsx.clsx(className, charCounterClasses.default.root, classes == null ? void 0 : classes.root, localDisabled && clsx.clsx(charCounterClasses.default.counterDisabled, classes == null ? void 0 : classes.counterDisabled), !disableGutter && clsx.clsx(charCounterClasses.default.gutter, classes == null ? void 0 : classes.gutter)),
-    $counterDisabled: !!localDisabled,
-    $gutter: !disableGutter,
+    className: cx(classes.root, {
+      [classes.counterDisabled]: !!localDisabled,
+      [classes.gutter]: !disableGutter
+    }, className),
     "aria-live": "polite",
     "aria-disabled": localDisabled,
     ...others,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(CharCounter_styles.StyledTypography, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       id: currentId,
-      className: clsx.clsx(isOverloaded && !localDisabled && clsx.clsx(charCounterClasses.default.overloaded, classes == null ? void 0 : classes.overloaded), localDisabled && clsx.clsx(charCounterClasses.default.counterDisabled, classes == null ? void 0 : classes.counterDisabled)),
+      className: cx({
+        [classes.overloaded]: isOverloaded && !localDisabled,
+        [classes.counterDisabled]: !!localDisabled
+      }),
       variant: "label",
       component: "label",
-      $overloaded: isOverloaded && !localDisabled,
-      $counterDisabled: !!localDisabled,
       children: currentCharQuantity
-    }), /* @__PURE__ */ jsxRuntime.jsx(CharCounter_styles.StyledTypography, {
+    }), /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
       id: maxQuantityId,
-      className: clsx.clsx(isOverloaded && !localDisabled && clsx.clsx(charCounterClasses.default.overloaded, classes == null ? void 0 : classes.overloaded), localDisabled && clsx.clsx(charCounterClasses.default.counterDisabled, classes == null ? void 0 : classes.counterDisabled)),
+      className: cx({
+        [classes.overloaded]: isOverloaded && !localDisabled,
+        [classes.counterDisabled]: !!localDisabled
+      }),
       variant: "body",
       component: "label",
-      $overloaded: isOverloaded && !localDisabled,
-      $counterDisabled: !!localDisabled,
       children: ` ${separator} ${maxCharQuantity}`
     })]
   });
 };
+exports.charCounterClasses = CharCounter_styles.staticClasses;
 exports.HvCharCounter = HvCharCounter;
 //# sourceMappingURL=CharCounter.cjs.map

package/dist/cjs/components/Forms/CharCounter/CharCounter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CharCounter.cjs","sources":["../../../../../src/components/Forms/CharCounter/CharCounter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { StyledRoot, StyledTypography } from \"./CharCounter.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport charCounterClasses, { HvCharCounterClasses } from \"./charCounterClasses\";\n\nexport interface HvCharCounterProps extends HvBaseProps {\n  /** The string that separates the current char quantity from the max quantity. */\n  separator?: string;\n  /** The maximum allowed length of the characters. */\n  maxCharQuantity: number;\n  /** The current char quantity to be rendered. */\n  currentCharQuantity?: number;\n  /** If `true` the counter is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCharCounterClasses;\n}\n\n/**\n * Displays the capacity and current usage of a text input box (character count by default).\n *\n * Use the character counter when there is a character or word limit.\n * By itself it doesn't block the user from going above the limit.\n */\nexport const HvCharCounter = (props: HvCharCounterProps) => {\n  const {\n    separator = \"/\",\n    maxCharQuantity,\n    currentCharQuantity = 0,\n    classes,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvCharCounter\", props);\n\n  const { elementId, elementDisabled } = useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localId = id ?? setId(elementId, \"counter\");\n  const currentId = setId(localId, \"currentQuantity\");\n  const maxQuantityId = setId(localId, \"maxQuantity\");\n  const isOverloaded = currentCharQuantity > maxCharQuantity;\n\n  return (\n    <StyledRoot\n      id={localId}\n      className={clsx(\n        className,\n        charCounterClasses.root,\n        classes?.root,\n        localDisabled &&\n          clsx(charCounterClasses.counterDisabled, classes?.counterDisabled),\n        !disableGutter && clsx(charCounterClasses.gutter, classes?.gutter)\n      )}\n      $counterDisabled={!!localDisabled}\n      $gutter={!disableGutter}\n      aria-live=\"polite\"\n      aria-disabled={localDisabled}\n      {...others}\n    >\n      <StyledTypography\n        id={currentId}\n        className={clsx(\n          isOverloaded &&\n            !localDisabled &&\n            clsx(charCounterClasses.overloaded, classes?.overloaded),\n          localDisabled &&\n            clsx(charCounterClasses.counterDisabled, classes?.counterDisabled)\n        )}\n        variant=\"label\"\n        component=\"label\"\n        $overloaded={isOverloaded && !localDisabled}\n        $counterDisabled={!!localDisabled}\n      >\n        {currentCharQuantity}\n      </StyledTypography>\n      <StyledTypography\n        id={maxQuantityId}\n        className={clsx(\n          isOverloaded &&\n            !localDisabled &&\n            clsx(charCounterClasses.overloaded, classes?.overloaded),\n          localDisabled &&\n            clsx(charCounterClasses.counterDisabled, classes?.counterDisabled)\n        )}\n        variant=\"body\"\n        component=\"label\"\n        $overloaded={isOverloaded && !localDisabled}\n        $counterDisabled={!!localDisabled}\n      >\n        {` ${separator} ${maxCharQuantity}`}\n      </StyledTypography>\n    </StyledRoot>\n  );\n};\n"],"names":["HvCharCounter","props","separator","maxCharQuantity","currentCharQuantity","classes","className","id","disabled","disableGutter","others","useDefaultProps","elementId","elementDisabled","useContext","HvFormElementContext","localDisabled","localId","setId","currentId","maxQuantityId","isOverloaded","StyledRoot","clsx","charCounterClasses","root","counterDisabled","gutter","$counterDisabled","$gutter","children","_jsx","StyledTypography","overloaded","variant","component","$overloaded"],"mappings":";;;;;;;;;;AAiCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,sBAAsB;AAAA,IACtBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBV,KAAK;AAEpC,QAAA;AAAA,IAAEW;AAAAA,IAAWC;AAAAA,EAAAA,IAAoBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACtE,QAAMC,gBAAgBR,YAAYK;AAClC,QAAMI,UAAUV,MAAMW,MAAMN,MAAAA,WAAW,SAAS;AAC1CO,QAAAA,YAAYD,MAAAA,MAAMD,SAAS,iBAAiB;AAC5CG,QAAAA,gBAAgBF,MAAAA,MAAMD,SAAS,aAAa;AAClD,QAAMI,eAAejB,sBAAsBD;AAE3C,yCACGmB,mBAAAA,YAAU;AAAA,IACTf,IAAIU;AAAAA,IACJX,WAAWiB,KAAAA,KACTjB,WACAkB,2BAAmBC,MACnBpB,mCAASoB,MACTT,iBACEO,KAAAA,KAAKC,mBAAAA,QAAmBE,iBAAiBrB,mCAASqB,eAAe,GACnE,CAACjB,iBAAiBc,KAAAA,KAAKC,mBAAAA,QAAmBG,QAAQtB,mCAASsB,MAAM,CACnE;AAAA,IACAC,kBAAkB,CAAC,CAACZ;AAAAA,IACpBa,SAAS,CAACpB;AAAAA,IACV,aAAU;AAAA,IACV,iBAAeO;AAAAA,IAAc,GACzBN;AAAAA,IAAMoB,UAAA,CAEVC,2BAAAA,IAACC,qCAAgB;AAAA,MACfzB,IAAIY;AAAAA,MACJb,WAAWiB,KACTF,KAAAA,gBACE,CAACL,iBACDO,UAAKC,mBAAmBS,QAAAA,YAAY5B,mCAAS4B,UAAU,GACzDjB,iBACEO,UAAKC,mBAAAA,QAAmBE,iBAAiBrB,mCAASqB,eAAe,CACrE;AAAA,MACAQ,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVC,aAAaf,gBAAgB,CAACL;AAAAA,MAC9BY,kBAAkB,CAAC,CAACZ;AAAAA,MAAcc,UAEjC1B;AAAAA,IAAAA,CACe,GAClB2B,2BAAAA,IAACC,qCAAgB;AAAA,MACfzB,IAAIa;AAAAA,MACJd,WAAWiB,KACTF,KAAAA,gBACE,CAACL,iBACDO,UAAKC,mBAAmBS,QAAAA,YAAY5B,mCAAS4B,UAAU,GACzDjB,iBACEO,UAAKC,mBAAAA,QAAmBE,iBAAiBrB,mCAASqB,eAAe,CACrE;AAAA,MACAQ,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVC,aAAaf,gBAAgB,CAACL;AAAAA,MAC9BY,kBAAkB,CAAC,CAACZ;AAAAA,MAAcc,UAEhC,IAAG5B,aAAaC;AAAAA,IAAAA,CACF,CAAC;AAAA,EAAA,CACT;AAEhB;;"}
+{"version":3,"file":"CharCounter.cjs","sources":["../../../../../src/components/Forms/CharCounter/CharCounter.tsx"],"sourcesContent":["import { useContext } from \"react\";\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 \"./CharCounter.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as charCounterClasses };\n\nexport type HvCharCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCharCounterProps extends HvBaseProps {\n  /** The string that separates the current char quantity from the max quantity. */\n  separator?: string;\n  /** The maximum allowed length of the characters. */\n  maxCharQuantity: number;\n  /** The current char quantity to be rendered. */\n  currentCharQuantity?: number;\n  /** If `true` the counter is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCharCounterClasses;\n}\n\n/**\n * Displays the capacity and current usage of a text input box (character count by default).\n *\n * Use the character counter when there is a character or word limit.\n * By itself it doesn't block the user from going above the limit.\n */\nexport const HvCharCounter = (props: HvCharCounterProps) => {\n  const {\n    separator = \"/\",\n    maxCharQuantity,\n    currentCharQuantity = 0,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvCharCounter\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementDisabled } = useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localId = id ?? setId(elementId, \"counter\");\n  const currentId = setId(localId, \"currentQuantity\");\n  const maxQuantityId = setId(localId, \"maxQuantity\");\n  const isOverloaded = currentCharQuantity > maxCharQuantity;\n\n  return (\n    <div\n      id={localId}\n      className={cx(\n        classes.root,\n        {\n          [classes.counterDisabled]: !!localDisabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className\n      )}\n      aria-live=\"polite\"\n      aria-disabled={localDisabled}\n      {...others}\n    >\n      <HvTypography\n        id={currentId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !localDisabled,\n          [classes.counterDisabled]: !!localDisabled,\n        })}\n        variant=\"label\"\n        component=\"label\"\n      >\n        {currentCharQuantity}\n      </HvTypography>\n      <HvTypography\n        id={maxQuantityId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !localDisabled,\n          [classes.counterDisabled]: !!localDisabled,\n        })}\n        variant=\"body\"\n        component=\"label\"\n      >\n        {` ${separator} ${maxCharQuantity}`}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvCharCounter","props","separator","maxCharQuantity","currentCharQuantity","classes","classesProp","className","id","disabled","disableGutter","others","useDefaultProps","cx","useClasses","elementId","elementDisabled","useContext","HvFormElementContext","localDisabled","localId","setId","currentId","maxQuantityId","isOverloaded","root","counterDisabled","gutter","children","_jsx","HvTypography","overloaded","variant","component"],"mappings":";;;;;;;;;AAoCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,sBAAsB;AAAA,IACtBC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBX,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWR,WAAW;AAExC,QAAA;AAAA,IAAES;AAAAA,IAAWC;AAAAA,EAAAA,IAAoBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACtE,QAAMC,gBAAgBV,YAAYO;AAClC,QAAMI,UAAUZ,MAAMa,MAAMN,MAAAA,WAAW,SAAS;AAC1CO,QAAAA,YAAYD,MAAAA,MAAMD,SAAS,iBAAiB;AAC5CG,QAAAA,gBAAgBF,MAAAA,MAAMD,SAAS,aAAa;AAClD,QAAMI,eAAepB,sBAAsBD;AAE3C,yCACE,OAAA;AAAA,IACEK,IAAIY;AAAAA,IACJb,WAAWM,GACTR,QAAQoB,MACR;AAAA,MACE,CAACpB,QAAQqB,eAAe,GAAG,CAAC,CAACP;AAAAA,MAC7B,CAACd,QAAQsB,MAAM,GAAG,CAACjB;AAAAA,OAErBH,SACF;AAAA,IACA,aAAU;AAAA,IACV,iBAAeY;AAAAA,IAAc,GACzBR;AAAAA,IAAMiB,UAAA,CAEVC,2BAAAA,IAACC,yBAAY;AAAA,MACXtB,IAAIc;AAAAA,MACJf,WAAWM,GAAG;AAAA,QACZ,CAACR,QAAQ0B,UAAU,GAAGP,gBAAgB,CAACL;AAAAA,QACvC,CAACd,QAAQqB,eAAe,GAAG,CAAC,CAACP;AAAAA,MAAAA,CAC9B;AAAA,MACDa,SAAQ;AAAA,MACRC,WAAU;AAAA,MAAOL,UAEhBxB;AAAAA,IAAAA,CACW,GACdyB,2BAAAA,IAACC,yBAAY;AAAA,MACXtB,IAAIe;AAAAA,MACJhB,WAAWM,GAAG;AAAA,QACZ,CAACR,QAAQ0B,UAAU,GAAGP,gBAAgB,CAACL;AAAAA,QACvC,CAACd,QAAQqB,eAAe,GAAG,CAAC,CAACP;AAAAA,MAAAA,CAC9B;AAAA,MACDa,SAAQ;AAAA,MACRC,WAAU;AAAA,MAAOL,UAEf,IAAG1B,aAAaC;AAAAA,IAAAA,CACN,CAAC;AAAA,EAAA,CACZ;AAET;;;"}

package/dist/cjs/components/Forms/CharCounter/CharCounter.styles.cjs

@@ -1,59 +1,25 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../../utils/transientOptions.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e11kw0681"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e11kw0681",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $counterDisabled,
-  $gutter
-}) => ({
-  display: "inline-block",
-  float: "right",
-  ...$counterDisabled && {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCharCounter", {
+  root: {
+    display: "inline-block",
+    float: "right"
+  },
+  counterDisabled: {
     color: uikitStyles.theme.colors.secondary_60
   },
-  ...$gutter && {
-    paddingLeft: `6px`
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQ2hhckNvdW50ZXIvQ2hhckNvdW50ZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9DaGFyQ291bnRlci9DaGFyQ291bnRlci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICRjb3VudGVyRGlzYWJsZWQsXG4gICAgJGd1dHRlcixcbiAgfToge1xuICAgICRjb3VudGVyRGlzYWJsZWQ6IGJvb2xlYW47XG4gICAgJGd1dHRlcjogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICAgIGZsb2F0OiBcInJpZ2h0XCIsXG4gICAgLi4uKCRjb3VudGVyRGlzYWJsZWQgJiYge1xuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgfSksXG4gICAgLi4uKCRndXR0ZXIgJiYge1xuICAgICAgcGFkZGluZ0xlZnQ6IGA2cHhgLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFR5cG9ncmFwaHkgPSBzdHlsZWQoXG4gIEh2VHlwb2dyYXBoeSxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkb3ZlcmxvYWRlZCxcbiAgICAkY291bnRlckRpc2FibGVkLFxuICB9OiB7XG4gICAgJG92ZXJsb2FkZWQ6IGJvb2xlYW47XG4gICAgJGNvdW50ZXJEaXNhYmxlZDogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICAuLi4oJG92ZXJsb2FkZWQgJiYge1xuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5uZWdhdGl2ZSxcbiAgICB9KSxcbiAgICAuLi4oJGNvdW50ZXJEaXNhYmxlZCAmJiB7XG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-const StyledTypography = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e11kw0680"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e11kw0680",
-  label: "StyledTypography"
-}, transientOptions.transientOptions))(({
-  $overloaded,
-  $counterDisabled
-}) => ({
-  ...$overloaded && {
-    color: uikitStyles.theme.colors.negative
+  gutter: {
+    paddingLeft: "6px"
   },
-  ...$counterDisabled && {
-    color: uikitStyles.theme.colors.secondary_60
+  overloaded: {
+    color: uikitStyles.theme.colors.negative
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQ2hhckNvdW50ZXIvQ2hhckNvdW50ZXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QmdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvQ2hhckNvdW50ZXIvQ2hhckNvdW50ZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkY291bnRlckRpc2FibGVkLFxuICAgICRndXR0ZXIsXG4gIH06IHtcbiAgICAkY291bnRlckRpc2FibGVkOiBib29sZWFuO1xuICAgICRndXR0ZXI6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJpbmxpbmUtYmxvY2tcIixcbiAgICBmbG9hdDogXCJyaWdodFwiLFxuICAgIC4uLigkY291bnRlckRpc2FibGVkICYmIHtcbiAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgIH0pLFxuICAgIC4uLigkZ3V0dGVyICYmIHtcbiAgICAgIHBhZGRpbmdMZWZ0OiBgNnB4YCxcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJG92ZXJsb2FkZWQsXG4gICAgJGNvdW50ZXJEaXNhYmxlZCxcbiAgfToge1xuICAgICRvdmVybG9hZGVkOiBib29sZWFuO1xuICAgICRjb3VudGVyRGlzYWJsZWQ6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgLi4uKCRvdmVybG9hZGVkICYmIHtcbiAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG4gICAgfSksXG4gICAgLi4uKCRjb3VudGVyRGlzYWJsZWQgJiYge1xuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgfSksXG4gIH0pXG4pO1xuIl19 */");
-exports.StyledRoot = StyledRoot;
-exports.StyledTypography = StyledTypography;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=CharCounter.styles.cjs.map

package/dist/cjs/components/Forms/CharCounter/CharCounter.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CharCounter.styles.cjs","sources":["../../../../../src/components/Forms/CharCounter/CharCounter.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $counterDisabled,\n    $gutter,\n  }: {\n    $counterDisabled: boolean;\n    $gutter: boolean;\n  }) => ({\n    display: \"inline-block\",\n    float: \"right\",\n    ...($counterDisabled && {\n      color: theme.colors.secondary_60,\n    }),\n    ...($gutter && {\n      paddingLeft: `6px`,\n    }),\n  })\n);\n\nexport const StyledTypography = styled(\n  HvTypography,\n  transientOptions\n)(\n  ({\n    $overloaded,\n    $counterDisabled,\n  }: {\n    $overloaded: boolean;\n    $counterDisabled: boolean;\n  }) => ({\n    ...($overloaded && {\n      color: theme.colors.negative,\n    }),\n    ...($counterDisabled && {\n      color: theme.colors.secondary_60,\n    }),\n  })\n);\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$counterDisabled","$gutter","display","float","color","theme","colors","secondary_60","paddingLeft","StyledTypography","HvTypography","$overloaded","negative"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOaA,MAAAA,sDACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAIF,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,OAAO;AAAA,EACP,GAAIH,oBAAoB;AAAA,IACtBI,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACA,GAAIN,WAAW;AAAA,IACbO,aAAc;AAAA,EAChB;AACF,IAAEf,QAAAC,IAAAC,80DACJ;AAEac,MAAAA,4DACXC,WAAAA,cAAYjB,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCa;AAAAA,EACAX;AAIF,OAAO;AAAA,EACL,GAAIW,eAAe;AAAA,IACjBP,OAAOC,YAAAA,MAAMC,OAAOM;AAAAA,EACtB;AAAA,EACA,GAAIZ,oBAAoB;AAAA,IACtBI,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AACF,IAAEd,QAAAC,IAAAC,80DACJ;;;"}
+{"version":3,"file":"CharCounter.styles.cjs","sources":["../../../../../src/components/Forms/CharCounter/CharCounter.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCharCounter\", {\n  root: { display: \"inline-block\", float: \"right\" },\n  counterDisabled: { color: theme.colors.secondary_60 },\n  gutter: { paddingLeft: \"6px\" },\n  overloaded: { color: theme.colors.negative },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","float","counterDisabled","color","theme","colors","secondary_60","gutter","paddingLeft","overloaded","negative"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAgBC,OAAO;AAAA,EAAQ;AAAA,EAChDC,iBAAiB;AAAA,IAAEC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EAAa;AAAA,EACpDC,QAAQ;AAAA,IAAEC,aAAa;AAAA,EAAM;AAAA,EAC7BC,YAAY;AAAA,IAAEN,OAAOC,YAAAA,MAAMC,OAAOK;AAAAA,EAAS;AAC7C,CAAC;;;"}

package/dist/cjs/components/Forms/FormElement/FormElement.cjs

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const useUniqueId = require("../../../hooks/useUniqueId.cjs");
 const FormUtils = require("./utils/FormUtils.cjs");
 const FormElementContext = require("./context/FormElementContext.cjs");
 const FormElementValueContext = require("./context/FormElementValueContext.cjs");
 const FormElementDescriptorsContext = require("./context/FormElementDescriptorsContext.cjs");
-const formElementClasses = require("./formElementClasses.cjs");
+const FormElement_styles = require("./FormElement.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvFormElement = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     children,
     id,
@@ -24,6 +23,10 @@ const HvFormElement = (props) => {
     status = "standBy",
     ...others
   } = useDefaultProps.useDefaultProps("HvFormElement", props);
+  const {
+    classes,
+    cx
+  } = FormElement_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvformelement");
   const contextValue = React.useMemo(() => ({
     elementId,
@@ -36,7 +39,7 @@ const HvFormElement = (props) => {
   const descriptors = React.useMemo(() => FormUtils.findDescriptors(children), [children]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     id,
-    className: clsx.clsx(className, formElementClasses.default.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
     children: /* @__PURE__ */ jsxRuntime.jsx(FormElementContext.HvFormElementContextProvider, {
       value: contextValue,
@@ -51,5 +54,6 @@ const HvFormElement = (props) => {
   });
 };
 HvFormElement.formElementType = "formelement";
+exports.formElementClasses = FormElement_styles.staticClasses;
 exports.HvFormElement = HvFormElement;
 //# sourceMappingURL=FormElement.cjs.map

package/dist/cjs/components/Forms/FormElement/FormElement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.cjs","sources":["../../../../../src/components/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport formElementClasses, { HvFormElementClasses } from \"./formElementClasses\";\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const elementId = useUniqueId(id, \"hvformelement\");\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div\n      id={id}\n      className={clsx(className, formElementClasses.root, classes?.root)}\n      {...others}\n    >\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":["HvFormElement","props","classes","className","children","id","name","value","disabled","required","readOnly","status","others","useDefaultProps","elementId","useUniqueId","contextValue","useMemo","elementName","elementStatus","elementDisabled","elementRequired","elementReadOnly","descriptors","findDescriptors","clsx","formElementClasses","root","HvFormElementContextProvider","HvFormElementValueContextProvider","HvFormElementDescriptorsContextProvider","formElementType"],"mappings":";;;;;;;;;;;;AA8DaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBZ,KAAK;AAEpCa,QAAAA,YAAYC,YAAAA,YAAYV,IAAI,eAAe;AAE3CW,QAAAA,eAAeC,MAAAA,QACnB,OAAO;AAAA,IACLH;AAAAA,IACAI,aAAaZ;AAAAA,IACba,eAAeR;AAAAA,IACfS,iBAAiBZ;AAAAA,IACjBa,iBAAiBZ;AAAAA,IACjBa,iBAAiBZ;AAAAA,EAAAA,IAEnB,CAACF,UAAUM,WAAWR,MAAMI,UAAUD,UAAUE,MAAM,CACxD;AAEMY,QAAAA,cAAcN,MAAAA,QAAQ,MAAMO,UAAAA,gBAAgBpB,QAAQ,GAAG,CAACA,QAAQ,CAAC;AAEvE,wCACE,OAAA;AAAA,IACEC;AAAAA,IACAF,WAAWsB,KAAKtB,KAAAA,WAAWuB,mBAAmBC,QAAAA,MAAMzB,mCAASyB,IAAI;AAAA,IAAE,GAC/Df;AAAAA,IAAMR,yCAETwB,iDAA4B;AAAA,MAACrB,OAAOS;AAAAA,MAAaZ,yCAC/CyB,2DAAiC;AAAA,QAACtB;AAAAA,QAAaH,yCAC7C0B,uEAAuC;AAAA,UAACvB,OAAOgB;AAAAA,UAAYnB;AAAAA,QAAAA,CAEnB;AAAA,MAAA,CACR;AAAA,IAAA,CACP;AAAA,EAAA,CAC3B;AAET;AAEAJ,cAAc+B,kBAAkB;;"}
+{"version":3,"file":"FormElement.cjs","sources":["../../../../../src/components/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvformelement\");\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":["HvFormElement","props","classes","classesProp","className","children","id","name","value","disabled","required","readOnly","status","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","contextValue","useMemo","elementName","elementStatus","elementDisabled","elementRequired","elementReadOnly","descriptors","findDescriptors","root","HvFormElementContextProvider","HvFormElementValueContextProvider","HvFormElementDescriptorsContextProvider","formElementType"],"mappings":";;;;;;;;;;;AAiEaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBb,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWb,WAAW;AAExCc,QAAAA,YAAYC,YAAAA,YAAYZ,IAAI,eAAe;AAE3Ca,QAAAA,eAAeC,MAAAA,QACnB,OAAO;AAAA,IACLH;AAAAA,IACAI,aAAad;AAAAA,IACbe,eAAeV;AAAAA,IACfW,iBAAiBd;AAAAA,IACjBe,iBAAiBd;AAAAA,IACjBe,iBAAiBd;AAAAA,EAAAA,IAEnB,CAACF,UAAUQ,WAAWV,MAAMI,UAAUD,UAAUE,MAAM,CACxD;AAEMc,QAAAA,cAAcN,MAAAA,QAAQ,MAAMO,UAAAA,gBAAgBtB,QAAQ,GAAG,CAACA,QAAQ,CAAC;AAEvE,wCACE,OAAA;AAAA,IAAKC;AAAAA,IAAQF,WAAWW,GAAGb,QAAQ0B,MAAMxB,SAAS;AAAA,IAAE,GAAKS;AAAAA,IAAMR,yCAC5DwB,iDAA4B;AAAA,MAACrB,OAAOW;AAAAA,MAAad,yCAC/CyB,2DAAiC;AAAA,QAACtB;AAAAA,QAAaH,yCAC7C0B,uEAAuC;AAAA,UAACvB,OAAOkB;AAAAA,UAAYrB;AAAAA,QAAAA,CAEnB;AAAA,MAAA,CACR;AAAA,IAAA,CACP;AAAA,EAAA,CAC3B;AAET;AAEAL,cAAcgC,kBAAkB;;;"}

package/dist/cjs/components/Forms/FormElement/FormElement.styles.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvFormElement", {
+  root: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=FormElement.styles.cjs.map

package/dist/cjs/components/Forms/FormElement/FormElement.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.styles.cjs","sources":["../../../../../src/components/Forms/FormElement/FormElement.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFormElement\", {\n  root: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/Forms/InfoMessage/InfoMessage.cjs

@@ -1,39 +1,44 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
-const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const React = require("react");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const setId = require("../../../utils/setId.cjs");
 const InfoMessage_styles = require("./InfoMessage.styles.cjs");
-const infoMessageClasses = require("./infoMessageClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
+const Typography = require("../../Typography/Typography.cjs");
 const HvInfoMessage = (props) => {
   const {
     id,
-    classes,
+    classes: classesProp,
     className,
     children,
     disabled,
     disableGutter = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvInfoMessage", props);
+  const {
+    classes,
+    cx
+  } = InfoMessage_styles.useClasses(classesProp);
   const {
     elementId,
     elementDisabled
   } = React.useContext(FormElementContext.HvFormElementContext);
   const localDisabled = disabled || elementDisabled;
   const localId = id ?? setId.setId(elementId, "description");
-  return /* @__PURE__ */ jsxRuntime.jsx(InfoMessage_styles.StyledTypography, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
     id: localId,
-    className: clsx.clsx(className, infoMessageClasses.default.root, classes == null ? void 0 : classes.root, localDisabled && clsx.clsx(infoMessageClasses.default.infoDisabled, classes == null ? void 0 : classes.infoDisabled), !disableGutter && clsx.clsx(infoMessageClasses.default.gutter, classes == null ? void 0 : classes.gutter)),
+    className: cx(classes.root, {
+      [classes.infoDisabled]: !!localDisabled,
+      [classes.gutter]: !disableGutter
+    }, className),
     variant: "body",
     component: "label",
-    $infoDisabled: !!localDisabled,
-    $gutter: !disableGutter,
     ...others,
     children
   });
 };
+exports.infoMessageClasses = InfoMessage_styles.staticClasses;
 exports.HvInfoMessage = HvInfoMessage;
 //# sourceMappingURL=InfoMessage.cjs.map