@mittwald/flow-react-components 0.2.0-alpha.451 → 0.2.0-alpha.453
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/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +2960 -2960
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/Chat/Chat.mjs +1 -1
- package/dist/js/components/src/components/Chat/Chat.mjs.map +1 -1
- package/dist/js/components/src/components/Chat/Chat.module.scss.mjs +4 -2
- package/dist/js/components/src/components/Chat/Chat.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/Markdown/Markdown.mjs +1 -1
- package/dist/js/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs +1 -1
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map +1 -1
- package/dist/types/components/Chat/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/Chat/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/MarkdownEditor/stories/Default.stories.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -20,7 +20,7 @@ const Chat = (props) => {
|
|
|
20
20
|
FileCardList: { className: styles.fileCardList, tunnelId: "fileCardList" },
|
|
21
21
|
Button: {
|
|
22
22
|
className: dynamic((props2) => {
|
|
23
|
-
return props2.color === "accent" ? styles.accentButton :
|
|
23
|
+
return props2.color === "accent" ? styles.accentButton : styles.button;
|
|
24
24
|
})
|
|
25
25
|
}
|
|
26
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.mjs","sources":["../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n // Height of the chat component\n height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnelId: \"messageThread\",\n },\n FileCardList: { className: styles.fileCardList, tunnelId: \"fileCardList\" },\n Button: {\n className: dynamic((props) => {\n return props.color === \"accent\" ? styles.accentButton :
|
|
1
|
+
{"version":3,"file":"Chat.mjs","sources":["../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n // Height of the chat component\n height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnelId: \"messageThread\",\n },\n FileCardList: { className: styles.fileCardList, tunnelId: \"fileCardList\" },\n Button: {\n className: dynamic((props) => {\n return props.color === \"accent\" ? styles.accentButton : styles.button;\n }),\n },\n };\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <div style={{ height }} className={rootClassName}>\n <TunnelProvider>\n <div className={styles.messageThreadContainer}>\n <TunnelExit id=\"messageThread\" />\n </div>\n <div className={styles.controls}>{children}</div>\n <TunnelExit id=\"fileCardList\" />\n </TunnelProvider>\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default Chat;\n"],"names":["props"],"mappings":";;;;;;;;;;AAiBa,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA;AAExC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,aAAe,EAAA;AAAA,MACb,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,cAAc,EAAE,SAAA,EAAW,MAAO,CAAA,YAAA,EAAc,UAAU,cAAe,EAAA;AAAA,IACzE,MAAQ,EAAA;AAAA,MACN,SAAA,EAAW,OAAQ,CAAA,CAACA,MAAU,KAAA;AAC5B,QAAA,OAAOA,MAAM,CAAA,KAAA,KAAU,QAAW,GAAA,MAAA,CAAO,eAAe,MAAO,CAAA,MAAA;AAAA,OAChE;AAAA;AACH,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,MAAO,EAAA,EAAG,SAAW,EAAA,aAAA,EACjC,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,sBAAA,EACrB,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,iBAAgB,CACjC,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAW,QAAS,EAAA,CAAA;AAAA,oBAC3C,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,cAAe,EAAA;AAAA,GAAA,EAChC,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -5,13 +5,15 @@ const messageThreadContainer = "flow--chat--message-thread-container";
|
|
|
5
5
|
const fileCardList = "flow--chat--file-card-list";
|
|
6
6
|
const controls = "flow--chat--controls";
|
|
7
7
|
const accentButton = "flow--chat--accent-button";
|
|
8
|
+
const button = "flow--chat--button";
|
|
8
9
|
const styles = {
|
|
9
10
|
chat: chat,
|
|
10
11
|
messageThreadContainer: messageThreadContainer,
|
|
11
12
|
fileCardList: fileCardList,
|
|
12
13
|
controls: controls,
|
|
13
|
-
accentButton: accentButton
|
|
14
|
+
accentButton: accentButton,
|
|
15
|
+
button: button
|
|
14
16
|
};
|
|
15
17
|
|
|
16
|
-
export { accentButton, chat, controls, styles as default, fileCardList, messageThreadContainer };
|
|
18
|
+
export { accentButton, button, chat, controls, styles as default, fileCardList, messageThreadContainer };
|
|
17
19
|
//# sourceMappingURL=Chat.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chat.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -35,7 +35,7 @@ const Markdown = (props) => {
|
|
|
35
35
|
CodeBlock,
|
|
36
36
|
{
|
|
37
37
|
copyable: false,
|
|
38
|
-
color,
|
|
38
|
+
color: "dark",
|
|
39
39
|
language: isValidElement(preElementContent) && preElementContent.props.className ? preElementContent.props.className.replace("language-", "") : void 0,
|
|
40
40
|
code: String(
|
|
41
41
|
isValidElement(preElementContent) ? preElementContent.props.children : preElementContent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\n\nexport interface MarkdownProps\n extends PropsWithClassName,\n Omit<Options, \"components\"> {\n /** The color schema of the markdown component. */\n color?: \"dark\" | \"light\" | \"default\";\n /** @internal */\n style?: CSSProperties;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const { children, color = \"default\", className, ...rest } = props;\n\n const headingAndLinkColor = color === \"default\" ? \"primary\" : color;\n const textColor = color === \"default\" ? undefined : color;\n\n const components: Components = {\n a: (props) => (\n <Link target=\"_blank\" color={headingAndLinkColor} href={props.href}>\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={textColor}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading level={1} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading level={2} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading level={3} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading level={4} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading level={5} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading level={6} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n color
|
|
1
|
+
{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\n\nexport interface MarkdownProps\n extends PropsWithClassName,\n Omit<Options, \"components\"> {\n /** The color schema of the markdown component. */\n color?: \"dark\" | \"light\" | \"default\";\n /** @internal */\n style?: CSSProperties;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const { children, color = \"default\", className, ...rest } = props;\n\n const headingAndLinkColor = color === \"default\" ? \"primary\" : color;\n const textColor = color === \"default\" ? undefined : color;\n\n const components: Components = {\n a: (props) => (\n <Link target=\"_blank\" color={headingAndLinkColor} href={props.href}>\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={textColor}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading level={1} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading level={2} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading level={3} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading level={4} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading level={5} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading level={6} color={headingAndLinkColor}>\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n color=\"dark\"\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? preElementContent.props.className.replace(\"language-\", \"\")\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n )}\n />\n );\n },\n ul: (props) => (\n <Text color={textColor}>\n <ul>{props.children as ReactNode}</ul>\n </Text>\n ),\n ol: (props) => (\n <Text color={textColor}>\n <ol>{props.children as ReactNode}</ol>\n </Text>\n ),\n blockquote: (props) => (\n <Text color={textColor}>\n <blockquote>{props.children}</blockquote>\n </Text>\n ),\n };\n\n const textContent = extractTextFromFirstChild(children);\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest}>\n <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"names":["props"],"mappings":"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"}
|
|
@@ -36,7 +36,7 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
36
36
|
isDisabled: isDisabled || mode === "preview",
|
|
37
37
|
className: rootClassName,
|
|
38
38
|
ref: textAreaRef,
|
|
39
|
-
value: markdown,
|
|
39
|
+
value: value !== void 0 ? value : markdown,
|
|
40
40
|
rows,
|
|
41
41
|
autoResizeMaxRows,
|
|
42
42
|
onChange: (v) => setMarkdown(v),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { handleKeyDown } from \"@/components/MarkdownEditor/lib/handleKeyDown\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = TextAreaProps;\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n children,\n className,\n value,\n onChange,\n rows,\n autoResizeMaxRows,\n ...rest\n } = props;\n\n const [markdown, setMarkdown] = useState(value ?? \"\");\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const rootClassName = clsx(\n styles.markdownEditor,\n className,\n styles[`mode-${mode}`],\n );\n\n return (\n <TextArea\n {...rest}\n isDisabled={isDisabled || mode === \"preview\"}\n className={rootClassName}\n ref={textAreaRef}\n value={markdown}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={(v) => setMarkdown(v)}\n onKeyDown={(e) => handleKeyDown(e, textAreaRef, setMarkdown, onChange)}\n >\n <Toolbar\n markdown={markdown}\n setMarkdown={setMarkdown}\n textAreaRef={textAreaRef}\n setMode={setMode}\n mode={mode}\n isDisabled={isDisabled}\n onChange={onChange}\n />\n\n <Markdown\n className={styles.markdown}\n style={{\n maxHeight: `calc(var(--line-height--m) * ${autoResizeMaxRows ?? rows} + (var(--form-control--padding-y) * 2))`,\n }}\n >\n {markdown}\n </Markdown>\n\n {children}\n </TextArea>\n );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AACpD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAC7D,EAAM,MAAA,WAAA,GAAc,OAA4B,IAAI,CAAA;AAEpD,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA;AAAA,GACvB;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,UAAA,EAAY,cAAc,IAAS,KAAA,SAAA;AAAA,MACnC,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,WAAA;AAAA,MACL,
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { handleKeyDown } from \"@/components/MarkdownEditor/lib/handleKeyDown\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = TextAreaProps;\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n children,\n className,\n value,\n onChange,\n rows,\n autoResizeMaxRows,\n ...rest\n } = props;\n\n const [markdown, setMarkdown] = useState(value ?? \"\");\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const rootClassName = clsx(\n styles.markdownEditor,\n className,\n styles[`mode-${mode}`],\n );\n\n return (\n <TextArea\n {...rest}\n isDisabled={isDisabled || mode === \"preview\"}\n className={rootClassName}\n ref={textAreaRef}\n value={value !== undefined ? value : markdown}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={(v) => setMarkdown(v)}\n onKeyDown={(e) => handleKeyDown(e, textAreaRef, setMarkdown, onChange)}\n >\n <Toolbar\n markdown={markdown}\n setMarkdown={setMarkdown}\n textAreaRef={textAreaRef}\n setMode={setMode}\n mode={mode}\n isDisabled={isDisabled}\n onChange={onChange}\n />\n\n <Markdown\n className={styles.markdown}\n style={{\n maxHeight: `calc(var(--line-height--m) * ${autoResizeMaxRows ?? rows} + (var(--form-control--padding-y) * 2))`,\n }}\n >\n {markdown}\n </Markdown>\n\n {children}\n </TextArea>\n );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AACpD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAC7D,EAAM,MAAA,WAAA,GAAc,OAA4B,IAAI,CAAA;AAEpD,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA;AAAA,GACvB;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,UAAA,EAAY,cAAc,IAAS,KAAA,SAAA;AAAA,MACnC,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,WAAA;AAAA,MACL,KAAA,EAAO,KAAU,KAAA,MAAA,GAAY,KAAQ,GAAA,QAAA;AAAA,MACrC,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAU,EAAA,CAAC,CAAM,KAAA,WAAA,CAAY,CAAC,CAAA;AAAA,MAC9B,WAAW,CAAC,CAAA,KAAM,cAAc,CAAG,EAAA,WAAA,EAAa,aAAa,QAAQ,CAAA;AAAA,MAErE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,WAAA;AAAA,YACA,OAAA;AAAA,YACA,IAAA;AAAA,YACA,UAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAO,CAAA,QAAA;AAAA,YAClB,KAAO,EAAA;AAAA,cACL,SAAA,EAAW,CAAgC,6BAAA,EAAA,iBAAA,IAAqB,IAAI,CAAA,wCAAA;AAAA,aACtE;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chat/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAUzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA6C3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoCtB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chat/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAUzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA6C3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoCtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/MarkdownEditor/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/MarkdownEditor/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.453",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@internationalized/string-compiler": "^3.2.6",
|
|
59
59
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
60
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
60
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.453",
|
|
61
61
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
62
62
|
"@react-aria/form": "^3.1.0",
|
|
63
63
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"@faker-js/faker": "^9.9.0",
|
|
101
101
|
"@internationalized/date": "^3.8.2",
|
|
102
102
|
"@mittwald/flow-core": "",
|
|
103
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
103
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.453",
|
|
104
104
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
105
105
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
106
106
|
"@mittwald/typescript-config": "",
|
|
@@ -173,5 +173,5 @@
|
|
|
173
173
|
"optional": true
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "4dd92c01c4da8ed9bd938d9b498f7e12fd43f2f1"
|
|
177
177
|
}
|