@mittwald/flow-react-components 1.3.0-next.33 → 1.3.0-next.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Accordion/Accordion.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs +31 -5
- package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs +6 -4
- package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.accordion {\n display: flex;\n flex-direction: column;\n\n /* Elements */\n\n .header {\n display: flex;\n flex-direction: column;\n }\n\n .headerButton {\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: start;\n flex-grow: 1;\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n border-radius: var(--accordion--corner-radius);\n column-gap: var(--accordion--spacing);\n border: none;\n background: none;\n width: 100%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--fast);\n\n @include focus.focus;\n\n &:hover {\n background-color: var(--accordion--background-color--hover);\n }\n }\n\n .content {\n display: grid;\n grid-template-rows: 0fr;\n transition-property: grid-template-rows, visibility;\n
|
|
1
|
+
{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n display: flex;\n flex-direction: column;\n\n /* Elements */\n\n .header {\n display: flex;\n flex-direction: column;\n }\n\n .headerButton {\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: start;\n flex-grow: 1;\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n border-radius: var(--accordion--corner-radius);\n column-gap: var(--accordion--spacing);\n border: none;\n background: none;\n width: 100%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--fast);\n\n @include focus.focus;\n\n &:hover {\n background-color: var(--accordion--background-color--hover);\n }\n }\n\n .content {\n display: grid;\n grid-template-rows: 0fr;\n transition-property: grid-template-rows, visibility;\n visibility: hidden;\n\n @include expandTransition.expandTransition;\n }\n\n .contentInner {\n overflow: hidden;\n padding-inline: var(--accordion--padding-x);\n transition-property: padding;\n\n @include expandTransition.expandTransition;\n }\n\n .chevron {\n transition-property: transform;\n\n @include expandTransition.expandTransition;\n }\n\n &.outline {\n border-color: var(--accordion--border-color);\n border-width: var(--accordion--border-width);\n border-style: var(--accordion--border-style);\n border-radius: var(--accordion--corner-radius);\n }\n\n &.expanded {\n .content {\n grid-template-rows: 1fr;\n visibility: visible;\n }\n\n .contentInner {\n padding-block: var(--accordion--padding-y);\n }\n\n .chevron {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -6,14 +6,17 @@ import CodeBlock_module_default from "./CodeBlock.module.mjs";
|
|
|
6
6
|
import { CodeEditor } from "../CodeEditor/CodeEditor.mjs";
|
|
7
7
|
import __locale_default from "../../../../../_virtual/_11.locale.mjs";
|
|
8
8
|
import clsx from "clsx";
|
|
9
|
-
import { useId, useState } from "react";
|
|
9
|
+
import { useId, useRef, useState } from "react";
|
|
10
10
|
import { jsx } from "react/jsx-runtime";
|
|
11
|
+
import { flushSync } from "react-dom";
|
|
11
12
|
//#region src/components/CodeBlock/CodeBlock.tsx
|
|
12
13
|
/** @flr-generate all */
|
|
13
14
|
var CodeBlock = (props) => {
|
|
14
15
|
const { code, className, copyable = false, showLineNumbers = false, children, truncateLines = false, ...rest } = props;
|
|
15
16
|
const [folded, setFolded] = useState(truncateLines !== false);
|
|
16
17
|
const [maxHeight, setMaxHeight] = useState();
|
|
18
|
+
const [expandedHeight, setExpandedHeight] = useState();
|
|
19
|
+
const editorRef = useRef(null);
|
|
17
20
|
const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
|
|
18
21
|
const rootClassName = clsx(CodeBlock_module_default.codeBlock, className);
|
|
19
22
|
const id = useId();
|
|
@@ -21,10 +24,32 @@ var CodeBlock = (props) => {
|
|
|
21
24
|
className: clsx(rootClassName, CodeBlock_module_default.withChildren),
|
|
22
25
|
children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) })
|
|
23
26
|
});
|
|
24
|
-
const
|
|
27
|
+
const heightVariables = {
|
|
28
|
+
...maxHeight ? { "--max-height": `${maxHeight}px` } : {},
|
|
29
|
+
...expandedHeight ? { "--expanded-max-height": `${expandedHeight}px` } : {}
|
|
30
|
+
};
|
|
31
|
+
const toggleFolded = () => {
|
|
32
|
+
const editor = editorRef.current;
|
|
33
|
+
if (!editor) {
|
|
34
|
+
setFolded((folded) => !folded);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const animates = getComputedStyle(editor).transitionDuration.split(",").some((duration) => parseFloat(duration) > 0);
|
|
38
|
+
if (folded) {
|
|
39
|
+
setExpandedHeight(animates ? editor.scrollHeight : void 0);
|
|
40
|
+
setFolded(false);
|
|
41
|
+
} else {
|
|
42
|
+
flushSync(() => setExpandedHeight(editor.scrollHeight));
|
|
43
|
+
editor.getBoundingClientRect();
|
|
44
|
+
setFolded(true);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
25
47
|
return /* @__PURE__ */ jsx("div", {
|
|
26
|
-
className: clsx(rootClassName,
|
|
27
|
-
style:
|
|
48
|
+
className: clsx(rootClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded),
|
|
49
|
+
style: heightVariables,
|
|
50
|
+
onTransitionEnd: (event) => {
|
|
51
|
+
if (event.propertyName === "max-height") setExpandedHeight(void 0);
|
|
52
|
+
},
|
|
28
53
|
children: /* @__PURE__ */ jsx(CodeEditor, {
|
|
29
54
|
...rest,
|
|
30
55
|
value: code,
|
|
@@ -36,6 +61,7 @@ var CodeBlock = (props) => {
|
|
|
36
61
|
showActiveLineMarker: false,
|
|
37
62
|
isReadOnly: true,
|
|
38
63
|
onCreateEditor: (view) => {
|
|
64
|
+
editorRef.current = view.dom;
|
|
39
65
|
if (!truncateLines) return;
|
|
40
66
|
const lineHeight = 20;
|
|
41
67
|
const padding = 12;
|
|
@@ -49,7 +75,7 @@ var CodeBlock = (props) => {
|
|
|
49
75
|
variant: "plain",
|
|
50
76
|
color: "secondary",
|
|
51
77
|
size: "s",
|
|
52
|
-
onPress:
|
|
78
|
+
onPress: toggleFolded,
|
|
53
79
|
"aria-expanded": !folded,
|
|
54
80
|
"aria-controls": id,
|
|
55
81
|
children: stringFormatter.format(folded ? "showMore" : "showLess")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n > {\n /** The code displayed in the block. */\n code?: string;\n /**\n * Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n *\n * @default: false\n */\n truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n /* The full height, only while the toggle animates to or from it. */\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n {/* Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. */}\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const heightVariables = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n } as React.CSSProperties;\n\n /* A height transition needs a length on both ends – `none` does not\n interpolate. So the full height is measured for the transition and\n released once it ended, and code that changes later is not clipped. */\n const toggleFolded = () => {\n const editor = editorRef.current;\n\n if (!editor) {\n setFolded((folded) => !folded);\n return;\n }\n\n const animates = getComputedStyle(editor)\n .transitionDuration.split(\",\")\n .some((duration) => parseFloat(duration) > 0);\n\n if (folded) {\n setExpandedHeight(animates ? editor.scrollHeight : undefined);\n setFolded(false);\n } else {\n flushSync(() => setExpandedHeight(editor.scrollHeight));\n // Applies the start height before the folded one replaces it.\n editor.getBoundingClientRect();\n setFolded(true);\n }\n };\n\n return (\n <div\n className={clsx(\n rootClassName,\n maxHeight && styles.truncated,\n folded && styles.folded,\n )}\n style={heightVariables}\n onTransitionEnd={(event) => {\n if (event.propertyName === \"max-height\") {\n setExpandedHeight(undefined);\n }\n }}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n editorRef.current = view.dom;\n\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight * visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={toggleFolded}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAkB;EACtB,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAa,yBAAO,WACpB,UAAU,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}
|
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
//#region src/components/CodeBlock/CodeBlock.module.scss
|
|
4
4
|
var codeBlock = "flow--code-block";
|
|
5
5
|
var withChildren = "flow--code-block--with-children";
|
|
6
|
-
var
|
|
6
|
+
var truncated = "flow--code-block--truncated";
|
|
7
7
|
var buttonContainer = "flow--code-block--button-container";
|
|
8
|
+
var folded = "flow--code-block--folded";
|
|
8
9
|
var CodeBlock_module_default = {
|
|
9
10
|
codeBlock,
|
|
10
11
|
withChildren,
|
|
11
|
-
|
|
12
|
-
buttonContainer
|
|
12
|
+
truncated,
|
|
13
|
+
buttonContainer,
|
|
14
|
+
folded
|
|
13
15
|
};
|
|
14
16
|
//#endregion
|
|
15
|
-
export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, withChildren };
|
|
17
|
+
export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, truncated, withChildren };
|
|
16
18
|
|
|
17
19
|
//# sourceMappingURL=CodeBlock.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n /* These stay element selectors on purpose. Classing them would give them a\n `flow--` class, and the global reset's\n `*:where([class*=\"flow--\"] [class*=\"flow--\"]) { font: inherit }` would\n then replace the UA monospace metrics — the code text visibly reflows.\n Fixing that is a design decision for UX, not a lint cleanup. */\n // stylelint-disable selector-max-type -- see above\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n // stylelint-enable selector-max-type\n }\n\n &.
|
|
1
|
+
{"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/scrollbar\";\n\n/* The show-more strip: a size-s button plus the container's padding. */\n$button-height-s: calc(\n var(--button--line-height-s) + 2 * var(--button--padding-s-y)\n);\n$show-more-height: calc(\n #{$button-height-s} + 2 * var(--code-block--show-more-padding)\n);\n$inner-corner-radius: calc(\n var(--code-block--corner-radius) - var(--form-control--border-width)\n);\n\n@function fade-color($amount) {\n @return color-mix(\n in srgb,\n var(--code-block--background-color) $amount,\n transparent\n );\n}\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n /* These stay element selectors on purpose. Classing them would give them a\n `flow--` class, and the global reset's\n `*:where([class*=\"flow--\"] [class*=\"flow--\"]) { font: inherit }` would\n then replace the UA monospace metrics — the code text visibly reflows.\n Fixing that is a design decision for UX, not a lint cleanup. */\n // stylelint-disable selector-max-type -- see above\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n // stylelint-enable selector-max-type\n }\n\n /* Truncatable: collapsed, the show-more button lies over the code, which\n runs down to the border and fades out behind it. Toggling animates the\n height, the fade and the button's position together. */\n &.truncated {\n :global(.flow--code-editor--code-mirror) {\n transition-property:\n color, background-color, border-color, padding-block-end;\n\n @include expandTransition.expandTransition;\n }\n\n /* The editor holds the code and the line numbers, so both are clipped\n and fade out together. */\n :global(.cm-editor) {\n max-height: var(--expanded-max-height, none);\n overflow: hidden;\n border-end-start-radius: $inner-corner-radius;\n border-end-end-radius: $inner-corner-radius;\n transition-property: max-height;\n\n @include expandTransition.expandTransition;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: min(calc(var(--size-px--xxl) + #{$show-more-height}), 75%);\n pointer-events: none;\n opacity: 0;\n transition-property: opacity;\n\n @include expandTransition.expandTransition;\n\n /* Eased stops: no visible edge on top, the code only shimmers through\n behind the button. */\n background: linear-gradient(\n to bottom,\n transparent,\n fade-color(10%) 15%,\n fade-color(30%) 30%,\n fade-color(60%) 45%,\n fade-color(82%) 58%,\n fade-color(92%) 68%,\n fade-color(95%) 85%,\n fade-color(96%)\n );\n }\n }\n\n /* Keeps its full height instead of shrinking into the editor, so the\n editor clips it rather than the scroller scrolling within. The\n scroller's own z-index (CodeMirror's) keeps the line numbers under the\n fade. */\n :global(.cm-scroller) {\n flex-shrink: 0;\n }\n\n .buttonContainer {\n transition-property: margin-top, margin-bottom;\n\n @include expandTransition.expandTransition;\n }\n }\n\n &.folded {\n :global(.flow--code-editor--code-mirror) {\n padding-block-end: 0;\n }\n\n /* Grows by the button strip, so the button covers none of the lines. */\n :global(.cm-editor) {\n max-height: calc(var(--max-height) + #{$show-more-height});\n\n &::after {\n opacity: 1;\n }\n }\n\n .buttonContainer {\n margin-top: calc(#{$show-more-height} * -1);\n margin-bottom: 0;\n }\n }\n\n /* A code block is not an input – both axes use its own padding. The repeated\n root class only buys specificity over CodeEditor's own `.codeMirror` rules\n (incl. `.readonly`); it identifies nothing. */\n &.codeBlock.codeBlock :global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) * -1);\n\n /* Covers the editor's bottom padding – the container brings its own. */\n margin-bottom: calc(\n var(--form-control--border-width) - var(--form-control--padding-y)\n );\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.3.0-next.
|
|
3
|
+
"version": "1.3.0-next.34",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"@internationalized/string-compiler": "^3.4.1",
|
|
84
84
|
"@lezer/common": "^1.5.2",
|
|
85
85
|
"@lezer/highlight": "^1.2.3",
|
|
86
|
-
"@mittwald/flow-icons": "^1.3.0-next.
|
|
86
|
+
"@mittwald/flow-icons": "^1.3.0-next.34",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.3.0-next.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.3.0-next.34",
|
|
89
89
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
90
90
|
"@react-aria/form": "^3.2.1",
|
|
91
91
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
"@internationalized/date": "^3.12.3",
|
|
139
139
|
"@lezer/generator": "^1.8.0",
|
|
140
140
|
"@lezer/lr": "^1.4.10",
|
|
141
|
-
"@mittwald/flow-core": "1.3.0-next.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.3.0-next.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.3.0-next.
|
|
141
|
+
"@mittwald/flow-core": "1.3.0-next.34",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.3.0-next.34",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.3.0-next.34",
|
|
144
144
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
145
145
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
146
|
-
"@mittwald/typescript-config": "1.3.0-next.
|
|
146
|
+
"@mittwald/typescript-config": "1.3.0-next.34",
|
|
147
147
|
"@nx/storybook": "^22.7.6",
|
|
148
148
|
"@storybook/addon-a11y": "^10.5.10",
|
|
149
149
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
"peerDependencies": {
|
|
197
197
|
"@internationalized/date": "^3.12.2",
|
|
198
|
-
"@mittwald/flow-icons-pro": "1.3.0-next.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.3.0-next.34",
|
|
199
199
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
200
200
|
"next": "^16.2.3",
|
|
201
201
|
"react": "^19.2.0",
|
|
@@ -219,5 +219,5 @@
|
|
|
219
219
|
"browserslist": [
|
|
220
220
|
"baseline widely available"
|
|
221
221
|
],
|
|
222
|
-
"gitHead": "
|
|
222
|
+
"gitHead": "94402fee8991f7ceb523f632bb749cab6283491b"
|
|
223
223
|
}
|