@redocly/theme 0.1.3 → 0.1.6

package/Panel/CodePanel.js

@@ -1,13 +1,19 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { ShelfIcon } from '../icons/ShelfIcon';
-import { Panel } from './Panel';
-import { PanelHeader } from './PanelHeader';
-import { DarkHeader } from './DarkHeader';
-import { PanelBody } from './PanelBody';
-import { PanelHeaderTitle } from './PanelHeaderTitle';
-export var CodePanel = styled(Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader, DarkHeader, ShelfIcon, PanelHeaderTitle, PanelBody);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var ShelfIcon_1 = require("../icons/ShelfIcon");
+var Panel_1 = require("./Panel");
+var PanelHeader_1 = require("./PanelHeader");
+var DarkHeader_1 = require("./DarkHeader");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+exports.CodePanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader_1.PanelHeader, DarkHeader_1.DarkHeader, ShelfIcon_1.ShelfIcon, PanelHeaderTitle_1.PanelHeaderTitle, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/ContentPanel.js

@@ -1,12 +1,18 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { ShelfIcon } from '../icons/ShelfIcon';
-import { PanelHeaderTitle } from './PanelHeaderTitle';
-import { Panel } from './Panel';
-import { PanelBody } from './PanelBody';
-import { PanelHeader } from './PanelHeader';
-export var ContentPanel = styled(Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"], ["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"])), PanelHeader, PanelHeaderTitle, ShelfIcon, PanelBody, PanelHeader, PanelBody);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentPanel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var ShelfIcon_1 = require("../icons/ShelfIcon");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+var Panel_1 = require("./Panel");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeader_1 = require("./PanelHeader");
+exports.ContentPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"], ["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"])), PanelHeader_1.PanelHeader, PanelHeaderTitle_1.PanelHeaderTitle, ShelfIcon_1.ShelfIcon, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/DarkHeader.js

@@ -1,7 +1,10 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { css } from 'styled-components';
-export var DarkHeader = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"], ["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"])));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkHeader = void 0;
+var styled_components_1 = require("styled-components");
+exports.DarkHeader = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"], ["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"])));
 var templateObject_1;

package/Panel/Panel.js

@@ -1,10 +1,16 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { PanelBody } from './PanelBody';
-import { PanelComponent } from './PanelComponent';
-import { PanelHeader } from './PanelHeader';
-export var Panel = styled(PanelComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"], ["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), PanelHeader, PanelBody);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var PanelBody_1 = require("./PanelBody");
+var PanelComponent_1 = require("./PanelComponent");
+var PanelHeader_1 = require("./PanelHeader");
+exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"], ["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/PanelBody.js

@@ -1,11 +1,37 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { keyframes, css } from 'styled-components';
-var showPanel = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"])));
-var showPanelAnimation = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s;\n"], ["\n  animation: ", " 0.2s;\n"])), showPanel);
-export var PanelBody = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"], ["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"])), function (_a) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelBody = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var showPanel = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n"])));
+var showPanelAnimation = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s;\n"], ["\n  animation: ", " 0.2s;\n"])), showPanel);
+exports.PanelBody = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"], ["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"])), function (_a) {
     var animate = _a.animate;
     return animate && showPanelAnimation;
 }, function (_a) {

package/Panel/PanelComponent.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,17 +14,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, } from 'react';
-import styled from 'styled-components';
-import { ShelfIcon } from '../icons';
-import { PanelBody } from './PanelBody';
-import { PanelHeader } from './PanelHeader';
-import { PanelHeaderTitle } from './PanelHeaderTitle';
-export function PanelComponent(_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineBox = exports.PanelComponent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var icons_1 = require("../icons");
+var PanelBody_1 = require("./PanelBody");
+var PanelHeader_1 = require("./PanelHeader");
+var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+function PanelComponent(_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle;
-    var _c = useState(expanded), isExpanded = _c[0], setExpanded = _c[1];
-    var _d = useState(false), animate = _d[0], setAnimate = _d[1];
+    var _c = (0, react_1.useState)(expanded), isExpanded = _c[0], setExpanded = _c[1];
+    var _d = (0, react_1.useState)(false), animate = _d[0], setAnimate = _d[1];
     var toggle = function (_a) {
         var target = _a.target;
         if (target instanceof HTMLAnchorElement)
@@ -32,9 +38,10 @@ export function PanelComponent(_a) {
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    useEffect(function () { return setExpanded(expanded); }, [expanded]);
-    return (_jsxs("div", __assign({ className: className, "data-cy": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null }, { children: [header &&
-                (typeof header === 'function' ? (header({ expanded: isExpanded, toggle: toggle })) : (_jsx(PanelHeader, __assign({ "data-cy": "panel-header", onClick: toggle, expanded: isExpanded }, { children: _jsxs(InlineBox, { children: [_jsx(PanelHeaderTitle, __assign({ "data-cy": "title" }, { children: header })), _jsx(ShelfIcon, { direction: isExpanded ? 'down' : 'right' })] }) })))), isExpanded && (_jsx(PanelBody, __assign({ "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, { children: children })))] })));
+    (0, react_1.useEffect)(function () { return setExpanded(expanded); }, [expanded]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: className, "data-cy": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null }, { children: [header &&
+                (typeof header === 'function' ? (header({ expanded: isExpanded, toggle: toggle })) : ((0, jsx_runtime_1.jsx)(PanelHeader_1.PanelHeader, __assign({ "data-cy": "panel-header", onClick: toggle, expanded: isExpanded }, { children: (0, jsx_runtime_1.jsxs)(exports.InlineBox, { children: [(0, jsx_runtime_1.jsx)(PanelHeaderTitle_1.PanelHeaderTitle, __assign({ "data-cy": "title" }, { children: header })), (0, jsx_runtime_1.jsx)(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' })] }) })))), isExpanded && ((0, jsx_runtime_1.jsx)(PanelBody_1.PanelBody, __assign({ "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, { children: children })))] })));
 }
-export var InlineBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n"])));
+exports.PanelComponent = PanelComponent;
+exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n"])));
 var templateObject_1;

package/Panel/PanelHeader.js

@@ -1,9 +1,15 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-export var PanelHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"])), function (_a) {
     var expanded = _a.expanded;
     return (expanded ? '0' : 'var(--panels-border-radius)');
 }, function (_a) {

package/Panel/PanelHeaderTitle.js

@@ -1,7 +1,13 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-export var PanelHeaderTitle = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"], ["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeaderTitle = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeaderTitle = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"], ["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"])));
 var templateObject_1;

package/Panel/index.js

@@ -1,7 +1,23 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-export * from './PanelHeader';
-export * from './PanelHeaderTitle';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CodePanel"), exports);
+__exportStar(require("./ContentPanel"), exports);
+__exportStar(require("./DarkHeader"), exports);
+__exportStar(require("./Panel"), exports);
+__exportStar(require("./PanelBody"), exports);
+__exportStar(require("./PanelHeader"), exports);
+__exportStar(require("./PanelHeaderTitle"), exports);

package/SamplesPanelControls/SamplesPanelControls.js

@@ -1,17 +1,23 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { CodeBlock } from '../CodeBlock';
-export var SamplesControlButton = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"], ["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var CodeBlock_1 = require("../CodeBlock");
+exports.SamplesControlButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"], ["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.small;
 });
-export var SampleControls = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), SamplesControlButton, function (_a) {
+exports.SampleControls = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), exports.SamplesControlButton, function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.small;
 });
-export var SampleControlsWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:hover ", " {\n    opacity: 1;\n  }\n"], ["\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), SampleControls);
-export var PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"], ["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"])));
+exports.SampleControlsWrap = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:hover ", " {\n    opacity: 1;\n  }\n"], ["\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), exports.SampleControls);
+exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre'))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"], ["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/SamplesPanelControls/index.js

@@ -1 +1,17 @@
-export * from './SamplesPanelControls';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SamplesPanelControls"), exports);

package/SidebarLogo/SidebarLogo.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,17 +14,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-export function SidebarLogo(_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarLogo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function SidebarLogo(_a) {
     var _b = _a === void 0 ? {} : _a, imageUrl = _b.imageUrl, href = _b.href, altText = _b.altText, backgroundColor = _b.backgroundColor, dataTestId = _b.dataTestId;
     if (!imageUrl) {
         return null;
     }
-    var logo = _jsx(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
-    return (_jsx(LogoWrap, __assign({ "data-cy": dataTestId, style: { backgroundColor: backgroundColor } }, { children: href ? _jsx(Link, __assign({ href: href }, { children: logo })) : logo })));
+    var logo = (0, jsx_runtime_1.jsx)(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
+    return ((0, jsx_runtime_1.jsx)(LogoWrap, __assign({ "data-cy": dataTestId, style: { backgroundColor: backgroundColor } }, { children: href ? (0, jsx_runtime_1.jsx)(Link, __assign({ href: href }, { children: logo })) : logo })));
 }
-var LogoImgEl = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));
-var LogoWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  line-height: 0;\n"], ["\n  text-align: center;\n  line-height: 0;\n"])));
-var Link = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
+exports.SidebarLogo = SidebarLogo;
+var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));
+var LogoWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  line-height: 0;\n"], ["\n  text-align: center;\n  line-height: 0;\n"])));
+var Link = styled_components_1.default.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/SidebarLogo/index.js

@@ -1 +1,17 @@
-export * from './SidebarLogo';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SidebarLogo"), exports);

package/SourceCode/SourceCode.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,23 +10,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { highlight } from '../utils/highlight';
-import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
-import { CopyButtonWrapper } from '../CopyButton';
-export function Code(_a) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SourceCode = exports.Code = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var highlight_1 = require("../utils/highlight");
+var SamplesPanelControls_1 = require("../SamplesPanelControls");
+var CopyButton_1 = require("../CopyButton");
+function Code(_a) {
     var source = _a.source, lang = _a.lang, dataTestId = _a.dataTestId;
-    return (_jsx(PreformattedCodeBlock, { dangerouslySetInnerHTML: { __html: highlight(source, lang) }, "data-cy": dataTestId }));
+    return ((0, jsx_runtime_1.jsx)(SamplesPanelControls_1.PreformattedCodeBlock, { dangerouslySetInnerHTML: { __html: (0, highlight_1.highlight)(source, lang) }, "data-cy": dataTestId }));
 }
-export function SourceCode(_a) {
+exports.Code = Code;
+function SourceCode(_a) {
     var _b, _c;
     var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _d = _a.dataTestId, dataTestId = _d === void 0 ? 'source-code' : _d;
     var _source = source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)) || '';
     if (withCopyButton) {
-        return (_jsx(CopyButtonWrapper, __assign({ data: source }, { children: function (_a) {
+        return ((0, jsx_runtime_1.jsx)(CopyButton_1.CopyButtonWrapper, __assign({ data: source }, { children: function (_a) {
                 var renderCopyButton = _a.renderCopyButton;
-                return (_jsxs(SampleControlsWrap, { children: [_jsx(SampleControls, __assign({ "data-cy": "copy-button" }, { children: renderCopyButton() })), _jsx(Code, { lang: lang, source: _source, dataTestId: dataTestId })] }));
+                return ((0, jsx_runtime_1.jsxs)(SamplesPanelControls_1.SampleControlsWrap, { children: [(0, jsx_runtime_1.jsx)(SamplesPanelControls_1.SampleControls, __assign({ "data-cy": "copy-button" }, { children: renderCopyButton() })), (0, jsx_runtime_1.jsx)(Code, { lang: lang, source: _source, dataTestId: dataTestId })] }));
             } })));
     }
-    return _jsx(Code, { dataTestId: dataTestId, lang: lang, source: _source });
+    return (0, jsx_runtime_1.jsx)(Code, { dataTestId: dataTestId, lang: lang, source: _source });
 }
+exports.SourceCode = SourceCode;

package/SourceCode/index.js

@@ -1 +1,17 @@
-export * from './SourceCode';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SourceCode"), exports);

package/Tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -13,15 +14,40 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, memo } from 'react';
-import styled, { css } from 'styled-components';
-import { useControl } from '../hooks';
-export function TooltipComponent(_a) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.TooltipComponent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../hooks");
+function TooltipComponent(_a) {
     var children = _a.children, open = _a.open, tip = _a.tip, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.className, className = _c === void 0 ? 'default' : _c, width = _a.width, _d = _a.dataTestId, dataTestId = _d === void 0 ? tip : _d;
-    var _e = useControl(open), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
+    var _e = (0, hooks_1.useControl)(open), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
     var isControlled = open !== undefined;
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (isControlled) {
             if (open) {
                 handleOpen();
@@ -31,23 +57,24 @@ export function TooltipComponent(_a) {
             }
         }
     }, [open, isControlled, handleOpen, handleClose]);
-    var handleEnter = useCallback(function () {
+    var handleEnter = (0, react_1.useCallback)(function () {
         handleOpen();
     }, [handleOpen]);
-    var handleLeave = useCallback(function () {
+    var handleLeave = (0, react_1.useCallback)(function () {
         handleClose();
     }, [handleClose]);
-    return (_jsxs(TooltipWrapper, __assign({ onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className) }, { children: [children, isOpened && (_jsx(TooltipBody, __assign({ "data-cy": dataTestId, placement: placement, width: width }, { children: tip })))] })));
+    return ((0, jsx_runtime_1.jsxs)(TooltipWrapper, __assign({ onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className) }, { children: [children, isOpened && ((0, jsx_runtime_1.jsx)(TooltipBody, __assign({ "data-cy": dataTestId, placement: placement, width: width }, { children: tip })))] })));
 }
-export var Tooltip = memo(TooltipComponent);
+exports.TooltipComponent = TooltipComponent;
+exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 var PLACEMENTS = {
-    top: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "]))),
-    bottom: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "]))),
-    left: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "]))),
-    right: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "]))),
+    top: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top-width: 6px;\n      border-top-style: solid;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, 99%);\n    }\n  "]))),
+    bottom: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    &::after {\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-bottom-width: 6px;\n      border-bottom-style: solid;\n      top: 0;\n      left: 50%;\n      transform: translate(-50%, -99%);\n    }\n  "]))),
+    left: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-left-width: 6px;\n      border-left-style: solid;\n      top: 50%;\n      right: 0;\n      transform: translate(99%, -50%);\n    }\n  "]))),
+    right: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    &::after {\n      border-top: 5px solid transparent;\n      border-bottom: 5px solid transparent;\n      border-right-width: 6px;\n      border-right-style: solid;\n      top: 50%;\n      left: 0;\n      transform: translate(-99%, -50%);\n    }\n  "]))),
 };
-var TooltipWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
-var TooltipBody = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
+var TooltipWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
+var TooltipBody = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"], ["\n  display: inline-block;\n\n  position: absolute;\n  text-align: center;\n\n  padding: 10px 20px;\n  max-width: 250px;\n  white-space: normal;\n  overflow-wrap: break-word;\n\n  border-radius: var(--global-border-radius);\n  pointer-events: none;\n  transition: opacity 0.3s ease-out;\n\n  font-size: 13px;\n\n  &::after {\n    position: absolute;\n\n    content: ' ';\n    display: inline-block;\n    width: 0;\n    height: 0;\n    border-color: var(--tooltip-background-color);\n  }\n\n  background: var(--tooltip-background-color);\n  color: var(--tooltip-color);\n  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n  width: ", ";\n  ", "\n"])), function (_a) {
     var width = _a.width;
     return width || '120px';
 }, function (_a) {

package/Tooltip/index.js

@@ -1 +1,17 @@
-export * from './Tooltip';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tooltip"), exports);