@redocly/theme 0.1.0 → 0.1.3

package/Panel/DarkHeader.js

@@ -0,0 +1,7 @@
+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"])));
+var templateObject_1;

package/Panel/Panel.d.ts

@@ -0,0 +1,2 @@
+import { PanelComponent } from './PanelComponent';
+export declare const Panel: import("styled-components").StyledComponent<typeof PanelComponent, any, {}, never>;

package/Panel/Panel.js

@@ -0,0 +1,10 @@
+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 templateObject_1;

package/Panel/PanelBody.d.ts

@@ -0,0 +1,6 @@
+interface PanelBodyProps {
+    animate?: boolean;
+    hidden?: boolean;
+}
+export declare const PanelBody: import("styled-components").StyledComponent<"div", any, PanelBodyProps, never>;
+export {};

package/Panel/PanelBody.js

@@ -0,0 +1,15 @@
+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 animate = _a.animate;
+    return animate && showPanelAnimation;
+}, function (_a) {
+    var hidden = _a.hidden;
+    return hidden && 'visibility: hidden';
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/Panel/PanelComponent.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { PanelHeaderProps } from './PanelHeader';
+export interface PanelComponentProps {
+    expanded?: boolean;
+    className?: string;
+    header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
+    onToggle?: (expanded: boolean) => void;
+}
+export declare function PanelComponent({ expanded, header, className, children, onToggle, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
+export declare const InlineBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Panel/PanelComponent.js

@@ -0,0 +1,40 @@
+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);
+};
+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 _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 toggle = function (_a) {
+        var target = _a.target;
+        if (target instanceof HTMLAnchorElement)
+            return;
+        setAnimate(true);
+        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 })))] })));
+}
+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"])));
+var templateObject_1;

package/Panel/PanelHeader.d.ts

@@ -0,0 +1,7 @@
+import { BaseSyntheticEvent } from 'react';
+export interface PanelHeaderProps {
+    expanded: boolean;
+    disabled?: boolean;
+    toggle?: (e: BaseSyntheticEvent) => void;
+}
+export declare const PanelHeader: import("styled-components").StyledComponent<"div", any, PanelHeaderProps, never>;

package/Panel/PanelHeader.js

@@ -0,0 +1,16 @@
+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 expanded = _a.expanded;
+    return (expanded ? '0' : 'var(--panels-border-radius)');
+}, function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '0' : 'var(--panels-border-radius)');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'none' : 'auto');
+});
+var templateObject_1;

package/Panel/PanelHeaderTitle.d.ts

@@ -0,0 +1 @@
+export declare const PanelHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/Panel/PanelHeaderTitle.js

@@ -0,0 +1,7 @@
+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 templateObject_1;

package/Panel/index.js

@@ -0,0 +1,7 @@
+export * from './CodePanel';
+export * from './ContentPanel';
+export * from './DarkHeader';
+export * from './Panel';
+export * from './PanelBody';
+export * from './PanelHeader';
+export * from './PanelHeaderTitle';

package/SamplesPanelControls/SamplesPanelControls.d.ts

@@ -0,0 +1,4 @@
+export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SampleControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SampleControlsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;

package/SamplesPanelControls/SamplesPanelControls.js

@@ -0,0 +1,17 @@
+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 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) {
+    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"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/SamplesPanelControls/index.js

@@ -0,0 +1 @@
+export * from './SamplesPanelControls';

package/SidebarLogo/SidebarLogo.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface LogoProps {
+    imageUrl?: string;
+    href?: string;
+    altText?: string;
+    dataTestId?: string;
+    backgroundColor?: string;
+}
+export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, }?: LogoProps): JSX.Element | null;

package/SidebarLogo/SidebarLogo.js

@@ -0,0 +1,29 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+export 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 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"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/SidebarLogo/index.js

@@ -0,0 +1 @@
+export * from './SidebarLogo';

package/SourceCode/SourceCode.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface SourceCodeProps {
+    lang: string;
+    source?: string;
+    externalSource?: ExternalSource;
+    withCopyButton?: boolean;
+    dataTestId?: string;
+}
+export interface Sample {
+    lang: string;
+    label?: string;
+}
+export declare type UnstableExternalCodeSample = Sample & {
+    get: (source: ExternalSource) => string;
+};
+export interface ExternalSource {
+    sample: UnstableExternalCodeSample;
+    exampleName?: string;
+    pathParams?: any;
+    properties?: any;
+    operation?: any;
+}
+export declare function Code({ source, lang, dataTestId, }: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, withCopyButton, dataTestId, }: SourceCodeProps): JSX.Element;

package/SourceCode/SourceCode.js

@@ -0,0 +1,31 @@
+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);
+};
+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) {
+    var source = _a.source, lang = _a.lang, dataTestId = _a.dataTestId;
+    return (_jsx(PreformattedCodeBlock, { dangerouslySetInnerHTML: { __html: highlight(source, lang) }, "data-cy": dataTestId }));
+}
+export 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) {
+                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 _jsx(Code, { dataTestId: dataTestId, lang: lang, source: _source });
+}

package/SourceCode/index.js

@@ -0,0 +1 @@
+export * from './SourceCode';

package/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export interface TooltipProps {
+    tip: string;
+    open?: boolean;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    width?: string;
+    dataTestId?: string;
+}
+export declare function TooltipComponent({ children, open, tip, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
+export declare const Tooltip: React.NamedExoticComponent<PropsWithChildren<TooltipProps>>;

package/Tooltip/Tooltip.js

@@ -0,0 +1,57 @@
+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);
+};
+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 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 isControlled = open !== undefined;
+    useEffect(function () {
+        if (isControlled) {
+            if (open) {
+                handleOpen();
+            }
+            else {
+                handleClose();
+            }
+        }
+    }, [open, isControlled, handleOpen, handleClose]);
+    var handleEnter = useCallback(function () {
+        handleOpen();
+    }, [handleOpen]);
+    var handleLeave = 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 })))] })));
+}
+export var Tooltip = 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  "]))),
+};
+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 width = _a.width;
+    return width || '120px';
+}, function (_a) {
+    var placement = _a.placement;
+    return "".concat(PLACEMENTS[placement], ";");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Tooltip/index.js

@@ -0,0 +1 @@
+export * from './Tooltip';

package/globalStyle.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/globalStyle.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { createGlobalStyle } from 'styled-components';
+export var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    /* === Palette === */\n\n    /*\n    * Color palette\n    */\n    --color-primary-100: #62a1ff;\n    --color-primary-200: #4892ff;\n    --color-primary-300: #2f83ff;\n    --color-primary-400: #1573ff;\n    --color-primary-500: #0065fb;\n    --color-primary-600: #005be2;\n    --color-primary-700: #0050c8;\n    --color-primary-800: #0046af;\n    --color-primary-900: #003c95;\n\n    --color-secondary-100: #ffffff;\n    --color-secondary-200: #f5f7fa;\n    --color-secondary-300: #f3f4f6;\n    --color-secondary-400: #e4e7eb;\n    --color-secondary-500: #d5dae0;\n    --color-secondary-600: #c7cdd5;\n    --color-secondary-700: #b8c0ca;\n    --color-secondary-800: #a9b3c0;\n    --color-secondary-900: #9ba6b5;\n\n    --color-emphasis-100: #ffffff;\n    --color-emphasis-200: #e9eaec;\n    --color-emphasis-300: #cdd0d5;\n    --color-emphasis-400: #b2b6bd;\n    --color-emphasis-500: #969ca6;\n    --color-emphasis-600: #7a828f;\n    --color-emphasis-700: #626974;\n    --color-emphasis-800: #4b5058;\n    --color-emphasis-900: #1c1e21;\n\n    --color-accent-100: #b3dcf3;\n    --color-accent-200: #a6dfff;\n    --color-accent-300: #8cd5ff;\n    --color-accent-400: #73ccff;\n    --color-accent-500: #59c3ff;\n    --color-accent-600: #40baff;\n    --color-accent-700: #26b1ff;\n    --color-accent-800: #0da7ff;\n    --color-accent-900: #009bf2;\n\n    --color-success-100: #98eda0;\n    --color-success-200: #82e98c;\n    --color-success-300: #6ce678;\n    --color-success-400: #57e264;\n    --color-success-500: #41de50;\n    --color-success-600: #2bda3c;\n    --color-success-700: #23c933;\n    --color-success-800: #1fb32d;\n    --color-success-900: #1b9e28;\n\n    --color-warning-100: #ffc966;\n    --color-warning-200: #ffc04d;\n    --color-warning-300: #ffb733;\n    --color-warning-400: #ffae1a;\n    --color-warning-500: #ffa500;\n    --color-warning-600: #e69400;\n    --color-warning-700: #cc8400;\n    --color-warning-800: #b37300;\n    --color-warning-900: #996300;\n\n    --color-error-100: #ffc7c7;\n    --color-error-200: #ffaeae;\n    --color-error-300: #ff9494;\n    --color-error-400: #ff7b7b;\n    --color-error-500: #ff6161;\n    --color-error-600: #ff4747;\n    --color-error-700: #ff2e2e;\n    --color-error-800: #ff1414;\n    --color-error-900: #ff0000;\n\n    /* === Typography === */\n\n    --color-content: #1f2933;\n    --color-content-inverse: var(--color-secondary-200);\n    --color-content-secondary: #7b8794;\n\n    --font-size-base: 14px;\n    --line-height-base: 1.5em;\n    --font-weight-regular: 400;\n    --font-weight-bold: 600;\n    --font-weight-bolder: 700;\n    --font-family-base: Source Sans Pro, sans-serif;\n    --font-family-monospaced: Source Code Pro, monospace;\n\n    --smoothing: antialiased; // text-smoothing\n    --text-rendering: optimizeSpeed; // text-rendering\n\n    /*\n    * Spacing\n    */\n    --spacing-unit: 5px;\n    --spacing-horizontal: calc(var(--spacing-unit) * 8);\n    --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n    /*\n    * Global\n    */\n    --global-border-radius: 4px;\n    --global-border-width: 1px;\n    --global-border-color: var(--color-secondary-400);\n    --global-border-color-secondary: #616e7c;\n    --global-background-color: transparent;\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff;\n    --sidebar-right-line-color: var(--global-border-color);\n    --sidebar-spacing-unit: 8px;\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color);\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-chevron-color: var(--sidebar-item-color);\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-border-radius: 4px;\n    --sidebar-item-font-family: var(--font-family-base);\n    --sidebar-item-font-size: var(--font-size-base);\n    --sidebar-item-color: var(--color-content);\n    --sidebar-item-active-color: var(--color-content);\n    --sidebar-item-background-color: #fff;\n    --sidebar-item-active-background-color: var(--global-border-color);\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /*\n    * Http colors\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /*\n    * Response colors\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 37.5%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--samples-panel-callback-background-color);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-enum-background-color: var(--inline-code-background-color);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065FB;\n    --fab-background-color: #f2f2f2;\n\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-spacing-unit: 8px;\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n    --sidebar-chevron-color: var(--sidebar-text-color);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-background-color: #fff;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-primary);\n    --sidebar-right-line-color: var(--color-border-light);\n    --sidebar-text-color: var(--color-text-main);\n    --sidebar-text-active-color: var(--sidebar-text-color);\n    --sidebar-text-active-background-color: var(--color-border-light);\n    --sidebar-width: 285px;\n\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-separator-label-color: var(--sidebar-text-color);\n\n    /**\n     * Portal Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Portal Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-color-text: var(--color-content-inverse);\n    --navbar-color-background: var(--color-primary-500);\n\n    /**\n     * Portal Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--color-primary-contrast);\n    --navbar-item-active-text-decoration: none;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --color-content: #f5f7fa;\n      --global-border-color: #4c4c4c;\n      --inline-code-color: #ed8282;\n      --schema-require-label-color: #e55252;\n      --global-background-color: #101010;\n      --sidebar-background-color: #101010;\n      --sidebar-item-active-background-color: #424242;\n      --samples-panel-block-background-color: var(--sidebar-background-color);\n      --color-secondary-200: #1f2933;\n      --color-primary-900: #4892ff;\n      --search-marked-background-color: #707000;\n\n      --response-success-border-color: #3c8d06;\n      --response-success-background-color: #2e7102;\n      --response-error-border-color: #8d5c5c;\n      --response-error-background-color: #802828;\n      --response-redirect-border-color: #ffa500;\n      --response-redirect-background-color: #ffa5001a;\n      --response-info-border-color: #87ceeb;\n      --response-info-background-color: #87ceeb1a;\n\n      --link-color: #4d91ff;\n      --link-hover-color: #3686ff;\n\n      --navbar-color-background: #f2f2f2;\n\n      .search-input {\n        color: var(--color-content);\n      }\n\n      .button-clear {\n        --color-secondary-600: #3e4c59;\n        --color-secondary-400: #1b1b1b;\n      }\n    }\n  }\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n  :root {\n    /* === Palette === */\n\n    /*\n    * Color palette\n    */\n    --color-primary-100: #62a1ff;\n    --color-primary-200: #4892ff;\n    --color-primary-300: #2f83ff;\n    --color-primary-400: #1573ff;\n    --color-primary-500: #0065fb;\n    --color-primary-600: #005be2;\n    --color-primary-700: #0050c8;\n    --color-primary-800: #0046af;\n    --color-primary-900: #003c95;\n\n    --color-secondary-100: #ffffff;\n    --color-secondary-200: #f5f7fa;\n    --color-secondary-300: #f3f4f6;\n    --color-secondary-400: #e4e7eb;\n    --color-secondary-500: #d5dae0;\n    --color-secondary-600: #c7cdd5;\n    --color-secondary-700: #b8c0ca;\n    --color-secondary-800: #a9b3c0;\n    --color-secondary-900: #9ba6b5;\n\n    --color-emphasis-100: #ffffff;\n    --color-emphasis-200: #e9eaec;\n    --color-emphasis-300: #cdd0d5;\n    --color-emphasis-400: #b2b6bd;\n    --color-emphasis-500: #969ca6;\n    --color-emphasis-600: #7a828f;\n    --color-emphasis-700: #626974;\n    --color-emphasis-800: #4b5058;\n    --color-emphasis-900: #1c1e21;\n\n    --color-accent-100: #b3dcf3;\n    --color-accent-200: #a6dfff;\n    --color-accent-300: #8cd5ff;\n    --color-accent-400: #73ccff;\n    --color-accent-500: #59c3ff;\n    --color-accent-600: #40baff;\n    --color-accent-700: #26b1ff;\n    --color-accent-800: #0da7ff;\n    --color-accent-900: #009bf2;\n\n    --color-success-100: #98eda0;\n    --color-success-200: #82e98c;\n    --color-success-300: #6ce678;\n    --color-success-400: #57e264;\n    --color-success-500: #41de50;\n    --color-success-600: #2bda3c;\n    --color-success-700: #23c933;\n    --color-success-800: #1fb32d;\n    --color-success-900: #1b9e28;\n\n    --color-warning-100: #ffc966;\n    --color-warning-200: #ffc04d;\n    --color-warning-300: #ffb733;\n    --color-warning-400: #ffae1a;\n    --color-warning-500: #ffa500;\n    --color-warning-600: #e69400;\n    --color-warning-700: #cc8400;\n    --color-warning-800: #b37300;\n    --color-warning-900: #996300;\n\n    --color-error-100: #ffc7c7;\n    --color-error-200: #ffaeae;\n    --color-error-300: #ff9494;\n    --color-error-400: #ff7b7b;\n    --color-error-500: #ff6161;\n    --color-error-600: #ff4747;\n    --color-error-700: #ff2e2e;\n    --color-error-800: #ff1414;\n    --color-error-900: #ff0000;\n\n    /* === Typography === */\n\n    --color-content: #1f2933;\n    --color-content-inverse: var(--color-secondary-200);\n    --color-content-secondary: #7b8794;\n\n    --font-size-base: 14px;\n    --line-height-base: 1.5em;\n    --font-weight-regular: 400;\n    --font-weight-bold: 600;\n    --font-weight-bolder: 700;\n    --font-family-base: Source Sans Pro, sans-serif;\n    --font-family-monospaced: Source Code Pro, monospace;\n\n    --smoothing: antialiased; // text-smoothing\n    --text-rendering: optimizeSpeed; // text-rendering\n\n    /*\n    * Spacing\n    */\n    --spacing-unit: 5px;\n    --spacing-horizontal: calc(var(--spacing-unit) * 8);\n    --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n    /*\n    * Global\n    */\n    --global-border-radius: 4px;\n    --global-border-width: 1px;\n    --global-border-color: var(--color-secondary-400);\n    --global-border-color-secondary: #616e7c;\n    --global-background-color: transparent;\n\n    /* === Page layout === */\n    //TBD\n    /* === Navbar === */\n    //--navbar-height:\n    //TBD\n\n    /* === Menu (sidebar) === */\n\n    --sidebar-width: 285px;\n    --sidebar-background-color: #fff;\n    --sidebar-right-line-color: var(--global-border-color);\n    --sidebar-spacing-unit: 8px;\n    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-word-break: 'inherit';\n    --sidebar-separator-label-color: var(--sidebar-item-color);\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-chevron-color: var(--sidebar-item-color);\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-item-border-radius: 4px;\n    --sidebar-item-font-family: var(--font-family-base);\n    --sidebar-item-font-size: var(--font-size-base);\n    --sidebar-item-color: var(--color-content);\n    --sidebar-item-active-color: var(--color-content);\n    --sidebar-item-background-color: #fff;\n    --sidebar-item-active-background-color: var(--global-border-color);\n\n    //TBD\n    /* === Footer === */\n    //TBD\n    /* === Table of contents === */\n    //TBD\n    /* === Various components: buttons, inputs, alerts, tooltip === */\n\n    /*\n    * Buttons\n    */\n    --button-color: white;\n    --button-background-color: var(--color-emphasis-500);\n    --button-hover-background-color: var(--color-emphasis-600);\n    --button-active-background-color: var(--color-emphasis-700);\n    --button-outlined-active-border-color: var(--color-emphasis-800);\n    --button-border-radius: var(--global-border-radius);\n    --button-font-family: inherit;\n    --button-font-weight: var(--font-weight-bold);\n    --button-box-shadow: none;\n    --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);\n\n    .button-color-primary {\n      --button-color: white;\n      --button-background-color: var(--color-primary-500);\n      --button-hover-background-color: var(--color-primary-600);\n      --button-active-background-color: var(--color-primary-700);\n      --button-outlined-active-border-color: var(--color-primary-800);\n    }\n\n    .button-color-secondary {\n      --button-color: var(--color-emphasis-800);\n      --button-background-color: var(--color-secondary-400);\n      --button-hover-background-color: var(--color-secondary-500);\n      --button-active-background-color: var(--color-secondary-600);\n      --button-outlined-active-border-color: var(--color-secondary-700);\n    }\n\n    --button-small-font-size: 12px;\n    --button-small-padding: 8px 10px;\n    --button-small-min-width: 90px;\n    --button-medium-font-size: 14px;\n    --button-medium-padding: 8px 20px;\n    --button-medium-min-width: 120px;\n    --button-large-font-size: 14px;\n    --button-large-padding: 12px 24px;\n    --button-large-min-width: 150px;\n    --button-xlarge-font-size: 16px;\n    --button-xlarge-padding: 20px 24px;\n    --button-xlarge-min-width: 200px;\n\n    /*\n    * Tooltip\n    */\n    --tooltip-color: var(--color-secondary-300);\n    --tooltip-background-color: #52606d;\n\n    .tooltip-copy-button {\n      --tooltip-color: #000;\n      --tooltip-background-color: #fff;\n    }\n\n    /* === Markdown/Page content (tables, inline code, blockquotes) === */\n\n    /*\n    * Headings\n    * --h-{css-property-name} is fallback for h1...h6\n    */\n    --h-font-family: Source Sans Pro, sans-serif;\n    --h-font-weight: var(--font-weight-bolder);\n    --h-color: var(--color-content);\n\n    --h1-font-size: 36px;\n    --h2-font-size: 28px;\n    --h3-font-size: 18px;\n    --h4-font-size: 16px;\n    --h5-font-size: 14px;\n    --h6-font-size: 12px;\n\n    --h1-line-height: 36px;\n    --h2-line-height: 28px;\n    --h3-line-height: 18px;\n    --h4-line-height: 16px;\n    --h5-line-height: 14px;\n    --h6-line-height: 12px;\n\n    --code-font-size: 13px;\n    --code-font-family: var(--font-family-monospaced);\n    --code-font-weight: 400;\n    --code-wrap: pre;\n\n    --inline-code-font-size: var(--code-font-size);\n    --inline-code-font-family: var(--code-font-family);\n    --inline-code-color: #e53935;\n    --inline-code-background-color: var(--color-secondary-200);\n    --inline-code-border-color: var(--global-border-color);\n    --inline-code-border-radius: var(--global-border-radius);\n\n    --code-block-font-size: var(--code-font-size);\n    --code-block-font-family: var(--code-font-family);\n    --code-block-color: #f1928f;\n    --code-block-background-color: rgba(217, 205, 199, 0.05);\n    --code-block-border-color: var(--global-border-color);\n    --code-block-border-radius: 8px;\n    --code-block-max-height: 600px;\n    --code-block-word-break: initial;\n    --code-block-preformatted-background-color: #323f4b;\n\n    /*\n    * Links\n    */\n    --link-color: var(--color-primary-500);\n    --link-decoration: none;\n    --link-hover-color: var(--color-primary-100);\n    --link-hover-decoration: underline;\n\n    /* === ref docs and graphql docs specific === */\n    /*\n    * Logo\n    */\n    --logo-max-height: 285px;\n    --logo-max-width: 285px;\n    --logo-padding: 2px;\n\n    /*\n    * Http colors\n    */\n    --color-http-get: #3a9601;\n    --color-http-post: #0065fb;\n    --color-http-put: #93527b;\n    --color-http-options: #947014;\n    --color-http-patch: #bf581d;\n    --color-http-delete: #c83637;\n    --color-http-basic: #707070;\n    --color-http-link: #07818f;\n    --color-http-head: #a23dad;\n    --color-http-hook: var(--color-http-post);\n\n    /*\n    * Response colors\n    */\n    --response-success-border-color: #b1e996;\n    --response-success-background-color: #f6fff4;\n    --response-success-text-color: var(--response-success-border-color);\n\n    --response-error-border-color: #ffc9c9;\n    --response-error-background-color: #fff4f4;\n    --response-error-text-color: var(--response-error-border-color);\n\n    --response-redirect-border-color: var(--color-warning-500);\n    --response-redirect-background-color: #ffa5001a;\n    --response-redirect-text-color: var(--response-redirect-border-color);\n\n    --response-info-border-color: #87ceeb;\n    --response-info-background-color: #87ceeb1a;\n    --response-info-text-color: var(--response-info-border-color);\n\n    /*\n    * Panels\n    */\n    --panels-border-radius: 8px;\n    --panels-background-color: #fff;\n\n    --samples-panel-gap: 20px;\n    --samples-panel-width: 37.5%;\n    --samples-panel-block-background-color: #fff;\n    --samples-panel-background-color: #52606d;\n    --samples-panel-callback-background-color: var(--samples-panel-callback-background-color);\n    --samples-panel-controls-background-color: #323f4b;\n    --samples-panel-controls-hover-background-color: #3c4c5a;\n    --samples-panel-controls-active-border-color: var(--color-accent-500);\n    --samples-panel-text-color: #fff;\n    --samples-panel-heading-color: #fff;\n\n    --samples-panel-markdown-background-color: #3c4c5a;\n    --samples-panel-markdown-border-color: #46596a;\n\n    --try-it-panel-tab-background-color: var(--samples-panel-background-color);\n    --try-it-panel-active-tab-background-color: #47535e;\n    --try-it-panel-active-tab-border-color: var(--color-accent-500);\n    --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);\n    --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);\n    --try-it-panel-action-button-width: auto;\n\n    --request-and-response-panel-background-color: #fff;\n\n    /*\n    * Layout\n    */\n    --layout-buttons-top-offset: 20px;\n    --layout-buttons-height: 36px;\n    --layout-buttons-width: 36px;\n\n    --layout-stacked-small-max-width: 90%;\n    --layout-stacked-medium-max-width: 75%;\n    --layout-stacked-large-max-width: 1200px;\n\n    --layout-three-panel-small-max-width: 100%;\n    --layout-three-panel-medium-max-width: 100%;\n    --layout-three-panel-large-max-width: 1800px;\n\n    --layout-middle-panel-small-max-width: none;\n    --layout-middle-panel-medium-max-width: none;\n    --layout-middle-panel-large-max-width: none;\n\n    /*\n    * Schema\n    */\n    --schema-lines-color: var(--global-border-color);\n    --schema-default-details-width: 70%;\n    --schema-type-name-color: var(--color-content-secondary);\n    --schema-type-title-color: var(--color-content-secondary);\n    --schema-require-label-color: var(--color-error-900);\n    --schema-labels-text-size: 0.9em;\n    --schema-nesting-spacing: 1em;\n    --schema-nested-background-color: var(--color-secondary-200);\n    --schema-chevron-color: var(--color-content);\n    --schema-chevron-size: 9px;\n\n    --schema-controls-color: var(--color-emphasis-800);\n    --schema-controls-background-color: var(--color-secondary-400);\n    --schema-controls-hover-background-color: var(--color-secondary-500);\n    --schema-controls-border-color: var(--color-secondary-600);\n\n    --field-name-font-size: var(--code-font-size);\n    --field-name-font-family: var(--code-font-family);\n    --field-enum-background-color: var(--inline-code-background-color);\n    --field-constraint-background-color: var(--inline-code-background-color);\n\n    /*\n    * Search\n    */\n    --search-input-border-bottom: #e6e6e6;\n    --search-results-background-color: #f2f2f2;\n    --search-results-active-item-background-color: #e6e6e6;\n    --search-marked-background-color: #ffff03;\n    --search-popup-header-background-color: var(--color-secondary-200);\n    --search-clear-button-background-color: var(--color-secondary-400);\n    --search-clear-button-hover-background-color: var(--color-secondary-600);\n\n    /*\n    * Other\n    */\n    --badge-color: var(--color-emphasis-100);\n    --badge-background-color: var(--color-primary-500);\n    --deprecated-badge-color: var(--color-emphasis-100);\n    --deprecated-badge-background-color: var(--color-warning-500);\n\n    --recursive-label-color: var(--color-warning-500);\n\n    --http-badge-font-size: 12px;\n    --http-badge-line-height: 20px;\n    --http-badge-font-family: var(--code-font-family);\n    --http-badge-font-weight: var(--font-weight-bold);\n    --http-badge-border-radius: 16px;\n    --http-badge-color: var(--color-content-inverse);\n\n    --http-badge-menu-font-size: 8px;\n    --http-badge-menu-line-height: 14px;\n\n    --spinner-color: var(--color-primary-500);\n\n    --linear-progress-color: var(--color-accent-500);\n    --linear-progress-background-color: var(--color-accent-100);\n\n    /* Floating action button */\n    --fab-color: #0065FB;\n    --fab-background-color: #f2f2f2;\n\n\n    /**\n     * Sidebar\n     * */\n    --sidebar-spacing-unit: 8px;\n    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n\n    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);\n    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);\n    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n    --sidebar-chevron-size: var(--sidebar-spacing-unit);\n    --sidebar-chevron-color: var(--sidebar-text-color);\n\n    --sidebar-border-radius: 4px;\n    --sidebar-background-color: #fff;\n    --sidebar-font-size: var(--font-size-base);\n    --sidebar-font-family: var(--font-family-primary);\n    --sidebar-right-line-color: var(--color-border-light);\n    --sidebar-text-color: var(--color-text-main);\n    --sidebar-text-active-color: var(--sidebar-text-color);\n    --sidebar-text-active-background-color: var(--color-border-light);\n    --sidebar-width: 285px;\n\n    --sidebar-separator-line-color: #dadada;\n    --sidebar-separator-label-color: var(--sidebar-text-color);\n\n    /**\n     * Portal Logo\n     * */\n    --logo-height: 2rem;\n    --logo-margin: var(--sidebar-margin-left);\n\n    /**\n     * Portal Navbar\n     * */\n    --navbar-height: 60px;\n    --navbar-color-text: var(--color-content-inverse);\n    --navbar-color-background: var(--color-primary-500);\n\n    /**\n     * Portal Navbar Item\n     * */\n    --navbar-item-font-size: 16px;\n    --navbar-item-margin-horizontal: 0;\n    --navbar-item-margin-vertical: 0;\n    --navbar-item-border-radius: 10px;\n    --navbar-item-font-weight: var(--font-weight-bold);\n    --navbar-item-active-background-color: #1b75fa;\n    --navbar-item-active-text-color: var(--color-primary-contrast);\n    --navbar-item-active-text-decoration: none;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --color-content: #f5f7fa;\n      --global-border-color: #4c4c4c;\n      --inline-code-color: #ed8282;\n      --schema-require-label-color: #e55252;\n      --global-background-color: #101010;\n      --sidebar-background-color: #101010;\n      --sidebar-item-active-background-color: #424242;\n      --samples-panel-block-background-color: var(--sidebar-background-color);\n      --color-secondary-200: #1f2933;\n      --color-primary-900: #4892ff;\n      --search-marked-background-color: #707000;\n\n      --response-success-border-color: #3c8d06;\n      --response-success-background-color: #2e7102;\n      --response-error-border-color: #8d5c5c;\n      --response-error-background-color: #802828;\n      --response-redirect-border-color: #ffa500;\n      --response-redirect-background-color: #ffa5001a;\n      --response-info-border-color: #87ceeb;\n      --response-info-background-color: #87ceeb1a;\n\n      --link-color: #4d91ff;\n      --link-hover-color: #3686ff;\n\n      --navbar-color-background: #f2f2f2;\n\n      .search-input {\n        color: var(--color-content);\n      }\n\n      .button-clear {\n        --color-secondary-600: #3e4c59;\n        --color-secondary-400: #1b1b1b;\n      }\n    }\n  }\n"])));
+var templateObject_1;

package/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useControl';
+export * from './useMount';
+export * from './useUnmount';

package/hooks/useControl.d.ts

@@ -0,0 +1,6 @@
+export declare type UseControlReturnType = {
+    isOpened: boolean;
+    handleOpen: () => void;
+    handleClose: () => void;
+};
+export declare const useControl: (initialVal?: boolean) => UseControlReturnType;

package/hooks/useControl.js

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react';
+export var useControl = function (initialVal) {
+    if (initialVal === void 0) { initialVal = false; }
+    var _a = useState(initialVal), isOpened = _a[0], setIsOpened = _a[1];
+    var handleOpen = useCallback(function () { return setIsOpened(true); }, []);
+    var handleClose = useCallback(function () { return setIsOpened(false); }, []);
+    return {
+        isOpened: isOpened,
+        handleOpen: handleOpen,
+        handleClose: handleClose,
+    };
+};

package/hooks/useMount.d.ts

@@ -0,0 +1 @@
+export declare const useMount: (callback: () => void) => void;

package/hooks/useMount.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+export var useMount = function (callback) {
+    useEffect(function () {
+        callback();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};

package/hooks/useUnmount.d.ts

@@ -0,0 +1 @@
+export declare const useUnmount: (callback: () => void) => void;

package/hooks/useUnmount.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+export var useUnmount = function (callback) {
+    useEffect(function () {
+        return function () {
+            callback();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};

package/icons/ShelfIcon/ShelfIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface ShelfIconProps {
+    className?: string;
+    float?: 'left' | 'right';
+    size?: string;
+    color?: string;
+    direction: 'left' | 'right' | 'up' | 'down';
+    style?: React.CSSProperties;
+}
+export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {}, never>;

package/icons/ShelfIcon/ShelfIcon.js

@@ -0,0 +1,33 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { getCssColorVariable } from '../../utils/css-variables';
+var directionMap = {
+    right: '0deg',
+    down: '90deg',
+    left: '180deg',
+    up: '270deg',
+};
+var IntShelfIcon = function (_a) {
+    var className = _a.className, style = _a.style;
+    return (_jsxs("svg", __assign({ className: className, style: style, viewBox: "0 0 4.25 7", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, { children: [_jsx("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }), _jsx("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })] })));
+};
+export var ShelfIcon = styled(IntShelfIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '9px' : _b, _c = _a.float, float = _c === void 0 ? '' : _c, direction = _a.direction, color = _a.color;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "])), size, size, float, directionMap[direction], getCssColorVariable(color));
+});
+var templateObject_1, templateObject_2;

package/icons/ShelfIcon/index.js

@@ -0,0 +1 @@
+export { ShelfIcon } from './ShelfIcon';

package/icons/index.js

@@ -0,0 +1 @@
+export * from './ShelfIcon';