@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n  DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { useWidth } from \"@core/hooks/useWidth\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n  /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n  direction?: HvStackDirection;\n  /** The spacing between elements of the stack. */\n  spacing?: HvBreakpoints;\n  /** The divider component to be used between the stack elements.\n   * - If `true` the Material-UI Divider component will be used.\n   * - If a React node is passed then the custom divider will be used.\n   */\n  divider?: boolean | React.ReactNode;\n  /** The properties to pass on to the Material-UI component. */\n  dividerProps?: MuiDividerProps;\n  /** Sets whether or not there should be arrow navigation between the stack elements. */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n *                     `direction` property is a string and a valid direction then we\n *                     use it. If it's an object with multiple directions by breakpoint\n *                     we use the appropriate one or search for the nearest breakpoint\n *                     smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n  if (isString(direction)) return direction;\n\n  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n    if (direction[breakpoints[i]] !== undefined) {\n      return direction[breakpoints[i]];\n    }\n  }\n  return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    direction = \"column\",\n    spacing = \"sm\",\n    divider = false,\n    withNavigation = false,\n    dividerProps = {},\n    ...others\n  } = useDefaultProps(\"HvStack\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const width = useWidth();\n  const containerRef = useRef(null);\n  const { breakpoints } = useTheme();\n\n  const processedDirection = useMemo(\n    () => getDirection(direction, width, breakpoints.keys),\n    [direction, width, breakpoints]\n  );\n\n  /**\n   * @returns {node} - The divider component to use. If the property `divider` is\n   *                   set to `true` then the Material-UI divider is used, otherwise\n   *                   we use the custom divider the user passed.\n   */\n  const getDividerComponent = useCallback(() => {\n    if (isBoolean(divider) && divider) {\n      return (\n        <MuiDivider\n          orientation={\n            processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n          }\n          flexItem={processedDirection === \"row\"}\n          role=\"separator\"\n          {...dividerProps}\n        />\n      );\n    }\n    return divider;\n  }, [divider, dividerProps, processedDirection]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        classes.root,\n        classes[processedDirection],\n        classes[spacing],\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, i) => {\n        return (\n          <>\n            {divider && i !== 0 && getDividerComponent()}\n            {withNavigation ? (\n              <HvFocus\n                rootRef={containerRef}\n                focusDisabled={false}\n                strategy=\"grid\"\n                navigationJump={\n                  processedDirection === \"column\"\n                    ? 1\n                    : React.Children.count(children) || 0\n                }\n                filterClass=\"child\"\n              >\n                <div className=\"child\">{child}</div>\n              </HvFocus>\n            ) : (\n              child\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["getDirection","direction","width","breakpoints","isString","i","indexOf","undefined","HvStack","props","classes","classesProp","className","children","spacing","divider","withNavigation","dividerProps","others","useDefaultProps","cx","useClasses","useWidth","containerRef","useRef","useTheme","processedDirection","useMemo","keys","getDividerComponent","useCallback","isBoolean","root","React","Children","map","child","count"],"mappings":";;;;;;;;;;;AAoDA,MAAMA,eAAeA,CAACC,WAAWC,OAAOC,gBAAgB;AACtD,MAAIC,SAASH,SAAS;AAAUA,WAAAA;AAEvBI,WAAAA,IAAIF,YAAYG,QAAQJ,KAAK,GAAGG,KAAK,GAAGA,KAAK,GAAG;AACvD,QAAIJ,UAAUE,YAAYE,CAAC,CAAC,MAAME,QAAW;AACpCN,aAAAA,UAAUE,YAAYE,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOaG,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAZ,YAAY;AAAA,IACZa,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,iBAAiB;AAAA,IACjBC,eAAe,CAAC;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWV,KAAK;AAC9B,QAAA;AAAA,IAAEC;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMT,QAAQoB;AACRC,QAAAA,eAAeC,OAAO,IAAI;AAC1B,QAAA;AAAA,IAAErB;AAAAA,MAAgBsB,SAAS;AAEjC,QAAMC,qBAAqBC,QACzB,MAAM3B,aAAaC,WAAWC,OAAOC,YAAYyB,IAAI,GACrD,CAAC3B,WAAWC,OAAOC,WAAW,CAChC;AAOM0B,QAAAA,sBAAsBC,YAAY,MAAM;AACxCC,QAAAA,UAAUhB,OAAO,KAAKA,SAAS;AACjC,aACG,oBAAA,YAAA,EACC,aACEW,uBAAuB,WAAW,eAAe,YAEnD,UAAUA,uBAAuB,OACjC,MAAK,aACDT,GAAAA,aACJ,CAAA;AAAA,IAEN;AACOF,WAAAA;AAAAA,EACN,GAAA,CAACA,SAASE,cAAcS,kBAAkB,CAAC;AAG5C,SAAA,oBAAC,OACC,EAAA,KAAKH,cACL,WAAWH,GACTV,QAAQsB,MACRtB,QAAQgB,kBAAkB,GAC1BhB,QAAQI,OAAO,GACfF,SACF,GACA,GAAIM,QAEHe,UAAAA,eAAMC,SAASC,IAAItB,UAAU,CAACuB,OAAO/B,MAAM;AAC1C,WAEKU,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,MAAWV,WAAAA,MAAM,KAAKwB,oBAAoB;AAAA,MAC1Cb,iBACE,oBAAA,SAAA,EACC,SAASO,cACT,eAAe,OACf,UAAS,QACT,gBACEG,uBAAuB,WACnB,IACAO,eAAMC,SAASG,MAAMxB,QAAQ,KAAK,GAExC,aAAY,SAEZ,UAAC,oBAAA,OAAA,EAAI,WAAU,SAASuB,UAAM,MAAA,CAAA,EAChC,CAAA,IAEAA;AAAAA,IAEJ,EAAA,CAAA;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"Stack.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React, { useMemo, useRef, useCallback } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n  DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\n\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { useWidth } from \"@core/hooks/useWidth\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n  /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n  direction?: HvStackDirection;\n  /** The spacing between elements of the stack. */\n  spacing?: HvBreakpoints;\n  /** The divider component to be used between the stack elements.\n   * - If `true` the Material-UI Divider component will be used.\n   * - If a React node is passed then the custom divider will be used.\n   */\n  divider?: boolean | React.ReactNode;\n  /** The properties to pass on to the Material-UI component. */\n  dividerProps?: MuiDividerProps;\n  /** Sets whether or not there should be arrow navigation between the stack elements. */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n *                     `direction` property is a string and a valid direction then we\n *                     use it. If it's an object with multiple directions by breakpoint\n *                     we use the appropriate one or search for the nearest breakpoint\n *                     smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n  if (isString(direction)) return direction;\n\n  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n    if (direction[breakpoints[i]] !== undefined) {\n      return direction[breakpoints[i]];\n    }\n  }\n  return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    direction = \"column\",\n    spacing = \"sm\",\n    divider = false,\n    withNavigation = false,\n    dividerProps = {},\n    ...others\n  } = useDefaultProps(\"HvStack\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const width = useWidth();\n  const containerRef = useRef(null);\n  const { breakpoints } = useTheme();\n\n  const processedDirection = useMemo(\n    () => getDirection(direction, width, breakpoints.keys),\n    [direction, width, breakpoints]\n  );\n\n  /**\n   * @returns {node} - The divider component to use. If the property `divider` is\n   *                   set to `true` then the Material-UI divider is used, otherwise\n   *                   we use the custom divider the user passed.\n   */\n  const getDividerComponent = useCallback(() => {\n    if (isBoolean(divider) && divider) {\n      return (\n        <MuiDivider\n          orientation={\n            processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n          }\n          flexItem={processedDirection === \"row\"}\n          role=\"separator\"\n          {...dividerProps}\n        />\n      );\n    }\n    return divider;\n  }, [divider, dividerProps, processedDirection]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        classes.root,\n        classes[processedDirection],\n        classes[spacing],\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, i) => {\n        return (\n          <>\n            {divider && i !== 0 && getDividerComponent()}\n            {withNavigation ? (\n              <HvFocus\n                rootRef={containerRef}\n                focusDisabled={false}\n                strategy=\"grid\"\n                navigationJump={\n                  processedDirection === \"column\"\n                    ? 1\n                    : React.Children.count(children) || 0\n                }\n                filterClass=\"child\"\n              >\n                <div className=\"child\">{child}</div>\n              </HvFocus>\n            ) : (\n              child\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAoDA,MAAM,eAAe,CAAC,WAAW,OAAO,gBAAgB;AACtD,MAAI,SAAS,SAAS;AAAU,WAAA;AAEvB,WAAA,IAAI,YAAY,QAAQ,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG;AACvD,QAAI,UAAU,YAAY,CAAC,CAAC,MAAM,QAAW;AACpC,aAAA,UAAU,YAAY,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe,CAAC;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ;AACR,QAAA,eAAe,OAAO,IAAI;AAC1B,QAAA,EAAE,gBAAgB;AAExB,QAAM,qBAAqB;AAAA,IACzB,MAAM,aAAa,WAAW,OAAO,YAAY,IAAI;AAAA,IACrD,CAAC,WAAW,OAAO,WAAW;AAAA,EAAA;AAQ1B,QAAA,sBAAsB,YAAY,MAAM;AACxC,QAAA,UAAU,OAAO,KAAK,SAAS;AAE/B,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aACE,uBAAuB,WAAW,eAAe;AAAA,UAEnD,UAAU,uBAAuB;AAAA,UACjC,MAAK;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AACO,WAAA;AAAA,EACN,GAAA,CAAC,SAAS,cAAc,kBAAkB,CAAC;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,kBAAkB;AAAA,QAC1B,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,MAAM;AAC1C,eAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAW,WAAA,MAAM,KAAK,oBAAoB;AAAA,UAC1C,iBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAS;AAAA,cACT,gBACE,uBAAuB,WACnB,IACAA,eAAM,SAAS,MAAM,QAAQ,KAAK;AAAA,cAExC,aAAY;AAAA,cAEZ,UAAC,oBAAA,OAAA,EAAI,WAAU,SAAS,UAAM,OAAA;AAAA,YAAA;AAAA,UAAA,IAGhC;AAAA,QAEJ,EAAA,CAAA;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvStack", {
+const { staticClasses, useClasses } = createClasses("HvStack", {
   root: {
     display: "flex"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.styles.js","sources":["../../../../src/components/Stack/Stack.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStack\", {\n  root: {\n    display: \"flex\",\n  },\n  column: {\n    flexDirection: \"column\",\n  },\n  row: {\n    flexDirection: \"row\",\n  },\n  xs: {\n    gap: theme.space.xs,\n  },\n  sm: {\n    gap: theme.space.sm,\n  },\n  md: {\n    gap: theme.spacing(4),\n  },\n  lg: {\n    gap: theme.spacing(6),\n  },\n  xl: {\n    gap: theme.spacing(11),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","column","flexDirection","row","xs","gap","theme","space","sm","md","spacing","lg","xl"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK;AAAA,IACHD,eAAe;AAAA,EACjB;AAAA,EACAE,IAAI;AAAA,IACFC,KAAKC,MAAMC,MAAMH;AAAAA,EACnB;AAAA,EACAI,IAAI;AAAA,IACFH,KAAKC,MAAMC,MAAMC;AAAAA,EACnB;AAAA,EACAC,IAAI;AAAA,IACFJ,KAAKC,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAC,IAAI;AAAA,IACFN,KAAKC,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAE,IAAI;AAAA,IACFP,KAAKC,MAAMI,QAAQ,EAAE;AAAA,EACvB;AACF,CAAC;"}
+{"version":3,"file":"Stack.styles.js","sources":["../../../../src/components/Stack/Stack.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStack\", {\n  root: {\n    display: \"flex\",\n  },\n  column: {\n    flexDirection: \"column\",\n  },\n  row: {\n    flexDirection: \"row\",\n  },\n  xs: {\n    gap: theme.space.xs,\n  },\n  sm: {\n    gap: theme.space.sm,\n  },\n  md: {\n    gap: theme.spacing(4),\n  },\n  lg: {\n    gap: theme.spacing(6),\n  },\n  xl: {\n    gap: theme.spacing(11),\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,eAAe;AAAA,EACjB;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,EACjB;AAAA,EACA,IAAI;AAAA,IACF,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,IAAI;AAAA,IACF,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,IAAI;AAAA,IACF,KAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EACA,IAAI;AAAA,IACF,KAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EACA,IAAI;AAAA,IACF,KAAK,MAAM,QAAQ,EAAE;AAAA,EACvB;AACF,CAAC;"}

package/dist/esm/components/Switch/Switch.js

@@ -11,70 +11,130 @@ import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
 import { HvFormElement } from "../Forms/FormElement/FormElement.js";
 import { HvLabel } from "../Forms/Label/Label.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
-const HvSwitch = forwardRef((props, ref) => {
-  const {
-    classes: classesProp,
-    className,
-    id,
-    name,
-    value = "on",
-    required = false,
-    readOnly = false,
-    disabled = false,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    labelProps,
-    checked,
-    defaultChecked = false,
-    onChange,
-    status,
-    statusMessage,
-    "aria-errormessage": ariaErrorMessage,
-    inputProps,
-    ...others
-  } = useDefaultProps("HvSwitch", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvswitch");
-  const [isChecked, setIsChecked] = useControlled(checked, Boolean(defaultChecked));
-  const [validationState, setValidationState] = useControlled(status, "standBy");
-  const [validationMessage] = useControlled(statusMessage, "Required");
-  const onLocalChange = useCallback((evt, newChecked) => {
-    setIsChecked(() => {
-      if (required && !newChecked) {
-        setValidationState("invalid");
-      } else {
-        setValidationState("valid");
-      }
-      return newChecked;
-    });
-    onChange?.(evt, newChecked, value);
-  }, [onChange, required, setIsChecked, setValidationState, value]);
-  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-  const isStateInvalid = isInvalid(validationState);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-  }
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, className), children: [
-    label && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), htmlFor: setId(elementId, "input"), label, className: classes.label, ...labelProps }),
-    /* @__PURE__ */ jsx("div", { className: cx(classes.switchContainer, {
-      [classes.invalidSwitch]: isStateInvalid
-    }), children: /* @__PURE__ */ jsx(HvBaseSwitch, { ref, id: label ? setId(elementId, "input") : setId(id, "input"), name, disabled, readOnly, required, onChange: onLocalChange, value, checked: isChecked, inputProps: {
-      "aria-invalid": isStateInvalid ? true : void 0,
-      "aria-errormessage": errorMessageId,
+const HvSwitch = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value = "on",
+      required = false,
+      readOnly = false,
+      disabled = false,
+      label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,
-      ...inputProps
-    }, ...others }) }),
-    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), className: classes.error, disableBorder: true, disableAdornment: true, hideText: true, children: validationMessage })
-  ] });
-});
+      labelProps,
+      checked,
+      defaultChecked = false,
+      onChange,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      inputProps,
+      ...others
+    } = useDefaultProps("HvSwitch", props);
+    const { classes, cx } = useClasses(classesProp);
+    const elementId = useUniqueId(id, "hvswitch");
+    const [isChecked, setIsChecked] = useControlled(
+      checked,
+      Boolean(defaultChecked)
+    );
+    const [validationState, setValidationState] = useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled(statusMessage, "Required");
+    const onLocalChange = useCallback(
+      (evt, newChecked) => {
+        setIsChecked(() => {
+          if (required && !newChecked) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newChecked;
+        });
+        onChange?.(evt, newChecked, value);
+      },
+      [onChange, required, setIsChecked, setValidationState, value]
+    );
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const isStateInvalid = isInvalid(validationState);
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+    }
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        required,
+        readOnly,
+        className: cx(classes.root, className),
+        children: [
+          label && /* @__PURE__ */ jsx(
+            HvLabel,
+            {
+              id: setId(elementId, "label"),
+              htmlFor: setId(elementId, "input"),
+              label,
+              className: classes.label,
+              ...labelProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(classes.switchContainer, {
+                [classes.invalidSwitch]: isStateInvalid
+              }),
+              children: /* @__PURE__ */ jsx(
+                HvBaseSwitch,
+                {
+                  ref,
+                  id: label ? setId(elementId, "input") : setId(id, "input"),
+                  name,
+                  disabled,
+                  readOnly,
+                  required,
+                  onChange: onLocalChange,
+                  value,
+                  checked: isChecked,
+                  inputProps: {
+                    "aria-invalid": isStateInvalid ? true : void 0,
+                    "aria-errormessage": errorMessageId,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "aria-describedby": ariaDescribedBy,
+                    ...inputProps
+                  },
+                  ...others
+                }
+              )
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              className: classes.error,
+              disableBorder: true,
+              disableAdornment: true,
+              hideText: true,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 export {
   HvSwitch,
   staticClasses as switchClasses

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  HvFormStatus,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { HvBaseSwitch } from \"@core/components/BaseSwitch\";\nimport { isInvalid } from \"@core/components/Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch 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   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvswitch\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt, newChecked) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, 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 isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\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            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["HvSwitch","forwardRef","props","ref","classes","classesProp","className","id","name","value","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","labelProps","checked","defaultChecked","onChange","status","statusMessage","ariaErrorMessage","inputProps","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","isChecked","setIsChecked","useControlled","Boolean","validationState","setValidationState","validationMessage","onLocalChange","useCallback","evt","newChecked","canShowError","undefined","isStateInvalid","isInvalid","errorMessageId","setId","root","switchContainer","invalidSwitch","error"],"mappings":";;;;;;;;;;;;;AAsHO,MAAMA,WAAWC,WACtB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACA,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpBC;AAAAA,IAEAC;AAAAA,IACAC,iBAAiB;AAAA,IAEjBC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACA,qBAAqBC;AAAAA,IAErBC;AAAAA,IAEA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYxB,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASuB;AAAAA,EAAAA,IAAOC,WAAWvB,WAAW;AAExCwB,QAAAA,YAAYC,YAAYvB,IAAI,UAAU;AAEtC,QAAA,CAACwB,WAAWC,YAAY,IAAIC,cAChCf,SACAgB,QAAQf,cAAc,CACxB;AAEA,QAAM,CAACgB,iBAAiBC,kBAAkB,IAAIH,cAC5CZ,QACA,SACF;AAEA,QAAM,CAACgB,iBAAiB,IAAIJ,cAAcX,eAAe,UAAU;AAEnE,QAAMgB,gBAAgBC,YACpB,CAACC,KAAKC,eAAe;AACnBT,iBAAa,MAAM;AAEbtB,UAAAA,YAAY,CAAC+B,YAAY;AAC3BL,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOK,aAAAA;AAAAA,IAAAA,CACR;AAEUD,eAAAA,KAAKC,YAAYhC,KAAK;AAAA,EAAA,GAEnC,CAACW,UAAUV,UAAUsB,cAAcI,oBAAoB3B,KAAK,CAC9D;AAMMiC,QAAAA,eACJnB,oBAAoB,SAClBF,WAAWsB,UAAarB,kBAAkBqB,UACzCtB,WAAWsB,UAAajC;AAEvBkC,QAAAA,iBAAiBC,UAAUV,eAAe;AAE5CW,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBJ,eACbK,MAAMlB,WAAW,OAAO,IACxBN;AAAAA,EACN;AAEA,SACG,qBAAA,eAAA,EACC,IACA,MACA,QAAQY,iBACR,UACA,UACA,UACA,WAAWR,GAAGvB,QAAQ4C,MAAM1C,SAAS,GAEpCO,UAAAA;AAAAA,IAAAA,6BACE,SACC,EAAA,IAAIkC,MAAMlB,WAAW,OAAO,GAC5B,SAASkB,MAAMlB,WAAW,OAAO,GACjC,OACA,WAAWzB,QAAQS,OACnB,GAAII,YAEP;AAAA,IACA,oBAAA,OAAA,EACC,WAAWU,GAAGvB,QAAQ6C,iBAAiB;AAAA,MACrC,CAAC7C,QAAQ8C,aAAa,GAAGN;AAAAA,IAC1B,CAAA,GAED,UAAA,oBAAC,cACC,EAAA,KACA,IAAI/B,QAAQkC,MAAMlB,WAAW,OAAO,IAAIkB,MAAMxC,IAAI,OAAO,GACzD,MACA,UACA,UACA,UACA,UAAU+B,eACV,OACA,SAASP,WACT,YAAY;AAAA,MACV,gBAAgBa,iBAAiB,OAAOD;AAAAA,MACxC,qBAAqBG;AAAAA,MACrB,cAAchC;AAAAA,MACd,mBAAmBC;AAAAA,MACnB,oBAAoBC;AAAAA,MACpB,GAAGQ;AAAAA,IAAAA,GAEDC,GAAAA,OAAO,CAAA,GAEf;AAAA,IACCiB,gBACE,oBAAA,eAAA,EACC,IAAIK,MAAMlB,WAAW,OAAO,GAC5B,WAAWzB,QAAQ+C,OACnB,eAAa,MACb,kBAAgB,MAChB,UAAQ,MAEPd,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  HvFormStatus,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { HvBaseSwitch } from \"@core/components/BaseSwitch\";\nimport { isInvalid } from \"@core/components/Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch 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   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvswitch\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt, newChecked) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, 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 isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\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            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsHO,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,MACA,iBAAiB;AAAA,MAEjB;AAAA,MAEA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MAErB;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,IAAI,UAAU;AAEtC,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IAAA;AAGlB,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAEnE,UAAM,gBAAgB;AAAA,MACpB,CAAC,KAAK,eAAe;AACnB,qBAAa,MAAM;AAEb,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAEO,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,KAAK,YAAY,KAAK;AAAA,MACnC;AAAA,MACA,CAAC,UAAU,UAAU,cAAc,oBAAoB,KAAK;AAAA,IAAA;AAOxD,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAEvB,UAAA,iBAAiB,UAAU,eAAe;AAE5C,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IACN;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cAClB,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,iBAAiB;AAAA,gBACrC,CAAC,QAAQ,aAAa,GAAG;AAAA,cAAA,CAC1B;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,IAAI,QAAQ,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,kBACzD;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,kBACV;AAAA,kBACA,SAAS;AAAA,kBACT,YAAY;AAAA,oBACV,gBAAgB,iBAAiB,OAAO;AAAA,oBACxC,qBAAqB;AAAA,oBACrB,cAAc;AAAA,oBACd,mBAAmB;AAAA,oBACnB,oBAAoB;AAAA,oBACpB,GAAG;AAAA,kBACL;AAAA,kBACC,GAAG;AAAA,gBAAA;AAAA,cACN;AAAA,YAAA;AAAA,UACF;AAAA,UACC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,WAAW,QAAQ;AAAA,cACnB,eAAa;AAAA,cACb,kBAAgB;AAAA,cAChB,UAAQ;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

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

@@ -1,17 +1,12 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvSwitch", {
+const { staticClasses, useClasses } = createClasses("HvSwitch", {
   root: {
     display: "inline-flex",
     flexDirection: "column",
     alignItems: "flex-start"
   },
-  label: {
-    marginBottom: theme.space.xs
-  },
+  label: { marginBottom: theme.space.xs },
   error: {},
   switchContainer: {
     height: "32px",

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.js","sources":["../../../../src/components/Switch/Switch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: { marginBottom: theme.space.xs },\n  error: {},\n  switchContainer: {\n    height: \"32px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    borderBottom: \"1px solid transparent\",\n  },\n  invalidSwitch: {\n    paddingBottom: \"1px\",\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","alignItems","label","marginBottom","theme","space","xs","error","switchContainer","height","justifyContent","borderBottom","invalidSwitch","paddingBottom","colors","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO,CAAC;AAAA,EACRC,iBAAiB;AAAA,IACfC,QAAQ;AAAA,IACRV,SAAS;AAAA,IACTC,eAAe;AAAA,IACfU,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,IACfF,cAAe,aAAYP,MAAMU,OAAOC,QAAS;AAAA,EACnD;AACF,CAAC;"}
+{"version":3,"file":"Switch.styles.js","sources":["../../../../src/components/Switch/Switch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: { marginBottom: theme.space.xs },\n  error: {},\n  switchContainer: {\n    height: \"32px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    borderBottom: \"1px solid transparent\",\n  },\n  invalidSwitch: {\n    paddingBottom: \"1px\",\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,CAAC;AAAA,EACR,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,eAAe;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,EAClD;AACF,CAAC;"}

package/dist/esm/components/Tab/Tab.js

@@ -10,10 +10,7 @@ const HvTab = (props) => {
     disabled = false,
     ...others
   } = useDefaultProps("HvTab", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsx(
     Tab,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Tab, TabProps as MuiTabProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTab","props","classes","classesProp","iconPosition","disabled","others","useDefaultProps","cx","useClasses","root","selected","focusVisible"],"mappings":";;;;;AAyBaA,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC,eAAe;AAAA,IACfC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,SAASN,KAAK;AAC5B,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACPO,MAAMR,QAAQQ;AAAAA,QACdC,UAAUT,QAAQS;AAAAA,QAClBN,UAAUH,QAAQG;AAAAA,MACpB;AAAA,MACA,eAAa;AAAA,MACb,oBAAA;AAAA,MAGA,uBAAuBG,GAAG,oBAAoBN,QAAQU,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACA,GAAIN;AAAAA,IAAAA;AAAAA,EAAAA;AAGV;"}
+{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Tab, TabProps as MuiTabProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAyBa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAClC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB;AAAA,MAGlB,uBAAuB,GAAG,oBAAoB,QAAQ,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -1,10 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvTab", {
+const { staticClasses, useClasses } = createClasses("HvTab", {
   root: {
     marginTop: "3px",
     padding: "0 16px",

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.js","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: \"0 16px\",\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.colors.atmo4,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","padding","minWidth","minHeight","textTransform","fontFamily","theme","body","typography","backgroundColor","colors","containerBackgroundHover","borderRadius","radii","base","height","atmo4","color","label","fontWeight","lineHeight","letterSpacing","secondary_60","cursor","pointerEvents","opacity","background","position","left","top","width","content","margin","focusVisible","outlineStyles","selected","disabled"],"mappings":";;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYC,MAAMD,WAAWE;AAAAA,IAC7B,GAAID,MAAME,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBH,MAAMI,OAAOC;AAAAA,MAC9BC,cAAcN,MAAMO,MAAMC;AAAAA,MAC1B,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRN,iBAAiBH,MAAMI,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOX,MAAME,WAAWU,MAAMD;AAAAA,MAC9BE,YAAYb,MAAME,WAAWU,MAAMC;AAAAA,MACnCC,YAAYd,MAAME,WAAWU,MAAME;AAAAA,MACnCC,eAAef,MAAME,WAAWU,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOX,MAAMI,OAAOY;AAAAA,MACpBC,QAAQ;AAAA,MACRC,eAAe;AAAA,MACfC,SAAS;AAAA,MACT,WAAW;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACAD,SAAS;AAAA,IACT,YAAY;AAAA,MACVE,UAAU;AAAA,MACVC,MAAM;AAAA,MACNC,KAAK;AAAA,MACLd,QAAQ;AAAA,MACRe,OAAO;AAAA,MACPrB,iBAAiBH,MAAMI,OAAOM;AAAAA,MAC9Be,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"Tab.styles.js","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: \"0 16px\",\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.colors.atmo4,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":[],"mappings":";;;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAI,MAAM,WAAW;AAAA,IACrB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,MAC1B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,WAAW,MAAM;AAAA,MAC9B,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,eAAe,MAAM,WAAW,MAAM;AAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,OAAO;AAAA,MACpB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/components/Table/Table.js

@@ -35,23 +35,34 @@ const HvTable = forwardRef((props, ref) => {
     variant = "default",
     ...others
   } = useDefaultProps("HvTable", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const containerRef = useRef(ref);
-  const components = useMemo(() => computeTablePartComponents(component), [component]);
-  const tableContext = useMemo(() => ({
-    components,
-    variant,
-    containerRef
-  }), [components, variant, containerRef]);
+  const components = useMemo(
+    () => computeTablePartComponents(component),
+    [component]
+  );
+  const tableContext = useMemo(
+    () => ({ components, variant, containerRef }),
+    [components, variant, containerRef]
+  );
   const Table = useMemo(() => components.Table, [components]);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(Table, { ref, role: component === defaultComponent ? null : "table", className: cx(classes.root, {
-    [classes.stickyHeader]: stickyHeader,
-    [classes.stickyColumns]: stickyColumns,
-    [classes.listRow]: variant === "listrow"
-  }, className), ...others }) });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      ref,
+      role: component === defaultComponent ? null : "table",
+      className: cx(
+        classes.root,
+        {
+          [classes.stickyHeader]: stickyHeader,
+          [classes.stickyColumns]: stickyColumns,
+          [classes.listRow]: variant === "listrow"
+        },
+        className
+      ),
+      ...others
+    }
+  ) });
 });
 export {
   HvTable,

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component]\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef]\n  );\n\n  const Table = useMemo(() => components.Table, [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={cx(\n          classes.root,\n          {\n            [classes.stickyHeader]: stickyHeader,\n            [classes.stickyColumns]: stickyColumns,\n            [classes.listRow]: variant === \"listrow\",\n          },\n          className\n        )}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":["defaultComponent","computeTablePartComponents","rootComponent","Table","THead","TBody","Tr","Th","Td","HvTable","forwardRef","props","ref","classes","classesProp","className","component","stickyHeader","stickyColumns","variant","others","useDefaultProps","cx","useClasses","containerRef","useRef","components","useMemo","tableContext","root","listRow"],"mappings":";;;;;;AA+CA,MAAMA,mBAAmB;AAEzB,MAAMC,6BAA8BC,CAAkB,kBAAA;AACpD,MAAIA,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACLC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACLL,OAAOD;AAAAA,IACPE,OAAOF;AAAAA,IACPG,OAAOH;AAAAA,IACPI,IAAIJ;AAAAA,IACJK,IAAIL;AAAAA,IACJM,IAAIN;AAAAA,EAAAA;AAER;AAYO,MAAMO,UAAUC,WAAsC,CAACC,OAAOC,QAAQ;AACrE,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAYhB;AAAAA,IACZiB,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWV,KAAK;AAC9B,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExCU,QAAAA,eAAeC,OAAOb,GAAG;AAEzBc,QAAAA,aAAaC,QACjB,MAAM1B,2BAA2Be,SAAS,GAC1C,CAACA,SAAS,CACZ;AAEMY,QAAAA,eAAeD,QACnB,OAAO;AAAA,IAAED;AAAAA,IAAYP;AAAAA,IAASK;AAAAA,EAC9B,IAAA,CAACE,YAAYP,SAASK,YAAY,CACpC;AAEA,QAAMrB,QAAQwB,QAAQ,MAAMD,WAAWvB,OAAO,CAACuB,UAAU,CAAC;AAE1D,6BACG,aAAa,UAAb,EAAsB,OAAOE,cAC5B,UAAC,oBAAA,OAAA,EACC,KACA,MAAMZ,cAAchB,mBAAmB,OAAO,SAC9C,WAAWsB,GACTT,QAAQgB,MACR;AAAA,IACE,CAAChB,QAAQI,YAAY,GAAGA;AAAAA,IACxB,CAACJ,QAAQK,aAAa,GAAGA;AAAAA,IACzB,CAACL,QAAQiB,OAAO,GAAGX,YAAY;AAAA,EAEjCJ,GAAAA,SACF,GACA,GAAIK,OAAO,CAAA,EAEf,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { forwardRef, TableHTMLAttributes, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component]\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef]\n  );\n\n  const Table = useMemo(() => components.Table, [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={cx(\n          classes.root,\n          {\n            [classes.stickyHeader]: stickyHeader,\n            [classes.stickyColumns]: stickyColumns,\n            [classes.listRow]: variant === \"listrow\",\n          },\n          className\n        )}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":[],"mappings":";;;;;;AA+CA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAAkB;AACpD,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvTable", {
+const { staticClasses, useClasses } = createClasses("HvTable", {
   root: {
     position: "relative",
     width: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"Table.styles.js","sources":["../../../../src/components/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.typography.body,\n\n    borderSpacing: 0,\n\n    \"& caption\": {\n      ...theme.typography.body,\n      padding: theme.space.xs,\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: {\n    backgroundColor: theme.colors.atmo2,\n    \"&\": {\n      borderSpacing: 0,\n    },\n  },\n  listRow: {\n    borderSpacing: `0 ${theme.space.xs}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","position","width","theme","typography","body","borderSpacing","padding","space","xs","textAlign","captionSide","stickyHeader","stickyColumns","backgroundColor","colors","atmo2","listRow"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IAEP,GAAGC,MAAMC,WAAWC;AAAAA,IAEpBC,eAAe;AAAA,IAEf,aAAa;AAAA,MACX,GAAGH,MAAMC,WAAWC;AAAAA,MACpBE,SAASJ,MAAMK,MAAMC;AAAAA,MACrBC,WAAW;AAAA,MACXC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAC,cAAc,CAAC;AAAA,EACfC,eAAe;AAAA,IACbC,iBAAiBX,MAAMY,OAAOC;AAAAA,IAC9B,KAAK;AAAA,MACHV,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAW,SAAS;AAAA,IACPX,eAAgB,KAAIH,MAAMK,MAAMC,EAAG;AAAA,EACrC;AACF,CAAC;"}
+{"version":3,"file":"Table.styles.js","sources":["../../../../src/components/Table/Table.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTable\", {\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.typography.body,\n\n    borderSpacing: 0,\n\n    \"& caption\": {\n      ...theme.typography.body,\n      padding: theme.space.xs,\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: {\n    backgroundColor: theme.colors.atmo2,\n    \"&\": {\n      borderSpacing: 0,\n    },\n  },\n  listRow: {\n    borderSpacing: `0 ${theme.space.xs}`,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,GAAG,MAAM,WAAW;AAAA,IAEpB,eAAe;AAAA,IAEf,aAAa;AAAA,MACX,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,cAAc,CAAC;AAAA,EACf,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,KAAK;AAAA,MACH,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,eAAe,KAAK,MAAM,MAAM,EAAE;AAAA,EACpC;AACF,CAAC;"}

package/dist/esm/components/Table/TableBody/TableBody.js

@@ -11,28 +11,49 @@ const tableSectionContext = {
   filterClassName: "_grid"
 };
 const defaultComponent = "tbody";
-const HvTableBody = forwardRef(({
-  classes: classesProp,
-  className,
-  component,
-  children,
-  withNavigation = false,
-  ...others
-}, externalRef) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const tableContext = useContext(TableContext);
-  const bodyRef = useRef(null);
-  const handleRef = useForkRef(externalRef, bodyRef);
-  const Component = component || tableContext?.components?.TBody || defaultComponent;
-  return /* @__PURE__ */ jsx(TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsx(Component, { className: cx(classes.root, className), ref: handleRef, role: Component === defaultComponent ? null : "rowgroup", ...others, children: withNavigation ? Children.map(children, (element) => {
-    if (isValidElement(element)) {
-      return /* @__PURE__ */ jsx(HvFocus, { id: `my-id-${element.key}`, rootRef: bodyRef, strategy: "grid", filterClass: tableSectionContext.filterClassName, navigationJump: 1, focusDisabled: false, selected: element.props.selected, children: element }, `row-${element.key}`);
-    }
-  }) : children }) });
-});
+const HvTableBody = forwardRef(
+  ({
+    classes: classesProp,
+    className,
+    component,
+    children,
+    withNavigation = false,
+    ...others
+  }, externalRef) => {
+    const { classes, cx } = useClasses(classesProp);
+    const tableContext = useContext(TableContext);
+    const bodyRef = useRef(null);
+    const handleRef = useForkRef(externalRef, bodyRef);
+    const Component = component || tableContext?.components?.TBody || defaultComponent;
+    return /* @__PURE__ */ jsx(TableSectionContext.Provider, { value: tableSectionContext, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cx(classes.root, className),
+        ref: handleRef,
+        role: Component === defaultComponent ? null : "rowgroup",
+        ...others,
+        children: withNavigation ? Children.map(children, (element) => {
+          if (isValidElement(element)) {
+            return /* @__PURE__ */ jsx(
+              HvFocus,
+              {
+                id: `my-id-${element.key}`,
+                rootRef: bodyRef,
+                strategy: "grid",
+                filterClass: tableSectionContext.filterClassName,
+                navigationJump: 1,
+                focusDisabled: false,
+                selected: element.props.selected,
+                children: element
+              },
+              `row-${element.key}`
+            );
+          }
+        }) : children
+      }
+    ) });
+  }
+);
 export {
   HvTableBody,
   staticClasses as tableBodyClasses