@hitachivantara/uikit-react-core 5.53.1 → 5.54.0

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

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../utils/classes.cjs");
+const DropDownMenu_styles = require("../DropDownMenu/DropDownMenu.styles.cjs");
+require("@emotion/react/jsx-runtime");
+require("react");
+require("@hitachivantara/uikit-react-icons");
 const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
   root: {
     display: "flex",
-    height: 32,
     alignItems: "center",
     transition: "none",
     background: uikitStyles.theme.colors.atmo2,
@@ -16,9 +19,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
       zIndex: 5
     },
     "& button$button": {
-      height: 32,
+      minWidth: "unset",
       width: "100%",
-      minWidth: 32,
       maxWidth: 200,
       padding: 0,
       transition: "none",
@@ -28,10 +30,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
       borderLeft: "solid 1px transparent",
       borderRight: "solid 1px transparent",
       borderRadius: 0,
-      ...uikitStyles.theme.typography.body,
-      "&:active": {
-        backgroundColor: `${uikitStyles.theme.colors.atmo3}`
-      },
+      fontWeight: uikitStyles.theme.typography.body.fontWeight,
+      fontSize: uikitStyles.theme.typography.body.fontSize,
       "&:disabled": {
         color: uikitStyles.theme.colors.secondary_60,
         borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
@@ -43,24 +43,36 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
           borderRight: "solid 1px transparent"
         }
       },
-      "&:first-of-type": {
+      "&$firstButton": {
         borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
         borderTopLeftRadius: uikitStyles.theme.radii.base,
-        borderBottomLeftRadius: uikitStyles.theme.radii.base
+        borderBottomLeftRadius: uikitStyles.theme.radii.base,
+        "&:disabled": {
+          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+        }
       },
-      "&:last-of-type": {
+      "&$lastButton": {
         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} !important`
+          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
         }
       },
-      "&:not(:first-of-type)": {
+      "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
+        background: uikitStyles.theme.colors.atmo1,
+        ...uikitStyles.theme.typography.label,
+        borderRadius: uikitStyles.theme.radii.base,
+        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+        zIndex: 2,
         "&:hover": {
+          background: uikitStyles.theme.colors.atmo3,
           "&:not(:disabled)": {
             border: `solid 1px ${uikitStyles.theme.colors.secondary}`
           },
@@ -68,31 +80,220 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
             border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
           }
         },
+        // prevent the focus ring to be hidden by sibling hover background
+        // even when selected
+        "&.HvIsFocusVisible": {
+          zIndex: 5
+        },
         "&:disabled": {
           zIndex: 1,
           color: uikitStyles.theme.colors.secondary_60,
           background: uikitStyles.theme.colors.atmo1,
-          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          border: `solid 1px ${uikitStyles.theme.colors.secondary}`
         }
       }
     },
-    "& button$button$selected": {
-      background: uikitStyles.theme.colors.atmo1,
-      height: 34,
-      ...uikitStyles.theme.typography.label,
-      borderRadius: uikitStyles.theme.radii.base,
-      border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-      zIndex: 2,
-      "&:hover": {
-        background: uikitStyles.theme.colors.atmo3
+    // 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"
+          }
+        }
       },
-      "&:first-of-type, &:last-of-type": {
+      [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
         border: `solid 1px ${uikitStyles.theme.colors.secondary}`
       },
-      // prevent the focus ring to be hidden by sibling hover background
-      // even when selected
-      "&.HvIsFocusVisible": {
-        zIndex: 5
+      "&$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: {
+    background: uikitStyles.theme.colors.atmo1,
+    "& button$button": {
+      marginLeft: -1,
+      "&: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"
+          }
+        }
+      },
+      "&:not($firstButton)": {
+        marginLeft: 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"
+            }
+          }
+        }
+      },
+      "&: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"
+              }
+            }
+          }
+        }
       }
     }
   },
@@ -106,6 +307,7 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
       flex: "1 1 20px"
     },
     "& button$button": {
+      minWidth: 32,
       width: "100%",
       borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
       borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
@@ -124,20 +326,20 @@ const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
           borderBottom: "solid 1px transparent"
         }
       },
-      "&:first-of-type": {
+      "&$firstButton": {
         borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
         borderTopLeftRadius: uikitStyles.theme.radii.base,
         borderTopRightRadius: uikitStyles.theme.radii.base
       },
-      "&:last-of-type": {
+      "&$lastButton": {
         borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
         borderBottomLeftRadius: uikitStyles.theme.radii.base,
         borderBottomRightRadius: uikitStyles.theme.radii.base,
         "&:disabled:hover": {
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4} !important`
+          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`
         }
       },
-      "&:not(:first-of-type)": {
+      "&:not($firstButton)": {
         marginLeft: 0,
         marginTop: -1
       },
@@ -160,7 +362,150 @@ 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: {
+    zIndex: 1,
+    marginLeft: -1,
+    width: 1,
+    height: "100%",
+    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: uikitStyles.theme.colors.atmo3,
+      color: uikitStyles.theme.colors.secondary_60,
+      borderTop: "none",
+      borderBottom: "none"
+    }
+  },
+  splitDisabled: {}
 });
 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 { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\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      height: 32,\n      width: \"100%\",\n      minWidth: 32,\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      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\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      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\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    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\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      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\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    },\n  },\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      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      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\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} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\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});\n"],"names":["createClasses","theme"],"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 { 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.secondary}`,\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  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: theme.colors.atmo3,\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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"}

package/dist/esm/Button/Button.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "../hooks/useTheme.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { fixedForwardRef } from "../types/generic.js";
-import { useClasses, getSizeStyles, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
+import { useClasses, getSizeStyles, getRadiusStyles, getOverrideColors, getIconSizeStyles } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";
 const mapVariant = (variant, theme) => {
   if (theme === "ds3")
@@ -31,6 +31,7 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
     focusableWhenDisabled,
     onClick: onClickProp,
     onMouseDown: onMouseDownProp,
+    selected,
     ...others
   } = useDefaultProps("HvButton", props);
   const { classes, css, cx } = useClasses(classesProp);
@@ -56,13 +57,14 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
       className: cx(
         classes.root,
         classes[variant],
-        size && css(getSizeStyles(size)),
+        size && !icon && css(getSizeStyles(size)),
         radius && css(getRadiusStyles(radius)),
         overrideIconColors && css(getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled
         },
+        size && icon && css(getIconSizeStyles(size)),
         className
       ),
       onClick: handleClick,
@@ -73,6 +75,7 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
         tabIndex: focusableWhenDisabled ? 0 : -1,
         "aria-disabled": true
       },
+      ...selected && { "aria-pressed": selected },
       ...others,
       children: [
         startIcon && /* @__PURE__ */ jsx("span", { className: classes.startIcon, children: startIcon }),

package/dist/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\"\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        size && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        className\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AA8DA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAInB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,IAAI,cAAc,IAAI,CAAC;AAAA,QAC/B,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCAAc,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,+BAAY,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getIconSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\"\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        size && !icon && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        size && icon && css(getIconSizeStyles(size)),\n        className\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AA+DA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAInB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,CAAC,QAAQ,IAAI,cAAc,IAAI,CAAC;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,QAAQ,QAAQ,IAAI,kBAAkB,IAAI,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCAAc,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,+BAAY,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}