@mittwald/flow-react-components 1.2.0-next.9 → 2.0.0-next.0

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n  }\n\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n    margin-inline-start: calc(\n      (var(--badge-size) - var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import ButtonView from "../../../../views/ButtonView.mjs";
+import ContextualHelpTriggerView from "../../../../views/ContextualHelpTriggerView.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.tsx
+/**
+* Supplies the trigger button for a contextual help placed in a badge, so the
+* consumer only writes the <ContextualHelp>. Icon and accessibility label come
+* from the trigger.
+*/
+var ContextualHelpButton = (props) => {
+	const { className, color, isDisabled, children } = props;
+	return /* @__PURE__ */ jsxs(ContextualHelpTriggerView, { children: [/* @__PURE__ */ jsx(ButtonView, {
+		className,
+		color,
+		variant: "plain",
+		size: "s",
+		isDisabled
+	}), children] });
+};
+//#endregion
+export { ContextualHelpButton, ContextualHelpButton as default };
+
+//# sourceMappingURL=ContextualHelpButton.mjs.map

package/dist/js/packages/components/src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextualHelpButton.mjs","names":[],"sources":["../../../../../../../../../src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextualHelpTriggerView from \"@/views/ContextualHelpTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {\n  color: AlphaColor;\n  isDisabled?: boolean;\n}\n\n/**\n * Supplies the trigger button for a contextual help placed in a badge, so the\n * consumer only writes the <ContextualHelp>. Icon and accessibility label come\n * from the trigger.\n */\nexport const ContextualHelpButton: FC<Props> = (props) => {\n  const { className, color, isDisabled, children } = props;\n\n  return (\n    <ContextualHelpTriggerView>\n      <ButtonView\n        className={className}\n        color={color}\n        variant=\"plain\"\n        size=\"s\"\n        isDisabled={isDisabled}\n      />\n      {children}\n    </ContextualHelpTriggerView>\n  );\n};\n\nexport default ContextualHelpButton;\n"],"mappings":";;;;;;;;;;;AAeA,IAAa,wBAAmC,UAAU;CACxD,MAAM,EAAE,WAAW,OAAO,YAAY,aAAa;CAEnD,OACE,qBAAC,2BAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EACa;EACJ;EACP,SAAQ;EACR,MAAK;EACO;CACb,CAAA,GACA,QACwB,EAAA,CAAA;AAE/B"}

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

@@ -3,12 +3,11 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import Button_module_default from "./Button.module.mjs";
-import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { containsTextChild } from "../../lib/react/remote.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
 import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
-import { Text } from "../Text/Text.mjs";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.mjs";
 import { useAriaAnnounceActionState } from "../Action/lib/ariaLive.mjs";
 import clsx from "clsx";
@@ -44,6 +43,11 @@ var Button = flowComponent("Button", (props) => {
 	const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
 	if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
 	const color = colorFromProps === "accent" ? "success" : colorFromProps;
+	/**
+	* A string child renders no element the CSS could match, so the button itself
+	* carries the marker. An explicit `Text` child is matched by `:has(.text)`.
+	*/
+	const hasText = containsTextChild(children);
 	const rootClassName = unstyled ? className : clsx(
 		Button_module_default.button,
 		isPending && Button_module_default.isPending,
@@ -57,6 +61,7 @@ var Button = flowComponent("Button", (props) => {
 		* by now, so this Button will be visually disabled via CSS.
 		*/
 		ariaDisabled && Button_module_default.ariaDisabled,
+		hasText && Button_module_default.hasText,
 		className
 	);
 	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
@@ -83,20 +88,13 @@ var Button = flowComponent("Button", (props) => {
 		size,
 		className: Button_module_default.stateIcon
 	}) : void 0;
-	const isStringContent = extractTextFromFirstChild(children) !== void 0;
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: !unstyled,
 			children: /* @__PURE__ */ jsx("span", {
 				className: Button_module_default.content,
-				children: /* @__PURE__ */ jsx(Wrap, {
-					if: isStringContent,
-					children: /* @__PURE__ */ jsx(Text, {
-						className: Button_module_default.text,
-						children
-					})
-				})
+				children
 			})
 		})
 	}), stateIcon] });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n  const content = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsDA,IAAM,uBAAuB,UAAuB;CAClD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,oBACN,MAAM,YACN;EACA,QAAQ,EAAE,GAAG,MAAM;EAEnB,MAAM,sBAAsB,MAAe;GACzC,IAAI,KAAK,OAAO,MAAM,UAAU;IAM9B,IACE,EAJA,yBAAyB,KACzB,OAAO,EAAE,wBAAwB,eAIjC,qBAAqB,KACrB,OAAO,EAAE,oBAAoB,YAE7B,EAAE,gBAAgB;IAEpB,IAAI,oBAAoB,KAAK,OAAO,EAAE,mBAAmB,YACvD,EAAE,eAAe;GAErB;GAEA,OAAO;EACT;EAEA,MAAM,UAAU;EAChB,MAAM,UAAU;EAChB,MAAM,eAAe;EACrB,MAAM,aAAa;EACnB,MAAM,gBAAgB;EACtB,MAAM,YAAY;EAClB,MAAM,YAAY;EAClB,MAAM,UAAU;CAClB;CAEA,OAAO;AACT;;AAGA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EACJ,OAAO,iBAAiB,WACxB,UAAU,SACV,UACA,WACA,OAAO,KACP,WACA,aACA,UACA,iBAAiB,cACjB,KACA,MAAM,iBACN,UAAU,MACV,UACA,YACA,aACA,GAAG,cACD;CAEJ,IAAI,mBAAmB,UACrB,gBACE,kGACF;CAGF,MAAM,QAAQ,mBAAmB,WAAW,YAAY;CAExD,MAAM,gBAAgB,WAClB,YACA;EACE,sBAAO;EACP,aAAa,sBAAO;EACpB,eAAe,sBAAO;EACtB,YAAY,sBAAO;EACnB,SAAS,OAAO,sBAAO;EACvB,sBAAO;EACP,sBAAO;;;;;EAKP,gBAAgB,sBAAO;EACvB;CACF;CAEJ,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,sBAAO;GAClB,eAAe;GACf;EACF;EACA,MAAM,EACJ,WAAW,sBAAO,KACpB;EACA,QAAQ,EACN,WAAW,sBAAO,OACpB;EACA,cAAc,EACZ,WAAW,sBAAO,aACpB;EACA,OAAO,EACL,WAAW,sBAAO,MACpB;CACF;CAEA,MAAM,YAAY,cAChB,oBAAC,eAAD;EAAqB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAW,CAAA,IACvE,WACF,oBAAC,YAAD;EAAkB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAU,CAAA,IACnE,YACF,oBAAC,gBAAD;EAAsB;EAAM,WAAW,sBAAO;CAAY,CAAA,IACxD,KAAA;CAEJ,MAAM,kBAAkB,0BAA0B,QAAQ,MAAM,KAAA;CAEhE,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI,CAAC;GACT,UAAA,oBAAC,QAAD;IAAM,WAAW,sBAAO;IACtB,UAAA,oBAAC,MAAD;KAAM,IAAI;KACR,UAAA,oBAAC,MAAD;MAAM,WAAW,sBAAO;MAAO;KAAe,CAAA;IAC1C,CAAA;GACF,CAAA;EACF,CAAA;CACc,CAAA,GACrB,SACD,EAAA,CAAA;CAGJ,IAAI,gBAAgB,QAAQ;EAC1B,MAAM,YAAY,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAE5D,OACE,oBAAC,QAAD;GACE,GAAI;GACJ,iBAAe,UAAU,cAAc,KAAA;GACvC,WACE,OAAO,kBAAkB,WAAW,gBAAgB,KAAA;GAGrD,UAAA;EACG,CAAA;CAEV;CAEA,OACE,oBAAC,KAAK,QAAN;EACE,WAAW;EACN;EACC;EACN,GAAK,eAAe,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;EACxD,GAAI;EAEH,UAAA;CACU,CAAA;AAEjB,CAAC"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  /**\n   * A string child renders no element the CSS could match, so the button itself\n   * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n   */\n  const hasText = containsTextChild(children);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n        hasText && styles.hasText,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const content = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>{children}</span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,IAAM,uBAAuB,UAAuB;CAClD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,oBACN,MAAM,YACN;EACA,QAAQ,EAAE,GAAG,MAAM;EAEnB,MAAM,sBAAsB,MAAe;GACzC,IAAI,KAAK,OAAO,MAAM,UAAU;IAM9B,IACE,EAJA,yBAAyB,KACzB,OAAO,EAAE,wBAAwB,eAIjC,qBAAqB,KACrB,OAAO,EAAE,oBAAoB,YAE7B,EAAE,gBAAgB;IAEpB,IAAI,oBAAoB,KAAK,OAAO,EAAE,mBAAmB,YACvD,EAAE,eAAe;GAErB;GAEA,OAAO;EACT;EAEA,MAAM,UAAU;EAChB,MAAM,UAAU;EAChB,MAAM,eAAe;EACrB,MAAM,aAAa;EACnB,MAAM,gBAAgB;EACtB,MAAM,YAAY;EAClB,MAAM,YAAY;EAClB,MAAM,UAAU;CAClB;CAEA,OAAO;AACT;;AAGA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EACJ,OAAO,iBAAiB,WACxB,UAAU,SACV,UACA,WACA,OAAO,KACP,WACA,aACA,UACA,iBAAiB,cACjB,KACA,MAAM,iBACN,UAAU,MACV,UACA,YACA,aACA,GAAG,cACD;CAEJ,IAAI,mBAAmB,UACrB,gBACE,kGACF;CAGF,MAAM,QAAQ,mBAAmB,WAAW,YAAY;;;;;CAMxD,MAAM,UAAU,kBAAkB,QAAQ;CAE1C,MAAM,gBAAgB,WAClB,YACA;EACE,sBAAO;EACP,aAAa,sBAAO;EACpB,eAAe,sBAAO;EACtB,YAAY,sBAAO;EACnB,SAAS,OAAO,sBAAO;EACvB,sBAAO;EACP,sBAAO;;;;;EAKP,gBAAgB,sBAAO;EACvB,WAAW,sBAAO;EAClB;CACF;CAEJ,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,sBAAO;GAClB,eAAe;GACf;EACF;EACA,MAAM,EACJ,WAAW,sBAAO,KACpB;EACA,QAAQ,EACN,WAAW,sBAAO,OACpB;EACA,cAAc,EACZ,WAAW,sBAAO,aACpB;EACA,OAAO,EACL,WAAW,sBAAO,MACpB;CACF;CAEA,MAAM,YAAY,cAChB,oBAAC,eAAD;EAAqB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAW,CAAA,IACvE,WACF,oBAAC,YAAD;EAAkB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAU,CAAA,IACnE,YACF,oBAAC,gBAAD;EAAsB;EAAM,WAAW,sBAAO;CAAY,CAAA,IACxD,KAAA;CAEJ,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI,CAAC;GACT,UAAA,oBAAC,QAAD;IAAM,WAAW,sBAAO;IAAU;GAAe,CAAA;EAC7C,CAAA;CACc,CAAA,GACrB,SACD,EAAA,CAAA;CAGJ,IAAI,gBAAgB,QAAQ;EAC1B,MAAM,YAAY,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAE5D,OACE,oBAAC,QAAD;GACE,GAAI;GACJ,iBAAe,UAAU,cAAc,KAAA;GACvC,WACE,OAAO,kBAAkB,WAAW,gBAAgB,KAAA;GAGrD,UAAA;EACG,CAAA;CAEV;CAEA,OACE,oBAAC,KAAK,QAAN;EACE,WAAW;EACN;EACC;EACN,GAAK,eAAe,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;EACxD,GAAI;EAEH,UAAA;CACU,CAAA;AAEjB,CAAC"}

package/dist/js/packages/components/src/components/Button/Button.module.mjs

@@ -7,11 +7,11 @@ var content = "flow--button--content";
 var stateIcon = "flow--button--state-icon";
 var icon = "flow--button--icon";
 var text = "flow--button--text";
+var hasText = "flow--button--has-text";
 var counterBadge = "flow--button--counter-badge";
 var isPending = "flow--button--is-pending";
 var isFailed = "flow--button--is-failed";
 var isSucceeded = "flow--button--is-succeeded";
-var plain = "flow--button--plain";
 var primary = "flow--button--primary";
 var solid = "flow--button--solid";
 var ariaDisabled = "flow--button--aria-disabled";
@@ -20,6 +20,7 @@ var danger = "flow--button--danger";
 var secondary = "flow--button--secondary";
 var dark = "flow--button--dark";
 var light = "flow--button--light";
+var plain = "flow--button--plain";
 var soft = "flow--button--soft";
 var avatar = "flow--button--avatar";
 var image = "flow--button--image";
@@ -30,11 +31,11 @@ var Button_module_default = {
 	stateIcon,
 	icon,
 	text,
+	hasText,
 	counterBadge,
 	isPending,
 	isFailed,
 	isSucceeded,
-	plain,
 	"size-s": "flow--button--size-s",
 	primary,
 	solid,
@@ -46,11 +47,12 @@ var Button_module_default = {
 	light,
 	"dark-static": "flow--button--dark-static",
 	"light-static": "flow--button--light-static",
+	plain,
 	soft,
 	avatar,
 	image
 };
 //#endregion
-export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
+export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
 
 //# sourceMappingURL=Button.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color;\n  transition-duration: var(--transition--duration--default);\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text))) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  &:where(:has(.text) .icon) {\n    margin-inline-start: var(--button--spacing);\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n\n    &.plain {\n      .content:has(.text) {\n        opacity: 1;\n      }\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text))) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color;\n  transition-duration: var(--transition--duration--default);\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n    text-align: start;\n    text-wrap-style: pretty;\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text), .hasText)) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text), .hasText)) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../_virtual/_5.locale.mjs";
+import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar.mjs";
 import { Label } from "../../../Label/Label.mjs";
-import __locale_default from "../../../../../../../_virtual/_8.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_9.locale.mjs";
 import ChartTooltip_module_default from "./ChartTooltip.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs

@@ -5,7 +5,16 @@ import { TypedXAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
 //#region src/components/CartesianChart/components/XAxis/XAxis.tsx
-/** @flr-generate all */
+/**
+* `tickFormatter` is deliberately not part of the remote surface. A function
+* property crosses the boundary as a thread proxy whose call returns a Promise,
+* and recharts concatenates the formatter's result straight into the tick label
+* — so remotely every tick rendered `[object Promise]`. Dropping it from the
+* remote surface leaves the raw value there; the prop keeps working locally.
+*
+* @flr-generate all
+* @flr-ignore-props tickFormatter
+*/
 var XAxis = (props) => {
 	const { type = "auto", ...rest } = props;
 	const tokens = useDesignTokens();

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"XAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type XAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataKeyValue = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.XAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"allowDataOverflow\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataKeyValue, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n  const { type = \"auto\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.XAxis\n      {...rest}\n      type={type}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedXAxis } from \"./types\";\n\nexport default XAxis;\n"],"mappings":";;;;;;;;AAgCA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,OAAO,QAAQ,GAAG,SAAS;CAEnC,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACE;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"XAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type XAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataKeyValue = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.XAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"allowDataOverflow\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataKeyValue, index: number) => string;\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const XAxis: FC<XAxisProps> = (props) => {\n  const { type = \"auto\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.XAxis\n      {...rest}\n      type={type}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedXAxis } from \"./types\";\n\nexport default XAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,OAAO,QAAQ,GAAG,SAAS;CAEnC,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACE;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -5,7 +5,16 @@ import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
 //#region src/components/CartesianChart/components/YAxis/YAxis.tsx
-/** @flr-generate all */
+/**
+* `tickFormatter` is deliberately not part of the remote surface. A function
+* property crosses the boundary as a thread proxy whose call returns a Promise,
+* and recharts concatenates the formatter's result straight into the tick label
+* — so remotely every tick rendered `[object Promise]`. Dropping it from the
+* remote surface leaves the raw value there; the prop keeps working locally.
+*
+* @flr-generate all
+* @flr-ignore-props tickFormatter
+*/
 var YAxis = (props) => {
 	const { domain, type = "auto", ...rest } = props;
 	const tokens = useDesignTokens();

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;AA+BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,GAAG,SAAS;CAE3C,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,GAAG,SAAS;CAE3C,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}

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

@@ -0,0 +1,101 @@
+"use client"
+/* */
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
+import { OverlayContextProvider } from "../../lib/controller/overlay/OverlayContextProvider.mjs";
+import { Popover } from "../Popover/Popover.mjs";
+import CoachMark_module_default from "./CoachMark.module.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/CoachMark/CoachMark.tsx
+/**
+* Resolves whichever anchor was given into something `Popover` can position
+* against.
+*
+* An id is looked up after the commit, and kept looking for until it resolves.
+* A single lookup would only work for an anchor that is already mounted, which
+* is the case this prop does not exist for: remotely the host materializes the
+* page in pieces, so the anchor regularly arrives after the coach mark. Without
+* the observer the hint stays parked and invisible, and nothing says why.
+*/
+var useAnchorRef = (anchorRef, anchor) => {
+	const [anchorElement, setAnchorElement] = useState(null);
+	useEffect(() => {
+		if (!anchor) {
+			setAnchorElement(null);
+			return;
+		}
+		const element = document.getElementById(anchor);
+		setAnchorElement(element);
+		if (element) return;
+		const observer = new MutationObserver(() => {
+			const late = document.getElementById(anchor);
+			if (late) {
+				setAnchorElement(late);
+				observer.disconnect();
+			}
+		});
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [anchor]);
+	return useMemo(() => anchorRef ?? { current: anchorElement }, [anchorRef, anchorElement]);
+};
+/**
+* Points at a control the user did not ask about — a feature that is new, moved
+* or easy to miss. It opens on its own, so it stays out of the way: the page
+* below keeps scrolling, focus is left alone, and the coach mark rides along
+* with its anchor instead of closing at the first scroll.
+*
+* Nothing announces it. It renders where it is written, so put it directly
+* behind the element it points at — then it follows that element in the reading
+* order, and its anchor refers to it through `aria-details`.
+*
+* @flr-generate all
+* @flr-ignore-props anchorRef
+* @flowStatus beta, new
+*/
+var CoachMark = flowComponent("CoachMark", (props) => {
+	const { children, controller: controllerFromProps, anchorRef, anchor, isDefaultOpen = false, ref: ignoredRef, ...rest } = props;
+	const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);
+	const controllerFromContext = useOverlayController("CoachMark", {
+		reuseControllerFromContext: true,
+		isDefaultOpen
+	});
+	const controller = controllerFromProps ?? controllerFromContext;
+	const propsContext = {
+		Heading: {
+			level: 5,
+			elementType: "span"
+		},
+		Button: {
+			size: "s",
+			className: CoachMark_module_default.dismiss
+		}
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		withTip: true,
+		...rest,
+		modality: "non-modal",
+		controller,
+		triggerRef: resolvedAnchorRef,
+		children: /* @__PURE__ */ jsx(OverlayContextProvider, {
+			type: "CoachMark",
+			controller,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children: /* @__PURE__ */ jsx("div", {
+					className: CoachMark_module_default.coachMark,
+					children
+				})
+			})
+		})
+	});
+});
+//#endregion
+export { CoachMark, CoachMark as default };
+
+//# sourceMappingURL=CoachMark.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CoachMark.mjs","names":[],"sources":["../../../../../../../src/components/CoachMark/CoachMark.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./CoachMark.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\n\nexport interface CoachMarkProps extends Omit<\n  PopoverProps,\n  // The popover's own shape, which a coach mark decides for itself.\n  | \"withTip\"\n  | \"modality\"\n  // react-aria's own non-modal switch, which would compete with the shape this\n  // component already decided on.\n  | \"isNonModal\"\n  | \"isDialogContent\"\n  | \"triggerRef\"\n  // Positioning and dismissal it does not hand out: it is never dismissed by an\n  // interaction outside it, it owns its Escape handling, and it renders where it\n  // stands instead of in a portal.\n  | \"getTargetRect\"\n  | \"shouldCloseOnInteractOutside\"\n  // Overridden in CSS to escape react-aria's viewport clamp, so a value here\n  // would be silently ignored.\n  | \"maxHeight\"\n  | \"isKeyboardDismissDisabled\"\n  | \"UNSTABLE_portalContainer\"\n  // Popover keeps this one working for the consumers it already has; a coach\n  // mark has none yet, so it ships only the current name.\n  | \"defaultOpen\"\n> {\n  /**\n   * The element the coach mark points at. It is an anchor, not a trigger —\n   * nothing about it opens the coach mark. Give it either this or `anchor`.\n   */\n  anchorRef?: RefObject<Element | null>;\n  /**\n   * The `id` of the element the coach mark points at, looked up once the\n   * element exists. Use it where a ref cannot be shared — an mStudio extension\n   * renders in a different context than the host, so a ref never arrives, while\n   * an id does.\n   */\n  anchor?: string;\n}\n\n/**\n * Resolves whichever anchor was given into something `Popover` can position\n * against.\n *\n * An id is looked up after the commit, and kept looking for until it resolves.\n * A single lookup would only work for an anchor that is already mounted, which\n * is the case this prop does not exist for: remotely the host materializes the\n * page in pieces, so the anchor regularly arrives after the coach mark. Without\n * the observer the hint stays parked and invisible, and nothing says why.\n */\nconst useAnchorRef = (\n  anchorRef: RefObject<Element | null> | undefined,\n  anchor: string | undefined,\n): RefObject<Element | null> => {\n  const [anchorElement, setAnchorElement] = useState<Element | null>(null);\n\n  useEffect(() => {\n    if (!anchor) {\n      setAnchorElement(null);\n      return;\n    }\n\n    const element = document.getElementById(anchor);\n    setAnchorElement(element);\n\n    if (element) {\n      return;\n    }\n\n    const observer = new MutationObserver(() => {\n      const late = document.getElementById(anchor);\n\n      if (late) {\n        setAnchorElement(late);\n        observer.disconnect();\n      }\n    });\n\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, [anchor]);\n\n  return useMemo(\n    () => anchorRef ?? { current: anchorElement },\n    [anchorRef, anchorElement],\n  );\n};\n\n/**\n * Points at a control the user did not ask about — a feature that is new, moved\n * or easy to miss. It opens on its own, so it stays out of the way: the page\n * below keeps scrolling, focus is left alone, and the coach mark rides along\n * with its anchor instead of closing at the first scroll.\n *\n * Nothing announces it. It renders where it is written, so put it directly\n * behind the element it points at — then it follows that element in the reading\n * order, and its anchor refers to it through `aria-details`.\n *\n * @flr-generate all\n * @flr-ignore-props anchorRef\n * @flowStatus beta, new\n */\nexport const CoachMark = flowComponent(\"CoachMark\", (props) => {\n  const {\n    children,\n    controller: controllerFromProps,\n    anchorRef,\n    anchor,\n    isDefaultOpen = false,\n    ref: ignoredRef,\n    ...rest\n  } = props;\n\n  const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);\n\n  const controllerFromContext = useOverlayController(\"CoachMark\", {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const propsContext: PropsContext = {\n    // A coach mark holds one short thought. Its heading is a bold label, not a\n    // level in the page's outline — the same call ContextualHelp makes.\n    Heading: {\n      level: 5,\n      elementType: \"span\",\n    },\n    // The dismiss action is composed, not configured. Flow never closes an\n    // overlay on a consumer's behalf — `Modal` only augments a `closeOverlay`\n    // that is already there — so this sets the shape and leaves the behaviour\n    // to whatever `Action` the consumer wraps the button in.\n    Button: {\n      size: \"s\",\n      className: styles.dismiss,\n    },\n  };\n\n  return (\n    <Popover\n      withTip\n      {...rest}\n      modality=\"non-modal\"\n      controller={controller}\n      triggerRef={resolvedAnchorRef}\n    >\n      <OverlayContextProvider type=\"CoachMark\" controller={controller}>\n        <PropsContextProvider props={propsContext}>\n          <div className={styles.coachMark}>{children}</div>\n        </PropsContextProvider>\n      </OverlayContextProvider>\n    </Popover>\n  );\n});\n\nexport default CoachMark;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,gBACJ,WACA,WAC8B;CAC9B,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAEvE,gBAAgB;EACd,IAAI,CAAC,QAAQ;GACX,iBAAiB,IAAI;GACrB;EACF;EAEA,MAAM,UAAU,SAAS,eAAe,MAAM;EAC9C,iBAAiB,OAAO;EAExB,IAAI,SACF;EAGF,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,SAAS,eAAe,MAAM;GAE3C,IAAI,MAAM;IACR,iBAAiB,IAAI;IACrB,SAAS,WAAW;GACtB;EACF,CAAC;EAED,SAAS,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAElE,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cACC,aAAa,EAAE,SAAS,cAAc,GAC5C,CAAC,WAAW,aAAa,CAC3B;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,YAAY,qBACZ,WACA,QACA,gBAAgB,OAChB,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa,WAAW,MAAM;CAExD,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B;EAGjC,SAAS;GACP,OAAO;GACP,aAAa;EACf;EAKA,QAAQ;GACN,MAAM;GACN,WAAW,yBAAO;EACpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,SAAA;EACA,GAAI;EACJ,UAAS;EACG;EACZ,YAAY;EAEZ,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAwB;GACnD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KAAK,WAAW,yBAAO;KAAY;IAAc,CAAA;GAC7B,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/CoachMark/CoachMark.module.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/CoachMark/CoachMark.module.scss
+var coachMark = "flow--coach-mark";
+var dismiss = "flow--coach-mark--dismiss";
+var CoachMark_module_default = {
+	coachMark,
+	dismiss
+};
+//#endregion
+export { coachMark, CoachMark_module_default as default, dismiss };
+
+//# sourceMappingURL=CoachMark.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CoachMark.module.mjs","names":[],"sources":["../../../../../../../src/components/CoachMark/CoachMark.module.scss"],"sourcesContent":[".coachMark {\n  row-gap: var(--popover--spacing);\n  display: flex;\n  flex-direction: column;\n  max-width: var(--coach-mark--max-width);\n  padding: var(--popover--padding--m);\n}\n\n.dismiss {\n  align-self: flex-start;\n}\n"],"mappings":""}

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

@@ -4,7 +4,7 @@ import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalized
 import { Button } from "../Button/Button.mjs";
 import CodeBlock_module_default from "./CodeBlock.module.mjs";
 import { CodeEditor } from "../CodeEditor/CodeEditor.mjs";
-import __locale_default from "../../../../../_virtual/_10.locale.mjs";
+import __locale_default from "../../../../../_virtual/_11.locale.mjs";
 import clsx from "clsx";
 import { useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -21,7 +21,7 @@ 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 { 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 labelId = useId();

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,KAAK;CAErC,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":[],"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"}

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

@@ -7,10 +7,11 @@ import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalized
 import { Button } from "../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
+import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
 import { Options } from "../Options/Options.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import ComboBox_module_default from "./ComboBox.module.mjs";
-import __locale_default from "../../../../../_virtual/_11.locale.mjs";
+import __locale_default from "../../../../../_virtual/_12.locale.mjs";
 import clsx from "clsx";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,10 +24,7 @@ var ComboBox = flowComponent("ComboBox", (props) => {
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
 	const rootClassName = clsx(fieldProps.className, ComboBox_module_default.comboBox, className);
 	const propsContext = {
-		Option: { tunnel: {
-			id: "options",
-			component: "ComboBox"
-		} },
+		Option: { tunnel: getOptionsTunnelProps("ComboBox") },
 		...fieldPropsContext
 	};
 	const handleSelectionChange = (key) => {

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 { 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: {\n        id: \"options\",\n        component: \"ComboBox\",\n      },\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":";;;;;;;;;;;;;;;;;;;AA+BA,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;GACN,IAAI;GACJ,WAAW;EACb,EACF;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":[],"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"}