@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/esm/MultiButton/MultiButton.styles.js

@@ -9,57 +9,55 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     position: "relative"
   },
   multiple: {
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     borderWidth: 0,
-    borderColor: `${theme.colors.atmo4} transparent`,
+    borderColor: `${theme.colors.border} transparent`,
     borderRadius: theme.radii.base,
     "& $button": {
       minWidth: 32,
-      width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: "1 1 auto",
+      flex: "1 1 0%",
       borderColor: "inherit",
       borderRadius: 0,
       fontWeight: theme.typography.body.fontWeight,
       "&:disabled": {
-        color: theme.colors.secondary_60,
+        color: theme.colors.textDisabled,
         borderColor: "inherit"
       },
       "&:hover": {
         borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeftColor: theme.colors.atmo4,
+        borderLeftColor: theme.colors.border,
         borderTopLeftRadius: "inherit",
         borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeftColor: theme.colors.atmo4
+          borderLeftColor: theme.colors.border
         }
       },
       "&$lastButton": {
-        borderRightColor: theme.colors.atmo4,
+        borderRightColor: theme.colors.border,
         borderTopRightRadius: "inherit",
         borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRightColor: theme.colors.atmo4
+          borderRightColor: theme.colors.border
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        backgroundColor: theme.colors.atmo1,
+        backgroundColor: theme.colors.bgContainer,
         fontWeight: theme.typography.label.fontWeight,
-        borderRadius: "inherit",
-        borderColor: theme.colors.secondary,
+        borderColor: "currentcolor",
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
-          backgroundColor: theme.colors.containerBackgroundHover
+          backgroundColor: theme.colors.bgHover
         },
         "&:disabled": {
           zIndex: 1,
-          borderColor: theme.colors.atmo4
+          borderColor: theme.colors.border
         }
       }
     }
@@ -101,20 +99,25 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   selected: {},
   vertical: {
     flexDirection: "column",
+    alignItems: "stretch",
     height: "auto",
-    borderColor: `transparent ${theme.colors.atmo4}`,
+    borderColor: `transparent ${theme.colors.border}`,
     "& $button": {
       minWidth: 32,
-      width: "100%",
+      flex: "1 1 32px",
       "&$firstButton": {
-        borderTopColor: theme.colors.atmo4,
+        borderTopColor: theme.colors.border,
         borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
+        borderTopRightRadius: "inherit",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
       "&$lastButton": {
-        borderBottomColor: theme.colors.atmo4,
+        borderBottomColor: theme.colors.border,
         borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit"
+        borderBottomRightRadius: "inherit",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -122,8 +125,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       },
       "&$selected": {
         height: 32,
-        width: "calc(100% + 2px)",
-        borderColor: theme.colors.secondary
+        borderColor: "currentcolor"
       }
     }
   },

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

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.atmo2,\n\n    borderWidth: 0,\n    borderColor: `${theme.colors.atmo4} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      flex: \"1 1 auto\",\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.atmo4,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.atmo4,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.atmo4,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.atmo1,\n        fontWeight: theme.typography.label.fontWeight,\n        borderRadius: \"inherit\",\n        borderColor: theme.colors.secondary,\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.containerBackgroundHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.atmo4,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.atmo4}`,\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.atmo4,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: \"calc(100% + 2px)\",\n        borderColor: theme.colors.secondary,\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.bgPage,\n    borderWidth: 0,\n    borderColor: `${theme.colors.border} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      flex: \"1 1 0%\",\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.border,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.border,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.border,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.bgContainer,\n        fontWeight: theme.typography.label.fontWeight,\n        borderColor: \"currentcolor\",\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.bgHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.border,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    alignItems: \"stretch\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.border}`,\n    \"& $button\": {\n      minWidth: 32,\n      flex: \"1 1 32px\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.border,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        borderTopLeftRadius: 0,\n        borderTopRightRadius: 0,\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}

package/dist/esm/Pagination/Pagination.styles.js

@@ -4,7 +4,6 @@ import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
 import "../Input/Input.js";
 import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
 import "../BaseDropdown/BaseDropdown.js";
-const hoverColor = theme.colors.atmo3;
 const { staticClasses, useClasses } = createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -30,7 +29,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
       backgroundColor: "transparent",
       height: "24px",
       "&:focus, &:focus-within, &:hover": {
-        backgroundColor: hoverColor
+        backgroundColor: theme.colors.bgHover
       }
     }
   },
@@ -106,7 +105,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
         borderRadius: theme.radii.base,
         MozAppearance: "textfield",
         "&:focus": {
-          backgroundColor: hoverColor
+          backgroundColor: theme.colors.bgHover
         },
         "&:hover": {
           cursor: "pointer"

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseDropdownClasses } from \"../BaseDropdown\";\nimport { inputClasses } from \"../Input\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...(theme.typography.caption2 as React.CSSProperties),\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: hoverColor,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    gap: theme.space.xs,\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  totalPagesTextContainer: {\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    width: \"auto\",\n\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;;AAMA,MAAM,aAAa,MAAM,OAAO;AAEzB,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAI,MAAM,WAAW;AAAA,MACrB,WAAW;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EAEJ;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAA;AAC1B,CAAC;"}
+{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseDropdownClasses } from \"../BaseDropdown\";\nimport { inputClasses } from \"../Input\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...theme.typography.caption2,\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: theme.colors.bgHover,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    gap: theme.space.xs,\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...theme.typography.caption2,\n  },\n  totalPagesTextContainer: {\n    ...theme.typography.caption2,\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    width: \"auto\",\n\n    ...theme.typography.caption2,\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: theme.colors.bgHover,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAG,MAAM,WAAW;AAAA,MACpB,WAAW;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAChC;AAAA,EAEJ;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EAEJ;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAA;AAC1B,CAAC;"}

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

@@ -4,16 +4,16 @@ const { useClasses } = createClasses("HvPaginationSelect", {
   root: {},
   header: {
     backgroundColor: "transparent",
-    borderColor: theme.colors.secondary_80,
+    borderColor: theme.colors.textSubtle,
     "&:hover": {
-      borderColor: theme.colors.secondary_80
+      borderColor: theme.colors.textSubtle
     }
   },
   selection: {
     padding: theme.spacing(0, "md", 0, "xs")
   },
   headerOpen: {
-    backgroundColor: theme.colors.atmo1
+    backgroundColor: theme.colors.bgContainer
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../src/Pagination/Select.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  root: {},\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.colors.secondary_80,\n    \"&:hover\": {\n      borderColor: theme.colors.secondary_80,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EAChE,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,WAAW;AAAA,IACT,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../src/Pagination/Select.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  root: {},\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.colors.textSubtle,\n    \"&:hover\": {\n      borderColor: theme.colors.textSubtle,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.bgContainer,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EAChE,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,WAAW;AAAA,IACT,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}

package/dist/esm/Panel/Panel.styles.js

@@ -4,8 +4,8 @@ const { useClasses, staticClasses } = createClasses("HvPanel", {
   root: {
     position: "relative",
     padding: theme.space.sm,
-    borderColor: theme.colors.atmo4,
-    backgroundColor: theme.colors.atmo1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.bgContainer,
     overflow: "auto",
     borderRadius: "inherit"
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"auto\",\n    borderRadius: \"inherit\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,cAAc;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"Panel.styles.js","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.bgContainer,\n    overflow: \"auto\",\n    borderRadius: \"inherit\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,cAAc;AAAA,EAAA;AAElB,CAAC;"}

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

@@ -13,7 +13,7 @@ const { useClasses, staticClasses } = createClasses("HvProgressBar", {
     width: "100%"
   },
   progressBar: {
-    backgroundColor: theme.colors.secondary
+    backgroundColor: theme.colors.text
   },
   progressBarLabel: {
     backgroundColor: "transparent",
@@ -30,7 +30,7 @@ const { useClasses, staticClasses } = createClasses("HvProgressBar", {
     display: "flex",
     width: "100%",
     height: 4,
-    backgroundColor: theme.colors.atmo4
+    backgroundColor: theme.colors.border
   },
   progressError: {
     backgroundColor: theme.colors.negative

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","sources":["../../../src/ProgressBar/ProgressBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvProgressBar\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    // progress\n    width: \"100%\",\n  },\n  progress: {\n    width: \"100%\",\n  },\n  progressBar: {\n    backgroundColor: theme.colors.secondary,\n  },\n  progressBarLabel: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    justifyContent: \"end\",\n  },\n  progressContainer: {\n    width: \"100%\",\n  },\n  progressDone: {\n    backgroundColor: theme.colors.positive,\n  },\n  progressBarContainer: {\n    display: \"flex\",\n    width: \"100%\",\n    height: 4,\n    backgroundColor: theme.colors.atmo4,\n  },\n  progressError: {\n    backgroundColor: theme.colors.negative,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAGhB,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}
+{"version":3,"file":"ProgressBar.styles.js","sources":["../../../src/ProgressBar/ProgressBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvProgressBar\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    // progress\n    width: \"100%\",\n  },\n  progress: {\n    width: \"100%\",\n  },\n  progressBar: {\n    backgroundColor: theme.colors.text,\n  },\n  progressBarLabel: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    justifyContent: \"end\",\n  },\n  progressContainer: {\n    width: \"100%\",\n  },\n  progressDone: {\n    backgroundColor: theme.colors.positive,\n  },\n  progressBarContainer: {\n    display: \"flex\",\n    width: \"100%\",\n    height: 4,\n    backgroundColor: theme.colors.border,\n  },\n  progressError: {\n    backgroundColor: theme.colors.negative,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAGhB,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC,CAAC;"}

package/dist/esm/QueryBuilder/QueryBuilder.styles.js

@@ -7,7 +7,7 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
     padding: theme.space.sm,
     marginTop: 12,
     marginBottom: 32,
-    border: `1px solid ${theme.colors.atmo4}`
+    border: `1px solid ${theme.colors.border}`
   },
   /** Styles applied to the top group container. */
   topGroup: {
@@ -27,8 +27,8 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
       zIndex: 2,
       width: 21,
       height: 36,
-      borderBottom: `1px solid ${theme.colors.atmo4}`,
-      borderLeft: `1px solid ${theme.colors.atmo4}`,
+      borderBottom: `1px solid ${theme.colors.border}`,
+      borderLeft: `1px solid ${theme.colors.border}`,
       top: -38,
       left: -38
     },
@@ -38,7 +38,7 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
       zIndex: 1,
       width: 32,
       height: "100%",
-      borderLeft: `1px solid ${theme.colors.atmo4}`,
+      borderLeft: `1px solid ${theme.colors.border}`,
       top: 0,
       left: `calc(${theme.space.sm} + 2)`
     }
@@ -58,12 +58,12 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
   /** Styles applied to the remove button on the top group. */
   topRemoveButton: { position: "absolute", top: -16, right: -16 },
   /** Styles applied to the remove button when disabled on the top group. */
-  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },
+  topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },
   /** Styles applied to the rules container. */
   rulesContainer: {},
   /** Styles applied to the sub rules container. */
   subRulesContainer: {
-    borderLeft: `1px solid ${theme.colors.atmo4}`,
+    borderLeft: `1px solid ${theme.colors.border}`,
     marginLeft: theme.space.sm,
     marginBottom: theme.space.md,
     paddingLeft: theme.space.sm,
@@ -75,9 +75,8 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
   /** Styles applied to the action button container. */
   actionButtonContainer: {
     marginLeft: "auto",
-    "&>*": {
-      marginLeft: theme.space.sm
-    }
+    display: "flex",
+    gap: theme.space.sm
   },
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {
@@ -89,7 +88,7 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
   topRulesContainer: {},
   /** Styles applied to the background of buttons to remove transparency */
   buttonBackground: {
-    backgroundColor: theme.colors.atmo2,
+    backgroundColor: theme.colors.bgPage,
     display: "inline-flex"
   },
   createConditionButton: {

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../src/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc(-1 * ${theme.space.sm})`,\n    left: `calc(-1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,MAE3C,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,MAE3C,KAAK;AAAA,MACL,MAAM,QAAQ,MAAM,MAAM,EAAE;AAAA,IAAA;AAAA,EAEhC;AAAA;AAAA,EAEA,YAAY,EAAE,UAAU,GAAG;AAAA;AAAA,EAE3B,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK,aAAa,MAAM,MAAM,EAAE;AAAA,IAChC,MAAM,aAAa,MAAM,MAAM,EAAE;AAAA,EACnC;AAAA;AAAA,EAEA,kBAAkB,CAAC;AAAA;AAAA,EAEnB,cAAc,CAAC;AAAA;AAAA,EAEf,iBAAiB,EAAE,UAAU,YAAY,KAAK,KAAK,OAAO,IAAI;AAAA;AAAA,EAE9D,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA;AAAA,EAE/D,gBAAgB,CAAC;AAAA;AAAA,EAEjB,mBAAmB;AAAA,IACjB,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,IAC3C,YAAY,MAAM,MAAM;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,YAAY;AAAA,IAEZ,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAE5B;AAAA;AAAA,EAEA,0BAA0B;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ,aAAa,MAAM,MAAM,EAAE;AAAA,IACnC,OAAO,QAAQ,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA;AAAA,EAEA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,kBAAkB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,EACX;AAAA,EACA,uBAAuB;AAAA,IACrB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAC/D;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAAA;AAEjE,CAAC;"}
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../src/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.border}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.border}`,\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc(-1 * ${theme.space.sm})`,\n    left: `calc(-1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.border}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n    display: \"flex\",\n    gap: theme.space.sm,\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.bgPage,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,EAC1C;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,cAAc,aAAa,MAAM,OAAO,MAAM;AAAA,MAC9C,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM,QAAQ,MAAM,MAAM,EAAE;AAAA,IAAA;AAAA,EAEhC;AAAA;AAAA,EAEA,YAAY,EAAE,UAAU,GAAG;AAAA;AAAA,EAE3B,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK,aAAa,MAAM,MAAM,EAAE;AAAA,IAChC,MAAM,aAAa,MAAM,MAAM,EAAE;AAAA,EACnC;AAAA;AAAA,EAEA,kBAAkB,CAAC;AAAA;AAAA,EAEnB,cAAc,CAAC;AAAA;AAAA,EAEf,iBAAiB,EAAE,UAAU,YAAY,KAAK,KAAK,OAAO,IAAI;AAAA;AAAA,EAE9D,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA;AAAA,EAEhE,gBAAgB,CAAC;AAAA;AAAA,EAEjB,mBAAmB;AAAA,IACjB,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,IAC5C,YAAY,MAAM,MAAM;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAEA,0BAA0B;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ,aAAa,MAAM,MAAM,EAAE;AAAA,IACnC,OAAO,QAAQ,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA;AAAA,EAEA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,kBAAkB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,EACX;AAAA,EACA,uBAAuB;AAAA,IACrB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAC/D;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAAA;AAEjE,CAAC;"}

package/dist/esm/QueryBuilder/Rule/Rule.styles.js

@@ -21,8 +21,8 @@ const { useClasses, staticClasses } = createClasses(
         zIndex: 2,
         width: "17px",
         height: "39px",
-        borderBottom: `1px solid ${theme.colors.atmo4}`,
-        borderLeft: `1px solid ${theme.colors.atmo4}`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        borderLeft: `1px solid ${theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       },
@@ -32,7 +32,7 @@ const { useClasses, staticClasses } = createClasses(
         zIndex: 1,
         width: "17px",
         height: "100%",
-        borderLeft: `1px solid ${theme.colors.atmo4}`,
+        borderLeft: `1px solid ${theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       }

package/dist/esm/QueryBuilder/Rule/Rule.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.js","sources":["../../../../src/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        paddingRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        paddingRight: 0,\n      },\n      \"&>div:not(:first-of-type)\": {\n        marginTop: theme.space.xs,\n      },\n    },\n  },\n);\n"],"names":["queryBuilderClasses"],"mappings":";;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,MAAM,MAAM;AAAA,MACvB,WAAW;AAAA,MAEX,0BAA0B;AAAA,QACxB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA;AAAA,MAGA,6BAA6B;AAAA,QAC3B,YAAY;AAAA,MACd;AAAA,MAEA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,QAC7C,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAE3C,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MAEA,CAAC,SAASA,gBAAoB,iBAAiB,uBAAuB,GAAG;AAAA,QACvE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAE3C,KAAK;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MAEX,uBAAuB;AAAA,QACrB,aAAa,MAAM,MAAM;AAAA,MAAA;AAAA,IAE7B;AAAA,IACA,UAAU;AAAA,MACR,0BAA0B;AAAA,QACxB,cAAc;AAAA,MAChB;AAAA,MACA,6BAA6B;AAAA,QAC3B,WAAW,MAAM,MAAM;AAAA,MAAA;AAAA,IACzB;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Rule.styles.js","sources":["../../../../src/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        paddingRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.border}`,\n        borderLeft: `1px solid ${theme.colors.border}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.border}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        paddingRight: 0,\n      },\n      \"&>div:not(:first-of-type)\": {\n        marginTop: theme.space.xs,\n      },\n    },\n  },\n);\n"],"names":["queryBuilderClasses"],"mappings":";;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,MAAM,MAAM;AAAA,MACvB,WAAW;AAAA,MAEX,0BAA0B;AAAA,QACxB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA;AAAA,MAGA,6BAA6B;AAAA,QAC3B,YAAY;AAAA,MACd;AAAA,MAEA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,cAAc,aAAa,MAAM,OAAO,MAAM;AAAA,QAC9C,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,QAE5C,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MAEA,CAAC,SAASA,gBAAoB,iBAAiB,uBAAuB,GAAG;AAAA,QACvE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,QAE5C,KAAK;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MAEX,uBAAuB;AAAA,QACrB,aAAa,MAAM,MAAM;AAAA,MAAA;AAAA,IAE7B;AAAA,IACA,UAAU;AAAA,MACR,0BAA0B;AAAA,QACxB,cAAc;AAAA,MAChB;AAAA,MACA,6BAA6B;AAAA,QAC3B,WAAW,MAAM,MAAM;AAAA,MAAA;AAAA,IACzB;AAAA,EACF;AAEJ;"}

package/dist/esm/Radio/Radio.styles.js

@@ -10,20 +10,15 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: theme.radii.base,
     ":hover:not($disabled)": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover
     }
   },
   invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: theme.colors.secondary_60, cursor: "not-allowed" }
-  },
-  radio: {
-    "& svg": {
-      outline: "none",
-      boxShadow: "none"
-    }
+    "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" }
   },
+  radio: {},
   invalidRadio: {},
   label: {
     verticalAlign: "middle",
@@ -33,7 +28,10 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },
+  focusVisible: {
+    backgroundColor: theme.colors.bgPageSecondary,
+    ...outlineStyles
+  },
   checked: {},
   semantic: {}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    borderRadius: theme.radii.base,\n\n    \":hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  invalidContainer: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {},\n  label: {\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAE1B,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    borderRadius: theme.radii.base,\n\n    \":hover:not($disabled)\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  invalidContainer: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.textDisabled, cursor: \"not-allowed\" },\n  },\n  radio: {},\n  invalidRadio: {},\n  label: {\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: {\n    backgroundColor: theme.colors.bgPageSecondary,\n    ...outlineStyles,\n  },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAE1B,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}

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

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative_120}`
+    borderBottom: `1px solid ${theme.form.errorColor}`
   },
   error: {}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: {},\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.form.errorColor}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AAAA,EACR,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,KAAK,UAAU;AAAA,EAClD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js

@@ -30,18 +30,18 @@ const { staticClasses, useClasses } = createClasses(name, {
     height: 24,
     width: 24,
     fontSize: 4,
-    color: theme.colors.secondary_60,
+    color: theme.colors.textDisabled,
     "& > span": {
       margin: "auto",
       width: "1em",
       height: "1em",
       backgroundColor: "currentcolor",
-      borderRadius: "50%"
+      borderRadius: theme.radii.full
     }
   },
   bulletSelected: {
     fontSize: 6,
-    color: theme.colors.secondary
+    color: theme.colors.text
   }
 });
 export {

package/dist/esm/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../src/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: theme.spacing(\"xs\", 0),\n    maxWidth: 120,\n  },\n  button: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    margin: theme.spacing(\"xs\", \"xs\", \"0\"),\n  },\n  selected: {\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  bullet: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    minHeight: 24,\n    height: 24,\n    width: 24,\n    fontSize: 4,\n    color: theme.colors.secondary_60,\n\n    \"& > span\": {\n      margin: \"auto\",\n      width: \"1em\",\n      height: \"1em\",\n      backgroundColor: \"currentcolor\",\n      borderRadius: \"50%\",\n    },\n  },\n  bulletSelected: {\n    fontSize: 6,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ,MAAM,QAAQ,MAAM,MAAM,GAAG;AAAA,EACvC;AAAA,EACA,UAAU;AAAA,IACR,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IAEpB,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../src/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: theme.spacing(\"xs\", 0),\n    maxWidth: 120,\n  },\n  button: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    margin: theme.spacing(\"xs\", \"xs\", \"0\"),\n  },\n  selected: {\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  bullet: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    minHeight: 24,\n    height: 24,\n    width: 24,\n    fontSize: 4,\n    color: theme.colors.textDisabled,\n\n    \"& > span\": {\n      margin: \"auto\",\n      width: \"1em\",\n      height: \"1em\",\n      backgroundColor: \"currentcolor\",\n      borderRadius: theme.radii.full,\n    },\n  },\n  bulletSelected: {\n    fontSize: 6,\n    color: theme.colors.text,\n  },\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ,MAAM,QAAQ,MAAM,MAAM,GAAG;AAAA,EACvC;AAAA,EACA,UAAU;AAAA,IACR,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IAEpB,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;"}

package/dist/esm/ScrollToHorizontal/ScrollToHorizontal.styles.js

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses(
       listStyleType: "none",
       flexWrap: "wrap",
       backdropFilter: `blur(4px)`,
-      backgroundColor: theme.alpha("atmo2", 0.9)
+      backgroundColor: theme.alpha("bgPage", 0.9)
     },
     positionSticky: {
       position: "sticky",

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../src/ScrollToHorizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToHorizontal\",\n  {\n    root: {\n      display: \"flex\",\n      padding: \"0 30px\",\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"atmo2\", 0.9),\n    },\n    positionSticky: {\n      position: \"sticky\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    positionFixed: {\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    notSelectedRoot: {},\n    notSelected: {},\n    selected: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,gBAAgB;AAAA,MACd,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB,aAAa,CAAC;AAAA,IACd,UAAU,CAAA;AAAA,EAAC;AAEf;"}
+{"version":3,"file":"ScrollToHorizontal.styles.js","sources":["../../../src/ScrollToHorizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToHorizontal\",\n  {\n    root: {\n      display: \"flex\",\n      padding: \"0 30px\",\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"bgPage\", 0.9),\n    },\n    positionSticky: {\n      position: \"sticky\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    positionFixed: {\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      top: 0,\n      left: 0,\n    },\n    notSelectedRoot: {},\n    notSelected: {},\n    selected: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,UAAU,GAAG;AAAA,IAC5C;AAAA,IACA,gBAAgB;AAAA,MACd,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,eAAe;AAAA,MACb,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB,aAAa,CAAC;AAAA,IACd,UAAU,CAAA;AAAA,EAAC;AAEf;"}

package/dist/esm/ScrollToVertical/ScrollToVertical.styles.js

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = createClasses(
       flexWrap: "wrap",
       flexDirection: "column",
       backdropFilter: `blur(4px)`,
-      backgroundColor: theme.alpha("atmo2", 0.9)
+      backgroundColor: theme.alpha("bgPage", 0.9)
     },
     positionAbsolute: {
       width: "32px",

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../src/ScrollToVertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToVertical\",\n  {\n    root: {\n      display: \"flex\",\n      width: \"32px\",\n      padding: \"0\",\n      margin: 0,\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      flexDirection: \"column\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"atmo2\", 0.9),\n    },\n    positionAbsolute: {\n      width: \"32px\",\n      position: \"absolute\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n    },\n    positionFixed: {\n      width: \"32px\",\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n    },\n  },\n);\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,IAC3C;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IACT;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEa,MAAA,kBAAkB,CAAC,sBAA8B;AAC5D,QAAM,WAAW;AACjB,QAAM,cAAc,KAAK,MAAM,oBAAoB,GAAG;AAEtD,SAAO,cAAc;AACvB;"}
+{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../src/ScrollToVertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvScrollToVertical\",\n  {\n    root: {\n      display: \"flex\",\n      width: \"32px\",\n      padding: \"0\",\n      margin: 0,\n      listStyleType: \"none\",\n      flexWrap: \"wrap\",\n      flexDirection: \"column\",\n      backdropFilter: `blur(4px)`,\n      backgroundColor: theme.alpha(\"bgPage\", 0.9),\n    },\n    positionAbsolute: {\n      width: \"32px\",\n      position: \"absolute\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n    },\n    positionFixed: {\n      width: \"32px\",\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n    },\n  },\n);\n\nexport const calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,iBAAiB,MAAM,MAAM,UAAU,GAAG;AAAA,IAC5C;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IACT;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,MACrC,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEa,MAAA,kBAAkB,CAAC,sBAA8B;AAC5D,QAAM,WAAW;AACjB,QAAM,cAAc,KAAK,MAAM,oBAAoB,GAAG;AAEtD,SAAO,cAAc;AACvB;"}

package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js

@@ -14,15 +14,15 @@ const { staticClasses, useClasses } = createClasses(name, {
   icon: {
     width: "1em",
     height: "1em",
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     fontSize: 6,
-    color: theme.colors.secondary,
+    color: theme.colors.text,
     display: "inline-block",
     backgroundColor: "currentcolor"
   },
   notSelected: {
     fontSize: 4,
-    color: theme.colors.secondary_60
+    color: theme.colors.textDisabled
   },
   // TODO: remove in v6 (use classes.button)
   text: {},
@@ -32,13 +32,13 @@ const { staticClasses, useClasses } = createClasses(name, {
     alignItems: "center",
     height: "16px",
     width: "16px",
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover,
+      backgroundColor: theme.colors.bgHover,
       "& $notSelected": {
         fontSize: 6,
-        color: theme.colors.secondary
+        color: theme.colors.text
       }
     },
     "&:focus": {