@hitachivantara/uikit-react-core 5.0.0-next.11 → 5.0.0-next.14

package/dist/esm/components/Pagination/Select.js

@@ -1,7 +1,7 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import clsx from "clsx";
 import { StyledRoot } from "./Select.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -10,7 +10,10 @@ import { HvSelectionList } from "../SelectionList/SelectionList.js";
 const Option = ({
   children,
   ...others
-}) => /* @__PURE__ */ jsx(HvListItem, { ...others, children });
+}) => /* @__PURE__ */ jsx(HvListItem, {
+  ...others,
+  children
+});
 const HvSelect = ({
   className,
   classes,
@@ -38,12 +41,33 @@ const HvSelect = ({
       return true;
     });
   };
-  return /* @__PURE__ */ jsx(StyledRoot, { children: /* @__PURE__ */ jsx(HvBaseDropdown, { className, classes: {
-    root: clsx(classes.base, classes.root),
-    anchor: classes.anchor,
-    header: classes.header,
-    headerOpen: classes.headerOpen
-  }, expanded: open, onToggle: handleToggle, onContainerCreation: setFocusToContent, placeholder: /* @__PURE__ */ jsx(HvTypography, { children: value }), disabled, variableWidth: true, ...others, children: /* @__PURE__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, { value, onChange: handleSelect, children }) }) }) });
+  return /* @__PURE__ */ jsx(StyledRoot, {
+    children: /* @__PURE__ */ jsx(HvBaseDropdown, {
+      className,
+      classes: {
+        root: clsx(classes.base, classes.root),
+        anchor: classes.anchor,
+        header: classes.header,
+        headerOpen: classes.headerOpen
+      },
+      expanded: open,
+      onToggle: handleToggle,
+      onContainerCreation: setFocusToContent,
+      placeholder: /* @__PURE__ */ jsx(HvTypography, {
+        children: value
+      }),
+      disabled,
+      variableWidth: true,
+      ...others,
+      children: /* @__PURE__ */ jsx(HvPanel, {
+        children: /* @__PURE__ */ jsx(HvSelectionList, {
+          value,
+          onChange: handleSelect,
+          children
+        })
+      })
+    })
+  });
 };
 export {
   Option,

package/dist/esm/components/Pagination/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  HvBaseDropdown,\n  HvSelectionList,\n  HvListItem,\n  HvPanel,\n  HvTypography,\n} from \"../index\";\nimport { StyledRoot } from \"./Select.styles\";\n\nexport const Option = ({ children, ...others }) => (\n  <HvListItem {...others}>{children}</HvListItem>\n);\n\nconst HvSelect = ({\n  className,\n  classes,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <StyledRoot>\n      <HvBaseDropdown\n        className={className}\n        classes={{\n          root: clsx(classes.base, classes.root),\n          anchor: classes.anchor,\n          header: classes.header,\n          headerOpen: classes.headerOpen,\n        }}\n        expanded={open}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={<HvTypography>{value}</HvTypography>}\n        disabled={disabled}\n        variableWidth\n        {...others}\n      >\n        <HvPanel>\n          <HvSelectionList value={value} onChange={handleSelect}>\n            {children}\n          </HvSelectionList>\n        </HvPanel>\n      </HvBaseDropdown>\n    </StyledRoot>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","children","others","HvSelect","className","classes","onChange","disabled","value","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","root","clsx","base","anchor","header","headerOpen"],"mappings":";;;;;;;;;AAWO,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,KAAaC;AAAO,MAC1C,oBAAA,YAAA,EAAeA,GAAAA,QAASD,SAAS,CAAA;AAGpC,MAAME,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAP;AAAAA,KACGC;AACL,MAAM;AACJ,QAAM,CAACO,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAeA,CAACC,KAAKC,QAAQ;AACjCR,yCAAWO,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAeA,CAACC,MAAMC,MAAM;AAChCP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBAAqBC,CAAiB,iBAAA;AACpCC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAO;AACT,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,SACG,oBAAA,YAAA,EACC,UAAC,oBAAA,gBAAA,EACC,WACA,SAAS;AAAA,IACPC,MAAMC,KAAKtB,QAAQuB,MAAMvB,QAAQqB,IAAI;AAAA,IACrCG,QAAQxB,QAAQwB;AAAAA,IAChBC,QAAQzB,QAAQyB;AAAAA,IAChBC,YAAY1B,QAAQ0B;AAAAA,EAAAA,GAEtB,UAAUtB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAa,oBAAC,cAAcV,EAAAA,UAAAA,MAAM,CAAA,GAClC,UACA,eAAa,MACb,GAAIN,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUU,cACtCX,SAAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  HvBaseDropdown,\n  HvSelectionList,\n  HvListItem,\n  HvPanel,\n  HvTypography,\n} from \"../index\";\nimport { StyledRoot } from \"./Select.styles\";\n\nexport const Option = ({ children, ...others }) => (\n  <HvListItem {...others}>{children}</HvListItem>\n);\n\nconst HvSelect = ({\n  className,\n  classes,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <StyledRoot>\n      <HvBaseDropdown\n        className={className}\n        classes={{\n          root: clsx(classes.base, classes.root),\n          anchor: classes.anchor,\n          header: classes.header,\n          headerOpen: classes.headerOpen,\n        }}\n        expanded={open}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={<HvTypography>{value}</HvTypography>}\n        disabled={disabled}\n        variableWidth\n        {...others}\n      >\n        <HvPanel>\n          <HvSelectionList value={value} onChange={handleSelect}>\n            {children}\n          </HvSelectionList>\n        </HvPanel>\n      </HvBaseDropdown>\n    </StyledRoot>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","children","others","HvListItem","HvSelect","className","classes","onChange","disabled","value","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","StyledRoot","HvBaseDropdown","root","clsx","base","anchor","header","headerOpen","expanded","onToggle","onContainerCreation","placeholder","HvTypography","variableWidth","HvPanel","HvSelectionList"],"mappings":";;;;;;;;;AAWO,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAU,GAAGC;AAAO,0BAC1CC,YAAU;AAAA,EAAA,GAAKD;AAAAA,EAAMD;AAAW,CAClC;AAED,MAAMG,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAR;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACQ,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAeA,CAACC,KAAKC,QAAQ;AACjCR,yCAAWO,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAeA,CAACC,MAAMC,MAAM;AAChCP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBAAqBC,CAAiB,iBAAA;AACpCC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAO;AACT,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAA1B,8BACR2B,gBAAc;AAAA,MACbvB;AAAAA,MACAC,SAAS;AAAA,QACPuB,MAAMC,KAAKxB,QAAQyB,MAAMzB,QAAQuB,IAAI;AAAA,QACrCG,QAAQ1B,QAAQ0B;AAAAA,QAChBC,QAAQ3B,QAAQ2B;AAAAA,QAChBC,YAAY5B,QAAQ4B;AAAAA,MACtB;AAAA,MACAC,UAAUzB;AAAAA,MACV0B,UAAUpB;AAAAA,MACVqB,qBAAqBlB;AAAAA,MACrBmB,iCAAcC,cAAY;AAAA,QAAAtC,UAAEQ;AAAAA,MAAAA,CAAsB;AAAA,MAClDD;AAAAA,MACAgC,eAAa;AAAA,MAAA,GACTtC;AAAAA,MAAMD,8BAETwC,SAAO;AAAA,QAAAxC,8BACLyC,iBAAe;AAAA,UAACjC;AAAAA,UAAcF,UAAUM;AAAAA,UAAaZ;AAAAA,QAAAA,CAC3C;AAAA,MAAA,CACO;AAAA,IAAA,CACV;AAAA,EAAA,CAED;AAEjB;"}

package/dist/esm/components/Pagination/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseDropdownClasses } from \"components\";\n\nexport const StyledRoot = styled(\"div\")({\n  [`& .${baseDropdownClasses.root}`]: {\n    width: \"auto\",\n\n    [`& > div.${baseDropdownClasses.anchor}`]: {\n      width: \"auto\",\n    },\n    [`& .${baseDropdownClasses.header}`]: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n    [`& .${baseDropdownClasses.headerOpen}`]: {\n      backgroundColor: theme.colors.atmo1,\n      borderColor: theme.colors.atmo1,\n    },\n    [`& .${baseDropdownClasses.selection}`]: {\n      borderRadius: theme.pagination.pageSizeBorderRadius,\n      border: `1px solid ${theme.pagination.pageSizeBorderColor}`,\n    },\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","baseDropdownClasses","root","width","anchor","header","backgroundColor","borderColor","headerOpen","theme","colors","atmo1","selection","borderRadius","pagination","pageSizeBorderRadius","border","pageSizeBorderColor"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtC,CAAE,MAAKC,oBAAoBC,SAAS;AAAA,IAClCC,OAAO;AAAA,IAEP,CAAE,WAAUF,oBAAoBG,WAAW;AAAA,MACzCD,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKF,oBAAoBI,WAAW;AAAA,MACpCC,iBAAiB;AAAA,MACjBC,aAAa;AAAA,IACf;AAAA,IACA,CAAE,MAAKN,oBAAoBO,eAAe;AAAA,MACxCF,iBAAiBG,MAAMC,OAAOC;AAAAA,MAC9BJ,aAAaE,MAAMC,OAAOC;AAAAA,IAC5B;AAAA,IACA,CAAE,MAAKV,oBAAoBW,cAAc;AAAA,MACvCC,cAAcJ,MAAMK,WAAWC;AAAAA,MAC/BC,QAAS,aAAYP,MAAMK,WAAWG;AAAAA,IACxC;AAAA,EACF;AACF,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,ihDAAA;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseDropdownClasses } from \"components\";\n\nexport const StyledRoot = styled(\"div\")({\n  [`& .${baseDropdownClasses.root}`]: {\n    width: \"auto\",\n\n    [`& > div.${baseDropdownClasses.anchor}`]: {\n      width: \"auto\",\n    },\n    [`& .${baseDropdownClasses.header}`]: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n    [`& .${baseDropdownClasses.headerOpen}`]: {\n      backgroundColor: theme.colors.atmo1,\n      borderColor: theme.colors.atmo1,\n    },\n    [`& .${baseDropdownClasses.selection}`]: {\n      borderRadius: theme.pagination.pageSizeBorderRadius,\n      border: `1px solid ${theme.pagination.pageSizeBorderColor}`,\n    },\n  },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","baseDropdownClasses","root","width","anchor","header","backgroundColor","borderColor","headerOpen","theme","colors","atmo1","selection","borderRadius","pagination","pageSizeBorderRadius","border","pageSizeBorderColor"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtC,CAAE,MAAKC,oBAAoBC,MAAM,GAAG;AAAA,IAClCC,OAAO;AAAA,IAEP,CAAE,WAAUF,oBAAoBG,QAAQ,GAAG;AAAA,MACzCD,OAAO;AAAA,IACT;AAAA,IACA,CAAE,MAAKF,oBAAoBI,QAAQ,GAAG;AAAA,MACpCC,iBAAiB;AAAA,MACjBC,aAAa;AAAA,IACf;AAAA,IACA,CAAE,MAAKN,oBAAoBO,YAAY,GAAG;AAAA,MACxCF,iBAAiBG,MAAMC,OAAOC;AAAAA,MAC9BJ,aAAaE,MAAMC,OAAOC;AAAAA,IAC5B;AAAA,IACA,CAAE,MAAKV,oBAAoBW,WAAW,GAAG;AAAA,MACvCC,cAAcJ,MAAMK,WAAWC;AAAAA,MAC/BC,QAAS,aAAYP,MAAMK,WAAWG;AAAAA,IACxC;AAAA,EACF;AACF,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,ihDAAA;"}

package/dist/esm/components/Panel/Panel.js

@@ -1,16 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledDiv } from "./Panel.styles.js";
 import panelClasses from "./panelClasses.js";
-const HvPanel = (props) => {
-  const {
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvPanel = ({
+  id,
+  className,
+  classes,
+  children,
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx(StyledDiv, {
     id,
-    className,
-    classes,
-    children,
-    ...others
-  } = props;
-  return /* @__PURE__ */ jsx(StyledDiv, { id, className: clsx(className, panelClasses.root, classes == null ? void 0 : classes.root), ...others, children });
+    className: clsx(className, panelClasses.root, classes == null ? void 0 : classes.root),
+    ...others,
+    children
+  });
 };
 export {
   HvPanel

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledDiv } from \"./Panel.styles\";\nimport panelClasses, { HvPanelClasses } from \"./panelClasses\";\n\nexport type PanelProps = HvBaseProps & {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n};\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: PanelProps) => {\n  const { id, className, classes, children, ...others } = props;\n\n  return (\n    <StyledDiv\n      id={id}\n      className={clsx(className, panelClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvPanel","props","id","className","classes","children","others","clsx","panelClasses","root"],"mappings":";;;;AAmBaA,MAAAA,UAAUA,CAACC,UAAsB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAWC;AAAAA,IAASC;AAAAA,OAAaC;AAAAA,EAAWL,IAAAA;AAExD,SACG,oBAAA,WAAA,EACC,IACA,WAAWM,KAAKJ,WAAWK,aAAaC,MAAML,mCAASK,IAAI,GACvDH,GAAAA,QAEHD,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"Panel.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledDiv } from \"./Panel.styles\";\nimport panelClasses, { HvPanelClasses } from \"./panelClasses\";\n\nexport type HvPanelProps = HvBaseProps & {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n};\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = ({\n  id,\n  className,\n  classes,\n  children,\n  ...others\n}: HvPanelProps) => {\n  return (\n    <StyledDiv\n      id={id}\n      className={clsx(className, panelClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvPanel","id","className","classes","children","others","StyledDiv","clsx","panelClasses","root"],"mappings":";;;;AAeO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACS,MAAM;AAClB,6BACGC,WAAS;AAAA,IACRL;AAAAA,IACAC,WAAWK,KAAKL,WAAWM,aAAaC,MAAMN,mCAASM,IAAI;AAAA,IAAE,GACzDJ;AAAAA,IAAMD;AAAAA,EAAAA,CAGA;AAEhB;"}

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import clamp from "lodash/clamp";
 import { StyledRoot, StyledProgressContainer, StyledValue, StyledProgressBarContainer, StyledProgressBar } from "./ProgressBar.styles.js";
 import progressBarClasses from "./progressBarClasses.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const HvProgressBar = (props) => {
   const {
     className,
@@ -13,14 +13,35 @@ const HvProgressBar = (props) => {
     ...others
   } = props;
   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), 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)), 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, { 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 }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(StyledRoot, {
+    className: clsx(className, progressBarClasses.root, classes == null ? void 0 : classes.root, progressBarClasses.progress, classes == null ? void 0 : classes.progress),
+    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)),
+        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, {
+          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
+        })
+      })]
+    })
+  });
 };
 export {
   HvProgressBar

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 { HvTypographyProps } from \"../Typography\";\nimport clamp from \"lodash/clamp\";\nimport { HvBaseProps } from \"../../types\";\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 type HvProgressBarProps = 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  } = 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","clampedValue","clamp","clsx","progressBarClasses","root","progress","progressContainer","progressBarLabel","progressDone","width","progressBarContainer","progressBar","progressError"],"mappings":";;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEJ,QAAMO,eAAeC,MAAML,OAAO,GAAG,GAAG;AAExC,SACG,oBAAA,YAAA,EACC,WAAWM,KACTR,WACAS,mBAAmBC,MACnBT,mCAASS,MACTD,mBAAmBE,UACnBV,mCAASU,QAAQ,GAEnB,MAAK,eACL,iBAAe,GACf,iBAAe,KACf,iBAAeL,cACXD,GAAAA,QAEJ,UAAA,qBAAC,yBACC,EAAA,WAAWG,KACTP,mCAASW,mBACTH,mBAAmBG,iBAAiB,GAGtC,UAAA;AAAA,IAAA,oBAAC,eACC,WAAWJ,KACTC,mBAAmBI,kBACnBZ,mCAASY,kBACTV,WAAW,eACTK,KAAKC,mBAAmBK,cAAcb,mCAASa,YAAY,CAAC,GAEhE,SAAQ,YACR,OAAO;AAAA,MAAEC,OAAQ,GAAET;AAAAA,IAAAA,GACfF,GAAAA,YAEF,UAAA,GAAEE,iBACN;AAAA,IACA,oBAAC,4BACC,EAAA,WAAWE,KACTP,mCAASe,sBACTP,mBAAmBO,oBAAoB,GAGzC,UAAC,oBAAA,mBAAA,EACC,OAAO;AAAA,MAAED,OAAQ,GAAET;AAAAA,IAAgB,GACnC,WAAWE,KACTC,mBAAmBQ,aACnBhB,mCAASgB,aACTd,WAAW,eACTK,KAAKP,mCAASa,cAAcL,mBAAmBK,YAAY,GAC7DX,WAAW,WACTK,KAAKP,mCAASiB,eAAeT,mBAAmBS,aAAa,CAAC,GAElE,SAASf,OAAAA,CAAO,EAEpB,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvTypographyProps } from \"../Typography\";\nimport clamp from \"lodash/clamp\";\nimport { HvBaseProps } from \"../../types\";\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 type HvProgressBarProps = 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  } = 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","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":";;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EACDN,IAAAA;AAEJ,QAAMO,eAAeC,MAAML,OAAO,GAAG,GAAG;AAExC,6BACGM,YAAU;AAAA,IACTR,WAAWS,KACTT,WACAU,mBAAmBC,MACnBV,mCAASU,MACTD,mBAAmBE,UACnBX,mCAASW,QAAQ;AAAA,IAEnBC,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAeP;AAAAA,IAAa,GACxBD;AAAAA,IAAMS,+BAETC,yBAAuB;AAAA,MACtBf,WAAWS,KACTR,mCAASe,mBACTN,mBAAmBM,iBAAiB;AAAA,MACpCF,UAAA,CAEFG,oBAACC,aAAW;AAAA,QACVlB,WAAWS,KACTC,mBAAmBS,kBACnBlB,mCAASkB,kBACThB,WAAW,eACTM,KAAKC,mBAAmBU,cAAcnB,mCAASmB,YAAY,CAAC;AAAA,QAEhEC,SAAQ;AAAA,QACRC,OAAO;AAAA,UAAEC,OAAQ,GAAEjB;AAAAA,QAAgB;AAAA,QAAE,GACjCF;AAAAA,QAAUU,UAEZ,GAAER;AAAAA,MAAAA,CACQ,GACdW,oBAACO,4BAA0B;AAAA,QACzBxB,WAAWS,KACTR,mCAASwB,sBACTf,mBAAmBe,oBAAoB;AAAA,QACvCX,8BAEDY,mBAAiB;AAAA,UAChBJ,OAAO;AAAA,YAAEC,OAAQ,GAAEjB;AAAAA,UAAgB;AAAA,UACnCN,WAAWS,KACTC,mBAAmBiB,aACnB1B,mCAAS0B,aACTxB,WAAW,eACTM,KAAKR,mCAASmB,cAAcV,mBAAmBU,YAAY,GAC7DjB,WAAW,WACTM,KAAKR,mCAAS2B,eAAelB,mBAAmBkB,aAAa,CAAC;AAAA,UAElEC,SAAS1B;AAAAA,QAAAA,CAAO;AAAA,MAAA,CAES,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEpB;AAEjB;"}

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

@@ -1,9 +1,9 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
 import clsx from "clsx";
 import { isInvalid } from "../Forms/FormElement/validationStates.js";
 import { StyledHvBaseRadio, StyledHvFormElement, StyledDivContainer, StyledHvLabel } from "./Radio.styles.js";
 import radioClasses from "./radioClasses.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
@@ -57,21 +57,56 @@ const HvRadio = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  const radio = /* @__PURE__ */ jsx(StyledHvBaseRadio, { 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, disabled, readOnly, onChange: onLocalChange, value, checked: isChecked, semantic, inputProps: {
-    "aria-invalid": isStateInvalid ? true : void 0,
-    "aria-errormessage": errorMessageId,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...inputProps
-  }, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
-  return /* @__PURE__ */ jsxs(StyledHvFormElement, { 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, { id: setId(elementId, "label"), htmlFor: setId(elementId, "input"), label, className: clsx(radioClasses.label, classes == null ? void 0 : classes.label), $disabled: disabled, ...labelProps })
-    ] }) : radio,
-    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, children: statusMessage })
-  ] });
+  const radio = /* @__PURE__ */ jsx(StyledHvBaseRadio, {
+    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,
+    disabled,
+    readOnly,
+    onChange: onLocalChange,
+    value,
+    checked: isChecked,
+    semantic,
+    inputProps: {
+      "aria-invalid": isStateInvalid ? true : void 0,
+      "aria-errormessage": errorMessageId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...inputProps
+    },
+    onFocusVisible: onFocusVisibleCallback,
+    onBlur: onBlurCallback,
+    ...others
+  });
+  return /* @__PURE__ */ jsxs(StyledHvFormElement, {
+    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, {
+        id: setId(elementId, "label"),
+        htmlFor: setId(elementId, "input"),
+        label,
+        className: clsx(radioClasses.label, classes == null ? void 0 : classes.label),
+        $disabled: disabled,
+        ...labelProps
+      })]
+    }) : radio, canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      disableBorder: true,
+      children: statusMessage
+    })]
+  });
 };
 export {
   HvRadio

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 clsx from \"clsx\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvWarningText } from \"components\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\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 type HvRadioProps = Omit<MuiRadioProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\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?: any;\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  } = 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","elementId","useUniqueId","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","isChecked","setIsChecked","useControlled","Boolean","onLocalChange","newChecked","canShowError","undefined","hasLabel","isStateInvalid","isInvalid","errorMessageId","setId","radio","clsx","radioClasses","invalidRadio","root","container","invalidContainer"],"mappings":";;;;;;;;;;AAiJaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC;AAAAA,IACAC;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,OACGC;AAAAA,EACDxB,IAAAA;AAEEyB,QAAAA,YAAYC,YAAYvB,IAAI,SAAS;AAE3C,QAAM,CAACwB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBN,qDAAiBU;AAAAA,EAAG,GAEtB,CAACV,cAAc,CAAC;AAGZW,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBL,qCAASS;AAAAA,EAAG,GAEd,CAACT,MAAM,CAAC;AAGJ,QAAA,CAACW,WAAWC,YAAY,IAAIC,cAChCtB,SACAuB,QAAQtB,cAAc,CAAC;AAGzB,QAAMuB,gBAAgBP,YACpB,CAACC,KAA0CO,eAAwB;AACjEJ,iBAAaI,UAAU;AAEZP,yCAAAA,KAAKO,YAAYlC;AAAAA,EAE9B,GAAA,CAACW,UAAUmB,cAAc9B,KAAK,CAAC;AAMjC,QAAMmC,eACJrB,oBAAoB,QACpBF,WAAWwB,UACXvB,kBAAkBuB;AAEpB,QAAMC,WAAWjC,SAAS;AAEpBkC,QAAAA,iBAAiBC,UAAU3B,MAAM;AAEnC4B,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBL,eACbM,MAAMrB,WAAW,OAAO,IACxBN;AAAAA,EACN;AAEA,QAAM4B,QACH,oBAAA,mBAAA,EACC,IAAItC,QAAQqC,MAAMrB,WAAW,OAAO,IAAIqB,MAAM3C,IAAI,OAAO,GACzD,MACA,WAAW6C,KACTC,aAAaF,OACb9C,mCAAS8C,OACTJ,kBAAkBK,KAAKC,aAAaC,cAAcjD,mCAASiD,YAAY,CAAC,GAE1E,UAAUP,gBACV,UACA,UACA,UAAUL,eACV,OACA,SAASJ,WACT,UACA,YAAY;AAAA,IACV,gBAAgBS,iBAAiB,OAAOF;AAAAA,IACxC,qBAAqBI;AAAAA,IACrB,cAAcnC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpB,GAAGS;AAAAA,EAAAA,GAEL,gBAAgBS,wBAChB,QAAQG,gBACJT,GAAAA,OAEP,CAAA;AAED,8BACG,qBACC,EAAA,IACA,MACA,QAAQP,UAAU,WAClB,UACA,UACA,UACA,WAAW+B,KAAK9C,WAAW+C,aAAaE,MAAMlD,mCAASkD,IAAI,GAE1DT,UAAAA;AAAAA,IAAAA,gCACE,oBACC,EAAA,WAAWM,KACTC,aAAaG,WACbnD,mCAASmD,WACT5C,YAAYwC,KAAKC,aAAazC,UAAUP,mCAASO,QAAQ,GACzDmB,gBACElB,SACAuC,KAAKC,aAAatB,cAAc1B,mCAAS0B,YAAY,GACvDgB,kBACEK,KAAKC,aAAaI,kBAAkBpD,mCAASoD,gBAAgB,CAAC,GAElE,UAAUV,gBACV,eAAe,CAAC,EAAEhB,gBAAgBlB,QAClC,WAAWD,UAEVuC,UAAAA;AAAAA,MAAAA;AAAAA,MACD,oBAAC,iBACC,IAAID,MAAMrB,WAAW,OAAO,GAC5B,SAASqB,MAAMrB,WAAW,OAAO,GACjC,OACA,WAAWuB,KAAKC,aAAaxC,OAAOR,mCAASQ,KAAK,GAClD,WAAWD,UACPK,GAAAA,WAAW,CAAA;AAAA,IAAA,EAAA,CAEnB,IAEAkC;AAAAA,IAEDP,gBACE,oBAAA,eAAA,EAAc,IAAIM,MAAMrB,WAAW,OAAO,GAAG,eAAa,MACxDP,UACH,cAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvWarningText } from \"components\";\nimport { HvLabelProps } from \"../Forms/Label\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\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 type HvRadioProps = Omit<MuiRadioProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\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  } = 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","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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"}

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useCallback, useMemo, Children, cloneElement } from "react";
 import { StyledFormElement, StyledLabel, StyledGroup } from "./RadioGroup.styles.js";
 import clsx from "clsx";
 import radioGroupClasses from "./radioGroupClasses.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
@@ -46,7 +46,11 @@ const HvRadioGroup = ({
   ...others
 }) => {
   const elementId = useUniqueId(id, "hvradiogroup");
-  const [value, setValue] = useControlled(valueProp, defaultValue !== void 0 ? defaultValue : () => getValueFromSelectedChildren(children));
+  const [value, setValue] = useControlled(valueProp, defaultValue !== void 0 ? defaultValue : (
+    // When uncontrolled and no default value is given,
+    // extract the initial selected values from the children own state
+    () => getValueFromSelectedChildren(children)
+  ));
   const onChildChangeInterceptor = useCallback((childOnChange, event, isChecked, newValue) => {
     childOnChange == null ? void 0 : childOnChange(event, isChecked, newValue);
     onChange == null ? void 0 : onChange(event, newValue);
@@ -54,33 +58,65 @@ const HvRadioGroup = ({
   }, [onChange, setValue]);
   const modifiedChildren = useMemo(() => {
     return Children.map(children, (child) => {
-      var _a, _b, _c, _d, _e, _f;
-      const childValue = (_b = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) != null ? _b : "on";
+      var _a, _b, _c, _d, _e;
+      const childValue = ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) ?? "on";
       const childIsSelected = childValue === value;
       return cloneElement(child, {
         checked: childIsSelected,
-        name: ((_c = child == null ? void 0 : child.props) == null ? void 0 : _c.name) || name || elementId,
+        name: ((_b = child == null ? void 0 : child.props) == null ? void 0 : _b.name) || name || elementId,
         onChange: (event, isChecked, newValue) => {
           var _a2;
           return onChildChangeInterceptor((_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.onChange, event, isChecked, newValue);
         },
         inputProps: {
-          ...(_d = child == null ? void 0 : child.props) == null ? void 0 : _d.inputProps,
+          ...(_c = child == null ? void 0 : child.props) == null ? void 0 : _c.inputProps,
+          // Set the required attribute directly in the input
+          // the radio form element context shouldn't be aware so the
+          // label doesn't show redundant asterisk
           required
         },
-        disabled: disabled || ((_e = child == null ? void 0 : child.props) == null ? void 0 : _e.disabled),
-        readOnly: readOnly || ((_f = child == null ? void 0 : child.props) == null ? void 0 : _f.readOnly)
+        disabled: disabled || ((_d = child == null ? void 0 : child.props) == null ? void 0 : _d.disabled),
+        readOnly: readOnly || ((_e = child == null ? void 0 : child.props) == null ? void 0 : _e.readOnly)
       });
     });
   }, [children, disabled, elementId, name, onChildChangeInterceptor, readOnly, required, value]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-  return /* @__PURE__ */ jsxs(StyledFormElement, { id, name, status: status || "standBy", disabled, required, readOnly, className: clsx(className, classes == null ? void 0 : classes.root, radioGroupClasses.root), children: [
-    label && /* @__PURE__ */ jsx(StyledLabel, { id: setId(elementId, "label"), label, className: clsx(classes == null ? void 0 : classes.label, radioGroupClasses.label) }),
-    description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), children: description }),
-    /* @__PURE__ */ jsx(StyledGroup, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0, "aria-invalid": status === "invalid" ? true : void 0, "aria-errormessage": status === "invalid" ? errorMessageId : void 0, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, className: clsx(classes == null ? void 0 : classes.group, radioGroupClasses.group, orientation === "vertical" && clsx(classes == null ? void 0 : classes.vertical, radioGroupClasses.vertical), orientation === "horizontal" && clsx(classes == null ? void 0 : classes.horizontal, radioGroupClasses.horizontal), status === "invalid" && clsx(classes == null ? void 0 : classes.invalid, radioGroupClasses.invalid)), $vertical: orientation === "vertical", $horizontal: orientation === "horizontal", $invalid: status === "invalid", ...others, children: modifiedChildren }),
-    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: clsx(classes == null ? void 0 : classes.error, radioGroupClasses.error), children: statusMessage })
-  ] });
+  return /* @__PURE__ */ jsxs(StyledFormElement, {
+    id,
+    name,
+    status: status || "standBy",
+    disabled,
+    required,
+    readOnly,
+    className: clsx(className, classes == null ? void 0 : classes.root, radioGroupClasses.root),
+    children: [label && /* @__PURE__ */ jsx(StyledLabel, {
+      id: setId(elementId, "label"),
+      label,
+      className: clsx(classes == null ? void 0 : classes.label, radioGroupClasses.label)
+    }), description && /* @__PURE__ */ jsx(HvInfoMessage, {
+      id: setId(elementId, "description"),
+      children: description
+    }), /* @__PURE__ */ jsx(StyledGroup, {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0,
+      "aria-invalid": status === "invalid" ? true : void 0,
+      "aria-errormessage": status === "invalid" ? errorMessageId : void 0,
+      "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+      className: clsx(classes == null ? void 0 : classes.group, radioGroupClasses.group, orientation === "vertical" && clsx(classes == null ? void 0 : classes.vertical, radioGroupClasses.vertical), orientation === "horizontal" && clsx(classes == null ? void 0 : classes.horizontal, radioGroupClasses.horizontal), status === "invalid" && clsx(classes == null ? void 0 : classes.invalid, radioGroupClasses.invalid)),
+      $vertical: orientation === "vertical",
+      $horizontal: orientation === "horizontal",
+      $invalid: status === "invalid",
+      ...others,
+      children: modifiedChildren
+    }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      disableBorder: true,
+      className: clsx(classes == null ? void 0 : classes.error, radioGroupClasses.error),
+      children: statusMessage
+    })]
+  });
 };
 export {
   HvRadioGroup

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Children, useMemo, useCallback, cloneElement } from \"react\";\nimport { HvFormStatus, HvInfoMessage, HvWarningText } from \"../Forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledFormElement,\n  StyledGroup,\n  StyledLabel,\n} from \"./RadioGroup.styles\";\nimport clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\nimport radioGroupClasses, { HvRadioGroupClasses } from \"./radioGroupClasses\";\n\nexport type HvRadioGroupProps = HvBaseProps<HTMLDivElement, { onChange }> & {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\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  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  value: valueProp,\n  defaultValue,\n  label,\n  description,\n  status,\n  statusMessage,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  orientation = \"vertical\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvRadioGroupProps) => {\n  const elementId = useUniqueId(id, \"hvradiogroup\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        checked: boolean,\n        value: any\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean,\n      newValue: any\n    ) => {\n      childOnChange?.(event, isChecked, newValue);\n\n      onChange?.(event, newValue);\n\n      setValue(newValue);\n    },\n    [onChange, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any) => {\n      const childValue = child?.props?.value ?? \"on\";\n\n      const childIsSelected = childValue === value;\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name || elementId,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n          newValue: any\n        ) =>\n          onChildChangeInterceptor(\n            child?.props?.onChange,\n            event,\n            isChecked,\n            newValue\n          ),\n        inputProps: {\n          ...child?.props?.inputProps,\n          // Set the required attribute directly in the input\n          // the radio form element context shouldn't be aware so the\n          // label doesn't show redundant asterisk\n          required,\n        },\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    elementId,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    required,\n    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 OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, radioGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, radioGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroup\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-invalid={status === \"invalid\" ? true : undefined}\n        aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          radioGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, radioGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, radioGroupClasses.horizontal),\n          status === \"invalid\" &&\n            clsx(classes?.invalid, radioGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={status === \"invalid\"}\n        {...others}\n      >\n        {modifiedChildren}\n      </StyledGroup>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, radioGroupClasses.error)}\n        >\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","childrenArray","Children","toArray","childrenCount","length","i","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","HvRadioGroup","id","classes","className","name","valueProp","defaultValue","label","description","status","statusMessage","required","readOnly","disabled","orientation","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","elementId","useUniqueId","setValue","useControlled","onChildChangeInterceptor","useCallback","childOnChange","event","isChecked","newValue","modifiedChildren","useMemo","map","childValue","cloneElement","inputProps","canShowError","errorMessageId","setId","clsx","root","radioGroupClasses","join","trim","group","vertical","horizontal","invalid","error"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Children, useMemo, useCallback, cloneElement } from \"react\";\nimport { HvFormStatus, HvInfoMessage, HvWarningText } from \"../Forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledFormElement,\n  StyledGroup,\n  StyledLabel,\n} from \"./RadioGroup.styles\";\nimport clsx from \"clsx\";\nimport { useControlled, useUniqueId } from \"hooks\";\nimport { setId } from \"utils\";\nimport radioGroupClasses, { HvRadioGroupClasses } from \"./radioGroupClasses\";\n\nexport type HvRadioGroupProps = HvBaseProps<HTMLDivElement, { onChange }> & {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: 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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\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  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  value: valueProp,\n  defaultValue,\n  label,\n  description,\n  status,\n  statusMessage,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  orientation = \"vertical\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvRadioGroupProps) => {\n  const elementId = useUniqueId(id, \"hvradiogroup\");\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        checked: boolean,\n        value: any\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean,\n      newValue: any\n    ) => {\n      childOnChange?.(event, isChecked, newValue);\n\n      onChange?.(event, newValue);\n\n      setValue(newValue);\n    },\n    [onChange, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any) => {\n      const childValue = child?.props?.value ?? \"on\";\n\n      const childIsSelected = childValue === value;\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name || elementId,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n          newValue: any\n        ) =>\n          onChildChangeInterceptor(\n            child?.props?.onChange,\n            event,\n            isChecked,\n            newValue\n          ),\n        inputProps: {\n          ...child?.props?.inputProps,\n          // Set the required attribute directly in the input\n          // the radio form element context shouldn't be aware so the\n          // label doesn't show redundant asterisk\n          required,\n        },\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    elementId,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    required,\n    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 OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={status || \"standBy\"}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, radioGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, radioGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroup\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-invalid={status === \"invalid\" ? true : undefined}\n        aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          radioGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, radioGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, radioGroupClasses.horizontal),\n          status === \"invalid\" &&\n            clsx(classes?.invalid, radioGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={status === \"invalid\"}\n        {...others}\n      >\n        {modifiedChildren}\n      </StyledGroup>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, radioGroupClasses.error)}\n        >\n          {statusMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["getValueFromSelectedChildren","children","childrenArray","Children","toArray","childrenCount","length","i","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","HvRadioGroup","id","classes","className","name","valueProp","defaultValue","label","description","status","statusMessage","required","readOnly","disabled","orientation","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","elementId","useUniqueId","setValue","useControlled","onChildChangeInterceptor","useCallback","childOnChange","event","isChecked","newValue","modifiedChildren","useMemo","map","childValue","cloneElement","inputProps","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","radioGroupClasses","_jsx","StyledLabel","HvInfoMessage","StyledGroup","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvWarningText","disableBorder","error"],"mappings":"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"}

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

@@ -55,12 +55,14 @@ const StyledGroup = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "pro
   display: "flex",
   ...$vertical && {
     flexDirection: "column",
+    // Prevent the focus ring to be hidden by sibling hover background
     "&>*": {
       zIndex: 0
     },
     "&>*:focus-within": {
       zIndex: 1
     },
+    // IE fallback code (using focus-within-polyfill)
     "&>*.focus-within": {
       zIndex: 1
     }
@@ -72,6 +74,7 @@ const StyledGroup = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "pro
       marginLeft: theme.space.sm
     },
     width: `calc(100% + ${theme.space.sm})`
+    // Compensate the negative margin left which increases the width
   },
   ...$invalid && {
     paddingBottom: theme.space.xs,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styles.js","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvLabel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroup = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\n\n    ...($vertical && {\n      flexDirection: \"column\",\n\n      // Prevent the focus ring to be hidden by sibling hover background\n      \"&>*\": {\n        zIndex: 0,\n      },\n      \"&>*:focus-within\": {\n        zIndex: 1,\n      },\n      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n      width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.sema4}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroup","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","width","paddingBottom","borderBottom","colors","sema4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAA2BC,wBAAAA,eAAaC,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,CAMpD;AAEK,MAAMC,cAAqBC,wBAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9EAAA;AAEWc,MAAAA,sCACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,eAAe;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYb,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcf,MAAMC,MAAMa;AAAAA,EACpC;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdQ,eAAehB,MAAMC,MAAMC;AAAAA,IAC3Be,cAAe,aAAYjB,MAAMkB,OAAOC;AAAAA,EAC1C;AACF,IAAEhC,QAAAC,IAAAC,aACH,eAAA,KAAA,y9EAAA;"}
+{"version":3,"file":"RadioGroup.styles.js","sources":["../../../../src/components/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFormElement, HvLabel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\n\nexport const StyledFormElement = styled(HvFormElement)({\n  display: \"inline-block\",\n  padding: 0,\n  margin: 0,\n  overflow: \"hidden\",\n  verticalAlign: \"top\",\n});\n\nexport const StyledLabel = styled(HvLabel)({\n  marginBottom: theme.space.xs,\n});\n\nexport const StyledGroup = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $vertical,\n    $horizontal,\n    $invalid,\n  }: {\n    $vertical: boolean;\n    $horizontal: boolean;\n    $invalid: boolean;\n  }) => ({\n    display: \"flex\",\n\n    ...($vertical && {\n      flexDirection: \"column\",\n\n      // Prevent the focus ring to be hidden by sibling hover background\n      \"&>*\": {\n        zIndex: 0,\n      },\n      \"&>*:focus-within\": {\n        zIndex: 1,\n      },\n      // IE fallback code (using focus-within-polyfill)\n      \"&>*.focus-within\": {\n        zIndex: 1,\n      },\n    }),\n\n    ...($horizontal && {\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n      \"&>*:not(:first-of-type)\": {\n        marginLeft: theme.space.sm,\n      },\n      width: `calc(100% + ${theme.space.sm})`, // Compensate the negative margin left which increases the width\n    }),\n\n    ...($invalid && {\n      paddingBottom: theme.space.xs,\n      borderBottom: `1px solid ${theme.colors.sema4}`,\n    }),\n  })\n);\n"],"names":["StyledFormElement","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","HvLabel","marginBottom","theme","space","xs","StyledGroup","_extends","transientOptions","$vertical","$horizontal","$invalid","display","flexDirection","zIndex","flexWrap","marginLeft","sm","width","paddingBottom","borderBottom","colors","sema4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,oBAA2BC,wBAAAA,eAAaC,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,CAMpD;AAEK,MAAMC,cAAqBC,wBAAAA,SAAOX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCQ,cAAcC,MAAMC,MAAMC;AAC5B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9EAAA;AAEWc,MAAAA,sCACX,OAAKhB,QAAAC,IAAAC,4BAAAe,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,GACLe,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAd,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBc,gBAAgB,CACjB,EACC,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAAS;AAAA,EAET,GAAIH,aAAa;AAAA,IACfI,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA;AAAA,IAEA,oBAAoB;AAAA,MAClBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIJ,eAAe;AAAA,IACjBG,eAAe;AAAA,IACfE,UAAU;AAAA,IACV,2BAA2B;AAAA,MACzBC,YAAYb,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,IACAC,OAAQ,eAAcf,MAAMC,MAAMa;AAAAA;AAAAA,EACpC;AAAA,EAEA,GAAIN,YAAY;AAAA,IACdQ,eAAehB,MAAMC,MAAMC;AAAAA,IAC3Be,cAAe,aAAYjB,MAAMkB,OAAOC;AAAAA,EAC1C;AACF,IAAEhC,QAAAC,IAAAC,aACH,eAAA,KAAA,y9EAAA;"}