@redocly/theme 0.4.1 → 0.4.4

package/EditPageButton/EditPageButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface EditPageButtonProps {
+    text: string;
+    to: string;
+    icon: string;
+}
+export declare const EditPageButton: ({ text, to, icon }: EditPageButtonProps) => JSX.Element;

package/EditPageButton/EditPageButton.js

@@ -0,0 +1,24 @@
+"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.EditPageButton = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+var EditPageButton = function (_a) {
+    var text = _a.text, to = _a.to, icon = _a.icon;
+    return (react_1.default.createElement(EditButton, { to: to },
+        react_1.default.createElement(ButtonIcon, { src: icon }),
+        react_1.default.createElement(ButtonText, null, text)));
+};
+exports.EditPageButton = EditPageButton;
+var EditButton = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: auto;\n  display: inline-flex;\n  color: var(--color-content);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  text-decoration: none;\n"], ["\n  margin-left: auto;\n  display: inline-flex;\n  color: var(--color-content);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  text-decoration: none;\n"])));
+var ButtonIcon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 14px;\n  padding-right: 3px;\n"], ["\n  height: 14px;\n  padding-right: 3px;\n"])));
+var ButtonText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: 14px;\n"], ["\n  line-height: 14px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/EditPageButton/index.d.ts

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

package/EditPageButton/index.js

@@ -0,0 +1,17 @@
+"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("../EditPageButton/EditPageButton"), exports);

package/LastUpdated/LastUpdated.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface LastUpdatedProps {
+    lastModified: string | Date;
+}
+export declare function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null;

package/LastUpdated/LastUpdated.js

@@ -0,0 +1,35 @@
+"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.LastUpdated = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+// import { timeAgo } from '../mocks/utils';
+// TODO: use timeago.js instead
+// import { format } from 'timeago.js';
+// Last updated ${format(lastModified)}
+function timeAgo(date) {
+    var d = new Date(date);
+    return "".concat(d.getDate(), "-").concat(d.getMonth() + 1, "-").concat(d.getFullYear());
+}
+function LastUpdated(_a) {
+    var lastModified = _a.lastModified;
+    var lastUpdatedBlock = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).lastUpdatedBlock;
+    if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
+        return null;
+    }
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated" },
+        "Last updated ",
+        timeAgo(lastModified)));
+}
+exports.LastUpdated = LastUpdated;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 30px;\n"], ["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 30px;\n"])));
+var templateObject_1;

package/Markdown/Admonition.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface AdmonitionTypeProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
 }
-interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
 }
 export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;

package/Markdown/MarkdownLayout.d.ts

@@ -4,6 +4,12 @@ declare type MarkdownLayoutProps = {
     markdownWrapper: React.ReactNode;
     showPrevButton?: boolean;
     showNextButton?: boolean;
+    editPage?: {
+        to: string;
+        text: string;
+        icon: string;
+    };
+    lastModified?: string | Date;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, showPrevButton, showNextButton, editPage, lastModified, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/Markdown/MarkdownLayout.js

@@ -1,19 +1,31 @@
 "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.MarkdownLayout = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var PageWrapper_1 = require("../Markdown/PageWrapper");
 var ContainerWrapper_1 = require("../Markdown/ContainerWrapper");
 var PageNavigation_1 = require("../PageNavigation/PageNavigation");
+var EditPageButton_1 = require("../EditPageButton");
+var LastUpdated_1 = require("../LastUpdated/LastUpdated");
 function MarkdownLayout(_a) {
-    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton;
+    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton, editPage = _a.editPage, lastModified = _a.lastModified;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
+            react_1.default.createElement(LayoutTop, null,
+                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: lastModified }),
+                editPage && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))),
             markdownWrapper,
             react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
         tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;
+var LayoutTop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  flex-flow: row nowrap;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  flex-flow: row nowrap;\n"])));
+var templateObject_1;

package/Markdown/MarkdownWrapper.js

@@ -34,7 +34,7 @@ exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateOb
 // TODO: Can users specify another className or we should hardcode it?
 function headingAnchor(className) {
     if (className === void 0) { className = 'anchor'; }
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "], ["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "])), className, className, className, className, className);
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\n      visibility: hidden;\n\n      background-image: var(--heading-anchor-icon);\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "], ["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: var(--heading-anchor-offset-right);\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      fill: var(--heading-anchor-color);\n      visibility: hidden;\n\n      background-image: var(--heading-anchor-icon);\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "])), className, className, className, className, className);
 }
 exports.headingAnchor = headingAnchor;
 exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({

package/Panel/PanelComponent.d.ts

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

package/Panel/PanelComponent.js

@@ -54,9 +54,9 @@ var PanelBody_1 = require("../Panel/PanelBody");
 var PanelHeader_1 = require("../Panel/PanelHeader");
 var PanelHeaderTitle_1 = require("../Panel/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, description = _a.description;
-    var _c = __read((0, react_1.useState)(expanded), 2), isExpanded = _c[0], setExpanded = _c[1];
-    var _d = __read((0, react_1.useState)(false), 2), animate = _d[0], setAnimate = _d[1];
+    var _b = _a.expanded, expanded = _b === void 0 ? true : _b, _c = _a.renderChildrenHidden, renderChildrenHidden = _c === void 0 ? false : _c, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
+    var _d = __read((0, react_1.useState)(expanded), 2), isExpanded = _d[0], setExpanded = _d[1];
+    var _e = __read((0, react_1.useState)(false), 2), animate = _e[0], setAnimate = _e[1];
     var toggle = function (_a) {
         var target = _a.target;
         if (target instanceof HTMLAnchorElement)
@@ -73,7 +73,7 @@ function PanelComponent(_a) {
                     react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-cy": "title" }, header),
                     react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
                     description)))),
-        isExpanded && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
+        (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
 }
 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"])));

package/Sidebar/ArrowBack.js

@@ -17,5 +17,5 @@ var Arrow = function (_a) {
             react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
             react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 };
-exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: var(--sidebar-group-item-chevron-color);\n"], ["\n  fill: var(--sidebar-group-item-chevron-color);\n"])));
+exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: var(--sidebar-back-button-icon-color);\n  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n\n  background-image: var(--sidebar-back-button-icon);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n"], ["\n  fill: var(--sidebar-back-button-icon-color);\n  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n\n  background-image: var(--sidebar-back-button-icon);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n"])));
 var templateObject_1;

package/Sidebar/BackButton.js

@@ -18,5 +18,5 @@ function BackButton(_a) {
         children));
 }
 exports.BackButton = BackButton;
-var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n    fill: var(--sidebar-back-button-icon-color);\n  }\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"], ["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n    fill: var(--sidebar-back-button-icon-color);\n  }\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"])));
+var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"], ["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"])));
 var templateObject_1;

package/Sidebar/MobileSidebarButton.js

@@ -11,11 +11,15 @@ exports.MobileSidebarButton = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MobileSidebarButton = styled_components_1.default.span.attrs(function () { return ({
     'data-component-name': 'Sidebar/MobileSidebarButton',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--color-primary-500);\n  width: 55px;\n  user-select: none;\n  height: 55px;\n  bottom: 44px;\n  cursor: pointer;\n  position: fixed;\n  right: 20px;\n  z-index: 3;\n  box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.75s;\n\n  ", " {\n    display: none;\n    transform: rotate(180deg);\n  }\n\n  ", " {\n    display: none !important;\n  }\n\n  :after {\n    content: '';\n    display: inline-block;\n    position: absolute;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    width: 25px;\n    height: 25px;\n    background-color: #fff;\n    -webkit-mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n      no-repeat 50% 50%;\n    mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n      no-repeat 50% 50%;\n  }\n"], ["\n  background-color: var(--color-primary-500);\n  width: 55px;\n  user-select: none;\n  height: 55px;\n  bottom: 44px;\n  cursor: pointer;\n  position: fixed;\n  right: 20px;\n  z-index: 3;\n  box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.75s;\n\n  ", " {\n    display: none;\n    transform: rotate(180deg);\n  }\n\n  ", " {\n    display: none !important;\n  }\n\n  :after {\n    content: '';\n    display: inline-block;\n    position: absolute;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    width: 25px;\n    height: 25px;\n    background-color: #fff;\n    -webkit-mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n      no-repeat 50% 50%;\n    mask: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A\")\n      no-repeat 50% 50%;\n  }\n"])), function (props) { return (props.opened ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(\n    ", "\n  );\n  width: 55px;\n  user-select: none;\n  height: 55px;\n  bottom: 44px;\n  cursor: pointer;\n  position: fixed;\n  right: 20px;\n  z-index: 3;\n  box-shadow: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.75s;\n\n  background-image: var(--fab-icon);\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 45%;\n\n  &:hover {\n    background-color: var(--fab-background-color);\n    box-shadow: var(--fab-hover-box-shadow);\n  }\n\n  ", " {\n    display: none;\n    transform: rotate(180deg);\n  }\n\n  ", " {\n    display: none !important;\n  }\n"], ["\n  background-color: var(\n    ", "\n  );\n  width: 55px;\n  user-select: none;\n  height: 55px;\n  bottom: 44px;\n  cursor: pointer;\n  position: fixed;\n  right: 20px;\n  z-index: 3;\n  box-shadow: ", ";\n  border-radius: 50%;\n  transform: ", ";\n  transition: transform 0.75s;\n\n  background-image: var(--fab-icon);\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 45%;\n\n  &:hover {\n    background-color: var(--fab-background-color);\n    box-shadow: var(--fab-hover-box-shadow);\n  }\n\n  ", " {\n    display: none;\n    transform: rotate(180deg);\n  }\n\n  ", " {\n    display: none !important;\n  }\n"])), function (props) { return (props.opened ? '--fab-active-background' : '--fab-background-color'); }, function (props) {
+    return props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)';
+}, function (props) { return (props.opened ? 'rotate(180deg)' : 'rotate(0deg)'); }, function (_a) {
+    var _b;
     var theme = _a.theme;
-    return theme.mediaQueries.medium;
+    return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.medium;
 }, function (_a) {
+    var _b;
     var theme = _a.theme;
-    return theme.mediaQueries.print;
+    return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.print;
 });
 var templateObject_1;

package/globalStyle.d.ts

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