@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContent.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../ActionsGeneric\";\nimport { HvButtonVariant } from \"../../Button\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { setId } from \"../../utils/setId\";\nimport { HvSnackbarVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\"> {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>(function HvSnackbarContent(props, ref) {\n  const {\n    className,\n    id,\n    classes: classesProp,\n    label,\n    variant = \"default\",\n    showIcon,\n    customIcon,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvSnackbarContent\", props);\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n  const innerAction: any = isValidElement(action) ? action : [action];\n\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  return (\n    <SnackbarContent\n      ref={ref}\n      id={id}\n      classes={{\n        root: classes.root,\n        message: classes.message,\n      }}\n      className={cx(classes?.[variant], className)}\n      message={\n        <div id={setId(id, \"message\")} className={classes.messageSpan}>\n          {icon && <div className={classes.iconVariant}>{icon}</div>}\n          <div className={classes.messageText}>{label}</div>\n          {action && (\n            <div id={setId(id, \"action\")} className={classes.action}>\n              <HvActionsGeneric\n                id={id}\n                variant={\n                  activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n                }\n                actions={innerAction}\n                actionsCallback={actionCallback}\n                onAction={onAction}\n              />\n            </div>\n          )}\n        </div>\n      }\n      {...others}\n    />\n  );\n});\n"],"names":["HvSnackbarContent"],"mappings":";;;;;;;;;AAiDO,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AACxE,QAAM,cAAmB,eAAe,MAAM,IAAI,SAAS,CAAC,MAAM;AAElE,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,YAAY,IAAI,SAAS;AAG/B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,SAAS,QAAQ;AAAA,MACnB;AAAA,MACA,WAAW,GAAG,UAAU,OAAO,GAAG,SAAS;AAAA,MAC3C,SACG,qBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,SAAS,GAAG,WAAW,QAAQ,aAC/C,UAAA;AAAA,QAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAK,MAAA;AAAA,QACnD,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAM,OAAA;AAAA,QAC3C,UACE,oBAAA,OAAA,EAAI,IAAI,MAAM,IAAI,QAAQ,GAAG,WAAW,QAAQ,QAC/C,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SACE,aAAa,SAAS;AAAA,YAExB,SAAS;AAAA,YACT,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA,GAEJ;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"SnackbarContent.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { type SnackbarProps as MuiSnackbarProps } from \"@mui/material/Snackbar\";\nimport { type SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvCallout, HvCalloutVariant } from \"../../utils/Callout\";\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport type HvSnackbarVariant = HvCalloutVariant;\n\nconst isActionGeneric = (action: any): action is HvActionGeneric =>\n  action && typeof action === \"object\" && \"id\" in action && \"label\" in action;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\"> {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** @inheritdoc */\n  onClose?: MuiSnackbarProps[\"onClose\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>(function HvSnackbarContent(props, ref) {\n  const {\n    className,\n    id,\n    classes: classesProp,\n    label,\n    variant = \"default\",\n    showIcon,\n    customIcon,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    onClose,\n    ...others\n  } = useDefaultProps(\"HvSnackbarContent\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvCallout\n      ref={ref}\n      id={id}\n      variant={variant}\n      classes={{\n        root: cx(classes.root, classes[variant], className),\n        message: cx(classes.message, classes.messageSpan),\n        messageIcon: classes.iconVariant,\n        messageContent: classes.messageText,\n        action: classes.action,\n      }}\n      showIcon={showIcon}\n      customIcon={customIcon}\n      actions={isActionGeneric(action) ? [action] : action}\n      onClose={onClose}\n      onAction={(evt, action) => {\n        onAction?.(evt, action);\n        actionCallback?.(evt, id!, action);\n      }}\n      {...others}\n    >\n      {label}\n    </HvCallout>\n  );\n});\n"],"names":["HvSnackbarContent","action"],"mappings":";;;;;;AAkBA,MAAM,kBAAkB,CAAC,WACvB,UAAU,OAAO,WAAW,YAAY,QAAQ,UAAU,WAAW;AA4BhE,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,OAAO,GAAG,SAAS;AAAA,QAClD,SAAS,GAAG,QAAQ,SAAS,QAAQ,WAAW;AAAA,QAChD,aAAa,QAAQ;AAAA,QACrB,gBAAgB,QAAQ;AAAA,QACxB,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,gBAAgB,MAAM,IAAI,CAAC,MAAM,IAAI;AAAA,MAC9C;AAAA,MACA,UAAU,CAAC,KAAKC,YAAW;AACzB,mBAAW,KAAKA,OAAM;AACL,yBAAA,KAAK,IAAKA,OAAM;AAAA,MACnC;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js

@@ -1,61 +1,33 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../../ActionsGeneric/ActionsGeneric.styles.js";
-const { useClasses, staticClasses } = createClasses(
-  "HvSnackbar-Content",
-  {
-    root: {
-      width: "310px",
-      minHeight: "52px",
-      maxHeight: "92px",
-      padding: theme.space.xs,
-      boxShadow: "none"
-    },
-    success: {
-      backgroundColor: theme.colors.positive_20
-    },
-    error: {
-      backgroundColor: theme.colors.negative_20
-    },
-    default: {
-      backgroundColor: theme.colors.neutral_20
-    },
-    warning: {
-      backgroundColor: theme.colors.warning_20
-    },
-    message: {
-      padding: 0,
-      width: "100%"
-    },
-    messageSpan: {
-      display: "flex",
-      alignItems: "center",
-      minHeight: "32px"
-    },
-    messageText: {
-      paddingLeft: theme.space.xs,
-      color: theme.colors.base_dark,
-      fontFamily: theme.fontFamily.body,
-      maxHeight: "72px",
-      wordBreak: "break-word",
-      textWrap: "balance",
-      overflow: "hidden"
-    },
-    action: {
-      textAlign: "right",
-      paddingLeft: theme.space.xs,
-      marginLeft: "auto",
-      [`& .${staticClasses$1.button}`]: {
-        borderColor: theme.colors.base_dark,
-        color: theme.colors.base_dark,
-        "&:hover": {
-          borderColor: theme.colors.base_dark
-        }
-      }
-    },
-    iconVariant: {}
-  }
-);
+const name = "HvSnackbarContent";
+const { useClasses, staticClasses } = createClasses(name, {
+  root: {
+    width: "310px",
+    minHeight: "52px",
+    maxHeight: "92px",
+    padding: theme.space.xs
+  },
+  success: {},
+  error: {},
+  default: {},
+  warning: {},
+  info: {},
+  accent: {},
+  message: {
+    padding: 0,
+    width: "100%",
+    minHeight: "32px"
+  },
+  action: {},
+  messageText: {
+    paddingLeft: theme.space.xs,
+    maxHeight: "72px"
+  },
+  iconVariant: {},
+  /** @deprecated use `classes.message` instead */
+  messageSpan: {}
+});
 export {
   staticClasses,
   useClasses

package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbar-Content\",\n  {\n    root: {\n      width: \"310px\",\n      minHeight: \"52px\",\n      maxHeight: \"92px\",\n      padding: theme.space.xs,\n      boxShadow: \"none\",\n    },\n    success: {\n      backgroundColor: theme.colors.positive_20,\n    },\n    error: {\n      backgroundColor: theme.colors.negative_20,\n    },\n    default: {\n      backgroundColor: theme.colors.neutral_20,\n    },\n    warning: {\n      backgroundColor: theme.colors.warning_20,\n    },\n    message: {\n      padding: 0,\n      width: \"100%\",\n    },\n    messageSpan: {\n      display: \"flex\",\n      alignItems: \"center\",\n      minHeight: \"32px\",\n    },\n    messageText: {\n      paddingLeft: theme.space.xs,\n      color: theme.colors.base_dark,\n      fontFamily: theme.fontFamily.body,\n      maxHeight: \"72px\",\n      wordBreak: \"break-word\",\n      textWrap: \"balance\",\n      overflow: \"hidden\",\n    },\n    action: {\n      textAlign: \"right\",\n      paddingLeft: theme.space.xs,\n      marginLeft: \"auto\",\n      [`& .${actionsGenericClasses.button}`]: {\n        borderColor: theme.colors.base_dark,\n        color: theme.colors.base_dark,\n        \"&:hover\": {\n          borderColor: theme.colors.base_dark,\n        },\n      },\n    },\n    iconVariant: {},\n  },\n);\n"],"names":["actionsGenericClasses"],"mappings":";;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,OAAO,MAAM,OAAO;AAAA,MACpB,YAAY,MAAM,WAAW;AAAA,MAC7B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ,CAAC,MAAMA,gBAAsB,MAAM,EAAE,GAAG;AAAA,QACtC,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,QACpB,WAAW;AAAA,UACT,aAAa,MAAM,OAAO;AAAA,QAAA;AAAA,MAC5B;AAAA,IAEJ;AAAA,IACA,aAAa,CAAA;AAAA,EAAC;AAElB;"}
+{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvSnackbarContent\";\nexport const { useClasses, staticClasses } = createClasses(name, {\n  root: {\n    width: \"310px\",\n    minHeight: \"52px\",\n    maxHeight: \"92px\",\n    padding: theme.space.xs,\n  },\n  success: {},\n  error: {},\n  default: {},\n  warning: {},\n  info: {},\n  accent: {},\n  message: {\n    padding: 0,\n    width: \"100%\",\n    minHeight: \"32px\",\n  },\n  action: {},\n  messageText: {\n    paddingLeft: theme.space.xs,\n    maxHeight: \"72px\",\n  },\n  iconVariant: {},\n  /** @deprecated use `classes.message` instead */\n  messageSpan: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AACN,MAAM,EAAE,YAAY,kBAAkB,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,aAAa;AAAA,IACX,aAAa,MAAM,MAAM;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,EACA,aAAa,CAAC;AAAA;AAAA,EAEd,aAAa,CAAA;AACf,CAAC;"}

package/dist/esm/SnackbarProvider/SnackbarProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  /** Class names to be applied. */\n  className?: string;\n  /** The container the snackbar should slide from. */\n  container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>(function HvNotistackSnackMessage(props, ref) {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className },\n      );\n    },\n    [enqueueNotistackSnackbar],\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar],\n  );\n};\n\n/**\n * A snackbar provider to control the stacking of multiple snackbars in the app.\n *\n * This component uses of the [Notistack](https://github.com/iamhosseindhv/notistack) library.\n * Please refer to its [API Reference](https://notistack.com/v2.x/api-reference) for more complex usage scenarios.\n */\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  container,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { containerRoot, ...otherNotistackClasses } =\n    notistackClassesOverride || {};\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: cx(\n      css({\n        pointerEvents: \"all\",\n        \"& > div > div\": {\n          // Overrides notistack extra padding\n          padding: \"0 !important\",\n          transition: \"all 0s ease 0s !important\",\n        },\n      }),\n      containerRoot,\n    ),\n    ...otherNotistackClasses,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      domRoot={container}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":["HvNotistackSnackMessage"],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,SAASA,yBAAwB,OAAO,KAAK;AAC7C,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;AAQO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport {\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n  HvSnackbarVariant,\n} from \"../Snackbar/SnackbarContent\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  /** Class names to be applied. */\n  className?: string;\n  /** The container the snackbar should slide from. */\n  container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps\n  extends Omit<OptionsObject, \"variant\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>(function HvNotistackSnackMessage(props, ref) {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className },\n      );\n    },\n    [enqueueNotistackSnackbar],\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar],\n  );\n};\n\n/**\n * A snackbar provider to control the stacking of multiple snackbars in the app.\n *\n * This component uses of the [Notistack](https://github.com/iamhosseindhv/notistack) library.\n * Please refer to its [API Reference](https://notistack.com/v2.x/api-reference) for more complex usage scenarios.\n */\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  container,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { containerRoot, ...otherNotistackClasses } =\n    notistackClassesOverride || {};\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: cx(\n      css({\n        pointerEvents: \"all\",\n        \"& > div > div\": {\n          // Overrides notistack extra padding\n          padding: \"0 !important\",\n          transition: \"all 0s ease 0s !important\",\n        },\n      }),\n      containerRoot,\n    ),\n    ...otherNotistackClasses,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      domRoot={container}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":["HvNotistackSnackMessage"],"mappings":";;;;;;AAuDA,MAAM,0BAA0B,WAG9B,SAASA,yBAAwB,OAAO,KAAK;AAC7C,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,yBAAyB;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB,YAAY;AAEpC,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAAA;AAG3E,QAAM,EAAE,iBAAiB,0BAA0B,cACjD,IAAA;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,IACD;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AACO,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EACjC;AACF;AAQO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAC;AAE/B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,MACd,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

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

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = createClasses("HvStack", {
     flexDirection: "row"
   },
   divider: {
-    borderColor: theme.colors.atmo4
+    borderColor: theme.colors.border
   },
   xs: {
     gap: theme.space.xs

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.styles.js","sources":["../../../src/Stack/Stack.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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  divider: {\n    borderColor: theme.colors.atmo4,\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":";;AAGO,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,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;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,EAAA;AAEzB,CAAC;"}
+{"version":3,"file":"Stack.styles.js","sources":["../../../src/Stack/Stack.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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  divider: {\n    borderColor: theme.colors.border,\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":";;AAGO,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,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;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,EAAA;AAEzB,CAAC;"}

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

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvSwitch", {
   },
   invalidSwitch: {
     paddingBottom: "1px",
-    borderBottom: `1px solid ${theme.colors.negative_120}`
+    borderBottom: `1px solid ${theme.form.errorColor}`
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.js","sources":["../../../src/Switch/Switch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\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_120}`,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,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,YAAY;AAAA,EAAA;AAExD,CAAC;"}
+{"version":3,"file":"Switch.styles.js","sources":["../../../src/Switch/Switch.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\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.form.errorColor}`,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,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,KAAK,UAAU;AAAA,EAAA;AAEpD,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Table.styles\";\nimport TableContext from \"./TableContext\";\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\n  extends React.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: React.ElementType<any>) => {\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<\n  // no-indent\n  HTMLElement,\n  HvTableProps\n>(function HvTable(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":["HvTable"],"mappings":";;;;;;AAiDA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EAAA;AAGK,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACF;AAYO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,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,OAAO,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EACpC;AAEA,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,EAAA,GAER;AAEJ,CAAC;"}
+{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Table.styles\";\nimport TableContext from \"./TableContext\";\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\n  extends React.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: React.ElementType<any>) => {\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 [Table Hooks documentation](https://lumada-design.github.io/uikit/master/?path=/docs/visualizations-table-table-hooks--docs) for more details.\n */\nexport const HvTable = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTableProps\n>(function HvTable(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":["HvTable"],"mappings":";;;;;;AAiDA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EAAA;AAGK,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACF;AAYO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,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,OAAO,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EACpC;AAEA,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,EAAA,GAER;AAEJ,CAAC;"}

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

@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = createClasses("HvTable", {
   },
   stickyHeader: {},
   stickyColumns: {
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     "&": {
       borderSpacing: 0
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.styles.js","sources":["../../../src/Table/Table.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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":";;AAGO,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,IAAA;AAAA,EAEjB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,KAAK;AAAA,MACH,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,KAAK,MAAM,MAAM,EAAE;AAAA,EAAA;AAEtC,CAAC;"}
+{"version":3,"file":"Table.styles.js","sources":["../../../src/Table/Table.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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.bgPage,\n    \"&\": {\n      borderSpacing: 0,\n    },\n  },\n  listRow: {\n    borderSpacing: `0 ${theme.space.xs}`,\n  },\n});\n"],"names":[],"mappings":";;AAGO,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,IAAA;AAAA,EAEjB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,KAAK;AAAA,MACH,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,KAAK,MAAM,MAAM,EAAE;AAAA,EAAA;AAEtC,CAAC;"}

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

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
-    borderColor: theme.colors.atmo4,
+    borderColor: theme.colors.border,
     padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`,
     borderBottomWidth: 1
   },
@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     height: 52,
     verticalAlign: "top",
     alignContent: "start",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderTop: "1px solid transparent",
     ...theme.typography.label
   },
@@ -115,7 +115,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
   stickyColumn: {
     position: "sticky",
     zIndex: 2,
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     "&$groupColumnMostRight+$stickyColumn": {
       borderLeft: 0
     }
@@ -155,7 +155,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `2px solid ${theme.colors.primary_80}`
+    borderRight: `2px solid ${theme.colors.primaryStrong}`
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    borderColor: theme.colors.atmo4,\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottomWidth: 1,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    ...theme.typography.label,\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n\n    \"&$sorted\": {\n      backgroundColor: theme.alpha(\"primary\", 0.1),\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeftWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    borderWidth: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeftWidth: 1,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeftWidth: 1,\n\n    \"&:first-of-type\": {\n      borderLeftWidth: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRightWidth: 1,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRightWidth: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeftWidth: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `2px solid ${theme.colors.primary_80}`,\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    borderColor: theme.colors.border,\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottomWidth: 1,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n\n    backgroundColor: theme.colors.bgContainer,\n    borderTop: \"1px solid transparent\",\n    ...theme.typography.label,\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n\n    \"&$sorted\": {\n      backgroundColor: theme.alpha(\"primary\", 0.1),\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeftWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    borderWidth: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.bgPage,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeftWidth: 1,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeftWidth: 1,\n\n    \"&:first-of-type\": {\n      borderLeftWidth: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRightWidth: 1,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRightWidth: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeftWidth: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `2px solid ${theme.colors.primaryStrong}`,\n  },\n});\n"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     alignContent: "inherit",
     textAlign: "left",
     padding: theme.spacing(0, 1, 0, 4),
-    borderColor: theme.colors.atmo4,
+    borderColor: theme.colors.border,
     borderBottomWidth: 1
   },
   head: {
@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     verticalAlign: "top",
     alignContent: "start",
     ...theme.typography.label,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderBottomWidth: 1,
     "*:first-of-type > &": {
       height: "var(--first-row-cell-height)",
@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
       paddingLeft: 0,
       cursor: "pointer",
       ":hover, :focus-within": {
-        backgroundColor: theme.colors.containerBackgroundHover,
+        backgroundColor: theme.colors.bgHover,
         "& $sortIcon": {
           opacity: 1
         }
@@ -48,7 +48,7 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     backgroundColor: "inherit",
     ...theme.typography.body,
     ":where($sorted)": {
-      backgroundColor: theme.alpha("atmo1", 0.4)
+      backgroundColor: theme.alpha("bgContainer", 0.4)
     },
     "&$sortable:not($variantNone)": {
       paddingLeft: 32
@@ -129,10 +129,10 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
   resizable: {
     borderRightWidth: 1,
     ":has($resizer:hover)": {
-      borderRight: `2px solid ${theme.colors.primary_80}`
+      borderRight: `2px solid ${theme.colors.primaryStrong}`
     }
   },
-  resizing: { borderRight: `2px solid ${theme.colors.primary_80}` },
+  resizing: { borderRight: `2px solid ${theme.colors.primaryStrong}` },
   resizer: {
     display: "inline-block",
     width: 16,

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.styles.js","sources":["../../../../src/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing(0, 1, 0, 4),\n    borderColor: theme.colors.atmo4,\n    borderBottomWidth: 1,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n    ...theme.typography.label,\n    backgroundColor: theme.colors.atmo1,\n    borderBottomWidth: 1,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: \"1px solid transparent\",\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottomWidth: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      alignContent: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \":hover, :focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        \"& $sortIcon\": {\n          opacity: 1,\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \":where($sorted)\": {\n      backgroundColor: theme.alpha(\"atmo1\", 0.4),\n    },\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeftWidth: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRightWidth: 1 },\n  stickyColumnLeastRight: { borderLeftWidth: 1 },\n  groupColumnMostLeft: { borderLeftWidth: 1 },\n  groupColumnMostRight: {\n    borderRightWidth: 1,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRightWidth: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeftWidth: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      opacity: 1,\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \":focus-visible\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n    },\n  },\n  sortIcon: { opacity: 0 },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRightWidth: 1,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeftWidth: 1,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottomWidth: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTopWidth: 0,\n      height: 16,\n    },\n  },\n  resizable: {\n    borderRightWidth: 1,\n    \":has($resizer:hover)\": {\n      borderRight: `2px solid ${theme.colors.primary_80}`,\n    },\n  },\n  resizing: { borderRight: `2px solid ${theme.colors.primary_80}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 16,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableHeader.styles.js","sources":["../../../../src/Table/TableHeader/TableHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableHeader\", {\n  root: {\n    \"--first-row-cell-height\": \"52px\",\n    \"--cell-height\": \"32px\",\n    height: \"var(--cell-height)\",\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    padding: theme.spacing(0, 1, 0, 4),\n    borderColor: theme.colors.border,\n    borderBottomWidth: 1,\n  },\n  head: {\n    paddingTop: 8,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n    ...theme.typography.label,\n    backgroundColor: theme.colors.bgContainer,\n    borderBottomWidth: 1,\n\n    \"*:first-of-type > &\": {\n      height: \"var(--first-row-cell-height)\",\n      borderTop: \"1px solid transparent\",\n    },\n\n    \"&$variantList\": {\n      backgroundColor: \"inherit\",\n      borderBottomWidth: 0,\n      \"*:first-of-type > &\": {\n        borderTop: 0,\n      },\n    },\n\n    \"&$sortable\": {\n      verticalAlign: \"initial\",\n      alignContent: \"initial\",\n      paddingTop: 0,\n      paddingLeft: 0,\n      cursor: \"pointer\",\n\n      \":hover, :focus-within\": {\n        backgroundColor: theme.colors.bgHover,\n        \"& $sortIcon\": {\n          opacity: 1,\n        },\n      },\n    },\n  },\n  body: {\n    backgroundColor: \"inherit\",\n    ...theme.typography.body,\n    \":where($sorted)\": {\n      backgroundColor: theme.alpha(\"bgContainer\", 0.4),\n    },\n    \"&$sortable:not($variantNone)\": {\n      paddingLeft: 32,\n    },\n  },\n  footer: {},\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeftWidth: 0,\n    },\n  },\n  stickyColumnMostLeft: { borderRightWidth: 1 },\n  stickyColumnLeastRight: { borderLeftWidth: 1 },\n  groupColumnMostLeft: { borderLeftWidth: 1 },\n  groupColumnMostRight: {\n    borderRightWidth: 1,\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRightWidth: 0,\n    },\n    \"&+:not($stickyColumn)\": {\n      borderLeftWidth: 0,\n    },\n  },\n  headerContent: { display: \"flex\", alignItems: \"flex-start\", width: \"100%\" },\n  headerText: { overflow: \"hidden\", textOverflow: \"ellipsis\" },\n  headerParagraph: { overflow: \"hidden\", display: \"-webkit-box\" },\n  sortableHeaderText: { paddingTop: \"8px\" },\n  sorted: {\n    \"& $sortIcon\": {\n      opacity: 1,\n    },\n  },\n  sortable: {},\n  sortButton: {\n    \":focus-visible\": {\n      boxShadow: \"none\",\n      backgroundColor: \"transparent\",\n    },\n  },\n  sortIcon: { opacity: 0 },\n  alignLeft: { textAlign: \"left\" },\n  alignRight: { textAlign: \"right\", flexDirection: \"row-reverse\" },\n  alignCenter: { textAlign: \"center\" },\n  alignJustify: { textAlign: \"justify\" },\n  alignFlexLeft: { justifyContent: \"flex-start\" },\n  alignFlexRight: { justifyContent: \"flex-end\" },\n  alignFlexCenter: { justifyContent: \"center\" },\n  alignFlexJustify: { textAlign: \"justify\" },\n  variantCheckbox: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRightWidth: 1,\n  },\n  variantExpand: {},\n  variantActions: {\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeftWidth: 1,\n  },\n  variantNone: { padding: 0 },\n  variantList: {\n    backgroundColor: \"inherit\",\n    borderBottomWidth: 0,\n    height: 16,\n    \":first-of-type > &\": {\n      borderTopWidth: 0,\n      height: 16,\n    },\n  },\n  resizable: {\n    borderRightWidth: 1,\n    \":has($resizer:hover)\": {\n      borderRight: `2px solid ${theme.colors.primaryStrong}`,\n    },\n  },\n  resizing: { borderRight: `2px solid ${theme.colors.primaryStrong}` },\n  resizer: {\n    display: \"inline-block\",\n    width: 16,\n    height: \"100%\",\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transform: \"translateX(50%)\",\n    zIndex: 1,\n    touchAction: \"none\",\n  },\n});\n"],"names":[],"mappings":"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"}

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

@@ -20,12 +20,12 @@ const { staticClasses, useClasses } = createClasses("HvTableRow", {
   /** Styles applied to the component root class. */
   root: {
     color: "inherit",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     verticalAlign: "middle",
     alignContent: "center",
     outline: 0,
     ":is($hover,$striped):hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     }
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */
@@ -36,11 +36,11 @@ const { staticClasses, useClasses } = createClasses("HvTableRow", {
   footer: {},
   /** Styles applied to the component root when selected. */
   selected: {
-    backgroundColor: theme.colors.atmo2
+    backgroundColor: theme.colors.bgPage
   },
   /** Styles applied to the component root when expanded. */
   expanded: {
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     "& > *[role=cell]": {
       borderBottom: "none"
     }
@@ -48,7 +48,7 @@ const { staticClasses, useClasses } = createClasses("HvTableRow", {
   /** Styles applied to the component root when striped. */
   striped: {
     "&:nth-of-type(even)": {
-      backgroundColor: theme.alpha("atmo1", 0.6)
+      backgroundColor: theme.alpha("bgContainer", 0.6)
     },
     "&:nth-of-type(odd)": {
       backgroundColor: "transparent"
@@ -61,16 +61,16 @@ const { staticClasses, useClasses } = createClasses("HvTableRow", {
     // only applied on custom `display`
     marginBottom: theme.space.xs,
     borderRadius: theme.radii.round,
-    ...getBorderStyles(theme.colors.atmo4, theme.radii.round),
-    backgroundColor: theme.colors.atmo1,
+    ...getBorderStyles(theme.colors.border, theme.radii.round),
+    backgroundColor: theme.colors.bgContainer,
     "&$selected": {
-      ...getBorderStyles(theme.colors.secondary, theme.radii.round),
+      ...getBorderStyles(theme.colors.text, theme.radii.round),
       "&:hover": {
-        ...getBorderStyles(theme.colors.atmo4, theme.radii.round)
+        ...getBorderStyles(theme.colors.border, theme.radii.round)
       }
     },
     "&:hover": {
-      ...getBorderStyles(theme.colors.atmo4, theme.radii.round)
+      ...getBorderStyles(theme.colors.border, theme.radii.round)
     },
     "&.HvIsFocused": {
       borderRadius: theme.radii.round

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.styles.js","sources":["../../../../src/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst getBorderStyles = (color: string, rowBorderRadius: string) => {\n  return {\n    \"& td\": {\n      borderTop: `1px solid ${color}`,\n      borderBottom: `1px solid ${color}`,\n    },\n    \"& td:first-of-type\": {\n      borderLeft: `1px solid ${color}`,\n      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n    },\n    \"& td:last-of-type\": {\n      borderRight: `1px solid ${color}`,\n      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n    },\n  };\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.colors.atmo1,\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    outline: 0,\n    \":is($hover,$striped):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\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.colors.atmo2,\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    \"&:nth-of-type(even)\": {\n      backgroundColor: theme.alpha(\"atmo1\", 0.6),\n    },\n    \"&:nth-of-type(odd)\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  /** Styles applied to the component root on hover. */\n  hover: {},\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.radii.round,\n\n    ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    backgroundColor: theme.colors.atmo1,\n    \"&$selected\": {\n      ...getBorderStyles(theme.colors.secondary, theme.radii.round),\n\n      \"&:hover\": {\n        ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(theme.colors.atmo4, theme.radii.round),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.radii.round,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAkB,CAAC,OAAe,oBAA4B;AAC3D,SAAA;AAAA,IACL,QAAQ;AAAA,MACN,WAAW,aAAa,KAAK;AAAA,MAC7B,cAAc,aAAa,KAAK;AAAA,IAClC;AAAA,IACA,sBAAsB;AAAA,MACpB,YAAY,aAAa,KAAK;AAAA,MAC9B,cAAc,GAAG,eAAe,QAAQ,eAAe;AAAA,IACzD;AAAA,IACA,qBAAqB;AAAA,MACnB,aAAa,aAAa,KAAK;AAAA,MAC/B,cAAc,KAAK,eAAe,IAAI,eAAe;AAAA,IAAA;AAAA,EAEzD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA;AAAA,EAEvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,eAAe;AAAA,IACf,cAAc;AAAA,IACd,SAAS;AAAA,IACT,8BAA8B;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,MAAM,CAAC;AAAA;AAAA,EAEP,QAAQ,CAAC;AAAA;AAAA,EAET,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,uBAAuB;AAAA,MACrB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,aAAa;AAAA;AAAA,IAEX,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,IAE1B,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IACxD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,GAAG,gBAAgB,MAAM,OAAO,WAAW,MAAM,MAAM,KAAK;AAAA,MAE5D,WAAW;AAAA,QACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IAE5D;AAAA,IAEA,WAAW;AAAA,MACT,GAAG,gBAAgB,MAAM,OAAO,OAAO,MAAM,MAAM,KAAK;AAAA,IAC1D;AAAA,IACA,iBAAiB;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EAAA;AAErB,CAAC;"}
+{"version":3,"file":"TableRow.styles.js","sources":["../../../../src/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst getBorderStyles = (color: string, rowBorderRadius: string) => {\n  return {\n    \"& td\": {\n      borderTop: `1px solid ${color}`,\n      borderBottom: `1px solid ${color}`,\n    },\n    \"& td:first-of-type\": {\n      borderLeft: `1px solid ${color}`,\n      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n    },\n    \"& td:last-of-type\": {\n      borderRight: `1px solid ${color}`,\n      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n    },\n  };\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.colors.bgContainer,\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    outline: 0,\n    \":is($hover,$striped):hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\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.colors.bgPage,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.bgContainer,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {\n    \"&:nth-of-type(even)\": {\n      backgroundColor: theme.alpha(\"bgContainer\", 0.6),\n    },\n    \"&:nth-of-type(odd)\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  /** Styles applied to the component root on hover. */\n  hover: {},\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.radii.round,\n\n    ...getBorderStyles(theme.colors.border, theme.radii.round),\n    backgroundColor: theme.colors.bgContainer,\n    \"&$selected\": {\n      ...getBorderStyles(theme.colors.text, theme.radii.round),\n\n      \"&:hover\": {\n        ...getBorderStyles(theme.colors.border, theme.radii.round),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(theme.colors.border, theme.radii.round),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.radii.round,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAkB,CAAC,OAAe,oBAA4B;AAC3D,SAAA;AAAA,IACL,QAAQ;AAAA,MACN,WAAW,aAAa,KAAK;AAAA,MAC7B,cAAc,aAAa,KAAK;AAAA,IAClC;AAAA,IACA,sBAAsB;AAAA,MACpB,YAAY,aAAa,KAAK;AAAA,MAC9B,cAAc,GAAG,eAAe,QAAQ,eAAe;AAAA,IACzD;AAAA,IACA,qBAAqB;AAAA,MACnB,aAAa,aAAa,KAAK;AAAA,MAC/B,cAAc,KAAK,eAAe,IAAI,eAAe;AAAA,IAAA;AAAA,EAEzD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA;AAAA,EAEvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,eAAe;AAAA,IACf,cAAc;AAAA,IACd,SAAS;AAAA,IACT,8BAA8B;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,MAAM,CAAC;AAAA;AAAA,EAEP,QAAQ,CAAC;AAAA;AAAA,EAET,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,uBAAuB;AAAA,MACrB,iBAAiB,MAAM,MAAM,eAAe,GAAG;AAAA,IACjD;AAAA,IACA,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,aAAa;AAAA;AAAA,IAEX,cAAc,MAAM,MAAM;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,IAE1B,GAAG,gBAAgB,MAAM,OAAO,QAAQ,MAAM,MAAM,KAAK;AAAA,IACzD,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,GAAG,gBAAgB,MAAM,OAAO,MAAM,MAAM,MAAM,KAAK;AAAA,MAEvD,WAAW;AAAA,QACT,GAAG,gBAAgB,MAAM,OAAO,QAAQ,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IAE7D;AAAA,IAEA,WAAW;AAAA,MACT,GAAG,gBAAgB,MAAM,OAAO,QAAQ,MAAM,MAAM,KAAK;AAAA,IAC3D;AAAA,IACA,iBAAiB;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EAAA;AAErB,CAAC;"}

package/dist/esm/{TableSection → Table/TableSection}/TableSection.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useClasses } from "./TableSection.styles.js";
 import { staticClasses } from "./TableSection.styles.js";
-import { HvSection } from "../Section/Section.js";
+import { HvSection } from "../../Section/Section.js";
 const HvTableSection = forwardRef(
   function HvTableSection2(props, ref) {
     const {

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.js","sources":["../../../../src/Table/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvSection, HvSectionProps } from \"../../Section\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  function HvTableSection(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id);\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  },\n);\n"],"names":["HvTableSection"],"mappings":";;;;;;;AAoBO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBAAe,OAAO,KAAK;AAC5B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,EAAE;AAG9B,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,UACH;AAAA,EAAA;AAGN;"}

package/dist/esm/{TableSection → Table/TableSection}/TableSection.styles.js

@@ -1,17 +1,17 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../Pagination/Pagination.styles.js";
-import "../Pagination/Pagination.js";
-import { staticClasses as staticClasses$2 } from "../BulkActions/BulkActions.styles.js";
-import "../BulkActions/BulkActions.js";
-import { staticClasses as staticClasses$3 } from "../Table/TableCell/TableCell.styles.js";
-import "../Table/TableCell/TableCell.js";
-import { staticClasses as staticClasses$4 } from "../Table/TableRow/TableRow.styles.js";
-import "../Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses$5 } from "../Table/TableHeader/TableHeader.styles.js";
-import "../Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses$6 } from "../Table/TableContainer/TableContainer.styles.js";
-import "../Table/TableContainer/TableContainer.js";
+import { staticClasses as staticClasses$1 } from "../../Pagination/Pagination.styles.js";
+import "../../Pagination/Pagination.js";
+import { staticClasses as staticClasses$2 } from "../../BulkActions/BulkActions.styles.js";
+import "../../BulkActions/BulkActions.js";
+import { staticClasses as staticClasses$3 } from "../TableCell/TableCell.styles.js";
+import "../TableCell/TableCell.js";
+import { staticClasses as staticClasses$4 } from "../TableRow/TableRow.styles.js";
+import "../TableRow/TableRow.js";
+import { staticClasses as staticClasses$5 } from "../TableHeader/TableHeader.styles.js";
+import "../TableHeader/TableHeader.js";
+import { staticClasses as staticClasses$6 } from "../TableContainer/TableContainer.styles.js";
+import "../TableContainer/TableContainer.js";
 const { staticClasses, useClasses } = createClasses("HvTableSection", {
   root: {},
   header: {
@@ -42,8 +42,8 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
       borderTopRightRadius: "inherit"
     },
     [`& .${staticClasses$5.head}`]: {
-      backgroundColor: theme.colors.atmo2,
-      borderBottomColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPage,
+      borderBottomColor: theme.colors.bgPageSecondary,
       [`&.${staticClasses$5.variantCheckbox}`]: {
         borderRight: "none"
       },
@@ -58,7 +58,7 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
       }
     },
     [`& .${staticClasses$3.root}`]: {
-      borderBottomColor: theme.colors.atmo3
+      borderBottomColor: theme.colors.borderSubtle
     },
     [`& .${staticClasses$3.variantCheckbox}`]: {
       borderRight: "none"
@@ -69,14 +69,14 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
     [`& .${staticClasses$2.root}`]: {
       marginBottom: 0,
       border: "none",
-      borderBottom: `1px solid ${theme.colors.atmo3}`,
+      borderBottom: `1px solid ${theme.colors.borderSubtle}`,
       padding: theme.spacing("xs", "sm")
     },
     [`& .${staticClasses$1.root}`]: {
       margin: 0,
-      backgroundColor: theme.colors.atmo2,
+      backgroundColor: theme.colors.bgPage,
       padding: theme.space.xs,
-      borderTop: `1px solid ${theme.colors.atmo3}`,
+      borderTop: `1px solid ${theme.colors.borderSubtle}`,
       borderBottomLeftRadius: "inherit",
       borderBottomRightRadius: "inherit"
     },