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

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuSelectAll.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { useContext, useRef, type FC } from \"react\";\nimport type { Key, Node } from \"@react-types/shared\";\nimport type { TreeState } from \"react-stately\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport menuItemStyles from \"@/components/MenuItem/MenuItem.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"../../ContextMenu.module.scss\";\n\nconst selectAllSectionId = \"flow--context-menu--select-all\";\n\n/**\n * Keys that share the menu's selection: enabled items at the top level and in\n * sections without a selection mode of their own.\n */\nconst getSelectableKeys = (state: TreeState<unknown>): Key[] => {\n  const keys: Key[] = [];\n\n  const collect = (nodes: Iterable<Node<unknown>>) => {\n    for (const node of nodes) {\n      if (node.type === \"item\") {\n        if (!state.selectionManager.isDisabled(node.key)) {\n          keys.push(node.key);\n        }\n      } else if (\n        node.type === \"section\" &&\n        node.key !== selectAllSectionId &&\n        node.props?.selectionMode === undefined\n      ) {\n        collect(state.collection.getChildren?.(node.key) ?? node.childNodes);\n      }\n    }\n  };\n\n  collect(state.collection);\n  return keys;\n};\n\ninterface SelectAll {\n  isEverySelected: boolean;\n  toggle: () => void;\n}\n\n/**\n * Rendered by the visible menu item. The collection renders the item's element\n * a second time outside the menu, where `MenuStateContext` is missing.\n */\nconst SelectAllMenuItemContent: FC<\n  Aria.MenuItemRenderProps & { selectAll: { current?: SelectAll } }\n> = (props) => {\n  const { selectAll, ...renderProps } = props;\n  const state = useContext(Aria.MenuStateContext);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  const selectionManager = state?.selectionManager;\n  const keys = state ? getSelectableKeys(state) : [];\n  const selectedCount = keys.filter((key) =>\n    selectionManager?.isSelected(key),\n  ).length;\n  const isEverySelected = keys.length > 0 && selectedCount === keys.length;\n  const isIndeterminate = selectedCount > 0 && !isEverySelected;\n\n  selectAll.current = {\n    isEverySelected,\n    toggle: () => {\n      if (!selectionManager) {\n        return;\n      }\n      const keySet = new Set(keys);\n      const otherSelectedKeys = [...selectionManager.selectedKeys].filter(\n        (key) => !keySet.has(key),\n      );\n      selectionManager.setSelectedKeys(\n        isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys],\n      );\n    },\n  };\n\n  return (\n    <MenuItemContent\n      {...renderProps}\n      selectionMode=\"multiple\"\n      isSelected={isEverySelected}\n      isIndeterminate={isIndeterminate}\n    >\n      <Text>\n        {formatter.format(isEverySelected ? \"deselectAll\" : \"selectAll\")}\n      </Text>\n    </MenuItemContent>\n  );\n};\n\nconst SelectAllMenuItem: FC = () => {\n  const selectAll = useRef<SelectAll>(undefined);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  return (\n    <Aria.MenuItem\n      id={`${selectAllSectionId}--item`}\n      textValue={formatter.format(\"selectAll\")}\n      shouldCloseOnSelect={false}\n      onAction={() => selectAll.current?.toggle()}\n      className={menuItemStyles.menuItem}\n    >\n      {(renderProps) => (\n        <SelectAllMenuItemContent {...renderProps} selectAll={selectAll} />\n      )}\n    </Aria.MenuItem>\n  );\n};\n\n/**\n * The entry lives in a section without selection, so pressing it runs its\n * action only and sets the whole selection in one change.\n */\nexport const ContextMenuSelectAll: FC = () => (\n  <Aria.MenuSection\n    id={selectAllSectionId}\n    selectionMode=\"none\"\n    className={styles.selectAll}\n  >\n    <SelectAllMenuItem />\n  </Aria.MenuSection>\n);\n\nexport default ContextMenuSelectAll;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,qBAAqB;;;;;AAM3B,IAAM,qBAAqB,UAAqC;CAC9D,MAAM,OAAc,CAAC;CAErB,MAAM,WAAW,UAAmC;EAClD,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QACZ;OAAA,CAAC,MAAM,iBAAiB,WAAW,KAAK,GAAG,GAC7C,KAAK,KAAK,KAAK,GAAG;EAAA,OAEf,IACL,KAAK,SAAS,aACd,KAAK,QAAQ,sBACb,KAAK,OAAO,kBAAkB,KAAA,GAE9B,QAAQ,MAAM,WAAW,cAAc,KAAK,GAAG,KAAK,KAAK,UAAU;CAGzE;CAEA,QAAQ,MAAM,UAAU;CACxB,OAAO;AACT;;;;;AAWA,IAAM,4BAED,UAAU;CACb,MAAM,EAAE,WAAW,GAAG,gBAAgB;CACtC,MAAM,QAAQ,WAAW,KAAK,gBAAgB;CAC9C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,MAAM,mBAAmB,OAAO;CAChC,MAAM,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CACjD,MAAM,gBAAgB,KAAK,QAAQ,QACjC,kBAAkB,WAAW,GAAG,CAClC,CAAC,CAAC;CACF,MAAM,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,KAAK;CAClE,MAAM,kBAAkB,gBAAgB,KAAK,CAAC;CAE9C,UAAU,UAAU;EAClB;EACA,cAAc;GACZ,IAAI,CAAC,kBACH;GAEF,MAAM,SAAS,IAAI,IAAI,IAAI;GAC3B,MAAM,oBAAoB,CAAC,GAAG,iBAAiB,YAAY,CAAC,CAAC,QAC1D,QAAQ,CAAC,OAAO,IAAI,GAAG,CAC1B;GACA,iBAAiB,gBACf,kBAAkB,oBAAoB,CAAC,GAAG,mBAAmB,GAAG,IAAI,CACtE;EACF;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,GAAI;EACJ,eAAc;EACd,YAAY;EACK;EAEjB,UAAA,oBAAC,MAAD,EAAA,UACG,UAAU,OAAO,kBAAkB,gBAAgB,WAAW,EAC3D,CAAA;CACS,CAAA;AAErB;AAEA,IAAM,0BAA8B;CAClC,MAAM,YAAY,OAAkB,KAAA,CAAS;CAC7C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,OACE,oBAAC,KAAK,UAAN;EACE,IAAI,GAAG,mBAAmB;EAC1B,WAAW,UAAU,OAAO,WAAW;EACvC,qBAAqB;EACrB,gBAAgB,UAAU,SAAS,OAAO;EAC1C,WAAW,wBAAe;EAExB,WAAA,gBACA,oBAAC,0BAAD;GAA0B,GAAI;GAAwB;EAAY,CAAA;CAEvD,CAAA;AAEnB;;;;;AAMA,IAAa,6BACX,oBAAC,KAAK,aAAN;CACE,IAAI;CACJ,eAAc;CACd,WAAW,2BAAO;CAElB,UAAA,oBAAC,mBAAD,CAAoB,CAAA;AACJ,CAAA"}
+{"version":3,"file":"ContextMenuSelectAll.mjs","names":["locales","menuItemStyles","styles"],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { useContext, useRef, type FC } from \"react\";\nimport type { Key, Node } from \"@react-types/shared\";\nimport type { TreeState } from \"react-stately\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport menuItemStyles from \"@/components/MenuItem/MenuItem.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"../../ContextMenu.module.scss\";\n\nconst selectAllSectionId = \"flow--context-menu--select-all\";\n\n/**\n * Keys that share the menu's selection: enabled items at the top level and in\n * sections without a selection mode of their own.\n */\nconst getSelectableKeys = (state: TreeState<unknown>): Key[] => {\n  const keys: Key[] = [];\n\n  const collect = (nodes: Iterable<Node<unknown>>) => {\n    for (const node of nodes) {\n      if (node.type === \"item\") {\n        if (!state.selectionManager.isDisabled(node.key)) {\n          keys.push(node.key);\n        }\n      } else if (\n        node.type === \"section\" &&\n        node.key !== selectAllSectionId &&\n        node.props?.selectionMode === undefined\n      ) {\n        collect(state.collection.getChildren?.(node.key) ?? node.childNodes);\n      }\n    }\n  };\n\n  collect(state.collection);\n  return keys;\n};\n\ninterface SelectAll {\n  isEverySelected: boolean;\n  toggle: () => void;\n}\n\n/**\n * Rendered by the visible menu item. The collection renders the item's element\n * a second time outside the menu, where `MenuStateContext` is missing.\n */\nconst SelectAllMenuItemContent: FC<\n  Aria.MenuItemRenderProps & { selectAll: { current?: SelectAll } }\n> = (props) => {\n  const { selectAll, ...renderProps } = props;\n  const state = useContext(Aria.MenuStateContext);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  const selectionManager = state?.selectionManager;\n  const keys = state ? getSelectableKeys(state) : [];\n  const selectedCount = keys.filter((key) =>\n    selectionManager?.isSelected(key),\n  ).length;\n  const isEverySelected = keys.length > 0 && selectedCount === keys.length;\n  const isIndeterminate = selectedCount > 0 && !isEverySelected;\n\n  selectAll.current = {\n    isEverySelected,\n    toggle: () => {\n      if (!selectionManager) {\n        return;\n      }\n      const keySet = new Set(keys);\n      const otherSelectedKeys = [...selectionManager.selectedKeys].filter(\n        (key) => !keySet.has(key),\n      );\n      selectionManager.setSelectedKeys(\n        isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys],\n      );\n    },\n  };\n\n  return (\n    <MenuItemContent\n      {...renderProps}\n      selectionMode=\"multiple\"\n      isSelected={isEverySelected}\n      isIndeterminate={isIndeterminate}\n    >\n      <Text>\n        {formatter.format(isEverySelected ? \"deselectAll\" : \"selectAll\")}\n      </Text>\n    </MenuItemContent>\n  );\n};\n\nconst SelectAllMenuItem: FC = () => {\n  const selectAll = useRef<SelectAll>(undefined);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  return (\n    <Aria.MenuItem\n      id={`${selectAllSectionId}--item`}\n      textValue={formatter.format(\"selectAll\")}\n      shouldCloseOnSelect={false}\n      onAction={() => selectAll.current?.toggle()}\n      className={menuItemStyles.menuItem}\n    >\n      {(renderProps) => (\n        <SelectAllMenuItemContent {...renderProps} selectAll={selectAll} />\n      )}\n    </Aria.MenuItem>\n  );\n};\n\n/**\n * The entry lives in a section without selection, so pressing it runs its\n * action only and sets the whole selection in one change.\n */\nexport const ContextMenuSelectAll: FC = () => (\n  <Aria.MenuSection\n    id={selectAllSectionId}\n    selectionMode=\"none\"\n    className={styles.selectAll}\n  >\n    <SelectAllMenuItem />\n  </Aria.MenuSection>\n);\n\nexport default ContextMenuSelectAll;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,qBAAqB;;;;;AAM3B,IAAM,qBAAqB,UAAqC;CAC9D,MAAM,OAAc,CAAC;CAErB,MAAM,WAAW,UAAmC;EAClD,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QACZ;OAAA,CAAC,MAAM,iBAAiB,WAAW,KAAK,GAAG,GAC7C,KAAK,KAAK,KAAK,GAAG;EAAA,OAEf,IACL,KAAK,SAAS,aACd,KAAK,QAAQ,sBACb,KAAK,OAAO,kBAAkB,KAAA,GAE9B,QAAQ,MAAM,WAAW,cAAc,KAAK,GAAG,KAAK,KAAK,UAAU;CAGzE;CAEA,QAAQ,MAAM,UAAU;CACxB,OAAO;AACT;;;;;AAWA,IAAM,4BAED,UAAU;CACb,MAAM,EAAE,WAAW,GAAG,gBAAgB;CACtC,MAAM,QAAQ,WAAW,KAAK,gBAAgB;CAC9C,MAAM,YAAY,4BAA4BA,kBAAS,aAAa;CAEpE,MAAM,mBAAmB,OAAO;CAChC,MAAM,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CACjD,MAAM,gBAAgB,KAAK,QAAQ,QACjC,kBAAkB,WAAW,GAAG,CAClC,CAAC,CAAC;CACF,MAAM,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,KAAK;CAClE,MAAM,kBAAkB,gBAAgB,KAAK,CAAC;CAE9C,UAAU,UAAU;EAClB;EACA,cAAc;GACZ,IAAI,CAAC,kBACH;GAEF,MAAM,SAAS,IAAI,IAAI,IAAI;GAC3B,MAAM,oBAAoB,CAAC,GAAG,iBAAiB,YAAY,CAAC,CAAC,QAC1D,QAAQ,CAAC,OAAO,IAAI,GAAG,CAC1B;GACA,iBAAiB,gBACf,kBAAkB,oBAAoB,CAAC,GAAG,mBAAmB,GAAG,IAAI,CACtE;EACF;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,GAAI;EACJ,eAAc;EACd,YAAY;EACK;EAEjB,UAAA,oBAAC,MAAD,EAAA,UACG,UAAU,OAAO,kBAAkB,gBAAgB,WAAW,EAC3D,CAAA;CACS,CAAA;AAErB;AAEA,IAAM,0BAA8B;CAClC,MAAM,YAAY,OAAkB,KAAA,CAAS;CAC7C,MAAM,YAAY,4BAA4BA,kBAAS,aAAa;CAEpE,OACE,oBAAC,KAAK,UAAN;EACE,IAAI,GAAG,mBAAmB;EAC1B,WAAW,UAAU,OAAO,WAAW;EACvC,qBAAqB;EACrB,gBAAgB,UAAU,SAAS,OAAO;EAC1C,WAAWC,wBAAe;EAExB,WAAA,gBACA,oBAAC,0BAAD;GAA0B,GAAI;GAAwB;EAAY,CAAA;CAEvD,CAAA;AAEnB;;;;;AAMA,IAAa,6BACX,oBAAC,KAAK,aAAN;CACE,IAAI;CACJ,eAAc;CACd,WAAWC,2BAAO;CAElB,UAAA,oBAAC,mBAAD,CAAoB,CAAA;AACJ,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ContextualHelp.mjs","names":[],"sources":["../../../../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"sourcesContent":["import type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./ContextualHelp.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\n\nexport type ContextualHelpProps = Omit<PopoverProps, \"withTip\" | \"modality\">;\n\n/** @flr-generate all */\nexport const ContextualHelp = flowComponent(\"ContextualHelp\", (props) => {\n  const {\n    children,\n    controller: controllerFromProps,\n    ref: ignoredRef,\n    ...rest\n  } = props;\n\n  const controllerFromContext = useOverlayController(\"ContextualHelp\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const propsContext: PropsContext = {\n    // A contextual help holds a single, simple explanation — it does not need\n    // its own heading structure. A heading is rendered as a bold text label\n    // instead of an actual heading element.\n    Heading: {\n      level: 5,\n      elementType: \"span\",\n    },\n  };\n\n  return (\n    <Popover withTip {...rest} controller={controller}>\n      <PropsContextProvider props={propsContext}>\n        <div className={styles.contextualHelp}>{children}</div>\n      </PropsContextProvider>\n    </Popover>\n  );\n});\n\nexport default ContextualHelp;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,UACA,YAAY,qBACZ,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,wBAAwB,qBAAqB,kBAAkB,EACnE,4BAA4B,KAC9B,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B,EAIjC,SAAS;EACP,OAAO;EACP,aAAa;CACf,EACF;CAEA,OACE,oBAAC,SAAD;EAAS,SAAA;EAAQ,GAAI;EAAkB;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,OAAD;IAAK,WAAW,8BAAO;IAAiB;GAAc,CAAA;EAClC,CAAA;CACf,CAAA;AAEb,CAAC"}
+{"version":3,"file":"ContextualHelp.mjs","names":["styles"],"sources":["../../../../../../../src/components/ContextualHelp/ContextualHelp.tsx"],"sourcesContent":["import type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./ContextualHelp.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\n\nexport type ContextualHelpProps = Omit<PopoverProps, \"withTip\" | \"modality\">;\n\n/** @flr-generate all */\nexport const ContextualHelp = flowComponent(\"ContextualHelp\", (props) => {\n  const {\n    children,\n    controller: controllerFromProps,\n    ref: ignoredRef,\n    ...rest\n  } = props;\n\n  const controllerFromContext = useOverlayController(\"ContextualHelp\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const propsContext: PropsContext = {\n    // A contextual help holds a single, simple explanation — it does not need\n    // its own heading structure. A heading is rendered as a bold text label\n    // instead of an actual heading element.\n    Heading: {\n      level: 5,\n      elementType: \"span\",\n    },\n  };\n\n  return (\n    <Popover withTip {...rest} controller={controller}>\n      <PropsContextProvider props={propsContext}>\n        <div className={styles.contextualHelp}>{children}</div>\n      </PropsContextProvider>\n    </Popover>\n  );\n});\n\nexport default ContextualHelp;\n"],"mappings":";;;;;;;;;;AAWA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,UACA,YAAY,qBACZ,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,wBAAwB,qBAAqB,kBAAkB,EACnE,4BAA4B,KAC9B,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B,EAIjC,SAAS;EACP,OAAO;EACP,aAAa;CACf,EACF;CAEA,OACE,oBAAC,SAAD;EAAS,SAAA;EAAQ,GAAI;EAAkB;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,OAAD;IAAK,WAAWA,8BAAO;IAAiB;GAAc,CAAA;EAClC,CAAA;CACf,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextualHelpTrigger.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { IconInfo } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContextualHelpTriggerProps extends OverlayTriggerProps {\n  /**\n   * The subject the contextual help is about — not a complete accessibility\n   * label. It is inserted into the localized template \"More information about\n   * {subject}\", which becomes the accessibility label of the trigger.\n   */\n  subject?: string;\n  /**\n   * A complete accessibility label for the trigger, replacing the label built\n   * from `subject`. Prefer `subject`, which stays localized — reach for this\n   * only when the template does not fit.\n   */\n  \"aria-label\"?: string;\n}\n\n/** @flr-generate all */\nexport const ContextualHelpTrigger = flowComponent(\n  \"ContextualHelpTrigger\",\n  (props) => {\n    const {\n      children,\n      subject,\n      \"aria-label\": ariaLabelFromProps,\n      ...triggerProps\n    } = props;\n    const stringFormatter = useLocalizedStringFormatter(\n      locales,\n      \"ContextualHelpTrigger\",\n    );\n\n    const ariaLabel =\n      ariaLabelFromProps ??\n      (subject === undefined\n        ? stringFormatter.format(\"moreInformation\")\n        : stringFormatter.format(\"moreInformationAbout\", { subject }));\n\n    const propsContext: PropsContext = {\n      Button: {\n        \"aria-label\": ariaLabel,\n        children: <IconInfo />,\n        size: \"s\",\n        variant: \"plain\",\n        ariaSlot: null,\n      },\n    };\n\n    return (\n      <OverlayTrigger\n        overlayType=\"ContextualHelp\"\n        {...triggerProps}\n        component={Aria.DialogTrigger}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </OverlayTrigger>\n    );\n  },\n  { type: \"provider\" },\n);\n\nexport default ContextualHelpTrigger;\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAa,wBAAwB,cACnC,0BACC,UAAU;CACT,MAAM,EACJ,UACA,SACA,cAAc,oBACd,GAAG,iBACD;CACJ,MAAM,kBAAkB,4BACtB,kBACA,uBACF;CAQA,MAAM,eAA6B,EACjC,QAAQ;EACN,cAPF,uBACC,YAAY,KAAA,IACT,gBAAgB,OAAO,iBAAiB,IACxC,gBAAgB,OAAO,wBAAwB,EAAE,QAAQ,CAAC;EAK5D,UAAU,oBAAC,UAAD,CAAW,CAAA;EACrB,MAAM;EACN,SAAS;EACT,UAAU;CACZ,EACF;CAEA,OACE,oBAAC,gBAAD;EACE,aAAY;EACZ,GAAI;EACJ,WAAW,KAAK;EAEhB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACR,CAAA;AAEpB,GACA,EAAE,MAAM,WAAW,CACrB"}
+{"version":3,"file":"ContextualHelpTrigger.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { IconInfo } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContextualHelpTriggerProps extends OverlayTriggerProps {\n  /**\n   * The subject the contextual help is about — not a complete accessibility\n   * label. It is inserted into the localized template \"More information about\n   * {subject}\", which becomes the accessibility label of the trigger.\n   */\n  subject?: string;\n  /**\n   * A complete accessibility label for the trigger, replacing the label built\n   * from `subject`. Prefer `subject`, which stays localized — reach for this\n   * only when the template does not fit.\n   */\n  \"aria-label\"?: string;\n}\n\n/** @flr-generate all */\nexport const ContextualHelpTrigger = flowComponent(\n  \"ContextualHelpTrigger\",\n  (props) => {\n    const {\n      children,\n      subject,\n      \"aria-label\": ariaLabelFromProps,\n      ...triggerProps\n    } = props;\n    const stringFormatter = useLocalizedStringFormatter(\n      locales,\n      \"ContextualHelpTrigger\",\n    );\n\n    const ariaLabel =\n      ariaLabelFromProps ??\n      (subject === undefined\n        ? stringFormatter.format(\"moreInformation\")\n        : stringFormatter.format(\"moreInformationAbout\", { subject }));\n\n    const propsContext: PropsContext = {\n      Button: {\n        \"aria-label\": ariaLabel,\n        children: <IconInfo />,\n        size: \"s\",\n        variant: \"plain\",\n        ariaSlot: null,\n      },\n    };\n\n    return (\n      <OverlayTrigger\n        overlayType=\"ContextualHelp\"\n        {...triggerProps}\n        component={Aria.DialogTrigger}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </OverlayTrigger>\n    );\n  },\n  { type: \"provider\" },\n);\n\nexport default ContextualHelpTrigger;\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAa,wBAAwB,cACnC,0BACC,UAAU;CACT,MAAM,EACJ,UACA,SACA,cAAc,oBACd,GAAG,iBACD;CACJ,MAAM,kBAAkB,4BACtBA,kBACA,uBACF;CAQA,MAAM,eAA6B,EACjC,QAAQ;EACN,cAPF,uBACC,YAAY,KAAA,IACT,gBAAgB,OAAO,iBAAiB,IACxC,gBAAgB,OAAO,wBAAwB,EAAE,QAAQ,CAAC;EAK5D,UAAU,oBAAC,UAAD,CAAW,CAAA;EACrB,MAAM;EACN,SAAS;EACT,UAAU;CACZ,EACF;CAEA,OACE,oBAAC,gBAAD;EACE,aAAY;EACZ,GAAI;EACJ,WAAW,KAAK;EAEhB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACR,CAAA;AAEpB,GACA,EAAE,MAAM,WAAW,CACrB"}

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends\n    Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text?: string;\n  /**\n   * Called with the copied text once it has been written to the clipboard. Not\n   * called when copying fails.\n   */\n  onCopy?: (text: string) => void;\n}\n\n/** @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text = \"\",\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    onCopy,\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n  const tooltip = stringFormatter.format(\"copy\");\n\n  const copyValue = async () => {\n    const copiedText = onlyText(text);\n    if (await copy(copiedText)) {\n      onCopy?.(copiedText);\n    }\n  };\n\n  return (\n    <TooltipTrigger>\n      <Action onAction={copyValue} showFeedback>\n        <Button\n          aria-label={tooltip}\n          {...buttonProps}\n          ref={ref}\n          variant={variant}\n          color={color}\n        >\n          <IconCopy />\n        </Button>\n      </Action>\n      <Tooltip>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,QACA,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4B,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,YAAY,YAAY;EAC5B,MAAM,aAAa,SAAS,IAAI;EAChC,IAAI,MAAM,KAAK,UAAU,GACvB,SAAS,UAAU;CAEvB;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"CopyButton.mjs","names":["locales"],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends\n    Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text?: string;\n  /**\n   * Called with the copied text once it has been written to the clipboard. Not\n   * called when copying fails.\n   */\n  onCopy?: (text: string) => void;\n}\n\n/** @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text = \"\",\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    onCopy,\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n  const tooltip = stringFormatter.format(\"copy\");\n\n  const copyValue = async () => {\n    const copiedText = onlyText(text);\n    if (await copy(copiedText)) {\n      onCopy?.(copiedText);\n    }\n  };\n\n  return (\n    <TooltipTrigger>\n      <Action onAction={copyValue} showFeedback>\n        <Button\n          aria-label={tooltip}\n          {...buttonProps}\n          ref={ref}\n          variant={variant}\n          color={color}\n        >\n          <IconCopy />\n        </Button>\n      </Action>\n      <Tooltip>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,QACA,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4BA,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,YAAY,YAAY;EAC5B,MAAM,aAAa,SAAS,IAAI;EAChC,IAAI,MAAM,KAAK,UAAU,GACvB,SAAS,UAAU;CAEvB;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import CounterBadge_module_default from "./CounterBadge.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,12 +9,14 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var CounterBadge = flowComponent("CounterBadge", (props) => {
 	const { className, count, ref, ...rest } = props;
-	const rootClassName = clsx(CounterBadge_module_default.counterBadge, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(CounterBadge_module_default.counterBadge, isSkeleton && CounterBadge_module_default.skeleton, className);
 	return /* @__PURE__ */ jsx("span", {
 		className: rootClassName,
 		...rest,
 		"aria-hidden": true,
 		ref,
+		inert: isSkeleton || void 0,
 		children: count && count > 99 ? "99+" : count
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.mjs","names":[],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.counterBadge, className);\n\n  return (\n    <span className={rootClassName} {...rest} aria-hidden ref={ref}>\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,WAAW,OAAO,KAAK,GAAG,SAAS;CAE3C,MAAM,gBAAgB,KAAK,4BAAO,cAAc,SAAS;CAEzD,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAAM,eAAA;EAAiB;EACxD,UAAA,SAAS,QAAQ,KAAK,QAAQ;CAC3B,CAAA;AAEV,CAAC"}
+{"version":3,"file":"CounterBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.counterBadge,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <span\n      className={rootClassName}\n      {...rest}\n      aria-hidden\n      ref={ref}\n      inert={isSkeleton || undefined}\n    >\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"mappings":";;;;;;;;;AAcA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,WAAW,OAAO,KAAK,GAAG,SAAS;CAE3C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,4BAAO,cACP,cAAcA,4BAAO,UACrB,SACF;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,GAAI;EACJ,eAAA;EACK;EACL,OAAO,cAAc,KAAA;EAEpB,UAAA,SAAS,QAAQ,KAAK,QAAQ;CAC3B,CAAA;AAEV,CAAC"}

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

@@ -2,8 +2,14 @@
 /* */
 //#region src/components/CounterBadge/CounterBadge.module.scss
 var counterBadge = "flow--counter-badge";
-var CounterBadge_module_default = { counterBadge };
+var skeleton = "flow--counter-badge--skeleton";
+var CounterBadge_module_default = {
+	counterBadge,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--counter-badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--counter-badge--skeleton-text-shimmer"
+};
 //#endregion
-export { counterBadge, CounterBadge_module_default as default };
+export { counterBadge, CounterBadge_module_default as default, skeleton };
 
 //# sourceMappingURL=CounterBadge.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.module.scss"],"sourcesContent":[".counterBadge {\n  font-size: var(--counter-badge--font-size);\n  font-weight: var(--counter-badge--font-weight);\n  line-height: 1;\n  color: var(--counter-badge--content-color);\n  background-color: var(--counter-badge--background-color);\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--counter-badge--height);\n  border-radius: calc(var(--counter-badge--height) / 2);\n  border-width: var(--counter-badge--border-width);\n  border-style: var(--counter-badge--border-style);\n  border-color: var(--counter-badge--border-color);\n  padding-inline: var(--counter-badge--padding-inline);\n\n  &:not(:empty) {\n    min-width: var(--counter-badge--height);\n  }\n\n  &:empty {\n    padding: 0;\n    height: var(--counter-badge--height-empty);\n    width: var(--counter-badge--height-empty);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CounterBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.counterBadge {\n  font-size: var(--counter-badge--font-size);\n  font-weight: var(--counter-badge--font-weight);\n  line-height: 1;\n  color: var(--counter-badge--content-color);\n  background-color: var(--counter-badge--background-color);\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--counter-badge--height);\n  border-radius: calc(var(--counter-badge--height) / 2);\n  border-width: var(--counter-badge--border-width);\n  border-style: var(--counter-badge--border-style);\n  border-color: var(--counter-badge--border-color);\n  padding-inline: var(--counter-badge--padding-inline);\n\n  &:not(:empty) {\n    min-width: var(--counter-badge--height);\n  }\n\n  &:empty {\n    padding: 0;\n    height: var(--counter-badge--height-empty);\n    width: var(--counter-badge--height-empty);\n  }\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: calc(var(--counter-badge--height) / 2);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"CountryOptions.mjs","names":[],"sources":["../../../../../../../src/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\nimport { all, type CountryData } from \"country-codes-list\";\nimport OptionView from \"@/views/OptionView\";\nimport { uniqueBy } from \"remeda\";\n\nexport type Country = CountryData & {\n  name: string;\n  code: string;\n};\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends\n    PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst defaultFilterBy: CountryFilterFn = () => true;\n\n// see https://github.com/Synergy-Shock/country-codes-list/issues/37\nconst uniqueCountries = uniqueBy(all(), (c) => c.countryCode);\n\nexport const CountryOptions: FC<CountryOptionsProps> = (props) => {\n  const { filterBy = defaultFilterBy, sortBy = defaultSortBy } = props;\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"CountryOptions\",\n  );\n\n  return useMemo(() => {\n    return uniqueCountries\n      .map((countryData) => ({\n        ...countryData,\n        code: countryData.countryCode,\n        name: stringFormatter.format(`countryCode.${countryData.countryCode}`),\n      }))\n      .filter(filterBy)\n      .sort(sortBy)\n      .map((country) => (\n        <OptionView\n          key={country.countryNameEn}\n          value={country.countryCode}\n          textValue={country.name}\n        >\n          {country.name}\n        </OptionView>\n      ));\n  }, [stringFormatter]);\n};\n\nexport default CountryOptions;\n"],"mappings":";;;;;;;;;;AA0BA,IAAM,iBAAgC,MAAM,UAC1C,KAAK,KAAK,cAAc,MAAM,IAAI;AACpC,IAAM,wBAAyC;AAG/C,IAAM,kBAAkB,SAAS,IAAI,IAAI,MAAM,EAAE,WAAW;AAE5D,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,iBAAiB,SAAS,kBAAkB;CAC/D,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,OAAO,cAAc;EACnB,OAAO,gBACJ,KAAK,iBAAiB;GACrB,GAAG;GACH,MAAM,YAAY;GAClB,MAAM,gBAAgB,OAAO,eAAe,YAAY,aAAa;EACvE,EAAE,CAAC,CACF,OAAO,QAAQ,CAAC,CAChB,KAAK,MAAM,CAAC,CACZ,KAAK,YACJ,oBAAC,YAAD;GAEE,OAAO,QAAQ;GACf,WAAW,QAAQ;GAElB,UAAA,QAAQ;EACC,GALL,QAAQ,aAKH,CACb;CACL,GAAG,CAAC,eAAe,CAAC;AACtB"}
+{"version":3,"file":"CountryOptions.mjs","names":["locales"],"sources":["../../../../../../../src/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\nimport { all, type CountryData } from \"country-codes-list\";\nimport OptionView from \"@/views/OptionView\";\nimport { uniqueBy } from \"remeda\";\n\nexport type Country = CountryData & {\n  name: string;\n  code: string;\n};\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends\n    PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst defaultFilterBy: CountryFilterFn = () => true;\n\n// see https://github.com/Synergy-Shock/country-codes-list/issues/37\nconst uniqueCountries = uniqueBy(all(), (c) => c.countryCode);\n\nexport const CountryOptions: FC<CountryOptionsProps> = (props) => {\n  const { filterBy = defaultFilterBy, sortBy = defaultSortBy } = props;\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"CountryOptions\",\n  );\n\n  return useMemo(() => {\n    return uniqueCountries\n      .map((countryData) => ({\n        ...countryData,\n        code: countryData.countryCode,\n        name: stringFormatter.format(`countryCode.${countryData.countryCode}`),\n      }))\n      .filter(filterBy)\n      .sort(sortBy)\n      .map((country) => (\n        <OptionView\n          key={country.countryNameEn}\n          value={country.countryCode}\n          textValue={country.name}\n        >\n          {country.name}\n        </OptionView>\n      ));\n  }, [stringFormatter]);\n};\n\nexport default CountryOptions;\n"],"mappings":";;;;;;;;;;AA0BA,IAAM,iBAAgC,MAAM,UAC1C,KAAK,KAAK,cAAc,MAAM,IAAI;AACpC,IAAM,wBAAyC;AAG/C,IAAM,kBAAkB,SAAS,IAAI,IAAI,MAAM,EAAE,WAAW;AAE5D,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,iBAAiB,SAAS,kBAAkB;CAC/D,MAAM,kBAAkB,4BACtBA,kBACA,gBACF;CAEA,OAAO,cAAc;EACnB,OAAO,gBACJ,KAAK,iBAAiB;GACrB,GAAG;GACH,MAAM,YAAY;GAClB,MAAM,gBAAgB,OAAO,eAAe,YAAY,aAAa;EACvE,EAAE,CAAC,CACF,OAAO,QAAQ,CAAC,CAChB,KAAK,MAAM,CAAC,CACZ,KAAK,YACJ,oBAAC,YAAD;GAEE,OAAO,QAAQ;GACf,WAAW,QAAQ;GAElB,UAAA,QAAQ;EACC,GALL,QAAQ,aAKH,CACb;CACL,GAAG,CAAC,eAAe,CAAC;AACtB"}

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../Popover/Popover.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { DateInput } from "./components/DateInput/DateInput.mjs";
 import { Calendar } from "../Calendar/Calendar.mjs";
 import DatePicker_module_default from "./DatePicker.module.mjs";
@@ -15,13 +16,13 @@ import * as Aria from "react-aria-components";
 //#region src/components/DatePicker/DatePicker.tsx
 /** @flr-generate all */
 var DatePicker = flowComponent("DatePicker", (props) => {
-	const { children, className, onChange, ref, ...rest } = props;
-	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { children, className, onChange, ref, ...rest } = useControlledHostValueProps(props, null);
+	const popoverController = useOverlayController("Popover", { reuseControllerFromContext: false });
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.DatePicker, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAAS;CAExD,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAW,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"DatePicker.mjs","names":["styles"],"sources":["../../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  // `null` is what react-aria's date picker state uses for \"no date\"\n  const { children, className, onChange, ref, ...rest } =\n    useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...controlProps}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAE/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAC7C,4BAA4B,OAAO,IAAI;CAEzC,MAAM,oBAAoB,qBAAqB,WAAW,EACxD,4BAA4B,MAC9B,CAAC;CACD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAWA,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

package/dist/js/packages/components/src/components/DatePicker/components/DateInput/DateInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DatePicker/components/DateInput/DateInput.tsx"],"sourcesContent":["import { type FC, type Ref } from \"react\";\nimport styles from \"./DateInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport Input from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport const DateInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateInput}>\n      <Input ref={ref} />\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateInput;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,yBAAO;EAA9B,UAAA,CACE,oBAAC,aAAD,EAAY,IAAM,CAAA,GAClB,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}
+{"version":3,"file":"DateInput.mjs","names":["styles","Input"],"sources":["../../../../../../../../../src/components/DatePicker/components/DateInput/DateInput.tsx"],"sourcesContent":["import { type FC, type Ref } from \"react\";\nimport styles from \"./DateInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport Input from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport const DateInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateInput}>\n      <Input ref={ref} />\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateInput;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAWA,yBAAO;EAA9B,UAAA,CACE,oBAACC,aAAD,EAAY,IAAM,CAAA,GAClB,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}

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

@@ -16,15 +16,16 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var DateRangePicker = flowComponent("DateRangePicker", (props) => {
 	const { children, className, onChange, ref, withDatePickerPresets = false, ...rest } = useControlledHostValueProps(props, null);
-	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const popoverController = useOverlayController("Popover", { reuseControllerFromContext: false });
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const onDatePickerChange = (value) => {
 		if (onChange) onChange(value);
 		popoverController.close();
 	};
 	return /* @__PURE__ */ jsxs(Aria.DateRangePicker, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":[],"sources":["../../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EALZ,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAW,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}
+{"version":3,"file":"DateRangePicker.mjs","names":["styles"],"sources":["../../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,WAAW,EACxD,4BAA4B,MAC9B,CAAC;CACD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EANZ,UAAA,CAQE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAWA,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div className={styles.inputs}>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,8BAAO;GAAvB,UAAA;IACE,oBAAC,WAAD;KAAW,MAAK;KAAa;IAAM,CAAA;IACnC,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAO,CAAA;IAChC,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;GACpB;EACL,CAAA,GAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}
+{"version":3,"file":"DateRangeInput.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div className={styles.inputs}>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAWA,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAWA,8BAAO;GAAvB,UAAA;IACE,oBAAC,WAAD;KAAW,MAAK;KAAa;IAAM,CAAA;IACnC,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAO,CAAA;IAChC,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;GACpB;EACL,CAAA,GAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        <Aria.ProgressBar\n          className={rootClassName}\n          value={segmentsTotalValue ?? value}\n          {...rest}\n        >\n          <Donut\n            value={segmentsTotalValue ?? value}\n            segments={segments}\n            size={size}\n            maxValue={maxValue}\n          />\n          <DonutChartValue\n            value={segmentsTotalValue ?? value}\n            formatOptions={formatOptions}\n          >\n            {children}\n          </DonutChartValue>\n        </Aria.ProgressBar>\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;AAsCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,0BAAO,YACP,SAAS,OAAO,0BAAO,WACvB,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAK,0BAAO,qBAAqB,0BAAO,eAAe;GAAvE,UAAA,CACE,qBAAC,KAAK,aAAN;IACE,WAAW;IACX,OAAO,sBAAsB;IAC7B,GAAI;IAHN,UAAA,CAKE,oBAAC,OAAD;KACE,OAAO,sBAAsB;KACnB;KACJ;KACI;IACX,CAAA,GACD,oBAAC,iBAAD;KACE,OAAO,sBAAsB;KACd;KAEd;IACc,CAAA,CACD;GAEjB,CAAA,GAAA,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}
+{"version":3,"file":"DonutChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalWithCustomColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends\n    Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithChildren {\n  /** The status the donut chart is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        <Aria.ProgressBar\n          className={rootClassName}\n          value={segmentsTotalValue ?? value}\n          {...rest}\n        >\n          <Donut\n            value={segmentsTotalValue ?? value}\n            segments={segments}\n            size={size}\n            maxValue={maxValue}\n          />\n          <DonutChartValue\n            value={segmentsTotalValue ?? value}\n            formatOptions={formatOptions}\n          >\n            {children}\n          </DonutChartValue>\n        </Aria.ProgressBar>\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"mappings":";;;;;;;;;;;;AAsCA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,OAAO,KACP,SAAS,QACT,WACA,OACA,UACA,UACA,eACA,aAAa,MACb,iBAAiB,SACjB,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,SAAS,OAAOA,0BAAO,WACvBA,0BAAO,SACP,SACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,MAAD;EAAM,IAAI,cAAc;EACtB,UAAA,qBAAC,OAAD;GAAK,WAAW,KAAKA,0BAAO,qBAAqBA,0BAAO,eAAe;GAAvE,UAAA,CACE,qBAAC,KAAK,aAAN;IACE,WAAW;IACX,OAAO,sBAAsB;IAC7B,GAAI;IAHN,UAAA,CAKE,oBAAC,OAAD;KACE,OAAO,sBAAsB;KACnB;KACJ;KACI;IACX,CAAA,GACD,oBAAC,iBAAD;KACE,OAAO,sBAAsB;KACd;KAEd;IACc,CAAA,CACD;GAEjB,CAAA,GAAA,cAAc,YACb,oBAAC,kBAAD;IACc;IACF;IACK;GAChB,CAAA,CAEA;;CACD,CAAA;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"Donut.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/Donut.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport { DonutChartFill } from \"@/components/DonutChart/components/DonutChartFill\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<\n  DonutChartProps,\n  \"segments\" | \"size\" | \"maxValue\"\n> {\n  value?: number;\n}\n\nexport const Donut: FC<Props> = (props) => {\n  const { value = 0, segments, size, maxValue: maxValueFromProps } = props;\n\n  const strokeWidth = 0.5;\n  const fillWidth = size === \"m\" ? 8 : 12;\n  const center = fillWidth * 4;\n  const radius = center - fillWidth / 2;\n  const maxValue = maxValueFromProps ?? 100;\n\n  return (\n    <>\n      <svg\n        width={center * 4}\n        height={center * 4}\n        viewBox={`0 0 ${center * 2} ${center * 2}`}\n        fill=\"none\"\n        strokeWidth={fillWidth}\n      >\n        <circle\n          className={styles.background}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={fillWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - fillWidth + strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n\n        <DonutChartFill\n          radius={radius}\n          center={center}\n          value={value < maxValue ? value : maxValue}\n          segments={segments}\n          maxValue={maxValue}\n        />\n      </svg>\n    </>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,SAAoB,UAAU;CACzC,MAAM,EAAE,QAAQ,GAAG,UAAU,MAAM,UAAU,sBAAsB;CAEnE,MAAM,cAAc;CACpB,MAAM,YAAY,SAAS,MAAM,IAAI;CACrC,MAAM,SAAS,YAAY;CAC3B,MAAM,SAAS,SAAS,YAAY;CACpC,MAAM,WAAW,qBAAqB;CAEtC,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,OAAD;EACE,OAAO,SAAS;EAChB,QAAQ,SAAS;EACjB,SAAS,OAAO,SAAS,EAAE,GAAG,SAAS;EACvC,MAAK;EACL,aAAa;EALf,UAAA;GAOE,oBAAC,UAAD;IACE,WAAW,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,aAAa;GACd,CAAA;GACD,oBAAC,UAAD;IACE,WAAW,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG,SAAS,cAAc;IACb;GACd,CAAA;GACD,oBAAC,UAAD;IACE,WAAW,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG,SAAS,YAAY,cAAc;IACzB;GACd,CAAA;GAED,oBAAC,gBAAD;IACU;IACA;IACR,OAAO,QAAQ,WAAW,QAAQ;IACxB;IACA;GACX,CAAA;EACE;CACL,CAAA,EAAA,CAAA;AAEN"}
+{"version":3,"file":"Donut.mjs","names":["_Fragment","styles"],"sources":["../../../../../../../../src/components/DonutChart/components/Donut.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport { DonutChartFill } from \"@/components/DonutChart/components/DonutChartFill\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<\n  DonutChartProps,\n  \"segments\" | \"size\" | \"maxValue\"\n> {\n  value?: number;\n}\n\nexport const Donut: FC<Props> = (props) => {\n  const { value = 0, segments, size, maxValue: maxValueFromProps } = props;\n\n  const strokeWidth = 0.5;\n  const fillWidth = size === \"m\" ? 8 : 12;\n  const center = fillWidth * 4;\n  const radius = center - fillWidth / 2;\n  const maxValue = maxValueFromProps ?? 100;\n\n  return (\n    <>\n      <svg\n        width={center * 4}\n        height={center * 4}\n        viewBox={`0 0 ${center * 2} ${center * 2}`}\n        fill=\"none\"\n        strokeWidth={fillWidth}\n      >\n        <circle\n          className={styles.background}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={fillWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - fillWidth + strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n\n        <DonutChartFill\n          radius={radius}\n          center={center}\n          value={value < maxValue ? value : maxValue}\n          segments={segments}\n          maxValue={maxValue}\n        />\n      </svg>\n    </>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,SAAoB,UAAU;CACzC,MAAM,EAAE,QAAQ,GAAG,UAAU,MAAM,UAAU,sBAAsB;CAEnE,MAAM,cAAc;CACpB,MAAM,YAAY,SAAS,MAAM,IAAI;CACrC,MAAM,SAAS,YAAY;CAC3B,MAAM,SAAS,SAAS,YAAY;CACpC,MAAM,WAAW,qBAAqB;CAEtC,OACE,oBAAAA,UAAA,EAAA,UACE,qBAAC,OAAD;EACE,OAAO,SAAS;EAChB,QAAQ,SAAS;EACjB,SAAS,OAAO,SAAS,EAAE,GAAG,SAAS;EACvC,MAAK;EACL,aAAa;EALf,UAAA;GAOE,oBAAC,UAAD;IACE,WAAWC,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,aAAa;GACd,CAAA;GACD,oBAAC,UAAD;IACE,WAAWA,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG,SAAS,cAAc;IACb;GACd,CAAA;GACD,oBAAC,UAAD;IACE,WAAWA,0BAAO;IAClB,IAAI;IACJ,IAAI;IACJ,GAAG,SAAS,YAAY,cAAc;IACzB;GACd,CAAA;GAED,oBAAC,gBAAD;IACU;IACA;IACR,OAAO,QAAQ,WAAW,QAAQ;IACxB;IACA;GACX,CAAA;EACE;CACL,CAAA,EAAA,CAAA;AAEN"}

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartFill.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { CSSProperties, FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n  center: number;\n  value?: number;\n  radius: number;\n  maxValue: number;\n}\n\n/**\n * `pathLength=\"100\"` measures the stroke in percent, so the stylesheet draws\n * and rotates each circle from its share and its offset alone – and the load-in\n * keyframes can grow every segment out of 12 o'clock.\n */\nconst fillStyle = (percent: number, offsetPercent: number): CSSProperties => ({\n  \"--donut-chart--percent\": percent,\n  \"--donut-chart--offset\": offsetPercent,\n});\n\nexport const DonutChartFill: FC<Props> = (props) => {\n  const { center, value = 0, radius, segments, maxValue } = props;\n\n  const percent = (100 / maxValue) * value;\n\n  if (!segments) {\n    return (\n      <circle\n        className={styles.fill}\n        cx={center}\n        cy={center}\n        r={radius}\n        pathLength={100}\n        style={fillStyle(percent, 0)}\n      />\n    );\n  }\n\n  let offsetPercent = 0;\n\n  return segments.map((s, i) => {\n    const segmentPercent = (100 / maxValue) * s.value;\n\n    const currentOffsetPercent = offsetPercent;\n\n    offsetPercent = offsetPercent + segmentPercent;\n\n    const color =\n      !s.color || isCategoricalColor(s.color)\n        ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n        : s.color;\n\n    // Index keys: a segment added after mount animates alone out of 12 o'clock,\n    // over the segments already there.\n    return (\n      <circle\n        key={i}\n        className={styles.segment}\n        cx={center}\n        cy={center}\n        r={radius}\n        pathLength={100}\n        stroke={color}\n        style={fillStyle(segmentPercent, currentOffsetPercent)}\n      />\n    );\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,aAAa,SAAiB,mBAA0C;CAC5E,0BAA0B;CAC1B,yBAAyB;AAC3B;AAEA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAAa;CAE1D,MAAM,UAAW,MAAM,WAAY;CAEnC,IAAI,CAAC,UACH,OACE,oBAAC,UAAD;EACE,WAAW,0BAAO;EAClB,IAAI;EACJ,IAAI;EACJ,GAAG;EACH,YAAY;EACZ,OAAO,UAAU,SAAS,CAAC;CAC5B,CAAA;CAIL,IAAI,gBAAgB;CAEpB,OAAO,SAAS,KAAK,GAAG,MAAM;EAC5B,MAAM,iBAAkB,MAAM,WAAY,EAAE;EAE5C,MAAM,uBAAuB;EAE7B,gBAAgB,gBAAgB;EAEhC,MAAM,QACJ,CAAC,EAAE,SAAS,mBAAmB,EAAE,KAAK,IAClC,6BAA6B,EAAE,SAAS,2BAA2B,CAAC,EAAE,KACtE,EAAE;EAIR,OACE,oBAAC,UAAD;GAEE,WAAW,0BAAO;GAClB,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,YAAY;GACZ,QAAQ;GACR,OAAO,UAAU,gBAAgB,oBAAoB;EACtD,GARM,CAQN;CAEL,CAAC;AACH"}
+{"version":3,"file":"DonutChartFill.mjs","names":["styles"],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { CSSProperties, FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n  center: number;\n  value?: number;\n  radius: number;\n  maxValue: number;\n}\n\n/**\n * `pathLength=\"100\"` measures the stroke in percent, so the stylesheet draws\n * and rotates each circle from its share and its offset alone – and the load-in\n * keyframes can grow every segment out of 12 o'clock.\n */\nconst fillStyle = (percent: number, offsetPercent: number): CSSProperties => ({\n  \"--donut-chart--percent\": percent,\n  \"--donut-chart--offset\": offsetPercent,\n});\n\nexport const DonutChartFill: FC<Props> = (props) => {\n  const { center, value = 0, radius, segments, maxValue } = props;\n\n  const percent = (100 / maxValue) * value;\n\n  if (!segments) {\n    return (\n      <circle\n        className={styles.fill}\n        cx={center}\n        cy={center}\n        r={radius}\n        pathLength={100}\n        style={fillStyle(percent, 0)}\n      />\n    );\n  }\n\n  let offsetPercent = 0;\n\n  return segments.map((s, i) => {\n    const segmentPercent = (100 / maxValue) * s.value;\n\n    const currentOffsetPercent = offsetPercent;\n\n    offsetPercent = offsetPercent + segmentPercent;\n\n    const color =\n      !s.color || isCategoricalColor(s.color)\n        ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n        : s.color;\n\n    // Index keys: a segment added after mount animates alone out of 12 o'clock,\n    // over the segments already there.\n    return (\n      <circle\n        key={i}\n        className={styles.segment}\n        cx={center}\n        cy={center}\n        r={radius}\n        pathLength={100}\n        stroke={color}\n        style={fillStyle(segmentPercent, currentOffsetPercent)}\n      />\n    );\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,aAAa,SAAiB,mBAA0C;CAC5E,0BAA0B;CAC1B,yBAAyB;AAC3B;AAEA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAAa;CAE1D,MAAM,UAAW,MAAM,WAAY;CAEnC,IAAI,CAAC,UACH,OACE,oBAAC,UAAD;EACE,WAAWA,0BAAO;EAClB,IAAI;EACJ,IAAI;EACJ,GAAG;EACH,YAAY;EACZ,OAAO,UAAU,SAAS,CAAC;CAC5B,CAAA;CAIL,IAAI,gBAAgB;CAEpB,OAAO,SAAS,KAAK,GAAG,MAAM;EAC5B,MAAM,iBAAkB,MAAM,WAAY,EAAE;EAE5C,MAAM,uBAAuB;EAE7B,gBAAgB,gBAAgB;EAEhC,MAAM,QACJ,CAAC,EAAE,SAAS,mBAAmB,EAAE,KAAK,IAClC,6BAA6B,EAAE,SAAS,2BAA2B,CAAC,EAAE,KACtE,EAAE;EAIR,OACE,oBAAC,UAAD;GAEE,WAAWA,0BAAO;GAClB,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,YAAY;GACZ,QAAQ;GACR,OAAO,UAAU,gBAAgB,oBAAoB;EACtD,GARM,CAQN;CAEL,CAAC;AACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartLegend.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartLegend.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ntype Props = Pick<DonutChartProps, \"segments\" | \"showLegend\" | \"formatOptions\">;\n\nexport const DonutChartLegend: 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        const formattedValue = formatOptions\n          ? formatter.format(s.value)\n          : `${s.value} %`;\n\n        return (\n          <LegendItem\n            key={s.title}\n            color={s.color ?? getCategoricalColorByIndex(i)}\n          >{`${s.title} (${s.valueText ?? formattedValue})`}</LegendItem>\n        );\n      })}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,WAAW,0BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAAM;GACtB,MAAM,iBAAiB,gBACnB,UAAU,OAAO,EAAE,KAAK,IACxB,GAAG,EAAE,MAAM;GAEf,OACE,oBAAC,YAAD;IAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;IAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,aAAa,eAAe;GAAe,GAFvD,EAAE,KAEqD;EAElE,CAAC;CACK,CAAA;AAEZ"}
+{"version":3,"file":"DonutChartLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartLegend.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ntype Props = Pick<DonutChartProps, \"segments\" | \"showLegend\" | \"formatOptions\">;\n\nexport const DonutChartLegend: 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        const formattedValue = formatOptions\n          ? formatter.format(s.value)\n          : `${s.value} %`;\n\n        return (\n          <LegendItem\n            key={s.title}\n            color={s.color ?? getCategoricalColorByIndex(i)}\n          >{`${s.title} (${s.valueText ?? formattedValue})`}</LegendItem>\n        );\n      })}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,WAAWA,0BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAAM;GACtB,MAAM,iBAAiB,gBACnB,UAAU,OAAO,EAAE,KAAK,IACxB,GAAG,EAAE,MAAM;GAEf,OACE,oBAAC,YAAD;IAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;IAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,aAAa,eAAe;GAAe,GAFvD,EAAE,KAEqD;EAElE,CAAC;CACK,CAAA;AAEZ"}

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

@@ -8,7 +8,7 @@ import { useNumberFormatter } from "react-aria";
 var DonutChartValue = (props) => {
 	const { value = 0, formatOptions, children } = props;
 	const formatter = useNumberFormatter(formatOptions);
-	if (Children.count(children) > 0) return /* @__PURE__ */ jsx("span", {
+	if (Children.toArray(children).length > 0) return /* @__PURE__ */ jsx("span", {
 		className: DonutChart_module_default.value,
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChartValue.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { Children, type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (Children.count(children) > 0) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <strong>{formattedValue}</strong>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,QAAQ,GAAG,eAAe,aAAa;CAE/C,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,SAAS,MAAM,QAAQ,IAAI,GAC7B,OAAO,oBAAC,QAAD;EAAM,WAAW,0BAAO;EAAQ;CAAe,CAAA;CAGxD,MAAM,iBAAiB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAE1E,OACE,oBAAC,QAAD;EAAM,WAAW,0BAAO;EACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,eAAuB,CAAA;CAC5B,CAAA;AAEV"}
+{"version":3,"file":"DonutChartValue.mjs","names":["styles"],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartValue.tsx"],"sourcesContent":["import styles from \"../DonutChart.module.scss\";\nimport { Children, type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<DonutChartProps, \"formatOptions\" | \"children\"> {\n  value?: number;\n}\n\nexport const DonutChartValue: FC<Props> = (props) => {\n  const { value = 0, formatOptions, children } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (Children.toArray(children).length > 0) {\n    return <span className={styles.value}>{children}</span>;\n  }\n\n  const formattedValue = formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <span className={styles.value}>\n      <strong>{formattedValue}</strong>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,QAAQ,GAAG,eAAe,aAAa;CAE/C,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,GACtC,OAAO,oBAAC,QAAD;EAAM,WAAWA,0BAAO;EAAQ;CAAe,CAAA;CAGxD,MAAM,iBAAiB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAE1E,OACE,oBAAC,QAAD;EAAM,WAAWA,0BAAO;EACtB,UAAA,oBAAC,UAAD,EAAA,UAAS,eAAuB,CAAA;CAC5B,CAAA;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmulatedBoldText.mjs","names":[],"sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"mappings":";;;;;;AAMA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAK,gCAAO,kBAAkB,SAAS;CAE7D,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAApC,UAAA,CACG,UACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,gCAAO;GACxC;EACG,CAAA,CACF;;AAEV"}
+{"version":3,"file":"EmulatedBoldText.mjs","names":["styles"],"sources":["../../../../../../../src/components/EmulatedBoldText/EmulatedBoldText.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./EmulatedBoldText.module.scss\";\nimport clsx from \"clsx\";\n\nexport type EmulatedBoldTextProps = PropsWithChildren<ComponentProps<\"span\">>;\n\nexport const EmulatedBoldText: FC<EmulatedBoldTextProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.emulatedBoldText, className);\n\n  return (\n    <span className={rootClassName} {...rest}>\n      {children}\n      <span aria-hidden=\"true\" className={styles.boldText}>\n        {children}\n      </span>\n    </span>\n  );\n};\n\nexport default EmulatedBoldText;\n"],"mappings":";;;;;;AAMA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,gCAAO,kBAAkB,SAAS;CAE7D,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAApC,UAAA,CACG,UACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAWA,gCAAO;GACxC;EACG,CAAA,CACF;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.mjs","names":[],"sources":["../../../../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import styles from \"./FieldDescription.module.scss\";\nimport clsx from \"clsx\";\nimport type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n      {children}\n    </Text>\n  );\n});\n\nexport default FieldDescription;\n"],"mappings":";;;;;;;;;AAUA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,gCAAO,kBAAkB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAM,MAAK;EAAc,GAAI;EAAM,WAAW;EAAoB;EAC/D;CACG,CAAA;AAEV,CAAC"}
+{"version":3,"file":"FieldDescription.mjs","names":["styles"],"sources":["../../../../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import styles from \"./FieldDescription.module.scss\";\nimport clsx from \"clsx\";\nimport type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n      {children}\n    </Text>\n  );\n});\n\nexport default FieldDescription;\n"],"mappings":";;;;;;;;;AAUA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,gCAAO,kBAAkB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAM,MAAK;EAAc,GAAI;EAAM,WAAW;EAAoB;EAC/D;CACG,CAAA;AAEV,CAAC"}

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

@@ -3,52 +3,61 @@
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { Alert } from "../Alert/Alert.mjs";
 import { AlertText } from "../AlertText/AlertText.mjs";
+import { FieldErrorRenderedContext } from "../../lib/hooks/fieldErrorRenderedContext.mjs";
 import { Heading } from "../Heading/Heading.mjs";
 import FieldError_module_default from "./FieldError.module.mjs";
 import clsx from "clsx";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 import { FieldErrorContext, TextContext } from "react-aria-components";
+import { useObjectRef } from "react-aria";
 //#region src/components/FieldError/FieldError.tsx
 /** @flr-generate all */
 var FieldError = flowComponent("FieldError", (props) => {
 	const { children, className, ref, renderAlert, ...rest } = props;
 	const rootClassName = clsx(FieldError_module_default.fieldError, className);
-	const fieldErrorFromAriaContext = useContext(FieldErrorContext);
-	const isInvalidFromChildren = React.Children.count(children) >= 1;
-	const mergedErrorState = useMemo(() => {
-		const errors = fieldErrorFromAriaContext?.validationErrors ?? [];
-		if (isInvalidFromChildren) errors.push(children);
-		const isInvalid = !!(isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid);
-		const lastError = errors.length >= 1 ? errors[errors.length - 1] : void 0;
-		return {
-			isInvalid,
-			validationDetails: {
-				valid: !isInvalid,
-				badInput: false,
-				customError: isInvalid,
-				patternMismatch: false,
-				rangeOverflow: false,
-				rangeUnderflow: false,
-				stepMismatch: false,
-				tooLong: false,
-				tooShort: false,
-				valueMissing: false,
-				typeMismatch: false,
-				...fieldErrorFromAriaContext?.validationDetails
-			},
-			...fieldErrorFromAriaContext,
-			validationErrors: lastError ? [lastError] : []
-		};
-	}, [fieldErrorFromAriaContext, children]);
-	if (!mergedErrorState.isInvalid) return;
+	const fieldValidation = useContext(FieldErrorContext);
+	const reportRendered = useContext(FieldErrorRenderedContext);
+	const hasChildren = React.Children.count(children) >= 1;
+	const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;
+	const message = hasChildren ? children : fieldValidation?.validationErrors.at(-1);
+	const errorState = {
+		isInvalid,
+		validationDetails: fieldValidation?.validationDetails ?? {
+			badInput: false,
+			customError: isInvalid,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valid: !isInvalid,
+			valueMissing: false
+		},
+		validationErrors: message ? [message] : []
+	};
+	const localRef = useObjectRef(ref);
+	useLayoutEffect(() => {
+		const element = localRef.current;
+		if (!reportRendered || !isInvalid || !element?.isConnected || !element.id) return;
+		reportRendered(element.id);
+		return () => reportRendered(void 0);
+	}, [
+		reportRendered,
+		isInvalid,
+		rest.id,
+		localRef
+	]);
+	if (!isInvalid) return;
 	return /* @__PURE__ */ jsx(Aria.Provider, {
 		values: [[TextContext, { slot: void 0 }]],
 		children: /* @__PURE__ */ jsx(FieldErrorContext, {
-			value: mergedErrorState,
+			value: errorState,
 			children: /* @__PURE__ */ jsx(Aria.FieldError, {
-				ref,
+				ref: localRef,
 				...rest,
 				className: rootClassName,
 				children: ({ validationErrors }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldErrorFromAriaContext = useContext(FieldErrorContext);\n  const isInvalidFromChildren = React.Children.count(children) >= 1;\n\n  const mergedErrorState = useMemo(() => {\n    const errors: (string | ReactNode)[] =\n      fieldErrorFromAriaContext?.validationErrors ?? [];\n\n    if (isInvalidFromChildren) {\n      errors.push(children);\n    }\n\n    const isInvalid = !!(\n      isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid\n    );\n    const lastError =\n      errors.length >= 1 ? errors[errors.length - 1] : undefined;\n\n    return {\n      isInvalid: isInvalid,\n      validationDetails: {\n        valid: !isInvalid,\n        badInput: false,\n        customError: isInvalid,\n        patternMismatch: false,\n        rangeOverflow: false,\n        rangeUnderflow: false,\n        stepMismatch: false,\n        tooLong: false,\n        tooShort: false,\n        valueMissing: false,\n        typeMismatch: false,\n        ...fieldErrorFromAriaContext?.validationDetails,\n      },\n      ...fieldErrorFromAriaContext,\n      validationErrors: lastError ? [lastError] : [],\n    };\n  }, [fieldErrorFromAriaContext, children]);\n\n  if (!mergedErrorState.isInvalid) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={mergedErrorState as never}>\n        <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CACvD,MAAM,4BAA4B,WAAW,iBAAiB;CAC9D,MAAM,wBAAwB,MAAM,SAAS,MAAM,QAAQ,KAAK;CAEhE,MAAM,mBAAmB,cAAc;EACrC,MAAM,SACJ,2BAA2B,oBAAoB,CAAC;EAElD,IAAI,uBACF,OAAO,KAAK,QAAQ;EAGtB,MAAM,YAAY,CAAC,EACjB,yBAAyB,2BAA2B;EAEtD,MAAM,YACJ,OAAO,UAAU,IAAI,OAAO,OAAO,SAAS,KAAK,KAAA;EAEnD,OAAO;GACM;GACX,mBAAmB;IACjB,OAAO,CAAC;IACR,UAAU;IACV,aAAa;IACb,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,UAAU;IACV,cAAc;IACd,cAAc;IACd,GAAG,2BAA2B;GAChC;GACA,GAAG;GACH,kBAAkB,YAAY,CAAC,SAAS,IAAI,CAAC;EAC/C;CACF,GAAG,CAAC,2BAA2B,QAAQ,CAAC;CAExC,IAAI,CAAC,iBAAiB,WACpB;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAsB;IAAK,GAAI;IAAM,WAAW;IAC5C,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}
+{"version":3,"file":"FieldError.mjs","names":["styles"],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  useContext,\n  useLayoutEffect,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\nimport { FieldErrorRenderedContext } from \"@/lib/hooks/fieldErrorRenderedContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldValidation = useContext(FieldErrorContext);\n  const reportRendered = useContext(FieldErrorRenderedContext);\n  const hasChildren = React.Children.count(children) >= 1;\n\n  // Inside a field the field decides whether there is an error – children only\n  // provide its message. Without a field, children are the error.\n  const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;\n\n  // Never mutate the context's errors: for a valid field react-aria hands out\n  // one module-level array shared by every field of the page.\n  const message = hasChildren\n    ? children\n    : fieldValidation?.validationErrors.at(-1);\n\n  const errorState = {\n    isInvalid,\n    validationDetails: fieldValidation?.validationDetails ?? {\n      badInput: false,\n      customError: isInvalid,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !isInvalid,\n      valueMissing: false,\n    },\n    validationErrors: message ? [message] : [],\n  };\n\n  // Report what is actually in the document: inside a collection (`Select`,\n  // `ComboBox`) react-aria renders the children a second time into a hidden\n  // collection document, where no field context exists and no id resolves.\n  const localRef = useObjectRef(ref);\n  useLayoutEffect(() => {\n    const element = localRef.current;\n    if (!reportRendered || !isInvalid || !element?.isConnected || !element.id) {\n      return;\n    }\n    reportRendered(element.id);\n    return () => reportRendered(undefined);\n  }, [reportRendered, isInvalid, rest.id, localRef]);\n\n  if (!isInvalid) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={errorState as never}>\n        <Aria.FieldError ref={localRef} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CACvD,MAAM,kBAAkB,WAAW,iBAAiB;CACpD,MAAM,iBAAiB,WAAW,yBAAyB;CAC3D,MAAM,cAAc,MAAM,SAAS,MAAM,QAAQ,KAAK;CAItD,MAAM,YAAY,kBAAkB,gBAAgB,YAAY;CAIhE,MAAM,UAAU,cACZ,WACA,iBAAiB,iBAAiB,GAAG,EAAE;CAE3C,MAAM,aAAa;EACjB;EACA,mBAAmB,iBAAiB,qBAAqB;GACvD,UAAU;GACV,aAAa;GACb,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,cAAc;GACd,SAAS;GACT,UAAU;GACV,cAAc;GACd,OAAO,CAAC;GACR,cAAc;EAChB;EACA,kBAAkB,UAAU,CAAC,OAAO,IAAI,CAAC;CAC3C;CAKA,MAAM,WAAW,aAAa,GAAG;CACjC,sBAAsB;EACpB,MAAM,UAAU,SAAS;EACzB,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,SAAS,eAAe,CAAC,QAAQ,IACrE;EAEF,eAAe,QAAQ,EAAE;EACzB,aAAa,eAAe,KAAA,CAAS;CACvC,GAAG;EAAC;EAAgB;EAAW,KAAK;EAAI;CAAQ,CAAC;CAEjD,IAAI,CAAC,WACH;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAiB,KAAK;IAAU,GAAI;IAAM,WAAW;IACjD,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFile, IconImage } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\n\ninterface Props {\n  type?: string;\n  imageSrc?: string;\n  isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n  const { type, imageSrc, isFailed } = props;\n\n  if (isFailed) {\n    return <AvatarComponent status=\"danger\" />;\n  }\n\n  if (imageSrc) {\n    return (\n      <AvatarComponent>\n        <Image src={imageSrc} />\n      </AvatarComponent>\n    );\n  }\n\n  return (\n    <AvatarComponent color=\"blue\">\n      {type?.startsWith(\"image\") ? <IconImage /> : <IconFile />}\n    </AvatarComponent>\n  );\n};\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAa,UAAqB,UAAU;CAC1C,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,UACF,OAAO,oBAAC,UAAD,EAAiB,QAAO,SAAU,CAAA;CAG3C,IAAI,UACF,OACE,oBAAC,UAAD,EAAA,UACE,oBAAC,OAAD,EAAO,KAAK,SAAW,CAAA,EACR,CAAA;CAIrB,OACE,oBAAC,UAAD;EAAiB,OAAM;EACpB,UAAA,MAAM,WAAW,OAAO,IAAI,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACzC,CAAA;AAErB"}
+{"version":3,"file":"Avatar.mjs","names":["AvatarComponent"],"sources":["../../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFile, IconImage } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\n\ninterface Props {\n  type?: string;\n  imageSrc?: string;\n  isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n  const { type, imageSrc, isFailed } = props;\n\n  if (isFailed) {\n    return <AvatarComponent status=\"danger\" />;\n  }\n\n  if (imageSrc) {\n    return (\n      <AvatarComponent>\n        <Image src={imageSrc} />\n      </AvatarComponent>\n    );\n  }\n\n  return (\n    <AvatarComponent color=\"blue\">\n      {type?.startsWith(\"image\") ? <IconImage /> : <IconFile />}\n    </AvatarComponent>\n  );\n};\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAa,UAAqB,UAAU;CAC1C,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,IAAI,UACF,OAAO,oBAACA,UAAD,EAAiB,QAAO,SAAU,CAAA;CAG3C,IAAI,UACF,OACE,oBAACA,UAAD,EAAA,UACE,oBAAC,OAAD,EAAO,KAAK,SAAW,CAAA,EACR,CAAA;CAIrB,OACE,oBAACA,UAAD;EAAiB,OAAM;EACpB,UAAA,MAAM,WAAW,OAAO,IAAI,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACzC,CAAA;AAErB"}

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.mjs","names":[],"sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,aAAa;CACrB,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,OACE,oBAAC,QAAD;EACE,cAAY,gBAAgB,OAAO,QAAQ;EAC3C,SAAQ;EACR,OAAM;EACN,SAAS;EAET,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ"}
+{"version":3,"file":"DeleteButton.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales, \"FileCard\");\n\n  return (\n    <Button\n      aria-label={stringFormatter.format(`delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,aAAa;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,UAAU;CAEvE,OACE,oBAAC,QAAD;EACE,cAAY,gBAAgB,OAAO,QAAQ;EAC3C,SAAQ;EACR,OAAM;EACN,SAAS;EAET,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;AAEZ"}