@mittwald/flow-react-components 1.6.0-next.57 → 1.6.0-next.58

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

@@ -25,7 +25,7 @@ function isFlowColor(something) {
 * @flowStatus beta
 */
 var AccentBox = flowComponent("AccentBox", (props) => {
-	const { color: colorFromProps, backgroundColor = "neutral", backgroundImage, children, elementType = "div", className, style: styleFromProps, aspectRatio } = props;
+	const { color: colorFromProps, backgroundColor = "neutral", backgroundImage, children, elementType = "div", className, style: styleFromProps, aspectRatio, ref } = props;
 	const color = colorFromProps ?? (colorFromProps === "gradient" || backgroundColor === "gradient" ? "dark" : "default");
 	const isAFlowColor = isFlowColor(backgroundColor);
 	const backgroundColorFromColor = colorFromProps === "neutral" || colorFromProps === "gradient" || colorFromProps === "green" ? colorFromProps : void 0;
@@ -45,6 +45,7 @@ var AccentBox = flowComponent("AccentBox", (props) => {
 		Icon: { className: AccentBox_module_default.icon }
 	};
 	return /* @__PURE__ */ jsx(Element, {
+		ref,
 		className: rootClassName,
 		style,
 		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"AccentBox.mjs","names":["anyAccentBoxBackgroundColors","styles"],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <SectionHeadingReset>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </SectionHeadingReset>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;;AAeA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrBA,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,gBACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpBC,yBAAO,WACP,2BACIA,yBAAO,4BACP,eACEA,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAWA,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAsB;EACxC,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACH,CAAA;CACd,CAAA;AAEb,CAAC"}
+{"version":3,"file":"AccentBox.mjs","names":["anyAccentBoxBackgroundColors","styles"],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n    ref,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element ref={ref as never} className={rootClassName} style={style}>\n      <SectionHeadingReset>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </SectionHeadingReset>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;;AAeA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrBA,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,aACA,QACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpBC,yBAAO,WACP,2BACIA,yBAAO,4BACP,eACEA,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAWA,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAc;EAAc,WAAW;EAAsB;EAC3D,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACH,CAAA;CACd,CAAA;AAEb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["styles"],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { useDisclosure } from \"react-aria\";\nimport { useDisclosureState } from \"react-stately\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  AccordionGroupContext,\n  useAccordionGroupContext,\n} from \"@/components/AccordionGroup/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /**\n   * The key of the accordion inside an `AccordionGroup`, used by its\n   * `expandedKeys`. Also set as the DOM id.\n   */\n  id?: string;\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /**\n   * The visual variant of the accordion. Has no effect.\n   *\n   * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.\n   */\n  variant?: \"default\" | \"outline\";\n}\n\n/*\n * The header button is rendered by the `Heading`, `Text` or `Label` the\n * consumer wrote, through a memoized props context. It reads the disclosure\n * state from a React context instead, so it always gets the current one.\n */\ntype TriggerProps = Pick<\n  ButtonProps,\n  \"id\" | \"aria-expanded\" | \"aria-controls\" | \"onPress\" | \"onPressStart\"\n>;\n\nconst TriggerContext = createContext<TriggerProps | null>(null);\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  /** Text and label headers are smaller than headings, so is their chevron. */\n  isCompact?: boolean;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, isCompact } = props;\n  const buttonProps = useContext(TriggerContext);\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      className={styles.headerButton}\n      {...buttonProps}\n    >\n      <span className={styles.headerContent}>{children}</span>\n      <IconChevronDown\n        className={styles.chevron}\n        size={isCompact ? \"s\" : \"m\"}\n      />\n    </Button>\n  );\n};\n\n/* Text and label headers render the same compact toggle. */\nconst compactHeader = {\n  className: clsx(styles.header, styles.textHeader),\n  children: dynamic((props: PropsWithChildren) => (\n    <HeaderButton isCompact>{props.children}</HeaderButton>\n  )),\n};\n\nconst propsContext: PropsContext = {\n  Content: {\n    className: styles.contentInner,\n    tunnel: {\n      id: \"content\",\n      component: \"Accordion\",\n    },\n  },\n  Heading: {\n    className: styles.header,\n    level: 3,\n    children: dynamic((props) => <HeaderButton>{props.children}</HeaderButton>),\n    Button: { size: \"m\" },\n  },\n  Text: {\n    ...compactHeader,\n    elementType: \"div\",\n  },\n  Label: {\n    ...compactHeader,\n    /*\n     * A <label> names the first labelable element below it — here the toggle,\n     * whose own text is the label's only content. The name computation walks\n     * into the label, meets the button it started from and stops, so the\n     * toggle ends up with an empty name. A <span> names nothing and the name\n     * comes from the toggle's content again.\n     */\n    elementType: \"span\",\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      id,\n      defaultExpanded = false,\n      variant,\n      ...rest\n    } = props;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (variant !== undefined) {\n      warnDeprecation(\n        \"The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.\",\n      );\n    }\n\n    const generatedKey = useId();\n    const key = id ?? generatedKey;\n    const group = useAccordionGroupContext();\n    const register = group?.register;\n\n    /* `onExpandedChange` reports only keys the consumer gave. */\n    useEffect(\n      () => (id === undefined ? undefined : register?.(id, defaultExpanded)),\n      [register, id, defaultExpanded],\n    );\n\n    const state = useDisclosureState({\n      defaultExpanded,\n      ...(group && {\n        isExpanded: group.isExpanded(key, defaultExpanded),\n        onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded),\n      }),\n    });\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);\n    const triggerProps: TriggerProps = {\n      id: buttonProps.id,\n      \"aria-expanded\": state.isExpanded,\n      \"aria-controls\": buttonProps[\"aria-controls\"],\n      onPress: buttonProps.onPress,\n      onPressStart: buttonProps.onPressStart,\n    };\n\n    const rootClassName = clsx(\n      styles.accordion,\n      state.isExpanded && styles.expanded,\n      group && styles.grouped,\n      className,\n    );\n\n    return (\n      <div {...rest} id={id} className={rootClassName}>\n        <SectionHeadingReset>\n          <TriggerContext value={triggerProps}>\n            <PropsContextProvider props={propsContext}>\n              {children}\n              <div {...panelProps} ref={panelRef} className={styles.content}>\n                {/* An accordion inside the content is not part of this group. */}\n                <AccordionGroupContext value={null}>\n                  <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n                </AccordionGroupContext>\n              </div>\n            </PropsContextProvider>\n          </TriggerContext>\n        </SectionHeadingReset>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,IAAM,iBAAiB,cAAmC,IAAI;AAY9D,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,WAAW,cAAc;CAE7C,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,WAAWA,yBAAO;EAClB,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAgB;EAAe,CAAA,GACvD,oBAAC,iBAAD;GACE,WAAWA,yBAAO;GAClB,MAAM,YAAY,MAAM;EACzB,CAAA,CACK;;AAEZ;AAGA,IAAM,gBAAgB;CACpB,WAAW,KAAKA,yBAAO,QAAQA,yBAAO,UAAU;CAChD,UAAU,SAAS,UACjB,oBAAC,cAAD;EAAc,WAAA;EAAW,UAAA,MAAM;CAAuB,CAAA,CACvD;AACH;AAEA,IAAM,eAA6B;CACjC,SAAS;EACP,WAAWA,yBAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;CACF;CACA,SAAS;EACP,WAAWA,yBAAO;EAClB,OAAO;EACP,UAAU,SAAS,UAAU,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAAC;EAC1E,QAAQ,EAAE,MAAM,IAAI;CACtB;CACA,MAAM;EACJ,GAAG;EACH,aAAa;CACf;CACA,OAAO;EACL,GAAG;EAQH,aAAa;CACf;AACF;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,IACA,kBAAkB,OAClB,SACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,YAAY,KAAA,GACd,gBACE,gLACF;CAGF,MAAM,eAAe,MAAM;CAC3B,MAAM,MAAM,MAAM;CAClB,MAAM,QAAQ,yBAAyB;CACvC,MAAM,WAAW,OAAO;CAGxB,gBACS,OAAO,KAAA,IAAY,KAAA,IAAY,WAAW,IAAI,eAAe,GACpE;EAAC;EAAU;EAAI;CAAe,CAChC;CAEA,MAAM,QAAQ,mBAAmB;EAC/B;EACA,GAAI,SAAS;GACX,YAAY,MAAM,WAAW,KAAK,eAAe;GACjD,mBAAmB,eAAe,MAAM,YAAY,KAAK,UAAU;EACrE;CACF,CAAC;CAED,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,EAAE,aAAa,eAAe,cAAc,CAAC,GAAG,OAAO,QAAQ;CACrE,MAAM,eAA6B;EACjC,IAAI,YAAY;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,YAAY;EAC7B,SAAS,YAAY;EACrB,cAAc,YAAY;CAC5B;CAEA,MAAM,gBAAgB,KACpBA,yBAAO,WACP,MAAM,cAAcA,yBAAO,UAC3B,SAASA,yBAAO,SAChB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAU;EAAI,WAAW;EAChC,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,UACD,oBAAC,OAAD;KAAK,GAAI;KAAY,KAAK;KAAU,WAAWA,yBAAO;KAEpD,UAAA,oBAAC,uBAAD;MAAuB,OAAO;MAC5B,UAAA,oBAAC,uBAAD;OAAuB,IAAG;OAAU,WAAU;MAAa,CAAA;KACtC,CAAA;IACpB,CAAA,CACe;;EACR,CAAA,EACG,CAAA;CAClB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Accordion.mjs","names":["styles"],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { useDisclosure } from \"react-aria\";\nimport { useDisclosureState } from \"react-stately\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  AccordionGroupContext,\n  useAccordionGroupContext,\n} from \"@/components/AccordionGroup/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface AccordionProps\n  extends\n    PropsWithChildren<ComponentProps<\"div\">>,\n    FlowComponentProps<HTMLDivElement> {\n  /**\n   * The key of the accordion inside an `AccordionGroup`, used by its\n   * `expandedKeys`. Also set as the DOM id.\n   */\n  id?: string;\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /**\n   * The visual variant of the accordion. Has no effect.\n   *\n   * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.\n   */\n  variant?: \"default\" | \"outline\";\n}\n\n/*\n * The header button is rendered by the `Heading`, `Text` or `Label` the\n * consumer wrote, through a memoized props context. It reads the disclosure\n * state from a React context instead, so it always gets the current one.\n */\ntype TriggerProps = Pick<\n  ButtonProps,\n  \"id\" | \"aria-expanded\" | \"aria-controls\" | \"onPress\" | \"onPressStart\"\n>;\n\nconst TriggerContext = createContext<TriggerProps | null>(null);\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  /** Text and label headers are smaller than headings, so is their chevron. */\n  isCompact?: boolean;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, isCompact } = props;\n  const buttonProps = useContext(TriggerContext);\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      className={styles.headerButton}\n      {...buttonProps}\n    >\n      <span className={styles.headerContent}>{children}</span>\n      <IconChevronDown\n        className={styles.chevron}\n        size={isCompact ? \"s\" : \"m\"}\n      />\n    </Button>\n  );\n};\n\n/* Text and label headers render the same compact toggle. */\nconst compactHeader = {\n  className: clsx(styles.header, styles.textHeader),\n  children: dynamic((props: PropsWithChildren) => (\n    <HeaderButton isCompact>{props.children}</HeaderButton>\n  )),\n};\n\nconst propsContext: PropsContext = {\n  Content: {\n    className: styles.contentInner,\n    tunnel: {\n      id: \"content\",\n      component: \"Accordion\",\n    },\n  },\n  Heading: {\n    className: styles.header,\n    level: 3,\n    children: dynamic((props) => <HeaderButton>{props.children}</HeaderButton>),\n    Button: { size: \"m\" },\n  },\n  Text: {\n    ...compactHeader,\n    elementType: \"div\",\n  },\n  Label: {\n    ...compactHeader,\n    /*\n     * A <label> names the first labelable element below it — here the toggle,\n     * whose own text is the label's only content. The name computation walks\n     * into the label, meets the button it started from and stops, so the\n     * toggle ends up with an empty name. A <span> names nothing and the name\n     * comes from the toggle's content again.\n     */\n    elementType: \"span\",\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      id,\n      defaultExpanded = false,\n      variant,\n      ...rest\n    } = props;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (variant !== undefined) {\n      warnDeprecation(\n        \"The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.\",\n      );\n    }\n\n    const generatedKey = useId();\n    const key = id ?? generatedKey;\n    const group = useAccordionGroupContext();\n    const register = group?.register;\n\n    /* `onExpandedChange` reports only keys the consumer gave. */\n    useEffect(\n      () => (id === undefined ? undefined : register?.(id, defaultExpanded)),\n      [register, id, defaultExpanded],\n    );\n\n    const state = useDisclosureState({\n      defaultExpanded,\n      ...(group && {\n        isExpanded: group.isExpanded(key, defaultExpanded),\n        onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded),\n      }),\n    });\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);\n    const triggerProps: TriggerProps = {\n      id: buttonProps.id,\n      \"aria-expanded\": state.isExpanded,\n      \"aria-controls\": buttonProps[\"aria-controls\"],\n      onPress: buttonProps.onPress,\n      onPressStart: buttonProps.onPressStart,\n    };\n\n    const rootClassName = clsx(\n      styles.accordion,\n      state.isExpanded && styles.expanded,\n      group && styles.grouped,\n      className,\n    );\n\n    return (\n      <div {...rest} id={id} className={rootClassName}>\n        <SectionHeadingReset>\n          <TriggerContext value={triggerProps}>\n            <PropsContextProvider props={propsContext}>\n              {children}\n              <div {...panelProps} ref={panelRef} className={styles.content}>\n                {/* An accordion inside the content is not part of this group. */}\n                <AccordionGroupContext value={null}>\n                  <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n                </AccordionGroupContext>\n              </div>\n            </PropsContextProvider>\n          </TriggerContext>\n        </SectionHeadingReset>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmDA,IAAM,iBAAiB,cAAmC,IAAI;AAY9D,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,WAAW,cAAc;CAE7C,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,WAAWA,yBAAO;EAClB,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAgB;EAAe,CAAA,GACvD,oBAAC,iBAAD;GACE,WAAWA,yBAAO;GAClB,MAAM,YAAY,MAAM;EACzB,CAAA,CACK;;AAEZ;AAGA,IAAM,gBAAgB;CACpB,WAAW,KAAKA,yBAAO,QAAQA,yBAAO,UAAU;CAChD,UAAU,SAAS,UACjB,oBAAC,cAAD;EAAc,WAAA;EAAW,UAAA,MAAM;CAAuB,CAAA,CACvD;AACH;AAEA,IAAM,eAA6B;CACjC,SAAS;EACP,WAAWA,yBAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;CACF;CACA,SAAS;EACP,WAAWA,yBAAO;EAClB,OAAO;EACP,UAAU,SAAS,UAAU,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAAC;EAC1E,QAAQ,EAAE,MAAM,IAAI;CACtB;CACA,MAAM;EACJ,GAAG;EACH,aAAa;CACf;CACA,OAAO;EACL,GAAG;EAQH,aAAa;CACf;AACF;;;;;AAMA,IAAa,YAAY,cACvB,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,IACA,kBAAkB,OAClB,SACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,YAAY,KAAA,GACd,gBACE,gLACF;CAGF,MAAM,eAAe,MAAM;CAC3B,MAAM,MAAM,MAAM;CAClB,MAAM,QAAQ,yBAAyB;CACvC,MAAM,WAAW,OAAO;CAGxB,gBACS,OAAO,KAAA,IAAY,KAAA,IAAY,WAAW,IAAI,eAAe,GACpE;EAAC;EAAU;EAAI;CAAe,CAChC;CAEA,MAAM,QAAQ,mBAAmB;EAC/B;EACA,GAAI,SAAS;GACX,YAAY,MAAM,WAAW,KAAK,eAAe;GACjD,mBAAmB,eAAe,MAAM,YAAY,KAAK,UAAU;EACrE;CACF,CAAC;CAED,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,EAAE,aAAa,eAAe,cAAc,CAAC,GAAG,OAAO,QAAQ;CACrE,MAAM,eAA6B;EACjC,IAAI,YAAY;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,YAAY;EAC7B,SAAS,YAAY;EACrB,cAAc,YAAY;CAC5B;CAEA,MAAM,gBAAgB,KACpBA,yBAAO,WACP,MAAM,cAAcA,yBAAO,UAC3B,SAASA,yBAAO,SAChB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAU;EAAI,WAAW;EAChC,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,UACD,oBAAC,OAAD;KAAK,GAAI;KAAY,KAAK;KAAU,WAAWA,yBAAO;KAEpD,UAAA,oBAAC,uBAAD;MAAuB,OAAO;MAC5B,UAAA,oBAAC,uBAAD;OAAuB,IAAG;OAAU,WAAU;MAAa,CAAA;KACtC,CAAA;IACpB,CAAA,CACe;;EACR,CAAA,EACG,CAAA;CAClB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -11,10 +11,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/AlertText/AlertText.tsx
 /** @flr-generate all */
 var AlertText = flowComponent("AlertText", (props) => {
-	const { className, children, status = "info" } = props;
+	const { className, children, status = "info", ...rest } = props;
 	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(AlertText_module_default.alertText, AlertText_module_default[status], className);
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
 		className: rootClassName,
 		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"AlertText.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertText/AlertText.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AlertText.module.scss\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertTextProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithStatus {}\n\n/** @flr-generate all */\nexport const AlertText = flowComponent(\"AlertText\", (props) => {\n  const { className, children, status = \"info\" } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(styles.alertText, styles[status], className);\n\n  return (\n    <span className={rootClassName} inert={isSkeleton || undefined}>\n      <PropsContextProvider props={{ Icon: { size: \"s\" } }}>\n        <AlertIcon status={status} className={styles.icon} />\n      </PropsContextProvider>\n\n      <SkeletonTextContent defaultWidth=\"8em\">{children}</SkeletonTextContent>\n    </span>\n  );\n});\n\nexport default AlertText;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,WAAW,UAAU,SAAS,WAAW;CAEjD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKA,yBAAO,WAAWA,yBAAO,SAAS,SAAS;CAEtE,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,OAAO,cAAc,KAAA;EAArD,UAAA,CACE,oBAAC,sBAAD;GAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE;GACjD,UAAA,oBAAC,WAAD;IAAmB;IAAQ,WAAWA,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA,CACnE;;AAEV,CAAC"}
+{"version":3,"file":"AlertText.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertText/AlertText.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AlertText.module.scss\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertTextProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    FlowComponentProps<HTMLSpanElement>,\n    PropsWithStatus {}\n\n/** @flr-generate all */\nexport const AlertText = flowComponent(\"AlertText\", (props) => {\n  const { className, children, status = \"info\", ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(styles.alertText, styles[status], className);\n\n  return (\n    <span {...rest} className={rootClassName} inert={isSkeleton || undefined}>\n      <PropsContextProvider props={{ Icon: { size: \"s\" } }}>\n        <AlertIcon status={status} className={styles.icon} />\n      </PropsContextProvider>\n\n      <SkeletonTextContent defaultWidth=\"8em\">{children}</SkeletonTextContent>\n    </span>\n  );\n});\n\nexport default AlertText;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,WAAW,UAAU,SAAS,QAAQ,GAAG,SAAS;CAE1D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKA,yBAAO,WAAWA,yBAAO,SAAS,SAAS;CAEtE,OACE,qBAAC,QAAD;EAAM,GAAI;EAAM,WAAW;EAAe,OAAO,cAAc,KAAA;EAA/D,UAAA,CACE,oBAAC,sBAAD;GAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE;GACjD,UAAA,oBAAC,WAAD;IAAmB;IAAQ,WAAWA,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA,CACnE;;AAEV,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserOnly.mjs","names":[],"sources":["../../../../../../../src/components/BrowserOnly/BrowserOnly.tsx"],"sourcesContent":["import { useIsMounted } from \"@/lib/hooks\";\nimport type { PropsWithChildren } from \"react\";\n\nexport type BrowserOnlyProps = PropsWithChildren;\n\nexport const BrowserOnly = (props: PropsWithChildren) => {\n  if (useIsMounted()) {\n    return props.children;\n  }\n};\n\nexport default BrowserOnly;\n"],"mappings":";;;;AAKA,IAAa,eAAe,UAA6B;CACvD,IAAI,aAAa,GACf,OAAO,MAAM;AAEjB"}
+{"version":3,"file":"BrowserOnly.mjs","names":[],"sources":["../../../../../../../src/components/BrowserOnly/BrowserOnly.tsx"],"sourcesContent":["import { useIsMounted } from \"@/lib/hooks\";\nimport type { PropsWithChildren } from \"react\";\n\nexport type BrowserOnlyProps = PropsWithChildren;\n\n/* Plain FC: transparent render utility. */\nexport const BrowserOnly = (props: PropsWithChildren) => {\n  if (useIsMounted()) {\n    return props.children;\n  }\n};\n\nexport default BrowserOnly;\n"],"mappings":";;;;AAMA,IAAa,eAAe,UAA6B;CACvD,IAAI,aAAa,GACf,OAAO,MAAM;AAEjB"}

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

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/Chat/Chat.tsx
 /** @flr-generate all */
 var Chat = flowComponent("Chat", (props) => {
-	const { height, className, children } = props;
+	const { height, className, children, ref } = props;
 	const rootClassName = clsx(Chat_module_default.chat, className);
 	const propsContext = {
 		MessageThread: { tunnel: {
@@ -31,6 +31,7 @@ var Chat = flowComponent("Chat", (props) => {
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref,
 			style: { height },
 			className: rootClassName,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.mjs","names":["styles"],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n  /** The height of the chat. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n  \"Chat\",\n  (props) => {\n    const { height, className, children } = props;\n\n    const rootClassName = clsx(styles.chat, className);\n\n    const propsContext: PropsContext = {\n      MessageThread: {\n        tunnel: {\n          id: \"messageThread\",\n          component: \"Chat\",\n        },\n      },\n      FileCardList: {\n        className: styles.fileCardList,\n        tunnel: {\n          id: \"fileCardList\",\n          component: \"Chat\",\n        },\n      },\n      Button: {\n        className: dynamic((props) => {\n          return props.color === \"success\" || props.color === \"accent\"\n            ? styles.successButton\n            : styles.button;\n        }),\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div style={{ height }} className={rootClassName}>\n          <div className={styles.messageThreadContainer}>\n            <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAWA,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChDA,oBAAO,gBACPA,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Chat.mjs","names":["styles"],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  /** The height of the chat. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat = flowComponent(\n  \"Chat\",\n  (props) => {\n    const { height, className, children, ref } = props;\n\n    const rootClassName = clsx(styles.chat, className);\n\n    const propsContext: PropsContext = {\n      MessageThread: {\n        tunnel: {\n          id: \"messageThread\",\n          component: \"Chat\",\n        },\n      },\n      FileCardList: {\n        className: styles.fileCardList,\n        tunnel: {\n          id: \"fileCardList\",\n          component: \"Chat\",\n        },\n      },\n      Button: {\n        className: dynamic((props) => {\n          return props.color === \"success\" || props.color === \"accent\"\n            ? styles.successButton\n            : styles.button;\n        }),\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div ref={ref} style={{ height }} className={rootClassName}>\n          <div className={styles.messageThreadContainer}>\n            <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,OAAO,cAClB,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,UAAU,QAAQ;CAE7C,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAWA,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChDA,oBAAO,gBACPA,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAU;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAA7C,UAAA;IACE,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 * names render the exact same output.
 */
 var CombineImplementation = (props) => {
-	const { children, className } = props;
+	const { children, className, ref } = props;
 	const rootClassName = clsx(Combine_module_default.combine, className);
 	const propsContext = {
 		Text: { className: Combine_module_default.text },
@@ -38,6 +38,7 @@ var CombineImplementation = (props) => {
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx("div", {
+			ref,
 			className: rootClassName,
 			children
 		})

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentUsageProvider.mjs","names":[],"sources":["../../../../../../../src/components/ComponentUsageProvider/ComponentUsageProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  createElement,\n  useContext,\n  useEffect,\n  type ComponentType,\n  type FC,\n  type PropsWithChildren,\n} from \"react\";\n\nexport interface ComponentUsageEvent {\n  component: string;\n}\n\nexport type ComponentUsageHandler = (event: ComponentUsageEvent) => void;\n\nconst componentUsageContext = createContext<ComponentUsageHandler | undefined>(\n  undefined,\n);\n\nconst viewCompositionContext = createContext(false);\n\nexport interface ComponentUsageProviderProps extends PropsWithChildren {\n  onUsage?: ComponentUsageHandler;\n}\n\nexport const ComponentUsageProvider: FC<ComponentUsageProviderProps> = (\n  props,\n) => {\n  const { children, onUsage } = props;\n\n  return (\n    <componentUsageContext.Provider value={onUsage}>\n      {children}\n    </componentUsageContext.Provider>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst markedComponents = new WeakMap<ComponentType<any>, ComponentType<any>>();\n\nconst markViewComposition = <P extends object>(\n  Component: ComponentType<P>,\n): ComponentType<P> => {\n  const cached = markedComponents.get(Component);\n  if (cached) {\n    return cached as ComponentType<P>;\n  }\n\n  const ViewComposition: FC<P> = (props) => (\n    <viewCompositionContext.Provider value={true}>\n      {createElement(Component, props)}\n    </viewCompositionContext.Provider>\n  );\n\n  ViewComposition.displayName = `ViewComposition(${Component.displayName ?? Component.name})`;\n\n  markedComponents.set(Component, ViewComposition);\n\n  return ViewComposition;\n};\n\nexport const markViewComponents = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(\n  components: T,\n): T =>\n  Object.fromEntries(\n    Object.entries(components).map(([name, component]) => [\n      name,\n      markViewComposition(component),\n    ]),\n    // Same keys, same props — only the render is wrapped.\n  ) as T;\n\nexport const ViewCompositionReset: FC<PropsWithChildren> = ({ children }) => (\n  <viewCompositionContext.Provider value={false}>\n    {children}\n  </viewCompositionContext.Provider>\n);\n\nexport const useReportComponentUsage = (component: string): boolean => {\n  const onUsage = useContext(componentUsageContext);\n  const isViewComposition = useContext(viewCompositionContext);\n\n  useEffect(() => {\n    if (!isViewComposition) {\n      onUsage?.({ component });\n    }\n  }, [onUsage, component, isViewComposition]);\n\n  return isViewComposition;\n};\n\nexport default ComponentUsageProvider;\n"],"mappings":";;;;;AAgBA,IAAM,wBAAwB,cAC5B,KAAA,CACF;AAEA,IAAM,yBAAyB,cAAc,KAAK;AAMlD,IAAa,0BACX,UACG;CACH,MAAM,EAAE,UAAU,YAAY;CAE9B,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACpC;CAC6B,CAAA;AAEpC;AAGA,IAAM,mCAAmB,IAAI,QAAgD;AAE7E,IAAM,uBACJ,cACqB;CACrB,MAAM,SAAS,iBAAiB,IAAI,SAAS;CAC7C,IAAI,QACF,OAAO;CAGT,MAAM,mBAA0B,UAC9B,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC,UAAA,cAAc,WAAW,KAAK;CACA,CAAA;CAGnC,gBAAgB,cAAc,mBAAmB,UAAU,eAAe,UAAU,KAAK;CAEzF,iBAAiB,IAAI,WAAW,eAAe;CAE/C,OAAO;AACT;AAEA,IAAa,sBAIX,eAEA,OAAO,YACL,OAAO,QAAQ,UAAU,CAAC,CAAC,KAAK,CAAC,MAAM,eAAe,CACpD,MACA,oBAAoB,SAAS,CAC/B,CAAC,CAEH;AAEF,IAAa,wBAA+C,EAAE,eAC5D,oBAAC,uBAAuB,UAAxB;CAAiC,OAAO;CACrC;AAC8B,CAAA;AAGnC,IAAa,2BAA2B,cAA+B;CACrE,MAAM,UAAU,WAAW,qBAAqB;CAChD,MAAM,oBAAoB,WAAW,sBAAsB;CAE3D,gBAAgB;EACd,IAAI,CAAC,mBACH,UAAU,EAAE,UAAU,CAAC;CAE3B,GAAG;EAAC;EAAS;EAAW;CAAiB,CAAC;CAE1C,OAAO;AACT"}
+{"version":3,"file":"ComponentUsageProvider.mjs","names":[],"sources":["../../../../../../../src/components/ComponentUsageProvider/ComponentUsageProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  createElement,\n  useContext,\n  useEffect,\n  type ComponentType,\n  type FC,\n  type PropsWithChildren,\n} from \"react\";\n\nexport interface ComponentUsageEvent {\n  component: string;\n}\n\nexport type ComponentUsageHandler = (event: ComponentUsageEvent) => void;\n\nconst componentUsageContext = createContext<ComponentUsageHandler | undefined>(\n  undefined,\n);\n\nconst viewCompositionContext = createContext(false);\n\nexport interface ComponentUsageProviderProps extends PropsWithChildren {\n  onUsage?: ComponentUsageHandler;\n}\n\n/* Plain FC: factory infrastructure. */\nexport const ComponentUsageProvider: FC<ComponentUsageProviderProps> = (\n  props,\n) => {\n  const { children, onUsage } = props;\n\n  return (\n    <componentUsageContext.Provider value={onUsage}>\n      {children}\n    </componentUsageContext.Provider>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst markedComponents = new WeakMap<ComponentType<any>, ComponentType<any>>();\n\nconst markViewComposition = <P extends object>(\n  Component: ComponentType<P>,\n): ComponentType<P> => {\n  const cached = markedComponents.get(Component);\n  if (cached) {\n    return cached as ComponentType<P>;\n  }\n\n  const ViewComposition: FC<P> = (props) => (\n    <viewCompositionContext.Provider value={true}>\n      {createElement(Component, props)}\n    </viewCompositionContext.Provider>\n  );\n\n  ViewComposition.displayName = `ViewComposition(${Component.displayName ?? Component.name})`;\n\n  markedComponents.set(Component, ViewComposition);\n\n  return ViewComposition;\n};\n\nexport const markViewComponents = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends Record<string, ComponentType<any>>,\n>(\n  components: T,\n): T =>\n  Object.fromEntries(\n    Object.entries(components).map(([name, component]) => [\n      name,\n      markViewComposition(component),\n    ]),\n    // Same keys, same props — only the render is wrapped.\n  ) as T;\n\nexport const ViewCompositionReset: FC<PropsWithChildren> = ({ children }) => (\n  <viewCompositionContext.Provider value={false}>\n    {children}\n  </viewCompositionContext.Provider>\n);\n\nexport const useReportComponentUsage = (component: string): boolean => {\n  const onUsage = useContext(componentUsageContext);\n  const isViewComposition = useContext(viewCompositionContext);\n\n  useEffect(() => {\n    if (!isViewComposition) {\n      onUsage?.({ component });\n    }\n  }, [onUsage, component, isViewComposition]);\n\n  return isViewComposition;\n};\n\nexport default ComponentUsageProvider;\n"],"mappings":";;;;;AAgBA,IAAM,wBAAwB,cAC5B,KAAA,CACF;AAEA,IAAM,yBAAyB,cAAc,KAAK;AAOlD,IAAa,0BACX,UACG;CACH,MAAM,EAAE,UAAU,YAAY;CAE9B,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACpC;CAC6B,CAAA;AAEpC;AAGA,IAAM,mCAAmB,IAAI,QAAgD;AAE7E,IAAM,uBACJ,cACqB;CACrB,MAAM,SAAS,iBAAiB,IAAI,SAAS;CAC7C,IAAI,QACF,OAAO;CAGT,MAAM,mBAA0B,UAC9B,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACrC,UAAA,cAAc,WAAW,KAAK;CACA,CAAA;CAGnC,gBAAgB,cAAc,mBAAmB,UAAU,eAAe,UAAU,KAAK;CAEzF,iBAAiB,IAAI,WAAW,eAAe;CAE/C,OAAO;AACT;AAEA,IAAa,sBAIX,eAEA,OAAO,YACL,OAAO,QAAQ,UAAU,CAAC,CAAC,KAAK,CAAC,MAAM,eAAe,CACpD,MACA,oBAAoB,SAAS,CAC/B,CAAC,CAEH;AAEF,IAAa,wBAA+C,EAAE,eAC5D,oBAAC,uBAAuB,UAAxB;CAAiC,OAAO;CACrC;AAC8B,CAAA;AAGnC,IAAa,2BAA2B,cAA+B;CACrE,MAAM,UAAU,WAAW,qBAAqB;CAChD,MAAM,oBAAoB,WAAW,sBAAsB;CAE3D,gBAAgB;EACd,IAAI,CAAC,mBACH,UAAU,EAAE,UAAU,CAAC;CAE3B,GAAG;EAAC;EAAS;EAAW;CAAiB,CAAC;CAE1C,OAAO;AACT"}

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

@@ -16,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/FileCard/FileCard.tsx
 /** @flr-generate all */
 var FileCard = flowComponent("FileCard", (props) => {
-	const { ref, onDelete, type, sizeInBytes, name, className, elementType = "div", onPress, href, target, download, imageSrc, children, isFailed } = props;
+	const { ref, onDelete, type, sizeInBytes, name, className, elementType = "div", onPress, href, target, download, imageSrc, children, isFailed, ...rest } = props;
 	const rootClassName = clsx(FileCard_module_default.fileCard, isFailed && FileCard_module_default["failed"], className);
 	const propsContext = {
 		ContextMenu: {
@@ -46,6 +46,7 @@ var FileCard = flowComponent("FileCard", (props) => {
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsxs(elementType, {
+			...rest,
 			ref,
 			className: rootClassName,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"FileCard.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface FileCardProps\n  extends\n    FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n    PropsWithClassName,\n    PropsWithElementType<\"div\" | \"li\">,\n    Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n  /** The name of the file. */\n  name?: string;\n  /** The type of the file. */\n  type?: string;\n  /** Handler that is called when the file cards delete button is clicked. */\n  onDelete?: () => void;\n  /** The size of the file in bytes. */\n  sizeInBytes?: number;\n  /** The source of an image file. */\n  imageSrc?: string;\n  /** Whether the file card is in a failed state. */\n  isFailed?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileCard = flowComponent(\"FileCard\", (props) => {\n  const {\n    ref,\n    onDelete,\n    type,\n    sizeInBytes,\n    name,\n    className,\n    elementType = \"div\",\n    onPress,\n    href,\n    target,\n    download,\n    imageSrc,\n    children,\n    isFailed,\n  } = props;\n\n  const rootClassName = clsx(\n    styles.fileCard,\n    isFailed && styles[\"failed\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      wrapWith: <OptionsButton />,\n      placement: \"bottom right\",\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.subTitle,\n      tunnel: {\n        id: \"subTitle\",\n        component: \"FileCard\",\n      },\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnel: {\n        id: \"progressBar\",\n        component: \"FileCard\",\n      },\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element ref={ref as never} className={rootClassName}>\n        <Wrap if={(href || onPress) && !isFailed}>\n          <Link\n            className={styles.link}\n            unstyled\n            href={href}\n            onPress={onPress}\n            target={target}\n            download={download}\n          >\n            <Avatar type={type} imageSrc={imageSrc} isFailed={isFailed} />\n\n            <span className={styles.text}>\n              {name && (\n                <Text className={styles.title}>\n                  <strong>{name}</strong>\n                </Text>\n              )}\n              {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}\n              <UiComponentTunnelExit id=\"subTitle\" component=\"FileCard\" />\n              <UiComponentTunnelExit id=\"progressBar\" component=\"FileCard\" />\n            </span>\n          </Link>\n        </Wrap>\n        {children}\n        {onDelete && <DeleteButton onDelete={onDelete} />}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,KACA,UACA,MACA,aACA,MACA,WACA,cAAc,OACd,SACA,MACA,QACA,UACA,UACA,UACA,aACE;CAEJ,MAAM,gBAAgB,KACpBA,wBAAO,UACP,YAAYA,wBAAO,WACnB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,UAAU,oBAAC,eAAD,CAAgB,CAAA;GAC1B,WAAW;EACb;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,wBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,aAAa;GACX,MAAM;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ;GAAE,SAAS;GAAS,OAAO;EAAY;CACjD;CAIA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAACC,aAAD;GAAc;GAAc,WAAW;GAAvC,UAAA;IACE,oBAAC,MAAD;KAAM,KAAK,QAAQ,YAAY,CAAC;KAC9B,UAAA,qBAAC,MAAD;MACE,WAAWD,wBAAO;MAClB,UAAA;MACM;MACG;MACD;MACE;MANZ,UAAA,CAQE,oBAAC,QAAD;OAAc;OAAgB;OAAoB;MAAW,CAAA,GAE7D,qBAAC,QAAD;OAAM,WAAWA,wBAAO;OAAxB,UAAA;QACG,QACC,oBAAC,MAAD;SAAM,WAAWA,wBAAO;SACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,KAAa,CAAA;QAClB,CAAA;QAEP,eAAe,oBAAC,cAAD,EAA2B,YAAc,CAAA;QACzD,oBAAC,uBAAD;SAAuB,IAAG;SAAW,WAAU;QAAY,CAAA;QAC3D,oBAAC,uBAAD;SAAuB,IAAG;SAAc,WAAU;QAAY,CAAA;OAC1D;MACF,CAAA,CAAA;;IACF,CAAA;IACL;IACA,YAAY,oBAAC,cAAD,EAAwB,SAAW,CAAA;GACzC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"FileCard.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/FileCard/FileCard.tsx"],"sourcesContent":["import { Avatar } from \"./components/Avatar\";\nimport { Text } from \"@/components/Text\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport styles from \"./FileCard.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { FileSizeText } from \"@/components/FileCard/components/FileSizeText\";\nimport { Link, type LinkProps } from \"@/components/Link\";\nimport Wrap from \"@/components/Wrap\";\nimport { DeleteButton } from \"@/components/FileCard/components/DeleteButton\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface FileCardProps\n  extends\n    FlowComponentProps<HTMLDivElement | HTMLLIElement>,\n    PropsWithClassName,\n    PropsWithElementType<\"div\" | \"li\">,\n    Pick<LinkProps, \"onPress\" | \"href\" | \"target\" | \"download\"> {\n  /** The name of the file. */\n  name?: string;\n  /** The type of the file. */\n  type?: string;\n  /** Handler that is called when the file cards delete button is clicked. */\n  onDelete?: () => void;\n  /** The size of the file in bytes. */\n  sizeInBytes?: number;\n  /** The source of an image file. */\n  imageSrc?: string;\n  /** Whether the file card is in a failed state. */\n  isFailed?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileCard = flowComponent(\"FileCard\", (props) => {\n  const {\n    ref,\n    onDelete,\n    type,\n    sizeInBytes,\n    name,\n    className,\n    elementType = \"div\",\n    onPress,\n    href,\n    target,\n    download,\n    imageSrc,\n    children,\n    isFailed,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.fileCard,\n    isFailed && styles[\"failed\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      wrapWith: <OptionsButton />,\n      placement: \"bottom right\",\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.subTitle,\n      tunnel: {\n        id: \"subTitle\",\n        component: \"FileCard\",\n      },\n    },\n    ProgressBar: {\n      size: \"s\",\n      tunnel: {\n        id: \"progressBar\",\n        component: \"FileCard\",\n      },\n    },\n    Button: { variant: \"plain\", color: \"secondary\" },\n  };\n\n  const Element = elementType;\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element {...rest} ref={ref as never} className={rootClassName}>\n        <Wrap if={(href || onPress) && !isFailed}>\n          <Link\n            className={styles.link}\n            unstyled\n            href={href}\n            onPress={onPress}\n            target={target}\n            download={download}\n          >\n            <Avatar type={type} imageSrc={imageSrc} isFailed={isFailed} />\n\n            <span className={styles.text}>\n              {name && (\n                <Text className={styles.title}>\n                  <strong>{name}</strong>\n                </Text>\n              )}\n              {sizeInBytes && <FileSizeText sizeInBytes={sizeInBytes} />}\n              <UiComponentTunnelExit id=\"subTitle\" component=\"FileCard\" />\n              <UiComponentTunnelExit id=\"progressBar\" component=\"FileCard\" />\n            </span>\n          </Link>\n        </Wrap>\n        {children}\n        {onDelete && <DeleteButton onDelete={onDelete} />}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCard;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,KACA,UACA,MACA,aACA,MACA,WACA,cAAc,OACd,SACA,MACA,QACA,UACA,UACA,UACA,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,wBAAO,UACP,YAAYA,wBAAO,WACnB,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;GACX,UAAU,oBAAC,eAAD,CAAgB,CAAA;GAC1B,WAAW;EACb;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,wBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,aAAa;GACX,MAAM;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ;GAAE,SAAS;GAAS,OAAO;EAAY;CACjD;CAIA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAACC,aAAD;GAAS,GAAI;GAAW;GAAc,WAAW;GAAjD,UAAA;IACE,oBAAC,MAAD;KAAM,KAAK,QAAQ,YAAY,CAAC;KAC9B,UAAA,qBAAC,MAAD;MACE,WAAWD,wBAAO;MAClB,UAAA;MACM;MACG;MACD;MACE;MANZ,UAAA,CAQE,oBAAC,QAAD;OAAc;OAAgB;OAAoB;MAAW,CAAA,GAE7D,qBAAC,QAAD;OAAM,WAAWA,wBAAO;OAAxB,UAAA;QACG,QACC,oBAAC,MAAD;SAAM,WAAWA,wBAAO;SACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,KAAa,CAAA;QAClB,CAAA;QAEP,eAAe,oBAAC,cAAD,EAA2B,YAAc,CAAA;QACzD,oBAAC,uBAAD;SAAuB,IAAG;SAAW,WAAU;QAAY,CAAA;QAC3D,oBAAC,uBAAD;SAAuB,IAAG;SAAc,WAAU;QAAY,CAAA;OAC1D;MACF,CAAA,CAAA;;IACF,CAAA;IACL;IACA,YAAY,oBAAC,cAAD,EAAwB,SAAW,CAAA;GACzC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -8,15 +8,15 @@ import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs
 import FileDropZone_module_default from "./FileDropZone.module.mjs";
 import { getAcceptedFiles } from "../../lib/files/acceptedFiles.mjs";
 import clsx from "clsx";
-import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
 // src/components/FileDropZone/FileDropZone.tsx
 /** @flr-generate all */
 var FileDropZone = flowComponent("FileDropZone", (props) => {
-	const { multiple, accept, className, onChange: onChangeDropZone, children, name, isDisabled, isReadOnly } = props;
+	const { multiple, accept, className, onChange: onChangeDropZone, children, name, isDisabled, isReadOnly, ref } = props;
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
-	const fileFieldRef = useRef(null);
+	const fileFieldRef = useObjectRef(ref);
 	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(FileDropZone_module_default.fileDropZone, isDisabled && FileDropZone_module_default.disabled, isSkeleton && FileDropZone_module_default.skeleton, className);
 	const propsContext = {
@@ -56,7 +56,7 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
-			dependencies: [controlProps["aria-describedby"]],
+			dependencies: [controlProps["aria-describedby"], fileFieldRef],
 			children: /* @__PURE__ */ jsx(Aria.DropZone, {
 				className: rootClassName,
 				onDrop: onDropHandler,

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","names":["styles"],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const isSkeleton = useSkeletonMode();\n\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      isSkeleton && styles.skeleton,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      IllustratedMessage: {\n        FileField: {\n          name,\n          onChange: onChangeDropZone,\n          ref: fileFieldRef,\n          accept: accept,\n          multiple: multiple,\n          Button: { variant: \"outline\", color: \"dark\" },\n          isDisabled,\n          isReadOnly,\n          \"aria-describedby\": controlProps[\"aria-describedby\"],\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div className={wrapperProps.className} inert={isSkeleton || undefined}>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[controlProps[\"aria-describedby\"]]}\n        >\n          <Aria.DropZone\n            className={rootClassName}\n            onDrop={onDropHandler}\n            isDisabled={isDisabled}\n            data-readonly={isReadOnly}\n          >\n            {/* The drop zone is one skeleton surface, its content draws none. */}\n            <SkeletonModeReset>\n              <IllustratedMessage color=\"dark\">\n                {/* Inside: IllustratedMessage clears the props context it gets. */}\n                <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n              </IllustratedMessage>\n            </SkeletonModeReset>\n          </Aria.DropZone>\n        </PropsContextProvider>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;;AAmCA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,4BAAO,cACP,cAAcA,4BAAO,UACrB,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;IACA,oBAAoB,aAAa;GACnC;GACA,SAAS,EACP,WAAWA,4BAAO,QACpB;GACA,MAAM,EAAE,WAAWA,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAWA,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa;EAAW,OAAO,cAAc,KAAA;EAA7D,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,aAAa,mBAAmB;GAE/C,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAGf,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,oBAAD;KAAoB,OAAM;KAExB,UAAA,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC5C,CAAA,EACH,CAAA;GACN,CAAA;EACK,CAAA,GACtB,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}
+{"version":3,"file":"FileDropZone.mjs","names":["styles"],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import type { PropsWithChildren, Ref } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone = flowComponent(\"FileDropZone\", (props) => {\n  const {\n    multiple,\n    accept,\n    className,\n    onChange: onChangeDropZone,\n    children,\n    name,\n    isDisabled,\n    isReadOnly,\n    ref,\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileDropZone\");\n\n  /* The ref reaches the file input, the element a form focuses on an error. */\n  const fileFieldRef = useObjectRef(ref as Ref<HTMLInputElement>);\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.fileDropZone,\n    isDisabled && styles.disabled,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    IllustratedMessage: {\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n        \"aria-describedby\": controlProps[\"aria-describedby\"],\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    },\n  };\n\n  const onDropHandler = async (event: DropEvent) => {\n    if (isReadOnly) {\n      return;\n    }\n\n    const files = await getAcceptedFiles(event.items, accept);\n\n    if (files.length > 0) {\n      const fileTransfer = new DataTransfer();\n      for (const file of multiple ? files : [files[0]]) {\n        if (file) {\n          fileTransfer.items.add(file);\n        }\n      }\n\n      onChangeDropZone?.(fileTransfer.files);\n      if (fileFieldRef.current) {\n        fileFieldRef.current.files = fileTransfer.files;\n      }\n    }\n  };\n\n  return (\n    <div className={wrapperProps.className} inert={isSkeleton || undefined}>\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[controlProps[\"aria-describedby\"], fileFieldRef]}\n      >\n        <Aria.DropZone\n          className={rootClassName}\n          onDrop={onDropHandler}\n          isDisabled={isDisabled}\n          data-readonly={isReadOnly}\n        >\n          {/* The drop zone is one skeleton surface, its content draws none. */}\n          <SkeletonModeReset>\n            <IllustratedMessage color=\"dark\">\n              {/* Inside: IllustratedMessage clears the props context it gets. */}\n              <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n            </IllustratedMessage>\n          </SkeletonModeReset>\n        </Aria.DropZone>\n      </PropsContextProvider>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;;AAoCA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,YACA,QACE;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,cAAc;CAG3C,MAAM,eAAe,aAAa,GAA4B;CAC9D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,4BAAO,cACP,cAAcA,4BAAO,UACrB,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;IACA,oBAAoB,aAAa;GACnC;GACA,SAAS,EACP,WAAWA,4BAAO,QACpB;GACA,MAAM,EAAE,WAAWA,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAWA,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa;EAAW,OAAO,cAAc,KAAA;EAA7D,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,aAAa,qBAAqB,YAAY;GAE7D,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAGf,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,oBAAD;KAAoB,OAAM;KAExB,UAAA,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC5C,CAAA,EACH,CAAA;GACN,CAAA;EACK,CAAA,GACtB,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.mjs

@@ -14,7 +14,7 @@ import { useLocalizedStringFormatter } from "react-aria";
 // src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx
 /** @flr-generate all */
 var LightBoxGallery = flowComponent("LightBoxGallery", (props) => {
-	const { children, className, defaultIndex = 0 } = props;
+	const { children, className, defaultIndex = 0, ref } = props;
 	const [currentIndex, setIndex] = useState(defaultIndex);
 	const count = React.Children.count(children);
 	const isFirst = currentIndex === 0;
@@ -23,8 +23,10 @@ var LightBoxGallery = flowComponent("LightBoxGallery", (props) => {
 	const swipeThreshold = 50;
 	const containerRef = useRef(null);
 	useEffect(() => {
-		containerRef.current?.focus();
-	}, [containerRef.current]);
+		const container = containerRef.current;
+		const focused = document.activeElement;
+		if (container && (!container.contains(focused) || focused?.matches(":disabled"))) container.focus();
+	}, [currentIndex]);
 	const paginate = (direction) => {
 		setIndex((prev) => {
 			const next = prev + direction;
@@ -56,6 +58,7 @@ var LightBoxGallery = flowComponent("LightBoxGallery", (props) => {
 	};
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "LightBox");
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		className: clsx(LightBoxGallery_module_default.lightBoxGallery, className),
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxGallery.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps extends PropsWithClassName {\n  children: ReactNode[];\n  defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n  const { children, className, defaultIndex = 0 } = props;\n\n  const [currentIndex, setIndex] = useState(defaultIndex);\n\n  const count = React.Children.count(children);\n\n  const isFirst = currentIndex === 0;\n  const isLast = currentIndex === count - 1;\n\n  const pointerStartX = useRef<number | null>(null);\n  const swipeThreshold = 50;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- rerunning once the ref is set takes the focus back from the dialog's autofocus\n  }, [containerRef.current]);\n\n  const paginate = (direction: number) => {\n    setIndex((prev) => {\n      const next = prev + direction;\n\n      if (next < 0) return 0;\n      if (next >= count) return count - 1;\n\n      return next;\n    });\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!e.isPrimary) return;\n    pointerStartX.current = e.clientX;\n  };\n\n  const handlePointerUp = (e: React.PointerEvent) => {\n    if (pointerStartX.current === null) return;\n\n    const distance = pointerStartX.current - e.clientX;\n\n    if (Math.abs(distance) > swipeThreshold) {\n      paginate(distance > 0 ? 1 : -1);\n    }\n\n    pointerStartX.current = null;\n  };\n\n  const handlePointerCancel = () => {\n    pointerStartX.current = null;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowLeft\":\n        if (!isFirst) paginate(-1);\n        break;\n      case \"ArrowRight\":\n        if (!isLast) paginate(1);\n        break;\n    }\n  };\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <div className={clsx(styles.lightBoxGallery, className)}>\n      <div\n        ref={containerRef}\n        className={styles.content}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerCancel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={stringFormatter.format(\"gallery\")}\n      >\n        <div className={styles.galleryItem} key={currentIndex}>\n          {children[currentIndex]}\n        </div>\n\n        <div className={styles.controls}>\n          <Button\n            aria-label={stringFormatter.format(\"previous\")}\n            onPress={() => paginate(-1)}\n            color=\"light-static\"\n            className={styles.previousButton}\n            isDisabled={isFirst}\n          >\n            <IconChevronLeft />\n          </Button>\n\n          <Controls count={count} currentIndex={currentIndex} />\n\n          <Button\n            aria-label={stringFormatter.format(\"next\")}\n            onPress={() => paginate(1)}\n            color=\"light-static\"\n            className={styles.nextButton}\n            isDisabled={isLast}\n          >\n            <IconChevronRight />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,MAAM;CAElD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAEhD,gBAAgB;EACd,aAAa,SAAS,MAAM;CAE9B,GAAG,CAAC,aAAa,OAAO,CAAC;CAEzB,MAAM,YAAY,cAAsB;EACtC,UAAU,SAAS;GACjB,MAAM,OAAO,OAAO;GAEpB,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,QAAQ,OAAO,OAAO,QAAQ;GAElC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,qBAAqB,MAA0B;EACnD,IAAI,CAAC,EAAE,WAAW;EAClB,cAAc,UAAU,EAAE;CAC5B;CAEA,MAAM,mBAAmB,MAA0B;EACjD,IAAI,cAAc,YAAY,MAAM;EAEpC,MAAM,WAAW,cAAc,UAAU,EAAE;EAE3C,IAAI,KAAK,IAAI,QAAQ,IAAI,gBACvB,SAAS,WAAW,IAAI,IAAI,EAAE;EAGhC,cAAc,UAAU;CAC1B;CAEA,MAAM,4BAA4B;EAChC,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAI,CAAC,SAAS,SAAS,EAAE;IACzB;GACF,KAAK,cACH,IAAI,CAAC,QAAQ,SAAS,CAAC;EAE3B;CACF;CAEA,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,OAAD;EAAK,WAAW,KAAKC,+BAAO,iBAAiB,SAAS;EACpD,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAWA,+BAAO;GAClB,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,UAAU;GACV,WAAW;GACX,MAAK;GACL,wBAAqB;GACrB,cAAY,gBAAgB,OAAO,SAAS;GAV9C,UAAA,CAYE,oBAAC,OAAD;IAAK,WAAWA,+BAAO;IACpB,UAAA,SAAS;GACP,GAFoC,YAEpC,GAEL,qBAAC,OAAD;IAAK,WAAWA,+BAAO;IAAvB,UAAA;KACE,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,UAAU;MAC7C,eAAe,SAAS,EAAE;MAC1B,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA;KAER,oBAAC,UAAD;MAAiB;MAAqB;KAAe,CAAA;KAErD,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,MAAM;MACzC,eAAe,SAAS,CAAC;MACzB,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;KACb,CAAA;IACL;GACF,CAAA,CAAA;;CACF,CAAA;AAET,CAAC"}
+{"version":3,"file":"LightBoxGallery.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/LightBoxGallery.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport React, { type ReactNode, useEffect, useRef, useState } from \"react\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"./LightBoxGallery.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport Button from \"@/components/Button\";\nimport { Controls } from \"@/components/LightBox/components/LightBoxGallery/Controls\";\n\nexport interface LightBoxGalleryProps\n  extends PropsWithClassName, FlowComponentProps {\n  children: ReactNode[];\n  defaultIndex?: number;\n}\n\n/** @flr-generate all */\nexport const LightBoxGallery = flowComponent(\"LightBoxGallery\", (props) => {\n  const { children, className, defaultIndex = 0, ref } = props;\n\n  const [currentIndex, setIndex] = useState(defaultIndex);\n\n  const count = React.Children.count(children);\n\n  const isFirst = currentIndex === 0;\n  const isLast = currentIndex === count - 1;\n\n  const pointerStartX = useRef<number | null>(null);\n  const swipeThreshold = 50;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // A paging button that gets disabled keeps the focus but no longer receives\n  // keys, so Escape would stop closing the light box.\n  useEffect(() => {\n    const container = containerRef.current;\n    const focused = document.activeElement;\n    if (\n      container &&\n      (!container.contains(focused) || focused?.matches(\":disabled\"))\n    ) {\n      container.focus();\n    }\n  }, [currentIndex]);\n\n  const paginate = (direction: number) => {\n    setIndex((prev) => {\n      const next = prev + direction;\n\n      if (next < 0) return 0;\n      if (next >= count) return count - 1;\n\n      return next;\n    });\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (!e.isPrimary) return;\n    pointerStartX.current = e.clientX;\n  };\n\n  const handlePointerUp = (e: React.PointerEvent) => {\n    if (pointerStartX.current === null) return;\n\n    const distance = pointerStartX.current - e.clientX;\n\n    if (Math.abs(distance) > swipeThreshold) {\n      paginate(distance > 0 ? 1 : -1);\n    }\n\n    pointerStartX.current = null;\n  };\n\n  const handlePointerCancel = () => {\n    pointerStartX.current = null;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowLeft\":\n        if (!isFirst) paginate(-1);\n        break;\n      case \"ArrowRight\":\n        if (!isLast) paginate(1);\n        break;\n    }\n  };\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n  return (\n    <div ref={ref} className={clsx(styles.lightBoxGallery, className)}>\n      <div\n        ref={containerRef}\n        className={styles.content}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerCancel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={stringFormatter.format(\"gallery\")}\n      >\n        <div className={styles.galleryItem} key={currentIndex}>\n          {children[currentIndex]}\n        </div>\n\n        <div className={styles.controls}>\n          <Button\n            aria-label={stringFormatter.format(\"previous\")}\n            onPress={() => paginate(-1)}\n            color=\"light-static\"\n            className={styles.previousButton}\n            isDisabled={isFirst}\n          >\n            <IconChevronLeft />\n          </Button>\n\n          <Controls count={count} currentIndex={currentIndex} />\n\n          <Button\n            aria-label={stringFormatter.format(\"next\")}\n            onPress={() => paginate(1)}\n            color=\"light-static\"\n            className={styles.nextButton}\n            isDisabled={isLast}\n          >\n            <IconChevronRight />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default LightBoxGallery;\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EAAE,UAAU,WAAW,eAAe,GAAG,QAAQ;CAEvD,MAAM,CAAC,cAAc,YAAY,SAAS,YAAY;CAEtD,MAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;CAE3C,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,iBAAiB,QAAQ;CAExC,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,iBAAiB;CAEvB,MAAM,eAAe,OAAuB,IAAI;CAIhD,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,MAAM,UAAU,SAAS;EACzB,IACE,cACC,CAAC,UAAU,SAAS,OAAO,KAAK,SAAS,QAAQ,WAAW,IAE7D,UAAU,MAAM;CAEpB,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,YAAY,cAAsB;EACtC,UAAU,SAAS;GACjB,MAAM,OAAO,OAAO;GAEpB,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,QAAQ,OAAO,OAAO,QAAQ;GAElC,OAAO;EACT,CAAC;CACH;CAEA,MAAM,qBAAqB,MAA0B;EACnD,IAAI,CAAC,EAAE,WAAW;EAClB,cAAc,UAAU,EAAE;CAC5B;CAEA,MAAM,mBAAmB,MAA0B;EACjD,IAAI,cAAc,YAAY,MAAM;EAEpC,MAAM,WAAW,cAAc,UAAU,EAAE;EAE3C,IAAI,KAAK,IAAI,QAAQ,IAAI,gBACvB,SAAS,WAAW,IAAI,IAAI,EAAE;EAGhC,cAAc,UAAU;CAC1B;CAEA,MAAM,4BAA4B;EAChC,cAAc,UAAU;CAC1B;CAEA,MAAM,iBAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAI,CAAC,SAAS,SAAS,EAAE;IACzB;GACF,KAAK,cACH,IAAI,CAAC,QAAQ,SAAS,CAAC;EAE3B;CACF;CAEA,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,KAAKC,+BAAO,iBAAiB,SAAS;EAC9D,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAWA,+BAAO;GAClB,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,UAAU;GACV,WAAW;GACX,MAAK;GACL,wBAAqB;GACrB,cAAY,gBAAgB,OAAO,SAAS;GAV9C,UAAA,CAYE,oBAAC,OAAD;IAAK,WAAWA,+BAAO;IACpB,UAAA,SAAS;GACP,GAFoC,YAEpC,GAEL,qBAAC,OAAD;IAAK,WAAWA,+BAAO;IAAvB,UAAA;KACE,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,UAAU;MAC7C,eAAe,SAAS,EAAE;MAC1B,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA;KAER,oBAAC,UAAD;MAAiB;MAAqB;KAAe,CAAA;KAErD,oBAAC,QAAD;MACE,cAAY,gBAAgB,OAAO,MAAM;MACzC,eAAe,SAAS,CAAC;MACzB,OAAM;MACN,WAAWA,+BAAO;MAClB,YAAY;MAEZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;KACb,CAAA;IACL;GACF,CAAA,CAAA;;CACF,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxGalleryItem.mjs","names":["styles","locales"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type LightBoxGalleryItemProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n  \"LightBoxGalleryItem\",\n  (props) => {\n    const { children } = props;\n\n    const controller = useOverlayController(\"Modal\");\n\n    const propsContext: PropsContext = {\n      ActionGroup: {\n        spacing: \"m\",\n        className: styles.actionGroup,\n        Button: { color: \"light-static\" },\n        tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n      },\n      Image: { className: styles.image },\n    };\n\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <div className={styles.actions}>\n          <Button\n            aria-label={stringFormatter.format(\"close\")}\n            color=\"light-static\"\n            onPress={() => controller.close()}\n          >\n            <IconClose />\n          </Button>\n          <UiComponentTunnelExit\n            id=\"actionGroup\"\n            component=\"LightBoxGalleryItem\"\n          />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n);\n\nexport default LightBoxGalleryItem;\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,sBAAsB,cACjC,wBACC,UAAU;CACT,MAAM,EAAE,aAAa;CAErB,MAAM,aAAa,qBAAqB,OAAO;CAE/C,MAAM,eAA6B;EACjC,aAAa;GACX,SAAS;GACT,WAAWA,+BAAO;GAClB,QAAQ,EAAE,OAAO,eAAe;GAChC,QAAQ;IAAE,IAAI;IAAe,WAAW;GAAsB;EAChE;EACA,OAAO,EAAE,WAAWA,+BAAO,MAAM;CACnC;CAEA,MAAM,kBAAkB,4BAA4BC,gBAAO;CAE3D,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,WAAWD,+BAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IACE,cAAY,gBAAgB,OAAO,OAAO;IAC1C,OAAM;IACN,eAAe,WAAW,MAAM;IAEhC,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA,GACR,oBAAC,uBAAD;IACE,IAAG;IACH,WAAU;GACX,CAAA,CACE;EACe,CAAA,CAAA;;AAE1B,CACF"}
+{"version":3,"file":"LightBoxGalleryItem.mjs","names":["styles","locales"],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useOverlayController } from \"@/lib/hooks\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport type { PropsWithChildren } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\n/* Renders no element of its own, so there is no ref to expose. */\nexport type LightBoxGalleryItemProps = PropsWithChildren &\n  Omit<FlowComponentProps, \"ref\">;\n\n/** @flr-generate all */\nexport const LightBoxGalleryItem = flowComponent(\n  \"LightBoxGalleryItem\",\n  (props) => {\n    const { children } = props;\n\n    const controller = useOverlayController(\"Modal\");\n\n    const propsContext: PropsContext = {\n      ActionGroup: {\n        spacing: \"m\",\n        className: styles.actionGroup,\n        Button: { color: \"light-static\" },\n        tunnel: { id: \"actionGroup\", component: \"LightBoxGalleryItem\" },\n      },\n      Image: { className: styles.image },\n    };\n\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <div className={styles.actions}>\n          <Button\n            aria-label={stringFormatter.format(\"close\")}\n            color=\"light-static\"\n            onPress={() => controller.close()}\n          >\n            <IconClose />\n          </Button>\n          <UiComponentTunnelExit\n            id=\"actionGroup\"\n            component=\"LightBoxGalleryItem\"\n          />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n);\n\nexport default LightBoxGalleryItem;\n"],"mappings":";;;;;;;;;;;;;;AAmBA,IAAa,sBAAsB,cACjC,wBACC,UAAU;CACT,MAAM,EAAE,aAAa;CAErB,MAAM,aAAa,qBAAqB,OAAO;CAE/C,MAAM,eAA6B;EACjC,aAAa;GACX,SAAS;GACT,WAAWA,+BAAO;GAClB,QAAQ,EAAE,OAAO,eAAe;GAChC,QAAQ;IAAE,IAAI;IAAe,WAAW;GAAsB;EAChE;EACA,OAAO,EAAE,WAAWA,+BAAO,MAAM;CACnC;CAEA,MAAM,kBAAkB,4BAA4BC,gBAAO;CAE3D,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,WAAWD,+BAAO;GAAvB,UAAA,CACE,oBAAC,QAAD;IACE,cAAY,gBAAgB,OAAO,OAAO;IAC1C,OAAM;IACN,eAAe,WAAW,MAAM;IAEhC,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA,GACR,oBAAC,uBAAD;IACE,IAAG;IACH,WAAU;GACX,CAAA,CACE;EACe,CAAA,CAAA;;AAE1B,CACF"}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconPending } from "../Icon/components/icons/IconPending.mjs";
@@ -7,34 +8,39 @@ import LoadingSpinner_module_default from "./LoadingSpinner.module.mjs";
 import { useDesignTokens } from "../../lib/theming/hooks/useDesignTokens.mjs";
 import { SkeletonIconSurface } from "../SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs";
 import clsx from "clsx";
-import "react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
 import { useReducedMotion } from "framer-motion";
 // src/components/LoadingSpinner/LoadingSpinner.tsx
 var globalSpinnerTime = performance.now();
 /** @flr-generate all */
-var LoadingSpinner = (props) => {
-	const { className, color = "default", ...rest } = props;
+var LoadingSpinner = flowComponent("LoadingSpinner", (props) => {
+	const { className, color = "default", ref, ...rest } = props;
 	const preferReducedMotion = useReducedMotion();
 	const isSkeleton = useSkeletonMode();
 	const loadingSpinnerTokens = useDesignTokens()["loading-spinner"];
 	const animationDurationMs = preferReducedMotion ? parseInt(loadingSpinnerTokens["transition-duration-slow"].value) : parseInt(loadingSpinnerTokens["transition-duration"].value);
 	const rootClassName = clsx(LoadingSpinner_module_default.loadingSpinner, isAlphaColor(color) && LoadingSpinner_module_default[color], className);
+	const spinnerRef = useMemo(() => mergeRefs(ref, (element) => {
+		if (element) {
+			const phaseMs = (performance.now() - globalSpinnerTime) % animationDurationMs;
+			element.style.setProperty("--animation-delay", `${-phaseMs}ms`);
+		}
+	}), [ref, animationDurationMs]);
 	if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonIconSurface, {
 		className,
-		children: /* @__PURE__ */ jsx(IconPending, { ...rest })
+		children: /* @__PURE__ */ jsx(IconPending, {
+			...rest,
+			ref
+		})
 	});
 	return /* @__PURE__ */ jsx(IconPending, {
 		className: rootClassName,
-		ref: (element) => {
-			if (element) {
-				const phaseMs = (performance.now() - globalSpinnerTime) % animationDurationMs;
-				element.style.setProperty("--animation-delay", `${-phaseMs}ms`);
-			}
-		},
-		...rest
+		...rest,
+		ref: spinnerRef
 	});
-};
+}, { type: "layout" });
 export { LoadingSpinner, LoadingSpinner as default };
 
 //# sourceMappingURL=LoadingSpinner.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.mjs","names":["styles"],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n  const isSkeleton = useSkeletonMode();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  /* A round surface in the spinner's size, without the spinning. */\n  if (isSkeleton) {\n    return (\n      <SkeletonIconSurface className={className}>\n        <IconPending {...rest} />\n      </SkeletonIconSurface>\n    );\n  }\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,sBAAsB,iBAAiB;CAC7C,MAAM,aAAa,gBAAgB;CAGnC,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,aAAa,KAAK,KAAKA,8BAAO,QAC9B,SACF;CAGA,IAAI,YACF,OACE,oBAAC,qBAAD;EAAgC;EAC9B,UAAA,oBAAC,aAAD,EAAa,GAAI,KAAO,CAAA;CACL,CAAA;CAIzB,OACE,oBAAC,aAAD;EACE,WAAW;EACX,MAAM,YAAY;GAChB,IAAI,SAAS;IAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;IAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;GAChE;EACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"LoadingSpinner.mjs","names":["styles"],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useMemo } from \"react\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner = flowComponent(\n  \"LoadingSpinner\",\n  (props) => {\n    const { className, color = \"default\", ref, ...rest } = props;\n\n    const preferReducedMotion = useReducedMotion();\n    const isSkeleton = useSkeletonMode();\n\n    const designTokens = useDesignTokens();\n    const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n    const animationDurationMs = preferReducedMotion\n      ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n      : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n    const rootClassName = clsx(\n      styles.loadingSpinner,\n      isAlphaColor(color) && styles[color],\n      className,\n    );\n\n    const spinnerRef = useMemo(\n      () =>\n        mergeRefs(ref, (element) => {\n          if (element) {\n            const elapsedMs = performance.now() - globalSpinnerTime;\n            const phaseMs = elapsedMs % animationDurationMs;\n\n            element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n          }\n        }),\n      [ref, animationDurationMs],\n    );\n\n    /* A round surface in the spinner's size, without the spinning. */\n    if (isSkeleton) {\n      return (\n        <SkeletonIconSurface className={className}>\n          <IconPending {...rest} ref={ref} />\n        </SkeletonIconSurface>\n      );\n    }\n\n    return <IconPending className={rootClassName} {...rest} ref={spinnerRef} />;\n  },\n  /* The spinner stands in for an icon: `Icon` props contexts (e.g. the size\n     `IllustratedMessage` sets) keep reaching its inner icon. */\n  { type: \"layout\" },\n);\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,iBAAiB,cAC5B,mBACC,UAAU;CACT,MAAM,EAAE,WAAW,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEvD,MAAM,sBAAsB,iBAAiB;CAC7C,MAAM,aAAa,gBAAgB;CAGnC,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,aAAa,KAAK,KAAKA,8BAAO,QAC9B,SACF;CAEA,MAAM,aAAa,cAEf,UAAU,MAAM,YAAY;EAC1B,IAAI,SAAS;GAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;GAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;EAChE;CACF,CAAC,GACH,CAAC,KAAK,mBAAmB,CAC3B;CAGA,IAAI,YACF,OACE,oBAAC,qBAAD;EAAgC;EAC9B,UAAA,oBAAC,aAAD;GAAa,GAAI;GAAW;EAAM,CAAA;CACf,CAAA;CAIzB,OAAO,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EAAM,KAAK;CAAa,CAAA;AAC5E,GAGA,EAAE,MAAM,SAAS,CACnB"}

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

@@ -16,7 +16,7 @@ import * as Aria from "react-aria-components";
 // src/components/Message/Message.tsx
 /** @flr-generate all */
 var Message = flowComponent("Message", (props) => {
-	const { type = "responder", children, className, color, elementType = "article" } = props;
+	const { type = "responder", children, className, color, elementType = "article", ref } = props;
 	const Element = elementType;
 	const rootClassName = clsx(Message_module_default.message, Message_module_default[type], className);
 	const style = color ? { "--message-background": color } : void 0;
@@ -78,6 +78,7 @@ var Message = flowComponent("Message", (props) => {
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Element, {
+			ref,
 			className: rootClassName,
 			style,
 			children

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

@@ -1 +1 @@
-{"version":3,"file":"Message.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface MessageProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    PropsWithElementType<\"article\" | \"li\"> {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  /** A custom background color of the message as a CSS color value. */\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const {\n    type = \"responder\",\n    children,\n    className,\n    color,\n    elementType = \"article\",\n  } = props;\n\n  const Element = elementType;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style: CSSProperties | undefined = color\n    ? { \"--message-background\": color }\n    : undefined;\n\n  const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n  const senderContext: PropsContext[\"Combine\"] = {\n    wrapWith: <ClearPropsContext />,\n    className: styles.user,\n    Avatar: { Initials: { \"aria-hidden\": true } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tipBorder} aria-hidden />\n            <div className={styles.tip} aria-hidden />\n            {/* The fragment hides raw text from `Content`'s own text rule. */}\n            <SkeletonRawText>{props.children}</SkeletonRawText>\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n          \"aria-label\": formatter.format(\"options\"),\n        },\n      },\n      Text: { className: styles.date },\n      Combine: senderContext,\n      // Deprecated alias of Combine — keep it arranged the same way.\n      Align: senderContext,\n      children: dynamic((props) => (\n        <>\n          <Aria.VisuallyHidden>\n            {formatter.format(\"headerLabel\")}\n          </Aria.VisuallyHidden>\n          {props.children}\n        </>\n      )),\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      preserveOrder: true,\n      size: \"s\",\n      className: styles.actionGroup,\n      Button: {\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} style={style}>\n        {children}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAKA,uBAAO,SAASA,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4BC,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAWD,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAAE,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWF,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAK,eAAA;KAAa,CAAA;KAEzC,oBAAC,iBAAD,EAAA,UAAkB,MAAM,SAA0B,CAAA;IAClD,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAWA,uBAAO;GAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAWA,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAWF,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAWA,uBAAO;GAClB,QAAQ,EACN,WAAWA,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Message.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface MessageProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement>,\n    PropsWithElementType<\"article\" | \"li\"> {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  /** A custom background color of the message as a CSS color value. */\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const {\n    type = \"responder\",\n    children,\n    className,\n    color,\n    elementType = \"article\",\n    ref,\n  } = props;\n\n  const Element = elementType;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style: CSSProperties | undefined = color\n    ? { \"--message-background\": color }\n    : undefined;\n\n  const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n  const senderContext: PropsContext[\"Combine\"] = {\n    wrapWith: <ClearPropsContext />,\n    className: styles.user,\n    Avatar: { Initials: { \"aria-hidden\": true } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tipBorder} aria-hidden />\n            <div className={styles.tip} aria-hidden />\n            {/* The fragment hides raw text from `Content`'s own text rule. */}\n            <SkeletonRawText>{props.children}</SkeletonRawText>\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n          \"aria-label\": formatter.format(\"options\"),\n        },\n      },\n      Text: { className: styles.date },\n      Combine: senderContext,\n      // Deprecated alias of Combine — keep it arranged the same way.\n      Align: senderContext,\n      children: dynamic((props) => (\n        <>\n          <Aria.VisuallyHidden>\n            {formatter.format(\"headerLabel\")}\n          </Aria.VisuallyHidden>\n          {props.children}\n        </>\n      )),\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      preserveOrder: true,\n      size: \"s\",\n      className: styles.actionGroup,\n      Button: {\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element ref={ref as never} className={rootClassName} style={style}>\n        {children}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,WACd,QACE;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAKA,uBAAO,SAASA,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4BC,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAWD,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAAE,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWF,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAK,eAAA;KAAa,CAAA;KAEzC,oBAAC,iBAAD,EAAA,UAAkB,MAAM,SAA0B,CAAA;IAClD,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAWA,uBAAO;GAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAWA,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAWF,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAWA,uBAAO;GAClB,QAAQ,EACN,WAAWA,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAc;GAAc,WAAW;GAAsB;GAC1D;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}

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

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 // src/components/MessageThread/MessageThread.tsx
 /** @flr-generate all */
 var MessageThread = flowComponent("MessageThread", (props) => {
-	const { children, className } = props;
+	const { children, className, ref } = props;
 	const rootClassName = clsx(MessageThread_module_default.messageThread, className);
 	const propsContext = { Message: {
 		className: dynamic((props) => {
@@ -20,6 +20,7 @@ var MessageThread = flowComponent("MessageThread", (props) => {
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx("ul", {
+			ref,
 			className: rootClassName,
 			children
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.mjs","names":["styles"],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          styles.message,\n          styles[props.type ?? \"responder\"],\n          props.className,\n        );\n      }),\n      elementType: \"li\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ul className={rootClassName}>{children}</ul>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACLA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,cACrB,MAAM,SACR;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAI,WAAW;GAAgB;EAAa,CAAA;CACxB,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"MessageThread.mjs","names":["styles"],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps<HTMLUListElement>;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className, ref } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          styles.message,\n          styles[props.type ?? \"responder\"],\n          props.className,\n        );\n      }),\n      elementType: \"li\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ul ref={ref} className={rootClassName}>\n        {children}\n      </ul>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACLA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,cACrB,MAAM,SACR;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAS;GAAK,WAAW;GACtB;EACC,CAAA;CACgB,CAAA;AAE1B,CAAC"}