intelicoreact 1.5.41 → 1.6.0

package/dist/Atomic/UI/Hint/Hint.js

@@ -1,213 +1,256 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+/* eslint-disable react-web-api/no-leaked-event-listener */ /* eslint-disable react-dom/no-missing-button-type */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactDom = require("react-dom");
-var _reactFeather = require("react-feather");
-var _utils = require("../../../Functions/utils");
-var _CustomIcons = require("./../../../Molecular/CustomIcons");
-var _utils2 = require("./partials/_utils");
-var _Spinner = _interopRequireDefault(require("./../../Layout/Spinner/Spinner"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("@/Atomic/Layout/Spinner/Spinner"));
+const _utils = require("@/Functions/utils");
+const _CustomIcons = require("@/Molecular/CustomIcons");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
+const _utils1 = require("./partials/_utils");
 require("./Hint.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-let isContentHoveredOuter = false;
-const Hint = _ref => {
-  let {
-    hint,
-    side = "right",
-    className,
-    hintContainer = {},
-    label = "",
-    variant = "filled",
-    handleOpenType = "click",
-    onClickCallback,
-    onOpenChange = () => {},
-    key,
-    id,
-    children,
-    icon,
-    isAccessability = false,
-    testId = "hint",
-    isHoverableContent = false,
-    isLoading
-  } = _ref;
-  const hintRef = (0, _react.useRef)(null);
-  const timeoutRef = (0, _react.useRef)(null);
-  const [hintId] = (0, _react.useState)(key ?? id ?? Math.random().toString(16).slice(2));
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [isContentHovered, setIsContentHovered] = (0, _react.useState)(false);
-
-  //? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.
-  //? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.
-  const [handleScroll] = (0, _react.useState)(new _utils2.HandleScrollObj(setIsOpen));
-  //? По аналогии определяем handleClickOutside
-  const [handleClickOutside] = (0, _react.useState)(new _utils2.HandleClickOutsideObj(hintId, setIsOpen));
-  const isCallbackExist = typeof onClickCallback === "function";
-  const handle = {
-    onMouseEnter: () => {
-      if (handleOpenType === "hover") {
-        timeoutRef.current = setTimeout(() => {
-          setIsOpen(true);
-          !isOpen && onClickCallback();
-        }, 350);
-      }
-    },
-    onMouseLeave: () => {
-      if (!isHoverableContent && handleOpenType === "hover") {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          setIsOpen(false);
-        }, 1000);
-      } else if (isHoverableContent && handleOpenType === "hover") {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          if (!isContentHoveredOuter) {
-            setIsOpen(false);
-          }
-        }, 100);
-      }
-    },
-    onMouseLeaveHoverableContent: () => {
-      if (isHoverableContent && handleOpenType === "hover") {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-          setIsOpen(false);
-          setIsContentHovered(false);
-          isContentHoveredOuter = false;
-        }, 100);
-      }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
     }
-  };
-  const getHintMarkUp = className => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": "test-hint-text",
-      className: (0, _classnames.default)("hint__text", `hint__text_${side}`, `hint--${className}__text`),
-      onMouseEnter: () => {
-        isContentHoveredOuter = true;
-      },
-      onMouseLeave: handle.onMouseLeaveHoverableContent
-    }, isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-      size: "small"
-    }), hint, children);
-  };
-  const setHintContainerStyles = () => {
-    const hc = (0, _utils2.getHintContainer)(hintId);
-    if (!hc || !isOpen) return false;
-    const {
-      width,
-      top,
-      left
-    } = hintRef?.current.getBoundingClientRect() || {};
-    const {
-      addWidth,
-      addLeft,
-      addTop
-    } = hintContainer;
-    const windowInnerWidth = document.documentElement.clientWidth;
-    const windowInnerHeight = document.documentElement.clientHeight;
-    const sw = hc.getElementsByClassName("hint__text")[0];
-    const {
-      width: swWidth,
-      height: swHeight
-    } = sw?.getBoundingClientRect() || {};
-    hc.style.width = isOpen ? ((!Number.isNaN(+addWidth) ? +addWidth : 0) + width)?.toString().concat("px") : 0;
-    hc.style.left = isOpen ? ((!Number.isNaN(+addLeft) ? +addLeft : 0) + left)?.toString().concat("px") : 0;
-    hc.style.top = isOpen ? ((!Number.isNaN(+addTop) ? +addTop : 0) + top)?.toString().concat("px") : 0;
-    hc.style.maxHeight = isOpen ? swHeight?.toString().concat("px") : 0;
-
-    //? Базовое значение погрешности
-    //? В разных свитч-кейсах может использоваться по разному (вся или частично). Определял "на глазок"
-    const INACCURACY = 20;
-    switch (side) {
-      case 'top':
-      case 'centeredTop':
-        if (top - swHeight - INACCURACY / 2 < 0) {
-          sw.classList.remove(`hint__text_${side}`);
-          sw.classList.add(`hint__text_${side === 'top' ? 'bottom' : 'centeredBottom'}`);
-        }
-        break;
-      case 'bottom':
-      case 'centeredBottom':
-        if (top + swHeight + INACCURACY > windowInnerHeight) {
-          sw.classList.remove(`hint__text_${side}`);
-          sw.classList.add(`hint__text_${side === 'bottom' ? 'top' : 'centeredTop'}`);
-        }
-        break;
-      case 'left':
-        if (left - swWidth - INACCURACY / 2 < 0) {
-          sw.classList.remove(`hint__text_${side}`);
-          sw.classList.add('hint__text_right');
-        }
-        break;
-      case 'right':
-      default:
-        if (left + width + swWidth + INACCURACY / 2 > windowInnerWidth) {
-          sw.classList.remove(`hint__text_${side}`);
-          sw.classList.add('hint__text_left');
-        }
-        break;
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-  };
-  const renderHintContainer = className => {
-    const hc = (0, _utils2.getHintContainer)(hintId);
-    if (!hc) return null;
-    return /*#__PURE__*/(0, _reactDom.createPortal)(getHintMarkUp(className), hc);
-  };
-  (0, _react.useEffect)(() => {
-    (0, _utils2.initHintContainer)(hintId, hintContainer);
-    return () => {
-      clearTimeout(timeoutRef.current);
+    var newObj = {
+        __proto__: null
     };
-  }, []);
-  (0, _react.useEffect)(() => {
-    setHintContainerStyles();
-    onOpenChange?.(isOpen);
-    if (isOpen) {
-      document.addEventListener("scroll", handleScroll, true);
-      document.addEventListener("click", handleClickOutside, true);
-    } else {
-      document.removeEventListener("scroll", handleScroll, true);
-      document.removeEventListener("click", handleClickOutside, true);
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-    return () => {
-      clearTimeout(timeoutRef.current);
+    return newObj;
+}
+let isContentHoveredOuter = false;
+const DEFAULT_EMPTY_OBJ = {};
+function DEFAULT_VOID_FN() {}
+const Hint = ({ hint, side = 'right', className, hintContainer = DEFAULT_EMPTY_OBJ, label = '', variant = 'filled', handleOpenType = 'click', onClickCallback, onOpenChange = DEFAULT_VOID_FN, key, id, children, icon, isAccessability = false, testId = 'hint', isHoverableContent = false, isLoading, isCloseOnChildrenClick = false })=>{
+    var _label_replace;
+    const hintRef = (0, _react.useRef)(null);
+    const timeoutRef = (0, _react.useRef)(null);
+    var _ref;
+    const [hintId] = (0, _react.useState)((_ref = key !== null && key !== void 0 ? key : id) !== null && _ref !== void 0 ? _ref : Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    // ? Определяем handleScroll-стейт, чтобы никогда не менять ссылку тем самым гарантировать корректную работу removeEventListener.
+    // ? Инициализируем стейт вызовом конструктора HandleScrollObj, передаем setIsOpen для записи в объект.
+    const [handleScroll] = (0, _react.useState)(new _utils1.HandleScrollObj(setIsOpen));
+    // ? По аналогии определяем handleClickOutside
+    const [handleClickOutside] = (0, _react.useState)(new _utils1.HandleClickOutsideObj(hintId, setIsOpen));
+    const isCallbackExist = typeof onClickCallback === 'function';
+    const handle = {
+        onMouseEnter: ()=>{
+            if (handleOpenType === 'hover') {
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(true);
+                    !isOpen && (onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback());
+                }, 350);
+            }
+        },
+        onMouseLeave: ()=>{
+            if (!isHoverableContent && handleOpenType === 'hover') {
+                if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(false);
+                }, 1000);
+            } else if (isHoverableContent && handleOpenType === 'hover') {
+                if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    if (!isContentHoveredOuter) {
+                        setIsOpen(false);
+                    }
+                }, 100);
+            }
+        },
+        onMouseLeaveHoverableContent: ()=>{
+            if (isHoverableContent && handleOpenType === 'hover') {
+                if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(()=>{
+                    setIsOpen(false);
+                    isContentHoveredOuter = false;
+                }, 100);
+            }
+        },
+        onClick: isCloseOnChildrenClick ? ()=>setIsOpen(false) : ()=>{}
+    };
+    const getHintMarkUp = (className)=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "data-testid": "test-hint-text",
+            className: (0, _classnames.default)('hint__text', `hint__text_${side}`, `hint--${className}__text`),
+            onMouseEnter: ()=>{
+                isContentHoveredOuter = true;
+            },
+            onMouseLeave: handle.onMouseLeaveHoverableContent,
+            onClick: handle.onClick,
+            children: [
+                isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                    size: "small"
+                }),
+                hint,
+                children
+            ]
+        });
     };
-  }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: (0, _classnames.default)("hint", className),
-    ref: hintRef
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    tabIndex: isAccessability ? 0 : -1,
-    "data-testid": typeof label === "string" && label.length ? label.replace?.(/\s/g, "-") : testId,
-    "aria-label": isAccessability && label || "",
-    onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback() : setIsOpen(!isOpen)),
-    onMouseEnter: handle.onMouseEnter,
-    onMouseLeave: handle.onMouseLeave,
-    className: (0, _classnames.default)("hint__button", {
-      hint__button_active: isOpen
-    })
-  }, icon || icon === null || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, variant === "outlined" && /*#__PURE__*/_react.default.createElement(_reactFeather.HelpCircle, {
-    width: 16,
-    height: 16,
-    className: "hint__icon outlined"
-  }), variant === "filled" && /*#__PURE__*/_react.default.createElement(_CustomIcons.HelpCircleFilled, {
-    className: "hint__icon filled"
-  }), variant === "warning" && /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
-    className: "hint__icon",
-    color: "#F06D8D",
-    width: 16,
-    height: 16
-  })), label && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("hint__label", {
-      "color--primary": isOpen
-    })
-  }, (0, _utils.capitalized)(label))), isOpen && renderHintContainer(className));
+    const setHintContainerStyles = ()=>{
+        var _hintRef_current, _this, _this1, _this2;
+        const hc = (0, _utils1.getHintContainer)(hintId);
+        if (!hc || !isOpen) return false;
+        const { width = 0, top = 0, left = 0 } = (hintRef === null || hintRef === void 0 ? void 0 : hintRef.current) !== null ? hintRef === null || hintRef === void 0 ? void 0 : (_hintRef_current = hintRef.current) === null || _hintRef_current === void 0 ? void 0 : _hintRef_current.getBoundingClientRect() : {};
+        const { addWidth, addLeft, addTop } = hintContainer !== null && hintContainer !== void 0 ? hintContainer : {};
+        const windowInnerWidth = document.documentElement.clientWidth;
+        const windowInnerHeight = document.documentElement.clientHeight;
+        const sw = hc.getElementsByClassName('hint__text')[0];
+        const { width: swWidth, height: swHeight } = (sw === null || sw === void 0 ? void 0 : sw.getBoundingClientRect()) || {};
+        hc.style.width = isOpen ? (_this = (addWidth && !Number.isNaN(+addWidth) ? +addWidth : 0) + width) === null || _this === void 0 ? void 0 : _this.toString().concat('px') : '0';
+        hc.style.left = isOpen ? (_this1 = (addLeft && !Number.isNaN(+addLeft) ? +addLeft : 0) + left) === null || _this1 === void 0 ? void 0 : _this1.toString().concat('px') : '0';
+        hc.style.top = isOpen ? (_this2 = (addTop && !Number.isNaN(+addTop) ? +addTop : 0) + top) === null || _this2 === void 0 ? void 0 : _this2.toString().concat('px') : '0';
+        hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat('px') : '0';
+        // ? Базовое значение погрешности
+        // ? В разных свитч-кейсах может использоваться по разному (вся или частично). Определял "на глазок"
+        const INACCURACY = 20;
+        switch(side){
+            case 'top':
+            case 'centeredTop':
+                if (top - swHeight - INACCURACY / 2 < 0) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add(`hint__text_${side === 'top' ? 'bottom' : 'centeredBottom'}`);
+                }
+                break;
+            case 'bottom':
+            case 'centeredBottom':
+                if (top + swHeight + INACCURACY > windowInnerHeight) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add(`hint__text_${side === 'bottom' ? 'top' : 'centeredTop'}`);
+                }
+                break;
+            case 'left':
+                if (left - swWidth - INACCURACY / 2 < 0) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add('hint__text_right');
+                }
+                break;
+            case 'right':
+            default:
+                if (left + width + swWidth + INACCURACY / 2 > windowInnerWidth) {
+                    sw.classList.remove(`hint__text_${side}`);
+                    sw.classList.add('hint__text_left');
+                }
+                break;
+        }
+    };
+    const renderHintContainer = (className)=>{
+        const hc = (0, _utils1.getHintContainer)(hintId);
+        if (!hc) return null;
+        return /*#__PURE__*/ (0, _reactdom.createPortal)(getHintMarkUp(className), hc);
+    };
+    (0, _react.useEffect)(()=>{
+        (0, _utils1.initHintContainer)(hintId, hintContainer);
+        return ()=>{
+            if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    (0, _react.useEffect)(()=>{
+        setHintContainerStyles();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+        if (isOpen) {
+            document.addEventListener('scroll', handleScroll, true);
+            document.addEventListener('click', handleClickOutside, true);
+        } else {
+            document.removeEventListener('scroll', handleScroll, true);
+            document.removeEventListener('click', handleClickOutside, true);
+        }
+        return ()=>{
+            if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+        };
+    }, [
+        isOpen
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)('hint', className),
+        ref: hintRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                tabIndex: isAccessability ? 0 : -1,
+                "data-testid": typeof label === 'string' && label.length ? (_label_replace = label.replace) === null || _label_replace === void 0 ? void 0 : _label_replace.call(label, /\s/g, '-') : `${testId}--button`,
+                "aria-label": isAccessability && typeof label === 'string' ? label : '',
+                onClick: ()=>handleOpenType === 'click' && (isCallbackExist ? onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback() : setIsOpen(!isOpen)),
+                onMouseEnter: handle.onMouseEnter,
+                onMouseLeave: handle.onMouseLeave,
+                className: (0, _classnames.default)('hint__button', {
+                    hint__button_active: isOpen
+                }),
+                children: [
+                    icon || /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            variant === 'outlined' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.HelpCircle, {
+                                width: 16,
+                                height: 16,
+                                className: "hint__icon outlined"
+                            }),
+                            variant === 'filled' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomIcons.HelpCircleFilled, {
+                                className: "hint__icon filled"
+                            }),
+                            variant === 'warning' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.AlertTriangle, {
+                                className: "hint__icon",
+                                color: "#F06D8D",
+                                width: 16,
+                                height: 16
+                            })
+                        ]
+                    }),
+                    label && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)('hint__label', {
+                            'color--primary': isOpen
+                        }),
+                        children: (0, _utils.capitalized)(label)
+                    })
+                ]
+            }),
+            isOpen && renderHintContainer(className)
+        ]
+    });
 };
-var _default = exports.default = Hint;
+const _default = Hint;

package/dist/Atomic/UI/Hint/Hint.scss

@@ -81,6 +81,7 @@
     &_centeredBottom {
       top: 26px;
       left: 50%;
+
       transform: translateX(-50%);
 
       &::before {
@@ -104,11 +105,11 @@
 
     &_left {
       top: -4px;
-      
+      right: calc(100% + 8px);
+
       // ToDo - есть вероятность поломки позиционирования хинтов. Если сломается - откатить
       // right: 28px;
       left: unset;
-      right: calc(100% + 8px);
 
       &::before {
         top: 8px;
@@ -129,6 +130,7 @@
     &_centeredTop {
       bottom: 8px;
       left: 50%;
+
       transform: translateX(-50%);
 
       &::before {

package/dist/Atomic/UI/Hint/Hint.stories.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    HintTemplate: function() {
+        return HintTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+const _Hint = /*#__PURE__*/ _interop_require_default(require("./Hint"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/Hint',
+    component: _Hint.default,
+    argTypes: {
+        side: {
+            description: 'string: ["right", "bottom", "top", "left", "centeredBottom"]',
+            control: {
+                type: 'select',
+                options: [
+                    'right',
+                    'bottom',
+                    'top',
+                    'left'
+                ]
+            }
+        },
+        hint: {
+            description: 'hint message. string. optional'
+        },
+        label: {
+            description: 'hint label. string. optional'
+        },
+        variant: {
+            description: 'hint icon variant. string. optional',
+            control: {
+                type: 'select',
+                options: [
+                    'filled',
+                    'warning',
+                    'outlined'
+                ]
+            }
+        },
+        handleOpenType: {
+            description: 'string: \'click\' or \'hover\'.\n\nan action that will open and close the hint.',
+            control: {
+                type: 'select',
+                options: [
+                    'click',
+                    'hover'
+                ]
+            }
+        }
+    }
+};
+function Template(args) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                ...args
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                ...args,
+                handleOpenType: "hover"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                ...args,
+                handleOpenType: "hover",
+                isHoverableContent: true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                ...args,
+                side: "right"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                isCloseOnChildrenClick: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    children: "Hello"
+                })
+            })
+        ]
+    });
+}
+const HintTemplate = Template.bind({});
+HintTemplate.args = {
+    hint: ' hint text hint text hint text hint text hint text hint text hint text hint text',
+    side: 'centeredBottom',
+    label: /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {})
+};