npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.4 → 1.5.0-next.40 - Mend

@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

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.

Files changed (554) hide show

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs CHANGED Viewed

@@ -3,7 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import CodeEditor_module_default from "./CodeEditor.module.mjs";
@@ -11,7 +11,7 @@ import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
 import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
 import { CopyButton } from "../CopyButton/CopyButton.mjs";
 import clsx from "clsx";
-import { useId } from "react";
+import { useCallback, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "react-aria";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
@@ -21,12 +21,26 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 * @flowStatus new
 */
 var CodeEditor = flowComponent("CodeEditor", (props) => {
-	const { ref, children, className, language, extensions, isReadOnly, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
-	const rootClassName = clsx(fieldProps.className, CodeEditor_module_default.codeEditor, className);
+	const { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
+	const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
 	const labelId = useId();
 	const descriptionId = useId();
 	/**
+	* Both are optional. Their refs tell whether they are rendered, so the editor
+	* never references an element that does not exist – a dangling id fails HTML
+	* validators and a11y checks. The callbacks are stable: a new one per render
+	* would detach and re-attach on every render.
+	*/
+	const [hasLabel, setHasLabel] = useState(false);
+	const [hasDescription, setHasDescription] = useState(false);
+	const labelRef = useCallback((element) => {
+		setHasLabel(!!element);
+	}, []);
+	const descriptionRef = useCallback((element) => {
+		setHasDescription(!!element);
+	}, []);
+	/**
 	* The label and the field description are declared as children of the code
 	* editor, but must be rendered outside of the editor itself. They are
 	* tunneled out of the editor – just like the field error. Their ids are the
@@ -37,6 +51,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		Label: {
 			...fieldPropsContext.Label,
 			id: labelId,
+			ref: labelRef,
 			tunnel: {
 				id: "label",
 				component: "CodeEditor"
@@ -45,6 +60,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		FieldDescription: {
 			...fieldPropsContext.FieldDescription,
 			id: descriptionId,
+			ref: descriptionRef,
 			tunnel: {
 				id: "fieldDescription",
 				component: "CodeEditor"
@@ -62,23 +78,23 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 	* root element the props are applied to. Its ARIA attributes are set through
 	* the content attributes facet.
 	*
-	* The label reference only resolves when a label is given. Without one, an
-	* `aria-label` names the editor instead – the name computation skips
-	* references that point at nothing.
+	* Without a label, an `aria-label` names the editor instead.
 	*/
-	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ");
-	const describedBy = [descriptionId, fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);
+	const describedBy = joinIds(hasDescription && descriptionId, controlProps["aria-describedby"]);
 	const contentAttributes = EditorView.contentAttributes.of({
-		"aria-labelledby": labelledBy,
+		...labelledBy ? { "aria-labelledby": labelledBy } : {},
 		...ariaLabel ? { "aria-label": ariaLabel } : {},
 		...describedBy ? { "aria-describedby": describedBy } : {},
 		...isRequired ? { "aria-required": "true" } : {},
-		...isInvalid ? { "aria-invalid": "true" } : {}
+		...isInvalid ? { "aria-invalid": "true" } : {},
+		...isDisabled ? { "aria-disabled": "true" } : {}
 	});
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
+		"data-disabled": isDisabled || void 0,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [
@@ -90,8 +106,8 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 					...rest,
 					value,
 					basicSetup: {
-						highlightActiveLine: showActiveLineMarker,
-						highlightActiveLineGutter: showActiveLineMarker,
+						highlightActiveLine: showActiveLineMarker && !isDisabled,
+						highlightActiveLineGutter: showActiveLineMarker && !isDisabled,
 						autocompletion: false,
 						lineNumbers: false,
 						foldGutter: false,
@@ -99,7 +115,9 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 					},
 					theme: defaultLightTheme,
 					"data-invalid": isInvalid || void 0,
-					readOnly: isReadOnly,
+					"data-disabled": isDisabled || void 0,
+					readOnly: isReadOnly || isDisabled,
+					editable: !isDisabled,
 					className: clsx(CodeEditor_module_default.codeMirror, isReadOnly && CodeEditor_module_default.readonly),
 					ref: (codeMirrorRef) => {
 						if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
@@ -110,7 +128,8 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 						className: CodeEditor_module_default.copyButton,
 						size: "s",
 						variant: "soft",
-						text: value
+						text: value,
+						isDisabled
 					}), children]
 				}) }),
 				/* @__PURE__ */ jsx(UiComponentTunnelExit, {

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useId } from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" \| \"lang\" \| \"basicSetup\" \| \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. /\n defaultValue?: string;\n /\n Whether the code can be read but not edited.\n \n @default false\n /\n isReadOnly?: boolean;\n /\n Whether the editor is displayed as invalid.\n \n @default false\n /\n isInvalid?: boolean;\n /* The elements class name. /\n className?: string;\n /* The language the code is highlighted as. /\n language?: CodeEditorLanguage;\n /\n Whether a button to copy the code to the clipboard is shown.\n \n @default true\n /\n copyable?: boolean;\n /\n Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n \n @default false\n /\n isRequired?: boolean;\n /\n @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n /\n validationBehavior?: unknown;\n}\n\n/\n @flr-generate all\n * @flowStatus new\n /\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"CodeEditor\");\n\n const rootClassName = clsx(\n fieldProps.className,\n styles.codeEditor,\n className,\n );\n\n const labelId = useId();\n const descriptionId = useId();\n\n /\n The label and the field description are declared as children of the code\n * editor, but must be rendered outside of the editor itself. They are\n * tunneled out of the editor – just like the field error. Their ids are the\n * ones the editor references.\n /\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n id: labelId,\n tunnel: { id: \"label\", component: \"CodeEditor\" },\n },\n FieldDescription: {\n ...fieldPropsContext.FieldDescription,\n id: descriptionId,\n tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n },\n };\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n /\n The editable element of CodeMirror is the `.cm-content` element – not the\n * root element the props are applied to. Its ARIA attributes are set through\n * the content attributes facet.\n \n The label reference only resolves when a label is given. Without one, an\n * `aria-label` names the editor instead – the name computation skips\n * references that point at nothing.\n */\n const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \");\n\n const describedBy =\n [descriptionId, fieldProps[\"aria-describedby\"]].filter(Boolean).join(\" \") \|\|\n undefined;\n\n const contentAttributes = EditorView.contentAttributes.of({\n \"aria-labelledby\": labelledBy,\n ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n });\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n return (\n <div className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n <FieldErrorCaptureContext>\n <CodeMirror\n {...rest}\n value={value}\n basicSetup={{\n highlightActiveLine: showActiveLineMarker,\n highlightActiveLineGutter: showActiveLineMarker,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }}\n theme={defaultLightTheme}\n data-invalid={isInvalid \|\| undefined}\n readOnly={isReadOnly}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={[...enabledExtensions, contentAttributes]}\n height={height ?? minHeight}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n />\n )}\n {children}\n </CodeMirror>\n </FieldErrorCaptureContext>\n <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,WAAW,WACX,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;;;CAWD,MAAM,aAAa,CAAC,gBAAgB,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAErE,MAAM,cACJ,CAAC,eAAe,WAAW,mBAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACxE,KAAA;CAEF,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,mBAAmB;EACnB,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;CAChD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB;MACrB,2BAA2B;MAC3B,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,UAAU;KACV,WAAW,KAAK,0BAAO,YAAY,cAAc,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KArBpB,UAAA,CAuBG,YACC,oBAAC,YAAD;MACE,WAAW,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;KACP,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" \| \"lang\" \| \"basicSetup\" \| \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. /\n defaultValue?: string;\n /\n Whether the code can be read but not edited.\n \n @default false\n /\n isReadOnly?: boolean;\n /\n Whether the editor is disabled. The code can neither be edited, focused nor\n * copied.\n \n @default false\n /\n isDisabled?: boolean;\n /\n Whether the editor is displayed as invalid.\n \n @default false\n /\n isInvalid?: boolean;\n /* The elements class name. /\n className?: string;\n /\n The language the code is highlighted as. A language the editor does not\n * know is shown as plain text.\n /\n language?: CodeEditorLanguage \| (string & {});\n /\n Whether a button to copy the code to the clipboard is shown.\n \n @default true\n /\n copyable?: boolean;\n /\n Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n \n @default false\n /\n isRequired?: boolean;\n /\n @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n /\n validationBehavior?: unknown;\n}\n\n/\n @flr-generate all\n * @flowStatus new\n /\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isDisabled,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"CodeEditor\");\n\n const rootClassName = clsx(\n wrapperProps.className,\n styles.codeEditor,\n className,\n );\n\n const labelId = useId();\n const descriptionId = useId();\n\n /\n Both are optional. Their refs tell whether they are rendered, so the editor\n * never references an element that does not exist – a dangling id fails HTML\n * validators and a11y checks. The callbacks are stable: a new one per render\n * would detach and re-attach on every render.\n /\n const [hasLabel, setHasLabel] = useState(false);\n const [hasDescription, setHasDescription] = useState(false);\n const labelRef = useCallback((element: Element \| null) => {\n setHasLabel(!!element);\n }, []);\n const descriptionRef = useCallback((element: Element \| null) => {\n setHasDescription(!!element);\n }, []);\n\n /\n The label and the field description are declared as children of the code\n * editor, but must be rendered outside of the editor itself. They are\n * tunneled out of the editor – just like the field error. Their ids are the\n * ones the editor references.\n /\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n id: labelId,\n ref: labelRef,\n tunnel: { id: \"label\", component: \"CodeEditor\" },\n },\n FieldDescription: {\n ...fieldPropsContext.FieldDescription,\n id: descriptionId,\n ref: descriptionRef,\n tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n },\n };\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n /\n The editable element of CodeMirror is the `.cm-content` element – not the\n * root element the props are applied to. Its ARIA attributes are set through\n * the content attributes facet.\n \n Without a label, an `aria-label` names the editor instead.\n */\n const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n const describedBy = joinIds(\n hasDescription && descriptionId,\n controlProps[\"aria-describedby\"],\n );\n\n const contentAttributes = EditorView.contentAttributes.of({\n ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n });\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n return (\n <div className={rootClassName} data-disabled={isDisabled \|\| undefined}>\n <PropsContextProvider props={propsContext}>\n <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n <FieldErrorCaptureContext>\n <CodeMirror\n {...rest}\n value={value}\n basicSetup={{\n highlightActiveLine: showActiveLineMarker && !isDisabled,\n highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }}\n theme={defaultLightTheme}\n data-invalid={isInvalid \|\| undefined}\n data-disabled={isDisabled \|\| undefined}\n readOnly={isReadOnly \|\| isDisabled}\n editable={!isDisabled}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={[...enabledExtensions, contentAttributes]}\n height={height ?? minHeight}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n isDisabled={isDisabled}\n />\n )}\n {children}\n </CodeMirror>\n </FieldErrorCaptureContext>\n <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgFA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,aAAa,WACbA,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,WAAW,aAAa,YAA4B;EACxD,YAAY,CAAC,CAAC,OAAO;CACvB,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,aAAa,YAA4B;EAC9D,kBAAkB,CAAC,CAAC,OAAO;CAC7B,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;CASD,MAAM,aAAa,QAAQ,gBAAgB,YAAY,OAAO;CAC9D,MAAM,cAAc,QAClB,kBAAkB,eAClB,aAAa,mBACf;CAEA,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,GAAI,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACtD,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;EAC9C,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;CAClD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,iBAAe,cAAc,KAAA;EAC1D,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB,wBAAwB,CAAC;MAC9C,2BAA2B,wBAAwB,CAAC;MACpD,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,iBAAe,cAAc,KAAA;KAC7B,UAAU,cAAc;KACxB,UAAU,CAAC;KACX,WAAW,KAAKA,0BAAO,YAAY,cAAcA,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KAvBpB,UAAA,CAyBG,YACC,oBAAC,YAAD;MACE,WAAWA,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;MACM;KACb,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.codeEditor {\n outline: none;\n isolation: isolate;\n\n .codeMirror {\n @include formControl.formControl();\n\n position: relative;\n order: 2;\n\n /\n The inline padding is applied by the lines and the gutter instead, so\n * that the highlight of the active line spans the full editor width.\n /\n padding-inline: unset;\n\n / the vertical padding applied by the form control mixin /\n --editor-padding: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n\n min-height: calc(var(--form-control--padding-y) 2 + var(--line-height-m));\n\n &:hover {\n background-color: var(--form-control--background-color--default);\n }\n\n &.readonly {\n border-color: var(--form-control--border-color--default);\n }\n\n .copyButton {\n position: absolute;\n inset-block-start: var(--editor-padding);\n inset-inline-end: var(--form-control--padding-x);\n z-index: 1;\n }\n }\n}\n\n/\n CodeMirror ships its theme as unlayered `<style>` elements that it injects\n * into the document at runtime, outside of Flow's build. Unlayered CSS beats\n * layered CSS regardless of specificity, so these overrides only apply in the\n * layered stylesheet variant if they leave the cascade layer as well.\n /\n@layer flow.unlayered {\n .codeEditor .codeMirror {\n /\n * The gutter needs an opaque background – the content scrolls underneath\n * it – but it must follow the background of the editor, which changes with\n * its state (invalid, disabled, …). Inheriting it down from the editor\n * beats the background the CodeMirror theme applies, which only serves as\n * a fallback.\n /\n & :global(.cm-editor),\n & :global(.cm-scroller),\n & :global(.cm-gutters) {\n background-color: inherit;\n }\n\n & :global(.cm-editor) {\n outline: none;\n\n & :global(.cm-scroller) {\n @include scrollbar.scrollbar;\n }\n\n & :global(.cm-lineNumbers .cm-gutterElement) {\n min-width: var(--code-editor--gutter-element-min-width);\n }\n\n & :global(.cm-foldGutter) {\n min-width: var(--code-editor--gutter-element-min-width);\n text-align: center;\n }\n\n & :global(.cm-panels) {\n display: none;\n }\n\n / the block padding is applied by the editor itself /\n & :global(.cm-content) {\n padding-block: unset;\n }\n\n & :global(.cm-line) {\n padding-inline: var(--form-control--padding-x);\n }\n\n /\n * The elements of the first gutter carry the inline start padding, so\n * that the highlight of the active line reaches the editor border.\n */\n & :global(.cm-gutters > .cm-gutter:first-child .cm-gutterElement) {\n padding-inline-start: var(--form-control--padding-x);\n }\n\n & :global(.cm-activeLineGutter),\n & :global(.cm-activeLine) {\n background-color: color-mix(\n in srgb,\n var(--form-control--background-color--hover) 65%,\n transparent\n );\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CodeEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.codeEditor {\n outline: none;\n isolation: isolate;\n\n .codeMirror {\n @include formControl.formControl();\n\n position: relative;\n order: 2;\n\n /\n The inline padding is applied by the lines and the gutter instead, so\n * that the highlight of the active line spans the full editor width.\n /\n padding-inline: unset;\n\n / the vertical padding applied by the form control mixin /\n --editor-padding: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n\n min-height: calc(var(--form-control--padding-y) 2 + var(--line-height-m));\n\n &:hover {\n background-color: var(--form-control--background-color--default);\n }\n\n &.readonly {\n border-color: var(--form-control--border-color--default);\n }\n\n &[data-disabled] {\n --code-editor--gutter-separator-color: var(\n --form-control--border-color--disabled\n );\n --code-editor--indentation-marker-color: var(\n --form-control--border-color--disabled\n );\n\n background-color: var(--form-control--background-color--disabled);\n }\n\n .copyButton {\n position: absolute;\n inset-block-start: var(--editor-padding);\n inset-inline-end: var(--form-control--padding-x);\n z-index: 1;\n }\n }\n}\n\n/\n CodeMirror ships its theme as unlayered `<style>` elements that it injects\n * into the document at runtime, outside of Flow's build. Unlayered CSS beats\n * layered CSS regardless of specificity, so these overrides only apply in the\n * layered stylesheet variant if they leave the cascade layer as well.\n /\n@layer flow.unlayered {\n .codeEditor .codeMirror {\n /\n * The gutter needs an opaque background – the content scrolls underneath\n * it – but it must follow the background of the editor, which changes with\n * its state (invalid, disabled, …). Inheriting it down from the editor\n * beats the background the CodeMirror theme applies, which only serves as\n * a fallback.\n /\n & :global(.cm-editor),\n & :global(.cm-scroller),\n & :global(.cm-gutters) {\n background-color: inherit;\n }\n\n / The same goes for the text color of the code and the line numbers. /\n & :global(.cm-editor),\n & :global(.cm-gutters) {\n color: inherit;\n }\n\n / Syntax highlighting would make disabled code look editable. /\n &[data-disabled] :global(.cm-content ) {\n color: inherit;\n }\n\n & :global(.cm-editor) {\n outline: none;\n\n & :global(.cm-scroller) {\n @include scrollbar.scrollbar;\n }\n\n & :global(.cm-lineNumbers .cm-gutterElement) {\n min-width: var(--code-editor--gutter-element-min-width);\n }\n\n & :global(.cm-foldGutter) {\n min-width: var(--code-editor--gutter-element-min-width);\n text-align: center;\n }\n\n & :global(.cm-panels) {\n display: none;\n }\n\n /* the block padding is applied by the editor itself /\n & :global(.cm-content) {\n padding-block: unset;\n }\n\n & :global(.cm-line) {\n padding-inline: var(--form-control--padding-x);\n }\n\n /\n * The elements of the first gutter carry the inline start padding, so\n * that the highlight of the active line reaches the editor border.\n */\n & :global(.cm-gutters > .cm-gutter:first-child .cm-gutterElement) {\n padding-inline-start: var(--form-control--padding-x);\n }\n\n & :global(.cm-activeLineGutter),\n & :global(.cm-activeLine) {\n background-color: color-mix(\n in srgb,\n var(--form-control--background-color--hover) 65%,\n transparent\n );\n }\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import supportedCodeEditorLanguages from "../languages/index.mjs";
+import supportedCodeEditorLanguages, { isCodeEditorLanguage } from "../languages/index.mjs";
 import { gutterSpacer } from "../extensions/gutterSpacer.mjs";
 import { lineNumbers } from "@uiw/react-codemirror";
 import { foldGutter } from "@codemirror/language";
@@ -32,7 +32,7 @@ var useCodeEditorExtensions = (language, extensions = [], options = {
 	if (options.showLinterMarkers) extensions.push(lintGutter());
 	if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) extensions.push(gutterSpacer());
 	if (options.showCodeIndentationMakers) extensions.push(indentationMarkers({ colors: indentationMarkerColors }));
-	if (language) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
+	if (language && isCodeEditorLanguage(language)) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
 	return extensions;
 };
 //#endregion

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n ~~type CodeEditorLanguage~~,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/\n Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n /\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n light: markerColor,\n dark: markerColor,\n activeLight: markerColor,\n activeDark: markerColor,\n};\n\~~n/* @internal /\~~nexport interface CodeEditorSetup {\n /\n Whether the line the cursor is on is highlighted.\n \n @default true\n /\n showActiveLineMarker?: boolean;\n /\n Whether the gutter offers controls to fold and unfold code blocks.\n \n @default true\n /\n showCodeFolding?: boolean;\n /\n Whether indentation levels are visualized with guide lines.\n \n @default true\n /\n showCodeIndentationMakers?: boolean;\n /\n Whether line numbers are shown in the gutter.\n \n @default true\n /\n showLineNumbers?: boolean;\n /\n Whether linter results are shown in the gutter.\n \n @default true\n /\n showLinterMarkers?: boolean;\n}\n\n/* @internal */\nexport const useCodeEditorExtensions = (\n language?: ~~CodeEditorLanguage~~,\n extensions: Extension[] = [],\n options: CodeEditorSetup = {\n showCodeFolding: true,\n showCodeIndentationMakers: true,\n showLineNumbers: true,\n showLinterMarkers: true,\n },\n) => {\n if (options.showLineNumbers) {\n extensions.push(lineNumbers());\n }\n\n if (options.showCodeFolding) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const element = document.createElement(\"span\");\n element.classList.add(\"cm-foldGutter\");\n element.classList.add(\n open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n );\n element.innerText = open ? \"⌄\" : \"›\";\n return element;\n },\n }),\n );\n }\n\n if (options.showLinterMarkers) {\n extensions.push(lintGutter());\n }\n\n if (\n options.showLineNumbers &&\n (!options.showCodeFolding \|\| !options.showLinterMarkers)\n ) {\n extensions.push(gutterSpacer());\n }\n\n if (options.showCodeIndentationMakers) {\n extensions.push(indentationMarkers({ colors: indentationMarkerColors }));\n }\n\n if (language) {\n supportedCodeEditorLanguages[language]?.map((loader) =>\n extensions.push(loader()),\n );\n }\n\n return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;~~AAqCA~~,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,~~UACF~~,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}
1	+ {"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n isCodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/\n Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n /\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n light: markerColor,\n dark: markerColor,\n activeLight: markerColor,\n activeDark: markerColor,\n};\n\nexport interface CodeEditorSetup {\n /\n Whether the line the cursor is on is highlighted.\n \n @default true\n /\n showActiveLineMarker?: boolean;\n /\n Whether the gutter offers controls to fold and unfold code blocks.\n \n @default true\n /\n showCodeFolding?: boolean;\n /\n Whether indentation levels are visualized with guide lines.\n \n @default true\n /\n showCodeIndentationMakers?: boolean;\n /\n Whether line numbers are shown in the gutter.\n \n @default true\n /\n showLineNumbers?: boolean;\n /\n Whether linter results are shown in the gutter.\n \n @default true\n /\n showLinterMarkers?: boolean;\n}\n\n/* @internal */\nexport const useCodeEditorExtensions = (\n language?: string,\n extensions: Extension[] = [],\n options: CodeEditorSetup = {\n showCodeFolding: true,\n showCodeIndentationMakers: true,\n showLineNumbers: true,\n showLinterMarkers: true,\n },\n) => {\n if (options.showLineNumbers) {\n extensions.push(lineNumbers());\n }\n\n if (options.showCodeFolding) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const element = document.createElement(\"span\");\n element.classList.add(\"cm-foldGutter\");\n element.classList.add(\n open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n );\n element.innerText = open ? \"⌄\" : \"›\";\n return element;\n },\n }),\n );\n }\n\n if (options.showLinterMarkers) {\n extensions.push(lintGutter());\n }\n\n if (\n options.showLineNumbers &&\n (!options.showCodeFolding \|\| !options.showLinterMarkers)\n ) {\n extensions.push(gutterSpacer());\n }\n\n if (options.showCodeIndentationMakers) {\n extensions.push(indentationMarkers({ colors: indentationMarkerColors }));\n }\n\n if (language && isCodeEditorLanguage(language)) {\n supportedCodeEditorLanguages[language]?.map((loader) =>\n extensions.push(loader()),\n );\n }\n\n return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;AAoCA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,YAAY,qBAAqB,QAAQ,GAC3C,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}

package/dist/js/packages/components/src/components/CodeEditor/languages/dotEnv/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../../../../src/components/CodeEditor/languages/dotEnv/index.tsx"],"sourcesContent":["import {\n HighlightStyle,\n LanguageSupport,\n LRLanguage,\n syntaxHighlighting,\n syntaxTree,\n} from \"@codemirror/language\";\nimport type { Diagnostic } from \"@codemirror/lint\";\nimport { linter } from \"@codemirror/lint\";\nimport { styleTags, tags as t } from \"@lezer/highlight\";\nimport * as dotEnvGrammar from \"./dotEnv.grammar\";\nimport type { LanguageContainer } from \"@/components/CodeEditor/languages\";\n\nconst definedStyle = HighlightStyle.define([\n { tag: t.variableName, fontWeight: \"bold\" },\n { tag: t.lineComment, fontStyle: \"italic\" },\n]);\n\nconst envHighlighting = styleTags({\n Identifier: t.variableName,\n Equal: t.operator,\n SQString: t.string,\n DQString: t.string,\n BareValueToken: t.string,\n Comment: t.lineComment,\n Hash: t.lineComment,\n});\n\nconst lrLanguage = LRLanguage.define({\n parser: dotEnvGrammar.parser.configure({\n props: [envHighlighting],\n }),\n languageData: {\n commentTokens: { line: \"#\" },\n },\n});\n\nexport const validator = (input: string) => {\n let isValid = true;\n lrLanguage.parser.parse(input).iterate({\n enter: (node) => {\n if (node.type.isError) {\n isValid = false;\n }\n },\n });\n\n return isValid;\n};\n\nconst language: LanguageContainer = [\n () => syntaxHighlighting(definedStyle),\n () => new LanguageSupport(lrLanguage),\n () =>\n linter((view) => {\n const diagnostics: Diagnostic[] = [];\n const doc = view.state.doc;\n const seenIdentifiers = new Set<string>();\n\n const errorNodes: { from: number; to: number }[] = [];\n\n syntaxTree(view.state).iterate({\n enter: (node) => {\n const from = node.from;\n const to = node.to;\n\n if (node.type.isError) {\n errorNodes.push({ from, to });\n }\n\n if (node.name === \"Identifier\") {\n const identifier = doc.sliceString(from, to);\n\n if (seenIdentifiers.has(identifier)) {\n diagnostics.push({\n from,\n to: from + identifier.length,\n severity: \"error\",\n message: `Duplicate key \"${identifier}\" found.`,\n });\n }\n seenIdentifiers.add(identifier);\n\n if (identifier !== identifier.toUpperCase()) {\n diagnostics.push({\n from,\n to,\n severity: \"warning\",\n message:\n \"Variable names are usually uppercase (e.g. DATABASE_URL)\",\n });\n }\n }\n },\n });\n\n if (errorNodes.length) {\n const lastError = errorNodes[errorNodes.length - 1];\n const docText = doc.toString();\n const docEnd = doc.length;\n\n const isLastErrorAtEOF =\n lastError?.from === docEnd && lastError?.to === docEnd;\n\n const hasNoFinalNewline = !docText.endsWith(\"\\n\");\n\n if (isLastErrorAtEOF && hasNoFinalNewline) {\n diagnostics.push({\n from: docEnd,\n to: docEnd,\n severity: \"error\",\n message: \"Must end with a newline.\",\n });\n } else {\n errorNodes.forEach((node) =>\n diagnostics.push({\n from: node.from,\n to: node.to,\n severity: \"error\",\n message:\n \"Syntax error: Unexpected character or malformed assignment\",\n }),\n );\n }\n }\n\n return diagnostics;\n }),\n];\n\nexport default language;\n"],"mappings":";;;;;;AAaA,IAAM,eAAe,eAAe,OAAO,CACzC;CAAE,~~KAAK~~,KAAE;CAAc,YAAY;AAAO,GAC1C;CAAE,~~KAAK~~,KAAE;CAAa,WAAW;AAAS,CAC5C,CAAC;AAED,IAAM,kBAAkB,UAAU;CAChC,~~YAAY~~,KAAE;CACd,~~OAAO~~,KAAE;CACT,~~UAAU~~,KAAE;CACZ,~~UAAU~~,KAAE;CACZ,~~gBAAgB~~,KAAE;CAClB,~~SAAS~~,KAAE;CACX,~~MAAM~~,KAAE;AACV,CAAC;AAED,IAAM,aAAa,WAAW,OAAO;CACnC,QAAA,OAA6B,UAAU,EACrC,OAAO,CAAC,eAAe,EACzB,CAAC;CACD,cAAc,EACZ,eAAe,EAAE,MAAM,IAAI,EAC7B;AACF,CAAC;AAeD,IAAM,WAA8B;OAC5B,mBAAmB,YAAY;OAC/B,IAAI,gBAAgB,UAAU;OAElC,QAAQ,SAAS;EACf,MAAM,cAA4B,CAAC;EACnC,MAAM,MAAM,KAAK,MAAM;EACvB,MAAM,kCAAkB,IAAI,IAAY;EAExC,MAAM,aAA6C,CAAC;EAEpD,WAAW,KAAK,KAAK,CAAC,CAAC,QAAQ,EAC7B,QAAQ,SAAS;GACf,MAAM,OAAO,KAAK;GAClB,MAAM,KAAK,KAAK;GAEhB,IAAI,KAAK,KAAK,SACZ,WAAW,KAAK;IAAE;IAAM;GAAG,CAAC;GAG9B,IAAI,KAAK,SAAS,cAAc;IAC9B,MAAM,aAAa,IAAI,YAAY,MAAM,EAAE;IAE3C,IAAI,gBAAgB,IAAI,UAAU,GAChC,YAAY,KAAK;KACf;KACA,IAAI,OAAO,WAAW;KACtB,UAAU;KACV,SAAS,kBAAkB,WAAW;IACxC,CAAC;IAEH,gBAAgB,IAAI,UAAU;IAE9B,IAAI,eAAe,WAAW,YAAY,GACxC,YAAY,KAAK;KACf;KACA;KACA,UAAU;KACV,SACE;IACJ,CAAC;GAEL;EACF,EACF,CAAC;EAED,IAAI,WAAW,QAAQ;GACrB,MAAM,YAAY,WAAW,WAAW,SAAS;GACjD,MAAM,UAAU,IAAI,SAAS;GAC7B,MAAM,SAAS,IAAI;GAEnB,MAAM,mBACJ,WAAW,SAAS,UAAU,WAAW,OAAO;GAElD,MAAM,oBAAoB,CAAC,QAAQ,SAAS,IAAI;GAEhD,IAAI,oBAAoB,mBACtB,YAAY,KAAK;IACf,MAAM;IACN,IAAI;IACJ,UAAU;IACV,SAAS;GACX,CAAC;QAED,WAAW,SAAS,SAClB,YAAY,KAAK;IACf,MAAM,KAAK;IACX,IAAI,KAAK;IACT,UAAU;IACV,SACE;GACJ,CAAC,CACH;EAEJ;EAEA,OAAO;CACT,CAAC;AACL"}
1	+ {"version":3,"file":"index.mjs","names":["t"],"sources":["../../../../../../../../../src/components/CodeEditor/languages/dotEnv/index.tsx"],"sourcesContent":["import {\n HighlightStyle,\n LanguageSupport,\n LRLanguage,\n syntaxHighlighting,\n syntaxTree,\n} from \"@codemirror/language\";\nimport type { Diagnostic } from \"@codemirror/lint\";\nimport { linter } from \"@codemirror/lint\";\nimport { styleTags, tags as t } from \"@lezer/highlight\";\nimport * as dotEnvGrammar from \"./dotEnv.grammar\";\nimport type { LanguageContainer } from \"@/components/CodeEditor/languages\";\n\nconst definedStyle = HighlightStyle.define([\n { tag: t.variableName, fontWeight: \"bold\" },\n { tag: t.lineComment, fontStyle: \"italic\" },\n]);\n\nconst envHighlighting = styleTags({\n Identifier: t.variableName,\n Equal: t.operator,\n SQString: t.string,\n DQString: t.string,\n BareValueToken: t.string,\n Comment: t.lineComment,\n Hash: t.lineComment,\n});\n\nconst lrLanguage = LRLanguage.define({\n parser: dotEnvGrammar.parser.configure({\n props: [envHighlighting],\n }),\n languageData: {\n commentTokens: { line: \"#\" },\n },\n});\n\nexport const validator = (input: string) => {\n let isValid = true;\n lrLanguage.parser.parse(input).iterate({\n enter: (node) => {\n if (node.type.isError) {\n isValid = false;\n }\n },\n });\n\n return isValid;\n};\n\nconst language: LanguageContainer = [\n () => syntaxHighlighting(definedStyle),\n () => new LanguageSupport(lrLanguage),\n () =>\n linter((view) => {\n const diagnostics: Diagnostic[] = [];\n const doc = view.state.doc;\n const seenIdentifiers = new Set<string>();\n\n const errorNodes: { from: number; to: number }[] = [];\n\n syntaxTree(view.state).iterate({\n enter: (node) => {\n const from = node.from;\n const to = node.to;\n\n if (node.type.isError) {\n errorNodes.push({ from, to });\n }\n\n if (node.name === \"Identifier\") {\n const identifier = doc.sliceString(from, to);\n\n if (seenIdentifiers.has(identifier)) {\n diagnostics.push({\n from,\n to: from + identifier.length,\n severity: \"error\",\n message: `Duplicate key \"${identifier}\" found.`,\n });\n }\n seenIdentifiers.add(identifier);\n\n if (identifier !== identifier.toUpperCase()) {\n diagnostics.push({\n from,\n to,\n severity: \"warning\",\n message:\n \"Variable names are usually uppercase (e.g. DATABASE_URL)\",\n });\n }\n }\n },\n });\n\n if (errorNodes.length) {\n const lastError = errorNodes[errorNodes.length - 1];\n const docText = doc.toString();\n const docEnd = doc.length;\n\n const isLastErrorAtEOF =\n lastError?.from === docEnd && lastError?.to === docEnd;\n\n const hasNoFinalNewline = !docText.endsWith(\"\\n\");\n\n if (isLastErrorAtEOF && hasNoFinalNewline) {\n diagnostics.push({\n from: docEnd,\n to: docEnd,\n severity: \"error\",\n message: \"Must end with a newline.\",\n });\n } else {\n errorNodes.forEach((node) =>\n diagnostics.push({\n from: node.from,\n to: node.to,\n severity: \"error\",\n message:\n \"Syntax error: Unexpected character or malformed assignment\",\n }),\n );\n }\n }\n\n return diagnostics;\n }),\n];\n\nexport default language;\n"],"mappings":";;;;;;AAaA,IAAM,eAAe,eAAe,OAAO,CACzC;CAAE,KAAKA,KAAE;CAAc,YAAY;AAAO,GAC1C;CAAE,KAAKA,KAAE;CAAa,WAAW;AAAS,CAC5C,CAAC;AAED,IAAM,kBAAkB,UAAU;CAChC,YAAYA,KAAE;CACd,OAAOA,KAAE;CACT,UAAUA,KAAE;CACZ,UAAUA,KAAE;CACZ,gBAAgBA,KAAE;CAClB,SAASA,KAAE;CACX,MAAMA,KAAE;AACV,CAAC;AAED,IAAM,aAAa,WAAW,OAAO;CACnC,QAAA,OAA6B,UAAU,EACrC,OAAO,CAAC,eAAe,EACzB,CAAC;CACD,cAAc,EACZ,eAAe,EAAE,MAAM,IAAI,EAC7B;AACF,CAAC;AAeD,IAAM,WAA8B;OAC5B,mBAAmB,YAAY;OAC/B,IAAI,gBAAgB,UAAU;OAElC,QAAQ,SAAS;EACf,MAAM,cAA4B,CAAC;EACnC,MAAM,MAAM,KAAK,MAAM;EACvB,MAAM,kCAAkB,IAAI,IAAY;EAExC,MAAM,aAA6C,CAAC;EAEpD,WAAW,KAAK,KAAK,CAAC,CAAC,QAAQ,EAC7B,QAAQ,SAAS;GACf,MAAM,OAAO,KAAK;GAClB,MAAM,KAAK,KAAK;GAEhB,IAAI,KAAK,KAAK,SACZ,WAAW,KAAK;IAAE;IAAM;GAAG,CAAC;GAG9B,IAAI,KAAK,SAAS,cAAc;IAC9B,MAAM,aAAa,IAAI,YAAY,MAAM,EAAE;IAE3C,IAAI,gBAAgB,IAAI,UAAU,GAChC,YAAY,KAAK;KACf;KACA,IAAI,OAAO,WAAW;KACtB,UAAU;KACV,SAAS,kBAAkB,WAAW;IACxC,CAAC;IAEH,gBAAgB,IAAI,UAAU;IAE9B,IAAI,eAAe,WAAW,YAAY,GACxC,YAAY,KAAK;KACf;KACA;KACA,UAAU;KACV,SACE;IACJ,CAAC;GAEL;EACF,EACF,CAAC;EAED,IAAI,WAAW,QAAQ;GACrB,MAAM,YAAY,WAAW,WAAW,SAAS;GACjD,MAAM,UAAU,IAAI,SAAS;GAC7B,MAAM,SAAS,IAAI;GAEnB,MAAM,mBACJ,WAAW,SAAS,UAAU,WAAW,OAAO;GAElD,MAAM,oBAAoB,CAAC,QAAQ,SAAS,IAAI;GAEhD,IAAI,oBAAoB,mBACtB,YAAY,KAAK;IACf,MAAM;IACN,IAAI;IACJ,UAAU;IACV,SAAS;GACX,CAAC;QAED,WAAW,SAAS,SAClB,YAAY,KAAK;IACf,MAAM,KAAK;IACX,IAAI,KAAK;IACT,UAAU;IACV,SACE;GACJ,CAAC,CACH;EAEJ;EAEA,OAAO;CACT,CAAC;AACL"}

package/dist/js/packages/components/src/components/CodeEditor/languages/index.mjs CHANGED Viewed

@@ -9,7 +9,8 @@ Object.keys(langs).forEach((key) => {
 	supportedCodeEditorLanguages[languageKey] = [langs[languageKey]];
 });
 supportedCodeEditorLanguages.dotEnv = language;
+var isCodeEditorLanguage = (language) => Object.hasOwn(supportedCodeEditorLanguages, language);
 //#endregion
-export { supportedCodeEditorLanguages as default };
+export { supportedCodeEditorLanguages as default, isCodeEditorLanguage };
 //# sourceMappingURL=index.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/languages/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/languages/index.ts"],"sourcesContent":["import { langs, type LanguageName } from \"@uiw/codemirror-extensions-langs\";\nimport {\n type LanguageSupport,\n type StreamLanguage,\n} from \"@codemirror/language\";\nimport type { linter } from \"@codemirror/lint\";\nimport type { Extension } from \"@uiw/react-codemirror\";\nimport DotEnvLanguage from \"@/components/CodeEditor/languages/dotEnv\";\nimport type { ALL_LANGUAGES } from \"@/components/CodeEditor/languages/all\";\n\nexport type CodeEditorLanguage = (typeof ALL_LANGUAGES)[number];\n\nexport type LanguageFactory = Record<\n CodeEditorLanguage,\n (() =>\n \| StreamLanguage<unknown>\n \| LanguageSupport\n \| Extension\n \| ReturnType<typeof linter>)[]\n>;\n\nexport type LanguageContainer = [\n () => Extension,\n () => LanguageSupport,\n () => ReturnType<typeof linter>,\n];\n\nconst supportedCodeEditorLanguages: LanguageFactory = {} as never;\nObject.keys(langs).forEach((key) => {\n const languageKey = key as CodeEditorLanguage;\n supportedCodeEditorLanguages[languageKey] = [\n langs[languageKey as LanguageName],\n ];\n});\n\nsupportedCodeEditorLanguages.dotEnv = DotEnvLanguage;\n\nexport default supportedCodeEditorLanguages;\n"],"mappings":";;;;;AA2BA,IAAM,+BAAgD,CAAC;AACvD,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;CAClC,MAAM,cAAc;CACpB,6BAA6B,eAAe,CAC1C,MAAM,YACR;AACF,CAAC;AAED,6BAA6B,~~SAAS~~"}
1	+ {"version":3,"file":"index.mjs","names":["DotEnvLanguage"],"sources":["../../../../../../../../src/components/CodeEditor/languages/index.ts"],"sourcesContent":["import { langs, type LanguageName } from \"@uiw/codemirror-extensions-langs\";\nimport {\n type LanguageSupport,\n type StreamLanguage,\n} from \"@codemirror/language\";\nimport type { linter } from \"@codemirror/lint\";\nimport type { Extension } from \"@uiw/react-codemirror\";\nimport DotEnvLanguage from \"@/components/CodeEditor/languages/dotEnv\";\nimport type { ALL_LANGUAGES } from \"@/components/CodeEditor/languages/all\";\n\nexport type CodeEditorLanguage = (typeof ALL_LANGUAGES)[number];\n\nexport type LanguageFactory = Record<\n CodeEditorLanguage,\n (() =>\n \| StreamLanguage<unknown>\n \| LanguageSupport\n \| Extension\n \| ReturnType<typeof linter>)[]\n>;\n\nexport type LanguageContainer = [\n () => Extension,\n () => LanguageSupport,\n () => ReturnType<typeof linter>,\n];\n\nconst supportedCodeEditorLanguages: LanguageFactory = {} as never;\nObject.keys(langs).forEach((key) => {\n const languageKey = key as CodeEditorLanguage;\n supportedCodeEditorLanguages[languageKey] = [\n langs[languageKey as LanguageName],\n ];\n});\n\nsupportedCodeEditorLanguages.dotEnv = DotEnvLanguage;\n\nexport const isCodeEditorLanguage = (\n language: string,\n): language is CodeEditorLanguage =>\n Object.hasOwn(supportedCodeEditorLanguages, language);\n\nexport default supportedCodeEditorLanguages;\n"],"mappings":";;;;;AA2BA,IAAM,+BAAgD,CAAC;AACvD,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;CAClC,MAAM,cAAc;CACpB,6BAA6B,eAAe,CAC1C,MAAM,YACR;AACF,CAAC;AAED,6BAA6B,SAASA;AAEtC,IAAa,wBACX,aAEA,OAAO,OAAO,8BAA8B,QAAQ"}

package/dist/js/packages/components/src/components/CodeEditor/themes/defaultEditorTheme.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"defaultEditorTheme.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size)\",\n fontFamily: \"var(--code-editor--font-family)\",\n foreground: \"var(--form-control--content-color--default)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--form-control--content-color--default)\",\n gutterBorder: \"var(--code-editor--gutter-separator-color)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className, t.tagName],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"mappings":";;;;;AAGA,IAAa,oBAAoB,gBAAgB;CAC/C,OAAO;CACP,UAAU;EACR,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;CAChB;CACA,QAAQ;EACN;GAAE,~~KAAK~~,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK;~~IAAC~~,KAAE;~~IAAU~~,KAAE;~~IAAW~~,KAAE;GAAO;GACxC,OAAO;EACT;EACA;GAAE,~~KAAK~~,KAAE;GAAc,OAAO;EAAsC;EACpE;GACE,KAAK,~~CAAC~~,KAAE,~~cAAc~~,KAAE,aAAa;GACrC,OAAO;EACT;EACA;GAAE,KAAK,~~CAAC~~,KAAE,~~QAAQ~~,KAAE,MAAM;GAAG,OAAO;EAAoC;EACxE;GAAE,~~KAAK~~,KAAE;GAAQ,OAAO;EAAoC;EAC5D;GAAE,~~KAAK~~,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK,~~CAAC~~,KAAE,~~SAAS~~,KAAE,YAAY,~~GAAG~~,KAAE,~~SAAS~~,KAAE,YAAY,CAAC;GAC5D,OAAO;EACT;EACA;GACE,KAAK,~~CAAC~~,KAAE,~~UAAU~~,KAAE,YAAY;GAChC,OAAO;EACT;EACA;GAAE,~~KAAK~~,KAAE;GAAS,OAAO;EAAqC;CAChE;AACF,CAAC"}
1	+ {"version":3,"file":"defaultEditorTheme.mjs","names":["t"],"sources":["../../../../../../../../src/components/CodeEditor/themes/defaultEditorTheme.ts"],"sourcesContent":["import { githubLightInit } from \"@uiw/codemirror-theme-github\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const defaultLightTheme = githubLightInit({\n theme: \"light\",\n settings: {\n fontSize: \"var(--code-editor--font-size)\",\n fontFamily: \"var(--code-editor--font-family)\",\n foreground: \"var(--form-control--content-color--default)\",\n background: \"transparent\",\n gutterBackground: \"var(--form-control--background-color--default)\",\n gutterForeground: \"var(--form-control--content-color--default)\",\n gutterBorder: \"var(--code-editor--gutter-separator-color)\",\n },\n styles: [\n { tag: t.keyword, color: \"var(--color--code-syntax--keyword)\" },\n {\n tag: [t.typeName, t.className, t.tagName],\n color: \"var(--color--code-syntax--type)\",\n },\n { tag: t.variableName, color: \"var(--color--code-syntax--variable)\" },\n {\n tag: [t.propertyName, t.attributeName],\n color: \"var(--color--code-syntax--property)\",\n },\n { tag: [t.string, t.regexp], color: \"var(--color--code-syntax--string)\" },\n { tag: t.number, color: \"var(--color--code-syntax--number)\" },\n { tag: t.comment, color: \"var(--color--code-syntax--comment)\" },\n {\n tag: [t.function(t.variableName), t.function(t.propertyName)],\n color: \"var(--color--code-syntax--function)\",\n },\n {\n tag: [t.operator, t.typeOperator],\n color: \"var(--color--code-syntax--operator)\",\n },\n { tag: t.invalid, color: \"var(--color--code-syntax--invalid)\" },\n ],\n});\n"],"mappings":";;;;;AAGA,IAAa,oBAAoB,gBAAgB;CAC/C,OAAO;CACP,UAAU;EACR,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;CAChB;CACA,QAAQ;EACN;GAAE,KAAKA,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK;IAACA,KAAE;IAAUA,KAAE;IAAWA,KAAE;GAAO;GACxC,OAAO;EACT;EACA;GAAE,KAAKA,KAAE;GAAc,OAAO;EAAsC;EACpE;GACE,KAAK,CAACA,KAAE,cAAcA,KAAE,aAAa;GACrC,OAAO;EACT;EACA;GAAE,KAAK,CAACA,KAAE,QAAQA,KAAE,MAAM;GAAG,OAAO;EAAoC;EACxE;GAAE,KAAKA,KAAE;GAAQ,OAAO;EAAoC;EAC5D;GAAE,KAAKA,KAAE;GAAS,OAAO;EAAqC;EAC9D;GACE,KAAK,CAACA,KAAE,SAASA,KAAE,YAAY,GAAGA,KAAE,SAASA,KAAE,YAAY,CAAC;GAC5D,OAAO;EACT;EACA;GACE,KAAK,CAACA,KAAE,UAAUA,KAAE,YAAY;GAChC,OAAO;EACT;EACA;GAAE,KAAKA,KAAE;GAAS,OAAO;EAAqC;CAChE;AACF,CAAC"}

package/dist/js/packages/components/src/components/Color/Color.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Color.mjs","names":[],"sources":["../../../../../../../src/components/Color/Color.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Color.module.scss\";\nimport {\n alphaColors,\n type PropsWithClassName,\n statusTypes,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nconst flowColors = [\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n ...statusTypes,\n ...alphaColors,\n] as const;\n\ntype FlowColor = (typeof flowColors)[number];\ntype FlowWithCustomColor = FlowColor \| (string & {});\n\nfunction isFlowColor(something: unknown): something is FlowColor {\n const anyFlowColors = flowColors as readonly string[];\n return typeof something === \"string\" && anyFlowColors.includes(something);\n}\n\nexport interface ColorProps extends PropsWithChildren, PropsWithClassName {\n /** The color of the element. @default \"blue\" /\n color?: FlowWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Color: FC<ColorProps> = (props) => {\n const { children, className, color = \"blue\" } = props;\n\n const isAFlowColor = isFlowColor(color);\n const rootClassName = clsx(isAFlowColor && styles[color], className);\n const style = !isAFlowColor ? { color } : undefined;\n\n return (\n <span className={rootClassName} style={style}>\n {children}\n </span>\n );\n};\n\nexport default Color;\n"],"mappings":";;;;;;;AASA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL;AAKA,SAAS,YAAY,WAA4C;CAE/D,OAAO,OAAO,cAAc,~~YAAY~~,WAAc,SAAS,SAAS;AAC1E;;AAQA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW;CAEhD,MAAM,eAAe,YAAY,KAAK;CACtC,MAAM,gBAAgB,KAAK,~~gBAAgB~~,qBAAO,QAAQ,SAAS;CAGnE,OACE,oBAAC,QAAD;EAAM,WAAW;EAAsB,OAH3B,CAAC,eAAe,EAAE,MAAM,IAAI,KAAA;EAIrC;CACG,CAAA;AAEV"}
1	+ {"version":3,"file":"Color.mjs","names":["anyFlowColors","styles"],"sources":["../../../../../../../src/components/Color/Color.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Color.module.scss\";\nimport {\n alphaColors,\n type PropsWithClassName,\n statusTypes,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nconst flowColors = [\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n ...statusTypes,\n ...alphaColors,\n] as const;\n\ntype FlowColor = (typeof flowColors)[number];\ntype FlowWithCustomColor = FlowColor \| (string & {});\n\nfunction isFlowColor(something: unknown): something is FlowColor {\n const anyFlowColors = flowColors as readonly string[];\n return typeof something === \"string\" && anyFlowColors.includes(something);\n}\n\nexport interface ColorProps extends PropsWithChildren, PropsWithClassName {\n /** The color of the element. @default \"blue\" /\n color?: FlowWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Color: FC<ColorProps> = (props) => {\n const { children, className, color = \"blue\" } = props;\n\n const isAFlowColor = isFlowColor(color);\n const rootClassName = clsx(isAFlowColor && styles[color], className);\n const style = !isAFlowColor ? { color } : undefined;\n\n return (\n <span className={rootClassName} style={style}>\n {children}\n </span>\n );\n};\n\nexport default Color;\n"],"mappings":";;;;;;;AASA,IAAM,aAAa;CACjB;CACA;CACA;CACA;CACA,GAAG;CACH,GAAG;AACL;AAKA,SAAS,YAAY,WAA4C;CAE/D,OAAO,OAAO,cAAc,YAAYA,WAAc,SAAS,SAAS;AAC1E;;AAQA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW;CAEhD,MAAM,eAAe,YAAY,KAAK;CACtC,MAAM,gBAAgB,KAAK,gBAAgBC,qBAAO,QAAQ,SAAS;CAGnE,OACE,oBAAC,QAAD;EAAM,WAAW;EAAsB,OAH3B,CAAC,eAAe,EAAE,MAAM,IAAI,KAAA;EAIrC;CACG,CAAA;AAEV"}

package/dist/js/packages/components/src/components/ColumnLayout/ColumnLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" \| \"m\" \| \"l\" \| \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" \| \"ul\",\n>\n extends\n PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. /\n s?: (number \| null)[];\n /* Column layout for container size m. /\n m?: (number \| null)[];\n /* Column layout for container size l. /\n l?: (number \| null)[];\n /\n Size of the row and column gap between the content blocks inside the column\n * layout.\n \n @default \"m\"\n /\n gap?: GapSize;\n /* Size of the row gap between the content blocks inside the column layout. /\n rowGap?: GapSize;\n /* Size of the column gap between the content blocks inside the column layout. /\n columnGap?: GapSize;\n}\n\n/* @flr-generate all */\nexport const ColumnLayout = flowComponent(\n \"ColumnLayout\",\n (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n style: styleFromProps,\n } = props;\n\n let elementClassName: string = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-s-${i + 1}`),\n );\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-m-${i + 1}`),\n );\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-l-${i + 1}`),\n );\n }\n });\n\n const columnsS = getColumns(s ?? [1]);\n const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);\n const columnsL = l\n ? getColumns(l)\n : m \|\| s\n ? columnsM\n : getColumns([1, 1, 1]);\n\n const style: CSSProperties = {\n ...styleFromProps,\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n };\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,~~mBAA2B~~,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,~~eAAe~~,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,~~eAAe~~,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,~~eAAe~~,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC;CACpC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,WAAW,CAAC,GAAG,CAAC,CAAC;CACrE,MAAM,WAAW,IACb,WAAW,CAAC,IACZ,KAAK,IACH,WACA,WAAW;EAAC;EAAG;EAAG;CAAC,CAAC;CAE1B,MAAM,QAAuB;EAC3B,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,~~KAAK~~,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,~~oBAAC~~,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
1	+ {"version":3,"file":"ColumnLayout.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" \| \"m\" \| \"l\" \| \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" \| \"ul\",\n>\n extends\n PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. /\n s?: (number \| null)[];\n /* Column layout for container size m. /\n m?: (number \| null)[];\n /* Column layout for container size l. /\n l?: (number \| null)[];\n /\n Size of the row and column gap between the content blocks inside the column\n * layout.\n \n @default \"m\"\n /\n gap?: GapSize;\n /* Size of the row gap between the content blocks inside the column layout. /\n rowGap?: GapSize;\n /* Size of the column gap between the content blocks inside the column layout. /\n columnGap?: GapSize;\n}\n\n/* @flr-generate all */\nexport const ColumnLayout = flowComponent(\n \"ColumnLayout\",\n (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n style: styleFromProps,\n } = props;\n\n let elementClassName: string = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-s-${i + 1}`),\n );\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-m-${i + 1}`),\n );\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(\n elementClassName,\n styleClassname(styles, `hide-l-${i + 1}`),\n );\n }\n });\n\n const columnsS = getColumns(s ?? [1]);\n const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);\n const columnsL = l\n ? getColumns(l)\n : m \|\| s\n ? columnsM\n : getColumns([1, 1, 1]);\n\n const style: CSSProperties = {\n ...styleFromProps,\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n };\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,mBAA2BA,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAeA,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAeA,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAeA,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC;CACpC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,WAAW,CAAC,GAAG,CAAC,CAAC;CACrE,MAAM,WAAW,IACb,WAAW,CAAC,IACZ,KAAK,IACH,WACA,WAAW;EAAC;EAAG;EAAG;CAAC,CAAC;CAE1B,MAAM,QAAuB;EAC3B,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,KAAKA,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,oBAACC,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/Combine/Combine.mjs CHANGED Viewed

@@ -29,6 +29,7 @@ var CombineImplementation = (props) => {
 			className: Combine_module_default.icon,
 			color: "neutral"
 		},
+		Kbd: { className: Combine_module_default.kbd },
 		ContextualHelpTrigger: { Button: {
 			className: Combine_module_default.contextualHelpTriggerButton,
 			color: "secondary"

package/dist/js/packages/components/src/components/Combine/Combine.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/*\n The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n /\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.combine, className);\n\n const propsContext: PropsContext = {\n Text: { className: styles.text },\n Button: { className: styles.button },\n Avatar: { className: styles.avatar, size: \"m\" },\n CopyButton: { size: \"s\", className: styles.copyButton },\n Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n ContextualHelpTrigger: {\n Button: {\n className: styles.contextualHelpTriggerButton,\n color: \"secondary\",\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>{children}</div>\n </PropsContextProvider>\n );\n};\n\n/\n @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,~~KAAK~~,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,~~WAAW~~,uBAAO,KAAK;EAC/B,QAAQ,EAAE,~~WAAW~~,uBAAO,OAAO;EACnC,QAAQ;GAAE,~~WAAW~~,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,~~WAAW~~,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,~~WAAW~~,uBAAO;GAAM,OAAO;EAAU;EAC5D,uBAAuB,EACrB,QAAQ;GACN,~~WAAW~~,uBAAO;GAClB,OAAO;EACT,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}
1	+ {"version":3,"file":"Combine.mjs","names":["styles"],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/*\n The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n /\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.combine, className);\n\n const propsContext: PropsContext = {\n Text: { className: styles.text },\n Button: { className: styles.button },\n Avatar: { className: styles.avatar, size: \"m\" },\n CopyButton: { size: \"s\", className: styles.copyButton },\n Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n Kbd: { className: styles.kbd },\n ContextualHelpTrigger: {\n Button: {\n className: styles.contextualHelpTriggerButton,\n color: \"secondary\",\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>{children}</div>\n </PropsContextProvider>\n );\n};\n\n/\n @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAWA,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAWA,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAWA,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAWA,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAWA,uBAAO;GAAM,OAAO;EAAU;EAC5D,KAAK,EAAE,WAAWA,uBAAO,IAAI;EAC7B,uBAAuB,EACrB,QAAQ;GACN,WAAWA,uBAAO;GAClB,OAAO;EACT,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs CHANGED Viewed

@@ -8,6 +8,7 @@ var button = "flow--combine--button";
 var contextualHelpTriggerButton = "flow--combine--contextual-help-trigger-button";
 var copyButton = "flow--combine--copy-button";
 var icon = "flow--combine--icon";
+var kbd = "flow--combine--kbd";
 var Combine_module_default = {
 	combine,
 	avatar,
@@ -15,9 +16,10 @@ var Combine_module_default = {
 	button,
 	contextualHelpTriggerButton,
 	copyButton,
-	icon
+	icon,
+	kbd
 };
 //#endregion
-export { avatar, button, combine, contextualHelpTriggerButton, copyButton, Combine_module_default as default, icon, text };
+export { avatar, button, combine, contextualHelpTriggerButton, copyButton, Combine_module_default as default, icon, kbd, text };
 //# sourceMappingURL=Combine.module.mjs.map

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n &:has(.avatar):has(.text) {\n display: flex;\n gap: var(--combine--avatar-text--spacing);\n height: fit-content;\n\n --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n min-height: var(--first-two-lines-height);\n\n .text {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-self: center;\n font-size: var(--font-size-text--s);\n }\n\n .avatar {\n margin-top: calc(\n (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n );\n }\n }\n\n &:has(:global(.flow--form-field)):has(.button) {\n display: flex;\n align-items: flex-start;\n column-gap: var(--combine--input-button--spacing);\n\n :global(.flow--form-field) {\n flex-grow: 1;\n }\n\n // `<label>` is also the root element react-aria renders for Checkbox and\n // Switch, so `Label`'s class would not match the same set of children.\n // stylelint-disable-next-line selector-max-type -- see above\n &:has(label) {\n .button {\n margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n }\n }\n }\n\n &:has(.text):has(.contextualHelpTriggerButton),\n &:has(.text):has(.copyButton) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--text-button--spacing);\n }\n\n &:has(> .text):has(> .icon) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--icon-text--spacing);\n }\n}\n\n@media (max-width: 550px) {\n .combine:has(:global(.flow--form-field)):has(.button) {\n flex-direction: column;\n row-gap: var(--section--spacing);\n align-items: stretch;\n\n .button {\n width: 100%;\n }\n\n // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n &:has(label) {\n .button {\n margin-top: 0;\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n &:has(.avatar):has(.text) {\n display: flex;\n gap: var(--combine--avatar-text--spacing);\n height: fit-content;\n\n --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n min-height: var(--first-two-lines-height);\n\n .text {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-self: center;\n font-size: var(--font-size-text--s);\n }\n\n .avatar {\n margin-top: calc(\n (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n );\n }\n }\n\n &:has(:global(.flow--form-field)):has(.button) {\n display: flex;\n align-items: flex-start;\n column-gap: var(--combine--input-button--spacing);\n\n :global(.flow--form-field) {\n flex-grow: 1;\n }\n\n // `<label>` is also the root element react-aria renders for Checkbox and\n // Switch, so `Label`'s class would not match the same set of children.\n // stylelint-disable-next-line selector-max-type -- see above\n &:has(label) {\n .button {\n margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n }\n }\n }\n\n &:has(.text):has(.contextualHelpTriggerButton),\n &:has(.text):has(.copyButton) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--text-button--spacing);\n }\n\n &:has(> .text):has(> .icon) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--icon-text--spacing);\n }\n\n // Margins instead of a gap: keys sit closer to each other than to the text,\n // e.g. \"↑ ↓ Select\" in one Combine.\n &:has(> .kbd) {\n display: inline-flex;\n align-items: center;\n\n > .kbd + .kbd {\n margin-inline-start: var(--combine--kbd-kbd--spacing);\n }\n\n > .kbd + .text,\n > .text + .kbd {\n margin-inline-start: var(--combine--kbd-text--spacing);\n }\n }\n}\n\n@media (max-width: 550px) {\n .combine:has(:global(.flow--form-field)):has(.button) {\n flex-direction: column;\n row-gap: var(--section--spacing);\n align-items: stretch;\n\n .button {\n width: 100%;\n }\n\n // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n &:has(label) {\n .button {\n margin-top: 0;\n }\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs CHANGED Viewed

@@ -20,9 +20,9 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var ComboBox = flowComponent("ComboBox", (props) => {
 	const { children, className, menuTrigger = "focus", onChange, onSelectionChange, placeholder, ref, renderEmptyState, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
-	const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
+	const rootClassName = clsx(wrapperProps.className, ComboBox_module_default.comboBox, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("ComboBox") },
 		...fieldPropsContext
@@ -34,10 +34,10 @@ var ComboBox = flowComponent("ComboBox", (props) => {
 	};
 	const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
 	return /* @__PURE__ */ jsx(Aria.ComboBox, {
-		...fieldProps,
 		menuTrigger,
 		className: rootClassName,
 		...rest,
+		...controlProps,
 		onSelectionChange: handleSelectionChange,
 		onOpenChange: (isOpen) => {
 			controller.setOpen(isOpen);

package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n extends\n Omit<Aria.ComboBoxProps<never>, \"children\" \| \"onChange\">,\n Pick<Aria.InputProps, \"placeholder\">,\n Pick<OptionsProps, \"renderEmptyState\">,\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement> {\n /* Called with the key of the selected option whenever the selection changes. /\n onChange?: (value: string) => void;\n}\n\n/* @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n const {\n children,\n className,\n menuTrigger = \"focus\",\n onChange,\n onSelectionChange,\n placeholder,\n ref,\n renderEmptyState,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n ~~fieldProps~~,\n fieldPropsContext,\n } = useFieldComponent(props, \"ComboBox\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n const rootClassName = clsx(~~fieldProps~~.className, styles.comboBox, className);\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: getOptionsTunnelProps(\"ComboBox\"),\n },\n ...fieldPropsContext,\n };\n\n const handleSelectionChange = (key: Key \| null) => {\n if (key === null) {\n return;\n }\n onChange?.(String(key));\n onSelectionChange?.(key);\n };\n\n const controller = useOverlayController(\"ComboBox\", {\n reuseControllerFromContext: false,\n });\n\n return (\n <Aria.ComboBox\n ~~{...fieldProps}\n~~ menuTrigger={menuTrigger}\n className={rootClassName}\n {...rest}\n onSelectionChange={handleSelectionChange}\n onOpenChange={(isOpen) => {\n controller.setOpen(isOpen);\n }}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n <div className={styles.input}>\n <Aria.Input placeholder={placeholder} ref={ref} />\n <Button\n className={styles.toggle}\n aria-label={stringFormatter.format(\"showOptions\")}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n </Button>\n </div>\n\n {children}\n\n <Options\n controller={controller}\n onOpenChange={() => {\n // cut-off to avoid double controller state changes\n }}\n renderEmptyState={renderEmptyState}\n >\n <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n </Options>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.ComboBox>\n );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,~~YACA~~,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,~~KAAK~~,~~WAAW~~,~~WAAW~~,wBAAO,~~UAAU~~,~~SAAS~~;~~CAE3E~~,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;~~EACE,GAAI~~;~~EACS;~~EACb,WAAW;EACX,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,~~WAAW~~,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,~~WAAW~~,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}
1	+ {"version":3,"file":"ComboBox.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n extends\n Omit<Aria.ComboBoxProps<never>, \"children\" \| \"onChange\">,\n Pick<Aria.InputProps, \"placeholder\">,\n Pick<OptionsProps, \"renderEmptyState\">,\n PropsWithChildren,\n FlowComponentProps<HTMLInputElement> {\n /* Called with the key of the selected option whenever the selection changes. /\n onChange?: (value: string) => void;\n}\n\n/* @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n const {\n children,\n className,\n menuTrigger = \"focus\",\n onChange,\n onSelectionChange,\n placeholder,\n ref,\n renderEmptyState,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"ComboBox\");\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n const rootClassName = clsx(\n wrapperProps.className,\n styles.comboBox,\n className,\n );\n\n const propsContext: PropsContext = {\n Option: {\n tunnel: getOptionsTunnelProps(\"ComboBox\"),\n },\n ...fieldPropsContext,\n };\n\n const handleSelectionChange = (key: Key \| null) => {\n if (key === null) {\n return;\n }\n onChange?.(String(key));\n onSelectionChange?.(key);\n };\n\n const controller = useOverlayController(\"ComboBox\", {\n reuseControllerFromContext: false,\n });\n\n return (\n <Aria.ComboBox\n menuTrigger={menuTrigger}\n className={rootClassName}\n {...rest}\n {...controlProps}\n onSelectionChange={handleSelectionChange}\n onOpenChange={(isOpen) => {\n controller.setOpen(isOpen);\n }}\n >\n <PropsContextProvider props={propsContext}>\n <FieldErrorCaptureContext>\n <div className={styles.input}>\n <Aria.Input placeholder={placeholder} ref={ref} />\n <Button\n className={styles.toggle}\n aria-label={stringFormatter.format(\"showOptions\")}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconChevronDown />\n </Button>\n </div>\n\n {children}\n\n <Options\n controller={controller}\n onOpenChange={() => {\n // cut-off to avoid double controller state changes\n }}\n renderEmptyState={renderEmptyState}\n >\n <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n </Options>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.ComboBox>\n );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KACpB,aAAa,WACbC,wBAAO,UACP,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACe;EACb,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAWA,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAWA,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}

package/dist/js/packages/components/src/components/Content/Content.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Content/Content.tsx
 /** @flr-generate all */
@@ -9,7 +10,7 @@ var Content = flowComponent("Content", (props) => {
 	return /* @__PURE__ */ jsx(elementType, {
 		ref,
 		...rest,
-		children
+		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
 	});
 });
 //#endregion

package/dist/js/packages/components/src/components/Content/Content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.mjs","names":[],"sources":["../../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContentProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" \| \"section\" \| \"span\">,\n FlowComponentProps {\n /** @internal /\n slot?: string;\n}\n\n/* @flr-generate all */\nexport const Content = flowComponent(\"Content\", (props) => {\n const { children, elementType = \"div\", ref, ...rest } = props;\n\n const Element = elementType;\n\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n});\n\nexport default Content;\n"],"mappings":"~~;;;;;;AAeA~~,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,cAAc,OAAO,KAAK,GAAG,SAAS;CAIxD,OACE,~~oBAAC~~,aAAD;EAAc;EAAK,GAAI;~~EACpB~~;~~CACM~~,CAAA;AAEb,CAAC"}
1	+ {"version":3,"file":"Content.mjs","names":["Element"],"sources":["../../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface ContentProps\n extends\n PropsWithChildren,\n PropsWithElementType<\"div\" \| \"section\" \| \"span\">,\n FlowComponentProps {\n /** @internal /\n slot?: string;\n}\n\n/* @flr-generate all */\nexport const Content = flowComponent(\"Content\", (props) => {\n const { children, elementType = \"div\", ref, ...rest } = props;\n\n const Element = elementType;\n\n return (\n <Element ref={ref} {...rest}>\n <SkeletonRawText>{children}</SkeletonRawText>\n </Element>\n );\n});\n\nexport default Content;\n"],"mappings":";;;;;;;AAgBA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,cAAc,OAAO,KAAK,GAAG,SAAS;CAIxD,OACE,oBAACA,aAAD;EAAc;EAAK,GAAI;EACrB,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACrC,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu/ContextMenu.tsx
 /** @flr-generate all */
 var ContextMenu = flowComponent("ContextMenu", (props) => {
-	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, ...rest } = props;
+	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, ...rest } = props;
 	const overlayControllerFromContext = useOverlayController("ContextMenu", { reuseControllerFromContext: true });
 	const overlayController = overlayControllerFromProps ?? overlayControllerFromContext;
 	const selectionVariant = getMenuItemSelectionVariant(selectionMode);
@@ -50,6 +50,10 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 					disabledKeys,
 					onSelectionChange,
 					renderEmptyState,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-details": ariaDetails,
 					ref,
 					children: [selectAll, /* @__PURE__ */ jsx(PropsContextProvider, {
 						props: propsContext,

package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" \| \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n \| \"onAction\"\n \| \"selectedKeys\"\n \| \"defaultSelectedKeys\"\n \| \"onSelectionChange\"\n \| \"disabledKeys\"\n \| \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. /\n selectionMode?: ContextMenuSelectionMode;\n /* Sets the context menu to a fixed width. /\n width?: string \| number;\n /\n Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n /\n showSelectAll?: boolean;\n}\n\n/* @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n controller: overlayControllerFromProps,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={styles.popover}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,~~WAAW~~,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,~~WAAW~~,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;~~KACb~~;~~KATP~~,UAAA,~~CAWG~~,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
1	+ {"version":3,"file":"ContextMenu.mjs","names":["styles"],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" \| \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n \| \"onAction\"\n \| \"selectedKeys\"\n \| \"defaultSelectedKeys\"\n \| \"onSelectionChange\"\n \| \"disabledKeys\"\n \| \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. /\n selectionMode?: ContextMenuSelectionMode;\n /* Sets the context menu to a fixed width. /\n width?: string \| number;\n /\n Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n /\n showSelectAll?: boolean;\n}\n\n/* @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n controller: overlayControllerFromProps,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-details\": ariaDetails,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={styles.popover}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAWA,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAWA,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KAClB,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,gBAAc;KACT;KAbP,UAAA,CAeG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,~~WAAW~~,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,eAAe,aAAa;KAC/C;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}
1	+ {"version":3,"file":"ContextMenuSection.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAWA,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,eAAe,aAAa;KAC/C;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}