@hitachivantara/uikit-react-core 5.24.0 → 5.24.1

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

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

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.cjs","sources":["../../../../../src/components/Forms/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useContext } from \"react\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTypography } from \"./InfoMessage.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport infoMessageClasses, { HvInfoMessageClasses } from \"./infoMessageClasses\";\n\nexport interface HvInfoMessageProps extends HvBaseProps {\n  /** If `true` the label 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?: HvInfoMessageClasses;\n}\n\n/**\n * Provides the user with additional descriptive text for the form element.\n */\nexport const HvInfoMessage = (props: HvInfoMessageProps) => {\n  const {\n    id,\n    classes,\n    className,\n    children,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvInfoMessage\", props);\n\n  const { elementId, elementDisabled } = useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localId = id ?? setId(elementId, \"description\");\n\n  return (\n    <StyledTypography\n      id={localId}\n      className={clsx(\n        className,\n        infoMessageClasses.root,\n        classes?.root,\n        localDisabled &&\n          clsx(infoMessageClasses.infoDisabled, classes?.infoDisabled),\n        !disableGutter && clsx(infoMessageClasses.gutter, classes?.gutter)\n      )}\n      variant=\"body\"\n      component=\"label\"\n      $infoDisabled={!!localDisabled}\n      $gutter={!disableGutter}\n      {...others}\n    >\n      {children}\n    </StyledTypography>\n  );\n};\n"],"names":["HvInfoMessage","props","id","classes","className","children","disabled","disableGutter","others","useDefaultProps","elementId","elementDisabled","useContext","HvFormElementContext","localDisabled","localId","setId","StyledTypography","clsx","infoMessageClasses","root","infoDisabled","gutter","variant","component","$infoDisabled","$gutter"],"mappings":";;;;;;;;;;AAwBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBR,KAAK;AAEpC,QAAA;AAAA,IAAES;AAAAA,IAAWC;AAAAA,EAAAA,IAAoBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACtE,QAAMC,gBAAgBR,YAAYK;AAClC,QAAMI,UAAUb,MAAMc,MAAMN,MAAAA,WAAW,aAAa;AAEpD,wCACGO,mBAAAA,kBAAgB;AAAA,IACff,IAAIa;AAAAA,IACJX,WAAWc,KAAAA,KACTd,WACAe,2BAAmBC,MACnBjB,mCAASiB,MACTN,iBACEI,KAAAA,KAAKC,mBAAAA,QAAmBE,cAAclB,mCAASkB,YAAY,GAC7D,CAACd,iBAAiBW,KAAAA,KAAKC,mBAAAA,QAAmBG,QAAQnB,mCAASmB,MAAM,CACnE;AAAA,IACAC,SAAQ;AAAA,IACRC,WAAU;AAAA,IACVC,eAAe,CAAC,CAACX;AAAAA,IACjBY,SAAS,CAACnB;AAAAA,IAAc,GACpBC;AAAAA,IAAMH;AAAAA,EAAAA,CAGM;AAEtB;;"}
+{"version":3,"file":"InfoMessage.cjs","sources":["../../../../../src/components/Forms/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./InfoMessage.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as infoMessageClasses };\n\nexport type HvInfoMessageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInfoMessageProps extends HvTypographyProps<\"label\"> {\n  /** If `true` the label 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?: HvInfoMessageClasses;\n}\n\n/**\n * Provides the user with additional descriptive text for the form element.\n */\nexport const HvInfoMessage = (props: HvInfoMessageProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvInfoMessage\", 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, \"description\");\n\n  return (\n    <HvTypography\n      id={localId}\n      className={cx(\n        classes.root,\n        {\n          [classes.infoDisabled]: !!localDisabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className\n      )}\n      variant=\"body\"\n      component=\"label\"\n      {...others}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":["HvInfoMessage","props","id","classes","classesProp","className","children","disabled","disableGutter","others","useDefaultProps","cx","useClasses","elementId","elementDisabled","useContext","HvFormElementContext","localDisabled","localId","setId","HvTypography","root","infoDisabled","gutter","variant","component"],"mappings":";;;;;;;;;AA0BaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEE;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,UAAUhB,MAAMiB,MAAMN,MAAAA,WAAW,aAAa;AAEpD,wCACGO,WAAAA,cAAY;AAAA,IACXlB,IAAIgB;AAAAA,IACJb,WAAWM,GACTR,QAAQkB,MACR;AAAA,MACE,CAAClB,QAAQmB,YAAY,GAAG,CAAC,CAACL;AAAAA,MAC1B,CAACd,QAAQoB,MAAM,GAAG,CAACf;AAAAA,OAErBH,SACF;AAAA,IACAmB,SAAQ;AAAA,IACRC,WAAU;AAAA,IAAO,GACbhB;AAAAA,IAAMH;AAAAA,EAAAA,CAGE;AAElB;;;"}

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

@@ -1,42 +1,22 @@
 "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 StyledTypography = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e5krntv0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e5krntv0",
-  label: "StyledTypography"
-}, transientOptions.transientOptions))(({
-  $infoDisabled,
-  $gutter
-}) => ({
-  color: uikitStyles.theme.forms.infoMessage.textColor,
-  display: "inline-block",
-  ...$infoDisabled && {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvInfoMessage", {
+  root: {
+    color: uikitStyles.theme.forms.infoMessage.textColor,
+    display: "inline-block"
+  },
+  infoDisabled: {
     color: uikitStyles.theme.colors.secondary_60
   },
-  ...$gutter && {
+  gutter: {
     padding: `0 0 6px ${uikitStyles.theme.space.xs}`
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvSW5mb01lc3NhZ2UvSW5mb01lc3NhZ2Uuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9JbmZvTWVzc2FnZS9JbmZvTWVzc2FnZS5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUeXBvZ3JhcGh5ID0gc3R5bGVkKFxuICBIdlR5cG9ncmFwaHksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJGluZm9EaXNhYmxlZCxcbiAgICAkZ3V0dGVyLFxuICB9OiB7XG4gICAgJGluZm9EaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkZ3V0dGVyOiBib29sZWFuO1xuICB9KSA9PiAoe1xuICAgIGNvbG9yOiB0aGVtZS5mb3Jtcy5pbmZvTWVzc2FnZS50ZXh0Q29sb3IsXG4gICAgZGlzcGxheTogXCJpbmxpbmUtYmxvY2tcIixcbiAgICAuLi4oJGluZm9EaXNhYmxlZCAmJiB7XG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICB9KSxcbiAgICAuLi4oJGd1dHRlciAmJiB7XG4gICAgICBwYWRkaW5nOiBgMCAwIDZweCAke3RoZW1lLnNwYWNlLnhzfWAsXG4gICAgfSksXG4gIH0pXG4pO1xuIl19 */");
-exports.StyledTypography = StyledTypography;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=InfoMessage.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.styles.cjs","sources":["../../../../../src/components/Forms/InfoMessage/InfoMessage.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 StyledTypography = styled(\n  HvTypography,\n  transientOptions\n)(\n  ({\n    $infoDisabled,\n    $gutter,\n  }: {\n    $infoDisabled: boolean;\n    $gutter: boolean;\n  }) => ({\n    color: theme.forms.infoMessage.textColor,\n    display: \"inline-block\",\n    ...($infoDisabled && {\n      color: theme.colors.secondary_60,\n    }),\n    ...($gutter && {\n      padding: `0 0 6px ${theme.space.xs}`,\n    }),\n  })\n);\n"],"names":["StyledTypography","HvTypography","process","env","NODE_ENV","_extends","target","transientOptions","label","$infoDisabled","$gutter","color","theme","forms","infoMessage","textColor","display","colors","secondary_60","padding","space","xs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOaA,MAAAA,4DACXC,WAAAA,cAAYC,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,EACCE;AAAAA,EACAC;AAIF,OAAO;AAAA,EACLC,OAAOC,YAAMC,MAAAA,MAAMC,YAAYC;AAAAA,EAC/BC,SAAS;AAAA,EACT,GAAIP,iBAAiB;AAAA,IACnBE,OAAOC,YAAAA,MAAMK,OAAOC;AAAAA,EACtB;AAAA,EACA,GAAIR,WAAW;AAAA,IACbS,SAAU,WAAUP,YAAAA,MAAMQ,MAAMC;AAAAA,EAClC;AACF,IAAEnB,QAAAC,IAAAC,s5CACJ;;"}
+{"version":3,"file":"InfoMessage.styles.cjs","sources":["../../../../../src/components/Forms/InfoMessage/InfoMessage.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInfoMessage\", {\n  root: { color: theme.forms.infoMessage.textColor, display: \"inline-block\" },\n  infoDisabled: { color: theme.colors.secondary_60 },\n  gutter: { padding: `0 0 6px ${theme.space.xs}` },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","color","theme","forms","infoMessage","textColor","display","infoDisabled","colors","secondary_60","gutter","padding","space","xs"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IAAEC,OAAOC,YAAMC,MAAAA,MAAMC,YAAYC;AAAAA,IAAWC,SAAS;AAAA,EAAe;AAAA,EAC1EC,cAAc;AAAA,IAAEN,OAAOC,YAAAA,MAAMM,OAAOC;AAAAA,EAAa;AAAA,EACjDC,QAAQ;AAAA,IAAEC,SAAU,WAAUT,YAAAA,MAAMU,MAAMC;AAAAA,EAAK;AACjD,CAAC;;;"}