@hitachivantara/uikit-react-core 5.28.1 → 5.29.0

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","itemHref","itemTarget","root","menu","menubar","selected","link","button","map","itm"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","props","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","useDefaultProps","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","itemHref","itemTarget","root","menu","menubar","selected","link","button","map","itm"],"mappings":"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"}

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js

@@ -42,65 +42,48 @@ const {
 } = createClasses("HvHeader-MenuItem", {
   root: {
     display: "inline",
-    "& span": {
-      color: theme.header.color
-    },
     "&:hover": {
-      backgroundColor: theme.header.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     },
     "&:focus-within": {
-      backgroundColor: theme.header.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     }
   },
   menu: {
-    marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,
-    paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
-    paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
+    marginTop: 0,
+    paddingBottom: "4px",
+    paddingTop: "4px",
     height: "100%",
-    borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,
-    borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,
-    "&& > * > span": {
-      color: theme.header.secondLevelItemColor,
-      padding: theme.header.secondLevelItemPadding
-    }
+    borderTop: "none",
+    borderBottom: `4px solid ${theme.colors.atmo2}`
   },
   menubar: {
-    marginTop: theme.header.selectedItemBorderTopThickness,
-    paddingBottom: theme.header.selectedItemBorderBottomThickness,
-    paddingTop: theme.header.selectedItemBorderBottomThickness,
+    marginTop: "0px",
+    paddingBottom: "4px",
+    paddingTop: "4px",
     height: "100%",
-    borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,
-    borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,
-    "& > * > span": {
-      padding: theme.header.itemPadding
-    }
+    borderTop: `0px solid ${theme.colors.atmo1}`,
+    borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
   },
   selected: {
     "&$menu": {
       marginTop: 0,
       paddingBottom: 0,
-      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,
-      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,
-      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.secondary}`,
+      paddingTop: "4px",
       height: "100%",
       "& > * > span": {
-        color: theme.header.secondLevelSelectedItemColor,
-        backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,
-        borderRadius: theme.header.secondLevelSelectedItemBorderRadius
+        color: theme.colors.secondary
       }
     },
     "&$menubar": {
       marginTop: 0,
       paddingBottom: 0,
-      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,
-      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,
-      paddingTop: theme.header.selectedItemBorderBottomThickness,
-      height: "100%",
-      "& > * > span": {
-        color: theme.header.selectedItemColor,
-        backgroundColor: theme.header.selectedItemBackgroundColor,
-        borderRadius: theme.header.selectedItemBorderRadius
-      }
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.secondary}`,
+      paddingTop: "4px",
+      height: "100%"
     }
   },
   link: {

package/dist/esm/components/Header/Navigation/MenuItem/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSInterpolation } from \"@emotion/css\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"& span\": {\n        color: theme.header.color,\n      },\n      \"&:hover\": {\n        backgroundColor: theme.header.hoverColor,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.header.hoverColor,\n      },\n    },\n    menu: {\n      marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,\n      paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,\n      \"&& > * > span\": {\n        color: theme.header.secondLevelItemColor,\n        padding: theme.header.secondLevelItemPadding,\n      },\n    },\n    menubar: {\n      marginTop: theme.header.selectedItemBorderTopThickness,\n      paddingBottom: theme.header.selectedItemBorderBottomThickness,\n      paddingTop: theme.header.selectedItemBorderBottomThickness,\n      height: \"100%\",\n      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,\n      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,\n      \"& > * > span\": {\n        padding: theme.header.itemPadding,\n      },\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelSelectedItemBorderTopColor}`,\n        borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelSelectedItemBorderBottomColor}`,\n        paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.header.secondLevelSelectedItemColor,\n          backgroundColor: theme.header.secondLevelSelectedItemBackgroundColor,\n          borderRadius: theme.header.secondLevelSelectedItemBorderRadius,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.selectedItemBorderTopColor}`,\n        borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.selectedItemBorderBottomColor}`,\n        paddingTop: theme.header.selectedItemBorderBottomThickness,\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.header.selectedItemColor,\n          backgroundColor: theme.header.selectedItemBackgroundColor,\n          borderRadius: theme.header.selectedItemBorderRadius,\n        },\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    },\n    button: {\n      color: \"inherit\",\n      ...item,\n    },\n  }\n);\n"],"names":["item","border","cursor","padding","theme","space","xs","sm","height","display","alignItems","outline","outlineStyles","flexDirection","justifyContent","content","visibility","overflow","userSelect","pointerEvents","fontWeight","fontWeights","semibold","staticClasses","useClasses","createClasses","root","color","header","backgroundColor","hoverColor","menu","marginTop","secondLevelSelectedItemBorderTopThickness","paddingBottom","secondLevelSelectedItemBorderBottomThickness","paddingTop","borderTop","secondLevelBackgroundColor","borderBottom","secondLevelItemColor","secondLevelItemPadding","menubar","selectedItemBorderTopThickness","selectedItemBorderBottomThickness","itemPadding","selected","secondLevelSelectedItemBorderTopColor","secondLevelSelectedItemBorderBottomColor","secondLevelSelectedItemColor","secondLevelSelectedItemBackgroundColor","borderRadius","secondLevelSelectedItemBorderRadius","selectedItemBorderTopColor","selectedItemBorderBottomColor","selectedItemColor","selectedItemBackgroundColor","selectedItemBorderRadius","link","textDecoration","button"],"mappings":"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"}
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSInterpolation } from \"@emotion/css\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {\n      marginTop: 0,\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: \"none\",\n      borderBottom: `4px solid ${theme.colors.atmo2}`,\n    },\n    menubar: {\n      marginTop: \"0px\",\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: `0px solid ${theme.colors.atmo1}`,\n      borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.colors.secondary,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    },\n    button: {\n      color: \"inherit\",\n      ...item,\n    },\n  }\n);\n"],"names":["item","border","cursor","padding","theme","space","xs","sm","height","display","alignItems","outline","outlineStyles","flexDirection","justifyContent","content","visibility","overflow","userSelect","pointerEvents","fontWeight","fontWeights","semibold","staticClasses","useClasses","createClasses","root","backgroundColor","colors","containerBackgroundHover","menu","marginTop","paddingBottom","paddingTop","borderTop","borderBottom","atmo2","menubar","atmo1","selected","secondary","color","link","textDecoration","button"],"mappings":";;;AAOA,MAAMA,OAAyB;AAAA,EAC7BC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,SAAU,GAAEC,MAAMC,MAAMC,EAAG,IAAGF,MAAMC,MAAME,EAAG;AAAA,EAC7CC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZ,YAAY;AAAA,IACVC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTA,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AAAA,EACA,UAAU;AAAA,IACRH,SAAS;AAAA,IACTI,eAAe;AAAA,IACfH,YAAY;AAAA,IACZI,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACfC,SAAS;AAAA,IACTP,QAAQ;AAAA,IACRQ,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,YAAYhB,MAAMiB,YAAYC;AAAAA,IAE9B,iBAAiB;AAAA,MACfb,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA;AAAA,EAAEc;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,MAAM;AAAA,IACJjB,SAAS;AAAA,IACT,WAAW;AAAA,MACTkB,iBAAiBvB,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,IACA,kBAAkB;AAAA,MAChBF,iBAAiBvB,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAW;AAAA,IACXC,cAAe,aAAY/B,MAAMwB,OAAOQ,KAAM;AAAA,EAChD;AAAA,EACAC,SAAS;AAAA,IACPN,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAY,aAAY9B,MAAMwB,OAAOU,KAAM;AAAA,IAC3CH,cAAe,GAAE,KAAM,UAAS/B,MAAMwB,OAAOU,KAAM;AAAA,EACrD;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRR,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,MAAMwB,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,MACR,gBAAgB;AAAA,QACdiC,OAAOrC,MAAMwB,OAAOY;AAAAA,MACtB;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACXT,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,MAAMwB,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAkC,MAAM;AAAA,IACJC,gBAAgB;AAAA,IAChB,GAAG3C;AAAAA,EACL;AAAA,EACA4C,QAAQ;AAAA,IACNH,OAAO;AAAA,IACP,GAAGzC;AAAAA,EACL;AACF,CACF;"}

package/dist/esm/components/InlineEditor/InlineEditor.styles.js

@@ -39,16 +39,16 @@ const {
     justifyContent: "flex-start",
     alignItems: "center",
     backgroundColor: "transparent",
-    border: `${theme.inlineEditor.borderWidth} solid transparent`,
+    border: `1px solid transparent`,
     "&:hover, &:focus": {
-      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,
+      border: `1px solid ${theme.colors.primary}`,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,
+      border: `1px solid ${theme.colors.secondary}`,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"

package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","colors","secondary_60","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","visibility","activeBorderColor","icon","minWidth","margin","iconVisible"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,gBAAiBC,SAAU,IAAGC,gBAAaD,SAAU,EAAC,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,MAAMc,aAAaC,WAAY;AAAA,IAE1C,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,MAAMc,aAAaC,WAAY,UAASf,MAAMc,aAAaE,gBAAiB;AAAA,MACvFJ,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVJ,QAAS,GAAEb,MAAMc,aAAaC,WAAY,UAASf,MAAMc,aAAaI,iBAAkB;AAAA,MACxFN,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAW,MAAM;AAAA,IACJZ,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZrB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPY,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQrB,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACAiB,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;"}
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `1px solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `1px solid ${theme.colors.primary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","colors","secondary_60","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","primary","visibility","secondary","icon","minWidth","margin","iconVisible"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,gBAAiBC,SAAU,IAAGC,gBAAaD,SAAU,EAAC,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS;AAAA,IAET,oBAAoB;AAAA,MAClBA,QAAS,aAAYb,MAAMC,OAAOa,OAAQ;AAAA,MAC1CF,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTG,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVF,QAAS,aAAYb,MAAMC,OAAOe,SAAU;AAAA,MAC5CJ,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTG,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTP,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAS,MAAM;AAAA,IACJV,QAAQ;AAAA,IACRQ,YAAY;AAAA,IACZnB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPU,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQnB,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACAe,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;"}

package/dist/esm/components/List/List.styles.js

@@ -36,7 +36,7 @@ const {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.list.selectedBackgroundColor
+      backgroundColor: theme.colors.primary_20
     }
   },
   link: {

package/dist/esm/components/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.list.selectedBackgroundColor,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","virtualizedRoot","marginBottom","selectorRoot","width","zIndex","selectorContainer","backgroundColor","outline","boxShadow","box","height","marginLeft","truncate","display","overflow","textOverflow","whiteSpace","item","itemSelector","theme","list","selectedBackgroundColor","link","typography","body","textDecoration","selectAllSelector","margin","position"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,EAAE;AAAA,EACnCC,cAAc;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAE;AAAA,EACzCC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChBA,iBAAiB;AAAA,MACjBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IAAEN,OAAO;AAAA,IAAQO,QAAQ;AAAA,IAAQC,YAAY;AAAA,EAAO;AAAA,EACzDC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpDZ,iBAAiBa,MAAMC,KAAKC;AAAAA,IAC9B;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,GAAGH,MAAMI,WAAWC;AAAAA,IACpBC,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACTjB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAkB,mBAAmB;AAAA,IACjBvB,OAAO;AAAA,IACPwB,QAAQ;AAAA,IAERC,UAAU;AAAA,IACVxB,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../../src/components/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","virtualizedRoot","marginBottom","selectorRoot","width","zIndex","selectorContainer","backgroundColor","outline","boxShadow","box","height","marginLeft","truncate","display","overflow","textOverflow","whiteSpace","item","itemSelector","theme","colors","primary_20","link","typography","body","textDecoration","selectAllSelector","margin","position"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,iBAAiB;AAAA,IAAEC,cAAc;AAAA,EAAE;AAAA,EACnCC,cAAc;AAAA,IAAEC,OAAO;AAAA,IAAQC,QAAQ;AAAA,EAAE;AAAA,EACzCC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChBA,iBAAiB;AAAA,MACjBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IAAEN,OAAO;AAAA,IAAQO,QAAQ;AAAA,IAAQC,YAAY;AAAA,EAAO;AAAA,EACzDC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,EACd;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpDZ,iBAAiBa,MAAMC,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,GAAGH,MAAMI,WAAWC;AAAAA,IACpBC,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACTjB,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAkB,mBAAmB;AAAA,IACjBvB,OAAO;AAAA,IACPwB,QAAQ;AAAA,IAERC,UAAU;AAAA,IACVxB,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js

@@ -47,18 +47,18 @@ const {
   interactive: {
     cursor: "pointer",
     "&:not($disabled):not($selected):hover": {
-      backgroundColor: theme.list.hoverColor
+      backgroundColor: theme.colors.containerBackgroundHover
     },
     "&$disabled": {
       cursor: "not-allowed"
     }
   },
   selected: {
-    backgroundColor: theme.list.hoverColor
+    backgroundColor: theme.colors.containerBackgroundHover
   },
   disabled: {
     color: theme.colors.secondary_60,
-    backgroundColor: theme.list.disabledBackgroundColor
+    backgroundColor: theme.colors.atmo3
   },
   withStartAdornment: {
     "& > div": {

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.list.hoverColor,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.list.hoverColor },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.list.disabledBackgroundColor,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","list","hoverColor","selected","disabled","color","secondary_60","disabledBackgroundColor","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC,EAAG;AAAA,IAE7B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAM6B,KAAKC;AAAAA,IAC9B;AAAA,IACA,cAAc;AAAA,MACZF,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAG,UAAU;AAAA,IAAEjB,iBAAiBd,MAAM6B,KAAKC;AAAAA,EAAW;AAAA,EACnDE,UAAU;AAAA,IACRC,OAAOjC,MAAMe,OAAOmB;AAAAA,IACpBpB,iBAAiBd,MAAM6B,KAAKM;AAAAA,EAC9B;AAAA,EACAC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAO,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","containerBackgroundHover","selected","disabled","color","secondary_60","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,MAAMsB,MAAMC,EAAG;AAAA,IAE7B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,MAAMe,OAAOc;AAAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZD,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAE,UAAU;AAAA,IAAEhB,iBAAiBd,MAAMe,OAAOc;AAAAA,EAAyB;AAAA,EACnEE,UAAU;AAAA,IACRC,OAAOhC,MAAMe,OAAOkB;AAAAA,IACpBnB,iBAAiBd,MAAMe,OAAOC;AAAAA,EAChC;AAAA,EACAkB,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAM,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMtC,MAAMe,OAAOkB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

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

@@ -2,21 +2,23 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { useClasses } from "./Select.styles.js";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvSelectionList } from "../SelectionList/SelectionList.js";
 const Option = ({
   ...props
 }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
-const HvSelect = ({
-  className,
-  classes: classesProp,
-  onChange,
-  disabled,
-  value,
-  children,
-  ...others
-}) => {
+const HvSelect = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    onChange,
+    disabled,
+    value,
+    children,
+    ...others
+  } = useDefaultProps("HvPaginationSelect", props);
   const {
     classes
   } = useClasses(classesProp);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport {\n  HvSelectionList,\n  HvSelectionListProps,\n} from \"@core/components/SelectionList\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvListItem, HvListItemProps } from \"@core/components/ListContainer\";\n\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nconst HvSelect = ({\n  className,\n  classes: classesProp,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}: any) => {\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","props","HvSelect","className","classes","classesProp","onChange","disabled","value","children","others","useClasses","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","selection","header","headerOpen"],"mappings":";;;;;;;AAeO,MAAMA,SAASA,CAAC;AAAA,EAAE,GAAGC;AAAgC,MAC1D,oBAAC,YAAW,EAAA,GAAIA,MACjB,CAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACA,MAAM;AACH,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,WAAWN,WAAW;AAC1C,QAAM,CAACO,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAiDA,CAACC,KAAKC,QAAQ;AACnEX,yCAAWU,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAgDA,CAACC,MAAMC,MAAM;AACjEP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBACJC,CACG,iBAAA;AACGC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA,oBAAC,gBACC,EAAA,WACA,SAAS;AAAA,IACPC,WAAWzB,QAAQyB;AAAAA,IACnBC,QAAQ1B,QAAQ0B;AAAAA,IAChBC,YAAY3B,QAAQ2B;AAAAA,EACtB,GACA,UAAUnB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAab,OACb,UACA,eAAa,MACb,GAAIE,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUK,cACtCN,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,MAAA,aAAeP;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { SyntheticEvent, useState } from \"react\";\n\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport {\n  HvSelectionList,\n  HvSelectionListProps,\n} from \"@core/components/SelectionList\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvListItem, HvListItemProps } from \"@core/components/ListContainer\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nexport interface HvPaginationSelectProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  onChange: (event: React.SyntheticEvent, val: number) => void;\n  value: number;\n}\n\nconst HvSelect = (props: HvPaginationSelectProps) => {\n  const {\n    className,\n    classes: classesProp,\n    onChange,\n    disabled,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPaginationSelect\", props);\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","props","HvSelect","className","classes","classesProp","onChange","disabled","value","children","others","useDefaultProps","useClasses","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","selection","header","headerOpen"],"mappings":";;;;;;;;AAgBO,MAAMA,SAASA,CAAC;AAAA,EAAE,GAAGC;AAAgC,MAC1D,oBAAC,YAAW,EAAA,GAAIA,MACjB,CAAA;AAQD,MAAMC,WAAWA,CAACD,UAAmC;AAC7C,QAAA;AAAA,IACJE;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBV,KAAK;AACzC,QAAA;AAAA,IAAEG;AAAAA,EAAAA,IAAYQ,WAAWP,WAAW;AAC1C,QAAM,CAACQ,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAiDA,CAACC,KAAKC,QAAQ;AACnEZ,yCAAWW,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAgDA,CAACC,MAAMC,MAAM;AACjEP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBACJC,CACG,iBAAA;AACGC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA,oBAAC,gBACC,EAAA,WACA,SAAS;AAAA,IACPC,WAAW1B,QAAQ0B;AAAAA,IACnBC,QAAQ3B,QAAQ2B;AAAAA,IAChBC,YAAY5B,QAAQ4B;AAAAA,EACtB,GACA,UAAUnB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAad,OACb,UACA,eAAa,MACb,GAAIE,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUM,cACtCP,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,MAAA,aAAeP;"}

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

@@ -5,9 +5,9 @@ const {
 } = createClasses("HvPaginationSelect", {
   header: {
     backgroundColor: "transparent",
-    borderColor: theme.pagination.pageSizeBorderColor,
+    borderColor: theme.colors.secondary_80,
     "&:hover": {
-      borderColor: theme.pagination.pageSizeHoverBorderColor
+      borderColor: theme.colors.secondary_80
     }
   },
   selection: {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.pagination.pageSizeBorderColor,\n    \"&:hover\": {\n      borderColor: theme.pagination.pageSizeHoverBorderColor,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":["useClasses","createClasses","header","backgroundColor","borderColor","theme","pagination","pageSizeBorderColor","pageSizeHoverBorderColor","selection","padding","spacing","headerOpen","colors","atmo1"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAW,IAAIC,cAAc,sBAAsB;AAAA,EAChEC,QAAQ;AAAA,IACNC,iBAAiB;AAAA,IACjBC,aAAaC,MAAMC,WAAWC;AAAAA,IAC9B,WAAW;AAAA,MACTH,aAAaC,MAAMC,WAAWE;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAASL,MAAMM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACAC,YAAY;AAAA,IACVT,iBAAiBE,MAAMQ,OAAOC;AAAAA,EAChC;AACF,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.colors.secondary_80,\n    \"&:hover\": {\n      borderColor: theme.colors.secondary_80,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":["useClasses","createClasses","header","backgroundColor","borderColor","theme","colors","secondary_80","selection","padding","spacing","headerOpen","atmo1"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAW,IAAIC,cAAc,sBAAsB;AAAA,EAChEC,QAAQ;AAAA,IACNC,iBAAiB;AAAA,IACjBC,aAAaC,MAAMC,OAAOC;AAAAA,IAC1B,WAAW;AAAA,MACTH,aAAaC,MAAMC,OAAOC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAASJ,MAAMK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACAC,YAAY;AAAA,IACVR,iBAAiBE,MAAMC,OAAOM;AAAAA,EAChC;AACF,CAAC;"}

package/dist/esm/components/QueryBuilder/QueryBuilder.js

@@ -6,6 +6,8 @@ import { useState, useRef, useReducer, useContext, useMemo, useEffect } from "re
 import { QueryBuilderContext } from "./Context.js";
 import { emptyGroup, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
+import { useClasses } from "./QueryBuilder.styles.js";
+import { staticClasses } from "./QueryBuilder.styles.js";
 import { RuleGroup } from "./RuleGroup/RuleGroup.js";
 import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 const HvQueryBuilder = (props) => {
@@ -18,8 +20,11 @@ const HvQueryBuilder = (props) => {
     maxDepth = 1,
     labels,
     readOnly = false,
-    classes
+    classes: classesProp
   } = useDefaultProps("HvQueryBuilder", props);
+  const {
+    classes
+  } = useClasses(classesProp);
   const [pendingAction, askAction] = useState();
   const currentAttributes = useRef(null);
   const [state, dispatchAction] = useReducer(reducer, query, (initialState2) => initialState2 || emptyGroup());
@@ -69,6 +74,7 @@ const HvQueryBuilder = (props) => {
   ] });
 };
 export {
-  HvQueryBuilder
+  HvQueryBuilder,
+  staticClasses as queryBuilderClasses
 };
 //# sourceMappingURL=QueryBuilder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    query,\n    onChange,\n    operators,\n    combinators,\n    maxDepth = 1,\n    labels,\n    readOnly = false,\n    classes,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultContext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultContext.operators,\n      combinators: combinators ?? defaultContext.combinators,\n      maxDepth: maxDepth ?? defaultContext.maxDepth,\n      labels: labels ?? defaultContext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultContext.operators,\n      defaultContext.combinators,\n      defaultContext.maxDepth,\n      defaultContext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","props","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","useDefaultProps","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultContext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","id","combinator","rules","dialog","dialogTitle","dialogMessage","dialogConfirm","dialogCancel","dialogCloseTooltip"],"mappings":";;;;;;;;;;AA4EaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,EAAAA,IACEC,gBAAgB,kBAAkBV,KAAK;AAE3C,QAAM,CAACW,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAjB,OACCkB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAelB,UAAUc;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAX;AAAAA;AAAAA,IAEAG,WAAWA,aAAaoB,eAAepB;AAAAA,IACvCC,aAAaA,eAAemB,eAAenB;AAAAA,IAC3CC,UAAUA,YAAYkB,eAAelB;AAAAA,IACrCC,QAAQA,UAAUiB,eAAejB;AAAAA,IACjCsB,gBAAgBT;AAAAA,IAChBZ;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAoB,eAAepB,WACfoB,eAAenB,aACfmB,eAAelB,UACfkB,eAAejB,QACfF,aACAC,UACAC,QACAC,UACAY,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAU9B;AAAAA,IAAAA,WACnBa,kBAAkBiB,YAAY9B,YAAY;AAEnDa,wBAAkBiB,UAAU9B;AACb,qBAAA;AAAA,QAAE+B,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC/B,UAAU,CAAC;AAGf6B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAcjB,QAAQ,CAAC;AAE7C,QAAMiC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAGrB,SACG,qBAAA,oBAAoB,UAApB,EAA6B,OAAOV,SACnC,UAAA;AAAA,IAAA,oBAAC,WACC,EAAA,OAAO,GACP,IAAIX,MAAM0B,IACV,YAAY1B,MAAM2B,YAClB,OAAO3B,MAAM4B,OACb,SAAiB;AAAA,IAElB,oBAAA,oBAAA,EACC,QAAQjC,iBAAiB,MACzB,WAAWyB,kBACX,UAAUK,iBACV,QAAO9B,+CAAekC,OAAOC,gBAAe,IAC5C,UAASnC,+CAAekC,OAAOE,kBAAiB,IAChD,qBAAoBpC,+CAAekC,OAAOG,kBAAiB,IAC3D,oBAAmBrC,+CAAekC,OAAOI,iBAAgB,IACzD,qBAAoBtC,+CAAekC,OAAOK,uBAAsB,IAAG;AAAA,EAEvE,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    query,\n    onChange,\n    operators,\n    combinators,\n    maxDepth = 1,\n    labels,\n    readOnly = false,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n  const { classes } = useClasses(classesProp);\n\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultContext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultContext.operators,\n      combinators: combinators ?? defaultContext.combinators,\n      maxDepth: maxDepth ?? defaultContext.maxDepth,\n      labels: labels ?? defaultContext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultContext.operators,\n      defaultContext.combinators,\n      defaultContext.maxDepth,\n      defaultContext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","props","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","classesProp","useDefaultProps","useClasses","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultContext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","id","combinator","rules","dialog","dialogTitle","dialogMessage","dialogConfirm","dialogCancel","dialogCloseTooltip"],"mappings":";;;;;;;;;;;;AA4EaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,IACAC,WAAW;AAAA,IACXC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,kBAAkBX,KAAK;AACrC,QAAA;AAAA,IAAES;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAE1C,QAAM,CAACG,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAnB,OACCoB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAepB,UAAUgB;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAb;AAAAA;AAAAA,IAEAG,WAAWA,aAAasB,eAAetB;AAAAA,IACvCC,aAAaA,eAAeqB,eAAerB;AAAAA,IAC3CC,UAAUA,YAAYoB,eAAepB;AAAAA,IACrCC,QAAQA,UAAUmB,eAAenB;AAAAA,IACjCwB,gBAAgBT;AAAAA,IAChBd;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAsB,eAAetB,WACfsB,eAAerB,aACfqB,eAAepB,UACfoB,eAAenB,QACfF,aACAC,UACAC,QACAC,UACAc,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAUhC;AAAAA,IAAAA,WACnBe,kBAAkBiB,YAAYhC,YAAY;AAEnDe,wBAAkBiB,UAAUhC;AACb,qBAAA;AAAA,QAAEiC,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAACjC,UAAU,CAAC;AAGf+B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAcnB,QAAQ,CAAC;AAE7C,QAAMmC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAGrB,SACG,qBAAA,oBAAoB,UAApB,EAA6B,OAAOV,SACnC,UAAA;AAAA,IAAA,oBAAC,WACC,EAAA,OAAO,GACP,IAAIX,MAAM0B,IACV,YAAY1B,MAAM2B,YAClB,OAAO3B,MAAM4B,OACb,SAAiB;AAAA,IAElB,oBAAA,oBAAA,EACC,QAAQjC,iBAAiB,MACzB,WAAWyB,kBACX,UAAUK,iBACV,QAAO9B,+CAAekC,OAAOC,gBAAe,IAC5C,UAASnC,+CAAekC,OAAOE,kBAAiB,IAChD,qBAAoBpC,+CAAekC,OAAOG,kBAAiB,IAC3D,oBAAmBrC,+CAAekC,OAAOI,iBAAgB,IACzD,qBAAoBtC,+CAAekC,OAAOK,uBAAsB,IAAG;AAAA,EAEvE,EAAA,CAAA;AAEJ;"}

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

@@ -10,7 +10,7 @@ const {
     padding: theme.space.sm,
     marginTop: 12,
     marginBottom: 32,
-    border: theme.queryBuilder.border
+    border: `1px solid ${theme.colors.atmo4}`
   },
   /** Styles applied to the top group container. */
   topGroup: {
@@ -18,7 +18,7 @@ const {
     backgroundColor: "transparent",
     maxWidth: "100%",
     minWidth: 740,
-    paddingBottom: theme.queryBuilder.topGroupPaddingBottom
+    paddingBottom: `calc(${theme.space.md} * 3)`
   },
   /** Styles applied to the sub group containers. */
   subGroup: {
@@ -31,10 +31,10 @@ const {
       zIndex: 2,
       width: 21,
       height: 36,
-      borderBottom: theme.queryBuilder.border,
-      borderLeft: theme.queryBuilder.border,
+      borderBottom: `1px solid ${theme.colors.atmo4}`,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: -38,
-      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition
+      left: -38
     },
     ":not($topRulesContainer)>&:last-child::after": {
       content: '""',
@@ -42,7 +42,7 @@ const {
       zIndex: 1,
       width: 32,
       height: "100%",
-      borderLeft: theme.queryBuilder.border,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
       left: `calc(${theme.space.sm} + 2)`
     }
@@ -75,13 +75,13 @@ const {
   rulesContainer: {},
   /** Styles applied to the sub rules container. */
   subRulesContainer: {
-    borderLeft: theme.queryBuilder.border,
+    borderLeft: `1px solid ${theme.colors.atmo4}`,
     marginLeft: theme.space.sm,
     marginBottom: theme.space.md,
     paddingLeft: theme.space.sm,
     paddingTop: 7,
     position: "relative",
-    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,
+    left: -33,
     width: "100%"
   },
   /** Styles applied to the action button container. */
@@ -94,8 +94,8 @@ const {
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {
     position: "absolute",
-    bottom: theme.queryBuilder.topActionButtonContainerBottom,
-    right: theme.queryBuilder.topActionButtonContainerRight
+    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,
+    right: `calc(${theme.space.sm} * 1.75 + 2px)`
   },
   /** Styles applied to the top rules container. */
   topRulesContainer: {},

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: theme.queryBuilder.border,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: theme.queryBuilder.topGroupPaddingBottom,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: -38,\n      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: theme.queryBuilder.border,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: theme.queryBuilder.topActionButtonContainerBottom,\n    right: theme.queryBuilder.topActionButtonContainerRight,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","queryBuilder","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","topGroupPaddingBottom","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","ruleSubGroupLeftConnectorPosition","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","colors","atmo2","rulesContainer","subRulesContainer","marginLeft","md","paddingLeft","paddingTop","ruleSubGroupContainerLeftConnectorPosition","actionButtonContainer","topActionButtonContainer","bottom","topActionButtonContainerBottom","topActionButtonContainerRight","topRulesContainer","buttonBackground","display"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAQL,MAAMM,aAAaD;AAAAA,EAC7B;AAAA;AAAA,EAEAE,UAAU;AAAA,IACRC,QAAQR,MAAMC,MAAMC;AAAAA,IACpBO,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAeZ,MAAMM,aAAaO;AAAAA,EACpC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAcpB,MAAMM,aAAaD;AAAAA,MACjCgB,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAMvB,MAAMM,aAAakB;AAAAA,IAC3B;AAAA,IACA,gDAAgD;AAAA,MAC9CR,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAO,QAAOvB,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEd,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Be,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVwB,KAAM,cAAatB,MAAMC,MAAMC,EAAG;AAAA,IAClCqB,MAAO,cAAavB,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYwB,KAAK;AAAA,IAAKQ,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAEtB,iBAAiBT,MAAMgC,OAAOC;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBd,YAAYrB,MAAMM,aAAaD;AAAAA,IAC/B+B,YAAYpC,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,MAAMC,MAAMoC;AAAAA,IAC1BC,aAAatC,MAAMC,MAAMC;AAAAA,IACzBqC,YAAY;AAAA,IACZzC,UAAU;AAAA,IACVyB,MAAMvB,MAAMM,aAAakC;AAAAA,IACzBtB,OAAO;AAAA,EACT;AAAA;AAAA,EAEAuB,uBAAuB;AAAA,IACrBL,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYpC,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAwC,0BAA0B;AAAA,IACxB5C,UAAU;AAAA,IACV6C,QAAQ3C,MAAMM,aAAasC;AAAAA,IAC3Bd,OAAO9B,MAAMM,aAAauC;AAAAA,EAC5B;AAAA;AAAA,EAEAC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBtC,iBAAiBT,MAAMgC,OAAOC;AAAAA,IAC9Be,SAAS;AAAA,EACX;AACF,CAAC;"}
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: `calc(${theme.space.md} * 3)`,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","md","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAS,aAAYL,MAAMM,OAAOC,KAAM;AAAA,EAC1C;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRC,QAAQT,MAAMC,MAAMC;AAAAA,IACpBQ,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAgB,QAAOb,MAAMC,MAAMa,EAAG;AAAA,EACxC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYrB,MAAMM,OAAOC,KAAM;AAAA,MAC9Ce,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9CP,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAO,QAAOxB,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEb,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Bc,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVyB,KAAM,cAAavB,MAAMC,MAAMC,EAAG;AAAA,IAClCsB,MAAO,cAAaxB,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYyB,KAAK;AAAA,IAAKO,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAErB,iBAAiBV,MAAMM,OAAO0B;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBZ,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,IAC5C4B,YAAYnC,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,MAAMC,MAAMa;AAAAA,IAC1BsB,aAAapC,MAAMC,MAAMC;AAAAA,IACzBmC,YAAY;AAAA,IACZvC,UAAU;AAAA,IACV0B,MAAM;AAAA,IACNL,OAAO;AAAA,EACT;AAAA;AAAA,EAEAmB,uBAAuB;AAAA,IACrBH,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYnC,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAqC,0BAA0B;AAAA,IACxBzC,UAAU;AAAA,IACV0C,QAAS,aAAYxC,MAAMC,MAAMa,EAAG;AAAA,IACpCgB,OAAQ,QAAO9B,MAAMC,MAAMC,EAAG;AAAA,EAChC;AAAA;AAAA,EAEAuC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBhC,iBAAiBV,MAAMM,OAAO0B;AAAAA,IAC9BW,SAAS;AAAA,EACX;AACF,CAAC;"}