@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/toggle/Toggle.js

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toggle
+ */
+import "./Toggle.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useRefs } from "../utils/hooks/useRefs";
+/** Toggle display types
+ * @public
+ * @deprecated
+ */
+export var ToggleButtonType;
+(function (ToggleButtonType) {
+    /** Primary (green) background */
+    ToggleButtonType[ToggleButtonType["Primary"] = 0] = "Primary";
+    /** Blue background */
+    ToggleButtonType[ToggleButtonType["Blue"] = 1] = "Blue";
+})(ToggleButtonType || (ToggleButtonType = {}));
+const ForwardRefToggle = React.forwardRef(// eslint-disable-line deprecation/deprecation
+function ForwardRefToggle(props, ref) {
+    const inputElement = React.useRef(null);
+    const refs = useRefs(inputElement, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    const padding = 2;
+    const defaultHeight = props.large ? 32 : 21;
+    const [height, setHeight] = React.useState(defaultHeight);
+    const [width, setWidth] = React.useState(defaultHeight * 2);
+    const [checked, setChecked] = React.useState(props.isOn ? true : false);
+    const [toggling, setToggling] = React.useState(false);
+    React.useEffect(() => {
+        if (props.setFocus && inputElement.current)
+            inputElement.current.focus();
+    }, [props]);
+    React.useEffect(() => {
+        setChecked(props.isOn ? true : false);
+    }, [props.isOn]);
+    const handleChange = React.useCallback(() => {
+        const newChecked = !checked;
+        setToggling(true);
+        setChecked(newChecked);
+        // istanbul ignore else
+        if (props.onChange)
+            props.onChange(newChecked);
+        setTimeout(() => {
+            // istanbul ignore else
+            if (inputElement.current)
+                setToggling(false);
+        }, 250);
+    }, [props, checked]);
+    const handleBlur = React.useCallback((event) => {
+        // istanbul ignore else
+        if (props.onBlur)
+            props.onBlur(event);
+    }, [props]);
+    const handleCheckboxBlur = React.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const setHeightFromRef = React.useCallback((el) => {
+        if (el !== null) {
+            // istanbul ignore next
+            if (el.clientHeight > 0 && el.clientWidth > 0) {
+                setHeight(el.clientHeight);
+                setWidth(el.clientWidth);
+            }
+        }
+    }, []);
+    const getOffset = () => {
+        return (checked) ? width - height : 0;
+    };
+    /** Default props */
+    const rounded = props.rounded !== undefined ? props.rounded : true;
+    const showCheckmark = props.showCheckmark !== undefined ? props.showCheckmark : false;
+    const buttonType = props.buttonType !== undefined ? props.buttonType : ToggleButtonType.Blue; // eslint-disable-line deprecation/deprecation
+    const halfHeight = height / 2;
+    const checkmarkClassName = classnames("core-toggle-checkmark", "icon", "icon-checkmark", showCheckmark && "core-visible", toggling && "core-toggling");
+    const toggleStyle = { borderRadius: rounded ? halfHeight : 3, fontSize: halfHeight, ...props.style };
+    const toggleClassName = classnames("core-toggle", buttonType === ToggleButtonType.Primary && "core-toggle-primary", // eslint-disable-line deprecation/deprecation
+    props.large && "core-toggle-large", rounded && "core-toggle-rounded", props.disabled && "uicore-disabled", props.className);
+    const toggleHandleStyle = {
+        width: height - (padding * 2),
+        transform: `translateX(${getOffset()}px)`,
+        top: padding,
+        bottom: padding,
+        left: padding,
+    };
+    const handleClassName = classnames("core-toggle-handle", toggling && "core-toggling");
+    return (React.createElement("label", { ref: setHeightFromRef, style: toggleStyle, className: toggleClassName, onBlur: handleBlur },
+        React.createElement("input", { type: "checkbox", ref: refs, className: "core-toggle-input", checked: checked, disabled: props.disabled, onChange: handleChange, onBlur: handleCheckboxBlur, title: props.title }),
+        React.createElement("span", { className: "core-toggle-background" }),
+        React.createElement("span", { className: checkmarkClassName }),
+        React.createElement("span", { className: handleClassName, style: toggleHandleStyle })));
+});
+/**
+ * Toggle React component to show an "on" or "off" state
+ * @public
+ * @deprecated Use ToggleSwitch in itwinui-react instead
+ */
+export const Toggle = ForwardRefToggle; // eslint-disable-line deprecation/deprecation
+//# sourceMappingURL=Toggle.js.map

package/lib/esm/core-react/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/core-react/toggle/Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toggle\n */\n\nimport \"./Toggle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { useRefs } from \"../utils/hooks/useRefs\";\n\n/** Toggle display types\n * @public\n * @deprecated\n */\nexport enum ToggleButtonType {\n  /** Primary (green) background */\n  Primary,\n  /** Blue background */\n  Blue,\n}\n\n/** Properties for [[Toggle]] component\n * @public\n * @deprecated Use ToggleSwitchProps in itwinui-react instead\n */\nexport interface ToggleProps extends CommonProps {\n  /** Indicates whether the Toggle is disabled (default is false) */\n  disabled?: boolean;\n  /** Indicates whether the Toggle is \"on\" or \"off\" (default is false) */\n  isOn?: boolean;\n  /** Show the toggle rounded or square (rounded is default) */\n  rounded?: boolean;\n  /** Show a check mark icon when the toggle is \"on\" (false is default) */\n  showCheckmark?: boolean;\n  /** Button type, either Primary or Blue (Blue is default).\n   * @deprecated */\n  buttonType?: ToggleButtonType;  // eslint-disable-line deprecation/deprecation\n  /** Function called when the toggle state is changed */\n  onChange?: (checked: boolean) => any;\n  /** Function called when the toggle loses focus  */\n  onBlur?: (event: React.FocusEvent) => any;\n  /** Use larger size (default is false) */\n  large?: boolean;\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Tooltip text */\n  title?: string;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\nconst ForwardRefToggle = React.forwardRef<HTMLInputElement, ToggleProps>(   // eslint-disable-line deprecation/deprecation\n  function ForwardRefToggle(props, ref) {\n    const inputElement = React.useRef<HTMLInputElement>(null);\n    const refs = useRefs(inputElement, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n    const padding = 2;\n    const defaultHeight = props.large ? 32 : 21;\n    const [height, setHeight] = React.useState(defaultHeight);\n    const [width, setWidth] = React.useState(defaultHeight * 2);\n    const [checked, setChecked] = React.useState(props.isOn ? true : false);\n    const [toggling, setToggling] = React.useState(false);\n\n    React.useEffect(() => {\n      if (props.setFocus && inputElement.current)\n        inputElement.current.focus();\n    }, [props]);\n\n    React.useEffect(() => {\n      setChecked(props.isOn ? true : false);\n    }, [props.isOn]);\n\n    const handleChange = React.useCallback(() => {\n      const newChecked = !checked;\n\n      setToggling(true);\n      setChecked(newChecked);\n\n      // istanbul ignore else\n      if (props.onChange)\n        props.onChange(newChecked);\n\n      setTimeout(() => {\n        // istanbul ignore else\n        if (inputElement.current)\n          setToggling(false);\n      }, 250);\n    }, [props, checked]);\n\n    const handleBlur = React.useCallback((event: React.FocusEvent) => {\n      // istanbul ignore else\n      if (props.onBlur)\n        props.onBlur(event);\n    }, [props]);\n\n    const handleCheckboxBlur = React.useCallback((event: React.FocusEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const setHeightFromRef = React.useCallback((el: HTMLLabelElement | null) => {\n      if (el !== null) {\n        // istanbul ignore next\n        if (el.clientHeight > 0 && el.clientWidth > 0) {\n          setHeight(el.clientHeight);\n          setWidth(el.clientWidth);\n        }\n      }\n    }, []);\n\n    const getOffset = (): number => {\n      return (checked) ? width - height : 0;\n    };\n\n    /** Default props */\n    const rounded = props.rounded !== undefined ? props.rounded : true;\n    const showCheckmark = props.showCheckmark !== undefined ? props.showCheckmark : false;\n    const buttonType = props.buttonType !== undefined ? props.buttonType : ToggleButtonType.Blue; // eslint-disable-line deprecation/deprecation\n\n    const halfHeight = height / 2;\n    const checkmarkClassName = classnames(\n      \"core-toggle-checkmark\",\n      \"icon\", \"icon-checkmark\",\n      showCheckmark && \"core-visible\",\n      toggling && \"core-toggling\",\n    );\n    const toggleStyle: React.CSSProperties = { borderRadius: rounded ? halfHeight : 3, fontSize: halfHeight, ...props.style };\n    const toggleClassName = classnames(\n      \"core-toggle\",\n      buttonType === ToggleButtonType.Primary && \"core-toggle-primary\", // eslint-disable-line deprecation/deprecation\n      props.large && \"core-toggle-large\",\n      rounded && \"core-toggle-rounded\",\n      props.disabled && \"uicore-disabled\",\n      props.className);\n    const toggleHandleStyle: React.CSSProperties = {\n      width: height - (padding * 2),\n      transform: `translateX(${getOffset()}px)`,\n      top: padding,\n      bottom: padding,\n      left: padding,\n    };\n    const handleClassName = classnames(\n      \"core-toggle-handle\",\n      toggling && \"core-toggling\",\n    );\n\n    return (\n      <label ref={setHeightFromRef} style={toggleStyle} className={toggleClassName} onBlur={handleBlur}>\n        <input type=\"checkbox\" ref={refs} className=\"core-toggle-input\"\n          checked={checked} disabled={props.disabled}\n          onChange={handleChange} onBlur={handleCheckboxBlur}\n          title={props.title} />\n        <span className=\"core-toggle-background\" />\n        <span className={checkmarkClassName} />\n        <span className={handleClassName} style={toggleHandleStyle} />\n      </label>\n    );\n  }\n);\n\n/**\n * Toggle React component to show an \"on\" or \"off\" state\n * @public\n * @deprecated Use ToggleSwitch in itwinui-react instead\n */\nexport const Toggle: (props: ToggleProps) => JSX.Element | null = ForwardRefToggle;   // eslint-disable-line deprecation/deprecation\n"]}

package/lib/esm/core-react/toggle/Toggle.scss

@@ -0,0 +1,135 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "../button/button";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$toggle-height-small: $iui-font-size * 1.5;
+$toggle-width-small:  $toggle-height-small * 2;
+$toggle-padding:      2;
+
+$toggle-height-large: 32px;
+$toggle-width-large:  $toggle-height-large * 2;
+
+$toggle-handle-small: $toggle-height-small - ($toggle-padding * 2);
+$toggle-handle-large: $toggle-height-large - ($toggle-padding * 2);
+
+.core-toggle {
+  width:  $toggle-width-small;
+  height: $toggle-height-small;
+  position: relative;
+  display: inline-block;
+  border-radius: 3px;
+  color: $uicore-white;
+  vertical-align: middle;
+  overflow: hidden;
+  font-size: $iui-font-size;
+  cursor: pointer;
+  outline:        none;
+  margin:         2px;
+  box-shadow:     $buic-inputs-boxshadow 0px 1px 1px inset;
+  transition:     all $iui-speed-fast ease-in-out;
+
+  &:active,
+  &:focus-within {
+    @include uicore-buttons-button-focused;
+  }
+}
+
+.core-toggle-large {
+  height:         $toggle-height-large;
+  width:          $toggle-width-large;
+
+  .core-toggle-handle {
+    min-width:    $toggle-handle-large;
+    min-height:   $toggle-handle-large;
+  }
+}
+
+.core-toggle-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.core-toggle-background {
+  position:       relative;
+  display:        block;
+  height:         inherit;
+  background:     $uicore-gray-6;
+  color:          $uicore-white;
+  border-radius:  inherit;
+  transition:     box-shadow $iui-speed-fast ease-in-out;
+}
+
+/* Blue (default) */
+.core-toggle-input:checked~.core-toggle-background {
+  background: $buic-accessory-primary;
+}
+
+/* Green (primary) */
+.core-toggle-primary> .core-toggle-input:checked~.core-toggle-background {
+  background: $buic-accessory-success;
+}
+
+.core-toggle-handle {
+  position: absolute;
+  background: $buic-accessory-hollow;
+  border-radius: 3px;
+  box-sizing:     border-box;
+  border:         1px solid $buic-accessory-hollow;
+  transition:     border-color $iui-speed-fast ease-in-out;
+
+  min-width:  $toggle-handle-small;
+  min-height: $toggle-handle-small;
+
+  &.core-toggling {
+    transition: transform 0.2s ease-out;
+  }
+}
+
+/* Disabled toggle */
+.core-toggle.uicore-disabled {
+  .core-toggle-input:checked~.core-toggle-background {
+    background: $buic-foreground-disabled;
+  }
+
+  opacity: $uicore-opacity-disabled;
+  cursor: not-allowed;
+}
+
+.core-toggle.core-toggle-rounded .core-toggle-handle {
+  border-radius: 50%;
+}
+
+.core-toggle-checkmark {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  opacity: 0;
+  transform: translateY(-50%);
+
+  &.core-toggling {
+    transition: left .2s ease-out;
+  }
+}
+
+.core-toggle-input:checked~.core-toggle-checkmark.core-visible {
+  opacity: 1;
+  color: $uicore-white;
+  font-size: inherit;
+  left: 15%;
+}
+
+.core-toggle-input {
+  &:focus, &:active {
+
+    ~.core-toggle-background {
+      box-shadow:     $uicore-button-focus-boxshadow;
+    }
+  }
+}

package/lib/esm/core-react/tooltip/Tooltip.d.ts

@@ -0,0 +1,34 @@
+/** @packageDocumentation
+ * @module Tooltip
+ */
+import "./Tooltip.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Available tooltip placements.
+ * @beta
+ * @deprecated Use Placement in itwinui-react instead
+ */
+export declare type TooltipPlacement = "bottom" | "left" | "right" | "top";
+/** Properties for the [[Tooltip]] component
+ * @beta
+ * @deprecated Use TooltipProps in itwinui-react instead
+ */
+export interface TooltipProps extends CommonProps {
+    /** Tooltip content. */
+    children?: React.ReactNode;
+    /** Target element of a tooltip. */
+    target?: HTMLElement;
+    /** Allows to control tooltip visibility state. */
+    visible?: boolean;
+    /** Preferred tooltip placement. Defaults to `top`. */
+    placement?: TooltipPlacement;
+}
+/** Component that displays tooltip for a specified target element.
+ * @beta
+ * @deprecated Use Tooltip in itwinui-react instead
+ */
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+/** @internal */
+export declare function placementToPosition(placement: TooltipPlacement | undefined): RelativePosition;
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/esm/core-react/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;;GAGG;AACH,oBAAY,gBAAgB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mCAAmC;IACnC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAgC1C;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,GAAG,SAAS,GAAG,gBAAgB,CAY7F"}

package/lib/esm/core-react/tooltip/Tooltip.js

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tooltip
+ */
+/* eslint-disable deprecation/deprecation */
+import "./Tooltip.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup } from "../popup/Popup";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Component that displays tooltip for a specified target element.
+ * @beta
+ * @deprecated Use Tooltip in itwinui-react instead
+ */
+export function Tooltip(props) {
+    const { visible, target, placement } = props;
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+        const mouseenter = () => {
+            setOpen(true);
+        };
+        const mouseleave = () => {
+            setOpen(false);
+        };
+        visible === undefined && target && target.addEventListener("mouseenter", mouseenter);
+        visible === undefined && target && target.addEventListener("mouseleave", mouseleave);
+        return () => {
+            visible === undefined && target && target.removeEventListener("mouseenter", mouseenter);
+            visible === undefined && target && target.removeEventListener("mouseleave", mouseleave);
+        };
+    }, [visible, target]);
+    const className = classnames("core-tooltip-tooltip", props.className);
+    return (React.createElement(Popup, { className: className, isOpen: props.visible === undefined ? open : props.visible, position: placementToPosition(placement), showShadow: false, target: target }, props.children));
+}
+/** @internal */
+export function placementToPosition(placement) {
+    switch (placement) {
+        case "bottom":
+            return RelativePosition.Bottom;
+        case "left":
+            return RelativePosition.Left;
+        case "right":
+            return RelativePosition.Right;
+        case undefined:
+        case "top":
+            return RelativePosition.Top;
+    }
+}
+//# sourceMappingURL=Tooltip.js.map

package/lib/esm/core-react/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/core-react/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,4CAA4C;AAE5C,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAuBzD;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC;QACF,OAAO,KAAK,SAAS,IAAI,MAAM,IAAI,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;QACrF,OAAO,KAAK,SAAS,IAAI,MAAM,IAAI,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;QACrF,OAAO,GAAG,EAAE;YACV,OAAO,KAAK,SAAS,IAAI,MAAM,IAAI,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YACxF,OAAO,KAAK,SAAS,IAAI,MAAM,IAAI,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;QAC1F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACtB,MAAM,SAAS,GAAG,UAAU,CAC1B,sBAAsB,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAC1D,QAAQ,EAAE,mBAAmB,CAAC,SAAS,CAAC,EACxC,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,QAAQ,CACT,CACT,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,mBAAmB,CAAC,SAAuC;IACzE,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,gBAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,MAAM;YACT,OAAO,gBAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,OAAO;YACV,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,gBAAgB,CAAC,GAAG,CAAC;KAC/B;AACH,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tooltip\n */\n\n/* eslint-disable deprecation/deprecation */\n\nimport \"./Tooltip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { Popup } from \"../popup/Popup\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Available tooltip placements.\n * @beta\n * @deprecated Use Placement in itwinui-react instead\n */\nexport type TooltipPlacement = \"bottom\" | \"left\" | \"right\" | \"top\";\n\n/** Properties for the [[Tooltip]] component\n * @beta\n * @deprecated Use TooltipProps in itwinui-react instead\n */\nexport interface TooltipProps extends CommonProps {\n  /** Tooltip content. */\n  children?: React.ReactNode;\n  /** Target element of a tooltip. */\n  target?: HTMLElement;\n  /** Allows to control tooltip visibility state. */\n  visible?: boolean;\n  /** Preferred tooltip placement. Defaults to `top`. */\n  placement?: TooltipPlacement;\n}\n\n/** Component that displays tooltip for a specified target element.\n * @beta\n * @deprecated Use Tooltip in itwinui-react instead\n */\nexport function Tooltip(props: TooltipProps) {\n  const { visible, target, placement } = props;\n  const [open, setOpen] = React.useState(false);\n  React.useEffect(() => {\n    const mouseenter = () => {\n      setOpen(true);\n    };\n    const mouseleave = () => {\n      setOpen(false);\n    };\n    visible === undefined && target && target.addEventListener(\"mouseenter\", mouseenter);\n    visible === undefined && target && target.addEventListener(\"mouseleave\", mouseleave);\n    return () => {\n      visible === undefined && target && target.removeEventListener(\"mouseenter\", mouseenter);\n      visible === undefined && target && target.removeEventListener(\"mouseleave\", mouseleave);\n    };\n  }, [visible, target]);\n  const className = classnames(\n    \"core-tooltip-tooltip\",\n    props.className,\n  );\n  return (\n    <Popup\n      className={className}\n      isOpen={props.visible === undefined ? open : props.visible}\n      position={placementToPosition(placement)}\n      showShadow={false}\n      target={target}\n    >\n      {props.children}\n    </Popup>\n  );\n}\n\n/** @internal */\nexport function placementToPosition(placement: TooltipPlacement | undefined): RelativePosition {\n  switch (placement) {\n    case \"bottom\":\n      return RelativePosition.Bottom;\n    case \"left\":\n      return RelativePosition.Left;\n    case \"right\":\n      return RelativePosition.Right;\n    case undefined:\n    case \"top\":\n      return RelativePosition.Top;\n  }\n}\n"]}

package/lib/esm/core-react/tooltip/Tooltip.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+@import "../z-index";
+
+.core-tooltip-tooltip {
+  animation-name: none !important;
+  max-width: 400px;
+  font-size: 14px;
+  background-color: $buic-background-tooltip;
+  text-align: center;
+  border: 1px solid $buic-foreground-disabled;
+  padding: 2px 6px;
+
+  @include uicore-z-index(tooltip);
+}

package/lib/esm/core-react/tree/Branch.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./Branch.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[TreeBranch]] React component
+ * @public
+ */
+export interface TreeBranchProps extends CommonProps {
+    /** Child nodes of the tree branch */
+    children?: React.ReactNode;
+}
+/** Presentation React component for a Tree branch
+ * @public
+ */
+export declare class TreeBranch extends React.PureComponent<TreeBranchProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Branch.d.ts.map

package/lib/esm/core-react/tree/Branch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Branch.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Branch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClD,MAAM;CAcvB"}

package/lib/esm/core-react/tree/Branch.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./Branch.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Presentation React component for a Tree branch
+ * @public
+ */
+export class TreeBranch extends React.PureComponent {
+    render() {
+        const className = classnames("core-tree-branch", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+//# sourceMappingURL=Branch.js.map

package/lib/esm/core-react/tree/Branch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Branch.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Branch.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAClD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAExB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./Branch.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[TreeBranch]] React component\n * @public\n */\nexport interface TreeBranchProps extends CommonProps {\n  /** Child nodes of the tree branch */\n  children?: React.ReactNode;\n}\n\n/** Presentation React component for a Tree branch\n * @public\n */\nexport class TreeBranch extends React.PureComponent<TreeBranchProps> {\n  public override render() {\n    const className = classnames(\n      \"core-tree-branch\",\n      this.props.className);\n\n    return (\n      <div\n        className={className}\n        style={this.props.style}\n      >\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/tree/Branch.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.core-tree-branch {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 0 20px;
+  width: fit-content;
+  min-width: 100%;
+}

package/lib/esm/core-react/tree/ExpansionToggle.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./ExpansionToggle.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[ExpansionToggle]] component
+ * @public
+ */
+export interface ExpansionToggleProps extends CommonProps {
+    isExpanded?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    ["data-testid"]?: string;
+}
+/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
+ * @public
+ */
+export declare class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=ExpansionToggle.d.ts.map

package/lib/esm/core-react/tree/ExpansionToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionToggle.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/ExpansionToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACxD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC;IAC5D,MAAM;CAsBvB"}

package/lib/esm/core-react/tree/ExpansionToggle.js

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./ExpansionToggle.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { UiCore } from "../UiCore";
+/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
+ * @public
+ */
+export class ExpansionToggle extends React.PureComponent {
+    render() {
+        const className = classnames("core-tree-expansionToggle", this.props.isExpanded && "is-expanded", this.props.className);
+        const label = UiCore.translate(this.props.isExpanded ? "tree.collapse" : "tree.expand");
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { onClick: this.props.onClick, className: className, style: this.props.style, "data-testid": this.props["data-testid"], role: "button", tabIndex: -1, "aria-label": label },
+            React.createElement("i", { className: "toggle icon icon-chevron-right" })));
+    }
+}
+//# sourceMappingURL=ExpansionToggle.js.map

package/lib/esm/core-react/tree/ExpansionToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionToggle.js","sourceRoot":"","sources":["../../../../src/core-react/tree/ExpansionToggle.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAWnC;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAC5D,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,2BAA2B,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxB,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAExF,OAAO;QACL,iEAAiE;QACjE,6BACE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBACV,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EACtC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,gBACA,KAAK;YAEjB,2BAAG,SAAS,EAAC,gCAAgC,GAAG,CAC5C,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./ExpansionToggle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { UiCore } from \"../UiCore\";\n\n/** Properties for the [[ExpansionToggle]] component\n * @public\n */\nexport interface ExpansionToggleProps extends CommonProps {\n  isExpanded?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n  [\"data-testid\"]?: string;\n}\n\n/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state\n * @public\n */\nexport class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {\n  public override render() {\n    const className = classnames(\n      \"core-tree-expansionToggle\",\n      this.props.isExpanded && \"is-expanded\",\n      this.props.className);\n    const label = UiCore.translate(this.props.isExpanded ? \"tree.collapse\" : \"tree.expand\");\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        onClick={this.props.onClick}\n        className={className}\n        style={this.props.style}\n        data-testid={this.props[\"data-testid\"]}\n        role=\"button\"\n        tabIndex={-1}\n        aria-label={label}\n      >\n        <i className=\"toggle icon icon-chevron-right\" />\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/tree/ExpansionToggle.scss

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors.scss";
+
+.core-tree-expansionToggle {
+  &:focus {
+    outline: none;
+  }
+
+  > .toggle {
+
+    display: block;
+    width: 24px;
+    height: 24px;
+    padding: 7px;
+    font-size: 12px;
+    box-sizing: border-box;
+    transform: rotate(0);
+    transition: transform 100ms ease;
+    color: $buic-foreground-body;
+  }
+
+  &.is-expanded > .toggle {
+    transform: rotate( 90deg );
+  }
+}

package/lib/esm/core-react/tree/Node.d.ts

@@ -0,0 +1,80 @@
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./Node.scss";
+import * as React from "react";
+import { CheckboxProps } from "@itwin/itwinui-react";
+import { CheckBoxState } from "../enums/CheckBoxState";
+import { CommonProps } from "../utils/Props";
+import { Omit } from "../utils/typeUtils";
+/** Props for node Checkbox renderer
+ * @public
+ */
+export declare type NodeCheckboxRenderProps = Omit<CheckboxProps, "onChange" | "onClick"> & {
+    onChange: (checked: boolean) => void;
+    onClick: (e: React.MouseEvent) => void;
+};
+/** Type for node Checkbox renderer
+ * @public
+ */
+export declare type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;
+/** Number of pixels the node gets offset per each hierarchy level
+ * @internal
+ */
+export declare const LEVEL_OFFSET = 20;
+/** Properties for Tree Node CheckBox
+ * @public
+ */
+export interface NodeCheckboxProps {
+    /** State of the checkbox */
+    state?: CheckBoxState;
+    /** Click event callback */
+    onClick?: (newState: CheckBoxState) => void;
+    /** Indicates whether checkbox is disabled */
+    isDisabled?: boolean;
+    /** Tooltip to be displayed when mouse is hovered over checkbox */
+    tooltip?: string;
+}
+/** Properties for the [[TreeNode]] React component
+ * @public
+ */
+export interface TreeNodeProps extends CommonProps {
+    label: React.ReactNode;
+    level: number;
+    icon?: React.ReactChild;
+    /** Properties for the checkbox.
+     * @public */
+    checkboxProps?: NodeCheckboxProps;
+    isLeaf?: boolean;
+    isLoading?: boolean;
+    isExpanded?: boolean;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isHoverDisabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
+    onMouseMove?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onMouseUp?: (e: React.MouseEvent) => void;
+    onClickExpansionToggle?: () => void;
+    children?: React.ReactNode;
+    /** Contains render overrides for different pieces of the node component. */
+    renderOverrides?: {
+        /** Callback to render a checkbox. Only called when checkbox is displayed. */
+        renderCheckbox?: NodeCheckboxRenderer;
+    };
+    ["data-testid"]?: string;
+}
+/** Presentation React component for a Tree node
+ * @public
+ */
+export declare class TreeNode extends React.Component<TreeNodeProps> {
+    constructor(props: TreeNodeProps);
+    render(): JSX.Element;
+    private createSubComponentTestId;
+    private _onCheckboxChange;
+    private _onCheckboxClick;
+    private _onClickExpansionToggle;
+    private _onClick;
+}
+//# sourceMappingURL=Node.d.ts.map

package/lib/esm/core-react/tree/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC9C,KAAK,EAAE,aAAa;IAIhB,MAAM;IA4EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAId;CACH"}