@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,50 +1,57 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import clamp from "lodash/clamp";
-import { StyledRoot, StyledProgressContainer, StyledValue, StyledProgressBarContainer, StyledProgressBar } from "./ProgressBar.styles.js";
-import progressBarClasses from "./progressBarClasses.js";
+import { useClasses } from "./ProgressBar.styles.js";
+import { staticClasses } from "./ProgressBar.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../Typography/Typography.js";
 const HvProgressBar = (props) => {
   const {
     className,
-    classes,
+    classes: classesProp,
     value = 0,
     status = "inProgress",
     labelProps,
     ...others
   } = useDefaultProps("HvProgressBar", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    className: clsx(className, progressBarClasses.root, classes == null ? void 0 : classes.root, progressBarClasses.progress, classes == null ? void 0 : classes.progress),
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.root, classes.progress, className),
     role: "progressbar",
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     "aria-valuenow": clampedValue,
     ...others,
-    children: /* @__PURE__ */ jsxs(StyledProgressContainer, {
-      className: clsx(classes == null ? void 0 : classes.progressContainer, progressBarClasses.progressContainer),
-      children: [/* @__PURE__ */ jsx(StyledValue, {
-        className: clsx(progressBarClasses.progressBarLabel, classes == null ? void 0 : classes.progressBarLabel, status === "completed" && clsx(progressBarClasses.progressDone, classes == null ? void 0 : classes.progressDone)),
+    children: /* @__PURE__ */ jsxs("div", {
+      className: classes.progressContainer,
+      children: [/* @__PURE__ */ jsx(HvTypography, {
+        className: classes.progressBarLabel,
         variant: "caption2",
         style: {
           width: `${clampedValue}%`
         },
         ...labelProps,
         children: `${clampedValue}%`
-      }), /* @__PURE__ */ jsx(StyledProgressBarContainer, {
-        className: clsx(classes == null ? void 0 : classes.progressBarContainer, progressBarClasses.progressBarContainer),
-        children: /* @__PURE__ */ jsx(StyledProgressBar, {
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.progressBarContainer,
+        children: /* @__PURE__ */ jsx("div", {
           style: {
             width: `${clampedValue}%`
           },
-          className: clsx(progressBarClasses.progressBar, classes == null ? void 0 : classes.progressBar, status === "completed" && clsx(classes == null ? void 0 : classes.progressDone, progressBarClasses.progressDone), status === "error" && clsx(classes == null ? void 0 : classes.progressError, progressBarClasses.progressError)),
-          $status: status
+          className: cx(classes.progressBar, {
+            [classes.progressDone]: status === "completed",
+            [classes.progressError]: status === "error"
+          })
         })
       })]
     })
   });
 };
 export {
-  HvProgressBar
+  HvProgressBar,
+  staticClasses as progressBarClasses
 };
 //# sourceMappingURL=ProgressBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport clamp from \"lodash/clamp\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport {\n  StyledProgressBar,\n  StyledProgressBarContainer,\n  StyledProgressContainer,\n  StyledRoot,\n  StyledValue,\n} from \"./ProgressBar.styles\";\nimport progressBarClasses, { HvProgressBarClasses } from \"./progressBarClasses\";\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    ...others\n  } = useDefaultProps(\"HvProgressBar\", props);\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        progressBarClasses.root,\n        classes?.root,\n        progressBarClasses.progress,\n        classes?.progress\n      )}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <StyledProgressContainer\n        className={clsx(\n          classes?.progressContainer,\n          progressBarClasses.progressContainer\n        )}\n      >\n        <StyledValue\n          className={clsx(\n            progressBarClasses.progressBarLabel,\n            classes?.progressBarLabel,\n            status === \"completed\" &&\n              clsx(progressBarClasses.progressDone, classes?.progressDone)\n          )}\n          variant=\"caption2\"\n          style={{ width: `${clampedValue}%` }}\n          {...labelProps}\n        >\n          {`${clampedValue}%`}\n        </StyledValue>\n        <StyledProgressBarContainer\n          className={clsx(\n            classes?.progressBarContainer,\n            progressBarClasses.progressBarContainer\n          )}\n        >\n          <StyledProgressBar\n            style={{ width: `${clampedValue}%` }}\n            className={clsx(\n              progressBarClasses.progressBar,\n              classes?.progressBar,\n              status === \"completed\" &&\n                clsx(classes?.progressDone, progressBarClasses.progressDone),\n              status === \"error\" &&\n                clsx(classes?.progressError, progressBarClasses.progressError)\n            )}\n            $status={status}\n          />\n        </StyledProgressBarContainer>\n      </StyledProgressContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvProgressBar","props","className","classes","value","status","labelProps","others","useDefaultProps","clampedValue","clamp","StyledRoot","clsx","progressBarClasses","root","progress","role","children","StyledProgressContainer","progressContainer","_jsx","StyledValue","progressBarLabel","progressDone","variant","style","width","StyledProgressBarContainer","progressBarContainer","StyledProgressBar","progressBar","progressError","$status"],"mappings":";;;;;;AAuCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBP,KAAK;AAE1C,QAAMQ,eAAeC,MAAMN,OAAO,GAAG,GAAG;AAExC,6BACGO,YAAU;AAAA,IACTT,WAAWU,KACTV,WACAW,mBAAmBC,MACnBX,mCAASW,MACTD,mBAAmBE,UACnBZ,mCAASY,QACX;AAAA,IACAC,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAeP;AAAAA,IAAa,GACxBF;AAAAA,IAAMU,+BAETC,yBAAuB;AAAA,MACtBhB,WAAWU,KACTT,mCAASgB,mBACTN,mBAAmBM,iBACrB;AAAA,MAAEF,UAAA,CAEFG,oBAACC,aAAW;AAAA,QACVnB,WAAWU,KACTC,mBAAmBS,kBACnBnB,mCAASmB,kBACTjB,WAAW,eACTO,KAAKC,mBAAmBU,cAAcpB,mCAASoB,YAAY,CAC/D;AAAA,QACAC,SAAQ;AAAA,QACRC,OAAO;AAAA,UAAEC,OAAQ,GAAEjB;AAAAA,QAAgB;AAAA,QAAE,GACjCH;AAAAA,QAAUW,UAEZ,GAAER;AAAAA,MAAAA,CACO,GACbW,oBAACO,4BAA0B;AAAA,QACzBzB,WAAWU,KACTT,mCAASyB,sBACTf,mBAAmBe,oBACrB;AAAA,QAAEX,8BAEDY,mBAAiB;AAAA,UAChBJ,OAAO;AAAA,YAAEC,OAAQ,GAAEjB;AAAAA,UAAgB;AAAA,UACnCP,WAAWU,KACTC,mBAAmBiB,aACnB3B,mCAAS2B,aACTzB,WAAW,eACTO,KAAKT,mCAASoB,cAAcV,mBAAmBU,YAAY,GAC7DlB,WAAW,WACTO,KAAKT,mCAAS4B,eAAelB,mBAAmBkB,aAAa,CACjE;AAAA,UACAC,SAAS3B;AAAAA,QAAAA,CACV;AAAA,MAAA,CACyB,CAAC;AAAA,IAAA,CACN;AAAA,EAAA,CACf;AAEhB;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport clamp from \"lodash/clamp\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    ...others\n  } = useDefaultProps(\"HvProgressBar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <div\n      className={cx(classes.root, classes.progress, className)}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <div className={classes.progressContainer}>\n        <HvTypography\n          className={classes.progressBarLabel}\n          variant=\"caption2\"\n          style={{ width: `${clampedValue}%` }}\n          {...labelProps}\n        >\n          {`${clampedValue}%`}\n        </HvTypography>\n        <div className={classes.progressBarContainer}>\n          <div\n            style={{ width: `${clampedValue}%` }}\n            className={cx(classes.progressBar, {\n              [classes.progressDone]: status === \"completed\",\n              [classes.progressError]: status === \"error\",\n            })}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvProgressBar","props","className","classes","classesProp","value","status","labelProps","others","useDefaultProps","cx","useClasses","clampedValue","clamp","root","progress","role","children","progressContainer","_jsx","HvTypography","progressBarLabel","variant","style","width","progressBarContainer","progressBar","progressDone","progressError"],"mappings":";;;;;;AAoCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBR,KAAK;AAEpC,QAAA;AAAA,IAAEE;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,QAAMQ,eAAeC,MAAMR,OAAO,GAAG,GAAG;AAExC,6BACE,OAAA;AAAA,IACEH,WAAWQ,GAAGP,QAAQW,MAAMX,QAAQY,UAAUb,SAAS;AAAA,IACvDc,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAeJ;AAAAA,IAAa,GACxBJ;AAAAA,IAAMS,+BAEV,OAAA;AAAA,MAAKf,WAAWC,QAAQe;AAAAA,MAAkBD,UAAA,CACxCE,oBAACC,cAAY;AAAA,QACXlB,WAAWC,QAAQkB;AAAAA,QACnBC,SAAQ;AAAA,QACRC,OAAO;AAAA,UAAEC,OAAQ,GAAEZ;AAAAA,QAAgB;AAAA,QAAE,GACjCL;AAAAA,QAAUU,UAEZ,GAAEL;AAAAA,MAAAA,CACQ,GACdO,oBAAA,OAAA;AAAA,QAAKjB,WAAWC,QAAQsB;AAAAA,QAAqBR,8BAC3C,OAAA;AAAA,UACEM,OAAO;AAAA,YAAEC,OAAQ,GAAEZ;AAAAA,UAAgB;AAAA,UACnCV,WAAWQ,GAAGP,QAAQuB,aAAa;AAAA,YACjC,CAACvB,QAAQwB,YAAY,GAAGrB,WAAW;AAAA,YACnC,CAACH,QAAQyB,aAAa,GAAGtB,WAAW;AAAA,UAAA,CACrC;AAAA,QAAA,CACF;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AAET;"}

package/dist/esm/components/ProgressBar/ProgressBar.styles.js

@@ -1,99 +1,47 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
-import { HvTypography } from "../Typography/Typography.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-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("div", process.env.NODE_ENV === "production" ? {
-  target: "e1eucrrc4"
-} : {
-  target: "e1eucrrc4",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1mob3m4",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%"
-} : {
-  name: "1mob3m4",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Qcm9ncmVzc0Jhci9Qcm9ncmVzc0Jhci5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuXG4gIC8vIHByb2dyZXNzXG4gIHdpZHRoOiBcIjEwMCVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZ3Jlc3NDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFZhbHVlID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImVuZFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQcm9ncmVzc0JhckNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogNCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzQsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2dyZXNzQmFyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRzdGF0dXMgfTogeyAkc3RhdHVzPzogXCJpblByb2dyZXNzXCIgfCBcImNvbXBsZXRlZFwiIHwgXCJlcnJvclwiIH0pID0+ICh7XG4gIGJhY2tncm91bmRDb2xvcjogXCIjMDAwXCIsXG4gIGhlaWdodDogNCxcbiAgLi4uKCRzdGF0dXMgPT09IFwiY29tcGxldGVkXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLnBvc2l0aXZlLFxuICB9KSxcbiAgLi4uKCRzdGF0dXMgPT09IFwiZXJyb3JcIiAmJiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMubmVnYXRpdmUsXG4gIH0pLFxufSkpO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledProgressContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1eucrrc3"
-} : {
-  target: "e1eucrrc3",
-  label: "StyledProgressContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnVDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICAvLyBwcm9ncmVzc1xuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2dyZXNzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWYWx1ZSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJlbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZ3Jlc3NCYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IDQsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQcm9ncmVzc0JhciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc3RhdHVzIH06IHsgJHN0YXR1cz86IFwiaW5Qcm9ncmVzc1wiIHwgXCJjb21wbGV0ZWRcIiB8IFwiZXJyb3JcIiB9KSA9PiAoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwiIzAwMFwiLFxuICBoZWlnaHQ6IDQsXG4gIC4uLigkc3RhdHVzID09PSBcImNvbXBsZXRlZFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5wb3NpdGl2ZSxcbiAgfSksXG4gIC4uLigkc3RhdHVzID09PSBcImVycm9yXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICB9KSxcbn0pKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledValue = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e1eucrrc2"
-} : {
-  target: "e1eucrrc2",
-  label: "StyledValue"
-})(process.env.NODE_ENV === "production" ? {
-  name: "hdch65",
-  styles: "background-color:transparent;display:flex;justify-content:end"
-} : {
-  name: "hdch65",
-  styles: "background-color:transparent;display:flex;justify-content:end",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICAvLyBwcm9ncmVzc1xuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2dyZXNzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWYWx1ZSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJlbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZ3Jlc3NCYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IDQsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQcm9ncmVzc0JhciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc3RhdHVzIH06IHsgJHN0YXR1cz86IFwiaW5Qcm9ncmVzc1wiIHwgXCJjb21wbGV0ZWRcIiB8IFwiZXJyb3JcIiB9KSA9PiAoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwiIzAwMFwiLFxuICBoZWlnaHQ6IDQsXG4gIC4uLigkc3RhdHVzID09PSBcImNvbXBsZXRlZFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5wb3NpdGl2ZSxcbiAgfSksXG4gIC4uLigkc3RhdHVzID09PSBcImVycm9yXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICB9KSxcbn0pKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledProgressBarContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1eucrrc1"
-} : {
-  target: "e1eucrrc1",
-  label: "StyledProgressBarContainer"
-})({
-  display: "flex",
-  width: "100%",
-  height: 4,
-  backgroundColor: theme.colors.atmo4
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQjBDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICAvLyBwcm9ncmVzc1xuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2dyZXNzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWYWx1ZSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJlbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZ3Jlc3NCYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IDQsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQcm9ncmVzc0JhciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc3RhdHVzIH06IHsgJHN0YXR1cz86IFwiaW5Qcm9ncmVzc1wiIHwgXCJjb21wbGV0ZWRcIiB8IFwiZXJyb3JcIiB9KSA9PiAoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwiIzAwMFwiLFxuICBoZWlnaHQ6IDQsXG4gIC4uLigkc3RhdHVzID09PSBcImNvbXBsZXRlZFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5wb3NpdGl2ZSxcbiAgfSksXG4gIC4uLigkc3RhdHVzID09PSBcImVycm9yXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICB9KSxcbn0pKTtcbiJdfQ== */");
-const StyledProgressBar = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1eucrrc0"
-}, transientOptions) : _extends({}, {
-  target: "e1eucrrc0",
-  label: "StyledProgressBar"
-}, transientOptions))(({
-  $status
-}) => ({
-  backgroundColor: "#000",
-  height: 4,
-  ...$status === "completed" && {
+import { createClasses } from "../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvProgressBar", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    // progress
+    width: "100%"
+  },
+  progress: {
+    width: "100%"
+  },
+  progressBar: {
+    backgroundColor: "#000",
+    height: 4
+  },
+  progressBarLabel: {
+    backgroundColor: "transparent",
+    display: "flex",
+    justifyContent: "end"
+  },
+  progressContainer: {
+    width: "100%"
+  },
+  progressDone: {
     backgroundColor: theme.colors.positive
   },
-  ...$status === "error" && {
+  progressBarContainer: {
+    display: "flex",
+    width: "100%",
+    height: 4,
+    backgroundColor: theme.colors.atmo4
+  },
+  progressError: {
     backgroundColor: theme.colors.negative
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQ2lDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvUHJvZ3Jlc3NCYXIvUHJvZ3Jlc3NCYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICAvLyBwcm9ncmVzc1xuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2dyZXNzQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWYWx1ZSA9IHN0eWxlZChIdlR5cG9ncmFwaHkpKHtcbiAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJlbmRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZ3Jlc3NCYXJDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IDQsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQcm9ncmVzc0JhciA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc3RhdHVzIH06IHsgJHN0YXR1cz86IFwiaW5Qcm9ncmVzc1wiIHwgXCJjb21wbGV0ZWRcIiB8IFwiZXJyb3JcIiB9KSA9PiAoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IFwiIzAwMFwiLFxuICBoZWlnaHQ6IDQsXG4gIC4uLigkc3RhdHVzID09PSBcImNvbXBsZXRlZFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5wb3NpdGl2ZSxcbiAgfSksXG4gIC4uLigkc3RhdHVzID09PSBcImVycm9yXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5lZ2F0aXZlLFxuICB9KSxcbn0pKTtcbiJdfQ== */");
+});
 export {
-  StyledProgressBar,
-  StyledProgressBarContainer,
-  StyledProgressContainer,
-  StyledRoot,
-  StyledValue
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=ProgressBar.styles.js.map

package/dist/esm/components/ProgressBar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","sources":["../../../../src/components/ProgressBar/ProgressBar.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(\"div\")({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n\n  // progress\n  width: \"100%\",\n});\n\nexport const StyledProgressContainer = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport const StyledValue = styled(HvTypography)({\n  backgroundColor: \"transparent\",\n  display: \"flex\",\n  justifyContent: \"end\",\n});\n\nexport const StyledProgressBarContainer = styled(\"div\")({\n  display: \"flex\",\n  width: \"100%\",\n  height: 4,\n  backgroundColor: theme.colors.atmo4,\n});\n\nexport const StyledProgressBar = styled(\n  \"div\",\n  transientOptions\n)(({ $status }: { $status?: \"inProgress\" | \"completed\" | \"error\" }) => ({\n  backgroundColor: \"#000\",\n  height: 4,\n  ...($status === \"completed\" && {\n    backgroundColor: theme.colors.positive,\n  }),\n  ...($status === \"error\" && {\n    backgroundColor: theme.colors.negative,\n  }),\n}));\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledProgressContainer","StyledValue","HvTypography","StyledProgressBarContainer","display","width","height","backgroundColor","theme","colors","atmo4","StyledProgressBar","_extends","transientOptions","$status","positive","negative"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAQtC;AAEM,MAAMC,0BAAiC,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEnD;AAEM,MAAME,cAAqBC,wBAAAA,cAAYZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAI9C;AAEM,MAAMI,6BAAoC,wBAAA,OAAKb,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtDU,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,iBAAiBC,MAAMC,OAAOC;AAChC,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qjEAAA;AAEWmB,MAAAA,4CACX,OAAKrB,QAAAC,IAAAC,4BAAAoB,SAAA,IAAA;AAAA,EAAAnB,QAAA;AAAA,GACLoB,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAnB,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBmB,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEC;AAA4D,OAAO;AAAA,EACtEP,iBAAiB;AAAA,EACjBD,QAAQ;AAAA,EACR,GAAIQ,YAAY,eAAe;AAAA,IAC7BP,iBAAiBC,MAAMC,OAAOM;AAAAA,EAChC;AAAA,EACA,GAAID,YAAY,WAAW;AAAA,IACzBP,iBAAiBC,MAAMC,OAAOO;AAAAA,EAChC;AACF,IAAE1B,QAAAC,IAAAC,aAAC,eAAA,KAAA,qjEAAA;"}
+{"version":3,"file":"ProgressBar.styles.js","sources":["../../../../src/components/ProgressBar/ProgressBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvProgressBar\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    // progress\n    width: \"100%\",\n  },\n  progress: {\n    width: \"100%\",\n  },\n  progressBar: {\n    backgroundColor: \"#000\",\n    height: 4,\n  },\n  progressBarLabel: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    justifyContent: \"end\",\n  },\n  progressContainer: {\n    width: \"100%\",\n  },\n  progressDone: {\n    backgroundColor: theme.colors.positive,\n  },\n  progressBarContainer: {\n    display: \"flex\",\n    width: \"100%\",\n    height: 4,\n    backgroundColor: theme.colors.atmo4,\n  },\n  progressError: {\n    backgroundColor: theme.colors.negative,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","alignItems","justifyContent","width","progress","progressBar","backgroundColor","height","progressBarLabel","progressContainer","progressDone","theme","colors","positive","progressBarContainer","atmo4","progressError","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,gBAAgB;AAAA;AAAA,IAGhBC,OAAO;AAAA,EACT;AAAA,EACAC,UAAU;AAAA,IACRD,OAAO;AAAA,EACT;AAAA,EACAE,aAAa;AAAA,IACXC,iBAAiB;AAAA,IACjBC,QAAQ;AAAA,EACV;AAAA,EACAC,kBAAkB;AAAA,IAChBF,iBAAiB;AAAA,IACjBP,SAAS;AAAA,IACTG,gBAAgB;AAAA,EAClB;AAAA,EACAO,mBAAmB;AAAA,IACjBN,OAAO;AAAA,EACT;AAAA,EACAO,cAAc;AAAA,IACZJ,iBAAiBK,MAAMC,OAAOC;AAAAA,EAChC;AAAA,EACAC,sBAAsB;AAAA,IACpBf,SAAS;AAAA,IACTI,OAAO;AAAA,IACPI,QAAQ;AAAA,IACRD,iBAAiBK,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbV,iBAAiBK,MAAMC,OAAOK;AAAAA,EAChC;AACF,CAAC;"}

package/dist/esm/components/Radio/Radio.js

@@ -1,17 +1,19 @@
 import { useState, useCallback } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
-import { StyledHvBaseRadio, StyledHvFormElement, StyledDivContainer, StyledHvLabel } from "./Radio.styles.js";
-import radioClasses from "./radioClasses.js";
+import { useClasses } from "./Radio.styles.js";
+import { staticClasses } from "./Radio.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
 import { isInvalid } from "../Forms/FormElement/validationStates.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const HvRadio = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -36,6 +38,10 @@ const HvRadio = (props) => {
     onBlur,
     ...others
   } = useDefaultProps("HvRadio", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvradio");
   const [focusVisible, setFocusVisible] = useState(false);
   const onFocusVisibleCallback = useCallback((evt) => {
@@ -58,11 +64,12 @@ const HvRadio = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  const radio = /* @__PURE__ */ jsx(StyledHvBaseRadio, {
+  const radio = /* @__PURE__ */ jsx(HvBaseRadio, {
     id: label ? setId(elementId, "input") : setId(id, "input"),
     name,
-    className: clsx(radioClasses.radio, classes == null ? void 0 : classes.radio, isStateInvalid && clsx(radioClasses.invalidRadio, classes == null ? void 0 : classes.invalidRadio)),
-    $invalid: isStateInvalid,
+    className: cx(classes.radio, {
+      [classes.invalidRadio]: isStateInvalid
+    }),
     disabled,
     readOnly,
     onChange: onLocalChange,
@@ -81,25 +88,25 @@ const HvRadio = (props) => {
     onBlur: onBlurCallback,
     ...others
   });
-  return /* @__PURE__ */ jsxs(StyledHvFormElement, {
+  return /* @__PURE__ */ jsxs(HvFormElement, {
     id,
     name,
     status: status || "standBy",
     disabled,
     required,
     readOnly,
-    className: clsx(className, radioClasses.root, classes == null ? void 0 : classes.root),
-    children: [hasLabel ? /* @__PURE__ */ jsxs(StyledDivContainer, {
-      className: clsx(radioClasses.container, classes == null ? void 0 : classes.container, disabled && clsx(radioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && label && clsx(radioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible), isStateInvalid && clsx(radioClasses.invalidContainer, classes == null ? void 0 : classes.invalidContainer)),
-      $invalid: isStateInvalid,
-      $focusVisible: !!(focusVisible && label),
-      $disabled: disabled,
-      children: [radio, /* @__PURE__ */ jsx(StyledHvLabel, {
+    className: cx(classes.root, className),
+    children: [hasLabel ? /* @__PURE__ */ jsxs("div", {
+      className: cx(classes.container, {
+        [classes.disabled]: disabled,
+        [classes.focusVisible]: !!(focusVisible && label),
+        [classes.invalidContainer]: isStateInvalid
+      }),
+      children: [radio, /* @__PURE__ */ jsx(HvLabel, {
         id: setId(elementId, "label"),
         htmlFor: setId(elementId, "input"),
         label,
-        className: clsx(radioClasses.label, classes == null ? void 0 : classes.label),
-        $disabled: disabled,
+        className: classes.label,
         ...labelProps
       })]
     }) : radio, canShowError && /* @__PURE__ */ jsx(HvWarningText, {
@@ -110,6 +117,7 @@ const HvRadio = (props) => {
   });
 };
 export {
-  HvRadio
+  HvRadio,
+  staticClasses as radioClasses
 };
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvWarningText, HvLabelProps, isInvalid } from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\n\nimport {\n  StyledDivContainer,\n  StyledHvBaseRadio,\n  StyledHvFormElement,\n  StyledHvLabel,\n} from \"./Radio.styles\";\nimport radioClasses, { HvRadioClasses } from \"./radioClasses\";\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\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.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = (props: HvRadioProps) => {\n  const {\n    classes,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n    checked,\n    defaultChecked = false,\n    onChange,\n    status = \"standBy\",\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvRadio\", props);\n\n  const elementId = useUniqueId(id, \"hvradio\");\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n      setIsChecked(newChecked);\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, setIsChecked, value]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled\n  const canShowError =\n    ariaErrorMessage == null &&\n    status !== undefined &&\n    statusMessage !== undefined;\n\n  const hasLabel = label != null;\n\n  const isStateInvalid = isInvalid(status);\n\n  let errorMessageId: string | undefined;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const radio = (\n    <StyledHvBaseRadio\n      id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={clsx(\n        radioClasses.radio,\n        classes?.radio,\n        isStateInvalid && clsx(radioClasses.invalidRadio, classes?.invalidRadio)\n      )}\n      $invalid={isStateInvalid}\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={onLocalChange}\n      value={value}\n      checked={isChecked}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n\n  return (\n    <StyledHvFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, radioClasses.root, classes?.root)}\n    >\n      {hasLabel ? (\n        <StyledDivContainer\n          className={clsx(\n            radioClasses.container,\n            classes?.container,\n            disabled && clsx(radioClasses.disabled, classes?.disabled),\n            focusVisible &&\n              label &&\n              clsx(radioClasses.focusVisible, classes?.focusVisible),\n            isStateInvalid &&\n              clsx(radioClasses.invalidContainer, classes?.invalidContainer)\n          )}\n          $invalid={isStateInvalid}\n          $focusVisible={!!(focusVisible && label)}\n          $disabled={disabled}\n        >\n          {radio}\n          <StyledHvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={clsx(radioClasses.label, classes?.label)}\n            $disabled={disabled}\n            {...labelProps}\n          />\n        </StyledDivContainer>\n      ) : (\n        radio\n      )}\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </StyledHvFormElement>\n  );\n};\n"],"names":["HvRadio","props","classes","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","StyledHvBaseRadio","clsx","radioClasses","invalidRadio","$invalid","StyledHvFormElement","root","children","_jsxs","StyledDivContainer","container","invalidContainer","$focusVisible","$disabled","_jsx","StyledHvLabel","htmlFor","HvWarningText","disableBorder"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvBaseRadio } from \"@core/components/BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\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.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = (props: HvRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    labelProps,\n    checked,\n    defaultChecked = false,\n    onChange,\n    status = \"standBy\",\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvradio\");\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n      setIsChecked(newChecked);\n\n      onChange?.(evt, newChecked, value);\n    },\n    [onChange, setIsChecked, value]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled\n  const canShowError =\n    ariaErrorMessage == null &&\n    status !== undefined &&\n    statusMessage !== undefined;\n\n  const hasLabel = label != null;\n\n  const isStateInvalid = isInvalid(status);\n\n  let errorMessageId: string | undefined;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const radio = (\n    <HvBaseRadio\n      id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={cx(classes.radio, { [classes.invalidRadio]: isStateInvalid })}\n      disabled={disabled}\n      readOnly={readOnly}\n      onChange={onLocalChange}\n      value={value}\n      checked={isChecked}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {hasLabel ? (\n        <div\n          className={cx(classes.container, {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: !!(focusVisible && label),\n            [classes.invalidContainer]: isStateInvalid,\n          })}\n        >\n          {radio}\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        </div>\n      ) : (\n        radio\n      )}\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvRadio","props","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","semantic","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","HvBaseRadio","invalidRadio","HvFormElement","root","children","_jsxs","container","invalidContainer","_jsx","HvLabel","htmlFor","HvWarningText","disableBorder"],"mappings":";;;;;;;;;;;;;AA2JaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC,iBAAiB;AAAA,IACjBC;AAAAA,IACAC,SAAS;AAAA,IACTC;AAAAA,IACA,qBAAqBC;AAAAA,IACrBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAW1B,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,WAAW1B,WAAW;AAExC2B,QAAAA,YAAYC,YAAY1B,IAAI,SAAS;AAE3C,QAAM,CAAC2B,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBT,qDAAiBa;AAAAA,EAAG,GAEtB,CAACb,cAAc,CACjB;AAEMc,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBR,qCAASY;AAAAA,EAAG,GAEd,CAACZ,MAAM,CACT;AAEM,QAAA,CAACc,WAAWC,YAAY,IAAIC,cAChCzB,SACA0B,QAAQzB,cAAc,CACxB;AAEA,QAAM0B,gBAAgBP,YACpB,CAACC,KAA0CO,eAAwB;AACjEJ,iBAAaI,UAAU;AAEZP,yCAAAA,KAAKO,YAAYrC;AAAAA,EAE9B,GAAA,CAACW,UAAUsB,cAAcjC,KAAK,CAChC;AAKA,QAAMsC,eACJxB,oBAAoB,QACpBF,WAAW2B,UACX1B,kBAAkB0B;AAEpB,QAAMC,WAAWpC,SAAS;AAEpBqC,QAAAA,iBAAiBC,UAAU9B,MAAM;AAEnC+B,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBL,eACbM,MAAMrB,WAAW,OAAO,IACxBT;AAAAA,EACN;AAEM+B,QAAAA,4BACHC,aAAW;AAAA,IACVhD,IAAIM,QAAQwC,MAAMrB,WAAW,OAAO,IAAIqB,MAAM9C,IAAI,OAAO;AAAA,IACzDC;AAAAA,IACAF,WAAWwB,GAAG1B,QAAQkD,OAAO;AAAA,MAAE,CAAClD,QAAQoD,YAAY,GAAGN;AAAAA,IAAAA,CAAgB;AAAA,IACvEtC;AAAAA,IACAD;AAAAA,IACAS,UAAUyB;AAAAA,IACVpC;AAAAA,IACAS,SAASuB;AAAAA,IACTjB;AAAAA,IACAC,YAAY;AAAA,MACV,gBAAgByB,iBAAiB,OAAOF;AAAAA,MACxC,qBAAqBI;AAAAA,MACrB,cAActC;AAAAA,MACd,mBAAmBC;AAAAA,MACnB,oBAAoBC;AAAAA,MACpB,GAAGS;AAAAA,IACL;AAAA,IACAC,gBAAgBW;AAAAA,IAChBV,QAAQa;AAAAA,IAAe,GACnBZ;AAAAA,EAAAA,CACL;AAGH,8BACG6B,eAAa;AAAA,IACZlD;AAAAA,IACAC;AAAAA,IACAa,QAAQA,UAAU;AAAA,IAClBT;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACAL,WAAWwB,GAAG1B,QAAQsD,MAAMpD,SAAS;AAAA,IAAEqD,UAAA,CAEtCV,WACCW,qBAAA,OAAA;AAAA,MACEtD,WAAWwB,GAAG1B,QAAQyD,WAAW;AAAA,QAC/B,CAACzD,QAAQQ,QAAQ,GAAGA;AAAAA,QACpB,CAACR,QAAQ8B,YAAY,GAAG,CAAC,EAAEA,gBAAgBrB;AAAAA,QAC3C,CAACT,QAAQ0D,gBAAgB,GAAGZ;AAAAA,MAAAA,CAC7B;AAAA,MAAES,UAEFL,CAAAA,OACDS,oBAACC,SAAO;AAAA,QACNzD,IAAI8C,MAAMrB,WAAW,OAAO;AAAA,QAC5BiC,SAASZ,MAAMrB,WAAW,OAAO;AAAA,QACjCnB;AAAAA,QACAP,WAAWF,QAAQS;AAAAA,QAAM,GACrBI;AAAAA,MAAAA,CACL,CAAC;AAAA,IACC,CAAA,IAELqC,OAEDP,oCACEmB,eAAa;AAAA,MAAC3D,IAAI8C,MAAMrB,WAAW,OAAO;AAAA,MAAGmC,eAAa;AAAA,MAAAR,UACxDrC;AAAAA,IAAAA,CACY,CAChB;AAAA,EAAA,CACY;AAEnB;"}