@hitachivantara/uikit-react-core 5.41.0 → 5.42.0

package/dist/esm/MultiButton/MultiButton.mjs

@@ -0,0 +1,48 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import React__default, { cloneElement } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./MultiButton.styles.mjs";
+import { staticClasses } from "./MultiButton.styles.mjs";
+const HvMultiButton = (props) => {
+  const {
+    className,
+    children,
+    classes: classesProp,
+    disabled = false,
+    vertical = false,
+    variant = "secondarySubtle",
+    ...others
+  } = useDefaultProps("HvMultiButton", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.vertical]: vertical
+        },
+        className
+      ),
+      ...others,
+      children: React__default.Children.map(children, (child) => {
+        if (React__default.isValidElement(child)) {
+          const childIsSelected = !!child.props.selected;
+          return cloneElement(child, {
+            variant,
+            disabled: disabled || child.props.disabled,
+            className: cx(child.props.className, classes.button, {
+              [classes.selected]: childIsSelected
+            }),
+            "aria-pressed": childIsSelected
+          });
+        }
+      })
+    }
+  );
+};
+export {
+  HvMultiButton,
+  staticClasses as multiButtonClasses
+};
+//# sourceMappingURL=MultiButton.mjs.map

package/dist/esm/MultiButton/MultiButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiButton.mjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAuBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,UAAU;AACnC,YAAAA,eAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAAO,aAAa,OAA6B;AAAA,YAC/C;AAAA,YACA,UAAU,YAAY,MAAM,MAAM;AAAA,YAClC,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,cACnD,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,gBAAgB;AAAA,UAAA,CACjB;AAAA,QACH;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/MultiButton/MultiButton.styles.mjs

@@ -0,0 +1,167 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvMultiButton", {
+  root: {
+    display: "flex",
+    height: 32,
+    alignItems: "center",
+    transition: "none",
+    background: theme.colors.atmo2,
+    position: "relative",
+    zIndex: 0,
+    // prevent the focus ring to be hidden by sibling hover background
+    "&>.HvIsFocusVisible": {
+      zIndex: 5
+    },
+    "& button$button": {
+      height: 32,
+      width: "100%",
+      minWidth: 32,
+      maxWidth: 200,
+      padding: 0,
+      transition: "none",
+      flex: "1 0 0px",
+      borderTop: `solid 1px ${theme.colors.atmo4}`,
+      borderBottom: `solid 1px ${theme.colors.atmo4}`,
+      borderLeft: "solid 1px transparent",
+      borderRight: "solid 1px transparent",
+      borderRadius: 0,
+      ...theme.typography.body,
+      "&:active": {
+        backgroundColor: `${theme.colors.atmo3}`
+      },
+      "&:disabled": {
+        color: theme.colors.secondary_60,
+        borderTop: `solid 1px ${theme.colors.atmo4}`,
+        borderBottom: `solid 1px ${theme.colors.atmo4}`,
+        "&:hover": {
+          borderTop: `solid 1px ${theme.colors.atmo4}`,
+          borderBottom: `solid 1px ${theme.colors.atmo4}`,
+          borderLeft: "solid 1px transparent",
+          borderRight: "solid 1px transparent"
+        }
+      },
+      "&:first-of-type": {
+        borderLeft: `solid 1px ${theme.colors.atmo4}`,
+        borderTopLeftRadius: theme.radii.base,
+        borderBottomLeftRadius: theme.radii.base
+      },
+      "&:last-of-type": {
+        borderRight: `solid 1px ${theme.colors.atmo4}`,
+        borderTopRightRadius: theme.radii.base,
+        borderBottomRightRadius: theme.radii.base,
+        "&:disabled:hover": {
+          borderRight: `solid 1px ${theme.colors.atmo4} !important`
+        }
+      },
+      "&:not(:first-of-type)": {
+        marginLeft: "-1px"
+      },
+      "&$selected": {
+        "&:hover": {
+          "&:not(:disabled)": {
+            border: `solid 1px ${theme.colors.secondary}`
+          },
+          "&:disabled": {
+            border: `solid 1px ${theme.colors.atmo4}`
+          }
+        },
+        "&:disabled": {
+          zIndex: 1,
+          color: theme.colors.secondary_60,
+          background: theme.colors.atmo1,
+          border: `solid 1px ${theme.colors.atmo4}`
+        }
+      }
+    },
+    "& button$button$selected": {
+      background: theme.colors.atmo1,
+      height: 34,
+      ...theme.typography.label,
+      borderRadius: theme.radii.base,
+      border: `solid 1px ${theme.colors.secondary}`,
+      zIndex: 2,
+      "&:hover": {
+        background: theme.colors.atmo3
+      },
+      "&:first-of-type, &:last-of-type": {
+        border: `solid 1px ${theme.colors.secondary}`
+      },
+      // prevent the focus ring to be hidden by sibling hover background
+      // even when selected
+      "&.HvIsFocusVisible": {
+        zIndex: 5
+      }
+    }
+  },
+  button: {},
+  selected: {},
+  // vertical button display Styling
+  vertical: {
+    flexDirection: "column",
+    height: "auto",
+    btnSecondary: {
+      flex: "1 1 20px"
+    },
+    "& button$button": {
+      width: "100%",
+      borderLeft: `solid 1px ${theme.colors.atmo4}`,
+      borderRight: `solid 1px ${theme.colors.atmo4}`,
+      borderTop: "solid 1px transparent",
+      borderBottom: "solid 1px transparent",
+      "&:disabled": {
+        color: theme.colors.secondary_60,
+        borderLeft: `solid 1px ${theme.colors.atmo4}`,
+        borderRight: `solid 1px ${theme.colors.atmo4}`,
+        borderTop: "solid 1px transparent",
+        borderBottom: "solid 1px transparent",
+        "&:hover": {
+          borderLeft: `solid 1px ${theme.colors.atmo4}`,
+          borderRight: `solid 1px ${theme.colors.atmo4}`,
+          borderTop: "solid 1px transparent",
+          borderBottom: "solid 1px transparent"
+        }
+      },
+      "&:first-of-type": {
+        borderTop: `solid 1px ${theme.colors.atmo4}`,
+        borderTopLeftRadius: theme.radii.base,
+        borderTopRightRadius: theme.radii.base
+      },
+      "&:last-of-type": {
+        borderBottom: `solid 1px ${theme.colors.atmo4}`,
+        borderBottomLeftRadius: theme.radii.base,
+        borderBottomRightRadius: theme.radii.base,
+        "&:disabled:hover": {
+          borderBottom: `solid 1px ${theme.colors.atmo4} !important`
+        }
+      },
+      "&:not(:first-of-type)": {
+        marginLeft: 0,
+        marginTop: -1
+      },
+      "&$selected": {
+        height: 32,
+        width: `calc(100% + 2px) !important`,
+        background: theme.colors.atmo1,
+        ...theme.typography.label,
+        borderRadius: theme.radii.base,
+        border: `solid 1px ${theme.colors.secondary}`,
+        zIndex: 2,
+        "&:hover, &:focus": {
+          background: theme.colors.atmo3
+        },
+        "&:disabled": {
+          zIndex: 1,
+          color: theme.colors.secondary_60,
+          background: theme.colors.atmo1,
+          border: `solid 1px ${theme.colors.atmo4}`
+        }
+      }
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=MultiButton.styles.mjs.map

package/dist/esm/MultiButton/MultiButton.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiButton.styles.mjs","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      height: 32,\n      width: \"100%\",\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\n      ...theme.typography.label,\n      borderRadius: theme.radii.base,\n      border: `solid 1px ${theme.colors.secondary}`,\n      zIndex: 2,\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n\n      // prevent the focus ring to be hidden by sibling hover background\n      // even when selected\n      \"&.HvIsFocusVisible\": {\n        zIndex: 5,\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/OverflowTooltip/OverflowTooltip.mjs

@@ -0,0 +1,89 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./OverflowTooltip.styles.mjs";
+import { staticClasses } from "./OverflowTooltip.styles.mjs";
+import { HvTooltip } from "../Tooltip/Tooltip.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+const isParagraph = (children = "") => /\s/.test(children);
+const HvOverflowTooltip = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    data,
+    open,
+    paragraphOverflow,
+    placement = "top-start",
+    tooltipsProps
+  } = useDefaultProps("HvOverflowTooltip", props);
+  const { classes, cx } = useClasses(classesProp);
+  const {
+    height = 0,
+    width = 0,
+    ref
+  } = useResizeDetector({
+    refreshMode: "debounce",
+    refreshOptions: {
+      trailing: true
+    },
+    handleHeight: false
+  });
+  const isParag = useMemo(
+    () => paragraphOverflow && isParagraph(data?.toString()),
+    [data, paragraphOverflow]
+  );
+  const isOverflowing = useMemo(() => {
+    if (isParag) {
+      const scrollHeight = ref.current?.scrollHeight || 0;
+      return scrollHeight - height >= 1;
+    }
+    const scrollWidth = ref.current?.scrollWidth || 0;
+    return scrollWidth - width >= 1;
+  }, [height, isParag, ref, width]);
+  const content = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          {
+            [classes.tooltipAnchor]: !isParag,
+            [classes.tooltipAnchorParagraph]: isParag
+          },
+          className
+        ),
+        children: data
+      }
+    ),
+    [
+      className,
+      classes.tooltipAnchor,
+      classes.tooltipAnchorParagraph,
+      cx,
+      data,
+      isParag,
+      ref
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    HvTooltip,
+    {
+      id,
+      disableHoverListener: !isOverflowing,
+      open,
+      placement,
+      title: /* @__PURE__ */ jsx(HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      "aria-label": null,
+      "aria-labelledby": null,
+      ...tooltipsProps,
+      children: content
+    }
+  );
+};
+export {
+  HvOverflowTooltip,
+  staticClasses as overflowTooltipClasses
+};
+//# sourceMappingURL=OverflowTooltip.mjs.map

package/dist/esm/OverflowTooltip/OverflowTooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTooltip.mjs","sources":["../../../src/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true`, the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    height = 0,\n    width = 0,\n    ref,\n  } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = useMemo(() => {\n    if (isParag) {\n      const scrollHeight = ref.current?.scrollHeight || 0;\n\n      return scrollHeight - height >= 1;\n    }\n\n    const scrollWidth = ref.current?.scrollWidth || 0;\n\n    return scrollWidth - width >= 1;\n  }, [height, isParag, ref, width]);\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,cAAc,CAAC,WAAW,OAAO,KAAK,KAAK,QAAQ;AAK5C,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EAAA,IACE,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,MACE,kBAAkB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,QAAM,UAAU;AAAA,IACd,MAAM,qBAAqB,YAAY,MAAM,UAAU;AAAA,IACvD,CAAC,MAAM,iBAAiB;AAAA,EAAA;AAIpB,QAAA,gBAAgB,QAAQ,MAAM;AAClC,QAAI,SAAS;AACL,YAAA,eAAe,IAAI,SAAS,gBAAgB;AAElD,aAAO,eAAe,UAAU;AAAA,IAClC;AAEM,UAAA,cAAc,IAAI,SAAS,eAAe;AAEhD,WAAO,cAAc,SAAS;AAAA,KAC7B,CAAC,QAAQ,SAAS,KAAK,KAAK,CAAC;AAEhC,QAAM,UAAU;AAAA,IACd,MACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,YACE,CAAC,QAAQ,aAAa,GAAG,CAAC;AAAA,YAC1B,CAAC,QAAQ,sBAAsB,GAAG;AAAA,UACpC;AAAA,UACA;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAAC;AAAA,MACvB;AAAA,MACA;AAAA,MACA,2BACG,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/OverflowTooltip/OverflowTooltip.styles.mjs

@@ -0,0 +1,23 @@
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses(
+  "HvOverflowTooltip",
+  {
+    tooltipData: {},
+    tooltipAnchor: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    tooltipAnchorParagraph: {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=OverflowTooltip.styles.mjs.map

package/dist/esm/OverflowTooltip/OverflowTooltip.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTooltip.styles.mjs","sources":["../../../src/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvOverflowTooltip\",\n  {\n    tooltipData: {},\n    tooltipAnchor: {\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tooltipAnchorParagraph: {\n      overflow: \"hidden\",\n      display: \"-webkit-box\",\n      WebkitLineClamp: 3,\n      WebkitBoxOrient: \"vertical\",\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa,CAAC;AAAA,IACd,eAAe;AAAA,MACb,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;"}

package/dist/esm/Pagination/Pagination.mjs

@@ -0,0 +1,226 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import Hidden from "@mui/material/Hidden";
+import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { setId } from "../utils/setId.mjs";
+import { isKey } from "../utils/keyboardUtils.mjs";
+import { IconButton } from "../utils/IconButton.mjs";
+import { useLabels } from "../hooks/useLabels.mjs";
+import HvSelect, { Option } from "./Select.mjs";
+import { useClasses } from "./Pagination.styles.mjs";
+import { staticClasses } from "./Pagination.styles.mjs";
+import { usePageInput, setColor, getSafePage } from "./utils.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+import { HvInput } from "../Input/Input.mjs";
+const DEFAULT_LABELS = {
+  pageSizePrev: "Show",
+  pageSizeEntryName: "rows",
+  pageSizeSelectorDescription: "Select how many to display",
+  pagesSeparator: "/",
+  paginationFirstPageTitle: "First page",
+  paginationPreviousPageTitle: "Previous page",
+  paginationNextPageTitle: "Next page",
+  paginationLastPageTitle: "Last page",
+  paginationInputLabel: "Current page",
+  firstPage: "First Page",
+  previousPage: "Previous Page",
+  nextPage: "Next Page",
+  lastPage: "Last Page"
+};
+const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
+const HvPagination = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    pages = 1,
+    page = 0,
+    showPageSizeOptions = true,
+    pageSizeOptions = defaultPageSizeOptions,
+    pageSize = defaultPageSizeOptions[1],
+    showPageJump = true,
+    canPrevious = false,
+    canNext = false,
+    onPageChange,
+    onPageSizeChange,
+    labels: labelsProp,
+    showPageProps,
+    navigationProps,
+    currentPageInputProps,
+    ...others
+  } = useDefaultProps("HvPagination", props);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const [pageInput, handleInputChange] = usePageInput(page);
+  const { classes, cx } = useClasses(classesProp);
+  const changePage = useCallback(
+    (newPage) => {
+      const safePage = getSafePage(newPage, page, pages);
+      onPageChange?.(safePage);
+      handleInputChange(null, safePage + 1);
+    },
+    [page, pages, onPageChange, handleInputChange]
+  );
+  useEffect(() => {
+    if (page >= pages && pages > 0) {
+      changePage(page);
+    }
+  }, [changePage, page, pages]);
+  useEffect(() => {
+    if (pageInput !== page + 1) {
+      handleInputChange(null, page + 1);
+    }
+  }, [handleInputChange, page]);
+  const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      id: setId(id, "currentPage"),
+      labels,
+      inputProps: {
+        "aria-label": labels?.paginationInputLabel,
+        // We really want the native number input
+        type: "number"
+      },
+      classes: {
+        root: classes?.pageSizeInputContainer,
+        input: classes?.pageSizeInput,
+        inputRoot: classes?.pageSizeInputRoot
+      },
+      onChange: (event, value) => handleInputChange(event, Number(value)),
+      value: String(pageInput),
+      onBlur: (evt, value) => changePage(Number(value) - 1),
+      onKeyDown: (evt, value) => isKey(evt, "Enter") && changePage(Number(value) - 1),
+      disabled: pageSize === 0,
+      disableClear: true,
+      ...currentPageInputProps
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          component: "span",
+          className: classes?.pageSizeTextContainer,
+          children: labels?.pageSizePrev
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        HvSelect,
+        {
+          id: setId(id, "pageSize"),
+          disabled: pageSize === 0,
+          className: classes.pageSizeOptionsSelect,
+          "aria-label": labels?.pageSizeSelectorDescription,
+          onChange: (_, val) => onPageSizeChange?.(val),
+          value: pageSize,
+          classes: { header: classes.pageSizeHeader },
+          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
+        }
+      ),
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          component: "span",
+          className: classes.pageSizeTextContainer,
+          children: labels?.pageSizeEntryName
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "firstPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(0),
+          title: labels?.firstPage || labels?.paginationFirstPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Start,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "previousPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(page - 1),
+          title: labels?.previousPage || labels?.paginationPreviousPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Backwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            component: "span",
+            id: setId(id, "totalPages"),
+            className: classes.totalPagesTextContainer,
+            children: pages
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "nextPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(page + 1),
+          title: labels?.nextPage || labels?.paginationNextPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Forwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "lastPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(pages - 1),
+          title: labels?.lastPage || labels?.paginationLastPageTitle,
+          children: /* @__PURE__ */ jsx(
+            End,
+            {
+              className: classes.icon,
+              color: setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  HvPagination,
+  staticClasses as paginationClasses
+};
+//# sourceMappingURL=Pagination.mjs.map

package/dist/esm/Pagination/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.mjs","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport Hidden from \"@mui/material/Hidden\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTypography } from \"../Typography\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { IconButton } from \"../utils/IconButton\";\nimport { useLabels } from \"../hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Label of the first page button */\n  firstPage?: string;\n  /** Label of the previous page button */\n  previousPage?: string;\n  /** Label of the next page button */\n  nextPage?: string;\n  /** Label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS: HvPaginationLabels = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{ header: classes.pageSizeHeader }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <IconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <IconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4FA,MAAM,iBAAqC;AAAA,EACzC,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,yBAAyB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAMzC,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,WAAW,uBAAuB,CAAC;AAAA,IACnC,eAAe;AAAA,IACf,cAAc;AAAA,IACd,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEnC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,CAAC,WAAW,iBAAiB,IAAI,aAAa,IAAI;AACxD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoB;AACnB,YAAM,WAAmB,YAAY,SAAS,MAAM,KAAK;AAEzD,qBAAe,QAAQ;AACL,wBAAA,MAAM,WAAW,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,MAAM,OAAO,cAAc,iBAAiB;AAAA,EAAA;AAG/C,YAAU,MAAM;AACV,QAAA,QAAQ,SAAS,QAAQ,GAAG;AAC9B,iBAAW,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAAC,YAAY,MAAM,KAAK,CAAC;AAE5B,YAAU,MAAM;AACV,QAAA,cAAc,OAAO,GAAG;AACR,wBAAA,MAAM,OAAO,CAAC;AAAA,IAClC;AAAA,EAAA,GASC,CAAC,mBAAmB,IAAI,CAAC;AAE5B,QAAM,iBAAiB,MACrB,oBAAC,OAAI,EAAA,WAAW,QAAQ,UACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,aAAa;AAAA,MAC3B;AAAA,MACA,YAAY;AAAA,QACV,cAAc,QAAQ;AAAA;AAAA,QAEtB,MAAM;AAAA,MACR;AAAA,MACA,SAAS;AAAA,QACP,MAAM,SAAS;AAAA,QACf,OAAO,SAAS;AAAA,QAChB,WAAW,SAAS;AAAA,MACtB;AAAA,MACA,UAAU,CAAC,OAAO,UAAU,kBAAkB,OAAO,OAAO,KAAK,CAAC;AAAA,MAClE,OAAO,OAAO,SAAS;AAAA,MACvB,QAAQ,CAAC,KAAK,UAAU,WAAW,OAAO,KAAK,IAAI,CAAC;AAAA,MACpD,WAAW,CAAC,KAAK,UACf,MAAM,KAAK,OAAO,KAAK,WAAW,OAAO,KAAK,IAAI,CAAC;AAAA,MAErD,UAAU,aAAa;AAAA,MACvB,cAAY;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,QAAQ,iBAAkB,GAAG,eAC1C,iCAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAO,QAAM,MACZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,SAAS;AAAA,UAEnB,UAAQ,QAAA;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,UAAU;AAAA,UACxB,UAAU,aAAa;AAAA,UACvB,WAAW,QAAQ;AAAA,UACnB,cAAY,QAAQ;AAAA,UACpB,UAAU,CAAC,GAAQ,QAAgB,mBAAmB,GAAG;AAAA,UACzD,OAAO;AAAA,UACP,SAAS,EAAE,QAAQ,QAAQ,eAAe;AAAA,UAEzC,UAAA,gBAAgB,IAAI,CAAC,WACpB,oBAAC,UAAoB,OAAO,QACzB,UADU,OAAA,GAAA,MAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,MACA,oBAAC,QAAO,EAAA,QAAM,MACZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UAElB,UAAQ,QAAA;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,EAAA,CACF,EAEJ,CAAA;AAAA,yBACC,OAAI,EAAA,WAAW,QAAQ,eAAgB,GAAG,iBACzC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,UAChC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,CAAC;AAAA,UAC3B,OAAO,QAAQ,aAAa,QAAQ;AAAA,UAEpC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,QAAQ;AAAA,cACnB,OAAO,SAAS,CAAC,WAAW;AAAA,cAC5B,UAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,qBAAqB;AAAA,UACnC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,gBAAgB,QAAQ;AAAA,UAEvC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,QAAQ;AAAA,cACnB,OAAO,SAAS,CAAC,WAAW;AAAA,cAC5B,UAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF;AAAA,MACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACrB,UAAA;AAAA,QACC,eAAA,eAAA,IAEA,oBAAC,cAAa,EAAA,SAAQ,YAAW,WAAU,QAAQ,UAAA,GACjD,OAAO,CACT,GAAG,CAAA;AAAA,4BAEJ,cAAa,EAAA,WAAU,QAAQ,UAAG,GAAA,QAAQ,cAAc,KAAI;AAAA,QAC7D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,MAAM,IAAI,YAAY;AAAA,YAC1B,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,QAAQ;AAAA,cACnB,OAAO,SAAS,CAAC,OAAO;AAAA,cACxB,UAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,QAAQ,CAAC;AAAA,UACnC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO,SAAS,CAAC,OAAO;AAAA,cACxB,UAAS;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}