npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.8 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" \| \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n \| \"onAction\"\n \| \"selectedKeys\"\n \| \"defaultSelectedKeys\"\n \| \"onSelectionChange\"\n \| \"disabledKeys\"\n \| \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. /\n selectionMode?: ContextMenuSelectionMode;\n /* Sets the context menu to a fixed width. /\n width?: string \| number;\n /\n Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n /\n showSelectAll?: boolean;\n}\n\n/* @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n controller: overlayControllerFromProps,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-details\": ariaDetails,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={styles.popover}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,~~WAAW~~,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,~~WAAW~~,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KAClB,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,gBAAc;KACT;KAbP,UAAA,CAeG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
1	+ {"version":3,"file":"ContextMenu.mjs","names":["styles"],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" \| \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n \| \"onAction\"\n \| \"selectedKeys\"\n \| \"defaultSelectedKeys\"\n \| \"onSelectionChange\"\n \| \"disabledKeys\"\n \| \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. /\n selectionMode?: ContextMenuSelectionMode;\n /* Sets the context menu to a fixed width. /\n width?: string \| number;\n /\n Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n /\n showSelectAll?: boolean;\n}\n\n/* @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n controller: overlayControllerFromProps,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-details\": ariaDetails,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={styles.popover}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAWA,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAWA,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KAClB,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,gBAAc;KACT;KAbP,UAAA,CAeG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,~~WAAW~~,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,eAAe,aAAa;KAC/C;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}
1	+ {"version":3,"file":"ContextMenuSection.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAWA,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,eAAe,aAAa;KAC/C;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}

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

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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,14 @@ 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, skeletonProps } = useFieldComponent(props, "DatePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.DatePicker, {
 		...rest,
-		...fieldProps,
+		...controlProps,
+		...skeletonProps,
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

	@@ -1 +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"}
1	+ {"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 skeletonProps,\n } = useFieldComponent(props, \"DatePicker\");\n\n const rootClassName = clsx(wrapperProps.className, className);\n\n return (\n <Aria.DatePicker\n {...rest}\n {...controlProps}\n {...skeletonProps}\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,mBACA,kBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,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;EAZF,UAAA,CAcE,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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/DatePicker/components/DateInput/DateInput.module.mjs CHANGED Viewed

@@ -5,7 +5,9 @@ var dateInput = "flow--date-picker--date-input";
 var readonly = "flow--date-picker--date-input--readonly";
 var DateInput_module_default = {
 	dateInput,
-	readonly
+	readonly,
+	"skeleton-surface-shimmer": "flow--date-picker--date-input--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--date-picker--date-input--skeleton-text-shimmer"
 };
 //#endregion
 export { dateInput, DateInput_module_default as default, readonly };

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

@@ -16,15 +16,17 @@ 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, skeletonProps } = useFieldComponent(props, "DateRangePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const onDatePickerChange = (value) => {
 		if (onChange) onChange(value);
 		popoverController.close();
 	};
 	return /* @__PURE__ */ jsxs(Aria.DateRangePicker, {
 		...rest,
+		...skeletonProps,
+		"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 skeletonProps,\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 {...skeletonProps}\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,mBACA,kBACE,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,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EAPZ,UAAA,CASE,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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs CHANGED Viewed

@@ -7,7 +7,9 @@ var inputs = "flow--date-range-picker--date-range-input--inputs";
 var DateRangeInput_module_default = {
 	dateRangeInput,
 	readonly,
-	inputs
+	"skeleton-surface-shimmer": "flow--date-range-picker--date-range-input--skeleton-surface-shimmer",
+	inputs,
+	"skeleton-text-shimmer": "flow--date-range-picker--date-range-input--skeleton-text-shimmer"
 };
 //#endregion
 export { dateRangeInput, DateRangeInput_module_default as default, inputs, readonly };

package/dist/js/packages/components/src/components/DonutChart/DonutChart.mjs CHANGED Viewed

@@ -1,9 +1,10 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import DonutChart_module_default from "./DonutChart.module.mjs";
 import { DonutChartValue } from "./components/DonutChartValue.mjs";
-import { Donut } from "./components/Donut.mjs";
+import { Donut, getDonutSize } from "./components/Donut.mjs";
 import { DonutChartLegend } from "./components/DonutChartLegend.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,25 +15,38 @@ var DonutChart = (props) => {
 	const { size = "m", status = "info", className, value, segments, maxValue, formatOptions, showLegend = true, legendPosition = "right", children, ...rest } = props;
 	const rootClassName = clsx(DonutChart_module_default.donutChart, size === "l" && DonutChart_module_default["size-l"], DonutChart_module_default[status], className);
 	const segmentsTotalValue = segments ? segments.map((s) => s.value).reduce((a, b) => a + b, 0) : void 0;
+	const isSkeleton = useSkeletonMode();
+	const donutSize = getDonutSize(size);
+	const displayedValue = segmentsTotalValue ?? value;
+	const skeletonDonut = /* @__PURE__ */ jsx("span", {
+		className: clsx(DonutChart_module_default.donutChart, DonutChart_module_default.skeleton, className),
+		style: {
+			width: donutSize,
+			height: donutSize
+		},
+		"aria-hidden": true,
+		inert: true
+	});
+	const donut = /* @__PURE__ */ jsxs(Aria.ProgressBar, {
+		className: rootClassName,
+		value: displayedValue,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Donut, {
+			value: displayedValue,
+			segments,
+			size,
+			maxValue
+		}), /* @__PURE__ */ jsx(DonutChartValue, {
+			value: displayedValue,
+			formatOptions,
+			children
+		})]
+	});
 	return /* @__PURE__ */ jsx(Wrap, {
 		if: showLegend && segments,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: clsx(DonutChart_module_default.donutChartContainer, DonutChart_module_default[legendPosition]),
-			children: [/* @__PURE__ */ jsxs(Aria.ProgressBar, {
-				className: rootClassName,
-				value: segmentsTotalValue ?? value,
-				...rest,
-				children: [/* @__PURE__ */ jsx(Donut, {
-					value: segmentsTotalValue ?? value,
-					segments,
-					size,
-					maxValue
-				}), /* @__PURE__ */ jsx(DonutChartValue, {
-					value: segmentsTotalValue ?? value,
-					formatOptions,
-					children
-				})]
-			}), showLegend && segments && /* @__PURE__ */ jsx(DonutChartLegend, {
+			children: [isSkeleton ? skeletonDonut : donut, showLegend && segments && /* @__PURE__ */ jsx(DonutChartLegend, {
 				showLegend,
 				segments,
 				formatOptions

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

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

package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ var info = "flow--donut-chart--info";
 var success = "flow--donut-chart--success";
 var danger = "flow--donut-chart--danger";
 var warning = "flow--donut-chart--warning";
+var skeleton = "flow--donut-chart--skeleton";
 var donutChartContainer = "flow--donut-chart--donut-chart-container";
 var bottom = "flow--donut-chart--bottom";
 var top = "flow--donut-chart--top";
@@ -30,14 +31,17 @@ var DonutChart_module_default = {
 	success,
 	danger,
 	warning,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--donut-chart--skeleton-surface-shimmer",
 	donutChartContainer,
 	bottom,
 	top,
 	right,
 	legend,
-	left
+	left,
+	"skeleton-text-shimmer": "flow--donut-chart--skeleton-text-shimmer"
 };
 //#endregion
-export { background, border, bottom, danger, DonutChart_module_default as default, donutChart, donutChartContainer, fill, info, left, legend, right, segment, success, top, value, warning };
+export { background, border, bottom, danger, DonutChart_module_default as default, donutChart, donutChartContainer, fill, info, left, legend, right, segment, skeleton, success, top, value, warning };
 //# sourceMappingURL=DonutChart.module.mjs.map

package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .fill,\n .segment {\n /* No `calc()`: with a unitless one on the dash, Firefox drew full circles. /\n stroke-dasharray: var(--donut-chart--percent) 100;\n transform: rotate(calc(var(--donut-chart--offset) 3.6deg - 90deg));\n transform-box: fill-box;\n transform-origin: center;\n animation: donut-chart-fill var(--donut-chart--transition-duration) ease;\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n // Raw consumer markup inside the value slot — nothing to class.\n // stylelint-disable-next-line selector-max-type -- consumer markup\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants /\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n\n/ The implicit \"to\" keyframe picks up the fill's own dash and rotation. */\n@keyframes donut-chart-fill {\n from {\n stroke-dasharray: 0 100;\n transform: rotate(-90deg);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .fill,\n .segment {\n /* No `calc()`: with a unitless one on the dash, Firefox drew full circles. /\n stroke-dasharray: var(--donut-chart--percent) 100;\n transform: rotate(calc(var(--donut-chart--offset) 3.6deg - 90deg));\n transform-box: fill-box;\n transform-origin: center;\n animation: donut-chart-fill var(--donut-chart--transition-duration) ease;\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n // Raw consumer markup inside the value slot — nothing to class.\n // stylelint-disable-next-line selector-max-type -- consumer markup\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants /\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n\n / SkeletonMode /\n\n &.skeleton {\n @include skeleton.surface;\n\n --skeleton-radius: var(--corner-radius--round);\n\n display: block;\n }\n}\n\n@include skeleton.keyframes;\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n\n/ The implicit \"to\" keyframe picks up the fill's own dash and rotation. */\n@keyframes donut-chart-fill {\n from {\n stroke-dasharray: 0 100;\n transform: rotate(-90deg);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/DonutChart/components/Donut.mjs CHANGED Viewed

@@ -4,10 +4,13 @@ import DonutChart_module_default from "../DonutChart.module.mjs";
 import { DonutChartFill } from "./DonutChartFill.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DonutChart/components/Donut.tsx
+var getFillWidth = (size) => size === "m" ? 8 : 12;
+/** The width and height of the rendered donut in px. */
+var getDonutSize = (size) => getFillWidth(size) * 16;
 var Donut = (props) => {
 	const { value = 0, segments, size, maxValue: maxValueFromProps } = props;
 	const strokeWidth = .5;
-	const fillWidth = size === "m" ? 8 : 12;
+	const fillWidth = getFillWidth(size);
 	const center = fillWidth * 4;
 	const radius = center - fillWidth / 2;
 	const maxValue = maxValueFromProps ?? 100;
@@ -50,6 +53,6 @@ var Donut = (props) => {
 	}) });
 };
 //#endregion
-export { Donut };
+export { Donut, getDonutSize };
 //# sourceMappingURL=Donut.mjs.map

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

	@@ -1 +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"}
1	+ {"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\nconst getFillWidth = (size: DonutChartProps[\"size\"]) => (size === \"m\" ? 8 : 12);\n\n/** The width and height of the rendered donut in px. /\nexport const getDonutSize = (size: DonutChartProps[\"size\"]) =>\n getFillWidth(size) 16;\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 = getFillWidth(size);\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,IAAM,gBAAgB,SAAmC,SAAS,MAAM,IAAI;;AAG5E,IAAa,gBAAgB,SAC3B,aAAa,IAAI,IAAI;AAEvB,IAAa,SAAoB,UAAU;CACzC,MAAM,EAAE,QAAQ,GAAG,UAAU,MAAM,UAAU,sBAAsB;CAEnE,MAAM,cAAc;CACpB,MAAM,YAAY,aAAa,IAAI;CACnC,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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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
 	});