@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.40

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

@@ -1 +1 @@
-{"version":3,"file":"NonModalPopoverContent.mjs","names":[],"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":";;;;;;;;;;;;AA0DA,IAAM,gCACJ,WACA,QACA,mBACS;CACT,gBAAgB;EAKd,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,QACd;EAGF,MAAM,WAAW,IAAI,eAAe,cAAc;EAElD,KACE,IAAI,UAAU,OAAO,eACrB,SACA,UAAU,QAAQ,eAElB,SAAS,QAAQ,OAAO;EAG1B,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAW;EAAQ;CAAc,CAAC;AACxC;AA2BA,IAAa,0BACX,UACG;CACH,MAAM,EAAE,SAAS,OAAO,KAAK,GAAG,SAAS;CAEzC,MAAM,aAAa,eAAa,GAA0B;CAE1D,MAAM,YAAY,iBAAiB,YAAY,MAAM;CAErD,IAAI,CAAC,UAAU,CAAC,WACd,OAAO;CAGT,OACE,oBAAC,6BAAD;EACE,GAAI;EACQ;EACJ;EACG;CACZ,CAAA;AAEL;AAEA,IAAM,+BACJ,UACG;CACH,MAAM,EACJ,UACA,WACA,SACA,SAAS,OACT,WACA,OACA,IACA,cACA,YACA,YAKA,WAAW,oBACX,QACA,aACA,WAAW,kBACX,YACA,sBACA,qBACA,iBACA,GAAG,SACD;CAIJ,MAAM,gBAAgB;EACpB,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,cAAc,YAAY,WAAW,mBAC3C,mBAAmB;EACjB,GAAG;EACH,WAAW;EACX;EACA;EACA;EACA,QAAQ,cAAc,UAAU;EAChC,kBAAkB;CACpB,CAAC;CAEH,6BAA6B,YAAY,QAAQ,cAAc;CAY/D,MAAM,eAAe,cAAc;CAInC,MAAM,aAAa,kBAAkB,YAAY,YAAY;CAW7D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,UAAU,CAAC,SACd;EAGF,MAAM,WAAW,QAAQ,aAAa,cAAc;EACpD,QAAQ,aACN,gBACA,WAAW,GAAG,SAAS,GAAG,cAAc,SAC1C;EAEA,aAAa;GACX,IAAI,aAAa,MACf,QAAQ,gBAAgB,cAAc;QAEtC,QAAQ,aAAa,gBAAgB,QAAQ;EAEjD;CACF,GAAG;EAAC;EAAQ;EAAY;CAAS,CAAC;CAIlC,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,aAAa,KAAK;EAEtB;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACA;EACJ,KAAK;EACL,WAAW,KAAK,WAAW,uBAAO,YAAY;EAC9C,kBAAgB,aAAa,KAAA;EAC7B,iBAAe,cAAc,KAAA;EAC7B,gBAAc,aAAa,KAAA;EAC3B,OAAO;GACL,GAAG,aAAa;GAehB,QAAQ,KAAA;GACR,GAAG,kBAAkB,KAAK;GAC1B,GAAI,eAAe,CAAC,IAAI,EAAE,YAAY,SAAS;EACjD;EA5BF,UAAA,CA8BG,WACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW,uBAAO;GAClB,kBAAgB,aAAa,KAAA;GAC7B,OAAO;IAGL,UAAU;IACV,WACE,cAAc,SAAS,cAAc,WACjC,qBACA;IAMN,GAAG,WAAW;IACd,GAAI,YAAY,GAAG,YAAY,OAAO,IAAI,CAAC;GAC7C;GAEA,UAAA,oBAAC,YAAD,CAAa,CAAA;EACV,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAW,uBAAO;GAAS,IAAI;GACjC;EACE,CAAA,CACF;;AAET"}
+{"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":";;;;;;;;;;;;AA0DA,IAAM,gCACJ,WACA,QACA,mBACS;CACT,gBAAgB;EAKd,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,QACd;EAGF,MAAM,WAAW,IAAI,eAAe,cAAc;EAElD,KACE,IAAI,UAAU,OAAO,eACrB,SACA,UAAU,QAAQ,eAElB,SAAS,QAAQ,OAAO;EAG1B,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAW;EAAQ;CAAc,CAAC;AACxC;AA2BA,IAAa,0BACX,UACG;CACH,MAAM,EAAE,SAAS,OAAO,KAAK,GAAG,SAAS;CAEzC,MAAM,aAAaA,eAAa,GAA0B;CAE1D,MAAM,YAAY,iBAAiB,YAAY,MAAM;CAErD,IAAI,CAAC,UAAU,CAAC,WACd,OAAO;CAGT,OACE,oBAAC,6BAAD;EACE,GAAI;EACQ;EACJ;EACG;CACZ,CAAA;AAEL;AAEA,IAAM,+BACJ,UACG;CACH,MAAM,EACJ,UACA,WACA,SACA,SAAS,OACT,WACA,OACA,IACA,cACA,YACA,YAKA,WAAW,oBACX,QACA,aACA,WAAW,kBACX,YACA,sBACA,qBACA,iBACA,GAAG,SACD;CAIJ,MAAM,gBAAgB;EACpB,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,cAAc,YAAY,WAAW,mBAC3C,mBAAmB;EACjB,GAAG;EACH,WAAW;EACX;EACA;EACA;EACA,QAAQ,cAAc,UAAU;EAChC,kBAAkB;CACpB,CAAC;CAEH,6BAA6B,YAAY,QAAQ,cAAc;CAY/D,MAAM,eAAe,cAAc;CAInC,MAAM,aAAa,kBAAkB,YAAY,YAAY;CAW7D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,UAAU,CAAC,SACd;EAGF,MAAM,WAAW,QAAQ,aAAa,cAAc;EACpD,QAAQ,aACN,gBACA,WAAW,GAAG,SAAS,GAAG,cAAc,SAC1C;EAEA,aAAa;GACX,IAAI,aAAa,MACf,QAAQ,gBAAgB,cAAc;QAEtC,QAAQ,aAAa,gBAAgB,QAAQ;EAEjD;CACF,GAAG;EAAC;EAAQ;EAAY;CAAS,CAAC;CAIlC,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,aAAa,KAAK;EAEtB;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACA;EACJ,KAAK;EACL,WAAW,KAAK,WAAWC,uBAAO,YAAY;EAC9C,kBAAgB,aAAa,KAAA;EAC7B,iBAAe,cAAc,KAAA;EAC7B,gBAAc,aAAa,KAAA;EAC3B,OAAO;GACL,GAAG,aAAa;GAehB,QAAQ,KAAA;GACR,GAAG,kBAAkB,KAAK;GAC1B,GAAI,eAAe,CAAC,IAAI,EAAE,YAAY,SAAS;EACjD;EA5BF,UAAA,CA8BG,WACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAWA,uBAAO;GAClB,kBAAgB,aAAa,KAAA;GAC7B,OAAO;IAGL,UAAU;IACV,WACE,cAAc,SAAS,cAAc,WACjC,qBACA;IAMN,GAAG,WAAW;IACd,GAAI,YAAY,GAAG,YAAY,OAAO,IAAI,CAAC;GAC7C;GAEA,UAAA,oBAAC,YAAD,CAAa,CAAA;EACV,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAWA,uBAAO;GAAS,IAAI;GACjC;EACE,CAAA,CACF;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.mjs","names":[],"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,WAAW,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,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 { 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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverTip.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverTip/PopoverTip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Popover.module.scss\";\n\n/*\n * The tip's shape — and only the shape. What positions it differs per popover\n * path: the modal one uses `Aria.OverlayArrow`, which takes the placement from\n * a context that only `Aria.Popover` puts up and that react-aria-components\n * does not export, while the non-modal one builds its wrapper from what\n * `useOverlayPosition` hands it. Both wrappers carry `.tip`; `.tipIcon` is the\n * hook `Popover.module.scss` fills, strokes and turns to face the trigger.\n */\nexport const PopoverTip: FC = () => (\n  <svg\n    className={styles.tipIcon}\n    width={16}\n    height={16}\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n  >\n    <path d=\"M0 0 L8 8 L16 0\" />\n  </svg>\n);\n"],"mappings":";;;;;AAWA,IAAa,mBACX,oBAAC,OAAD;CACE,WAAW,uBAAO;CAClB,OAAO;CACP,QAAQ;CACR,SAAQ;CACR,eAAA;CAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;AACxB,CAAA"}
+{"version":3,"file":"PopoverTip.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverTip/PopoverTip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"../../Popover.module.scss\";\n\n/*\n * The tip's shape — and only the shape. What positions it differs per popover\n * path: the modal one uses `Aria.OverlayArrow`, which takes the placement from\n * a context that only `Aria.Popover` puts up and that react-aria-components\n * does not export, while the non-modal one builds its wrapper from what\n * `useOverlayPosition` hands it. Both wrappers carry `.tip`; `.tipIcon` is the\n * hook `Popover.module.scss` fills, strokes and turns to face the trigger.\n */\nexport const PopoverTip: FC = () => (\n  <svg\n    className={styles.tipIcon}\n    width={16}\n    height={16}\n    viewBox=\"0 0 16 16\"\n    aria-hidden\n  >\n    <path d=\"M0 0 L8 8 L16 0\" />\n  </svg>\n);\n"],"mappings":";;;;;AAWA,IAAa,mBACX,oBAAC,OAAD;CACE,WAAWA,uBAAO;CAClB,OAAO;CACP,QAAQ;CACR,SAAQ;CACR,eAAA;CAEA,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;AACxB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"viewportPadding.mjs","names":[],"sources":["../../../../../../../src/components/Popover/viewportPadding.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/**\n * The gap a popover keeps to the viewport edge. The stylesheet caps the\n * popover's width with it, `containerPadding` insets the position by it — and\n * `containerPadding` is a number, so it cannot read the CSS variable.\n *\n * @internal\n */\nexport const popoverViewportPadding = Number.parseFloat(\n  tokens.popover[\"viewport-padding\"].value,\n);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,yBAAyB,OAAO,WAC3C,kBAAO,QAAQ,mBAAmB,CAAC,KACrC"}
+{"version":3,"file":"viewportPadding.mjs","names":["tokens"],"sources":["../../../../../../../src/components/Popover/viewportPadding.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/**\n * The gap a popover keeps to the viewport edge. The stylesheet caps the\n * popover's width with it, `containerPadding` insets the position by it — and\n * `containerPadding` is a number, so it cannot read the CSS variable.\n *\n * @internal\n */\nexport const popoverViewportPadding = Number.parseFloat(\n  tokens.popover[\"viewport-padding\"].value,\n);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,yBAAyB,OAAO,WAC3CA,kBAAO,QAAQ,mBAAmB,CAAC,KACrC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import ProgressBar_module_default from "./ProgressBar.module.mjs";
 import { ProgressBarValue } from "./components/ProgressBarValue.mjs";
 import { ProgressBarBar } from "./components/ProgressBarBar.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var ProgressBar = flowComponent("ProgressBar", (props) => {
 	const { children, className, status = "info", showMaxValue, size = "m", segments, value, formatOptions, showLegend = true, maxValue, valueLabel, ...rest } = props;
-	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], isSkeleton && ProgressBar_module_default.skeleton, className);
 	const propsContext = { Label: {
 		className: ProgressBar_module_default.label,
 		unstyled: true
@@ -25,6 +27,7 @@ var ProgressBar = flowComponent("ProgressBar", (props) => {
 		formatOptions,
 		maxValue,
 		...rest,
+		inert: isSkeleton || void 0,
 		children: ({ percentage }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":[],"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\";\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 rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\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    >\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":";;;;;;;;;;;;;AAyCA,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,gBAAgB,KACpB,2BAAO,aACP,2BAAO,QAAQ,SACf,2BAAO,SACP,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAW,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;EAEF,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  /**\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"}

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

@@ -12,6 +12,7 @@ var info = "flow--progress-bar--info";
 var success = "flow--progress-bar--success";
 var danger = "flow--progress-bar--danger";
 var warning = "flow--progress-bar--warning";
+var skeleton = "flow--progress-bar--skeleton";
 var ProgressBar_module_default = {
 	progressBar,
 	legend,
@@ -27,9 +28,12 @@ var ProgressBar_module_default = {
 	info,
 	success,
 	danger,
-	warning
+	warning,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--progress-bar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--progress-bar--skeleton-text-shimmer"
 };
 //#endregion
-export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, success, value, warning };
+export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, skeleton, success, value, warning };
 
 //# sourceMappingURL=ProgressBar.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n  display: grid;\n  grid-template-areas:\n    \"label value\"\n    \"bar bar\";\n  grid-template-columns: 1fr auto;\n  column-gap: var(--progress-bar--spacing-x);\n  width: 100%;\n  font-size: var(--progress-bar--font-size);\n\n  @extend .size-m;\n  @extend .info;\n\n  &:has(.legend) {\n    grid-template-areas:\n      \"label value\"\n      \"bar bar\"\n      \"legend legend\";\n  }\n\n  /* Elements */\n\n  .label {\n    grid-area: label;\n  }\n\n  .value {\n    grid-area: value;\n    font-weight: var(--progress-bar--value-font-weight);\n  }\n\n  .bar {\n    grid-area: bar;\n    border-radius: var(--progress-bar--corner-radius);\n    background-color: var(--progress-bar--background-color);\n    box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n      var(--progress-bar--border-color);\n    overflow: hidden;\n    margin-top: var(--progress-bar--spacing-y);\n  }\n\n  .fill {\n    height: 100%;\n    width: calc(var(--progress-bar--percentage) * 1%);\n    display: flex;\n    animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n  }\n\n  /* Segments share the fill in proportion to their values. */\n  .segment {\n    flex: var(--progress-bar--segment-value) 1 0;\n  }\n\n  .legend {\n    grid-area: legend;\n    margin-top: var(--progress-bar--spacing-bar-to-legend);\n  }\n\n  /* Size */\n\n  &.size-s {\n    font-size: var(--progress-bar--font-size-s);\n  }\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      .bar {\n        height: var(--progress-bar--height--#{$size});\n      }\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  /* Variants */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        background: var(--progress-bar--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n}\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n  from {\n    width: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.progressBar {\n  display: grid;\n  grid-template-areas:\n    \"label value\"\n    \"bar bar\";\n  grid-template-columns: 1fr auto;\n  column-gap: var(--progress-bar--spacing-x);\n  width: 100%;\n  font-size: var(--progress-bar--font-size);\n\n  @extend .size-m;\n  @extend .info;\n\n  &:has(.legend) {\n    grid-template-areas:\n      \"label value\"\n      \"bar bar\"\n      \"legend legend\";\n  }\n\n  /* Elements */\n\n  .label {\n    grid-area: label;\n  }\n\n  .value {\n    grid-area: value;\n    font-weight: var(--progress-bar--value-font-weight);\n  }\n\n  .bar {\n    grid-area: bar;\n    border-radius: var(--progress-bar--corner-radius);\n    background-color: var(--progress-bar--background-color);\n    box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n      var(--progress-bar--border-color);\n    overflow: hidden;\n    margin-top: var(--progress-bar--spacing-y);\n  }\n\n  .fill {\n    height: 100%;\n    width: calc(var(--progress-bar--percentage) * 1%);\n    display: flex;\n    animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n  }\n\n  /* Segments share the fill in proportion to their values. */\n  .segment {\n    flex: var(--progress-bar--segment-value) 1 0;\n  }\n\n  .legend {\n    grid-area: legend;\n    margin-top: var(--progress-bar--spacing-bar-to-legend);\n  }\n\n  /* Size */\n\n  &.size-s {\n    font-size: var(--progress-bar--font-size-s);\n  }\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      .bar {\n        height: var(--progress-bar--height--#{$size});\n      }\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  /* Variants */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        background: var(--progress-bar--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n\n  /* SkeletonMode: the track is a surface, the value stays hidden */\n  &.skeleton {\n    .bar {\n      @include skeleton.surface;\n\n      --skeleton-radius: var(--progress-bar--corner-radius);\n\n      box-shadow: none;\n    }\n\n    .value {\n      visibility: hidden;\n    }\n  }\n}\n\n@include skeleton.keyframes;\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n  from {\n    width: 0%;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../SkeletonMode/skeletonModeContext.mjs";
 import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
 import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
@@ -7,6 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/ProgressBar/components/ProgressBarBar.tsx
 var ProgressBarBar = (props) => {
 	const { segments, percentage } = props;
+	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", { className: ProgressBar_module_default.bar });
 	const segmentFill = segments && segments.length > 0 ? segments.map((s, i) => {
 		const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
 		return /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarBar.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n  percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n  const { segments, percentage } = props;\n\n  const segmentFill =\n    segments && segments.length > 0\n      ? segments.map((s, i) => {\n          const backgroundColor = !s.color\n            ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n            : isCategoricalColor(s.color)\n              ? `var(--color--categorical--${s.color})`\n              : s.color;\n\n          return (\n            <div\n              key={s.title}\n              aria-hidden\n              className={styles.segment}\n              style={{\n                backgroundColor,\n                \"--progress-bar--segment-value\": s.value,\n              }}\n            />\n          );\n        })\n      : null;\n\n  return (\n    <div className={styles.bar}>\n      <div\n        className={styles.fill}\n        style={{ \"--progress-bar--percentage\": percentage }}\n      >\n        {segmentFill}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAEjC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAW,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAW,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAW,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"ProgressBarBar.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n  percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n  const { segments, percentage } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  /* In the mode, the track stays and shows no value. */\n  if (isSkeleton) {\n    return <div className={styles.bar} />;\n  }\n\n  const segmentFill =\n    segments && segments.length > 0\n      ? segments.map((s, i) => {\n          const backgroundColor = !s.color\n            ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n            : isCategoricalColor(s.color)\n              ? `var(--color--categorical--${s.color})`\n              : s.color;\n\n          return (\n            <div\n              key={s.title}\n              aria-hidden\n              className={styles.segment}\n              style={{\n                backgroundColor,\n                \"--progress-bar--segment-value\": s.value,\n              }}\n            />\n          );\n        })\n      : null;\n\n  return (\n    <div className={styles.bar}>\n      <div\n        className={styles.fill}\n        style={{ \"--progress-bar--percentage\": percentage }}\n      >\n        {segmentFill}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAKjC,IAHmB,gBAGf,GACF,OAAO,oBAAC,OAAD,EAAK,WAAWA,2BAAO,IAAM,CAAA;CAGtC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAWA,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAWA,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAWA,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarLegend.mjs","names":[],"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,WAAW,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  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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarValue.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n  ProgressBarProps,\n  \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n> {\n  value?: number;\n  valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n  const {\n    showMaxValue,\n    maxValue,\n    value = 0,\n    formatOptions,\n    valueLabel,\n  } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const maxValueText =\n    !showMaxValue || !maxValue\n      ? undefined\n      : formatOptions\n        ? formatter.format(maxValue)\n        : `${maxValue} %`;\n\n  const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n  const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n  return (\n    <span className={styles.value}>\n      {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,4BAA4B,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,WAAW,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}
+{"version":3,"file":"ProgressBarValue.mjs","names":["locales","styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n  ProgressBarProps,\n  \"showMaxValue\" | \"maxValue\" | \"formatOptions\"\n> {\n  value?: number;\n  valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n  const {\n    showMaxValue,\n    maxValue,\n    value = 0,\n    formatOptions,\n    valueLabel,\n  } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const maxValueText =\n    !showMaxValue || !maxValue\n      ? undefined\n      : formatOptions\n        ? formatter.format(maxValue)\n        : `${maxValue} %`;\n\n  const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n  const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n  return (\n    <span className={styles.value}>\n      {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,4BAA4BA,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,WAAWC,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}

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

@@ -16,7 +16,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
@@ -33,7 +33,8 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 	useMakeFocusable(localRadioRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		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":[],"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    fieldProps,\n    fieldPropsContext,\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      className={clsx(rootClassName, fieldProps.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,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,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,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,KAAK;EAHP,UAAA,CAKE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,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,WAAW,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":["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  } = 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      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,sBACE,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,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EAJP,UAAA,CAME,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radio, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {({ isSelected }) => (\n        <>\n          {isSelected ? (\n            <IconRadioOn className={styles.icon} />\n          ) : (\n            <IconRadioOff className={styles.icon} />\n          )}\n          {children}\n        </>\n      )}\n    </Aria.Radio>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,qBAAO,OAAO,SAAS;CAElD,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACG,aACC,oBAAC,aAAD,EAAa,WAAW,qBAAO,KAAO,CAAA,IAEtC,oBAAC,cAAD,EAAc,WAAW,qBAAO,KAAO,CAAA,GAExC,QACD,EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}
+{"version":3,"file":"Radio.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radio, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {({ isSelected }) => (\n        <>\n          {isSelected ? (\n            <IconRadioOn className={styles.icon} />\n          ) : (\n            <IconRadioOff className={styles.icon} />\n          )}\n          {children}\n        </>\n      )}\n    </Aria.Radio>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,qBAAO,OAAO,SAAS;CAElD,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,qBAAAC,UAAA,EAAA,UAAA,CACG,aACC,oBAAC,aAAD,EAAa,WAAWD,qBAAO,KAAO,CAAA,IAEtC,oBAAC,cAAD,EAAc,WAAWA,qBAAO,KAAO,CAAA,GAExC,QACD,EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radioButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <Radio {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Radio>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAW,2BAAO,MACpB;EACA,SAAS,EACP,WAAW,2BAAO,QACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}
+{"version":3,"file":"RadioButton.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radioButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <Radio {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Radio>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAWA,2BAAO,MACpB;EACA,SAAS,EACP,WAAWA,2BAAO,QACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -22,8 +23,9 @@ var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).to
 */
 var Rating = flowComponent("Rating", (props) => {
 	const { value, defaultValue, size = "m", maxValue = 5, fill = "cumulative", className, children, ref, iconEmpty, iconFilled, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "Rating");
-	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "Rating");
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], isSkeleton && Rating_module_default.skeleton, wrapperProps.className, className);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const segmentProps = {
@@ -44,10 +46,12 @@ var Rating = flowComponent("Rating", (props) => {
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		value: toSegmentValue(value),
 		defaultValue: toSegmentValue(defaultValue),
 		ref: localRef,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [
@@ -58,7 +62,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			className: Rating_module_default.ratingSegments,
-			children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
 				children: (tunnelChildren) => {
@@ -72,7 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 						children: segment
 					}, index));
 				}
-			})
+			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":[],"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\";\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    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    fieldProps.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      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\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        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,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,YACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,sBAAO,QAAQ,SACf,sBAAO,QAAQ,SACf,WAAW,WACX,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,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EALP,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAW,sBAAO;GACrB,UAAA,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;EACpB,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 { 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"}

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

@@ -7,6 +7,7 @@ var ratingSegment = "flow--rating--rating-segment";
 var empty = "flow--rating--empty";
 var filled = "flow--rating--filled";
 var current = "flow--rating--current";
+var skeleton = "flow--rating--skeleton";
 var Rating_module_default = {
 	rating,
 	ratingSegments,
@@ -17,9 +18,12 @@ var Rating_module_default = {
 	current,
 	"fill-single": "flow--rating--fill-single",
 	"size-s": "flow--rating--size-s",
-	"size-m": "flow--rating--size-m"
+	"size-m": "flow--rating--size-m",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--rating--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--rating--skeleton-text-shimmer"
 };
 //#endregion
-export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments };
+export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments, skeleton };
 
 //# sourceMappingURL=Rating.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n/**\n * Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n */\n@mixin empty-segment {\n  .empty {\n    opacity: 1;\n  }\n\n  .filled {\n    opacity: 0;\n  }\n}\n\n.rating {\n  .ratingSegments {\n    display: flex;\n    width: fit-content;\n    order: 2;\n  }\n\n  .ratingSegment {\n    display: grid;\n    grid-template-areas: \"star\";\n    border-radius: var(--corner-radius--m);\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xxs) * -1);\n    }\n\n    &[data-focus-visible] {\n      transform: scale(1.2);\n    }\n  }\n\n  .empty,\n  .filled {\n    grid-area: star;\n    transition-property: opacity, transform;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  :where(.empty) {\n    opacity: 0;\n    color: var(--rating--star-color);\n  }\n\n  :where(.filled) {\n    opacity: 1;\n    color: var(--rating--star-filled-color);\n  }\n\n  &.fill-cumulative {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment.current ~ .ratingSegment {\n        @include empty-segment;\n      }\n\n      &:not(:has(.current)) .ratingSegment {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]) {\n      .ratingSegment:hover ~ .ratingSegment {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &.fill-single {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment:not(.current) {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]):has(.ratingSegments:hover) {\n      .ratingSegment:not(:hover) {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &:not([data-readonly]) {\n    .ratingSegment:hover {\n      transform: scale(1.2);\n      transform-origin: center;\n    }\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .ratingSegment {\n      .empty,\n      .filled {\n        color: var(--form-control--border-color--disabled);\n      }\n    }\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} .ratingSegment {\n      padding: var(--rating--spacing--#{$size});\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n}\n"],"mappings":""}
+{"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n/**\n * Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n */\n@mixin empty-segment {\n  .empty {\n    opacity: 1;\n  }\n\n  .filled {\n    opacity: 0;\n  }\n}\n\n.rating {\n  .ratingSegments {\n    display: flex;\n    width: fit-content;\n    order: 2;\n  }\n\n  .ratingSegment {\n    display: grid;\n    grid-template-areas: \"star\";\n    border-radius: var(--corner-radius--m);\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xxs) * -1);\n    }\n\n    &[data-focus-visible] {\n      transform: scale(1.2);\n    }\n  }\n\n  .empty,\n  .filled {\n    grid-area: star;\n    transition-property: opacity, transform;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  :where(.empty) {\n    opacity: 0;\n    color: var(--rating--star-color);\n  }\n\n  :where(.filled) {\n    opacity: 1;\n    color: var(--rating--star-filled-color);\n  }\n\n  &.fill-cumulative {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment.current ~ .ratingSegment {\n        @include empty-segment;\n      }\n\n      &:not(:has(.current)) .ratingSegment {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]) {\n      .ratingSegment:hover ~ .ratingSegment {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &.fill-single {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment:not(.current) {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]):has(.ratingSegments:hover) {\n      .ratingSegment:not(:hover) {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &:not([data-readonly]) {\n    .ratingSegment:hover {\n      transform: scale(1.2);\n      transform-origin: center;\n    }\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .ratingSegment {\n      .empty,\n      .filled {\n        color: var(--form-control--border-color--disabled);\n      }\n    }\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} .ratingSegment {\n      padding: var(--rating--spacing--#{$size});\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n\n  /* SkeletonMode: the segments become one surface in their size */\n  &.skeleton .ratingSegments {\n    @include skeleton.shape;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"EmptySegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n  size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n  const { size, children } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      size,\n      \"aria-hidden\": true,\n      className: styles.empty,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children ?? (\n        <IconStar aria-hidden size={size} className={styles.empty} />\n      )}\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAW,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,WAAW,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}
+{"version":3,"file":"EmptySegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n  size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n  const { size, children } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      size,\n      \"aria-hidden\": true,\n      className: styles.empty,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children ?? (\n        <IconStar aria-hidden size={size} className={styles.empty} />\n      )}\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"FilledSegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n  size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n  const { size, children } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      size,\n      \"aria-hidden\": true,\n      className: styles.filled,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children ?? (\n        <IconStarFilled aria-hidden size={size} className={styles.filled} />\n      )}\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAW,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,WAAW,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}
+{"version":3,"file":"FilledSegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n  size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n  const { size, children } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      size,\n      \"aria-hidden\": true,\n      className: styles.filled,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children ?? (\n        <IconStarFilled aria-hidden size={size} className={styles.filled} />\n      )}\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"RatingSegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/RatingSegment.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@/components/Rating/Rating.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useRatingSegmentContext } from \"@/components/Rating/context\";\nimport { FilledSegment } from \"@/components/Rating/components/RatingSegment/FilledSegment\";\nimport { EmptySegment } from \"@/components/Rating/components/RatingSegment/EmptySegment\";\n\nexport interface RatingSegmentProps\n  extends\n    Omit<Aria.RadioProps, \"children\" | \"value\" | \"className\">,\n    PropsWithClassName,\n    FlowComponentProps<HTMLLabelElement> {\n  /** An alternative icon for the empty state of this segment */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state of this segment */\n  iconFilled?: ReactElement;\n  /** @internal Set by the surrounding `Rating`. */\n  size?: \"s\" | \"m\";\n  /** A segment renders icons only. `never` keeps the shared props union usable. */\n  children?: never;\n}\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const RatingSegment = flowComponent(\"RatingSegment\", (props) => {\n  const { className, iconEmpty, iconFilled, size = \"m\", ref, ...rest } = props;\n\n  const { value, count } = useRatingSegmentContext();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Rating\");\n\n  return (\n    <Aria.Radio\n      aria-label={stringFormatter.format(\"segment\", { value, count })}\n      {...rest}\n      value={value.toString()}\n      ref={ref}\n      className={({ isSelected }) =>\n        clsx(styles.ratingSegment, isSelected && styles.current, className)\n      }\n    >\n      <FilledSegment size={size}>{iconFilled}</FilledSegment>\n      <EmptySegment size={size}>{iconEmpty}</EmptySegment>\n    </Aria.Radio>\n  );\n});\n\nexport default RatingSegment;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,WAAW,WAAW,YAAY,OAAO,KAAK,KAAK,GAAG,SAAS;CAEvE,MAAM,EAAE,OAAO,UAAU,wBAAwB;CAEjD,MAAM,kBAAkB,4BAA4B,kBAAS,QAAQ;CAErE,OACE,qBAAC,KAAK,OAAN;EACE,cAAY,gBAAgB,OAAO,WAAW;GAAE;GAAO;EAAM,CAAC;EAC9D,GAAI;EACJ,OAAO,MAAM,SAAS;EACjB;EACL,YAAY,EAAE,iBACZ,KAAK,sBAAO,eAAe,cAAc,sBAAO,SAAS,SAAS;EANtE,UAAA,CASE,oBAAC,eAAD;GAAqB;GAAO,UAAA;EAA0B,CAAA,GACtD,oBAAC,cAAD;GAAoB;GAAO,UAAA;EAAwB,CAAA,CACzC;;AAEhB,CAAC"}
+{"version":3,"file":"RatingSegment.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/RatingSegment.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@/components/Rating/Rating.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useRatingSegmentContext } from \"@/components/Rating/context\";\nimport { FilledSegment } from \"@/components/Rating/components/RatingSegment/FilledSegment\";\nimport { EmptySegment } from \"@/components/Rating/components/RatingSegment/EmptySegment\";\n\nexport interface RatingSegmentProps\n  extends\n    Omit<Aria.RadioProps, \"children\" | \"value\" | \"className\">,\n    PropsWithClassName,\n    FlowComponentProps<HTMLLabelElement> {\n  /** An alternative icon for the empty state of this segment */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state of this segment */\n  iconFilled?: ReactElement;\n  /** @internal Set by the surrounding `Rating`. */\n  size?: \"s\" | \"m\";\n  /** A segment renders icons only. `never` keeps the shared props union usable. */\n  children?: never;\n}\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const RatingSegment = flowComponent(\"RatingSegment\", (props) => {\n  const { className, iconEmpty, iconFilled, size = \"m\", ref, ...rest } = props;\n\n  const { value, count } = useRatingSegmentContext();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Rating\");\n\n  return (\n    <Aria.Radio\n      aria-label={stringFormatter.format(\"segment\", { value, count })}\n      {...rest}\n      value={value.toString()}\n      ref={ref}\n      className={({ isSelected }) =>\n        clsx(styles.ratingSegment, isSelected && styles.current, className)\n      }\n    >\n      <FilledSegment size={size}>{iconFilled}</FilledSegment>\n      <EmptySegment size={size}>{iconEmpty}</EmptySegment>\n    </Aria.Radio>\n  );\n});\n\nexport default RatingSegment;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,WAAW,WAAW,YAAY,OAAO,KAAK,KAAK,GAAG,SAAS;CAEvE,MAAM,EAAE,OAAO,UAAU,wBAAwB;CAEjD,MAAM,kBAAkB,4BAA4BA,kBAAS,QAAQ;CAErE,OACE,qBAAC,KAAK,OAAN;EACE,cAAY,gBAAgB,OAAO,WAAW;GAAE;GAAO;EAAM,CAAC;EAC9D,GAAI;EACJ,OAAO,MAAM,SAAS;EACjB;EACL,YAAY,EAAE,iBACZ,KAAKC,sBAAO,eAAe,cAAcA,sBAAO,SAAS,SAAS;EANtE,UAAA,CASE,oBAAC,eAAD;GAAqB;GAAO,UAAA;EAA0B,CAAA,GACtD,oBAAC,cAAD;GAAoB;GAAO,UAAA;EAAwB,CAAA,CACzC;;AAEhB,CAAC"}

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

@@ -19,7 +19,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var SearchField = flowComponent("SearchField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "SearchField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "SearchField");
 	const rootClassName = clsx(FormField_module_default.formField, SearchField_module_default.searchField, className);
 	const searchText = useLocalizedStringFormatter(__locale_default, "SearchField").format(`search`);
 	const propsContext = {
@@ -35,9 +35,9 @@ var SearchField = flowComponent("SearchField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.SearchField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		"aria-label": searchText,
-		className: clsx(rootClassName, fieldProps.className),
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n  const { children, className, ref, ...rest } = useControlledHostValueProps(\n    props,\n    \"\",\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"SearchField\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.searchField,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n  const searchText = stringFormatter.format(`search`);\n\n  const propsContext: PropsContext = {\n    Kbd: {\n      isDisabled: props.isDisabled,\n      tunnel: {\n        id: \"kbd\",\n        component: \"SearchField\",\n      },\n      className: styles.kbd,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <Aria.SearchField\n      {...rest}\n      {...fieldProps}\n      aria-label={searchText}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n        <div className={styles.inputContainer}>\n          <IconSearch className={styles.searchIcon} />\n          <Aria.Input\n            placeholder={searchText}\n            className={styles.input}\n            ref={ref}\n          />\n          <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n          <Button\n            className={styles.clearButton}\n            variant=\"plain\"\n            color=\"secondary\"\n          >\n            <IconClose />\n          </Button>\n        </div>\n      </PropsContextProvider>\n      <FieldErrorView />\n    </Aria.SearchField>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,EACF;CAEA,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,2BAAO,aACP,SACF;CAGA,MAAM,aADkB,4BAA4B,kBAAS,aAC1C,CAAA,CAAgB,OAAO,QAAQ;CAElD,MAAM,eAA6B;EACjC,KAAK;GACH,YAAY,MAAM;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,2BAAO;EACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACJ,cAAY;EACZ,WAAW,KAAK,eAAe,WAAW,SAAS;EAJrD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAE9D,qBAAC,OAAD;IAAK,WAAW,2BAAO;IAAvB,UAAA;KACE,oBAAC,YAAD,EAAY,WAAW,2BAAO,WAAa,CAAA;KAC3C,oBAAC,KAAK,OAAN;MACE,aAAa;MACb,WAAW,2BAAO;MACb;KACN,CAAA;KACD,oBAAC,uBAAD;MAAuB,IAAG;MAAM,WAAU;KAAe,CAAA;KACzD,oBAAC,QAAD;MACE,WAAW,2BAAO;MAClB,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;IACL;GACe,CAAA,CAAA;EACtB,CAAA,GAAA,oBAAC,gBAAD,CAAiB,CAAA,CACD;;AAEtB,CAAC"}
+{"version":3,"file":"SearchField.mjs","names":["formFieldStyles","styles","locales"],"sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n  const { children, className, ref, ...rest } = useControlledHostValueProps(\n    props,\n    \"\",\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"SearchField\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.searchField,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n  const searchText = stringFormatter.format(`search`);\n\n  const propsContext: PropsContext = {\n    Kbd: {\n      isDisabled: props.isDisabled,\n      tunnel: {\n        id: \"kbd\",\n        component: \"SearchField\",\n      },\n      className: styles.kbd,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <Aria.SearchField\n      {...rest}\n      {...controlProps}\n      aria-label={searchText}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n        <div className={styles.inputContainer}>\n          <IconSearch className={styles.searchIcon} />\n          <Aria.Input\n            placeholder={searchText}\n            className={styles.input}\n            ref={ref}\n          />\n          <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n          <Button\n            className={styles.clearButton}\n            variant=\"plain\"\n            color=\"secondary\"\n          >\n            <IconClose />\n          </Button>\n        </div>\n      </PropsContextProvider>\n      <FieldErrorView />\n    </Aria.SearchField>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,EACF;CAEA,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KACpBA,yBAAgB,WAChBC,2BAAO,aACP,SACF;CAGA,MAAM,aADkB,4BAA4BC,kBAAS,aAC1C,CAAA,CAAgB,OAAO,QAAQ;CAElD,MAAM,eAA6B;EACjC,KAAK;GACH,YAAY,MAAM;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWD,2BAAO;EACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACJ,cAAY;EACZ,WAAW,KAAK,eAAe,aAAa,SAAS;EAJvD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAE9D,qBAAC,OAAD;IAAK,WAAWA,2BAAO;IAAvB,UAAA;KACE,oBAAC,YAAD,EAAY,WAAWA,2BAAO,WAAa,CAAA;KAC3C,oBAAC,KAAK,OAAN;MACE,aAAa;MACb,WAAWA,2BAAO;MACb;KACN,CAAA;KACD,oBAAC,uBAAD;MAAuB,IAAG;MAAM,WAAU;KAAe,CAAA;KACzD,oBAAC,QAAD;MACE,WAAWA,2BAAO;MAClB,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;IACL;GACe,CAAA,CAAA;EACtB,CAAA,GAAA,oBAAC,gBAAD,CAAiB,CAAA,CACD;;AAEtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const headingId = useId();\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpB,uBAAO,SACP,iBAAiB,uBAAO,eACxB,SACF;CAEA,MAAM,YAAY,MAAM;CAExB,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAW,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;EACA,MAAM,EACJ,mBAAmB,UACrB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Section.mjs","names":["styles"],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const headingId = useId();\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpBA,uBAAO,SACP,iBAAiBA,uBAAO,eACxB,SACF;CAEA,MAAM,YAAY,MAAM;CAExB,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAWA,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;EACA,MAAM,EACJ,mBAAmB,UACrB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}