npm - @hitachivantara/uikit-react-core - Versions diffs - 5.58.3 → 5.59.0 - Mend

@hitachivantara/uikit-react-core 5.58.3 → 5.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

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

@@ -1,5 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../utils/classes.js";
+import { getColoringStyle, getSizeStyles } from "../Button/Button.styles.js";
 import { staticClasses as staticClasses$1 } from "../DropDownMenu/DropDownMenu.styles.js";
 import "@emotion/react/jsx-runtime";
 import "react";
@@ -9,9 +10,11 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     display: "flex",
     alignItems: "center",
     transition: "none",
-    background: theme.colors.atmo2,
     position: "relative",
-    zIndex: 0,
+    zIndex: 0
+  },
+  multiple: {
+    background: theme.colors.atmo2,
     // prevent the focus ring to be hidden by sibling hover background
     "&>.HvIsFocusVisible": {
       zIndex: 5
@@ -90,215 +93,50 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
           border: `solid 1px ${theme.colors.atmo4}`
         }
       }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`&.${staticClasses$1.container}`]: {
-        width: "unset"
-      },
-      [`& .${staticClasses$1.icon}`]: {
-        borderTop: `solid 1px ${theme.colors.atmo4}`,
-        borderBottom: `solid 1px ${theme.colors.atmo4}`,
-        borderLeft: "solid 1px transparent",
-        borderRight: "solid 1px transparent",
-        borderRadius: 0,
-        "&:disabled": {
-          borderTop: `solid 1px ${theme.colors.atmo4}`,
-          borderBottom: `solid 1px ${theme.colors.atmo4}`,
-          "&:hover": {
-            borderTop: `solid 1px ${theme.colors.atmo4}`,
-            borderBottom: `solid 1px ${theme.colors.atmo4}`,
-            borderLeft: "solid 1px transparent",
-            borderRight: "solid 1px transparent"
-          }
-        }
-      },
-      [`& .${staticClasses$1.iconSelected}`]: {
-        border: `solid 1px ${theme.colors.secondary}`
-      },
-      "&$firstButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderLeft: `solid 1px ${theme.colors.atmo4}`,
-          borderTopLeftRadius: theme.radii.base,
-          borderBottomLeftRadius: theme.radii.base,
-          "&:disabled": {
-            borderLeft: `solid 1px ${theme.colors.atmo4}`
-          }
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          border: `solid 1px ${theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderRight: `solid 1px ${theme.colors.atmo4}`,
-          borderTopRightRadius: theme.radii.base,
-          borderBottomRightRadius: theme.radii.base,
-          "&:disabled": {
-            borderRight: `solid 1px ${theme.colors.atmo4}`
-          },
-          "&:disabled:hover": {
-            borderRight: `solid 1px ${theme.colors.atmo4}`
-          }
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          border: `solid 1px ${theme.colors.secondary}`
-        }
-      },
-      "&:not($firstButton) > button": {
-        marginLeft: "-1px"
-      }
     }
   },
   splitGroup: {
+    width: "fit-content",
     background: 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,
-      [`& .${staticClasses$1.icon}`]: {
-        "&:disabled": {
-          borderTop: "none",
-          borderBottom: "none",
-          "&:hover": {
-            borderTop: "none",
-            borderBottom: "none"
-          }
-        }
-      },
-      [`& .${staticClasses$1.iconSelected}`]: {
-        zIndex: 2
-      },
-      "&$firstButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          "&:disabled": {
-            borderLeft: "none",
-            "&:hover": {
-              borderLeft: "none"
-            }
-          }
-        }
-      },
-      "&$lastButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          "&:disabled": {
-            borderRight: "none",
-            "&:hover": {
-              borderRight: "none"
-            }
-          }
+    // Dropdown Menu
+    [`& .${staticClasses$1.root}`]: {
+      "&:has($firstButton)": {
+        "& + div$splitContainer": {
+          marginRight: -1
         }
-      },
-      "&:not($firstButton) > button": {
-        marginLeft: 0
       }
     },
-    "&$secondarySubtle": {
-      "& button$button": {
-        borderTop: `solid 1px ${theme.colors.secondary}`,
-        borderBottom: `solid 1px ${theme.colors.secondary}`,
-        "&$firstButton": {
-          borderLeft: `solid 1px ${theme.colors.secondary}`
-        },
-        "&$lastButton": {
-          borderRight: `solid 1px ${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": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderTop: `solid 1px ${theme.colors.secondary}`,
-          borderBottom: `solid 1px ${theme.colors.secondary}`,
-          "&:disabled": {
-            borderTop: "none",
-            borderBottom: "none",
-            "&:hover": {
-              borderTop: "none",
-              borderBottom: "none"
-            }
-          }
-        },
-        "&$firstButton": {
-          [`& .${staticClasses$1.icon}`]: {
-            borderLeft: `solid 1px ${theme.colors.secondary}`,
-            "&:disabled": {
-              borderLeft: "none",
-              "&:hover": {
-                borderLeft: "none"
-              }
-            }
-          }
-        },
-        "&$lastButton": {
-          [`& .${staticClasses$1.icon}`]: {
-            borderRight: `solid 1px ${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
+    },
+    [`& .${staticClasses$1.iconSelected}`]: {
+      zIndex: 2
     }
   },
-  splitGroupDisabled: { background: "transparent" },
+  splitGroupDisabled: { background: theme.colors.atmo3 },
   button: {},
   selected: {},
-  // vertical button display Styling
   vertical: {
     flexDirection: "column",
     height: "auto",
@@ -362,151 +200,43 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       }
     }
   },
-  primary: {
-    "& button$button": {
-      borderTop: "none",
-      borderBottom: "none",
-      "&$firstButton": {
-        borderLeft: "none"
-      },
-      "&$lastButton": {
-        borderRight: "none"
-      },
-      "&$selected": {
-        border: `solid 1px ${theme.colors.secondary}`
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${staticClasses$1.icon}`]: {
-        borderTop: "none",
-        borderBottom: "none"
-      },
-      [`& .${staticClasses$1.iconSelected}`]: {
-        border: `solid 1px ${theme.colors.secondary}`
-      },
-      "&$firstButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderLeft: "none"
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          borderLeft: `solid 1px ${theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderRight: "none"
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          borderRight: `solid 1px ${theme.colors.secondary}`
-        }
-      }
-    }
-  },
-  primarySubtle: {
-    "& button$button": {
-      borderTop: `solid 1px ${theme.colors.primary}`,
-      borderBottom: `solid 1px ${theme.colors.primary}`,
-      "&$firstButton": {
-        borderLeft: `solid 1px ${theme.colors.primary}`
-      },
-      "&$lastButton": {
-        borderRight: `solid 1px ${theme.colors.primary}`
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${staticClasses$1.icon}`]: {
-        borderTop: `solid 1px ${theme.colors.primary}`,
-        borderBottom: `solid 1px ${theme.colors.primary}`
-      },
-      "&$firstButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderLeft: `solid 1px ${theme.colors.primary}`
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          border: `solid 1px ${theme.colors.secondary}`
-        }
-      },
-      "&$lastButton": {
-        [`& .${staticClasses$1.icon}`]: {
-          borderRight: `solid 1px ${theme.colors.primary}`
-        },
-        [`& .${staticClasses$1.iconSelected}`]: {
-          border: `solid 1px ${theme.colors.secondary}`
-        }
-      }
-    }
-  },
-  primaryGhost: {},
-  secondary: {},
-  secondarySubtle: {},
-  secondaryGhost: {
-    "& button$button": {
-      "&:disabled": {
-        background: theme.colors.atmo3
-      }
-    },
-    // dropdown menu styles
-    "& $button": {
-      [`& .${staticClasses$1.icon}`]: {
-        "&:disabled": {
-          background: 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: theme.colors.secondary,
-    borderTop: `1px solid ${theme.colors.atmo4}`,
-    borderBottom: `1px solid ${theme.colors.atmo4}`,
-    "&$primary": {
-      color: theme.colors.atmo1,
-      backgroundColor: theme.colors.primary,
-      borderTop: `1px solid ${theme.colors.primary}`,
-      borderBottom: `1px solid ${theme.colors.primary}`
-    },
-    "&$primarySubtle": {
-      color: theme.colors.primary,
-      borderTop: `1px solid ${theme.colors.primary}`,
-      borderBottom: `1px solid ${theme.colors.primary}`
-    },
-    "&$primaryGhost": {
-      color: theme.colors.primary,
-      borderTop: `1px solid ${theme.colors.primary}`,
-      borderBottom: `1px solid ${theme.colors.primary}`
-    },
-    "&$secondarySubtle": {
-      color: theme.colors.secondary,
-      borderTop: `1px solid ${theme.colors.secondary}`,
-      borderBottom: `1px solid ${theme.colors.secondary}`
-    },
-    "&$secondaryGhost": {
-      color: theme.colors.secondary
-    },
-    "&$splitDisabled": {
-      background: "transparent",
-      color: theme.colors.secondary_60,
-      borderTop: "none",
-      borderBottom: "none"
-    }
+    height: "calc(32px - 2px)"
   },
-  splitDisabled: {}
+  splitDisabled: {
+    color: 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: getColoringStyle(color, type).color,
+  backgroundColor: disabled ? theme.colors.atmo3 : type === "subtle" ? theme.colors.atmo1 : "transparent"
+});
+const getSplitContainerHeight = (size) => ({
+  height: `calc(${getSizeStyles(size).height} - 2px)`
 });
 export {
+  getSplitContainerColor,
+  getSplitContainerHeight,
   staticClasses,
   useClasses
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiButton.styles.js","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":["dropDownMenuClasses"],"mappings":"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"}
1	+ {"version":3,"file":"MultiButton.styles.js","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":["dropDownMenuClasses"],"mappings":"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"}

package/dist/esm/Select/Select.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { useClasses } from "./Select.styles.js";
 import { staticClasses } from "./Select.styles.js";
 import { setId } from "../utils/setId.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
-import { HvSelectButton } from "./SelectButton.js";
+import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvFormElement } from "../Forms/FormElement/FormElement.js";
 import { HvLabel } from "../Forms/Label/Label.js";
@@ -32,6 +32,8 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     classes: classesProp,
     className,
     id: idProp,
+    size,
+    variant = "secondarySubtle",
     name,
     required,
     disabled: disabledProp,
@@ -140,7 +142,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
           description && /* @__PURE__ */ jsx(HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
         ] }),
         /* @__PURE__ */ jsx(
-          HvSelectButton,
+          HvDropdownButton,
           {
             id,
             open: isOpen,
@@ -150,6 +152,8 @@ const HvSelect = 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/esm/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","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":["HvSelect"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,SAAS,mBACP,SACA;AACI,MAAA,MAAM,QAAQ,OAAO,GAAG;AAC1B,QAAI,QAAQ,WAAW;AAAU,aAAA;AAC1B,WAAA,oBAAA,UAAA,EAAG,UAAQ,QAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,CAAA;AAAA,EACnD;AAEA,SAAO,SAAS,SAAS;AAC3B;AAEA,MAAM,WAAW,IAAI,QAA2B,KAAK,GAAG,KAAK;AA4CtD,MAAM,WAAW,gBAAgB,SAASA,UAI/C,OACA,KACA;AACM,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB,cAAc;AAE9D,QAAA,YAAY,OAA0B,IAAI;AAC1C,QAAA,kBAAkB,WAAW,KAAK,SAAS;AAE3C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAiC;AAAA,IACnC,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAEK,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,YAAY,MAAM,QAAQ,OAAO,CAAC;AAClD,QAAM,gBAAgB,YAAY,MAAM,QAAQ,aAAa,CAAC;AAC9D,QAAM,iBAAiB,YAAY,MAAM,QAAQ,OAAO,CAAC;AAEnD,QAAA,CAAC,iBAAiB,IAAI,cAAc;AAAA,IACxC,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,CACV;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,cAA4B;AAAA,IACxE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,CACV;AAED,WAAS,iBAAiB,SAAkB;AAC1C,QAAI,CAAC,SAAS;AACZ,YAAM,WAAW,WAAY,MAAwB,SAAS,IAAI,CAAC,CAAC;AACpE,yBAAmB,YAAY,CAAC,WAAW,YAAY,OAAO;AAAA,IAChE;AACA,mBAAe,OAAO;AAAA,EACxB;AAMM,QAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,QAAM,YAAY,oBAAoB;AAEtC,QAAM,cAAc,WACf,MACE,IAAI,CAAC,MAAM,kBAAkB,CAAC,CAAC,EAC/B,OAAO,CAAC,MAAsC,MAAM,MAAS,IAChE,kBAAkB,KAAoB,KAAK;AAEzC,QAAA,SAAS,QAAQ,CAAC,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MACA,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACT,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAS;AAAA,cACT;AAAA,cACA,WAAW,QAAQ;AAAA,YAAA;AAAA,UACrB;AAAA,UAED,mCACE,eAAc,EAAA,IAAI,eAAe,WAAW,QAAQ,aAClD,UACH,YAAA,CAAA;AAAA,QAAA,GAEJ;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,cAC5B,CAAC,QAAQ,OAAO,GAAG,oBAAoB;AAAA,YAAA,CACxC;AAAA,YACD;AAAA,YACA,cAAY;AAAA,YACZ,mBAAiB,SAAS,SAAS,SAAS,cAAc;AAAA,YAC1D,gBAAc,YAAY,OAAO;AAAA,YACjC,qBAAmB;AAAA,YACnB,oBAAkB;AAAA,cAChB,eAAe;AAAA,cACf;AAAA,YACF;AAAA,YACC,GAAG,eAAe;AAAA,YAElB,UAAA,mBAAmB,WAAW,KAAK;AAAA,UAAA;AAAA,QACtC;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,aAAW;AAAA,YACX,eAAa;AAAA,YACb,UAAU,UAAU;AAAA,YACpB,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,IAAI,CAAC,EAAE,YAAY,aAAa,MAAM,SAAS;AAAA,cACjD;AAAA,YACF;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,OAAO,gBACH,UACC,UAAU,SAAS,eAAe,KAAK;AAAA,gBAC9C;AAAA,gBACA,WAAW,GAAG,QAAQ,OAAO,WAAW;AAAA,kBACtC,CAAC,QAAQ,aAAa,GAAG,UAAU,SAAS,KAAK;AAAA,kBACjD,CAAC,QAAQ,eAAe,GAAG,UAAU,SAAS,QAAQ;AAAA,gBAAA,CACvD;AAAA,gBAED,UAAC,oBAAA,gBAAA,EAAe,OAAO,cACrB,8BAAC,iBAAgB,EAAA,WAAS,MAAC,YAAU,MAAE,GAAG,mBACvC,SACH,CAAA,GACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QAEC,oBAAA,SAAA,EAAO,GAAG,uBAAuB,aAA4B,CAAA;AAAA,QAE7D,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa;AAAA,YACb,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
1	+ {"version":3,"file":"Select.js","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":["HvSelect"],"mappings":"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"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../../ActionsGeneric/ActionsGeneric.styles.js";
-import "@emotion/react/jsx-runtime";
-import "react";
-import "@hitachivantara/uikit-react-icons";
 const { useClasses, staticClasses } = createClasses(
   "HvSnackbar-Content",
   {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["actionsGenericClasses"],"mappings":"~~;;;;;;~~AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,OAAO,MAAM,OAAO;AAAA,MACpB,YAAY,MAAM,WAAW;AAAA,MAC7B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ,CAAC,MAAMA,gBAAsB,MAAM,EAAE,GAAG;AAAA,QACtC,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,QACpB,WAAW;AAAA,UACT,aAAa,MAAM,OAAO;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa,CAAC;AAAA,EAChB;AACF;"}
1	+ {"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["actionsGenericClasses"],"mappings":";;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,OAAO,MAAM,OAAO;AAAA,MACpB,YAAY,MAAM,WAAW;AAAA,MAC7B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ,CAAC,MAAMA,gBAAsB,MAAM,EAAE,GAAG;AAAA,QACtC,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,QACpB,WAAW;AAAA,UACT,aAAa,MAAM,OAAO;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa,CAAC;AAAA,EAChB;AACF;"}