@mittwald/flow-react-components 1.6.0-next.14 → 1.6.0-next.15

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

@@ -24,19 +24,19 @@ var ActionGroup = flowComponent("ActionGroup", (props) => {
 			slot: dynamic((props) => getActionGroupSlot(props)),
 			className: dynamic((props) => {
 				const slot = getActionGroupSlot(props);
-				return clsx(props.className, styleClassname(ActionGroup_module_default, slot));
+				return clsx(styleClassname(ActionGroup_module_default, slot), props.className);
 			})
 		},
 		Switch: {
 			labelPosition: "leading",
 			className: dynamic((props) => {
-				return clsx(props.className, props.slot && styleClassname(ActionGroup_module_default, props.slot));
+				return clsx(props.slot && styleClassname(ActionGroup_module_default, props.slot), props.className);
 			})
 		},
 		Link: {
 			size,
 			className: dynamic((props) => {
-				return clsx(props.className, props.slot && styleClassname(ActionGroup_module_default, props.slot));
+				return clsx(props.slot && styleClassname(ActionGroup_module_default, props.slot), props.className);
 			})
 		}
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"s\" */\n  spacing?: \"s\" | \"m\";\n  /** The size of the buttons and links inside the action group. @default \"m\" */\n  size?: ButtonProps[\"size\"];\n  /**\n   * When set, the buttons are not sorted into the slots `primary`, `secondary`\n   * and `abort` but stay in source order. Use it when the actions have no such\n   * hierarchy, e.g. a row of equal actions or icon buttons. @default false\n   */\n  preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      spacing = \"s\",\n      size,\n      preserveOrder = false,\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(\n      styles.actionGroup,\n      styles[spacing],\n      !preserveOrder && styles.sorted,\n      className,\n    );\n\n    const propsContext: PropsContext = preserveOrder\n      ? {\n          Button: { size },\n          Switch: {\n            labelPosition: \"leading\",\n          },\n          Link: { size },\n        }\n      : {\n          Button: {\n            size,\n            slot: dynamic((props) => getActionGroupSlot(props)),\n            className: dynamic((props) => {\n              const slot = getActionGroupSlot(props);\n              return clsx(props.className, styleClassname(styles, slot));\n            }),\n          },\n          Switch: {\n            labelPosition: \"leading\",\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n          Link: {\n            size,\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n        };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[preserveOrder, size]}\n        >\n          <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n            {children}\n          </div>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,UACP,CAAC,iBAAiBA,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,MAAM,WAAW,eAAeA,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"ActionGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"s\" */\n  spacing?: \"s\" | \"m\";\n  /** The size of the buttons and links inside the action group. @default \"m\" */\n  size?: ButtonProps[\"size\"];\n  /**\n   * When set, the buttons are not sorted into the slots `primary`, `secondary`\n   * and `abort` but stay in source order. Use it when the actions have no such\n   * hierarchy, e.g. a row of equal actions or icon buttons. @default false\n   */\n  preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      spacing = \"s\",\n      size,\n      preserveOrder = false,\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(\n      styles.actionGroup,\n      styles[spacing],\n      !preserveOrder && styles.sorted,\n      className,\n    );\n\n    const propsContext: PropsContext = preserveOrder\n      ? {\n          Button: { size },\n          Switch: {\n            labelPosition: \"leading\",\n          },\n          Link: { size },\n        }\n      : {\n          Button: {\n            size,\n            slot: dynamic((props) => getActionGroupSlot(props)),\n            className: dynamic((props) => {\n              const slot = getActionGroupSlot(props);\n              return clsx(styleClassname(styles, slot), props.className);\n            }),\n          },\n          Switch: {\n            labelPosition: \"leading\",\n            className: dynamic((props) => {\n              return clsx(\n                props.slot && styleClassname(styles, props.slot),\n                props.className,\n              );\n            }),\n          },\n          Link: {\n            size,\n            className: dynamic((props) => {\n              return clsx(\n                props.slot && styleClassname(styles, props.slot),\n                props.className,\n              );\n            }),\n          },\n        };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[preserveOrder, size]}\n        >\n          <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n            {children}\n          </div>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,UACP,CAAC,iBAAiBA,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,eAAeA,4BAAQ,IAAI,GAAG,MAAM,SAAS;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,GAC/C,MAAM,SACR;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,GAC/C,MAAM,SACR;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -33,12 +33,12 @@ var Checkbox = flowComponent("Checkbox", (props) => {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		...skeletonProps,
-		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
+		className: clsx(wrapperProps.className, Checkbox_module_default.checkbox, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
 			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
-			className: clsx(inputClassName, Checkbox_module_default.input),
+			className: clsx(Checkbox_module_default.input, inputClassName),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: fieldPropsContext,
 				children: [renderIcon(isSelected, isIndeterminate), /* @__PURE__ */ jsx(SkeletonRawText, { children })]

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(styles.checkbox, className, wrapperProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAKA,wBAAO,UAAU,WAAW,aAAa,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgBA,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(wrapperProps.className, styles.checkbox, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(styles.input, inputClassName)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,aAAa,WAAWA,wBAAO,UAAU,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAKA,wBAAO,OAAO,cAAc;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -20,10 +20,10 @@ var CodeBlock = (props) => {
 	const editorRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
 	const isSkeleton = useSkeletonMode();
-	const rootClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton, className);
+	const baseClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton);
 	const id = useId();
 	if (!code) return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, CodeBlock_module_default.withChildren),
+		className: clsx(baseClassName, CodeBlock_module_default.withChildren, className),
 		inert: isSkeleton || void 0,
 		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(SkeletonModeReset, { children }) }) })
 	});
@@ -48,7 +48,7 @@ var CodeBlock = (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded),
+		className: clsx(baseClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded, className),
 		style: heightVariables,
 		onTransitionEnd: (event) => {
 			if (event.propertyName === "max-height") setExpandedHeight(void 0);

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut, getDonutSize } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  const isSkeleton = useSkeletonMode();\n  const donutSize = getDonutSize(size);\n\n  const displayedValue = segmentsTotalValue ?? value;\n\n  /* No svg: the donut is one round surface in its size. The legend follows\n     the skeleton rules of its items. */\n  const skeletonDonut = (\n    <span\n      className={clsx(styles.donutChart, styles.skeleton, className)}\n      style={{ width: donutSize, height: donutSize }}\n      aria-hidden\n      inert\n    />\n  );\n\n  const donut = (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={displayedValue}\n      {...rest}\n    >\n      <Donut\n        value={displayedValue}\n        segments={segments}\n        size={size}\n        maxValue={maxValue}\n      />\n      <DonutChartValue value={displayedValue} formatOptions={formatOptions}>\n        {children}\n      </DonutChartValue>\n    </Aria.ProgressBar>\n  );\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        {isSkeleton ? skeletonDonut : donut}\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;;AAuCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,SAAS,OAAOA,0BAAO,WACvBA,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,MAAM,aAAa,gBAAgB;CACnC,MAAM,YAAY,aAAa,IAAI;CAEnC,MAAM,iBAAiB,sBAAsB;CAI7C,MAAM,gBACJ,oBAAC,QAAD;EACE,WAAW,KAAKA,0BAAO,YAAYA,0BAAO,UAAU,SAAS;EAC7D,OAAO;GAAE,OAAO;GAAW,QAAQ;EAAU;EAC7C,eAAA;EACA,OAAA;CACD,CAAA;CAGH,MAAM,QACJ,qBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO;EACP,GAAI;EAHN,UAAA,CAKE,oBAAC,OAAD;GACE,OAAO;GACG;GACJ;GACI;EACX,CAAA,GACD,oBAAC,iBAAD;GAAiB,OAAO;GAA+B;GACpD;EACc,CAAA,CACD;;CAGpB,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAKA,0BAAO,qBAAqBA,0BAAO,eAAe;GAAvE,UAAA,CACG,aAAa,gBAAgB,OAE7B,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}
+{"version":3,"file":"DonutChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut, getDonutSize } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /** Whether the legend component is shown when segments are used. @default true */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  const isSkeleton = useSkeletonMode();\n  const donutSize = getDonutSize(size);\n\n  const displayedValue = segmentsTotalValue ?? value;\n\n  /* No svg: the donut is one round surface in its size. The legend follows\n     the skeleton rules of its items. */\n  const skeletonDonut = (\n    <span\n      className={clsx(styles.donutChart, styles.skeleton, className)}\n      style={{ width: donutSize, height: donutSize }}\n      aria-hidden\n      inert\n    />\n  );\n\n  const donut = (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={displayedValue}\n      {...rest}\n    >\n      <Donut\n        value={displayedValue}\n        segments={segments}\n        size={size}\n        maxValue={maxValue}\n      />\n      <DonutChartValue value={displayedValue} formatOptions={formatOptions}>\n        {children}\n      </DonutChartValue>\n    </Aria.ProgressBar>\n  );\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        {isSkeleton ? skeletonDonut : donut}\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;;AAoCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,SAAS,OAAOA,0BAAO,WACvBA,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,MAAM,aAAa,gBAAgB;CACnC,MAAM,YAAY,aAAa,IAAI;CAEnC,MAAM,iBAAiB,sBAAsB;CAI7C,MAAM,gBACJ,oBAAC,QAAD;EACE,WAAW,KAAKA,0BAAO,YAAYA,0BAAO,UAAU,SAAS;EAC7D,OAAO;GAAE,OAAO;GAAW,QAAQ;EAAU;EAC7C,eAAA;EACA,OAAA;CACD,CAAA;CAGH,MAAM,QACJ,qBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO;EACP,GAAI;EAHN,UAAA,CAKE,oBAAC,OAAD;GACE,OAAO;GACG;GACJ;GACI;EACX,CAAA,GACD,oBAAC,iBAAD;GAAiB,OAAO;GAA+B;GACpD;EACc,CAAA,CACD;;CAGpB,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAKA,0BAAO,qBAAqBA,0BAAO,eAAe;GAAvE,UAAA,CACG,aAAa,gBAAgB,OAE7B,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\n\nexport interface ListSummaryProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default: \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { children, position = \"top\", ref } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        ref={ref}\n        className={clsx(styles.listSummary, styles.bottom)}\n        {...props}\n      >\n        {children}\n      </footer>\n    );\n  }\n\n  return (\n    <header\n      ref={ref}\n      className={clsx(styles.listSummary, styles.top)}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ;CAE5C,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,MAAM;EACjD,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,GAAG;EAC9C,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\n\nexport interface ListSummaryProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { children, position = \"top\", ref } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        ref={ref}\n        className={clsx(styles.listSummary, styles.bottom)}\n        {...props}\n      >\n        {children}\n      </footer>\n    );\n  }\n\n  return (\n    <header\n      ref={ref}\n      className={clsx(styles.listSummary, styles.top)}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ;CAE5C,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,MAAM;EACjD,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,GAAG;EAC9C,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}

package/dist/js/packages/components/src/components/Markdown/components/SkeletonBlocks.mjs

@@ -18,7 +18,7 @@ var SkeletonBlockText = (props) => {
 	const outerState = useContext(skeletonModeContext);
 	return /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(Text, {
 		...rest,
-		className: clsx(className, outerState.isEnabled && Markdown_module_default.skeletonBlock),
+		className: clsx(outerState.isEnabled && Markdown_module_default.skeletonBlock, className),
 		children: /* @__PURE__ */ jsx(skeletonModeContext.Provider, {
 			value: outerState,
 			children

package/dist/js/packages/components/src/components/Markdown/components/SkeletonBlocks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBlocks.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Markdown/components/SkeletonBlocks.tsx"],"sourcesContent":["import {\n  Children,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Text, type TextProps } from \"@/components/Text\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport {\n  SkeletonModeReset,\n  skeletonModeContext,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"../Markdown.module.scss\";\n\n/**\n * A text bar is an inline element and cannot wrap blocks. Markdown puts lists\n * and quotes into a `Text`, so in `SkeletonMode` this `Text` renders as real\n * text, and the blocks inside follow the skeleton rules on their own.\n */\nexport const SkeletonBlockText: FC<TextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const outerState = useContext(skeletonModeContext);\n\n  return (\n    <SkeletonModeReset>\n      <Text\n        {...rest}\n        className={clsx(\n          className,\n          outerState.isEnabled && styles.skeletonBlock,\n        )}\n      >\n        <skeletonModeContext.Provider value={outerState}>\n          {children}\n        </skeletonModeContext.Provider>\n      </Text>\n    </SkeletonModeReset>\n  );\n};\n\nconst blockTagNames = new Set([\n  \"blockquote\",\n  \"div\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"hr\",\n  \"ol\",\n  \"p\",\n  \"pre\",\n  \"table\",\n  \"ul\",\n]);\n\n/** Whether a rendered markdown element is a block — a nested list, a paragraph. */\nconst isBlock = (child: ReactNode): boolean => {\n  if (!isValidElement<{ node?: { tagName?: string } }>(child)) {\n    return false;\n  }\n\n  const tagName =\n    typeof child.type === \"string\" ? child.type : child.props.node?.tagName;\n\n  return tagName !== undefined && blockTagNames.has(tagName);\n};\n\nconst isBlank = (child: ReactNode) =>\n  typeof child === \"string\" && child.trim() === \"\";\n\n/**\n * The content of a list item or a table cell: each run of inline content\n * becomes one text bar, blocks inside — a nested list, the paragraphs of a\n * loose list — keep their own skeleton rules. Outside an enabled `SkeletonMode`\n * it renders its children unchanged.\n */\nexport const SkeletonInlineContent: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  const content: ReactNode[] = [];\n  let run: ReactNode[] = [];\n\n  /* The line breaks around a nested list stay outside the bar. */\n  const endRun = () => {\n    const start = run.findIndex((child) => !isBlank(child));\n    const end = run.findLastIndex((child) => !isBlank(child)) + 1;\n\n    if (start === -1) {\n      content.push(...run);\n    } else {\n      content.push(\n        ...run.slice(0, start),\n        <SkeletonTextContent key={content.length} defaultWidth=\"8em\">\n          {run.slice(start, end)}\n        </SkeletonTextContent>,\n        ...run.slice(end),\n      );\n    }\n\n    run = [];\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isBlock(child)) {\n      endRun();\n      content.push(child);\n    } else {\n      run.push(child);\n    }\n  }\n\n  endRun();\n\n  return content;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,qBAAoC,UAAU;CACzD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,aAAa,WAAW,mBAAmB;CAEjD,OACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,KACT,WACA,WAAW,aAAaA,wBAAO,aACjC;EAEA,UAAA,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAClC;EAC2B,CAAA;CAC1B,CAAA,EACW,CAAA;AAEvB;AAEA,IAAM,gCAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,IAAM,WAAW,UAA8B;CAC7C,IAAI,CAAC,eAAgD,KAAK,GACxD,OAAO;CAGT,MAAM,UACJ,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM,MAAM;CAElE,OAAO,YAAY,KAAA,KAAa,cAAc,IAAI,OAAO;AAC3D;AAEA,IAAM,WAAW,UACf,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM;;;;;;;AAQhD,IAAa,yBAAgD,UAAU;CACrE,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,MAAM,UAAuB,CAAC;CAC9B,IAAI,MAAmB,CAAC;CAGxB,MAAM,eAAe;EACnB,MAAM,QAAQ,IAAI,WAAW,UAAU,CAAC,QAAQ,KAAK,CAAC;EACtD,MAAM,MAAM,IAAI,eAAe,UAAU,CAAC,QAAQ,KAAK,CAAC,IAAI;EAE5D,IAAI,UAAU,IACZ,QAAQ,KAAK,GAAG,GAAG;OAEnB,QAAQ,KACN,GAAG,IAAI,MAAM,GAAG,KAAK,GACrB,oBAAC,qBAAD;GAA0C,cAAa;GACpD,UAAA,IAAI,MAAM,OAAO,GAAG;EACF,GAFK,QAAQ,MAEb,GACrB,GAAG,IAAI,MAAM,GAAG,CAClB;EAGF,MAAM,CAAC;CACT;CAEA,KAAK,MAAM,SAAS,SAAS,QAAQ,QAAQ,GAC3C,IAAI,QAAQ,KAAK,GAAG;EAClB,OAAO;EACP,QAAQ,KAAK,KAAK;CACpB,OACE,IAAI,KAAK,KAAK;CAIlB,OAAO;CAEP,OAAO;AACT"}
+{"version":3,"file":"SkeletonBlocks.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Markdown/components/SkeletonBlocks.tsx"],"sourcesContent":["import {\n  Children,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Text, type TextProps } from \"@/components/Text\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport {\n  SkeletonModeReset,\n  skeletonModeContext,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"../Markdown.module.scss\";\n\n/**\n * A text bar is an inline element and cannot wrap blocks. Markdown puts lists\n * and quotes into a `Text`, so in `SkeletonMode` this `Text` renders as real\n * text, and the blocks inside follow the skeleton rules on their own.\n */\nexport const SkeletonBlockText: FC<TextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const outerState = useContext(skeletonModeContext);\n\n  return (\n    <SkeletonModeReset>\n      <Text\n        {...rest}\n        className={clsx(\n          outerState.isEnabled && styles.skeletonBlock,\n          className,\n        )}\n      >\n        <skeletonModeContext.Provider value={outerState}>\n          {children}\n        </skeletonModeContext.Provider>\n      </Text>\n    </SkeletonModeReset>\n  );\n};\n\nconst blockTagNames = new Set([\n  \"blockquote\",\n  \"div\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"hr\",\n  \"ol\",\n  \"p\",\n  \"pre\",\n  \"table\",\n  \"ul\",\n]);\n\n/** Whether a rendered markdown element is a block — a nested list, a paragraph. */\nconst isBlock = (child: ReactNode): boolean => {\n  if (!isValidElement<{ node?: { tagName?: string } }>(child)) {\n    return false;\n  }\n\n  const tagName =\n    typeof child.type === \"string\" ? child.type : child.props.node?.tagName;\n\n  return tagName !== undefined && blockTagNames.has(tagName);\n};\n\nconst isBlank = (child: ReactNode) =>\n  typeof child === \"string\" && child.trim() === \"\";\n\n/**\n * The content of a list item or a table cell: each run of inline content\n * becomes one text bar, blocks inside — a nested list, the paragraphs of a\n * loose list — keep their own skeleton rules. Outside an enabled `SkeletonMode`\n * it renders its children unchanged.\n */\nexport const SkeletonInlineContent: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  const content: ReactNode[] = [];\n  let run: ReactNode[] = [];\n\n  /* The line breaks around a nested list stay outside the bar. */\n  const endRun = () => {\n    const start = run.findIndex((child) => !isBlank(child));\n    const end = run.findLastIndex((child) => !isBlank(child)) + 1;\n\n    if (start === -1) {\n      content.push(...run);\n    } else {\n      content.push(\n        ...run.slice(0, start),\n        <SkeletonTextContent key={content.length} defaultWidth=\"8em\">\n          {run.slice(start, end)}\n        </SkeletonTextContent>,\n        ...run.slice(end),\n      );\n    }\n\n    run = [];\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isBlock(child)) {\n      endRun();\n      content.push(child);\n    } else {\n      run.push(child);\n    }\n  }\n\n  endRun();\n\n  return content;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,qBAAoC,UAAU;CACzD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,aAAa,WAAW,mBAAmB;CAEjD,OACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,KACT,WAAW,aAAaA,wBAAO,eAC/B,SACF;EAEA,UAAA,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAClC;EAC2B,CAAA;CAC1B,CAAA,EACW,CAAA;AAEvB;AAEA,IAAM,gCAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,IAAM,WAAW,UAA8B;CAC7C,IAAI,CAAC,eAAgD,KAAK,GACxD,OAAO;CAGT,MAAM,UACJ,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM,MAAM;CAElE,OAAO,YAAY,KAAA,KAAa,cAAc,IAAI,OAAO;AAC3D;AAEA,IAAM,WAAW,UACf,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM;;;;;;;AAQhD,IAAa,yBAAgD,UAAU;CACrE,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,MAAM,UAAuB,CAAC;CAC9B,IAAI,MAAmB,CAAC;CAGxB,MAAM,eAAe;EACnB,MAAM,QAAQ,IAAI,WAAW,UAAU,CAAC,QAAQ,KAAK,CAAC;EACtD,MAAM,MAAM,IAAI,eAAe,UAAU,CAAC,QAAQ,KAAK,CAAC,IAAI;EAE5D,IAAI,UAAU,IACZ,QAAQ,KAAK,GAAG,GAAG;OAEnB,QAAQ,KACN,GAAG,IAAI,MAAM,GAAG,KAAK,GACrB,oBAAC,qBAAD;GAA0C,cAAa;GACpD,UAAA,IAAI,MAAM,OAAO,GAAG;EACF,GAFK,QAAQ,MAEb,GACrB,GAAG,IAAI,MAAM,GAAG,CAClB;EAGF,MAAM,CAAC;CACT;CAEA,KAAK,MAAM,SAAS,SAAS,QAAQ,QAAQ,GAC3C,IAAI,QAAQ,KAAK,GAAG;EAClB,OAAO;EACP,QAAQ,KAAK,KAAK;CACpB,OACE,IAAI,KAAK,KAAK;CAIlB,OAAO;CAEP,OAAO;AACT"}

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

@@ -13,7 +13,7 @@ var MessageThread = flowComponent("MessageThread", (props) => {
 	const rootClassName = clsx(MessageThread_module_default.messageThread, className);
 	const propsContext = { Message: {
 		className: dynamic((props) => {
-			return clsx(props.className, MessageThread_module_default.message, MessageThread_module_default[props.type ?? "responder"]);
+			return clsx(MessageThread_module_default.message, MessageThread_module_default[props.type ?? "responder"], props.className);
 		}),
 		elementType: "li"
 	} };

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          props.className,\n          styles.message,\n          styles[props.type ?? \"responder\"],\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,KACL,MAAM,WACNA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,YACvB;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;\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"}

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

@@ -28,6 +28,7 @@ var Modal = flowComponent("Modal", (props) => {
 	const keyboardVisible = useVirtualKeyboardVisible();
 	const rootClassName = clsx(offCanvas ? Modal_module_default.offCanvas : Modal_module_default.modal, Modal_module_default[`size-${size}`], offCanvasOrientation === "left" && Modal_module_default["left"], keyboardVisible && Modal_module_default.keyboardVisible, className);
 	const generatedId = useId();
+	const closeButtonClassName = clsx(Modal_module_default.closeButton, showCloseButton === true && Modal_module_default.alwaysVisible, showCloseButton === false && Modal_module_default.alwaysHidden);
 	const header = (children) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DivView, {
 		className: Modal_module_default.headerTitle,
 		children
@@ -37,7 +38,7 @@ var Modal = flowComponent("Modal", (props) => {
 			variant: "plain",
 			color: "secondary",
 			"aria-label": stringFormatter.format("close"),
-			className: clsx(Modal_module_default.closeButton, showCloseButton === true ? Modal_module_default.alwaysVisible : showCloseButton === false ? Modal_module_default.alwaysHidden : void 0),
+			className: closeButtonClassName,
 			children: /* @__PURE__ */ jsx(IconClose, {})
 		})
 	}) }) })] });

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the close button should be visible */\n  showCloseButton?: boolean;\n  /**\n   * Whether closing the modal must be confirmed – use it to protect unsaved\n   * changes. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\n   */\n  confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    showCloseButton,\n    ...overlayProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n  // On mobile the header/footer are docked (sticky) while at rest, but flow\n  // normally while the on-screen keyboard is open so the content gets the full\n  // available space (see Modal.module.scss). #2423\n  const keyboardVisible = useVirtualKeyboardVisible();\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    keyboardVisible && styles.keyboardVisible,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const header = (children: ReactNode) => (\n    <>\n      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\n          <Action closeModal={{ bypassConfirmation: true }}>\n            <ButtonView\n              variant=\"plain\"\n              color=\"secondary\"\n              aria-label={stringFormatter.format(\"close\")}\n              className={clsx(\n                styles.closeButton,\n                showCloseButton === true\n                  ? styles.alwaysVisible\n                  : showCloseButton === false\n                    ? styles.alwaysHidden\n                    : undefined,\n              )}\n            >\n              <IconClose />\n            </ButtonView>\n          </Action>\n        </ClearPropsContextView>\n      </ClearPropsContext>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n      hideSeparator: true,\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      children: dynamic((props) => header(props.children)),\n      id: generatedId,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      aria-labelledby={generatedId}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n      <ConfirmUnsavedChangesModal />\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/*.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n  OverlayProps,\n  \"isOpen\" | \"isDefaultOpen\" | \"onOpen\" | \"onClose\" | \"onOpenChange\"\n>;\n\nexport interface ModalProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName,\n    SupportedOverlayProps {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the close button should be visible */\n  showCloseButton?: boolean;\n  /**\n   * Whether closing the modal must be confirmed – use it to protect unsaved\n   * changes. `false` does not switch off the confirmation of a dirty `Form`\n   * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n   * `Form` for that.\n   */\n  confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    showCloseButton,\n    ...overlayProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n  // On mobile the header/footer are docked (sticky) while at rest, but flow\n  // normally while the on-screen keyboard is open so the content gets the full\n  // available space (see Modal.module.scss). #2423\n  const keyboardVisible = useVirtualKeyboardVisible();\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    keyboardVisible && styles.keyboardVisible,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const closeButtonClassName = clsx(\n    styles.closeButton,\n    showCloseButton === true && styles.alwaysVisible,\n    showCloseButton === false && styles.alwaysHidden,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      <DivView className={styles.headerTitle}>{children}</DivView>\n      <ClearPropsContext>\n        <ClearPropsContextView>\n          <Action closeModal={{ bypassConfirmation: true }}>\n            <ButtonView\n              variant=\"plain\"\n              color=\"secondary\"\n              aria-label={stringFormatter.format(\"close\")}\n              className={closeButtonClassName}\n            >\n              <IconClose />\n            </ButtonView>\n          </Action>\n        </ClearPropsContextView>\n      </ClearPropsContext>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n      hideSeparator: true,\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      children: dynamic((props) => header(props.children)),\n      id: generatedId,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n      Action: {\n        closeModal: dynamic((props) => {\n          if (props.closeModal === undefined) {\n            return;\n          }\n          if (props.closeModal === true) {\n            return { bypassConfirmation: true };\n          }\n          return {\n            bypassConfirmation: true,\n            ...props.closeModal,\n          };\n        }),\n        closeOverlay: dynamic((props) => {\n          const { closeOverlay } = props;\n          if (closeOverlay === undefined || closeOverlay === false) {\n            return closeOverlay;\n          }\n          // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n          // unset – the options object means the same thing.\n          if (closeOverlay === true) {\n            return { bypassConfirmation: true };\n          }\n          if (\n            closeOverlay instanceof OverlayController ||\n            typeof closeOverlay === \"string\"\n          ) {\n            return {\n              bypassConfirmation: true,\n              overlay: closeOverlay,\n            };\n          }\n          return {\n            bypassConfirmation: true,\n            ...closeOverlay,\n          };\n        }),\n      },\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      aria-labelledby={generatedId}\n      {...overlayProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n      <ConfirmUnsavedChangesModal />\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"mappings":"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"}

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

@@ -7,7 +7,6 @@ import { IconChevronUp } from "../Icon/components/icons/IconChevronUp.mjs";
 import { IconMinus } from "../Icon/components/icons/IconMinus.mjs";
 import { IconPlus } from "../Icon/components/icons/IconPlus.mjs";
 import { Button } from "../Button/Button.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import NumberField_module_default from "./NumberField.module.mjs";
@@ -22,14 +21,14 @@ var NumberField = flowComponent("NumberField", (props) => {
 	const { children, className, isWheelDisabled = true, ref, unit, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, NaN);
 	const unitId = useId();
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "NumberField");
-	const rootClassName = clsx(FormField_module_default.formField, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.NumberField, {
 		...rest,
 		...skeletonProps,
 		isWheelDisabled,
 		"aria-labelledby": unit ? [ariaLabelledBy, unitId].filter(Boolean).join(" ") : ariaLabelledBy,
 		"aria-describedby": controlProps["aria-describedby"],
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: fieldPropsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsx(FieldErrorView, {})]

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren, useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { NumberFieldUnit } from \"./components/NumberFieldUnit\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * A unit displayed after the number, for units `Intl.NumberFormat` does not\n   * support (e.g. \"MiB\"). For supported units, use `formatOptions` instead.\n   */\n  unit?: string;\n}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    unit,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const unitId = useId();\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      {...skeletonProps}\n      isWheelDisabled={isWheelDisabled}\n      aria-labelledby={\n        unit\n          ? [ariaLabelledBy, unitId].filter(Boolean).join(\" \")\n          : ariaLabelledBy\n      }\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <div className={styles.inputContainer}>\n          <Aria.Input className={styles.input} ref={ref} />\n          {unit && <NumberFieldUnit id={unitId} unit={unit} />}\n        </div>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,MACA,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,SAAS,MAAM;CAErB,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACa;EACjB,mBACE,OACI,CAAC,gBAAgB,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,IACjD;EAEN,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EAVvD,UAAA,CAYE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAWC,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAWA,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,qBAAC,OAAD;KAAK,WAAWA,2BAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,WAAWA,2BAAO;MAAY;KAAM,CAAA,GAC/C,QAAQ,oBAAC,iBAAD;MAAiB,IAAI;MAAc;KAAO,CAAA,CAChD;;IACL,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAWA,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}
+{"version":3,"file":"NumberField.mjs","names":["styles"],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren, useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { NumberFieldUnit } from \"./components/NumberFieldUnit\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * A unit displayed after the number, for units `Intl.NumberFormat` does not\n   * support (e.g. \"MiB\"). For supported units, use `formatOptions` instead.\n   */\n  unit?: string;\n}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    unit,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const unitId = useId();\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      {...skeletonProps}\n      isWheelDisabled={isWheelDisabled}\n      aria-labelledby={\n        unit\n          ? [ariaLabelledBy, unitId].filter(Boolean).join(\" \")\n          : ariaLabelledBy\n      }\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <div className={styles.inputContainer}>\n          <Aria.Input className={styles.input} ref={ref} />\n          {unit && <NumberFieldUnit id={unitId} unit={unit} />}\n        </div>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,MACA,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,SAAS,MAAM;CAErB,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACa;EACjB,mBACE,OACI,CAAC,gBAAgB,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,IACjD;EAEN,oBAAkB,aAAa;EAC/B,WAAW;EAVb,UAAA,CAYE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAWA,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAWA,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,qBAAC,OAAD;KAAK,WAAWA,2BAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,WAAWA,2BAAO;MAAY;KAAM,CAAA,GAC/C,QAAQ,oBAAC,iBAAD;MAAiB,IAAI;MAAc;KAAO,CAAA,CAChD;;IACL,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAWA,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}

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

@@ -181,7 +181,7 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 		type: isPasswordRevealed ? "text" : "password",
 		onChange,
 		onPaste: onPasswordPasteHandler,
-		className: clsx(className, wrapperProps.className),
+		className: clsx(wrapperProps.className, className),
 		isDisabled,
 		isInvalid,
 		isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordCreationField.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    /**\n     * A validation that outlasts the delay shows the loading bar, but keeps the\n     * previous result until the new one arrives – dropping it flickered the\n     * error and the bar color after every typing pause.\n     */\n    const [isValidationPending, setIsValidationPending] = useState(false);\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    const { rememberValidationResult } = usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n        loadingRef.current = setTimeout(() => {\n          setIsValidationPending(true);\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n        setIsValidationPending(false);\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n      renderedFieldErrorId,\n      skeletonProps,\n    } = useFieldComponent(props, \"PasswordCreationField\");\n\n    /**\n     * The result for a valid password appears after the asynchronous policy\n     * validation. react-aria resolves its description slot only when the\n     * field's validity changes, so a result that appears while the field stays\n     * valid (a generated password) was never linked. It gets its own id\n     * instead, referenced only while it is rendered.\n     *\n     * A shown error replaces it: the FormField styles hide descriptions next to\n     * an error, and a hidden description would still be announced.\n     */\n    const resultDescriptionId = useId();\n    const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n      useState(false);\n    const resultDescriptionRef = useCallback((element: Element | null) => {\n      setIsResultDescriptionRendered(!!element);\n    }, []);\n    const describedBy = joinIds(\n      isResultDescriptionRendered && resultDescriptionId,\n      controlProps[\"aria-describedby\"],\n    );\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      /**\n       * The generator returns only passwords the policy accepts, so the rating\n       * is set with the password instead of after the typing debounce. It is\n       * the policy's own result: a guessed one (full strength) was overturned\n       * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n       * so the debounced validation of this password does not rate it again.\n       */\n      const generatedPasswordResult =\n        await validationPolicy.validate(generatedPassword);\n      rememberValidationResult(generatedPassword, generatedPasswordResult);\n      setPolicyValidationResult(generatedPasswordResult);\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        {...skeletonProps}\n        aria-describedby={describedBy}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, wrapperProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={\n                  isValidationPending ||\n                  policyValidationResult.isValid === \"indeterminate\"\n                }\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n                isInvalid={invalidFromProps}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && !renderedFieldErrorId && (\n              // Out of react-aria's description slot, which would set its own\n              // id – see `resultDescriptionId`.\n              <Aria.TextContext.Provider value={null}>\n                <FieldDescription\n                  id={resultDescriptionId}\n                  ref={resultDescriptionRef}\n                >\n                  {latestValidationErrorText}\n                </FieldDescription>\n              </Aria.TextContext.Provider>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordCreationField.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    /**\n     * A validation that outlasts the delay shows the loading bar, but keeps the\n     * previous result until the new one arrives – dropping it flickered the\n     * error and the bar color after every typing pause.\n     */\n    const [isValidationPending, setIsValidationPending] = useState(false);\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    const { rememberValidationResult } = usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n        loadingRef.current = setTimeout(() => {\n          setIsValidationPending(true);\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n        setIsValidationPending(false);\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n      renderedFieldErrorId,\n      skeletonProps,\n    } = useFieldComponent(props, \"PasswordCreationField\");\n\n    /**\n     * The result for a valid password appears after the asynchronous policy\n     * validation. react-aria resolves its description slot only when the\n     * field's validity changes, so a result that appears while the field stays\n     * valid (a generated password) was never linked. It gets its own id\n     * instead, referenced only while it is rendered.\n     *\n     * A shown error replaces it: the FormField styles hide descriptions next to\n     * an error, and a hidden description would still be announced.\n     */\n    const resultDescriptionId = useId();\n    const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n      useState(false);\n    const resultDescriptionRef = useCallback((element: Element | null) => {\n      setIsResultDescriptionRendered(!!element);\n    }, []);\n    const describedBy = joinIds(\n      isResultDescriptionRendered && resultDescriptionId,\n      controlProps[\"aria-describedby\"],\n    );\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      /**\n       * The generator returns only passwords the policy accepts, so the rating\n       * is set with the password instead of after the typing debounce. It is\n       * the policy's own result: a guessed one (full strength) was overturned\n       * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n       * so the debounced validation of this password does not rate it again.\n       */\n      const generatedPasswordResult =\n        await validationPolicy.validate(generatedPassword);\n      rememberValidationResult(generatedPassword, generatedPasswordResult);\n      setPolicyValidationResult(generatedPasswordResult);\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        {...skeletonProps}\n        aria-describedby={describedBy}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(wrapperProps.className, className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={\n                  isValidationPending ||\n                  policyValidationResult.isValid === \"indeterminate\"\n                }\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n                isInvalid={invalidFromProps}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && !renderedFieldErrorId && (\n              // Out of react-aria's description slot, which would set its own\n              // id – see `resultDescriptionId`.\n              <Aria.TextContext.Provider value={null}>\n                <FieldDescription\n                  id={resultDescriptionId}\n                  ref={resultDescriptionRef}\n                >\n                  {latestValidationErrorText}\n                </FieldDescription>\n              </Aria.TextContext.Provider>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs

@@ -87,7 +87,7 @@ var NonModalPopoverContentInner = (props) => {
 		...overlayProps,
 		id,
 		ref: overlayRef,
-		className: clsx(className, Popover_module_default["non-modal"]),
+		className: clsx(Popover_module_default["non-modal"], className),
 		"data-placement": placement ?? void 0,
 		"data-entering": isEntering || void 0,
 		"data-exiting": isExiting || void 0,

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NonModalPopoverContent.mjs","names":["useObjectRef","styles"],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport { useEnterAnimation, useExitAnimation } from \"@react-aria/utils\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\nimport { PopoverTip } from \"../PopoverTip\";\n\nexport interface NonModalPopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  placement?: Placement;\n  offset?: number;\n  crossOffset?: number;\n  /** Swallowed on purpose — the stylesheet overrides `max-height` here. */\n  maxHeight?: number;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  arrowBoundaryOffset?: number;\n  boundaryElement?: Element;\n  /** The id react-aria's trigger points its `aria-controls` at. */\n  id?: string;\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef: RefObject<Element | null>;\n}\n\ninterface NonModalPopoverContentInnerProps extends Omit<\n  NonModalPopoverContentProps,\n  \"ref\"\n> {\n  overlayRef: RefObject<HTMLDivElement | null>;\n  isExiting: boolean;\n}\n\n/*\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes *size*. It never\n * notices the anchor merely *moving*, because a popover normally opens on a user\n * interaction, long after the page settled.\n *\n * This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n *\n * Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n */\nconst useRepositionWhenAnchorMoves = (\n  anchorRef: RefObject<Element | null>,\n  isOpen: boolean,\n  updatePosition: () => void,\n): void => {\n  useEffect(() => {\n    // Read inside the effect. A coach mark that is open from its first render\n    // renders before the anchor's ref is attached, and a ref filling in does not\n    // re-render anything — so reading during render would see `null`, bail, and\n    // leave nothing observing.\n    const anchor = anchorRef.current;\n\n    if (!isOpen || !anchor) {\n      return;\n    }\n\n    const observer = new ResizeObserver(updatePosition);\n\n    for (\n      let element = anchor.parentElement;\n      element;\n      element = element.parentElement\n    ) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [anchorRef, isOpen, updatePosition]);\n};\n\n/*\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n *\n * What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n *\n * It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n *\n * Mounting is split across two components for the same reason `Aria.Popover`\n * splits it: the closing animation has to outlive `isOpen`, so the element that\n * plays it cannot be unmounted by the render that closes it. This outer half\n * keeps the ref and the mount decision and survives across open and closed; the\n * inner half holds the positioning and remounts on every open, which is what\n * resets the entry animation.\n */\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n  props,\n) => {\n  const { isOpen = false, ref, ...rest } = props;\n\n  const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n\n  const isExiting = useExitAnimation(overlayRef, isOpen);\n\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <NonModalPopoverContentInner\n      {...rest}\n      overlayRef={overlayRef}\n      isOpen={isOpen}\n      isExiting={isExiting}\n    />\n  );\n};\n\nconst NonModalPopoverContentInner: FC<NonModalPopoverContentInnerProps> = (\n  props,\n) => {\n  const {\n    children,\n    className,\n    withTip,\n    isOpen = false,\n    isExiting,\n    width,\n    id,\n    onOpenChange,\n    overlayRef,\n    triggerRef,\n    // Named one by one so that everything left over is a DOM prop and reaches\n    // the element. Funnelling the rest into the positioning instead drops\n    // `aria-*`, `data-*` and the like, which `Aria.Popover` forwards on the\n    // modal path.\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    maxHeight: ignoredMaxHeight,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n    ...rest\n  } = props;\n\n  void ignoredMaxHeight;\n\n  const positionProps = {\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n  };\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const detailsId = useId();\n\n  const { overlayProps, arrowProps, placement, updatePosition } =\n    useOverlayPosition({\n      ...positionProps,\n      targetRef: triggerRef,\n      overlayRef,\n      arrowRef,\n      isOpen,\n      offset: positionProps.offset ?? 8,\n      containerPadding: popoverViewportPadding,\n    });\n\n  useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n  /*\n   * Until it has a placement, `useOverlayPosition` parks the popover in the top\n   * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n   * anchor yet. Rendered on a server that corner is what ships, and the popover\n   * sits there until hydration measures; an anchor given by id is resolved a\n   * frame later still. Either way it is visibly in the wrong place first and\n   * jumps to the anchor after, so keep it out of sight until it knows where it\n   * belongs. It stays in the DOM, which is what its place in the reading order\n   * and `aria-details` depend on.\n   */\n  const isPositioned = placement !== null;\n\n  // Held back until the popover knows where it belongs — an entry animation\n  // that plays while the popover is still hidden is one the user never sees.\n  const isEntering = useEnterAnimation(overlayRef, isPositioned);\n\n  /*\n   * Nothing announces this popover, so the trigger points at it: `aria-details`\n   * tells assistive tech that there is related content and offers a way over to\n   * it — unlike `aria-describedby`, which would flatten the popover into a\n   * string and put its buttons out of reach.\n   *\n   * Set on the trigger element itself, because that element belongs to whoever\n   * rendered it. Whatever it carried before is restored on the way out.\n   */\n  useEffect(() => {\n    const trigger = triggerRef.current;\n\n    if (!isOpen || !trigger) {\n      return;\n    }\n\n    const previous = trigger.getAttribute(\"aria-details\");\n    trigger.setAttribute(\n      \"aria-details\",\n      previous ? `${previous} ${detailsId}` : detailsId,\n    );\n\n    return () => {\n      if (previous === null) {\n        trigger.removeAttribute(\"aria-details\");\n      } else {\n        trigger.setAttribute(\"aria-details\", previous);\n      }\n    };\n  }, [isOpen, triggerRef, detailsId]);\n\n  // Escape closes it. react-aria would do this through `useOverlay`, which is\n  // part of the machinery this component leaves out.\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const closeOnEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", closeOnEscape);\n    return () => document.removeEventListener(\"keydown\", closeOnEscape);\n  }, [isOpen, onOpenChange]);\n\n  return (\n    <div\n      {...rest}\n      {...overlayProps}\n      id={id}\n      ref={overlayRef}\n      className={clsx(className, styles[\"non-modal\"])}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}\n      style={{\n        ...overlayProps.style,\n        /*\n         * Two things `useOverlayPosition` adds for an overlay portalled to the\n         * end of `<body>` and pinned to the viewport. This one renders where it\n         * stands and scrolls with the page, so both are wrong here.\n         *\n         * `z-index: 100000` would put it in front of the whole application — it\n         * scrolled over the docs site's sticky header. Dropping the value here\n         * hands the level to CSS, where `.non-modal` claims the lowest one that\n         * still clears ordinary page content.\n         *\n         * The `max-height` it caps the overlay at is wrong here for the same\n         * reason, but it is written straight onto the element and has to be\n         * undone in CSS — see `.non-modal` in Popover.module.scss.\n         */\n        zIndex: undefined,\n        ...popoverWidthStyle(width),\n        ...(isPositioned ? {} : { visibility: \"hidden\" }),\n      }}\n    >\n      {withTip && (\n        <div\n          {...arrowProps}\n          ref={arrowRef}\n          className={styles.tip}\n          data-placement={placement ?? undefined}\n          style={{\n            // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n            // it lifts the tip out of the flow and centres it on the anchor.\n            position: \"absolute\",\n            transform:\n              placement === \"top\" || placement === \"bottom\"\n                ? \"translateX(-50%)\"\n                : \"translateY(-50%)\",\n            // `arrowProps.style` carries the offset along the popover's edge and\n            // leaves the other axis `undefined` — which still overwrites. So the\n            // edge the tip sits on is set last: spread first, it silently lost\n            // `top: 100%` and the tip jumped to the popover's top edge, pointing\n            // away from an anchor that was below it.\n            ...arrowProps.style,\n            ...(placement ? { [placement]: \"100%\" } : {}),\n          }}\n        >\n          <PopoverTip />\n        </div>\n      )}\n      <div className={styles.content} id={detailsId}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":"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"}
+{"version":3,"file":"NonModalPopoverContent.mjs","names":["useObjectRef","styles"],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport { useEnterAnimation, useExitAnimation } from \"@react-aria/utils\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\nimport { PopoverTip } from \"../PopoverTip\";\n\nexport interface NonModalPopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  placement?: Placement;\n  offset?: number;\n  crossOffset?: number;\n  /** Swallowed on purpose — the stylesheet overrides `max-height` here. */\n  maxHeight?: number;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  arrowBoundaryOffset?: number;\n  boundaryElement?: Element;\n  /** The id react-aria's trigger points its `aria-controls` at. */\n  id?: string;\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef: RefObject<Element | null>;\n}\n\ninterface NonModalPopoverContentInnerProps extends Omit<\n  NonModalPopoverContentProps,\n  \"ref\"\n> {\n  overlayRef: RefObject<HTMLDivElement | null>;\n  isExiting: boolean;\n}\n\n/*\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes *size*. It never\n * notices the anchor merely *moving*, because a popover normally opens on a user\n * interaction, long after the page settled.\n *\n * This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n *\n * Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n */\nconst useRepositionWhenAnchorMoves = (\n  anchorRef: RefObject<Element | null>,\n  isOpen: boolean,\n  updatePosition: () => void,\n): void => {\n  useEffect(() => {\n    // Read inside the effect. A coach mark that is open from its first render\n    // renders before the anchor's ref is attached, and a ref filling in does not\n    // re-render anything — so reading during render would see `null`, bail, and\n    // leave nothing observing.\n    const anchor = anchorRef.current;\n\n    if (!isOpen || !anchor) {\n      return;\n    }\n\n    const observer = new ResizeObserver(updatePosition);\n\n    for (\n      let element = anchor.parentElement;\n      element;\n      element = element.parentElement\n    ) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [anchorRef, isOpen, updatePosition]);\n};\n\n/*\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n *\n * What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n *\n * It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n *\n * Mounting is split across two components for the same reason `Aria.Popover`\n * splits it: the closing animation has to outlive `isOpen`, so the element that\n * plays it cannot be unmounted by the render that closes it. This outer half\n * keeps the ref and the mount decision and survives across open and closed; the\n * inner half holds the positioning and remounts on every open, which is what\n * resets the entry animation.\n */\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n  props,\n) => {\n  const { isOpen = false, ref, ...rest } = props;\n\n  const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n\n  const isExiting = useExitAnimation(overlayRef, isOpen);\n\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <NonModalPopoverContentInner\n      {...rest}\n      overlayRef={overlayRef}\n      isOpen={isOpen}\n      isExiting={isExiting}\n    />\n  );\n};\n\nconst NonModalPopoverContentInner: FC<NonModalPopoverContentInnerProps> = (\n  props,\n) => {\n  const {\n    children,\n    className,\n    withTip,\n    isOpen = false,\n    isExiting,\n    width,\n    id,\n    onOpenChange,\n    overlayRef,\n    triggerRef,\n    // Named one by one so that everything left over is a DOM prop and reaches\n    // the element. Funnelling the rest into the positioning instead drops\n    // `aria-*`, `data-*` and the like, which `Aria.Popover` forwards on the\n    // modal path.\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    maxHeight: ignoredMaxHeight,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n    ...rest\n  } = props;\n\n  void ignoredMaxHeight;\n\n  const positionProps = {\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n  };\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const detailsId = useId();\n\n  const { overlayProps, arrowProps, placement, updatePosition } =\n    useOverlayPosition({\n      ...positionProps,\n      targetRef: triggerRef,\n      overlayRef,\n      arrowRef,\n      isOpen,\n      offset: positionProps.offset ?? 8,\n      containerPadding: popoverViewportPadding,\n    });\n\n  useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n  /*\n   * Until it has a placement, `useOverlayPosition` parks the popover in the top\n   * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n   * anchor yet. Rendered on a server that corner is what ships, and the popover\n   * sits there until hydration measures; an anchor given by id is resolved a\n   * frame later still. Either way it is visibly in the wrong place first and\n   * jumps to the anchor after, so keep it out of sight until it knows where it\n   * belongs. It stays in the DOM, which is what its place in the reading order\n   * and `aria-details` depend on.\n   */\n  const isPositioned = placement !== null;\n\n  // Held back until the popover knows where it belongs — an entry animation\n  // that plays while the popover is still hidden is one the user never sees.\n  const isEntering = useEnterAnimation(overlayRef, isPositioned);\n\n  /*\n   * Nothing announces this popover, so the trigger points at it: `aria-details`\n   * tells assistive tech that there is related content and offers a way over to\n   * it — unlike `aria-describedby`, which would flatten the popover into a\n   * string and put its buttons out of reach.\n   *\n   * Set on the trigger element itself, because that element belongs to whoever\n   * rendered it. Whatever it carried before is restored on the way out.\n   */\n  useEffect(() => {\n    const trigger = triggerRef.current;\n\n    if (!isOpen || !trigger) {\n      return;\n    }\n\n    const previous = trigger.getAttribute(\"aria-details\");\n    trigger.setAttribute(\n      \"aria-details\",\n      previous ? `${previous} ${detailsId}` : detailsId,\n    );\n\n    return () => {\n      if (previous === null) {\n        trigger.removeAttribute(\"aria-details\");\n      } else {\n        trigger.setAttribute(\"aria-details\", previous);\n      }\n    };\n  }, [isOpen, triggerRef, detailsId]);\n\n  // Escape closes it. react-aria would do this through `useOverlay`, which is\n  // part of the machinery this component leaves out.\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const closeOnEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", closeOnEscape);\n    return () => document.removeEventListener(\"keydown\", closeOnEscape);\n  }, [isOpen, onOpenChange]);\n\n  return (\n    <div\n      {...rest}\n      {...overlayProps}\n      id={id}\n      ref={overlayRef}\n      className={clsx(styles[\"non-modal\"], className)}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}\n      style={{\n        ...overlayProps.style,\n        /*\n         * Two things `useOverlayPosition` adds for an overlay portalled to the\n         * end of `<body>` and pinned to the viewport. This one renders where it\n         * stands and scrolls with the page, so both are wrong here.\n         *\n         * `z-index: 100000` would put it in front of the whole application — it\n         * scrolled over the docs site's sticky header. Dropping the value here\n         * hands the level to CSS, where `.non-modal` claims the lowest one that\n         * still clears ordinary page content.\n         *\n         * The `max-height` it caps the overlay at is wrong here for the same\n         * reason, but it is written straight onto the element and has to be\n         * undone in CSS — see `.non-modal` in Popover.module.scss.\n         */\n        zIndex: undefined,\n        ...popoverWidthStyle(width),\n        ...(isPositioned ? {} : { visibility: \"hidden\" }),\n      }}\n    >\n      {withTip && (\n        <div\n          {...arrowProps}\n          ref={arrowRef}\n          className={styles.tip}\n          data-placement={placement ?? undefined}\n          style={{\n            // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n            // it lifts the tip out of the flow and centres it on the anchor.\n            position: \"absolute\",\n            transform:\n              placement === \"top\" || placement === \"bottom\"\n                ? \"translateX(-50%)\"\n                : \"translateY(-50%)\",\n            // `arrowProps.style` carries the offset along the popover's edge and\n            // leaves the other axis `undefined` — which still overwrites. So the\n            // edge the tip sits on is set last: spread first, it silently lost\n            // `top: 100%` and the tip jumped to the popover's top edge, pointing\n            // away from an anchor that was below it.\n            ...arrowProps.style,\n            ...(placement ? { [placement]: \"100%\" } : {}),\n          }}\n        >\n          <PopoverTip />\n        </div>\n      )}\n      <div className={styles.content} id={detailsId}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":"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"}