@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

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

@@ -15,10 +15,9 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     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,
@@ -51,8 +50,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       "&$selected": {
         backgroundColor: theme.colors.bgContainer,
         fontWeight: theme.typography.label.fontWeight,
-        borderRadius: "inherit",
-        borderColor: theme.colors.text,
+        borderColor: "currentcolor",
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
           backgroundColor: theme.colors.bgHover
@@ -101,20 +99,25 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   selected: {},
   vertical: {
     flexDirection: "column",
+    alignItems: "stretch",
     height: "auto",
     borderColor: `transparent ${theme.colors.border}`,
     "& $button": {
       minWidth: 32,
-      width: "100%",
+      flex: "1 1 32px",
       "&$firstButton": {
         borderTopColor: theme.colors.border,
         borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
+        borderTopRightRadius: "inherit",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
       "&$lastButton": {
         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.text
+        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.bgPage,\n\n    borderWidth: 0,\n    borderColor: `${theme.colors.border} 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.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        borderRadius: \"inherit\",\n        borderColor: theme.colors.text,\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    height: \"auto\",\n    borderColor: `transparent ${theme.colors.border}`,\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.border,\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.text,\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.bgHover;
 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.bgHover;\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: 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,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;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/QueryBuilder/QueryBuilder.styles.js

@@ -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: {

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.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\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.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,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/Radio/Radio.styles.js

@@ -18,12 +18,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" }
   },
-  radio: {
-    "& svg": {
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
+  radio: {},
   invalidRadio: {},
   label: {
     verticalAlign: "middle",

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.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    \"& 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: {\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;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;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,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/Select/Select.js

@@ -199,7 +199,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
-                className: cx(classes.panel, className, {
+                className: cx(classes.panel, {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { HvOption } from \"./Option\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: ClassValue[]) => clsx(ids) || undefined;\n\nfunction renderOptions(options?: HvSelectProps<any>[\"options\"]) {\n  return options?.map((option) => (\n    <HvOption key={option.value} {...option}>\n      {option.label}\n    </HvOption>\n  ));\n}\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children: childrenProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const children = childrenProp ?? renderOptions(optionsProp);\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              showGutter\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvListContainer\n          condensed\n          selectable\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n          {...getListboxProps()}\n        >\n          <SelectProvider value={contextValue}>{children}</SelectProvider>\n        </HvListContainer>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n  SelectProvider,\n  useSelect,\n  UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { HvOption } from \"./Option\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null,\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: ClassValue[]) => clsx(ids) || undefined;\n\nfunction renderOptions(options?: HvSelectProps<any>[\"options\"]) {\n  return options?.map((option) => (\n    <HvOption key={option.value} {...option}>\n      {option.label}\n    </HvOption>\n  ));\n}\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    >,\n    Pick<HvButtonProps, \"size\" | \"variant\"> {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**  If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. */\n  enablePortal?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean = false,\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>,\n) {\n  const {\n    children: childrenProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    size,\n    variant = \"secondarySubtle\",\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    inputProps,\n    enablePortal,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : (getOptionMetadata(value as OptionValue) ?? null);\n\n  const children = childrenProp ?? renderOptions(optionsProp);\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              showGutter\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvDropdownButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        size={size}\n        variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(ariaDescribedBy, {\n          [descriptionId]: description,\n        })}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        role=\"none\"\n        open={isOpen}\n        keepMounted\n        disablePortal={!enablePortal}\n        container={enablePortal ? getContainerElement(rootId) : undefined}\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvListContainer\n          condensed\n          selectable\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n          {...getListboxProps()}\n        >\n          <SelectProvider value={contextValue}>{children}</SelectProvider>\n        </HvListContainer>\n      </Popper>\n      <input\n        {...getHiddenInputProps()}\n        autoComplete={autoComplete}\n        {...inputProps}\n      />\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}

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

@@ -20,7 +20,14 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
   description: {},
   select: {},
   popper: {
-    zIndex: theme.zIndices.popover
+    zIndex: theme.zIndices.popover,
+    "--r": theme.radii.base,
+    "&[data-popper-placement*='top'] $panel": {
+      borderRadius: `var(--r) var(--r) 0 0`
+    },
+    "&[data-popper-placement*='bottom'] $panel": {
+      borderRadius: `0 0 var(--r) var(--r)`
+    }
   },
   panel: {
     maxHeight: 400,
@@ -34,12 +41,10 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
     overflowY: "auto",
     borderRadius: "inherit"
   },
-  panelOpenedUp: {
-    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`
-  },
-  panelOpenedDown: {
-    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`
-  },
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedUp: {},
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedDown: {},
   error: {}
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.text}`,\n    marginTop: -1,\n    marginBottom: -1,\n\n    // panel styles\n    position: \"relative\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.bgContainer,\n    overflowY: \"auto\",\n    borderRadius: \"inherit\",\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,IAAI;AAAA,IACtC,WAAW;AAAA,IACX,cAAc;AAAA;AAAA,IAGd,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n\n    \"--r\": theme.radii.base,\n    \"&[data-popper-placement*='top'] $panel\": {\n      borderRadius: `var(--r) var(--r) 0 0`,\n    },\n    \"&[data-popper-placement*='bottom'] $panel\": {\n      borderRadius: `0 0 var(--r) var(--r)`,\n    },\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.text}`,\n    marginTop: -1,\n    marginBottom: -1,\n\n    // panel styles\n    position: \"relative\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.bgContainer,\n    overflowY: \"auto\",\n    borderRadius: \"inherit\",\n  },\n  /** @deprecated leverage `[data-popper-placement]` instead */\n  panelOpenedUp: {},\n  /** @deprecated leverage `[data-popper-placement]` instead */\n  panelOpenedDown: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,IAEvB,OAAO,MAAM,MAAM;AAAA,IACnB,0CAA0C;AAAA,MACxC,cAAc;AAAA,IAChB;AAAA,IACA,6CAA6C;AAAA,MAC3C,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,IAAI;AAAA,IACtC,WAAW;AAAA,IACX,cAAc;AAAA;AAAA,IAGd,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,iBAAiB,CAAC;AAAA,EAClB,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/SimpleGrid/SimpleGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  getContainerStyle,\n  staticClasses,\n  useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\n// TODO: remove in v6\nexport type Spacing = HvBreakpoints;\n\n// TODO: rename in v6 (or inline)\nexport interface Breakpoint {\n  cols?: number;\n  maxWidth?: number;\n  minWidth?: number;\n  spacing?: HvBreakpoints;\n}\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /** Spacing with pre-defined values according the values defined in the theme */\n  spacing?: HvBreakpoints;\n  /**\n   * Provide an array to define responsive behavior:\n   * - `maxWidth` or `minWidth`: max-width or min-width at which media query will work\n   * - `cols`: number of columns per row at given max-width\n   * - `spacing`: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /** Number of how many columns the content will be displayed */\n  cols?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing,\n    cols,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const containerStyle = getContainerStyle(breakpoints, spacing, cols);\n\n  return (\n    <div\n      className={cx(css(containerStyle), classes.root, className)}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA6Ca,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,iBAAiB,kBAAkB,aAAa,SAAS,IAAI;AAGjE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,IAAI,cAAc,GAAG,QAAQ,MAAM,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  getContainerStyle,\n  staticClasses,\n  useClasses,\n} from \"./SimpleGrid.styles\";\n\nexport { staticClasses as simpleGridClasses };\n\n/** @deprecated use `HvBreakpoints` instead */\nexport type Spacing = HvBreakpoints;\n\n// TODO: rename in v6 (or inline)\nexport interface Breakpoint {\n  cols?: number;\n  maxWidth?: number;\n  minWidth?: number;\n  spacing?: HvBreakpoints;\n}\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. */\nexport interface HvSimpleGridProps extends HvBaseProps {\n  /** Spacing with pre-defined values according the values defined in the theme */\n  spacing?: HvBreakpoints;\n  /**\n   * Provide an array to define responsive behavior:\n   * - `maxWidth` or `minWidth`: max-width or min-width at which media query will work\n   * - `cols`: number of columns per row at given max-width\n   * - `spacing`: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints?: Breakpoint[];\n  /** Number of how many columns the content will be displayed */\n  cols?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n  const {\n    children,\n    breakpoints,\n    spacing,\n    cols,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvSimpleGrid\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const containerStyle = getContainerStyle(breakpoints, spacing, cols);\n\n  return (\n    <div\n      className={cx(css(containerStyle), classes.root, className)}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA6Ca,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,iBAAiB,kBAAkB,aAAa,SAAS,IAAI;AAGjE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,IAAI,cAAc,GAAG,QAAQ,MAAM,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Skeleton/Skeleton.js

@@ -24,17 +24,14 @@ const HvSkeleton = (props) => {
       className: cx(
         classes.root,
         classes[variant],
-        animation && classes[animation],
+        classes[animation],
         className
       ),
       style: {
         width,
         height,
         ...backgroundImage && {
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundSize: "contain",
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat"
+          background: `center / contain no-repeat url(${backgroundImage})`
         },
         ...style
       },

package/dist/esm/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Skeleton.styles\";\n\nexport { staticClasses as skeletonClasses };\n\nexport type HvSkeletonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSkeletonProps extends HvBaseProps {\n  /** Whether the skeleton element is hidden or not. */\n  hidden?: boolean;\n  /** The type of skeleton element. @default \"text\" */\n  variant?: \"circle\" | \"square\" | \"text\";\n  /** The animation the skeleton element will display. @default \"pulse\" */\n  animation?: \"pulse\" | \"wave\";\n  /** The width of the skeleton element. */\n  width?: React.CSSProperties[\"width\"];\n  /** The height of the skeleton element. */\n  height?: React.CSSProperties[\"height\"];\n  /** The url for a placeholder image to use on the skeleton element. */\n  backgroundImage?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSkeletonClasses;\n}\n\n/**\n * The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.\n */\nexport const HvSkeleton = (props: HvSkeletonProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    hidden = false,\n    variant = \"text\",\n    animation = \"pulse\",\n    backgroundImage,\n    width,\n    height,\n    style,\n    ...others\n  } = useDefaultProps(\"HvSkeleton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  if (hidden) return <div className={classes.content}>{children}</div>;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[variant],\n        animation && classes[animation],\n        className,\n      )}\n      style={{\n        width,\n        height,\n        ...(backgroundImage && {\n          backgroundImage: `url(${backgroundImage})`,\n          backgroundSize: \"contain\",\n          backgroundPosition: \"center\",\n          backgroundRepeat: \"no-repeat\",\n        }),\n        ...style,\n      }}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAgCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,MAAI,OAAe,QAAA,oBAAC,SAAI,WAAW,QAAQ,SAAU,UAAS;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,aAAa,QAAQ,SAAS;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,mBAAmB;AAAA,UACrB,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,kBAAkB;AAAA,QACpB;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Skeleton.styles\";\n\nexport { staticClasses as skeletonClasses };\n\nexport type HvSkeletonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSkeletonProps extends HvBaseProps {\n  /** Whether the skeleton element is hidden or not. */\n  hidden?: boolean;\n  /** The type of skeleton element. @default \"text\" */\n  variant?: \"circle\" | \"square\" | \"text\";\n  /** The animation the skeleton element will display. @default \"pulse\" */\n  animation?: \"pulse\" | \"wave\";\n  /** The width of the skeleton element. */\n  width?: React.CSSProperties[\"width\"];\n  /** The height of the skeleton element. */\n  height?: React.CSSProperties[\"height\"];\n  /** The url for a placeholder image to use on the skeleton element. */\n  backgroundImage?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSkeletonClasses;\n}\n\n/**\n * The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.\n */\nexport const HvSkeleton = (props: HvSkeletonProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    hidden = false,\n    variant = \"text\",\n    animation = \"pulse\",\n    backgroundImage,\n    width,\n    height,\n    style,\n    ...others\n  } = useDefaultProps(\"HvSkeleton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  if (hidden) return <div className={classes.content}>{children}</div>;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[variant],\n        classes[animation],\n        className,\n      )}\n      style={{\n        width,\n        height,\n        ...(backgroundImage && {\n          background: `center / contain no-repeat url(${backgroundImage})`,\n        }),\n        ...style,\n      }}\n      {...others}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAgCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,MAAI,OAAe,QAAA,oBAAC,SAAI,WAAW,QAAQ,SAAU,UAAS;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,SAAS;AAAA,QACjB;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,mBAAmB;AAAA,UACrB,YAAY,kCAAkC,eAAe;AAAA,QAC/D;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Slider/Slider.styles.js

@@ -30,7 +30,7 @@ const dragSquare = {
 const ring = {
   width: "32px",
   height: "32px",
-  borderRadius: theme.radii.circle,
+  borderRadius: theme.radii.full,
   border: `9px solid ${theme.colors.primaryDimmed}`,
   opacity: "100%",
   content: "''",
@@ -41,7 +41,7 @@ const ring = {
 const border = {
   width: "20px",
   height: "20px",
-  borderRadius: theme.radii.circle,
+  borderRadius: theme.radii.full,
   border: `2px solid ${theme.colors.textDimmed}`,
   content: "''",
   position: "absolute",
@@ -91,7 +91,7 @@ const sliderStyles = {
   knobOuter: {
     position: "relative",
     borderColor: "transparent",
-    borderRadius: theme.radii.circle,
+    borderRadius: theme.radii.full,
     boxShadow: "none",
     backgroundColor: theme.colors.border,
     width: "32px",

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  backgroundColor: theme.colors.border,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.colors.primaryDimmed}`,\n  borderBottom: `12px solid ${theme.colors.primaryDimmed}`,\n  zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: theme.radii.circle,\n  border: `9px solid ${theme.colors.primaryDimmed}`,\n  opacity: \"100%\",\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: theme.radii.circle,\n  border: `2px solid ${theme.colors.textDimmed}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: theme.colors.textDisabled,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.text,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: theme.radii.circle,\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.border,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.text,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.border, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.bgContainer,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  backgroundColor: theme.colors.border,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.colors.primaryDimmed}`,\n  borderBottom: `12px solid ${theme.colors.primaryDimmed}`,\n  zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: theme.radii.full,\n  border: `9px solid ${theme.colors.primaryDimmed}`,\n  opacity: \"100%\",\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: theme.radii.full,\n  border: `2px solid ${theme.colors.textDimmed}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: theme.colors.textDisabled,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.text,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: theme.radii.full,\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.border,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.text,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.border, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.bgContainer,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Slider/SliderInput/SliderInput.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Remove } from "@hitachivantara/uikit-react-icons";
+import { useState, useEffect, Fragment } from "react";
 import { setId } from "../../utils/setId.js";
 import { knobsValuesToString, stringValuesToKnobs } from "../utils.js";
 import { useClasses } from "./SliderInput.styles.js";
@@ -31,8 +30,8 @@ const HvSliderInput = ({
   useEffect(() => {
     setInputValues(knobsValuesToString(valuesProp, markDigits));
   }, [markDigits, valuesProp]);
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.inputRoot, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-    index !== 0 && /* @__PURE__ */ jsx(Remove, { color: disabled ? "textDisabled" : void 0 }),
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index !== 0 && /* @__PURE__ */ jsx("span", { children: "—" }),
     /* @__PURE__ */ jsx(
       HvInput,
       {

package/dist/esm/Slider/SliderInput/SliderInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Used to generate the aria-label for the inputs.\n   */\n  label?: React.ReactNode;\n  /**\n   * Input status.\n   */\n  status?: HvFormStatus[];\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (values: number[], index: number) => void;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates how many decimals to use.\n   */\n  markDigits?: number;\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n  classes: classesProp,\n  className,\n  id,\n  label,\n  status,\n  values: valuesProp = [],\n  inputProps = [],\n  readOnly = false,\n  disabled = false,\n  markDigits = 0,\n  onChange,\n  ...others\n}: HvSliderInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [inputValues, setInputValues] = useState<string[]>(\n    knobsValuesToString(valuesProp, markDigits),\n  );\n\n  const handleChange = (index: number) => {\n    if (disabled) return;\n\n    onChange?.(stringValuesToKnobs(inputValues), index);\n  };\n\n  useEffect(() => {\n    setInputValues(knobsValuesToString(valuesProp, markDigits));\n  }, [markDigits, valuesProp]);\n\n  return (\n    <div className={cx(classes.inputRoot, className)} {...others}>\n      {inputValues.map((value, index) => (\n        <div key={setId(id, index)} className={classes.inputContainer}>\n          {index !== 0 && (\n            <Remove color={disabled ? \"textDisabled\" : undefined} />\n          )}\n          <HvInput\n            id={setId(id, index)}\n            aria-label={`${label}-${index}`}\n            className={classes.input}\n            disabled={disabled}\n            type=\"number\"\n            value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n            onEnter={() => handleChange(index)}\n            onBlur={() => handleChange(index)}\n            onChange={(_, inputValue) => {\n              const newValues = [...inputValues];\n              newValues[index] = inputValue;\n              setInputValues(newValues);\n            }}\n            status={status?.[index] || \"standBy\"}\n            readOnly={readOnly}\n            disableClear\n            {...inputProps[index]}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAC5C;AAEM,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EACpD;AAEA,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,WAAW,SAAS,GAAI,GAAG,QACnD,UAAY,YAAA,IAAI,CAAC,OAAO,+BACtB,OAA2B,EAAA,WAAW,QAAQ,gBAC5C,UAAA;AAAA,IAAA,UAAU,KACR,oBAAA,QAAA,EAAO,OAAO,WAAW,iBAAiB,QAAW;AAAA,IAExD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,EAAA,GAtBQ,MAAM,IAAI,KAAK,CAuBzB,CACD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Used to generate the aria-label for the inputs.\n   */\n  label?: React.ReactNode;\n  /**\n   * Input status.\n   */\n  status?: HvFormStatus[];\n  /**\n   * The values array to apply to the component\n   */\n  values?: number[];\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (values: number[], index: number) => void;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: HvInputProps[];\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates how many decimals to use.\n   */\n  markDigits?: number;\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n  classes: classesProp,\n  className,\n  id,\n  label,\n  status,\n  values: valuesProp = [],\n  inputProps = [],\n  readOnly = false,\n  disabled = false,\n  markDigits = 0,\n  onChange,\n  ...others\n}: HvSliderInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [inputValues, setInputValues] = useState<string[]>(\n    knobsValuesToString(valuesProp, markDigits),\n  );\n\n  const handleChange = (index: number) => {\n    if (disabled) return;\n\n    onChange?.(stringValuesToKnobs(inputValues), index);\n  };\n\n  useEffect(() => {\n    setInputValues(knobsValuesToString(valuesProp, markDigits));\n  }, [markDigits, valuesProp]);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {inputValues.map((value, index) => (\n        <Fragment key={setId(id, index)}>\n          {index !== 0 && <span>—</span>}\n          <HvInput\n            id={setId(id, index)}\n            aria-label={`${label}-${index}`}\n            className={classes.input}\n            disabled={disabled}\n            type=\"number\"\n            value={Number.isNaN(value) || value == null ? \"\" : value.toString()}\n            onEnter={() => handleChange(index)}\n            onBlur={() => handleChange(index)}\n            onChange={(_, inputValue) => {\n              const newValues = [...inputValues];\n              newValues[index] = inputValue;\n              setInputValues(newValues);\n            }}\n            status={status?.[index] || \"standBy\"}\n            readOnly={readOnly}\n            disableClear\n            {...inputProps[index]}\n          />\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAC5C;AAEM,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EACpD;AAEA,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,sBAAY,IAAI,CAAC,OAAO,+BACtB,UACE,EAAA,UAAA;AAAA,IAAU,UAAA,KAAM,oBAAA,QAAA,EAAK,UAAC,KAAA;AAAA,IACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,EAAA,GApBa,MAAM,IAAI,KAAK,CAqB9B,CACD,EACH,CAAA;AAEJ;"}

package/dist/esm/Slider/SliderInput/SliderInput.styles.js

@@ -1,8 +1,14 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvSliderInput", {
-  inputRoot: { display: "flex" },
-  input: { maxWidth: "50px" },
-  inputContainer: { display: "flex" }
+  root: {
+    display: "flex",
+    alignItems: "center",
+    color: theme.colors.textSubtle,
+    gap: theme.space.xs,
+    fontSize: 16
+  },
+  input: { maxWidth: "50px" }
 });
 export {
   staticClasses,

package/dist/esm/Slider/SliderInput/SliderInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.styles.js","sources":["../../../../src/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSliderInput\", {\n  inputRoot: { display: \"flex\" },\n  input: { maxWidth: \"50px\" },\n  inputContainer: { display: \"flex\" },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,OAAO,EAAE,UAAU,OAAO;AAAA,EAC1B,gBAAgB,EAAE,SAAS,OAAO;AACpC,CAAC;"}
+{"version":3,"file":"SliderInput.styles.js","sources":["../../../../src/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSliderInput\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    color: theme.colors.textSubtle,\n    gap: theme.space.xs,\n    fontSize: 16,\n  },\n  input: { maxWidth: \"50px\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO,MAAM,OAAO;AAAA,IACpB,KAAK,MAAM,MAAM;AAAA,IACjB,UAAU;AAAA,EACZ;AAAA,EACA,OAAO,EAAE,UAAU,OAAO;AAC5B,CAAC;"}

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

@@ -93,7 +93,6 @@ const HvTableHeader = forwardRef(
                   {
                     className: classes.sortButton,
                     icon: true,
-                    overrideIconColors: false,
                     "aria-label": "Sort",
                     ...sortButtonProps,
                     children: /* @__PURE__ */ jsx(Sort, { className: classes.sortIcon })