@hitachivantara/uikit-react-core 5.24.1 → 5.24.3

package/dist/cjs/components/Stack/Stack.cjs

@@ -3,13 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const styles = require("@mui/material/styles");
 const MuiDivider = require("@mui/material/Divider");
-const clsx = require("clsx");
 const isString = require("lodash/isString");
 const isBoolean = require("lodash/isBoolean");
 const useWidth = require("../../hooks/useWidth.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Stack_styles = require("./Stack.styles.cjs");
-const stackClasses = require("./stackClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Focus = require("../Focus/Focus.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -29,7 +27,7 @@ const getDirection = (direction, width, breakpoints) => {
 };
 const HvStack = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     children,
     direction = "column",
@@ -39,6 +37,10 @@ const HvStack = (props) => {
     dividerProps = {},
     ...others
   } = useDefaultProps.useDefaultProps("HvStack", props);
+  const {
+    classes,
+    cx
+  } = Stack_styles.useClasses(classesProp);
   const width = useWidth.useWidth();
   const containerRef = React.useRef(null);
   const {
@@ -56,11 +58,9 @@ const HvStack = (props) => {
     }
     return divider;
   }, [divider, dividerProps, processedDirection]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Stack_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: containerRef,
-    className: clsx.clsx(className, stackClasses.default.root, classes == null ? void 0 : classes.root),
-    $direction: processedDirection,
-    $breakpoint: spacing,
+    className: cx(classes.root, classes[processedDirection], classes[spacing], className),
     ...others,
     children: React__default.default.Children.map(children, (child, i) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -79,5 +79,6 @@ const HvStack = (props) => {
     })
   });
 };
+exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = HvStack;
 //# sourceMappingURL=Stack.cjs.map

package/dist/cjs/components/Stack/Stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.cjs","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 { clsx } from \"clsx\";\n\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\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 { HvBreakpoints } from \"@core/types/tokens\";\n\nimport { StyledRoot } from \"./Stack.styles\";\nimport stackClasses, { HvStackClasses } from \"./stackClasses\";\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,\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 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    <StyledRoot\n      ref={containerRef}\n      className={clsx(className, stackClasses.root, classes?.root)}\n      $direction={processedDirection}\n      $breakpoint={spacing}\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    </StyledRoot>\n  );\n};\n"],"names":["getDirection","direction","width","breakpoints","isString","i","indexOf","undefined","HvStack","props","classes","className","children","spacing","divider","withNavigation","dividerProps","others","useDefaultProps","useWidth","containerRef","useRef","useTheme","processedDirection","useMemo","keys","getDividerComponent","useCallback","isBoolean","MuiDivider","orientation","flexItem","role","StyledRoot","ref","clsx","stackClasses","root","$direction","$breakpoint","React","Children","map","child","_Fragment","_jsx","HvFocus","rootRef","focusDisabled","strategy","navigationJump","count","filterClass"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,MAAMA,eAAeA,CAACC,WAAWC,OAAOC,gBAAgB;AACtD,MAAIC,kBAAAA,QAASH,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;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAX,YAAY;AAAA,IACZY,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,iBAAiB;AAAA,IACjBC,eAAe,CAAC;AAAA,IAChB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,WAAWT,KAAK;AACpC,QAAMP,QAAQiB,SAAAA;AACRC,QAAAA,eAAeC,aAAO,IAAI;AAC1B,QAAA;AAAA,IAAElB;AAAAA,MAAgBmB,OAAS,SAAA;AAEjC,QAAMC,qBAAqBC,MAAAA,QACzB,MAAMxB,aAAaC,WAAWC,OAAOC,YAAYsB,IAAI,GACrD,CAACxB,WAAWC,OAAOC,WAAW,CAChC;AAOMuB,QAAAA,sBAAsBC,MAAAA,YAAY,MAAM;AACxCC,QAAAA,mBAAAA,QAAUd,OAAO,KAAKA,SAAS;AACjC,4CACGe,oBAAAA,SAAU;AAAA,QACTC,aACEP,uBAAuB,WAAW,eAAe;AAAA,QAEnDQ,UAAUR,uBAAuB;AAAA,QACjCS,MAAK;AAAA,QAAW,GACZhB;AAAAA,MAAAA,CACL;AAAA,IAEL;AACOF,WAAAA;AAAAA,EACN,GAAA,CAACA,SAASE,cAAcO,kBAAkB,CAAC;AAE9C,wCACGU,aAAAA,YAAU;AAAA,IACTC,KAAKd;AAAAA,IACLT,WAAWwB,KAAKxB,KAAAA,WAAWyB,aAAaC,QAAAA,MAAM3B,mCAAS2B,IAAI;AAAA,IAC3DC,YAAYf;AAAAA,IACZgB,aAAa1B;AAAAA,IAAQ,GACjBI;AAAAA,IAAML,UAET4B,eAAMC,QAAAA,SAASC,IAAI9B,UAAU,CAAC+B,OAAOtC,MAAM;AAC1C,6CACEuC,WAAAA,UAAA;AAAA,QAAAhC,UACGE,CAAAA,WAAWT,MAAM,KAAKqB,uBACtBX,iBACC8B,2BAAAA,IAACC,eAAO;AAAA,UACNC,SAAS3B;AAAAA,UACT4B,eAAe;AAAA,UACfC,UAAS;AAAA,UACTC,gBACE3B,uBAAuB,WACnB,IACAiB,uBAAMC,SAASU,MAAMvC,QAAQ,KAAK;AAAA,UAExCwC,aAAY;AAAA,UAAOxC,yCAEnB,OAAA;AAAA,YAAKD,WAAU;AAAA,YAAOC,UAAE+B;AAAAA,UAAAA,CAAW;AAAA,QAC5B,CAAA,IAETA,KACD;AAAA,MAAA,CACD;AAAA,IAAA,CAEL;AAAA,EAAA,CACS;AAEhB;;"}
+{"version":3,"file":"Stack.cjs","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 { useWidth } from \"@core/hooks/useWidth\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { HvBreakpoints } from \"@core/types/tokens\";\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","MuiDivider","orientation","flexItem","role","ref","root","React","Children","map","child","_Fragment","_jsx","HvFocus","rootRef","focusDisabled","strategy","navigationJump","count","filterClass"],"mappings":";;;;;;;;;;;;;;;;;AAmDA,MAAMA,eAAeA,CAACC,WAAWC,OAAOC,gBAAgB;AACtD,MAAIC,kBAAAA,QAASH,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,gBAAA,WAAWV,KAAK;AAC9B,QAAA;AAAA,IAAEC;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAE9C,QAAMT,QAAQoB,SAAAA;AACRC,QAAAA,eAAeC,aAAO,IAAI;AAC1B,QAAA;AAAA,IAAErB;AAAAA,MAAgBsB,OAAS,SAAA;AAEjC,QAAMC,qBAAqBC,MAAAA,QACzB,MAAM3B,aAAaC,WAAWC,OAAOC,YAAYyB,IAAI,GACrD,CAAC3B,WAAWC,OAAOC,WAAW,CAChC;AAOM0B,QAAAA,sBAAsBC,MAAAA,YAAY,MAAM;AACxCC,QAAAA,mBAAAA,QAAUhB,OAAO,KAAKA,SAAS;AACjC,4CACGiB,oBAAAA,SAAU;AAAA,QACTC,aACEP,uBAAuB,WAAW,eAAe;AAAA,QAEnDQ,UAAUR,uBAAuB;AAAA,QACjCS,MAAK;AAAA,QAAW,GACZlB;AAAAA,MAAAA,CACL;AAAA,IAEL;AACOF,WAAAA;AAAAA,EACN,GAAA,CAACA,SAASE,cAAcS,kBAAkB,CAAC;AAE9C,wCACE,OAAA;AAAA,IACEU,KAAKb;AAAAA,IACLX,WAAWQ,GACTV,QAAQ2B,MACR3B,QAAQgB,kBAAkB,GAC1BhB,QAAQI,OAAO,GACfF,SACF;AAAA,IAAE,GACEM;AAAAA,IAAML,UAETyB,eAAMC,QAAAA,SAASC,IAAI3B,UAAU,CAAC4B,OAAOpC,MAAM;AAC1C,6CACEqC,WAAAA,UAAA;AAAA,QAAA7B,UACGE,CAAAA,WAAWV,MAAM,KAAKwB,uBACtBb,iBACC2B,2BAAAA,IAACC,eAAO;AAAA,UACNC,SAAStB;AAAAA,UACTuB,eAAe;AAAA,UACfC,UAAS;AAAA,UACTC,gBACEtB,uBAAuB,WACnB,IACAY,uBAAMC,SAASU,MAAMpC,QAAQ,KAAK;AAAA,UAExCqC,aAAY;AAAA,UAAOrC,yCAEnB,OAAA;AAAA,YAAKD,WAAU;AAAA,YAAOC,UAAE4B;AAAAA,UAAAA,CAAW;AAAA,QAC5B,CAAA,IAETA,KACD;AAAA,MAAA,CACD;AAAA,IAAA,CAEL;AAAA,EAAA,CACE;AAET;;;"}

package/dist/cjs/components/Stack/Stack.styles.cjs

@@ -1,55 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "evwozt80"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "evwozt80",
-  label: "StyledRoot"
-}, transientOptions.transientOptions))(({
-  $direction,
-  $breakpoint
-}) => ({
-  display: "flex",
-  ...$direction === "column" && {
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvStack", {
+  root: {
+    display: "flex"
+  },
+  column: {
     flexDirection: "column"
   },
-  ...$direction === "row" && {
+  row: {
     flexDirection: "row"
   },
-  ...$breakpoint === "xs" && {
+  xs: {
     gap: uikitStyles.theme.space.xs
   },
-  ...$breakpoint === "sm" && {
+  sm: {
     gap: uikitStyles.theme.space.sm
   },
-  ...$breakpoint === "md" && {
+  md: {
     gap: uikitStyles.theme.spacing(4)
   },
-  ...$breakpoint === "lg" && {
+  lg: {
     gap: uikitStyles.theme.spacing(6)
   },
-  ...$breakpoint === "xl" && {
+  xl: {
     gap: uikitStyles.theme.spacing(11)
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU3RhY2svU3RhY2suc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9TdGFjay9TdGFjay5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICRkaXJlY3Rpb24sXG4gICAgJGJyZWFrcG9pbnQsXG4gIH06IHtcbiAgICAkZGlyZWN0aW9uOiBzdHJpbmc7XG4gICAgJGJyZWFrcG9pbnQ6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAuLi4oJGRpcmVjdGlvbiA9PT0gXCJjb2x1bW5cIiAmJiB7XG4gICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIH0pLFxuICAgIC4uLigkZGlyZWN0aW9uID09PSBcInJvd1wiICYmIHtcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwicm93XCIsXG4gICAgfSksXG4gICAgLi4uKCRicmVha3BvaW50ID09PSBcInhzXCIgJiYge1xuICAgICAgZ2FwOiB0aGVtZS5zcGFjZS54cyxcbiAgICB9KSxcbiAgICAuLi4oJGJyZWFrcG9pbnQgPT09IFwic21cIiAmJiB7XG4gICAgICBnYXA6IHRoZW1lLnNwYWNlLnNtLFxuICAgIH0pLFxuICAgIC4uLigkYnJlYWtwb2ludCA9PT0gXCJtZFwiICYmIHtcbiAgICAgIGdhcDogdGhlbWUuc3BhY2luZyg0KSxcbiAgICB9KSxcbiAgICAuLi4oJGJyZWFrcG9pbnQgPT09IFwibGdcIiAmJiB7XG4gICAgICBnYXA6IHRoZW1lLnNwYWNpbmcoNiksXG4gICAgfSksXG4gICAgLi4uKCRicmVha3BvaW50ID09PSBcInhsXCIgJiYge1xuICAgICAgZ2FwOiB0aGVtZS5zcGFjaW5nKDExKSxcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-exports.StyledRoot = StyledRoot;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Stack.styles.cjs.map

package/dist/cjs/components/Stack/Stack.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.styles.cjs","sources":["../../../../src/components/Stack/Stack.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $direction,\n    $breakpoint,\n  }: {\n    $direction: string;\n    $breakpoint: string;\n  }) => ({\n    display: \"flex\",\n    ...($direction === \"column\" && {\n      flexDirection: \"column\",\n    }),\n    ...($direction === \"row\" && {\n      flexDirection: \"row\",\n    }),\n    ...($breakpoint === \"xs\" && {\n      gap: theme.space.xs,\n    }),\n    ...($breakpoint === \"sm\" && {\n      gap: theme.space.sm,\n    }),\n    ...($breakpoint === \"md\" && {\n      gap: theme.spacing(4),\n    }),\n    ...($breakpoint === \"lg\" && {\n      gap: theme.spacing(6),\n    }),\n    ...($breakpoint === \"xl\" && {\n      gap: theme.spacing(11),\n    }),\n  })\n);\n"],"names":["StyledRoot","process","env","NODE_ENV","_extends","target","transientOptions","label","$direction","$breakpoint","display","flexDirection","gap","theme","space","xs","sm","spacing"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMaA,MAAAA,sDACX,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAIF,OAAO;AAAA,EACLC,SAAS;AAAA,EACT,GAAIF,eAAe,YAAY;AAAA,IAC7BG,eAAe;AAAA,EACjB;AAAA,EACA,GAAIH,eAAe,SAAS;AAAA,IAC1BG,eAAe;AAAA,EACjB;AAAA,EACA,GAAIF,gBAAgB,QAAQ;AAAA,IAC1BG,KAAKC,YAAAA,MAAMC,MAAMC;AAAAA,EACnB;AAAA,EACA,GAAIN,gBAAgB,QAAQ;AAAA,IAC1BG,KAAKC,YAAAA,MAAMC,MAAME;AAAAA,EACnB;AAAA,EACA,GAAIP,gBAAgB,QAAQ;AAAA,IAC1BG,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACA,GAAIR,gBAAgB,QAAQ;AAAA,IAC1BG,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACA,GAAIR,gBAAgB,QAAQ;AAAA,IAC1BG,KAAKC,YAAAA,MAAMI,QAAQ,EAAE;AAAA,EACvB;AACF,IAAEhB,QAAAC,IAAAC,0rDACJ;;"}
+{"version":3,"file":"Stack.styles.cjs","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,QAAAA,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,YAAAA,MAAMC,MAAMH;AAAAA,EACnB;AAAA,EACAI,IAAI;AAAA,IACFH,KAAKC,YAAAA,MAAMC,MAAMC;AAAAA,EACnB;AAAA,EACAC,IAAI;AAAA,IACFJ,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAC,IAAI;AAAA,IACFN,KAAKC,YAAAA,MAAMI,QAAQ,CAAC;AAAA,EACtB;AAAA,EACAE,IAAI;AAAA,IACFP,KAAKC,YAAAA,MAAMI,QAAQ,EAAE;AAAA,EACvB;AACF,CAAC;;;"}

package/dist/cjs/components/Tab/Tab.cjs

@@ -1,30 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const material = require("@mui/material");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const Tab_styles = require("./Tab.styles.cjs");
-const tabClasses = require("./tabClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvTab = (props) => {
   const {
-    classes,
+    classes: classesProp,
     iconPosition = "top",
     disabled = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvTab", props);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tab_styles.StyledTab, {
+  const {
+    classes,
+    cx
+  } = Tab_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tab, {
     classes: {
-      root: clsx.clsx(tabClasses.default.root, classes == null ? void 0 : classes.root),
-      selected: clsx.clsx(tabClasses.default.selected, classes == null ? void 0 : classes.selected),
-      disabled: clsx.clsx(tabClasses.default.disabled, classes == null ? void 0 : classes.disabled)
+      root: classes.root,
+      selected: classes.selected,
+      disabled: classes.disabled
     },
     disableRipple: true,
     disableTouchRipple: true,
-    focusVisibleClassName: clsx.clsx("HvIsFocusVisible", clsx.clsx(tabClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
+    focusVisibleClassName: cx("HvIsFocusVisible", classes.focusVisible),
     disabled,
     iconPosition,
     ...others
   });
 };
+exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = HvTab;
 //# sourceMappingURL=Tab.cjs.map

package/dist/cjs/components/Tab/Tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.cjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { TabProps as MuiTabProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTab } from \"./Tab.styles\";\nimport tabClasses, { HvTabClasses } from \"./tabClasses\";\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps\n  extends Omit<MuiTabProps, \"children\">,\n    HvBaseProps<HTMLDivElement, \"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,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n\n  return (\n    <StyledTab\n      classes={{\n        root: clsx(tabClasses.root, classes?.root),\n        selected: clsx(tabClasses.selected, classes?.selected),\n        disabled: clsx(tabClasses.disabled, classes?.disabled),\n      }}\n      disableRipple\n      disableTouchRipple\n      // Exposes the global class HvIsFocusVisible as a marker not to\n      // be styled directly, but only as helper in specific css queries\n      focusVisibleClassName={clsx(\n        \"HvIsFocusVisible\",\n        clsx(tabClasses.focusVisible, classes?.focusVisible)\n      )}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTab","props","classes","iconPosition","disabled","others","useDefaultProps","StyledTab","root","clsx","tabClasses","selected","disableRipple","disableTouchRipple","focusVisibleClassName","focusVisible"],"mappings":";;;;;;;AA0BaA,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC;AAAAA,IACAC,eAAe;AAAA,IACfC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASL,KAAK;AAElC,wCACGM,WAAAA,WAAS;AAAA,IACRL,SAAS;AAAA,MACPM,MAAMC,KAAAA,KAAKC,WAAAA,QAAWF,MAAMN,mCAASM,IAAI;AAAA,MACzCG,UAAUF,KAAAA,KAAKC,WAAAA,QAAWC,UAAUT,mCAASS,QAAQ;AAAA,MACrDP,UAAUK,KAAAA,KAAKC,WAAAA,QAAWN,UAAUF,mCAASE,QAAQ;AAAA,IACvD;AAAA,IACAQ,eAAa;AAAA,IACbC,oBAAkB;AAAA,IAGlBC,uBAAuBL,KAAAA,KACrB,oBACAA,KAAAA,KAAKC,mBAAWK,cAAcb,mCAASa,YAAY,CACrD;AAAA,IACAX;AAAAA,IACAD;AAAAA,IAA2B,GACvBE;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"Tab.cjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Tab, TabProps as MuiTabProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\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\n  extends Omit<MuiTabProps, \"children\">,\n    HvBaseProps<HTMLDivElement, \"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","Tab","root","selected","disableRipple","disableTouchRipple","focusVisibleClassName","focusVisible"],"mappings":";;;;;;AA0BaA,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC,eAAe;AAAA,IACfC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASN,KAAK;AAC5B,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAAA,WAAWN,WAAW;AAE9C,wCACGO,SAAAA,KAAG;AAAA,IACFR,SAAS;AAAA,MACPS,MAAMT,QAAQS;AAAAA,MACdC,UAAUV,QAAQU;AAAAA,MAClBP,UAAUH,QAAQG;AAAAA,IACpB;AAAA,IACAQ,eAAa;AAAA,IACbC,oBAAkB;AAAA,IAGlBC,uBAAuBP,GAAG,oBAAoBN,QAAQc,YAAY;AAAA,IAClEX;AAAAA,IACAD;AAAAA,IAA2B,GACvBE;AAAAA,EAAAA,CACL;AAEL;;;"}

package/dist/cjs/components/Tab/Tab.styles.cjs

@@ -1,68 +1,64 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const material = require("@mui/material");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledTab = /* @__PURE__ */ _styled__default.default(material.Tab, process.env.NODE_ENV === "production" ? {
-  target: "evi6req0"
-} : {
-  target: "evi6req0",
-  label: "StyledTab"
-})({
-  // Root
-  marginTop: "3px",
-  padding: uikitStyles.theme.tab.padding,
-  minWidth: 70,
-  minHeight: 32,
-  textTransform: "none",
-  fontFamily: uikitStyles.theme.fontFamily.body,
-  ...uikitStyles.theme.typography.body,
-  opacity: 1,
-  "&::after": {
-    position: "absolute",
-    left: 0,
-    top: "calc(100% - 1px)",
-    height: "1px",
-    width: "100%",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
-    content: "''"
-  },
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.tab.hoverBackgroundColor,
-    borderRadius: uikitStyles.theme.tab.hoverBackgroundBorderRadius,
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvTab", {
+  root: {
+    marginTop: "3px",
+    padding: uikitStyles.theme.tab.padding,
+    minWidth: 70,
+    minHeight: 32,
+    textTransform: "none",
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    ...uikitStyles.theme.typography.body,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.tab.hoverBackgroundColor,
+      borderRadius: uikitStyles.theme.tab.hoverBackgroundBorderRadius,
+      "&::after": {
+        height: "1px",
+        backgroundColor: uikitStyles.theme.tab.hoverUnderlineBackgroundColor
+      }
+    },
+    "&$selected": {
+      color: uikitStyles.theme.typography.label.color,
+      fontWeight: uikitStyles.theme.typography.label.fontWeight,
+      lineHeight: uikitStyles.theme.typography.label.lineHeight,
+      letterSpacing: uikitStyles.theme.typography.label.letterSpacing
+    },
+    "&$disabled": {
+      color: uikitStyles.theme.colors.secondary_60,
+      cursor: "not-allowed",
+      pointerEvents: "all",
+      opacity: 1,
+      "&:hover": {
+        background: "none"
+      }
+    },
+    opacity: 1,
     "&::after": {
+      position: "absolute",
+      left: 0,
+      top: "calc(100% - 1px)",
       height: "1px",
-      backgroundColor: uikitStyles.theme.tab.hoverUnderlineBackgroundColor
+      width: "100%",
+      backgroundColor: uikitStyles.theme.colors.atmo4,
+      content: "''"
+    },
+    // Override Mui styling: https://mui.com/material-ui/api/tab/#css
+    "& .MuiTab-iconWrapper": {
+      margin: 0
     }
   },
-  "&:focus-visible": {
+  focusVisible: {
     ...focusUtils.outlineStyles
   },
-  "&:focus": {
-    outline: "none"
-  },
-  // Override Mui styling: https://mui.com/material-ui/api/tab/#css
-  "&.Mui-selected": {
-    color: uikitStyles.theme.colors.secondary,
-    letterSpacing: uikitStyles.theme.typography.label.letterSpacing,
-    lineHeight: uikitStyles.theme.typography.label.lineHeight,
-    fontWeight: uikitStyles.theme.typography.label.fontWeight
-  },
-  "&.Mui-disabled": {
-    color: uikitStyles.theme.colors.secondary_60,
-    cursor: "not-allowed",
-    pointerEvents: "all",
-    opacity: 1,
-    "&:hover": {
-      background: "none"
-    }
-  },
-  "& .MuiTab-iconWrapper": {
-    margin: 0
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFiL1RhYi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVV5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYi9UYWIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgVGFiIGFzIE11aVRhYiB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGFiID0gc3R5bGVkKE11aVRhYikoe1xuICAvLyBSb290XG4gIG1hcmdpblRvcDogXCIzcHhcIixcbiAgcGFkZGluZzogdGhlbWUudGFiLnBhZGRpbmcsXG4gIG1pbldpZHRoOiA3MCxcbiAgbWluSGVpZ2h0OiAzMixcbiAgdGV4dFRyYW5zZm9ybTogXCJub25lXCIsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcbiAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuYm9keSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgb3BhY2l0eTogMSxcbiAgXCImOjphZnRlclwiOiB7XG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICBsZWZ0OiAwLFxuICAgIHRvcDogXCJjYWxjKDEwMCUgLSAxcHgpXCIsXG4gICAgaGVpZ2h0OiBcIjFweFwiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgICBjb250ZW50OiBcIicnXCIsXG4gIH0sXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWIuaG92ZXJCYWNrZ3JvdW5kQ29sb3IsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS50YWIuaG92ZXJCYWNrZ3JvdW5kQm9yZGVyUmFkaXVzLFxuICAgIFwiJjo6YWZ0ZXJcIjoge1xuICAgICAgaGVpZ2h0OiBcIjFweFwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWIuaG92ZXJVbmRlcmxpbmVCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG5cbiAgLy8gT3ZlcnJpZGUgTXVpIHN0eWxpbmc6IGh0dHBzOi8vbXVpLmNvbS9tYXRlcmlhbC11aS9hcGkvdGFiLyNjc3NcbiAgXCImLk11aS1zZWxlY3RlZFwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgbGV0dGVyU3BhY2luZzogdGhlbWUudHlwb2dyYXBoeS5sYWJlbC5sZXR0ZXJTcGFjaW5nLFxuICAgIGxpbmVIZWlnaHQ6IHRoZW1lLnR5cG9ncmFwaHkubGFiZWwubGluZUhlaWdodCxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS50eXBvZ3JhcGh5LmxhYmVsLmZvbnRXZWlnaHQsXG4gIH0sXG4gIFwiJi5NdWktZGlzYWJsZWRcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgIHBvaW50ZXJFdmVudHM6IFwiYWxsXCIsXG4gICAgb3BhY2l0eTogMSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgXCImIC5NdWlUYWItaWNvbldyYXBwZXJcIjoge1xuICAgIG1hcmdpbjogMCxcbiAgfSxcbn0pO1xuIl19 */");
-exports.StyledTab = StyledTab;
+  selected: {},
+  disabled: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Tab.styles.cjs.map

package/dist/cjs/components/Tab/Tab.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.cjs","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const StyledTab = styled(MuiTab)({\n  // Root\n  marginTop: \"3px\",\n  padding: theme.tab.padding,\n  minWidth: 70,\n  minHeight: 32,\n  textTransform: \"none\",\n  fontFamily: theme.fontFamily.body,\n  ...(theme.typography.body as CSSProperties),\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  \"&:hover\": {\n    backgroundColor: theme.tab.hoverBackgroundColor,\n    borderRadius: theme.tab.hoverBackgroundBorderRadius,\n    \"&::after\": {\n      height: \"1px\",\n      backgroundColor: theme.tab.hoverUnderlineBackgroundColor,\n    },\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n\n  // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n  \"&.Mui-selected\": {\n    color: theme.colors.secondary,\n    letterSpacing: theme.typography.label.letterSpacing,\n    lineHeight: theme.typography.label.lineHeight,\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  \"&.Mui-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  \"& .MuiTab-iconWrapper\": {\n    margin: 0,\n  },\n});\n"],"names":["StyledTab","MuiTab","process","env","NODE_ENV","target","label","marginTop","padding","theme","tab","minWidth","minHeight","textTransform","fontFamily","body","typography","opacity","position","left","top","height","width","backgroundColor","colors","atmo4","content","hoverBackgroundColor","borderRadius","hoverBackgroundBorderRadius","hoverUnderlineBackgroundColor","outlineStyles","outline","color","secondary","letterSpacing","lineHeight","fontWeight","secondary_60","cursor","pointerEvents","background","margin"],"mappings":";;;;;;;;AAUO,MAAMA,YAAmBC,iCAAAA,QAAAA,SAAAA,KAAMC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA;AAAA,EAEtCC,WAAW;AAAA,EACXC,SAASC,YAAAA,MAAMC,IAAIF;AAAAA,EACnBG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC7B,GAAIN,YAAAA,MAAMO,WAAWD;AAAAA,EACrBE,SAAS;AAAA,EACT,YAAY;AAAA,IACVC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,KAAK;AAAA,IACLC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,iBAAiBd,YAAAA,MAAMe,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTH,iBAAiBd,YAAAA,MAAMC,IAAIiB;AAAAA,IAC3BC,cAAcnB,YAAAA,MAAMC,IAAImB;AAAAA,IACxB,YAAY;AAAA,MACVR,QAAQ;AAAA,MACRE,iBAAiBd,YAAAA,MAAMC,IAAIoB;AAAAA,IAC7B;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC,WAAAA;AAAAA,EACL;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,kBAAkB;AAAA,IAChBC,OAAOxB,YAAAA,MAAMe,OAAOU;AAAAA,IACpBC,eAAe1B,YAAMO,MAAAA,WAAWV,MAAM6B;AAAAA,IACtCC,YAAY3B,YAAMO,MAAAA,WAAWV,MAAM8B;AAAAA,IACnCC,YAAY5B,YAAMO,MAAAA,WAAWV,MAAM+B;AAAAA,EACrC;AAAA,EACA,kBAAkB;AAAA,IAChBJ,OAAOxB,YAAAA,MAAMe,OAAOc;AAAAA,IACpBC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfvB,SAAS;AAAA,IACT,WAAW;AAAA,MACTwB,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,yBAAyB;AAAA,IACvBC,QAAQ;AAAA,EACV;AACF,GAACxC,QAAAC,IAAAC,aAAC,eAAA,KAAA,6lFAAA;;"}
+{"version":3,"file":"Tab.styles.cjs","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: theme.tab.padding,\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.tab.hoverBackgroundColor,\n      borderRadius: theme.tab.hoverBackgroundBorderRadius,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.tab.hoverUnderlineBackgroundColor,\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","theme","tab","minWidth","minHeight","textTransform","fontFamily","body","typography","backgroundColor","hoverBackgroundColor","borderRadius","hoverBackgroundBorderRadius","height","hoverUnderlineBackgroundColor","color","label","fontWeight","lineHeight","letterSpacing","colors","secondary_60","cursor","pointerEvents","opacity","background","position","left","top","width","atmo4","content","margin","focusVisible","outlineStyles","selected","disabled"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC,YAAAA,MAAMC,IAAIF;AAAAA,IACnBG,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7B,GAAIN,YAAAA,MAAMO,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBR,YAAAA,MAAMC,IAAIQ;AAAAA,MAC3BC,cAAcV,YAAAA,MAAMC,IAAIU;AAAAA,MACxB,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRJ,iBAAiBR,YAAAA,MAAMC,IAAIY;AAAAA,MAC7B;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOd,YAAMO,MAAAA,WAAWQ,MAAMD;AAAAA,MAC9BE,YAAYhB,YAAMO,MAAAA,WAAWQ,MAAMC;AAAAA,MACnCC,YAAYjB,YAAMO,MAAAA,WAAWQ,MAAME;AAAAA,MACnCC,eAAelB,YAAMO,MAAAA,WAAWQ,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOd,YAAAA,MAAMmB,OAAOC;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,MACLf,QAAQ;AAAA,MACRgB,OAAO;AAAA,MACPpB,iBAAiBR,YAAAA,MAAMmB,OAAOU;AAAAA,MAC9BC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC,WAAAA;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/Table/Table.styles.cjs

@@ -10,9 +10,7 @@ const {
     position: "relative",
     width: "100%",
     ...uikitStyles.theme.typography.body,
-    "table&": {
-      borderSpacing: 0
-    },
+    borderSpacing: 0,
     "& caption": {
       ...uikitStyles.theme.typography.body,
       padding: uikitStyles.theme.space.xs,
@@ -22,12 +20,13 @@ const {
   },
   stickyHeader: {},
   stickyColumns: {
-    backgroundColor: uikitStyles.theme.colors.atmo2
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    "&": {
+      borderSpacing: 0
+    }
   },
   listRow: {
-    "table&": {
-      borderSpacing: `0 ${uikitStyles.theme.space.xs}`
-    }
+    borderSpacing: `0 ${uikitStyles.theme.space.xs}`
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/components/Table/Table.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.styles.cjs","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    \"table&\": {\n      borderSpacing: 0,\n    },\n\n    \"& caption\": {\n      ...theme.typography.body,\n      padding: theme.space.xs,\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: { backgroundColor: theme.colors.atmo2 },\n  listRow: {\n    \"table&\": {\n      borderSpacing: `0 ${theme.space.xs}`,\n    },\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,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IAEP,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,IAEpB,UAAU;AAAA,MACRC,eAAe;AAAA,IACjB;AAAA,IAEA,aAAa;AAAA,MACX,GAAGH,YAAAA,MAAMC,WAAWC;AAAAA,MACpBE,SAASJ,YAAAA,MAAMK,MAAMC;AAAAA,MACrBC,WAAW;AAAA,MACXC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAC,cAAc,CAAC;AAAA,EACfC,eAAe;AAAA,IAAEC,iBAAiBX,YAAAA,MAAMY,OAAOC;AAAAA,EAAM;AAAA,EACrDC,SAAS;AAAA,IACP,UAAU;AAAA,MACRX,eAAgB,KAAIH,YAAAA,MAAMK,MAAMC;AAAAA,IAClC;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Table.styles.cjs","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,QAAAA,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IAEP,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,IAEpBC,eAAe;AAAA,IAEf,aAAa;AAAA,MACX,GAAGH,YAAAA,MAAMC,WAAWC;AAAAA,MACpBE,SAASJ,YAAAA,MAAMK,MAAMC;AAAAA,MACrBC,WAAW;AAAA,MACXC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAC,cAAc,CAAC;AAAA,EACfC,eAAe;AAAA,IACbC,iBAAiBX,YAAAA,MAAMY,OAAOC;AAAAA,IAC9B,KAAK;AAAA,MACHV,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAW,SAAS;AAAA,IACPX,eAAgB,KAAIH,YAAAA,MAAMK,MAAMC;AAAAA,EAClC;AACF,CAAC;;;"}

package/dist/cjs/components/Table/TableRow/TableRow.styles.cjs

@@ -12,21 +12,10 @@ const {
     color: "inherit",
     backgroundColor: uikitStyles.theme.table.rowBackgroundColor,
     verticalAlign: "middle",
-    outline: 0,
-    minHeight: 32,
-    "tr&": {
-      height: 32
-    }
+    outline: 0
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */
-  head: {
-    "&:first-of-type": {
-      height: 52
-    },
-    "tr&:first-of-type": {
-      height: 52
-    }
-  },
+  head: {},
   /** Styles applied to the component root when inside a `HvTableBody`. */
   body: {},
   /** Styles applied to the component root when inside a `HvTableFooter`. */
@@ -53,9 +42,11 @@ const {
   },
   /** Styles applied to the component root when its table variant is list. */
   variantList: {
+    // only applied on custom `display`
+    marginBottom: uikitStyles.theme.space.xs,
+    borderRadius: uikitStyles.theme.table.rowListBorderRadius,
     ...utils.getBorderStyles("row", uikitStyles.theme.table.rowListBorderColor, uikitStyles.theme.table.rowListBorderRadius),
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    height: 52,
     "&$selected": {
       ...utils.getBorderStyles("row", uikitStyles.theme.colors.secondary, uikitStyles.theme.table.rowListBorderRadius),
       "&:hover": {
@@ -71,14 +62,7 @@ const {
   },
   /** Styles applied to the component root when its table variant is list. */
   variantListHead: {
-    backgroundColor: uikitStyles.theme.table.rowListBackgroundColor,
-    height: 16,
-    "&:first-of-type": {
-      height: 16
-    },
-    "tr&:first-of-type": {
-      height: 16
-    }
+    backgroundColor: uikitStyles.theme.table.rowListBackgroundColor
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/components/Table/TableRow/TableRow.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.styles.cjs","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.table.rowBackgroundColor,\n    verticalAlign: \"middle\",\n    outline: 0,\n    minHeight: 32,\n    \"tr&\": {\n      height: 32,\n    },\n  },\n  /** Styles applied to the component root when inside a `HvTableHead`. */\n  head: {\n    \"&:first-of-type\": {\n      height: 52,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 52,\n    },\n  },\n  /** Styles applied to the component root when inside a `HvTableBody`. */\n  body: {},\n  /** Styles applied to the component root when inside a `HvTableFooter`. */\n  footer: {},\n  /** Styles applied to the component root when selected. */\n  selected: {\n    backgroundColor: theme.table.selectedRowBackgroundColor,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {},\n  /** Styles applied to the component root on hover. */\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.table.rowHoverColor,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantList: {\n    ...getBorderStyles(\n      \"row\",\n      theme.table.rowListBorderColor,\n      theme.table.rowListBorderRadius\n    ),\n    backgroundColor: theme.colors.atmo1,\n    height: 52,\n    \"&$selected\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.colors.secondary,\n        theme.table.rowListBorderRadius\n      ),\n\n      \"&:hover\": {\n        ...getBorderStyles(\n          \"row\",\n          theme.table.rowHoverBorderColor,\n          theme.table.rowListBorderRadius\n        ),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.table.rowHoverBorderColor,\n        theme.table.rowListBorderRadius\n      ),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.table.rowListBorderRadius,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: theme.table.rowListBackgroundColor,\n    height: 16,\n    \"&:first-of-type\": {\n      height: 16,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 16,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","color","backgroundColor","theme","table","rowBackgroundColor","verticalAlign","outline","minHeight","height","head","body","footer","selected","selectedRowBackgroundColor","expanded","colors","atmo1","borderBottom","striped","hover","transition","rowHoverColor","variantList","getBorderStyles","rowListBorderColor","rowListBorderRadius","secondary","rowHoverBorderColor","borderRadius","variantListHead","rowListBackgroundColor"],"mappings":";;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBC,YAAAA,MAAMC,MAAMC;AAAAA,IAC7BC,eAAe;AAAA,IACfC,SAAS;AAAA,IACTC,WAAW;AAAA,IACX,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJ,mBAAmB;AAAA,MACjBD,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA,EAEAE,MAAM,CAAC;AAAA;AAAA,EAEPC,QAAQ,CAAC;AAAA;AAAA,EAETC,UAAU;AAAA,IACRX,iBAAiBC,YAAAA,MAAMC,MAAMU;AAAAA,EAC/B;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRb,iBAAiBC,YAAAA,MAAMa,OAAOC;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEAC,SAAS,CAAC;AAAA;AAAA,EAEVC,OAAO;AAAA,IACLC,YAAY;AAAA,IACZ,WAAW;AAAA,MACTnB,iBAAiBC,YAAAA,MAAMC,MAAMkB;AAAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAC,aAAa;AAAA,IACX,GAAGC,sBACD,OACArB,kBAAMC,MAAMqB,oBACZtB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACAxB,iBAAiBC,YAAAA,MAAMa,OAAOC;AAAAA,IAC9BR,QAAQ;AAAA,IACR,cAAc;AAAA,MACZ,GAAGe,sBACD,OACArB,kBAAMa,OAAOW,WACbxB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MAEA,WAAW;AAAA,QACT,GAAGF,sBACD,OACArB,kBAAMC,MAAMwB,qBACZzB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAGF,sBACD,OACArB,kBAAMC,MAAMwB,qBACZzB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACfG,cAAc1B,YAAAA,MAAMC,MAAMsB;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAI,iBAAiB;AAAA,IACf5B,iBAAiBC,YAAAA,MAAMC,MAAM2B;AAAAA,IAC7BtB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjBA,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"TableRow.styles.cjs","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.table.rowBackgroundColor,\n    verticalAlign: \"middle\",\n    outline: 0,\n  },\n  /** Styles applied to the component root when inside a `HvTableHead`. */\n  head: {},\n  /** Styles applied to the component root when inside a `HvTableBody`. */\n  body: {},\n  /** Styles applied to the component root when inside a `HvTableFooter`. */\n  footer: {},\n  /** Styles applied to the component root when selected. */\n  selected: {\n    backgroundColor: theme.table.selectedRowBackgroundColor,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {},\n  /** Styles applied to the component root on hover. */\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.table.rowHoverColor,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantList: {\n    // only applied on custom `display`\n    marginBottom: theme.space.xs,\n    borderRadius: theme.table.rowListBorderRadius,\n\n    ...getBorderStyles(\n      \"row\",\n      theme.table.rowListBorderColor,\n      theme.table.rowListBorderRadius\n    ),\n    backgroundColor: theme.colors.atmo1,\n    \"&$selected\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.colors.secondary,\n        theme.table.rowListBorderRadius\n      ),\n\n      \"&:hover\": {\n        ...getBorderStyles(\n          \"row\",\n          theme.table.rowHoverBorderColor,\n          theme.table.rowListBorderRadius\n        ),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.table.rowHoverBorderColor,\n        theme.table.rowListBorderRadius\n      ),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.table.rowListBorderRadius,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: theme.table.rowListBackgroundColor,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","color","backgroundColor","theme","table","rowBackgroundColor","verticalAlign","outline","head","body","footer","selected","selectedRowBackgroundColor","expanded","colors","atmo1","borderBottom","striped","hover","transition","rowHoverColor","variantList","marginBottom","space","xs","borderRadius","rowListBorderRadius","getBorderStyles","rowListBorderColor","secondary","rowHoverBorderColor","variantListHead","rowListBackgroundColor"],"mappings":";;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBC,YAAAA,MAAMC,MAAMC;AAAAA,IAC7BC,eAAe;AAAA,IACfC,SAAS;AAAA,EACX;AAAA;AAAA,EAEAC,MAAM,CAAC;AAAA;AAAA,EAEPC,MAAM,CAAC;AAAA;AAAA,EAEPC,QAAQ,CAAC;AAAA;AAAA,EAETC,UAAU;AAAA,IACRT,iBAAiBC,YAAAA,MAAMC,MAAMQ;AAAAA,EAC/B;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRX,iBAAiBC,YAAAA,MAAMW,OAAOC;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEAC,SAAS,CAAC;AAAA;AAAA,EAEVC,OAAO;AAAA,IACLC,YAAY;AAAA,IACZ,WAAW;AAAA,MACTjB,iBAAiBC,YAAAA,MAAMC,MAAMgB;AAAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAC,aAAa;AAAA;AAAA,IAEXC,cAAcnB,YAAAA,MAAMoB,MAAMC;AAAAA,IAC1BC,cAActB,YAAAA,MAAMC,MAAMsB;AAAAA,IAE1B,GAAGC,sBACD,OACAxB,kBAAMC,MAAMwB,oBACZzB,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACAxB,iBAAiBC,YAAAA,MAAMW,OAAOC;AAAAA,IAC9B,cAAc;AAAA,MACZ,GAAGY,sBACD,OACAxB,kBAAMW,OAAOe,WACb1B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MAEA,WAAW;AAAA,QACT,GAAGC,sBACD,OACAxB,kBAAMC,MAAM0B,qBACZ3B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAGC,sBACD,OACAxB,kBAAMC,MAAM0B,qBACZ3B,YAAAA,MAAMC,MAAMsB,mBACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACfD,cAActB,YAAAA,MAAMC,MAAMsB;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAK,iBAAiB;AAAA,IACf7B,iBAAiBC,YAAAA,MAAMC,MAAM4B;AAAAA,EAC/B;AACF,CAAC;;;"}

package/dist/cjs/components/Table/hooks/useSticky.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const reactTable = require("react-table");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const isSticky = (value) => /left|right/i.test(value);
 const getStickyValue = ({
   sticky,
@@ -119,7 +120,10 @@ const getCellProps = (header, isHeaderCell) => {
       alignItems: isHeaderCell ? "start" : "center",
       justifyContent: header.align,
       width: `${header.totalWidth}px`,
-      minWidth: `${header.totalMinWidth}px`
+      minWidth: `${header.totalMinWidth}px`,
+      ...isHeaderCell && {
+        backgroundColor: uikitStyles.theme.colors.atmo2
+      }
     }
   };
   if (header.sticky != null) {