@mittwald/flow-react-components 1.5.0-next.9 → 1.5.1

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

@@ -2,8 +2,9 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.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 +12,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 +22,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 +52,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		Label: {
 			...fieldPropsContext.Label,
 			id: labelId,
+			ref: labelRef,
 			tunnel: {
 				id: "label",
 				component: "CodeEditor"
@@ -45,6 +61,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 		FieldDescription: {
 			...fieldPropsContext.FieldDescription,
 			id: descriptionId,
+			ref: descriptionRef,
 			tunnel: {
 				id: "fieldDescription",
 				component: "CodeEditor"
@@ -62,23 +79,63 @@ 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);
+	const isSkeleton = useSkeletonMode();
+	const skeleton = /* @__PURE__ */ jsxs("div", {
+		className: clsx(CodeEditor_module_default.codeMirror, isReadOnly && CodeEditor_module_default.readonly, CodeEditor_module_default.skeleton),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: CodeEditor_module_default.skeletonLines,
+			style: { height: height ?? minHeight },
+			children: (value ?? "").split("\n").map((line, index) => /* @__PURE__ */ jsx("div", { children: line || " " }, index))
+		}), children]
+	});
+	const editor = /* @__PURE__ */ jsxs(CodeMirror, {
+		...rest,
+		value,
+		basicSetup: {
+			highlightActiveLine: showActiveLineMarker && !isDisabled,
+			highlightActiveLineGutter: showActiveLineMarker && !isDisabled,
+			autocompletion: false,
+			lineNumbers: false,
+			foldGutter: false,
+			highlightSelectionMatches: false
+		},
+		theme: defaultLightTheme,
+		"data-invalid": isInvalid || void 0,
+		"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;
+		},
+		extensions: [...enabledExtensions, contentAttributes],
+		height: height ?? minHeight,
+		children: [copyable && /* @__PURE__ */ jsx(CopyButton, {
+			className: CodeEditor_module_default.copyButton,
+			size: "s",
+			variant: "soft",
+			text: value,
+			isDisabled
+		}), children]
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
+		"data-disabled": isDisabled || void 0,
+		inert: isSkeleton || void 0,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [
@@ -86,33 +143,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
 					id: "label",
 					component: "CodeEditor"
 				}),
-				/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(CodeMirror, {
-					...rest,
-					value,
-					basicSetup: {
-						highlightActiveLine: showActiveLineMarker,
-						highlightActiveLineGutter: showActiveLineMarker,
-						autocompletion: false,
-						lineNumbers: false,
-						foldGutter: false,
-						highlightSelectionMatches: false
-					},
-					theme: defaultLightTheme,
-					"data-invalid": isInvalid || void 0,
-					readOnly: isReadOnly,
-					className: clsx(CodeEditor_module_default.codeMirror, isReadOnly && CodeEditor_module_default.readonly),
-					ref: (codeMirrorRef) => {
-						if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
-					},
-					extensions: [...enabledExtensions, contentAttributes],
-					height: height ?? minHeight,
-					children: [copyable && /* @__PURE__ */ jsx(CopyButton, {
-						className: CodeEditor_module_default.copyButton,
-						size: "s",
-						variant: "soft",
-						text: value
-					}), children]
-				}) }),
+				/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: isSkeleton ? skeleton : editor }),
 				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 					id: "fieldDescription",
 					component: "CodeEditor"

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

@@ -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"}
+{"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\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\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  const isSkeleton = useSkeletonMode();\n\n  /* No CodeMirror: one surface, as high as the code in the editor's line\n     height. The children still render, so a label or a field description\n     tunnels out and follows its own skeleton rule. */\n  const skeleton = (\n    <div\n      className={clsx(\n        styles.codeMirror,\n        isReadOnly && styles.readonly,\n        styles.skeleton,\n      )}\n    >\n      <div\n        className={styles.skeletonLines}\n        style={{ height: height ?? minHeight }}\n      >\n        {(value ?? \"\").split(\"\\n\").map((line, index) => (\n          <div key={index}>{line || \" \"}</div>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n\n  const editor = (\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  );\n\n  return (\n    <div\n      className={rootClassName}\n      data-disabled={isDisabled || undefined}\n      inert={isSkeleton || undefined}\n    >\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          {isSkeleton ? skeleton : editor}\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiFA,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,MAAM,aAAa,gBAAgB;CAKnC,MAAM,WACJ,qBAAC,OAAD;EACE,WAAW,KACTA,0BAAO,YACP,cAAcA,0BAAO,UACrBA,0BAAO,QACT;EALF,UAAA,CAOE,oBAAC,OAAD;GACE,WAAWA,0BAAO;GAClB,OAAO,EAAE,QAAQ,UAAU,UAAU;GAEnC,WAAA,SAAS,GAAA,CAAI,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UACpC,oBAAC,OAAD,EAAA,UAAkB,QAAQ,IAAS,GAAzB,KAAyB,CACpC;EACE,CAAA,GACJ,QACE;;CAGP,MAAM,SACJ,qBAAC,YAAD;EACE,GAAI;EACG;EACP,YAAY;GACV,qBAAqB,wBAAwB,CAAC;GAC9C,2BAA2B,wBAAwB,CAAC;GACpD,gBAAgB;GAChB,aAAa;GACb,YAAY;GACZ,2BAA2B;EAC7B;EACA,OAAO;EACP,gBAAc,aAAa,KAAA;EAC3B,iBAAe,cAAc,KAAA;EAC7B,UAAU,cAAc;EACxB,UAAU,CAAC;EACX,WAAW,KAAKA,0BAAO,YAAY,cAAcA,0BAAO,QAAQ;EAChE,MAAM,kBAAkB;GACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;EAErC;EACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;EACpD,QAAQ,UAAU;EAvBpB,UAAA,CAyBG,YACC,oBAAC,YAAD;GACE,WAAWA,0BAAO;GAClB,MAAK;GACL,SAAQ;GACR,MAAM;GACM;EACb,CAAA,GAEF,QACS;;CAGd,OACE,oBAAC,OAAD;EACE,WAAW;EACX,iBAAe,cAAc,KAAA;EAC7B,OAAO,cAAc,KAAA;EAErB,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACG,aAAa,WAAW,OACD,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

@@ -5,13 +5,19 @@ var codeEditor = "flow--code-editor";
 var codeMirror = "flow--code-editor--code-mirror";
 var readonly = "flow--code-editor--readonly";
 var copyButton = "flow--code-editor--copy-button";
+var skeleton = "flow--code-editor--skeleton";
+var skeletonLines = "flow--code-editor--skeleton-lines";
 var CodeEditor_module_default = {
 	codeEditor,
 	codeMirror,
 	readonly,
-	copyButton
+	"skeleton-surface-shimmer": "flow--code-editor--skeleton-surface-shimmer",
+	copyButton,
+	skeleton,
+	skeletonLines,
+	"skeleton-text-shimmer": "flow--code-editor--skeleton-text-shimmer"
 };
 //#endregion
-export { codeEditor, codeMirror, copyButton, CodeEditor_module_default as default, readonly };
+export { codeEditor, codeMirror, copyButton, CodeEditor_module_default as default, readonly, skeleton, skeletonLines };
 
 //# sourceMappingURL=CodeEditor.module.mjs.map

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

@@ -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":""}
+{"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@use \"@/styles/mixins/skeleton\";\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    /* SkeletonMode — after the states, so the surface wins over their colors */\n\n    &.skeleton {\n      @include skeleton.shape;\n\n      --skeleton-radius: var(--form-control--corner-radius);\n    }\n\n    /* Stands in for CodeMirror's lines, so the surface is as high as the code. */\n    .skeletonLines {\n      font-family: var(--code-editor--font-family);\n      font-size: var(--code-editor--font-size);\n      line-height: 1.4;\n      white-space: pre;\n    }\n  }\n}\n\n@include skeleton.keyframes;\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

@@ -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

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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, skeletonProps } = 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,11 @@ var ComboBox = flowComponent("ComboBox", (props) => {
 	};
 	const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
 	return /* @__PURE__ */ jsx(Aria.ComboBox, {
-		...fieldProps,
 		menuTrigger,
 		className: rootClassName,
 		...rest,
+		...controlProps,
+		...skeletonProps,
 		onSelectionChange: handleSelectionChange,
 		onOpenChange: (isOpen) => {
 			controller.setOpen(isOpen);

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

@@ -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"}
+{"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    skeletonProps,\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      {...skeletonProps}\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,mBACA,kBACE,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,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/ComboBox/ComboBox.module.mjs

@@ -9,7 +9,9 @@ var ComboBox_module_default = {
 	comboBox,
 	input,
 	readonly,
-	toggle
+	"skeleton-surface-shimmer": "flow--combo-box--skeleton-surface-shimmer",
+	toggle,
+	"skeleton-text-shimmer": "flow--combo-box--skeleton-text-shimmer"
 };
 //#endregion
 export { comboBox, ComboBox_module_default as default, input, readonly, toggle };

package/dist/js/packages/components/src/components/ComboBox/ComboBox.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n  .input {\n    order: 2;\n    display: grid;\n    grid-template-areas: \"input\";\n\n    /* react-aria's Input — ComboBox passes no className, so its default\n       class is the handle. */\n    :global(.react-aria-Input) {\n      @include formControl.formControl();\n\n      grid-area: input;\n      padding-inline-end: calc(\n        var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n      );\n    }\n\n    .toggle {\n      grid-area: input;\n      justify-self: end;\n      margin: var(--form-control--border-width);\n      padding: calc(\n        var(--button--padding-icon-only) - var(--form-control--border-width)\n      );\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &[data-pressed] {\n        background-color: transparent;\n      }\n    }\n  }\n\n  &:not([data-disabled=\"true\"]):hover {\n    :global(.react-aria-Input):not(:read-only),\n    .toggle:not([data-disabled=\"true\"]) {\n      background-color: var(--form-control--background-color--hover);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n  .input {\n    order: 2;\n    display: grid;\n    grid-template-areas: \"input\";\n\n    /* react-aria's Input — ComboBox passes no className, so its default\n       class is the handle. */\n    :global(.react-aria-Input) {\n      @include formControl.formControl();\n\n      grid-area: input;\n      padding-inline-end: calc(\n        var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n      );\n    }\n\n    .toggle {\n      grid-area: input;\n      justify-self: end;\n      margin: var(--form-control--border-width);\n      padding: calc(\n        var(--button--padding-icon-only) - var(--form-control--border-width)\n      );\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &[data-pressed] {\n        background-color: transparent;\n      }\n    }\n\n    /* Skeleton: the toggle is a sibling of the input, so the container is the\n       surface that hides it */\n    @include formControl.formSkeleton;\n  }\n\n  &:not([data-disabled=\"true\"]):hover {\n    :global(.react-aria-Input):not(:read-only),\n    .toggle:not([data-disabled=\"true\"]) {\n      background-color: var(--form-control--background-color--hover);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -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

@@ -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"}
+{"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"}