@hitachivantara/uikit-react-core 5.58.3 → 5.59.0

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../utils/classes.cjs");
+const Button_styles = require("../Button/Button.styles.cjs");
 const DropDownMenu_styles = require("../DropDownMenu/DropDownMenu.styles.cjs");
 require("@emotion/react/jsx-runtime");
 require("react");
@@ -11,9 +12,11 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
     display: "flex",
     alignItems: "center",
     transition: "none",
-    background: uikitStyles.theme.colors.atmo2,
     position: "relative",
-    zIndex: 0,
+    zIndex: 0
+  },
+  multiple: {
+    background: uikitStyles.theme.colors.atmo2,
     // prevent the focus ring to be hidden by sibling hover background
     "&>.HvIsFocusVisible": {
       zIndex: 5
@@ -92,215 +95,50 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
           border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
         }
       }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`&.${DropDownMenu_styles.staticClasses.container}`]: {
-        width: "unset"
-      },
-      [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderLeft: "solid 1px transparent",
-        borderRight: "solid 1px transparent",
-        borderRadius: 0,
-        "&:disabled": {
-          borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          "&:hover": {
-            borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-            borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-            borderLeft: "solid 1px transparent",
-            borderRight: "solid 1px transparent"
-          }
-        }
-      },
-      [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-      },
-      "&$firstButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderTopLeftRadius: uikitStyles.theme.radii.base,
-          borderBottomLeftRadius: uikitStyles.theme.radii.base,
-          "&:disabled": {
-            borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-          }
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderTopRightRadius: uikitStyles.theme.radii.base,
-          borderBottomRightRadius: uikitStyles.theme.radii.base,
-          "&:disabled": {
-            borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-          },
-          "&:disabled:hover": {
-            borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-          }
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      },
-      "&:not($firstButton) > button": {
-        marginLeft: "-1px"
-      }
     }
   },
   splitGroup: {
+    width: "fit-content",
     background: uikitStyles.theme.colors.atmo1,
+    // Button
     "& button$button": {
-      marginLeft: -1,
-      "&:disabled": {
-        borderTop: "none",
-        borderBottom: "none",
-        "&:hover": {
-          borderTop: "none",
-          borderBottom: "none"
-        }
-      },
       "&$firstButton": {
-        "&:not($selected):disabled": {
-          borderLeft: "none",
-          "&:hover": {
-            borderLeft: "none"
-          }
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        "& + div$splitContainer": {
+          marginLeft: -1
         }
       },
       "&$lastButton": {
-        "&:not($selected):disabled": {
-          borderRight: "none",
-          "&:hover": {
-            borderRight: "none"
-          }
-        }
-      },
-      "&:not($firstButton)": {
-        marginLeft: 0
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
       }
     },
-    // dropdown menu styles
-    "& $button": {
-      marginLeft: -1,
-      [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-        "&:disabled": {
-          borderTop: "none",
-          borderBottom: "none",
-          "&:hover": {
-            borderTop: "none",
-            borderBottom: "none"
-          }
-        }
-      },
-      [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-        zIndex: 2
-      },
-      "&$firstButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          "&:disabled": {
-            borderLeft: "none",
-            "&:hover": {
-              borderLeft: "none"
-            }
-          }
-        }
-      },
-      "&$lastButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          "&:disabled": {
-            borderRight: "none",
-            "&:hover": {
-              borderRight: "none"
-            }
-          }
+    // Dropdown Menu
+    [`& .${DropDownMenu_styles.staticClasses.root}`]: {
+      "&:has($firstButton)": {
+        "& + div$splitContainer": {
+          marginRight: -1
         }
-      },
-      "&:not($firstButton) > button": {
-        marginLeft: 0
       }
     },
-    "&$secondarySubtle": {
-      "& button$button": {
-        borderTop: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-        "&$firstButton": {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        },
-        "&$lastButton": {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        },
-        "&:not($selected):disabled": {
-          borderTop: "none",
-          borderBottom: "none",
-          "&:hover": {
-            borderTop: "none",
-            borderBottom: "none"
-          },
-          "&$firstButton": {
-            "&:not($selected):disabled": {
-              borderLeft: "none",
-              "&:hover": {
-                borderLeft: "none"
-              }
-            }
-          },
-          "&$lastButton": {
-            "&:not($selected):disabled": {
-              borderRight: "none",
-              "&:hover": {
-                borderRight: "none"
-              }
-            }
-          }
-        }
-      },
-      "& $button": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderTop: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-          "&:disabled": {
-            borderTop: "none",
-            borderBottom: "none",
-            "&:hover": {
-              borderTop: "none",
-              borderBottom: "none"
-            }
-          }
-        },
-        "&$firstButton": {
-          [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-            borderLeft: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-            "&:disabled": {
-              borderLeft: "none",
-              "&:hover": {
-                borderLeft: "none"
-              }
-            }
-          }
-        },
-        "&$lastButton": {
-          [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-            borderRight: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-            "&:disabled": {
-              borderRight: "none",
-              "&:hover": {
-                borderRight: "none"
-              }
-            }
-          }
-        }
-      }
+    "& $button$firstButton > button": {
+      marginRight: -1.5,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    "& $button$lastButton > button": {
+      marginLeft: -1.5,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    },
+    [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
+      zIndex: 2
     }
   },
-  splitGroupDisabled: { background: "transparent" },
+  splitGroupDisabled: { background: uikitStyles.theme.colors.atmo3 },
   button: {},
   selected: {},
-  // vertical button display Styling
   vertical: {
     flexDirection: "column",
     height: "auto",
@@ -364,149 +202,41 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
       }
     }
   },
-  primary: {
-    "& button$button": {
-      borderTop: "none",
-      borderBottom: "none",
-      "&$firstButton": {
-        borderLeft: "none"
-      },
-      "&$lastButton": {
-        borderRight: "none"
-      },
-      "&$selected": {
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-        borderTop: "none",
-        borderBottom: "none"
-      },
-      [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-      },
-      "&$firstButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderLeft: "none"
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderRight: "none"
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      }
-    }
-  },
-  primarySubtle: {
-    "& button$button": {
-      borderTop: `solid 1px ${uikitStyles.theme.colors.primary}`,
-      borderBottom: `solid 1px ${uikitStyles.theme.colors.primary}`,
-      "&$firstButton": {
-        borderLeft: `solid 1px ${uikitStyles.theme.colors.primary}`
-      },
-      "&$lastButton": {
-        borderRight: `solid 1px ${uikitStyles.theme.colors.primary}`
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-        borderTop: `solid 1px ${uikitStyles.theme.colors.primary}`,
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.primary}`
-      },
-      "&$firstButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.primary}`
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.primary}`
-        },
-        [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-          border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-        }
-      }
-    }
-  },
-  primaryGhost: {},
-  secondary: {},
-  secondarySubtle: {},
-  secondaryGhost: {
-    "& button$button": {
-      "&:disabled": {
-        background: uikitStyles.theme.colors.atmo3
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${DropDownMenu_styles.staticClasses.icon}`]: {
-        "&:disabled": {
-          background: uikitStyles.theme.colors.atmo3
-        }
-      }
-    }
-  },
-  firstButton: {},
-  lastButton: {},
   split: {
     width: 1,
     height: "100%",
     background: "currentColor"
   },
   splitContainer: {
+    display: "flex",
+    justifyContent: "center",
     zIndex: 1,
-    marginLeft: -1,
-    width: 1,
-    height: "100%",
+    width: 2,
     paddingTop: 4,
     paddingBottom: 4,
-    color: uikitStyles.theme.colors.secondary,
-    borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-    "&$primary": {
-      color: uikitStyles.theme.colors.atmo1,
-      backgroundColor: uikitStyles.theme.colors.primary,
-      borderTop: `1px solid ${uikitStyles.theme.colors.primary}`,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.primary}`
-    },
-    "&$primarySubtle": {
-      color: uikitStyles.theme.colors.primary,
-      borderTop: `1px solid ${uikitStyles.theme.colors.primary}`,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.primary}`
-    },
-    "&$primaryGhost": {
-      color: uikitStyles.theme.colors.primary,
-      borderTop: `1px solid ${uikitStyles.theme.colors.primary}`,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.primary}`
-    },
-    "&$secondarySubtle": {
-      color: uikitStyles.theme.colors.secondary,
-      borderTop: `1px solid ${uikitStyles.theme.colors.secondary}`,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.secondary}`
-    },
-    "&$secondaryGhost": {
-      color: uikitStyles.theme.colors.secondary
-    },
-    "&$splitDisabled": {
-      background: "transparent",
-      color: uikitStyles.theme.colors.secondary_60,
-      borderTop: "none",
-      borderBottom: "none"
-    }
+    height: "calc(32px - 2px)"
   },
-  splitDisabled: {}
+  splitDisabled: {
+    color: uikitStyles.theme.colors.secondary_60
+  },
+  firstButton: {},
+  lastButton: {},
+  // TODO - review the need for these classes in v6
+  primary: {},
+  primarySubtle: {},
+  primaryGhost: {},
+  secondary: {},
+  secondarySubtle: {},
+  secondaryGhost: {}
+});
+const getSplitContainerColor = (color, type, disabled) => ({
+  color: Button_styles.getColoringStyle(color, type).color,
+  backgroundColor: disabled ? uikitStyles.theme.colors.atmo3 : type === "subtle" ? uikitStyles.theme.colors.atmo1 : "transparent"
+});
+const getSplitContainerHeight = (size) => ({
+  height: `calc(${Button_styles.getSizeStyles(size).height} - 2px)`
 });
+exports.getSplitContainerColor = getSplitContainerColor;
+exports.getSplitContainerHeight = getSplitContainerHeight;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/MultiButton/MultiButton.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      minWidth: \"unset\",\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      fontSize: theme.typography.body.fontSize,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover\": {\n          background: theme.colors.atmo3,\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        // prevent the focus ring to be hidden by sibling hover background\n        // even when selected\n        \"&.HvIsFocusVisible\": {\n          zIndex: 5,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n\n    // dropdown menu styles\n    \"& $button\": {\n      [`&.${dropDownMenuClasses.container}`]: {\n        width: \"unset\",\n      },\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderLeft: \"solid 1px transparent\",\n        borderRight: \"solid 1px transparent\",\n        borderRadius: 0,\n        \"&:disabled\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          \"&:hover\": {\n            borderTop: `solid 1px ${theme.colors.atmo4}`,\n            borderBottom: `solid 1px ${theme.colors.atmo4}`,\n            borderLeft: \"solid 1px transparent\",\n            borderRight: \"solid 1px transparent\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderTopLeftRadius: theme.radii.base,\n          borderBottomLeftRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTopRightRadius: theme.radii.base,\n          borderBottomRightRadius: theme.radii.base,\n          \"&:disabled\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n          \"&:disabled:hover\": {\n            borderRight: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: \"-1px\",\n      },\n    },\n  },\n  splitGroup: {\n    background: theme.colors.atmo1,\n    \"& button$button\": {\n      marginLeft: -1,\n      \"&:disabled\": {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n        \"&:hover\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n        },\n      },\n      \"&$firstButton\": {\n        \"&:not($selected):disabled\": {\n          borderLeft: \"none\",\n          \"&:hover\": {\n            borderLeft: \"none\",\n          },\n        },\n      },\n      \"&$lastButton\": {\n        \"&:not($selected):disabled\": {\n          borderRight: \"none\",\n          \"&:hover\": {\n            borderRight: \"none\",\n          },\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      marginLeft: -1,\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n        },\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        zIndex: 2,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderLeft: \"none\",\n            \"&:hover\": {\n              borderLeft: \"none\",\n            },\n          },\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          \"&:disabled\": {\n            borderRight: \"none\",\n            \"&:hover\": {\n              borderRight: \"none\",\n            },\n          },\n        },\n      },\n      \"&:not($firstButton) > button\": {\n        marginLeft: 0,\n      },\n    },\n    \"&$secondarySubtle\": {\n      \"& button$button\": {\n        borderTop: `solid 1px ${theme.colors.secondary}`,\n        borderBottom: `solid 1px ${theme.colors.secondary}`,\n        \"&$firstButton\": {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&$lastButton\": {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n        \"&:not($selected):disabled\": {\n          borderTop: \"none\",\n          borderBottom: \"none\",\n          \"&:hover\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n          },\n          \"&$firstButton\": {\n            \"&:not($selected):disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n          \"&$lastButton\": {\n            \"&:not($selected):disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n      \"& $button\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderTop: `solid 1px ${theme.colors.secondary}`,\n          borderBottom: `solid 1px ${theme.colors.secondary}`,\n          \"&:disabled\": {\n            borderTop: \"none\",\n            borderBottom: \"none\",\n            \"&:hover\": {\n              borderTop: \"none\",\n              borderBottom: \"none\",\n            },\n          },\n        },\n        \"&$firstButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderLeft: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderLeft: \"none\",\n              \"&:hover\": {\n                borderLeft: \"none\",\n              },\n            },\n          },\n        },\n        \"&$lastButton\": {\n          [`& .${dropDownMenuClasses.icon}`]: {\n            borderRight: `solid 1px ${theme.colors.secondary}`,\n            \"&:disabled\": {\n              borderRight: \"none\",\n              \"&:hover\": {\n                borderRight: \"none\",\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  splitGroupDisabled: { background: \"transparent\" },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      minWidth: 32,\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&$lastButton\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n  primary: {\n    \"& button$button\": {\n      borderTop: \"none\",\n      borderBottom: \"none\",\n\n      \"&$firstButton\": {\n        borderLeft: \"none\",\n      },\n      \"&$lastButton\": {\n        borderRight: \"none\",\n      },\n      \"&$selected\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n    },\n\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: \"none\",\n        borderBottom: \"none\",\n      },\n      [`& .${dropDownMenuClasses.iconSelected}`]: {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderLeft: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: \"none\",\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          borderRight: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primarySubtle: {\n    \"& button$button\": {\n      borderTop: `solid 1px ${theme.colors.primary}`,\n      borderBottom: `solid 1px ${theme.colors.primary}`,\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.primary}`,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        borderTop: `solid 1px ${theme.colors.primary}`,\n        borderBottom: `solid 1px ${theme.colors.primary}`,\n      },\n      \"&$firstButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderLeft: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n      \"&$lastButton\": {\n        [`& .${dropDownMenuClasses.icon}`]: {\n          borderRight: `solid 1px ${theme.colors.primary}`,\n        },\n        [`& .${dropDownMenuClasses.iconSelected}`]: {\n          border: `solid 1px ${theme.colors.secondary}`,\n        },\n      },\n    },\n  },\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {\n    \"& button$button\": {\n      \"&:disabled\": {\n        background: theme.colors.atmo3,\n      },\n    },\n    // dropdown menu styles\n    \"& $button\": {\n      [`& .${dropDownMenuClasses.icon}`]: {\n        \"&:disabled\": {\n          background: theme.colors.atmo3,\n        },\n      },\n    },\n  },\n  firstButton: {},\n  lastButton: {},\n  split: {\n    width: 1,\n    height: \"100%\",\n    background: \"currentColor\",\n  },\n  splitContainer: {\n    zIndex: 1,\n    marginLeft: -1,\n    width: 1,\n    height: \"100%\",\n    paddingTop: 4,\n    paddingBottom: 4,\n    color: theme.colors.secondary,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    \"&$primary\": {\n      color: theme.colors.atmo1,\n      backgroundColor: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primarySubtle\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$primaryGhost\": {\n      color: theme.colors.primary,\n      borderTop: `1px solid ${theme.colors.primary}`,\n      borderBottom: `1px solid ${theme.colors.primary}`,\n    },\n    \"&$secondarySubtle\": {\n      color: theme.colors.secondary,\n      borderTop: `1px solid ${theme.colors.secondary}`,\n      borderBottom: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&$secondaryGhost\": {\n      color: theme.colors.secondary,\n    },\n    \"&$splitDisabled\": {\n      background: \"transparent\",\n      color: theme.colors.secondary_60,\n      borderTop: \"none\",\n      borderBottom: \"none\",\n    },\n  },\n  splitDisabled: {},\n});\n"],"names":["createClasses","theme","dropDownMenuClasses"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\nimport { getColoringStyle, getSizeStyles } from \"../Button/Button.styles\";\nimport { HvButtonSize } from \"../Button\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"none\",\n    position: \"relative\",\n    zIndex: 0,\n  },\n  multiple: {\n    background: theme.colors.atmo2,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      minWidth: \"unset\",\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      fontSize: theme.typography.body.fontSize,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&$lastButton\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover\": {\n          background: theme.colors.atmo3,\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        // prevent the focus ring to be hidden by sibling hover background\n        // even when selected\n        \"&.HvIsFocusVisible\": {\n          zIndex: 5,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n    background: theme.colors.atmo1,\n\n    // Button\n    \"& button$button\": {\n      \"&$firstButton\": {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        \"& + div$splitContainer\": {\n          marginLeft: -1,\n        },\n      },\n      \"&$lastButton\": {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n    },\n\n    // Dropdown Menu\n    [`& .${dropDownMenuClasses.root}`]: {\n      \"&:has($firstButton)\": {\n        \"& + div$splitContainer\": {\n          marginRight: -1,\n        },\n      },\n    },\n    \"& $button$firstButton > button\": {\n      marginRight: -1.5,\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n    \"& $button$lastButton > button\": {\n      marginLeft: -1.5,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n    [`& .${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 2,\n    },\n  },\n  splitGroupDisabled: { background: theme.colors.atmo3 },\n  button: {},\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      minWidth: 32,\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&$firstButton\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&$lastButton\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n  split: {\n    width: 1,\n    height: \"100%\",\n    background: \"currentColor\",\n  },\n  splitContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    zIndex: 1,\n    width: 2,\n    paddingTop: 4,\n    paddingBottom: 4,\n    height: \"calc(32px - 2px)\",\n  },\n  splitDisabled: {\n    color: theme.colors.secondary_60,\n  },\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\nexport const getSplitContainerColor = (\n  color: string,\n  type?: string,\n  disabled?: boolean\n) => ({\n  color: getColoringStyle(color, type).color,\n  backgroundColor: disabled\n    ? theme.colors.atmo3\n    : type === \"subtle\"\n    ? theme.colors.atmo1\n    : \"transparent\",\n});\n\nexport const getSplitContainerHeight = (size: HvButtonSize) => ({\n  height: `calc(${getSizeStyles(size).height} - 2px)`,\n});\n"],"names":["createClasses","theme","dropDownMenuClasses","getColoringStyle","getSizeStyles"],"mappings":"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"}

package/dist/cjs/Select/Select.cjs

@@ -11,7 +11,7 @@ const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const Select_styles = require("./Select.styles.cjs");
 const setId = require("../utils/setId.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
-const SelectButton = require("./SelectButton.cjs");
+const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
 const Panel = require("../Panel/Panel.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
@@ -35,6 +35,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     classes: classesProp,
     className,
     id: idProp,
+    size,
+    variant = "secondarySubtle",
     name,
     required,
     disabled: disabledProp,
@@ -143,7 +145,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
           description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          SelectButton.HvSelectButton,
+          DropdownButton.HvDropdownButton,
           {
             id,
             open: isOpen,
@@ -153,6 +155,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
               [classes.invalid]: validationState === "invalid"
             }),
             placement,
+            size,
+            variant,
             "aria-label": ariaLabel,
             "aria-labelledby": mergeIds(label && labelId, ariaLabelledBy),
             "aria-invalid": isInvalid ? true : void 0,

package/dist/cjs/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\n\nimport {\n  SelectProvider,\n  UseSelectParameters,\n  useSelect,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvSelectButton } from \"./SelectButton\";\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: clsx.ClassValue[]) => clsx(ids) || undefined;\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  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\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\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\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    \"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 [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 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              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\n      <HvSelectButton\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        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(label && labelId, ariaLabelledBy)}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(\n          description && descriptionId,\n          ariaDescribedBy\n        )}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvSelectButton>\n      <Popper\n        open={isOpen}\n        keepMounted\n        disablePortal\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        <HvPanel\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        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n\n      <input {...getHiddenInputProps()} autoComplete={autoComplete} />\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":["jsx","Fragment","clsx","fixedForwardRef","HvSelect","useDefaultProps","useClasses","useState","useRef","useForkRef","useSelect","useUniqueId","setId","useControlled","jsxs","HvFormElement","HvLabel","HvInfoMessage","HvSelectButton","Popper","HvPanel","SelectProvider","HvListContainer","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\n\nimport {\n  SelectProvider,\n  UseSelectParameters,\n  useSelect,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\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: clsx.ClassValue[]) => clsx(ids) || undefined;\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\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\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const {\n    children,\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    \"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 [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 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              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(label && labelId, ariaLabelledBy)}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(\n          description && descriptionId,\n          ariaDescribedBy\n        )}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvDropdownButton>\n      <Popper\n        open={isOpen}\n        keepMounted\n        disablePortal\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        <HvPanel\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        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n\n      <input {...getHiddenInputProps()} autoComplete={autoComplete} />\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":["jsx","Fragment","clsx","fixedForwardRef","HvSelect","useDefaultProps","useClasses","useState","useRef","useForkRef","useSelect","useUniqueId","setId","useControlled","jsxs","HvFormElement","HvLabel","HvInfoMessage","HvDropdownButton","Popper","HvPanel","SelectProvider","HvListContainer","HvWarningText"],"mappings":"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"}

package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs

@@ -3,9 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const ActionsGeneric_styles = require("../../ActionsGeneric/ActionsGeneric.styles.cjs");
-require("@emotion/react/jsx-runtime");
-require("react");
-require("@hitachivantara/uikit-react-icons");
 const { useClasses, staticClasses } = classes.createClasses(
   "HvSnackbar-Content",
   {