@mittwald/flow-react-components 1.5.0-next.3 → 1.5.0-next.31

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default: false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n  const rootClassName = clsx(styles.codeBlock, className);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div className={clsx(rootClassName, styles.withChildren)}>\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>{children}</code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n    >\n      <CodeEditor\n        {...rest}\n        value={code}\n        editable={false}\n        copyable={copyable}\n        showLineNumbers={showLineNumbers}\n        showLinterMarkers={false}\n        showCodeFolding={false}\n        showActiveLineMarker={false}\n        isReadOnly\n        onCreateEditor={(view) => {\n          editorRef.current = view.dom;\n\n          if (!truncateLines) {\n            return;\n          }\n\n          const lineHeight = 20;\n          const padding = 12;\n\n          const visibleLines =\n            typeof truncateLines === \"number\" ? truncateLines : 8;\n\n          const totalLines = view.state.doc.lines;\n\n          if (totalLines > visibleLines)\n            setMaxHeight(lineHeight * visibleLines + padding);\n        }}\n        id={id}\n      >\n        {truncateLines && maxHeight && (\n          <div className={clsx(styles.buttonContainer)}>\n            <Button\n              variant=\"plain\"\n              color=\"secondary\"\n              size=\"s\"\n              onPress={toggleFolded}\n              aria-expanded={!folded}\n              aria-controls={id}\n            >\n              {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n            </Button>\n          </div>\n        )}\n      </CodeEditor>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAa,yBAAO,WACpB,UAAU,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  type FC,\n  type PropsWithChildren,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface CodeBlockProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    Partial<\n      Pick<CodeEditorProps, \"language\" | \"showLineNumbers\" | \"copyable\">\n    > {\n  /** The code displayed in the block. */\n  code?: string;\n  /**\n   * Controls truncation of long code blocks. `false` disables it, `true`\n   * truncates after 8 lines, and a number sets the maximum line count.\n   *\n   * @default: false\n   */\n  truncateLines?: boolean | number;\n}\n\n/** @flr-generate all */\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n  const {\n    code,\n    className,\n    copyable = false,\n    showLineNumbers = false,\n    children,\n    truncateLines = false,\n    ...rest\n  } = props;\n\n  const [folded, setFolded] = useState(truncateLines !== false);\n  const [maxHeight, setMaxHeight] = useState<number>();\n  /* The full height, only while the toggle animates to or from it. */\n  const [expandedHeight, setExpandedHeight] = useState<number>();\n  const editorRef = useRef<HTMLElement>(null);\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n  const rootClassName = clsx(styles.codeBlock, className);\n\n  const id = useId();\n\n  if (!code) {\n    return (\n      <div className={clsx(rootClassName, styles.withChildren)}>\n        {/* Deliberately class-less: a `flow--` class would make the global\n            reset's `font: inherit` apply and replace the UA monospace\n            metrics. See CodeBlock.module.scss. */}\n        <pre>\n          <code>{children}</code>\n        </pre>\n      </div>\n    );\n  }\n\n  const heightVariables: React.CSSProperties = {\n    ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n    ...(expandedHeight\n      ? { \"--expanded-max-height\": `${expandedHeight}px` }\n      : {}),\n  };\n\n  /* A height transition needs a length on both ends – `none` does not\n     interpolate. So the full height is measured for the transition and\n     released once it ended, and code that changes later is not clipped. */\n  const toggleFolded = () => {\n    const editor = editorRef.current;\n\n    if (!editor) {\n      setFolded((folded) => !folded);\n      return;\n    }\n\n    const animates = getComputedStyle(editor)\n      .transitionDuration.split(\",\")\n      .some((duration) => parseFloat(duration) > 0);\n\n    if (folded) {\n      setExpandedHeight(animates ? editor.scrollHeight : undefined);\n      setFolded(false);\n    } else {\n      flushSync(() => setExpandedHeight(editor.scrollHeight));\n      // Applies the start height before the folded one replaces it.\n      editor.getBoundingClientRect();\n      setFolded(true);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        rootClassName,\n        maxHeight && styles.truncated,\n        folded && styles.folded,\n      )}\n      style={heightVariables}\n      onTransitionEnd={(event) => {\n        if (event.propertyName === \"max-height\") {\n          setExpandedHeight(undefined);\n        }\n      }}\n    >\n      <CodeEditor\n        {...rest}\n        value={code}\n        editable={false}\n        copyable={copyable}\n        showLineNumbers={showLineNumbers}\n        showLinterMarkers={false}\n        showCodeFolding={false}\n        showActiveLineMarker={false}\n        isReadOnly\n        onCreateEditor={(view) => {\n          editorRef.current = view.dom;\n\n          if (!truncateLines) {\n            return;\n          }\n\n          const lineHeight = 20;\n          const padding = 12;\n\n          const visibleLines =\n            typeof truncateLines === \"number\" ? truncateLines : 8;\n\n          const totalLines = view.state.doc.lines;\n\n          if (totalLines > visibleLines)\n            setMaxHeight(lineHeight * visibleLines + padding);\n        }}\n        id={id}\n      >\n        {truncateLines && maxHeight && (\n          <div className={clsx(styles.buttonContainer)}>\n            <Button\n              variant=\"plain\"\n              color=\"secondary\"\n              size=\"s\"\n              onPress={toggleFolded}\n              aria-expanded={!folded}\n              aria-controls={id}\n            >\n              {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n            </Button>\n          </div>\n        )}\n      </CodeEditor>\n    </div>\n  );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAKC,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAeA,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}

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

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

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

@@ -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\";\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  /** 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    isDisabled,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n    ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName} data-disabled={isDisabled || undefined}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker && !isDisabled,\n              highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            data-disabled={isDisabled || undefined}\n            readOnly={isReadOnly || isDisabled}\n            editable={!isDisabled}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n                isDisabled={isDisabled}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6EA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,aAAa,WACbA,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,WAAW,aAAa,YAA4B;EACxD,YAAY,CAAC,CAAC,OAAO;CACvB,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,aAAa,YAA4B;EAC9D,kBAAkB,CAAC,CAAC,OAAO;CAC7B,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;CASD,MAAM,aAAa,QAAQ,gBAAgB,YAAY,OAAO;CAC9D,MAAM,cAAc,QAClB,kBAAkB,eAClB,aAAa,mBACf;CAEA,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,GAAI,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACtD,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;EAC9C,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;CAClD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,iBAAe,cAAc,KAAA;EAC1D,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB,wBAAwB,CAAC;MAC9C,2BAA2B,wBAAwB,CAAC;MACpD,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,iBAAe,cAAc,KAAA;KAC7B,UAAU,cAAc;KACxB,UAAU,CAAC;KACX,WAAW,KAAKA,0BAAO,YAAY,cAAcA,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KAvBpB,UAAA,CAyBG,YACC,oBAAC,YAAD;MACE,WAAWA,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;MACM;KACb,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}

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

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

package/dist/js/packages/components/src/components/CodeEditor/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.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 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"}

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 } = useFieldComponent(props, "ComboBox");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
-	const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
+	const rootClassName = clsx(wrapperProps.className, ComboBox_module_default.comboBox, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("ComboBox") },
 		...fieldPropsContext
@@ -34,10 +34,10 @@ var ComboBox = flowComponent("ComboBox", (props) => {
 	};
 	const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
 	return /* @__PURE__ */ jsx(Aria.ComboBox, {
-		...fieldProps,
 		menuTrigger,
 		className: rootClassName,
 		...rest,
+		...controlProps,
 		onSelectionChange: handleSelectionChange,
 		onOpenChange: (isOpen) => {
 			controller.setOpen(isOpen);

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

@@ -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  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.comboBox,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"ComboBox\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      {...controlProps}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KACpB,aAAa,WACbC,wBAAO,UACP,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACe;EACb,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAWA,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAWA,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}

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

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

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

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

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

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

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

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

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuSelectAll.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { useContext, useRef, type FC } from \"react\";\nimport type { Key, Node } from \"@react-types/shared\";\nimport type { TreeState } from \"react-stately\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport menuItemStyles from \"@/components/MenuItem/MenuItem.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"../../ContextMenu.module.scss\";\n\nconst selectAllSectionId = \"flow--context-menu--select-all\";\n\n/**\n * Keys that share the menu's selection: enabled items at the top level and in\n * sections without a selection mode of their own.\n */\nconst getSelectableKeys = (state: TreeState<unknown>): Key[] => {\n  const keys: Key[] = [];\n\n  const collect = (nodes: Iterable<Node<unknown>>) => {\n    for (const node of nodes) {\n      if (node.type === \"item\") {\n        if (!state.selectionManager.isDisabled(node.key)) {\n          keys.push(node.key);\n        }\n      } else if (\n        node.type === \"section\" &&\n        node.key !== selectAllSectionId &&\n        node.props?.selectionMode === undefined\n      ) {\n        collect(state.collection.getChildren?.(node.key) ?? node.childNodes);\n      }\n    }\n  };\n\n  collect(state.collection);\n  return keys;\n};\n\ninterface SelectAll {\n  isEverySelected: boolean;\n  toggle: () => void;\n}\n\n/**\n * Rendered by the visible menu item. The collection renders the item's element\n * a second time outside the menu, where `MenuStateContext` is missing.\n */\nconst SelectAllMenuItemContent: FC<\n  Aria.MenuItemRenderProps & { selectAll: { current?: SelectAll } }\n> = (props) => {\n  const { selectAll, ...renderProps } = props;\n  const state = useContext(Aria.MenuStateContext);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  const selectionManager = state?.selectionManager;\n  const keys = state ? getSelectableKeys(state) : [];\n  const selectedCount = keys.filter((key) =>\n    selectionManager?.isSelected(key),\n  ).length;\n  const isEverySelected = keys.length > 0 && selectedCount === keys.length;\n  const isIndeterminate = selectedCount > 0 && !isEverySelected;\n\n  selectAll.current = {\n    isEverySelected,\n    toggle: () => {\n      if (!selectionManager) {\n        return;\n      }\n      const keySet = new Set(keys);\n      const otherSelectedKeys = [...selectionManager.selectedKeys].filter(\n        (key) => !keySet.has(key),\n      );\n      selectionManager.setSelectedKeys(\n        isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys],\n      );\n    },\n  };\n\n  return (\n    <MenuItemContent\n      {...renderProps}\n      selectionMode=\"multiple\"\n      isSelected={isEverySelected}\n      isIndeterminate={isIndeterminate}\n    >\n      <Text>\n        {formatter.format(isEverySelected ? \"deselectAll\" : \"selectAll\")}\n      </Text>\n    </MenuItemContent>\n  );\n};\n\nconst SelectAllMenuItem: FC = () => {\n  const selectAll = useRef<SelectAll>(undefined);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  return (\n    <Aria.MenuItem\n      id={`${selectAllSectionId}--item`}\n      textValue={formatter.format(\"selectAll\")}\n      shouldCloseOnSelect={false}\n      onAction={() => selectAll.current?.toggle()}\n      className={menuItemStyles.menuItem}\n    >\n      {(renderProps) => (\n        <SelectAllMenuItemContent {...renderProps} selectAll={selectAll} />\n      )}\n    </Aria.MenuItem>\n  );\n};\n\n/**\n * The entry lives in a section without selection, so pressing it runs its\n * action only and sets the whole selection in one change.\n */\nexport const ContextMenuSelectAll: FC = () => (\n  <Aria.MenuSection\n    id={selectAllSectionId}\n    selectionMode=\"none\"\n    className={styles.selectAll}\n  >\n    <SelectAllMenuItem />\n  </Aria.MenuSection>\n);\n\nexport default ContextMenuSelectAll;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,qBAAqB;;;;;AAM3B,IAAM,qBAAqB,UAAqC;CAC9D,MAAM,OAAc,CAAC;CAErB,MAAM,WAAW,UAAmC;EAClD,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QACZ;OAAA,CAAC,MAAM,iBAAiB,WAAW,KAAK,GAAG,GAC7C,KAAK,KAAK,KAAK,GAAG;EAAA,OAEf,IACL,KAAK,SAAS,aACd,KAAK,QAAQ,sBACb,KAAK,OAAO,kBAAkB,KAAA,GAE9B,QAAQ,MAAM,WAAW,cAAc,KAAK,GAAG,KAAK,KAAK,UAAU;CAGzE;CAEA,QAAQ,MAAM,UAAU;CACxB,OAAO;AACT;;;;;AAWA,IAAM,4BAED,UAAU;CACb,MAAM,EAAE,WAAW,GAAG,gBAAgB;CACtC,MAAM,QAAQ,WAAW,KAAK,gBAAgB;CAC9C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,MAAM,mBAAmB,OAAO;CAChC,MAAM,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CACjD,MAAM,gBAAgB,KAAK,QAAQ,QACjC,kBAAkB,WAAW,GAAG,CAClC,CAAC,CAAC;CACF,MAAM,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,KAAK;CAClE,MAAM,kBAAkB,gBAAgB,KAAK,CAAC;CAE9C,UAAU,UAAU;EAClB;EACA,cAAc;GACZ,IAAI,CAAC,kBACH;GAEF,MAAM,SAAS,IAAI,IAAI,IAAI;GAC3B,MAAM,oBAAoB,CAAC,GAAG,iBAAiB,YAAY,CAAC,CAAC,QAC1D,QAAQ,CAAC,OAAO,IAAI,GAAG,CAC1B;GACA,iBAAiB,gBACf,kBAAkB,oBAAoB,CAAC,GAAG,mBAAmB,GAAG,IAAI,CACtE;EACF;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,GAAI;EACJ,eAAc;EACd,YAAY;EACK;EAEjB,UAAA,oBAAC,MAAD,EAAA,UACG,UAAU,OAAO,kBAAkB,gBAAgB,WAAW,EAC3D,CAAA;CACS,CAAA;AAErB;AAEA,IAAM,0BAA8B;CAClC,MAAM,YAAY,OAAkB,KAAA,CAAS;CAC7C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,OACE,oBAAC,KAAK,UAAN;EACE,IAAI,GAAG,mBAAmB;EAC1B,WAAW,UAAU,OAAO,WAAW;EACvC,qBAAqB;EACrB,gBAAgB,UAAU,SAAS,OAAO;EAC1C,WAAW,wBAAe;EAExB,WAAA,gBACA,oBAAC,0BAAD;GAA0B,GAAI;GAAwB;EAAY,CAAA;CAEvD,CAAA;AAEnB;;;;;AAMA,IAAa,6BACX,oBAAC,KAAK,aAAN;CACE,IAAI;CACJ,eAAc;CACd,WAAW,2BAAO;CAElB,UAAA,oBAAC,mBAAD,CAAoB,CAAA;AACJ,CAAA"}
+{"version":3,"file":"ContextMenuSelectAll.mjs","names":["locales","menuItemStyles","styles"],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { useContext, useRef, type FC } from \"react\";\nimport type { Key, Node } from \"@react-types/shared\";\nimport type { TreeState } from \"react-stately\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport menuItemStyles from \"@/components/MenuItem/MenuItem.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"../../ContextMenu.module.scss\";\n\nconst selectAllSectionId = \"flow--context-menu--select-all\";\n\n/**\n * Keys that share the menu's selection: enabled items at the top level and in\n * sections without a selection mode of their own.\n */\nconst getSelectableKeys = (state: TreeState<unknown>): Key[] => {\n  const keys: Key[] = [];\n\n  const collect = (nodes: Iterable<Node<unknown>>) => {\n    for (const node of nodes) {\n      if (node.type === \"item\") {\n        if (!state.selectionManager.isDisabled(node.key)) {\n          keys.push(node.key);\n        }\n      } else if (\n        node.type === \"section\" &&\n        node.key !== selectAllSectionId &&\n        node.props?.selectionMode === undefined\n      ) {\n        collect(state.collection.getChildren?.(node.key) ?? node.childNodes);\n      }\n    }\n  };\n\n  collect(state.collection);\n  return keys;\n};\n\ninterface SelectAll {\n  isEverySelected: boolean;\n  toggle: () => void;\n}\n\n/**\n * Rendered by the visible menu item. The collection renders the item's element\n * a second time outside the menu, where `MenuStateContext` is missing.\n */\nconst SelectAllMenuItemContent: FC<\n  Aria.MenuItemRenderProps & { selectAll: { current?: SelectAll } }\n> = (props) => {\n  const { selectAll, ...renderProps } = props;\n  const state = useContext(Aria.MenuStateContext);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  const selectionManager = state?.selectionManager;\n  const keys = state ? getSelectableKeys(state) : [];\n  const selectedCount = keys.filter((key) =>\n    selectionManager?.isSelected(key),\n  ).length;\n  const isEverySelected = keys.length > 0 && selectedCount === keys.length;\n  const isIndeterminate = selectedCount > 0 && !isEverySelected;\n\n  selectAll.current = {\n    isEverySelected,\n    toggle: () => {\n      if (!selectionManager) {\n        return;\n      }\n      const keySet = new Set(keys);\n      const otherSelectedKeys = [...selectionManager.selectedKeys].filter(\n        (key) => !keySet.has(key),\n      );\n      selectionManager.setSelectedKeys(\n        isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys],\n      );\n    },\n  };\n\n  return (\n    <MenuItemContent\n      {...renderProps}\n      selectionMode=\"multiple\"\n      isSelected={isEverySelected}\n      isIndeterminate={isIndeterminate}\n    >\n      <Text>\n        {formatter.format(isEverySelected ? \"deselectAll\" : \"selectAll\")}\n      </Text>\n    </MenuItemContent>\n  );\n};\n\nconst SelectAllMenuItem: FC = () => {\n  const selectAll = useRef<SelectAll>(undefined);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  return (\n    <Aria.MenuItem\n      id={`${selectAllSectionId}--item`}\n      textValue={formatter.format(\"selectAll\")}\n      shouldCloseOnSelect={false}\n      onAction={() => selectAll.current?.toggle()}\n      className={menuItemStyles.menuItem}\n    >\n      {(renderProps) => (\n        <SelectAllMenuItemContent {...renderProps} selectAll={selectAll} />\n      )}\n    </Aria.MenuItem>\n  );\n};\n\n/**\n * The entry lives in a section without selection, so pressing it runs its\n * action only and sets the whole selection in one change.\n */\nexport const ContextMenuSelectAll: FC = () => (\n  <Aria.MenuSection\n    id={selectAllSectionId}\n    selectionMode=\"none\"\n    className={styles.selectAll}\n  >\n    <SelectAllMenuItem />\n  </Aria.MenuSection>\n);\n\nexport default ContextMenuSelectAll;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,qBAAqB;;;;;AAM3B,IAAM,qBAAqB,UAAqC;CAC9D,MAAM,OAAc,CAAC;CAErB,MAAM,WAAW,UAAmC;EAClD,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QACZ;OAAA,CAAC,MAAM,iBAAiB,WAAW,KAAK,GAAG,GAC7C,KAAK,KAAK,KAAK,GAAG;EAAA,OAEf,IACL,KAAK,SAAS,aACd,KAAK,QAAQ,sBACb,KAAK,OAAO,kBAAkB,KAAA,GAE9B,QAAQ,MAAM,WAAW,cAAc,KAAK,GAAG,KAAK,KAAK,UAAU;CAGzE;CAEA,QAAQ,MAAM,UAAU;CACxB,OAAO;AACT;;;;;AAWA,IAAM,4BAED,UAAU;CACb,MAAM,EAAE,WAAW,GAAG,gBAAgB;CACtC,MAAM,QAAQ,WAAW,KAAK,gBAAgB;CAC9C,MAAM,YAAY,4BAA4BA,kBAAS,aAAa;CAEpE,MAAM,mBAAmB,OAAO;CAChC,MAAM,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CACjD,MAAM,gBAAgB,KAAK,QAAQ,QACjC,kBAAkB,WAAW,GAAG,CAClC,CAAC,CAAC;CACF,MAAM,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,KAAK;CAClE,MAAM,kBAAkB,gBAAgB,KAAK,CAAC;CAE9C,UAAU,UAAU;EAClB;EACA,cAAc;GACZ,IAAI,CAAC,kBACH;GAEF,MAAM,SAAS,IAAI,IAAI,IAAI;GAC3B,MAAM,oBAAoB,CAAC,GAAG,iBAAiB,YAAY,CAAC,CAAC,QAC1D,QAAQ,CAAC,OAAO,IAAI,GAAG,CAC1B;GACA,iBAAiB,gBACf,kBAAkB,oBAAoB,CAAC,GAAG,mBAAmB,GAAG,IAAI,CACtE;EACF;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,GAAI;EACJ,eAAc;EACd,YAAY;EACK;EAEjB,UAAA,oBAAC,MAAD,EAAA,UACG,UAAU,OAAO,kBAAkB,gBAAgB,WAAW,EAC3D,CAAA;CACS,CAAA;AAErB;AAEA,IAAM,0BAA8B;CAClC,MAAM,YAAY,OAAkB,KAAA,CAAS;CAC7C,MAAM,YAAY,4BAA4BA,kBAAS,aAAa;CAEpE,OACE,oBAAC,KAAK,UAAN;EACE,IAAI,GAAG,mBAAmB;EAC1B,WAAW,UAAU,OAAO,WAAW;EACvC,qBAAqB;EACrB,gBAAgB,UAAU,SAAS,OAAO;EAC1C,WAAWC,wBAAe;EAExB,WAAA,gBACA,oBAAC,0BAAD;GAA0B,GAAI;GAAwB;EAAY,CAAA;CAEvD,CAAA;AAEnB;;;;;AAMA,IAAa,6BACX,oBAAC,KAAK,aAAN;CACE,IAAI;CACJ,eAAc;CACd,WAAWC,2BAAO;CAElB,UAAA,oBAAC,mBAAD,CAAoB,CAAA;AACJ,CAAA"}