@redocly/theme 0.64.0-next.2 → 0.64.0-next.3

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.js

@@ -1,95 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExcalidrawDiagram = ExcalidrawDiagram;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../../core/utils");
-const hooks_1 = require("../../../core/hooks");
-const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
-function ExcalidrawDiagram({ diagramHtml, className }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const open = () => setIsOpen(true);
-    const close = () => setIsOpen(false);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('excalidraw-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/ExcalidrawDiagram/ExcalidrawDiagram", onClick: open, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && open(), role: "button", tabIndex: 0, "aria-label": translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen') }),
-        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
-                zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
-                zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
-                fitToView: translate('excalidraw.reset', 'Fit to view'),
-                close: translate('excalidraw.close', 'Close'),
-                dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
-            } },
-            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
-}
-const Wrapper = styled_components_1.default.div `
-  background-color: var(--excalidraw-bg-color);
-  border-radius: var(--excalidraw-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-  overflow: hidden;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
-
-    > rect {
-      fill: var(--excalidraw-bg-color);
-    }
-  }
-
-  & + & {
-    margin-top: var(--spacing-md);
-  }
-`;
-const ViewerContent = styled_components_1.default.div `
-  svg {
-    display: block;
-    max-width: none !important;
-  }
-`;
-//# sourceMappingURL=ExcalidrawDiagram.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.d.ts

@@ -1 +0,0 @@
-export declare const excalidraw: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.d.ts

@@ -1 +0,0 @@
-export declare const excalidrawDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excalidrawDarkMode = void 0;
-const styled_components_1 = require("styled-components");
-exports.excalidrawDarkMode = (0, styled_components_1.css) `
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-`;
-//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excalidraw = void 0;
-const styled_components_1 = require("styled-components");
-exports.excalidraw = (0, styled_components_1.css) `
-  /**
-  * @tokens Excalidraw
-  */
-
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  // @tokens End
-`;
-//# sourceMappingURL=variables.js.map

package/src/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.tsx

@@ -1,85 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-import { concatClassNames } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
-
-type ExcalidrawDiagramProps = {
-  diagramHtml: string;
-  className?: string;
-};
-
-export function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-
-  return (
-    <>
-      <Wrapper
-        className={concatClassNames('excalidraw-wrapper', className)}
-        dangerouslySetInnerHTML={{ __html: diagramHtml }}
-        data-component-name="Markdoc/ExcalidrawDiagram/ExcalidrawDiagram"
-        onClick={open}
-        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && open()}
-        role="button"
-        tabIndex={0}
-        aria-label={translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen')}
-      />
-      <SvgViewer
-        isOpen={isOpen}
-        onClose={close}
-        labels={{
-          zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
-          zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
-          fitToView: translate('excalidraw.reset', 'Fit to view'),
-          close: translate('excalidraw.close', 'Close'),
-          dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
-        }}
-      >
-        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
-      </SvgViewer>
-    </>
-  );
-}
-
-const Wrapper = styled.div`
-  background-color: var(--excalidraw-bg-color);
-  border-radius: var(--excalidraw-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-  overflow: hidden;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
-
-    > rect {
-      fill: var(--excalidraw-bg-color);
-    }
-  }
-
-  & + & {
-    margin-top: var(--spacing-md);
-  }
-`;
-
-const ViewerContent = styled.div`
-  svg {
-    display: block;
-    max-width: none !important;
-  }
-`;

package/src/markdoc/components/ExcalidrawDiagram/variables.dark.ts

@@ -1,5 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidrawDarkMode = css`
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-`;

package/src/markdoc/components/ExcalidrawDiagram/variables.ts

@@ -1,12 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidraw = css`
-  /**
-  * @tokens Excalidraw
-  */
-
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  // @tokens End
-`;