@quadrats/react 0.7.8 → 1.1.0

package/accordion/jsx-serializer/createJsxSerializeAccordion.js

@@ -0,0 +1,48 @@
+import { ACCORDION_TYPES } from '@quadrats/common/accordion';
+import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderAccordionElements } from './defaultRenderAccordionElements.js';
+
+function createJsxSerializeAccordion(options = {}) {
+    const { accordion = {}, accordion_title = {}, accordion_content = {}, } = options;
+    const accordionType = accordion.type || ACCORDION_TYPES.accordion;
+    const titleType = accordion_title.type || ACCORDION_TYPES.accordion_title;
+    const contentType = accordion_content.type || ACCORDION_TYPES.accordion_content;
+    const renderAccordion = accordion.render || defaultRenderAccordionElements.accordion;
+    const renderAccordionTitle = accordion_title.render || defaultRenderAccordionElements.accordion_title;
+    const renderAccordionContent = accordion_content.render || defaultRenderAccordionElements.accordion_content;
+    return createJsxSerializeElements([
+        {
+            type: accordionType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderAccordion({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: titleType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderAccordionTitle({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderAccordionContent({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+export { createJsxSerializeAccordion };

package/accordion/jsx-serializer/defaultRenderAccordionElements.d.ts

@@ -0,0 +1,2 @@
+import { AccordionJsxSerializeElements } from './typings';
+export declare const defaultRenderAccordionElements: AccordionJsxSerializeElements;

package/accordion/jsx-serializer/defaultRenderAccordionElements.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { defaultRenderAccordionElements as defaultRenderAccordionElements$1, useAccordion } from '@quadrats/react/accordion';
+
+const AccordionContentJsxSerializeElement = ({ children }) => {
+    const { expanded } = useAccordion();
+    if (!expanded)
+        return null;
+    return React.createElement("p", { className: "qdr-accordion__content" }, children);
+};
+const defaultRenderAccordionElements = {
+    accordion: defaultRenderAccordionElements$1.accordion,
+    accordion_title: ({ children }) => React.createElement("p", { className: "qdr-accordion__title" }, children),
+    accordion_content: props => React.createElement(AccordionContentJsxSerializeElement, Object.assign({}, props)),
+};
+
+export { defaultRenderAccordionElements };

package/accordion/jsx-serializer/index.cjs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var React = require('react');
+var accordion = require('@quadrats/react/accordion');
+var accordion$1 = require('@quadrats/common/accordion');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+const AccordionContentJsxSerializeElement = ({ children }) => {
+    const { expanded } = accordion.useAccordion();
+    if (!expanded)
+        return null;
+    return React.createElement("p", { className: "qdr-accordion__content" }, children);
+};
+const defaultRenderAccordionElements = {
+    accordion: accordion.defaultRenderAccordionElements.accordion,
+    accordion_title: ({ children }) => React.createElement("p", { className: "qdr-accordion__title" }, children),
+    accordion_content: props => React.createElement(AccordionContentJsxSerializeElement, Object.assign({}, props)),
+};
+
+function createJsxSerializeAccordion(options = {}) {
+    const { accordion = {}, accordion_title = {}, accordion_content = {}, } = options;
+    const accordionType = accordion.type || accordion$1.ACCORDION_TYPES.accordion;
+    const titleType = accordion_title.type || accordion$1.ACCORDION_TYPES.accordion_title;
+    const contentType = accordion_content.type || accordion$1.ACCORDION_TYPES.accordion_content;
+    const renderAccordion = accordion.render || defaultRenderAccordionElements.accordion;
+    const renderAccordionTitle = accordion_title.render || defaultRenderAccordionElements.accordion_title;
+    const renderAccordionContent = accordion_content.render || defaultRenderAccordionElements.accordion_content;
+    return jsxSerializer.createJsxSerializeElements([
+        {
+            type: accordionType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderAccordion({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: titleType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderAccordionTitle({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderAccordionContent({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+exports.createJsxSerializeAccordion = createJsxSerializeAccordion;
+exports.defaultRenderAccordionElements = defaultRenderAccordionElements;

package/accordion/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderAccordionElements } from './defaultRenderAccordionElements';
+export { CreateJsxSerializeAccordionOptions, createJsxSerializeAccordion } from './createJsxSerializeAccordion';

package/accordion/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderAccordionElements } from './defaultRenderAccordionElements.js';
+export { createJsxSerializeAccordion } from './createJsxSerializeAccordion.js';

package/accordion/jsx-serializer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/accordion/jsx-serializer",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/accordion/jsx-serializer/typings.d.ts

@@ -0,0 +1,4 @@
+import { AccordionElement, AccordionTypeKey, AccordionTitleTypeKey, AccordionContentTypeKey } from '@quadrats/common/accordion';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export type JsxSerializeAccordionElementProps = JsxSerializeElementProps<AccordionElement>;
+export type AccordionJsxSerializeElements = Record<AccordionTypeKey, (props: JsxSerializeAccordionElementProps) => JSX.Element | null | undefined> & Record<AccordionTitleTypeKey, (props: JsxSerializeElementProps) => JSX.Element | null | undefined> & Record<AccordionContentTypeKey, (props: JsxSerializeElementProps) => JSX.Element | null | undefined>;

package/accordion/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@quadrats/react/accordion",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/accordion/toolbar/AccordionToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactAccordion } from '@quadrats/react/accordion';
+export interface AccordionToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactAccordion;
+}
+declare function AccordionToolbarIcon(props: AccordionToolbarIconProps): React.JSX.Element;
+export default AccordionToolbarIcon;

package/accordion/toolbar/AccordionToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useAccordionTool } from './useAccordionTool.js';
+
+function AccordionToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { onClick } = useAccordionTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+export { AccordionToolbarIcon as default };

package/accordion/toolbar/index.cjs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useAccordionTool(controller) {
+    const editor = react.useSlateStatic();
+    return {
+        onClick: () => controller.insertAccordion(editor),
+    };
+}
+
+function AccordionToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { onClick } = useAccordionTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+exports.AccordionToolbarIcon = AccordionToolbarIcon;
+exports.useAccordionTool = useAccordionTool;

package/accordion/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAccordionTool';
+export { AccordionToolbarIconProps, default as AccordionToolbarIcon } from './AccordionToolbarIcon';

package/accordion/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useAccordionTool } from './useAccordionTool.js';
+export { default as AccordionToolbarIcon } from './AccordionToolbarIcon.js';

package/accordion/toolbar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/accordion/toolbar",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/accordion/toolbar/useAccordionTool.d.ts

@@ -0,0 +1,4 @@
+import { ReactAccordion } from '@quadrats/react/accordion';
+export declare function useAccordionTool(controller: ReactAccordion): {
+    onClick: () => void;
+};

package/accordion/toolbar/useAccordionTool.js

@@ -0,0 +1,10 @@
+import { useSlateStatic } from '@quadrats/react';
+
+function useAccordionTool(controller) {
+    const editor = useSlateStatic();
+    return {
+        onClick: () => controller.insertAccordion(editor),
+    };
+}
+
+export { useAccordionTool };

package/accordion/typings.d.ts

@@ -0,0 +1,25 @@
+import { Editor } from '@quadrats/core';
+import { Accordion, AccordionElement, AccordionTypeKey, AccordionTitleTypeKey, AccordionContentTypeKey } from '@quadrats/common/accordion';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
+export type AccordionContextType = {
+    expanded: boolean;
+};
+export type RenderAccordionElementProps = RenderElementProps<AccordionElement>;
+export type AccordionRenderElements = Record<AccordionTypeKey, (props: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderAccordionElementProps['element'];
+}) => JSX.Element | null | undefined> & Record<AccordionTitleTypeKey, (props: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderElementProps['element'];
+}) => JSX.Element | null | undefined> & Record<AccordionContentTypeKey, (props: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderElementProps['element'];
+}) => JSX.Element | null | undefined>;
+export type ReactAccordionCreateRenderElementOptions = {
+    [K in AccordionTypeKey | AccordionTitleTypeKey | AccordionContentTypeKey]?: AccordionRenderElements[K];
+};
+export interface ReactAccordion extends Accordion<Editor>, WithCreateHandlers, WithCreateRenderElement<[ReactAccordionCreateRenderElementOptions?]> {
+}

package/align/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Default hotkey for toggling align.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export declare const ALIGN_LEFT_HOTKEY = "mod+shift+l";
+export declare const ALIGN_CENTER_HOTKEY = "mod+shift+e";
+export declare const ALIGN_RIGHT_HOTKEY = "mod+shift+r";

package/align/constants.js

@@ -0,0 +1,10 @@
+/**
+ * Default hotkey for toggling align.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const ALIGN_LEFT_HOTKEY = 'mod+shift+l';
+const ALIGN_CENTER_HOTKEY = 'mod+shift+e';
+const ALIGN_RIGHT_HOTKEY = 'mod+shift+r';
+
+export { ALIGN_CENTER_HOTKEY, ALIGN_LEFT_HOTKEY, ALIGN_RIGHT_HOTKEY };

package/align/createReactAlign.d.ts

@@ -0,0 +1,2 @@
+import { ReactAlign } from './typings';
+export declare function createReactAlign(): ReactAlign;

package/align/createReactAlign.js

@@ -0,0 +1,26 @@
+import isHotkey from 'is-hotkey';
+import { createAlign } from '@quadrats/common/align';
+import { ALIGN_RIGHT_HOTKEY, ALIGN_LEFT_HOTKEY, ALIGN_CENTER_HOTKEY } from './constants.js';
+
+function createReactAlign() {
+    const core = createAlign();
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkeys = {} } = {}) => ({
+            onKeyDown: (event, editor, next) => {
+                const { left = ALIGN_LEFT_HOTKEY, center = ALIGN_CENTER_HOTKEY, right = ALIGN_RIGHT_HOTKEY } = hotkeys;
+                if (isHotkey(left, event)) {
+                    core.setAlign(editor, 'left');
+                }
+                else if (isHotkey(center, event)) {
+                    core.setAlign(editor, 'center');
+                }
+                else if (isHotkey(right, event)) {
+                    core.setAlign(editor, 'right');
+                }
+                else {
+                    next();
+                }
+            },
+        }) });
+}
+
+export { createReactAlign };

package/align/index.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var isHotkey = require('is-hotkey');
+var align = require('@quadrats/common/align');
+
+/**
+ * Default hotkey for toggling align.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const ALIGN_LEFT_HOTKEY = 'mod+shift+l';
+const ALIGN_CENTER_HOTKEY = 'mod+shift+e';
+const ALIGN_RIGHT_HOTKEY = 'mod+shift+r';
+
+function createReactAlign() {
+    const core = align.createAlign();
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkeys = {} } = {}) => ({
+            onKeyDown: (event, editor, next) => {
+                const { left = ALIGN_LEFT_HOTKEY, center = ALIGN_CENTER_HOTKEY, right = ALIGN_RIGHT_HOTKEY } = hotkeys;
+                if (isHotkey(left, event)) {
+                    core.setAlign(editor, 'left');
+                }
+                else if (isHotkey(center, event)) {
+                    core.setAlign(editor, 'center');
+                }
+                else if (isHotkey(right, event)) {
+                    core.setAlign(editor, 'right');
+                }
+                else {
+                    next();
+                }
+            },
+        }) });
+}
+
+exports.ALIGN_CENTER_HOTKEY = ALIGN_CENTER_HOTKEY;
+exports.ALIGN_LEFT_HOTKEY = ALIGN_LEFT_HOTKEY;
+exports.ALIGN_RIGHT_HOTKEY = ALIGN_RIGHT_HOTKEY;
+exports.createReactAlign = createReactAlign;

package/align/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export * from './constants';
+export { createReactAlign } from './createReactAlign';

package/align/index.js

@@ -0,0 +1,2 @@
+export { ALIGN_CENTER_HOTKEY, ALIGN_LEFT_HOTKEY, ALIGN_RIGHT_HOTKEY } from './constants.js';
+export { createReactAlign } from './createReactAlign.js';

package/align/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/align",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/align/toolbar/AlignToolbarIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactAlign } from '@quadrats/react/align';
+import { AlignValue } from '@quadrats/common/align';
+export interface AlignToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactAlign;
+    value: AlignValue;
+}
+declare function AlignToolbarIcon(props: AlignToolbarIconProps): React.JSX.Element;
+export default AlignToolbarIcon;

package/align/toolbar/AlignToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useAlignTool } from './useAlignTool.js';
+
+function AlignToolbarIcon(props) {
+    const { controller, value } = props, rest = __rest(props, ["controller", "value"]);
+    const { active, onClick } = useAlignTool(controller, value);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { AlignToolbarIcon as default };

package/align/toolbar/index.cjs.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useAlignTool(controller, value) {
+    const editor = react.useQuadrats();
+    return {
+        active: controller.isAlignActive(editor, value),
+        onClick: () => {
+            if (controller.isAlignActive(editor, value)) {
+                controller.removeAlign(editor);
+            }
+            else {
+                controller.setAlign(editor, value);
+            }
+        },
+    };
+}
+
+function AlignToolbarIcon(props) {
+    const { controller, value } = props, rest = tslib.__rest(props, ["controller", "value"]);
+    const { active, onClick } = useAlignTool(controller, value);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.AlignToolbarIcon = AlignToolbarIcon;
+exports.useAlignTool = useAlignTool;

package/align/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAlignTool';
+export { AlignToolbarIconProps, default as AlignToolbarIcon } from './AlignToolbarIcon';

package/align/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useAlignTool } from './useAlignTool.js';
+export { default as AlignToolbarIcon } from './AlignToolbarIcon.js';

package/align/toolbar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/align/toolbar",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/align/toolbar/useAlignTool.d.ts

@@ -0,0 +1,6 @@
+import { ReactAlign } from '@quadrats/react/align';
+import { AlignValue } from '@quadrats/common/align';
+export declare function useAlignTool(controller: ReactAlign, value: AlignValue): {
+    active: boolean;
+    onClick: () => void;
+};

package/align/toolbar/useAlignTool.js

@@ -0,0 +1,18 @@
+import { useQuadrats } from '@quadrats/react';
+
+function useAlignTool(controller, value) {
+    const editor = useQuadrats();
+    return {
+        active: controller.isAlignActive(editor, value),
+        onClick: () => {
+            if (controller.isAlignActive(editor, value)) {
+                controller.removeAlign(editor);
+            }
+            else {
+                controller.setAlign(editor, value);
+            }
+        },
+    };
+}
+
+export { useAlignTool };

package/align/typings.d.ts

@@ -0,0 +1,17 @@
+import { Align, AlignValue } from '@quadrats/common/align';
+import { Editor } from '@quadrats/core';
+import { Handlers } from '@quadrats/react';
+export interface AlignLeaf {
+    align?: AlignValue;
+    alignVariant?: string;
+}
+export interface ReactAlignCreateHandlersOptions {
+    hotkeys?: {
+        left?: string;
+        center?: string;
+        right?: string;
+    };
+}
+export interface ReactAlign<E extends Editor = Editor> extends Align<E> {
+    createHandlers: (options?: ReactAlignCreateHandlersOptions) => Handlers;
+}

package/blockquote/blockquote.css

@@ -0,0 +1 @@
+.qdr-blockquote{width:100%;position:relative;margin:var(--qdr-spacing-14) 0;padding:var(--qdr-spacing-6) 0 var(--qdr-spacing-6) var(--qdr-spacing-8)}.qdr-blockquote>*{margin:0;font-size:var(--qdr-typography-article-subtitle1-font-size);line-height:var(--qdr-typography-article-subtitle1-line-height);letter-spacing:var(--qdr-typography-article-subtitle1-letter-spacing);font-weight:var(--qdr-typography-article-subtitle1-font-weight)}.qdr-blockquote__line{position:absolute;top:0;left:-2px;background-color:var(--qdr-primary);width:2px;height:100%}

package/blockquote/blockquote.scss

@@ -0,0 +1,23 @@
+.qdr-blockquote {
+  width: 100%;
+  position: relative;
+  margin: var(--qdr-spacing-14) 0;
+  padding: var(--qdr-spacing-6) 0 var(--qdr-spacing-6) var(--qdr-spacing-8);
+
+  > * {
+    margin: 0;
+    font-size: var(--qdr-typography-article-subtitle1-font-size);
+    line-height: var(--qdr-typography-article-subtitle1-line-height);
+    letter-spacing: var(--qdr-typography-article-subtitle1-letter-spacing);
+    font-weight: var(--qdr-typography-article-subtitle1-font-weight);
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    left: -2px;
+    background-color: var(--qdr-primary);
+    width: 2px;
+    height: 100%;
+  }
+}

package/blockquote/defaultRenderBlockquoteElement.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
-const defaultRenderBlockquoteElement = ({ attributes, children, }) => React.createElement("blockquote", Object.assign({}, attributes, { className: "qdr-blockquote" }), children);
+const defaultRenderBlockquoteElement = ({ attributes, children, }) => (React.createElement("blockquote", Object.assign({}, attributes, { className: "qdr-blockquote" }),
+    React.createElement("div", { className: "qdr-blockquote__line" }),
+    children));
 
 export { defaultRenderBlockquoteElement };

package/blockquote/index.cjs.js

@@ -14,7 +14,9 @@ var core = require('@quadrats/core');
  */
 const BLOCKQUOTE_HOTKEY = 'ctrl+opt+q';
 
-const defaultRenderBlockquoteElement = ({ attributes, children, }) => React.createElement("blockquote", Object.assign({}, attributes, { className: "qdr-blockquote" }), children);
+const defaultRenderBlockquoteElement = ({ attributes, children, }) => (React.createElement("blockquote", Object.assign({}, attributes, { className: "qdr-blockquote" }),
+    React.createElement("div", { className: "qdr-blockquote__line" }),
+    children));
 
 const BLOCKQUOTE_EXIT_BREAK_HOTKEY = 'enter';
 function createReactBlockquote(options = {}) {

package/blockquote/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/blockquote",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.js",
   "typings": "./index.d.ts"

package/card/card.css

@@ -0,0 +1 @@
+.qdr-card{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-6);border-radius:var(--qdr-radius-3);border:1px solid var(--qdr-border);background-color:var(--qdr-block);margin:var(--qdr-spacing-12) 0;padding:var(--qdr-spacing-6)}.qdr-card:hover .qdr-card__inline-toolbar{opacity:1;pointer-events:auto}.qdr-card--rightImageLeftText{flex-direction:row-reverse}.qdr-card-modal__main{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-12)}.qdr-card-modal__block{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-6)}.qdr-card-modal__block-title{align-self:stretch;display:flex;align-items:center;justify-content:space-between;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h5-font-size);line-height:var(--qdr-typography-basic-h5-line-height);letter-spacing:var(--qdr-typography-basic-h5-letter-spacing);font-weight:var(--qdr-typography-basic-h5-font-weight);margin:0}.qdr-card-modal__block-content{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-9)}.qdr-card-modal__block-field{width:100%}.qdr-card-modal__toggle-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight)}.qdr-card-modal__link-wrapper{align-self:stretch;display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-7)}.qdr-card-modal__url-field{flex:1}.qdr-card__placeholder{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-6);border-radius:var(--qdr-radius-3);border:1px solid var(--qdr-border);background-color:var(--qdr-block);margin:var(--qdr-spacing-12) 0;padding:var(--qdr-spacing-6)}.qdr-card__placeholder__line{align-self:stretch;height:16px;border-radius:var(--qdr-radius-6);opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-card__placeholder__line--small-radius{border-radius:var(--qdr-radius-3)}.qdr-card__placeholder-image-wrapper{position:relative;width:240px;display:flex;align-items:center;justify-content:center;border-radius:var(--qdr-radius-1);color:var(--qdr-action-disabled)}.qdr-card__placeholder-bg{position:absolute;inset:0;border-radius:var(--qdr-radius-1);opacity:.2;background:linear-gradient(90deg, var(--qdr-action-inactive) 0%, var(--qdr-divider) 100%)}.qdr-card__placeholder-contents{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;align-self:stretch;flex:1}.qdr-card__placeholder-content-wrapper{display:flex;flex-direction:column;align-self:stretch;gap:var(--qdr-spacing-7)}.qdr-card__placeholder-description-wrapper{display:flex;flex-direction:column;align-self:stretch;gap:var(--qdr-spacing-4)}.qdr-card__placeholder-link-wrapper{display:flex;align-items:center;justify-content:flex-end;align-self:stretch}.qdr-card__image-wrapper{width:240px;display:flex;align-items:center;justify-content:center;border-radius:var(--qdr-radius-1)}.qdr-card__image{width:100%;border-radius:var(--qdr-radius-1)}.qdr-card__contents{flex:1}.qdr-card__content-wrapper{width:100%}.qdr-card__title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-h5-font-size);line-height:var(--qdr-typography-article-h5-line-height);letter-spacing:var(--qdr-typography-article-h5-letter-spacing);font-weight:var(--qdr-typography-article-h5-font-weight);margin:0;word-break:break-word}.qdr-card__description{color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-body2-font-size);line-height:var(--qdr-typography-article-body2-line-height);letter-spacing:var(--qdr-typography-article-body2-letter-spacing);font-weight:var(--qdr-typography-article-body2-font-weight);margin:var(--qdr-spacing-4) 0 0;word-break:break-word}.qdr-card__remark{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-article-body2-font-size);line-height:var(--qdr-typography-article-body2-line-height);letter-spacing:var(--qdr-typography-article-body2-letter-spacing);font-weight:var(--qdr-typography-article-body2-font-weight);margin:var(--qdr-spacing-2) 0 0}.qdr-card__link-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;margin-top:var(--qdr-spacing-9)}.qdr-card__link-wrapper--rightImageLeftText{justify-content:flex-start}.qdr-card__link{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-1);color:var(--qdr-primary);font-size:var(--qdr-typography-article-h6-font-size);line-height:var(--qdr-typography-article-h6-line-height);letter-spacing:var(--qdr-typography-article-h6-letter-spacing);font-weight:var(--qdr-typography-article-h6-font-weight);text-decoration:none}.qdr-card__link:hover{color:var(--qdr-primary-light)}