@mittwald/flow-react-components 1.6.0-next.2 → 1.6.0-next.20

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SectionHeadingReset } from "../../Section/context.mjs";
 import { useIsActivityActive } from "../../Activity/context.mjs";
 import DivView from "../../../views/DivView.mjs";
 import Overlay_module_default from "../Overlay.module.mjs";
@@ -104,7 +105,7 @@ var OverlayContent = (props) => {
 					fallback: /* @__PURE__ */ jsx(Fallback, {}),
 					children: /* @__PURE__ */ jsx(Aria.Dialog, {
 						"aria-labelledby": ariaLabelledBy,
-						children
+						children: /* @__PURE__ */ jsx(SectionHeadingReset, { children })
 					})
 				}) })
 			})

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
+{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                <SectionHeadingReset>{children}</SectionHeadingReset>\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC5B,UAAA,oBAAC,qBAAD,EAAsB,SAA8B,CAAA;KACzC,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}

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

@@ -13,7 +13,7 @@ import PasswordCreationField_module_default from "./PasswordCreationField.module
 import { defaultPasswordCreationPolicy } from "../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs";
 import { Policy } from "../../../../../@mittwald/password-tools-js.mjs";
 import getStateFromLatestPolicyValidationResult from "./lib/getStateFromLatestPolicyValidationResult.mjs";
-import __locale_default from "../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../_virtual/_30.locale.mjs";
 import generateValidationTranslation from "./lib/generateValidationTranslation.mjs";
 import { ComplexityIndicator } from "./components/ComplexityIndicator/ComplexityIndicator.mjs";
 import { generatePassword } from "./worker/generatePassword.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,IAAa,wBAAwB,cACnC,0BACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,YACA,oBACA,WAAW,kBACX,kBACE,4BAA4B,+BAC9B,YACA,OACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,YAAY,4BAChBA,kBACA,uBACF;CAEA,MAAM,mBAAmB,cACjB,OAAO,gBAAgB,yBAAyB,GACtD,CAAC,yBAAyB,CAC5B;CAEA,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,+BAA+D;EACnE,SAAS;EACT,YAAY;GACV,KAAK,iBAAiB;GACtB,QAAQ;GACR,SAAS;EACX;EACA,aAAa,CAAC;CAChB;CAEA,MAAM,CAAC,wBAAwB,6BAA6B,SAC1D,4BACF;;;;;;CAOA,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,KAAK;CACpE,MAAM,aAAa,OAAsC,IAAI;CAC7D,MAAM,EAAE,6BAA6B,0BACnC,kBACA,SAAS,UACH;EACJ,IAAI,cACF;EAGF,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAEjC,WAAW,UAAU,iBAAiB;GACpC,uBAAuB,IAAI;EAC7B,GAAG,GAAG;CACR,IACC,EAAE,UAAU,SAAS,cAAc;EAClC,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAEjC,uBAAuB,KAAK;EAE5B,IAAI,cAAc;GAChB,iCAAiC;IAC/B,GAAG;IACH,SAAS;GACX,EAAE;GACF;EACF;EAEA,gCAAgC,OAAO;EACvC,qBAAqB;GAAE;GAAU;EAAQ,CAAC;CAC5C,CACF;CAEA,MAAM,eAAe,CAAC;CACtB,MAAM,4BAA4B,yCAChC,cACA,sBACF;CACA,IAAI,4BAA4B,KAAA;CAChC,IAAI,2BAA2B;EAC7B,MAAM,CAAC,gBAAgB,qBAAqB,8BAC1C,yBACF;EACA,4BAA4B,UAAU,OACpC,gBACA,iBACF;CACF;CAEA,MAAM,8BACJ,CAAC,gBAAgB,2BAA2B;CAE9C,MAAM,gCACJ,CAAC,gBAAgB,2BAA2B,YAAY;CAC1D,MAAM,YAAY,oBAAoB;CAEtC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,sBACA,kBACE,kBAAkB,OAAO,uBAAuB;;;;;;;;;;;CAYpD,MAAM,sBAAsB,MAAM;CAClC,MAAM,CAAC,6BAA6B,kCAClC,SAAS,KAAK;CAChB,MAAM,uBAAuB,aAAa,YAA4B;EACpE,+BAA+B,CAAC,CAAC,OAAO;CAC1C,GAAG,CAAC,CAAC;CACL,MAAM,cAAc,QAClB,+BAA+B,qBAC/B,aAAa,mBACf;CAEA,+BACE,2BACA,CAAC,gBAAgB,uBAAuB,YAAY,eACtD;CACA,kCAAkC,kBAAkB;CAEpD,MAAM,uCACJ,QAAiD,CAAC,MAC/C;EACH,2BAA2B,kBAAkB;GAC3C,GAAG;GACH,SAAS;GACT,GAAG;EACL,EAAE;CACJ;CAEA,MAAM,4BAAsC,YAAY;EACtD,MAAM,oBAAoB,MAAM,iBAAiB,gBAAgB;;;;;;;;EAQjE,MAAM,0BACJ,MAAM,iBAAiB,SAAS,iBAAiB;EACnD,yBAAyB,mBAAmB,uBAAuB;EACnE,0BAA0B,uBAAuB;EACjD,sBAAsB,IAAI;EAC1B,SAAS,iBAAiB;CAC5B;CAEA,MAAM,0BAA0B,UAA0B;EACxD,MAAM,cAAc,MAAM,eAAe,QAAQ,MAAM;EACvD,IAAI,OAAO,gBAAgB,YAAY,gBAAgB,OACrD,oCAAoC,EAClC,SAAS,gBACX,CAAC;CAEL;CAEA,MAAM,wCAAwC;EAC5C,uBAAuB,QAAQ,CAAC,GAAG;CACrC;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACK;GACZ,WAAWC,qCAAO;EACpB;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACK;GACZ,WAAWA,qCAAO;GAClB,MAAM;EACR;EACA,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU,SAAS,eAAe;IAChC,OACE,qBAAAC,YAAA,EAAA,UAAA;KACG,WAAW;KACZ,oBAAC,wBAAD;MACc;MACZ,0BAA0B;KAC3B,CAAA;KACD,oBAAC,wBAAD;MACgB;MACF;MACY;KACzB,CAAA;IACD,EAAA,CAAA;GAEN,CAAC;EACH;CACF;CAEA,OACE,qBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,oBAAkB;EACX;EACP,MAAM,qBAAqB,SAAS;EAC1B;EACV,SAAS;EACT,WAAW,KAAK,aAAa,WAAW,SAAS;EACrC;EACD;EACC;EAXd,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA,CACG,6BACC,oBAAC,YAAD,EAAA,UAAa,0BAAsC,CAAA,GAErD,qBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IACZ;IACA;IACA;IACA;IACA;GACF;GARF,UAAA;IAUG;IACD,qBAAC,KAAK,OAAN;KACc;KACZ,WAAW,KAAKD,qCAAO,UAAU;KAFnC,UAAA;MAIE,oBAAC,KAAK,OAAN;OAAiB;OAAK,WAAWA,qCAAO;MAAQ,CAAA;MAChD,qBAAC,KAAK,OAAN;OAAY,WAAWA,qCAAO;OAA9B,UAAA,CACE,oBAAC,gCAAD;QACE,WAAWA,qCAAO;QAClB,WAAW;QACC;QACZ,SAAS;OACV,CAAA,GACD,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA,CACS;;MACZ,oBAAC,qBAAD;OAEgB;OACd,WACE,uBACA,uBAAuB,YAAY;OAEb;OACxB,uBAAuB;OACvB,WAAW;MACZ,GATM,KASN;KACS;;IACX,+BAA+B,CAAC,wBAG/B,oBAAC,KAAK,YAAY,UAAlB;KAA2B,OAAO;KAChC,UAAA,oBAAC,kBAAD;MACE,IAAI;MACJ,KAAK;MAEJ,UAAA;KACe,CAAA;IACO,CAAA;GAET;EACE,CAAA,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CACF"}

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

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../../../Button/Button.mjs";
 import { Action } from "../../../Action/Action.mjs";
-import __locale_default from "../../../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx

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

@@ -7,7 +7,7 @@ import { Button } from "../../../Button/Button.mjs";
 import { Action } from "../../../Action/Action.mjs";
 import { TooltipTrigger } from "../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs";
 import { Tooltip } from "../../../Tooltip/Tooltip.mjs";
-import __locale_default from "../../../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx

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

@@ -5,7 +5,7 @@ import { Button } from "../../../Button/Button.mjs";
 import { ContextualHelpTrigger } from "../../../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import { ContextualHelp } from "../../../ContextualHelp/ContextualHelp.mjs";
-import __locale_default from "../../../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import { ValidationResultEntry } from "../ValidationResultEntry/ValidationResultEntry.mjs";
 import ValidationResultButton_module_default from "./ValidationResultButton.module.mjs";
 import { useId } from "react";

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

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { AlertIcon } from "../../../AlertIcon/AlertIcon.mjs";
 import { Text } from "../../../Text/Text.mjs";
-import __locale_default from "../../../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
 import generateValidationTranslation from "../../lib/generateValidationTranslation.mjs";
 import ValidationResultEntry_module_default from "./ValidationResultEntry.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../_virtual/_29.locale.mjs";
+import __locale_default from "../../../../../../_virtual/_30.locale.mjs";
 import { useEffect, useRef } from "react";
 import { announce } from "@react-aria/live-announcer";
 //#region src/components/PasswordCreationField/lib/ariaAnnounce.ts

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

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SectionHeadingReset } from "../../../Section/context.mjs";
 import { useIsActivityActive } from "../../../Activity/context.mjs";
 import Popover_module_default from "../../Popover.module.mjs";
 import { popoverViewportPadding } from "../../viewportPadding.mjs";
@@ -21,6 +22,7 @@ var PopoverContent = (props) => {
 	const triggerRefFromContext = popoverContext && "triggerRef" in popoverContext ? popoverContext.triggerRef : void 0;
 	const idFromContext = popoverContext && "id" in popoverContext ? popoverContext.id : void 0;
 	const ContentComponent = isDialogContent ? Aria.Dialog : "div";
+	const content = /* @__PURE__ */ jsx(SectionHeadingReset, { children });
 	if (!isActivityActive) return null;
 	if (modality === "non-modal") {
 		const anchor = rest.triggerRef ?? triggerRefFromContext;
@@ -35,7 +37,7 @@ var PopoverContent = (props) => {
 			id: idFromContext,
 			triggerRef: anchor,
 			onOpenChange,
-			children
+			children: content
 		});
 	}
 	return /* @__PURE__ */ jsxs(Aria.Popover, {
@@ -51,7 +53,7 @@ var PopoverContent = (props) => {
 			children: /* @__PURE__ */ jsx(PopoverTip, {})
 		}), /* @__PURE__ */ jsx(ContentComponent, {
 			className: Popover_module_default.content,
-			children
+			children: content
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { PopoverTip } from \"../PopoverTip\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {children}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <PopoverTip />\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{children}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
+{"version":3,"file":"PopoverContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { PopoverTip } from \"../PopoverTip\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  const content = <SectionHeadingReset>{children}</SectionHeadingReset>;\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {content}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <PopoverTip />\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{content}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,MAAM,UAAU,oBAAC,qBAAD,EAAsB,SAA8B,CAAA;CAEpE,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb,UAAA;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU,UAAA;EAA0B,CAAA,CAC5D;;AAElB"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n      inert={isSkeleton || undefined}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}
+{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /** Whether the legend component is shown when segments are used. @default true */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n      inert={isSkeleton || undefined}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarLegend.mjs

@@ -12,12 +12,13 @@ var ProgressBarLegend = (props) => {
 	const { segments, showLegend, formatOptions } = props;
 	const formatter = useNumberFormatter(formatOptions);
 	if (!segments || !showLegend) return null;
+	const formatValue = (value) => formatOptions ? formatter.format(value) : `${value} %`;
 	return /* @__PURE__ */ jsx(Legend, {
 		className: ProgressBar_module_default.legend,
-		children: segments.map((s, i) => /* @__PURE__ */ jsx(LegendItem, {
-			color: s.color ?? getCategoricalColorByIndex(i),
-			children: `${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`
-		}, s.title))
+		children: segments.map((segment, index) => /* @__PURE__ */ jsx(LegendItem, {
+			color: segment.color ?? getCategoricalColorByIndex(index),
+			children: `${segment.title} (${segment.valueText ?? formatValue(segment.value)})`
+		}, segment.title))
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarLegend.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n  ProgressBarProps,\n  \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((s, i) => (\n        <LegendItem\n          key={s.title}\n          color={s.color ?? getCategoricalColorByIndex(i)}\n        >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n      ))}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,WAAWA,2BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAChB,oBAAC,YAAD;GAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;GAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,UAAU,OAAO,EAAE,KAAK,IAAI,GAAG,EAAE,MAAM,KAAK;EAAe,GAFrG,EAAE,KAEmG,CAC7G;CACK,CAAA;AAEZ"}
+{"version":3,"file":"ProgressBarLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n  ProgressBarProps,\n  \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  const formatValue = (value: number) =>\n    formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((segment, index) => (\n        <LegendItem\n          key={segment.title}\n          color={segment.color ?? getCategoricalColorByIndex(index)}\n        >\n          {`${segment.title} (${segment.valueText ?? formatValue(segment.value)})`}\n        </LegendItem>\n      ))}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,MAAM,eAAe,UACnB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErD,OACE,oBAAC,QAAD;EAAQ,WAAWA,2BAAO;EACvB,UAAA,SAAS,KAAK,SAAS,UACtB,oBAAC,YAAD;GAEE,OAAO,QAAQ,SAAS,2BAA2B,KAAK;GAEvD,UAAA,GAAG,QAAQ,MAAM,IAAI,QAAQ,aAAa,YAAY,QAAQ,KAAK,EAAE;EAC5D,GAJL,QAAQ,KAIH,CACb;CACK,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarValue.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
-import __locale_default from "../../../../../../_virtual/_7.locale.mjs";
+import __locale_default from "../../../../../../_virtual/_8.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { useLocalizedStringFormatter, useNumberFormatter } from "react-aria";

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

@@ -3,7 +3,6 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { ColumnLayout } from "../ColumnLayout/ColumnLayout.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -17,7 +16,7 @@ import * as Aria from "react-aria-components";
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "RadioGroup");
-	const rootClassName = clsx(FormField_module_default.formField, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
 			id: "radioButtons",
@@ -35,7 +34,7 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 		...rest,
 		...skeletonProps,
 		"aria-describedby": controlProps["aria-describedby"],
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"RadioGroup\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n  const propsContext: PropsContext = {\n    RadioButton: {\n      tunnel: {\n        id: \"radioButtons\",\n        component: \"RadioGroup\",\n      },\n    },\n    Radio: {\n      tunnel: {\n        id: \"radios\",\n        component: \"RadioGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      {...skeletonProps}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n      ref={localRadioRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n            <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.radioGroup}\n          >\n            <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAC/D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAWC,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAWA,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"RadioGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"RadioGroup\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n  const propsContext: PropsContext = {\n    RadioButton: {\n      tunnel: {\n        id: \"radioButtons\",\n        component: \"RadioGroup\",\n      },\n    },\n    Radio: {\n      tunnel: {\n        id: \"radios\",\n        component: \"RadioGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      {...skeletonProps}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      ref={localRadioRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n            <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.radioGroup}\n          >\n            <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,kBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAC5D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAWA,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAWA,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -44,6 +44,17 @@ var Rating = flowComponent("Rating", (props) => {
 		}
 	};
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
+	const renderSegments = (tunnelChildren) => {
+		const tunneledSegments = Children.toArray(tunnelChildren);
+		const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
+		return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
+			value: {
+				value: index + 1,
+				count: segments.length
+			},
+			children: segment
+		}, index));
+	};
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
 		"aria-describedby": controlProps["aria-describedby"],
@@ -65,17 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
-				children: (tunnelChildren) => {
-					const tunneledSegments = Children.toArray(tunnelChildren);
-					const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
-					return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
-						value: {
-							value: index + 1,
-							count: segments.length
-						},
-						children: segment
-					}, index));
-				}
+				children: renderSegments
 			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":["styles"],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default: 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default: 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default: 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default: cumulative\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    isSkeleton && styles.skeleton,\n    wrapperProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n      inert={isSkeleton || undefined}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <SkeletonModeReset>\n            <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n              {(tunnelChildren) => {\n                const tunneledSegments = Children.toArray(tunnelChildren);\n                const segments =\n                  tunneledSegments.length > 0\n                    ? tunneledSegments\n                    : defaultSegments;\n\n                return segments.map((segment, index) => (\n                  <RatingSegmentContextProvider\n                    key={index}\n                    value={{ value: index + 1, count: segments.length }}\n                  >\n                    {segment}\n                  </RatingSegmentContextProvider>\n                ));\n              }}\n            </UiComponentTunnelExit>\n          </SkeletonModeReset>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACfA,sBAAO,QAAQ,SACf,cAAcA,sBAAO,UACrB,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EACL,OAAO,cAAc,KAAA;EAPvB,UAAA,CASE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GACrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA,EACN,CAAA;EAChB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"Rating.mjs","names":["styles"],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default \"cumulative\"\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    isSkeleton && styles.skeleton,\n    wrapperProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  const renderSegments = (tunnelChildren: ReactNode) => {\n    const tunneledSegments = Children.toArray(tunnelChildren);\n    const segments =\n      tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;\n\n    return segments.map((segment, index) => (\n      <RatingSegmentContextProvider\n        key={index}\n        value={{ value: index + 1, count: segments.length }}\n      >\n        {segment}\n      </RatingSegmentContextProvider>\n    ));\n  };\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n      inert={isSkeleton || undefined}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <SkeletonModeReset>\n            <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n              {renderSegments}\n            </UiComponentTunnelExit>\n          </SkeletonModeReset>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;;AA8DA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACfA,sBAAO,QAAQ,SACf,cAAcA,sBAAO,UACrB,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,MAAM,kBAAkB,mBAA8B;EACpD,MAAM,mBAAmB,SAAS,QAAQ,cAAc;EACxD,MAAM,WACJ,iBAAiB,SAAS,IAAI,mBAAmB;EAEnD,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;GAEE,OAAO;IAAE,OAAO,QAAQ;IAAG,OAAO,SAAS;GAAO;GAEjD,UAAA;EAC2B,GAJvB,KAIuB,CAC/B;CACH;CAEA,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EACL,OAAO,cAAc,KAAA;EAPvB,UAAA,CASE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GACrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACpD,UAAA;GACoB,CAAA,EACN,CAAA;EAChB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

package/dist/js/packages/components/src/components/Rating/components/RatingSegment/RatingSegment.mjs

@@ -3,7 +3,7 @@
 import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import Rating_module_default from "../../Rating.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_30.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_31.locale.mjs";
 import { useRatingSegmentContext } from "../../context.mjs";
 import { FilledSegment } from "./FilledSegment.mjs";
 import { EmptySegment } from "./EmptySegment.mjs";