@redocly/theme 0.4.15 → 0.5.0

package/Tooltip/Tooltip.js

@@ -1,98 +0,0 @@
-"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;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var hooks_1 = require("../hooks");
-function TooltipComponent(_a) {
-    var children = _a.children, isOpen = _a.isOpen, tip = _a.tip, _b = _a.withArrow, withArrow = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.className, className = _d === void 0 ? 'default' : _d, width = _a.width, dataTestId = _a.dataTestId;
-    var ref = (0, react_1.useRef)(null);
-    var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
-    (0, hooks_1.useOutsideClick)(ref, handleClose);
-    var isControlled = isOpen !== undefined;
-    (0, react_1.useEffect)(function () {
-        if (isControlled) {
-            if (isOpen) {
-                handleOpen();
-            }
-            else {
-                handleClose();
-            }
-        }
-    }, [isOpen, isControlled, handleOpen, handleClose]);
-    var controllers = !isControlled && {
-        onMouseEnter: handleOpen,
-        onMouseLeave: handleClose,
-        onClick: handleClose,
-    };
-    return (react_1.default.createElement(TooltipWrapper, __assign({ ref: ref }, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
-        children,
-        isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
-}
-exports.TooltipComponent = TooltipComponent;
-exports.Tooltip = (0, react_1.memo)(TooltipComponent);
-var PLACEMENTS = {
-    top: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "], ["\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -99%);\n    margin-top: -10px;\n\n    ", "\n  "])), function (_a) {
-        var withArrow = _a.withArrow;
-        return withArrow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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        &::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_4 || (templateObject_4 = __makeTemplateObject(["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "], ["\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 99%);\n    margin-bottom: -10px;\n\n    ", "\n  "])), function (_a) {
-        var withArrow = _a.withArrow;
-        return withArrow && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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        &::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_6 || (templateObject_6 = __makeTemplateObject(["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    margin-left: -10px;\n\n    ", "\n  "])), function (_a) {
-        var withArrow = _a.withArrow;
-        return withArrow && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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        &::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_8 || (templateObject_8 = __makeTemplateObject(["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "], ["\n    top: 50%;\n    right: 0;\n    transform: translate(100%, -50%);\n    margin-right: -10px;\n\n    ", "\n  "])), function (_a) {
-        var withArrow = _a.withArrow;
-        return withArrow && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\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        &::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_components_1.default.div(templateObject_9 || (templateObject_9 = __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_11 || (templateObject_11 = __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(--border-radius);\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-text-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(--border-radius);\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-text-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) {
-    var placement = _a.placement;
-    return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), PLACEMENTS[placement]);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/Typography/CompactTypography.js

@@ -1,18 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompactTypography = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var Typography_1 = require("../Typography/Typography");
-exports.CompactTypography = (0, styled_components_1.default)(Typography_1.Typography).attrs(function () { return ({
-    mt: '0em',
-    mb: '0em',
-    'data-component-name': 'Typography/CompactTypography',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var templateObject_1;

package/Typography/Emphasis.js

@@ -1,15 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Emphasis = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
-    'data-component-name': 'Typography/Emphasis',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
-var templateObject_1;

package/Typography/H1.js

@@ -1,16 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H1 = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var utils_1 = require("../utils");
-exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
-    'data-component-name': 'Typography/H1',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h1-text-color);\n  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h1-text-color);\n  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
-var templateObject_1;

package/Typography/H2.js

@@ -1,16 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H2 = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var utils_1 = require("../utils");
-exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
-    'data-component-name': 'Typography/H2',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h2-text-color);\n  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h2-text-color);\n  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
-var templateObject_1;

package/Typography/H3.js

@@ -1,16 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H3 = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var utils_1 = require("../utils");
-exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
-    'data-component-name': 'Typography/H3',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h3-text-color);\n  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n\n  ", ";\n"], ["\n  color: var(--h3-text-color);\n  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
-var templateObject_1;

package/Typography/SectionHeader.js

@@ -1,15 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionHeader = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.SectionHeader = styled_components_1.default.h2.attrs(function () { return ({
-    'data-component-name': 'Typography/SectionHeader',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h2-color);\n  font-size: var(--h2-font-size);\n  font-weight: var(--h2-font-weight);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h2-font-family);\n"], ["\n  color: var(--h2-color);\n  font-size: var(--h2-font-size);\n  font-weight: var(--h2-font-weight);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h2-font-family);\n"])));
-var templateObject_1;

package/Typography/Typography.js

@@ -1,45 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.Typography = styled_components_1.default.div.attrs(function () { return ({
-    'data-component-name': 'Typography/Typography',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return color || 'var(--text-color)';
-}, function (_a) {
-    var fontFamily = _a.fontFamily;
-    return fontFamily || 'var(--font-family-base)';
-}, function (_a) {
-    var fontSize = _a.fontSize;
-    return fontSize || 'var(--font-size-base)';
-}, function (_a) {
-    var fontStyle = _a.fontStyle;
-    return fontStyle;
-}, function (_a) {
-    var fontWeight = _a.fontWeight;
-    return fontWeight || 'var(--font-weight-regular)';
-}, function (_a) {
-    var lineHeight = _a.lineHeight;
-    return lineHeight || 'var(--line-height-base)';
-}, function (_a) {
-    var letterSpacing = _a.letterSpacing;
-    return letterSpacing;
-}, function (_a) {
-    var marginBottom = _a.marginBottom;
-    return marginBottom;
-}, function (_a) {
-    var marginTop = _a.marginTop;
-    return marginTop;
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign;
-});
-var templateObject_1;