@danske/sapphire-react-lab 0.106.1 → 0.106.3

package/build/esm/Accordion/src/Accordion.js

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { useObjectRef, filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { useObjectRef } from 'react-aria/useObjectRef';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { useThemeCheck, useSapphireStyleProps, withTruthyZero } from '@danske/sapphire-react';
-import { FocusScope } from '@react-aria/focus';
+import { FocusScope } from 'react-aria/FocusScope';
 import { AccordionContext } from './AccordionContext.js';
 import { DisclosureGroup } from 'react-aria-components';
 

package/build/esm/Accordion/src/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n  SapphireStyleProps,\n  TypographyHeadingProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  withTruthyZero as hasAllowedCustomSidePadding,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusScope } from '@react-aria/focus';\n\nimport { AccordionContext } from './AccordionContext';\nimport { DisclosureGroup, DisclosureGroupProps } from 'react-aria-components';\n\nexport type TreeExpansionMode = 'single' | 'multiple';\n\nexport interface AccordionProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    DOMProps,\n    Pick<\n      DisclosureGroupProps,\n      | 'allowsMultipleExpanded'\n      | 'expandedKeys'\n      | 'defaultExpandedKeys'\n      | 'onExpandedChange'\n      | 'children'\n      | 'isDisabled'\n    > {\n  /** Set aria-level attribute for item's header. Accessibility requirement.\n   * Defines the hierarchical level of an element within a page structure.\n   * @default 5\n   */\n  headerLevel?: TypographyHeadingProps['level'];\n  /**\n   * Removes the divider after the last accordion item.\n   * Useful when rendered in a container which already has borders.\n   */\n  hideLastDivider?: boolean;\n  /**\n   * Counter acts the side padding, so that accordion is shifted to the left with same amount\n   * and having side padding * 2 added to width – resulting in full width accordion.\n   * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n   * @example\n   * ```tsx\n   * <Accordion hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  hasNegativeSideMargin?: boolean;\n  /**\n   * Add custom sized padding to the sides of the accordion items.\n   * @example\n   * ```tsx\n   * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  sidePadding?: number | string;\n}\n\n/**\n * Accordion is a vertically stacked set of items, that consist of an interactive header and expandable content section. An accordion item’s content display can be toggled on and off by clicking the component’s header above.\n */\nexport const Accordion = forwardRef(function Accordion(\n  {\n    allowsMultipleExpanded = true,\n    headerLevel = 5,\n    hideLastDivider = false,\n    hasNegativeSideMargin = false,\n    sidePadding,\n    children,\n    expandedKeys,\n    defaultExpandedKeys,\n    onExpandedChange,\n    isDisabled,\n    ...props\n  }: AccordionProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n  return (\n    <FocusScope>\n      <AccordionContext.Provider value={{ sidePadding, headerLevel }}>\n        <DisclosureGroup\n          {...filterDOMProps(props, { global: true, labelable: true })}\n          allowsMultipleExpanded={allowsMultipleExpanded}\n          expandedKeys={expandedKeys}\n          defaultExpandedKeys={defaultExpandedKeys}\n          onExpandedChange={onExpandedChange}\n          isDisabled={isDisabled}\n          ref={forwardedRef}\n          className={clsx(\n            styles['sapphire-accordion'],\n            {\n              [styles['sapphire-accordion--without-last-divider']]:\n                hideLastDivider,\n              [styles['sapphire-accordion--negative-margin-self']]:\n                !hasAllowedCustomSidePadding(sidePadding) &&\n                hasNegativeSideMargin,\n            },\n            styleProps.className\n          )}\n          style={{\n            ...(hasAllowedCustomSidePadding(sidePadding) &&\n            hasNegativeSideMargin\n              ? {\n                  marginLeft:\n                    typeof sidePadding === 'string'\n                      ? `calc(${sidePadding} * -1)`\n                      : `-${sidePadding}px`,\n                  width: `calc(100% + calc(${sidePadding} * 2${\n                    typeof sidePadding === 'string' ? '' : 'px'\n                  }))`,\n                }\n              : {}),\n            ...styleProps.style,\n          }}\n        >\n          {children}\n        </DisclosureGroup>\n      </AccordionContext.Provider>\n    </FocusScope>\n  );\n});\n"],"names":["Accordion","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;AAkEO,MAAM,SAAA,GAAY,UAAA,CAAW,SAASA,UAAAA,CAC3C;AAAA,EACE,sBAAA,GAAyB,IAAA;AAAA,EACzB,WAAA,GAAc,CAAA;AAAA,EACd,eAAA,GAAkB,KAAA;AAAA,EAClB,qBAAA,GAAwB,KAAA;AAAA,EACxB,WAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,aAA6B,GAAG,CAAA;AAErD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,EAAE,WAAA,EAAa,WAAA,EAAY,EAAA,kBAC3D,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAe,KAAA,EAAO,EAAE,QAAQ,IAAA,EAAM,SAAA,EAAW,MAAM,CAAA;AAAA,MAC3D,sBAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,IAAA;AAAA,QACT,OAAO,oBAAoB,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,MAAA,CAAO,0CAA0C,CAAC,GACjD,eAAA;AAAA,UACF,CAAC,OAAO,0CAA0C,CAAC,GACjD,CAACC,cAAA,CAA4B,WAAW,CAAA,IACxC;AAAA,SACJ;AAAA,QACA,UAAA,CAAW;AAAA,OACb;AAAA,MACA,KAAA,EAAO;AAAA,QACL,GAAIA,cAAA,CAA4B,WAAW,CAAA,IAC3C,qBAAA,GACI;AAAA,UACE,UAAA,EACE,OAAO,WAAA,KAAgB,QAAA,GACnB,QAAQ,WAAW,CAAA,MAAA,CAAA,GACnB,IAAI,WAAW,CAAA,EAAA,CAAA;AAAA,UACrB,KAAA,EAAO,oBAAoB,WAAW,CAAA,IAAA,EACpC,OAAO,WAAA,KAAgB,QAAA,GAAW,KAAK,IACzC,CAAA,EAAA;AAAA,YAEF,EAAC;AAAA,QACL,GAAG,UAAA,CAAW;AAAA;AAChB,KAAA;AAAA,IAEC;AAAA,GAEL,CACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n  SapphireStyleProps,\n  TypographyHeadingProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  withTruthyZero as hasAllowedCustomSidePadding,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusScope } from 'react-aria/FocusScope';\n\nimport { AccordionContext } from './AccordionContext';\nimport { DisclosureGroup, DisclosureGroupProps } from 'react-aria-components';\n\nexport type TreeExpansionMode = 'single' | 'multiple';\n\nexport interface AccordionProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    DOMProps,\n    Pick<\n      DisclosureGroupProps,\n      | 'allowsMultipleExpanded'\n      | 'expandedKeys'\n      | 'defaultExpandedKeys'\n      | 'onExpandedChange'\n      | 'children'\n      | 'isDisabled'\n    > {\n  /** Set aria-level attribute for item's header. Accessibility requirement.\n   * Defines the hierarchical level of an element within a page structure.\n   * @default 5\n   */\n  headerLevel?: TypographyHeadingProps['level'];\n  /**\n   * Removes the divider after the last accordion item.\n   * Useful when rendered in a container which already has borders.\n   */\n  hideLastDivider?: boolean;\n  /**\n   * Counter acts the side padding, so that accordion is shifted to the left with same amount\n   * and having side padding * 2 added to width – resulting in full width accordion.\n   * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n   * @example\n   * ```tsx\n   * <Accordion hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  hasNegativeSideMargin?: boolean;\n  /**\n   * Add custom sized padding to the sides of the accordion items.\n   * @example\n   * ```tsx\n   * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  sidePadding?: number | string;\n}\n\n/**\n * Accordion is a vertically stacked set of items, that consist of an interactive header and expandable content section. An accordion item’s content display can be toggled on and off by clicking the component’s header above.\n */\nexport const Accordion = forwardRef(function Accordion(\n  {\n    allowsMultipleExpanded = true,\n    headerLevel = 5,\n    hideLastDivider = false,\n    hasNegativeSideMargin = false,\n    sidePadding,\n    children,\n    expandedKeys,\n    defaultExpandedKeys,\n    onExpandedChange,\n    isDisabled,\n    ...props\n  }: AccordionProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n  return (\n    <FocusScope>\n      <AccordionContext.Provider value={{ sidePadding, headerLevel }}>\n        <DisclosureGroup\n          {...filterDOMProps(props, { global: true, labelable: true })}\n          allowsMultipleExpanded={allowsMultipleExpanded}\n          expandedKeys={expandedKeys}\n          defaultExpandedKeys={defaultExpandedKeys}\n          onExpandedChange={onExpandedChange}\n          isDisabled={isDisabled}\n          ref={forwardedRef}\n          className={clsx(\n            styles['sapphire-accordion'],\n            {\n              [styles['sapphire-accordion--without-last-divider']]:\n                hideLastDivider,\n              [styles['sapphire-accordion--negative-margin-self']]:\n                !hasAllowedCustomSidePadding(sidePadding) &&\n                hasNegativeSideMargin,\n            },\n            styleProps.className\n          )}\n          style={{\n            ...(hasAllowedCustomSidePadding(sidePadding) &&\n            hasNegativeSideMargin\n              ? {\n                  marginLeft:\n                    typeof sidePadding === 'string'\n                      ? `calc(${sidePadding} * -1)`\n                      : `-${sidePadding}px`,\n                  width: `calc(100% + calc(${sidePadding} * 2${\n                    typeof sidePadding === 'string' ? '' : 'px'\n                  }))`,\n                }\n              : {}),\n            ...styleProps.style,\n          }}\n        >\n          {children}\n        </DisclosureGroup>\n      </AccordionContext.Provider>\n    </FocusScope>\n  );\n});\n"],"names":["Accordion","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;AAmEO,MAAM,SAAA,GAAY,UAAA,CAAW,SAASA,UAAAA,CAC3C;AAAA,EACE,sBAAA,GAAyB,IAAA;AAAA,EACzB,WAAA,GAAc,CAAA;AAAA,EACd,eAAA,GAAkB,KAAA;AAAA,EAClB,qBAAA,GAAwB,KAAA;AAAA,EACxB,WAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,aAA6B,GAAG,CAAA;AAErD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,EAAE,WAAA,EAAa,WAAA,EAAY,EAAA,kBAC3D,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAe,KAAA,EAAO,EAAE,QAAQ,IAAA,EAAM,SAAA,EAAW,MAAM,CAAA;AAAA,MAC3D,sBAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,IAAA;AAAA,QACT,OAAO,oBAAoB,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,MAAA,CAAO,0CAA0C,CAAC,GACjD,eAAA;AAAA,UACF,CAAC,OAAO,0CAA0C,CAAC,GACjD,CAACC,cAAA,CAA4B,WAAW,CAAA,IACxC;AAAA,SACJ;AAAA,QACA,UAAA,CAAW;AAAA,OACb;AAAA,MACA,KAAA,EAAO;AAAA,QACL,GAAIA,cAAA,CAA4B,WAAW,CAAA,IAC3C,qBAAA,GACI;AAAA,UACE,UAAA,EACE,OAAO,WAAA,KAAgB,QAAA,GACnB,QAAQ,WAAW,CAAA,MAAA,CAAA,GACnB,IAAI,WAAW,CAAA,EAAA,CAAA;AAAA,UACrB,KAAA,EAAO,oBAAoB,WAAW,CAAA,IAAA,EACpC,OAAO,WAAA,KAAgB,QAAA,GAAW,KAAK,IACzC,CAAA,EAAA;AAAA,YAEF,EAAC;AAAA,QACL,GAAG,UAAA,CAAW;AAAA;AAChB,KAAA;AAAA,IAEC;AAAA,GAEL,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/Accordion/src/AccordionHeading.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { withTruthyZero, Typography, Icon } from '@danske/sapphire-react';
 import { ChevronDown } from '@danske/sapphire-icons/react';

package/build/esm/Accordion/src/AccordionHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeading.js","sources":["../../../../src/Accordion/src/AccordionHeading.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n  Icon,\n  Typography,\n  TypographyHeadingProps,\n  withTruthyZero as hasAllowedCustomSidePadding,\n} from '@danske/sapphire-react';\nimport { ChevronDown } from '@danske/sapphire-icons/react';\nimport { Button } from 'react-aria-components';\nimport { useAccordionContext } from './AccordionContext';\nimport { customPaddingStyleProps } from './utils';\n\nexport interface AccordionHeadingProps extends DOMProps {\n  children?: ReactNode;\n  headerLevel?: TypographyHeadingProps['level'];\n}\n\nexport const AccordionHeading = forwardRef(function AccordionHeading(\n  { children, headerLevel, ...props }: AccordionHeadingProps,\n  ref: React.Ref<HTMLDivElement>\n): React.JSX.Element {\n  const { sidePadding, headerLevel: contextHeaderLevel } =\n    useAccordionContext();\n\n  return (\n    <div\n      role=\"heading\"\n      aria-level={headerLevel ?? contextHeaderLevel}\n      {...filterDOMProps(props, { global: true })}\n      ref={ref}\n    >\n      <Button\n        slot=\"trigger\"\n        className={({ isFocusVisible }) =>\n          clsx(styles['sapphire-accordion__item-header'], styles['js-focus'], {\n            [styles['is-focus']]: isFocusVisible,\n          })\n        }\n        style={\n          hasAllowedCustomSidePadding(sidePadding)\n            ? customPaddingStyleProps(sidePadding)\n            : {}\n        }\n      >\n        <Typography.Heading level={6} elementType=\"span\">\n          <div className={clsx(styles['sapphire-accordion__item-heading'])}>\n            {children}\n          </div>\n        </Typography.Heading>\n        <div className={clsx(styles['sapphire-accordion__item-arrow'])}>\n          <Icon size=\"lg\">\n            <ChevronDown />\n          </Icon>\n        </div>\n      </Button>\n    </div>\n  );\n});\n"],"names":["AccordionHeading","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;AAqBO,MAAM,gBAAA,GAAmB,UAAA,CAAW,SAASA,iBAAAA,CAClD,EAAE,UAAU,WAAA,EAAa,GAAG,KAAA,EAAM,EAClC,GAAA,EACmB;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,WAAA,EAAa,kBAAA,KAChC,mBAAA,EAAoB;AAEtB,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,cAAY,WAAA,IAAe,kBAAA;AAAA,MAC1B,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,CAAC,EAAE,cAAA,EAAe,KAC3B,IAAA,CAAK,MAAA,CAAO,iCAAiC,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,EAAG;AAAA,UAClE,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG;AAAA,SACvB,CAAA;AAAA,QAEH,OACEC,cAAA,CAA4B,WAAW,IACnC,uBAAA,CAAwB,WAAW,IACnC;AAAC,OAAA;AAAA,0CAGN,UAAA,CAAW,OAAA,EAAX,EAAmB,KAAA,EAAO,GAAG,WAAA,EAAY,MAAA,EAAA,kBACxC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC,CAAA,EAAA,EAC5D,QACH,CACF,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,OAAO,gCAAgC,CAAC,CAAA,EAAA,kBAC3D,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAK,IAAA,EAAA,kBACT,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,IAAY,CACf,CACF;AAAA;AACF,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionHeading.js","sources":["../../../../src/Accordion/src/AccordionHeading.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n  Icon,\n  Typography,\n  TypographyHeadingProps,\n  withTruthyZero as hasAllowedCustomSidePadding,\n} from '@danske/sapphire-react';\nimport { ChevronDown } from '@danske/sapphire-icons/react';\nimport { Button } from 'react-aria-components';\nimport { useAccordionContext } from './AccordionContext';\nimport { customPaddingStyleProps } from './utils';\n\nexport interface AccordionHeadingProps extends DOMProps {\n  children?: ReactNode;\n  headerLevel?: TypographyHeadingProps['level'];\n}\n\nexport const AccordionHeading = forwardRef(function AccordionHeading(\n  { children, headerLevel, ...props }: AccordionHeadingProps,\n  ref: React.Ref<HTMLDivElement>\n): React.JSX.Element {\n  const { sidePadding, headerLevel: contextHeaderLevel } =\n    useAccordionContext();\n\n  return (\n    <div\n      role=\"heading\"\n      aria-level={headerLevel ?? contextHeaderLevel}\n      {...filterDOMProps(props, { global: true })}\n      ref={ref}\n    >\n      <Button\n        slot=\"trigger\"\n        className={({ isFocusVisible }) =>\n          clsx(styles['sapphire-accordion__item-header'], styles['js-focus'], {\n            [styles['is-focus']]: isFocusVisible,\n          })\n        }\n        style={\n          hasAllowedCustomSidePadding(sidePadding)\n            ? customPaddingStyleProps(sidePadding)\n            : {}\n        }\n      >\n        <Typography.Heading level={6} elementType=\"span\">\n          <div className={clsx(styles['sapphire-accordion__item-heading'])}>\n            {children}\n          </div>\n        </Typography.Heading>\n        <div className={clsx(styles['sapphire-accordion__item-arrow'])}>\n          <Icon size=\"lg\">\n            <ChevronDown />\n          </Icon>\n        </div>\n      </Button>\n    </div>\n  );\n});\n"],"names":["AccordionHeading","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;AAqBO,MAAM,gBAAA,GAAmB,UAAA,CAAW,SAASA,iBAAAA,CAClD,EAAE,UAAU,WAAA,EAAa,GAAG,KAAA,EAAM,EAClC,GAAA,EACmB;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,WAAA,EAAa,kBAAA,KAChC,mBAAA,EAAoB;AAEtB,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,cAAY,WAAA,IAAe,kBAAA;AAAA,MAC1B,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,CAAC,EAAE,cAAA,EAAe,KAC3B,IAAA,CAAK,MAAA,CAAO,iCAAiC,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,EAAG;AAAA,UAClE,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG;AAAA,SACvB,CAAA;AAAA,QAEH,OACEC,cAAA,CAA4B,WAAW,IACnC,uBAAA,CAAwB,WAAW,IACnC;AAAC,OAAA;AAAA,0CAGN,UAAA,CAAW,OAAA,EAAX,EAAmB,KAAA,EAAO,GAAG,WAAA,EAAY,MAAA,EAAA,kBACxC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC,CAAA,EAAA,EAC5D,QACH,CACF,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,OAAO,gCAAgC,CAAC,CAAA,EAAA,kBAC3D,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAK,IAAA,EAAA,kBACT,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,IAAY,CACf,CACF;AAAA;AACF,GACF;AAEJ,CAAC;;;;"}

package/build/esm/Accordion/src/AccordionItem.js

@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { Disclosure } from 'react-aria-components';
-import { useFocusManager } from '@react-aria/focus';
-import { useObjectRef, useEvent } from '@react-aria/utils';
+import { useFocusManager } from 'react-aria/FocusScope';
+import { useEvent } from 'react-aria/private/utils/useEvent';
+import { useObjectRef } from 'react-aria/useObjectRef';
 
 const AccordionItem = forwardRef(function AccordionItem2({ children, id, ...props }, forwardedRef) {
   const ref = useObjectRef(forwardedRef);

package/build/esm/Accordion/src/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\n\nimport { Disclosure } from 'react-aria-components';\nimport { DisclosureProps } from 'react-aria-components';\nimport { useFocusManager } from '@react-aria/focus';\nimport { useEvent, useObjectRef } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\n\nexport interface AccordionItemProps\n  extends DOMProps,\n    Pick<DisclosureProps, 'children' | 'isDisabled'> {}\n\nexport const AccordionItem = forwardRef(function AccordionItem(\n  { children, id, ...props }: AccordionItemProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n): JSX.Element {\n  const ref = useObjectRef<HTMLDivElement>(forwardedRef);\n  const focusManager = useFocusManager();\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (!focusManager) return;\n\n    if (\n      !(e.target instanceof Element) ||\n      e.target.getAttribute('slot') !== 'trigger'\n    )\n      return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        focusManager.focusNext();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        focusManager.focusPrevious();\n        break;\n      case 'Home':\n        e.preventDefault();\n        focusManager.focusFirst();\n        break;\n      case 'End':\n        e.preventDefault();\n        focusManager.focusLast();\n        break;\n      default:\n        return;\n    }\n  };\n\n  useEvent(ref, 'keydown', onKeyDown);\n\n  return (\n    <Disclosure\n      ref={ref}\n      id={id}\n      className={({ isExpanded, isDisabled }) =>\n        clsx(styles['sapphire-accordion__item'], {\n          [styles['sapphire-accordion__item--open']]: isExpanded,\n          [styles['is-disabled']]: isDisabled,\n        })\n      }\n      {...props}\n    >\n      <div className={clsx(styles['sapphire-accordion__item-content-wrapper'])}>\n        {children}\n      </div>\n    </Disclosure>\n  );\n});\n"],"names":["AccordionItem"],"mappings":";;;;;;;AAeO,MAAM,aAAA,GAAgB,UAAA,CAAW,SAASA,cAAAA,CAC/C,EAAE,UAAU,EAAA,EAAI,GAAG,KAAA,EAAM,EACzB,YAAA,EACa;AACb,EAAA,MAAM,GAAA,GAAM,aAA6B,YAAY,CAAA;AACrD,EAAA,MAAM,eAAe,eAAA,EAAgB;AAErC,EAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAqB;AACtC,IAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,IAAA,IACE,EAAE,EAAE,MAAA,YAAkB,OAAA,CAAA,IACtB,EAAE,MAAA,CAAO,YAAA,CAAa,MAAM,CAAA,KAAM,SAAA;AAElC,MAAA;AAEF,IAAA,QAAQ,EAAE,GAAA;AAAK,MACb,KAAK,WAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,SAAA,EAAU;AACvB,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,aAAA,EAAc;AAC3B,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,UAAA,EAAW;AACxB,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,SAAA,EAAU;AACvB,QAAA;AAAA,MACF;AACE,QAAA;AAAA;AACJ,EACF,CAAA;AAEA,EAAA,QAAA,CAAS,GAAA,EAAK,WAAW,SAAS,CAAA;AAElC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA,EAAW,CAAC,EAAE,UAAA,EAAY,YAAW,KACnC,IAAA,CAAK,MAAA,CAAO,0BAA0B,CAAA,EAAG;AAAA,QACvC,CAAC,MAAA,CAAO,gCAAgC,CAAC,GAAG,UAAA;AAAA,QAC5C,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA,OAC1B,CAAA;AAAA,MAEF,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,IAAA,CAAK,OAAO,0CAA0C,CAAC,KACpE,QACH;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\n\nimport { Disclosure } from 'react-aria-components';\nimport { DisclosureProps } from 'react-aria-components';\nimport { useFocusManager } from 'react-aria/FocusScope';\nimport { useEvent } from 'react-aria/private/utils/useEvent';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { DOMProps } from '@react-types/shared';\n\nexport interface AccordionItemProps\n  extends DOMProps,\n    Pick<DisclosureProps, 'children' | 'isDisabled'> {}\n\nexport const AccordionItem = forwardRef(function AccordionItem(\n  { children, id, ...props }: AccordionItemProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n): JSX.Element {\n  const ref = useObjectRef<HTMLDivElement>(forwardedRef);\n  const focusManager = useFocusManager();\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (!focusManager) return;\n\n    if (\n      !(e.target instanceof Element) ||\n      e.target.getAttribute('slot') !== 'trigger'\n    )\n      return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        focusManager.focusNext();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        focusManager.focusPrevious();\n        break;\n      case 'Home':\n        e.preventDefault();\n        focusManager.focusFirst();\n        break;\n      case 'End':\n        e.preventDefault();\n        focusManager.focusLast();\n        break;\n      default:\n        return;\n    }\n  };\n\n  useEvent(ref, 'keydown', onKeyDown);\n\n  return (\n    <Disclosure\n      ref={ref}\n      id={id}\n      className={({ isExpanded, isDisabled }) =>\n        clsx(styles['sapphire-accordion__item'], {\n          [styles['sapphire-accordion__item--open']]: isExpanded,\n          [styles['is-disabled']]: isDisabled,\n        })\n      }\n      {...props}\n    >\n      <div className={clsx(styles['sapphire-accordion__item-content-wrapper'])}>\n        {children}\n      </div>\n    </Disclosure>\n  );\n});\n"],"names":["AccordionItem"],"mappings":";;;;;;;;AAgBO,MAAM,aAAA,GAAgB,UAAA,CAAW,SAASA,cAAAA,CAC/C,EAAE,UAAU,EAAA,EAAI,GAAG,KAAA,EAAM,EACzB,YAAA,EACa;AACb,EAAA,MAAM,GAAA,GAAM,aAA6B,YAAY,CAAA;AACrD,EAAA,MAAM,eAAe,eAAA,EAAgB;AAErC,EAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAqB;AACtC,IAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,IAAA,IACE,EAAE,EAAE,MAAA,YAAkB,OAAA,CAAA,IACtB,EAAE,MAAA,CAAO,YAAA,CAAa,MAAM,CAAA,KAAM,SAAA;AAElC,MAAA;AAEF,IAAA,QAAQ,EAAE,GAAA;AAAK,MACb,KAAK,WAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,SAAA,EAAU;AACvB,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,aAAA,EAAc;AAC3B,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,UAAA,EAAW;AACxB,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,SAAA,EAAU;AACvB,QAAA;AAAA,MACF;AACE,QAAA;AAAA;AACJ,EACF,CAAA;AAEA,EAAA,QAAA,CAAS,GAAA,EAAK,WAAW,SAAS,CAAA;AAElC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA,EAAW,CAAC,EAAE,UAAA,EAAY,YAAW,KACnC,IAAA,CAAK,MAAA,CAAO,0BAA0B,CAAA,EAAG;AAAA,QACvC,CAAC,MAAA,CAAO,gCAAgC,CAAC,GAAG,UAAA;AAAA,QAC5C,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA,OAC1B,CAAA;AAAA,MAEF,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,IAAA,CAAK,OAAO,0CAA0C,CAAC,KACpE,QACH;AAAA,GACF;AAEJ,CAAC;;;;"}

package/build/esm/Accordion/src/AccordionPanel.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { DisclosurePanel } from 'react-aria-components';
 import { useAccordionContext } from './AccordionContext.js';

package/build/esm/Accordion/src/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../../../../src/Accordion/src/AccordionPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport { DisclosurePanel, DisclosurePanelProps } from 'react-aria-components';\nimport { useAccordionContext } from './AccordionContext';\nimport { customPaddingStyleProps } from './utils';\nimport { withTruthyZero as hasAllowedCustomSidePadding } from '@danske/sapphire-react';\nimport { DOMProps } from '@react-types/shared';\n\nexport interface AccordionPanelProps\n  extends DOMProps,\n    Pick<DisclosurePanelProps, 'children' | 'role'> {}\n\nexport const AccordionPanel = forwardRef(function AccordionPanel(\n  { children, ...props }: AccordionPanelProps,\n  ref: React.Ref<HTMLDivElement>\n): React.JSX.Element {\n  const { sidePadding } = useAccordionContext();\n\n  return (\n    <DisclosurePanel\n      ref={ref}\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-accordion__item-content'])}\n      style={{\n        /**\n         * useDisclosure hook from react-aria uses css variable --disclosure-panel-height to\n         * animate the height of the panel.\n         */\n        height: 'var(--disclosure-panel-height)',\n      }}\n      {...props}\n    >\n      <div\n        style={{\n          ...(hasAllowedCustomSidePadding(sidePadding)\n            ? customPaddingStyleProps(sidePadding)\n            : {}),\n        }}\n        className={styles['sapphire-accordion__item-content-inner']}\n      >\n        {children}\n      </div>\n    </DisclosurePanel>\n  );\n});\n"],"names":["AccordionPanel","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;AAcO,MAAM,cAAA,GAAiB,WAAW,SAASA,eAAAA,CAChD,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EACrB,GAAA,EACmB;AACnB,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,mBAAA,EAAoB;AAE5C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC,CAAA;AAAA,MAC1D,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKL,MAAA,EAAQ;AAAA,OACV;AAAA,MACC,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO;AAAA,UACL,GAAIC,cAAA,CAA4B,WAAW,IACvC,uBAAA,CAAwB,WAAW,IACnC;AAAC,SACP;AAAA,QACA,SAAA,EAAW,OAAO,wCAAwC;AAAA,OAAA;AAAA,MAEzD;AAAA;AACH,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../../../../src/Accordion/src/AccordionPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport { DisclosurePanel, DisclosurePanelProps } from 'react-aria-components';\nimport { useAccordionContext } from './AccordionContext';\nimport { customPaddingStyleProps } from './utils';\nimport { withTruthyZero as hasAllowedCustomSidePadding } from '@danske/sapphire-react';\nimport { DOMProps } from '@react-types/shared';\n\nexport interface AccordionPanelProps\n  extends DOMProps,\n    Pick<DisclosurePanelProps, 'children' | 'role'> {}\n\nexport const AccordionPanel = forwardRef(function AccordionPanel(\n  { children, ...props }: AccordionPanelProps,\n  ref: React.Ref<HTMLDivElement>\n): React.JSX.Element {\n  const { sidePadding } = useAccordionContext();\n\n  return (\n    <DisclosurePanel\n      ref={ref}\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-accordion__item-content'])}\n      style={{\n        /**\n         * useDisclosure hook from react-aria uses css variable --disclosure-panel-height to\n         * animate the height of the panel.\n         */\n        height: 'var(--disclosure-panel-height)',\n      }}\n      {...props}\n    >\n      <div\n        style={{\n          ...(hasAllowedCustomSidePadding(sidePadding)\n            ? customPaddingStyleProps(sidePadding)\n            : {}),\n        }}\n        className={styles['sapphire-accordion__item-content-inner']}\n      >\n        {children}\n      </div>\n    </DisclosurePanel>\n  );\n});\n"],"names":["AccordionPanel","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;AAcO,MAAM,cAAA,GAAiB,WAAW,SAASA,eAAAA,CAChD,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EACrB,GAAA,EACmB;AACnB,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,mBAAA,EAAoB;AAE5C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC,CAAA;AAAA,MAC1D,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKL,MAAA,EAAQ;AAAA,OACV;AAAA,MACC,GAAG;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO;AAAA,UACL,GAAIC,cAAA,CAA4B,WAAW,IACvC,uBAAA,CAAwB,WAAW,IACnC;AAAC,SACP;AAAA,QACA,SAAA,EAAW,OAAO,wCAAwC;AAAA,OAAA;AAAA,MAEzD;AAAA;AACH,GACF;AAEJ,CAAC;;;;"}

package/build/esm/Alert/src/Alert.js

@@ -3,7 +3,7 @@ import { useThemeCheck, useSapphireStyleProps, Icon, Typography } from '@danske/
 import { Information, Error, CheckmarkOutline, Warning } from '@danske/sapphire-icons/react';
 import alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';
 import { clsx } from 'clsx';
-import { filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 
 function Alert({
   children,

package/build/esm/Alert/src/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  Typography,\n  Icon,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  CheckmarkOutline,\n  Information,\n  Warning,\n  Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport interface SapphireAlertProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps {\n  /**\n   * The content of the alert.\n   */\n  children?: ReactNode;\n\n  /**\n   * The title of the alert.\n   */\n  title?: ReactNode;\n\n  /**\n   * @default 'info'\n   */\n  variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n  children,\n  title,\n  variant = 'info',\n  ...props\n}: SapphireAlertProps): React.JSX.Element {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const getIcon = (variant: string) => {\n    switch (variant) {\n      case 'warning':\n        return <Warning />;\n      case 'positive':\n        return <CheckmarkOutline />;\n      case 'negative':\n        return <Error />;\n      default:\n        return <Information />;\n    }\n  };\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(\n        alertStyles['sapphire-alert'],\n        {\n          [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n          [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n          [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n        },\n        className\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      <span className={alertStyles['sapphire-alert__icon']}>\n        <Icon size=\"sm\">{getIcon(variant)}</Icon>\n      </span>\n      <div className={alertStyles['sapphire-alert__title']}>\n        <Typography.Body size=\"sm\" isSemibold>\n          {title}\n        </Typography.Body>\n      </div>\n      <div className={alertStyles['sapphire-alert__content']}>\n        <Typography.Body elementType=\"section\" size=\"md\">\n          {children}\n        </Typography.Body>\n      </div>\n    </div>\n  );\n}\n"],"names":["variant"],"mappings":";;;;;;;AAsCO,SAAS,KAAA,CAAM;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,CAACA,QAAAA,KAAoB;AACnC,IAAA,QAAQA,QAAAA;AAAS,MACf,KAAK,SAAA;AACH,QAAA,2CAAQ,OAAA,EAAA,IAAQ,CAAA;AAAA,MAClB,KAAK,UAAA;AACH,QAAA,2CAAQ,gBAAA,EAAA,IAAiB,CAAA;AAAA,MAC3B,KAAK,UAAA;AACH,QAAA,2CAAQ,KAAA,EAAA,IAAM,CAAA;AAAA,MAChB;AACE,QAAA,2CAAQ,WAAA,EAAA,IAAY,CAAA;AAAA;AACxB,EACF,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA;AAAA,QACT,YAAY,gBAAgB,CAAA;AAAA,QAC5B;AAAA,UACE,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,yBAAyB,CAAC,GAAG,OAAA,KAAY;AAAA,SACxD;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,IAAA,EAAK;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,CAAY,sBAAsB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAA,EAAM,OAAA,CAAQ,OAAO,CAAE,CACpC,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,uBAAuB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAA,EAClC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,yBAAyB,CAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,WAAA,EAAY,SAAA,EAAU,IAAA,EAAK,IAAA,EAAA,EACzC,QACH,CACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  Typography,\n  Icon,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  CheckmarkOutline,\n  Information,\n  Warning,\n  Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport interface SapphireAlertProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps {\n  /**\n   * The content of the alert.\n   */\n  children?: ReactNode;\n\n  /**\n   * The title of the alert.\n   */\n  title?: ReactNode;\n\n  /**\n   * @default 'info'\n   */\n  variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n  children,\n  title,\n  variant = 'info',\n  ...props\n}: SapphireAlertProps): React.JSX.Element {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const getIcon = (variant: string) => {\n    switch (variant) {\n      case 'warning':\n        return <Warning />;\n      case 'positive':\n        return <CheckmarkOutline />;\n      case 'negative':\n        return <Error />;\n      default:\n        return <Information />;\n    }\n  };\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(\n        alertStyles['sapphire-alert'],\n        {\n          [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n          [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n          [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n        },\n        className\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      <span className={alertStyles['sapphire-alert__icon']}>\n        <Icon size=\"sm\">{getIcon(variant)}</Icon>\n      </span>\n      <div className={alertStyles['sapphire-alert__title']}>\n        <Typography.Body size=\"sm\" isSemibold>\n          {title}\n        </Typography.Body>\n      </div>\n      <div className={alertStyles['sapphire-alert__content']}>\n        <Typography.Body elementType=\"section\" size=\"md\">\n          {children}\n        </Typography.Body>\n      </div>\n    </div>\n  );\n}\n"],"names":["variant"],"mappings":";;;;;;;AAsCO,SAAS,KAAA,CAAM;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,CAACA,QAAAA,KAAoB;AACnC,IAAA,QAAQA,QAAAA;AAAS,MACf,KAAK,SAAA;AACH,QAAA,2CAAQ,OAAA,EAAA,IAAQ,CAAA;AAAA,MAClB,KAAK,UAAA;AACH,QAAA,2CAAQ,gBAAA,EAAA,IAAiB,CAAA;AAAA,MAC3B,KAAK,UAAA;AACH,QAAA,2CAAQ,KAAA,EAAA,IAAM,CAAA;AAAA,MAChB;AACE,QAAA,2CAAQ,WAAA,EAAA,IAAY,CAAA;AAAA;AACxB,EACF,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA;AAAA,QACT,YAAY,gBAAgB,CAAA;AAAA,QAC5B;AAAA,UACE,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,yBAAyB,CAAC,GAAG,OAAA,KAAY;AAAA,SACxD;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,IAAA,EAAK;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,CAAY,sBAAsB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAA,EAAM,OAAA,CAAQ,OAAO,CAAE,CACpC,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,uBAAuB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAA,EAClC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,yBAAyB,CAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,WAAA,EAAY,SAAA,EAAU,IAAA,EAAK,IAAA,EAAA,EACzC,QACH,CACF;AAAA,GACF;AAEJ;;;;"}

package/build/esm/Amount/src/Amount.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useThemeCheck, useSapphireStyleProps, Typography } from '@danske/sapphire-react';
-import { useLocale } from '@react-aria/i18n';
+import { useLocale } from 'react-aria/I18nProvider';
 import { useGroupAmount } from './useGroupAmount.js';
 import styles from '@danske/sapphire-css/components/amount/amount.module.css';
 

package/build/esm/Amount/src/Amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  GlobalDomAttributes,\n  Typography,\n  TypographyBodyProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from '@react-aria/i18n';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n  Intl.NumberFormatOptions,\n  | 'currency'\n  | 'currencyDisplay'\n  | 'currencySign'\n  | 'signDisplay'\n  | 'minimumFractionDigits'\n  | 'maximumFractionDigits'\n  | 'minimumSignificantDigits'\n  | 'maximumSignificantDigits'\n  | 'useGrouping'\n  | 'notation'\n>;\n\nexport type AmountProps = {\n  /**\n   * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n   *\n   * @default 'regular'\n   */\n  emphasis?: 'primary' | 'regular';\n  /**\n   * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n   *\n   * @default 'neutal'\n   */\n  variant?: 'neutal' | 'positive';\n  /**\n   * The amount value to be formatted and displayed.\n   *\n   * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n   * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n   */\n  value: string | number;\n  /** Currency formatting options */\n  formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n  SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const Amount = ({\n  emphasis = 'regular',\n  variant,\n  formatOptions,\n  value,\n  size,\n  ...props\n}: AmountProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps, filteredProps } = useSapphireStyleProps(props);\n  const { locale } = useLocale();\n\n  const formatter = useMemo(\n    () =>\n      new Intl.NumberFormat(locale, {\n        style: formatOptions?.currency ? 'currency' : undefined,\n        /**\n         * Always show the sign if the value starts with '+' or '-'.\n         */\n        signDisplay:\n          formatOptions?.signDisplay || String(value).startsWith('+')\n            ? 'always'\n            : 'auto',\n        minimumFractionDigits: 2,\n        ...formatOptions,\n      }),\n    [locale, formatOptions, value]\n  );\n\n  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n  return (\n    <span\n      style={styleProps.style}\n      className={styles['sapphire-amount']}\n      {...filteredProps}\n      aria-label={formattedValue}\n    >\n      {groupedParts.map((part, index) => (\n        <Typography.Body\n          elementType=\"span\"\n          key={index}\n          color={variant === 'positive' ? 'positive' : 'primary'}\n          isSemibold={emphasis === 'primary' ? true : false}\n          size={size}\n        >\n          {part.value}\n        </Typography.Body>\n      ))}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0DO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,IAAI,IAAA,CAAK,YAAA,CAAa,MAAA,EAAQ;AAAA,MAC5B,KAAA,EAAO,aAAA,EAAe,QAAA,GAAW,UAAA,GAAa,MAAA;AAAA;AAAA;AAAA;AAAA,MAI9C,WAAA,EACE,eAAe,WAAA,IAAe,MAAA,CAAO,KAAK,CAAA,CAAE,UAAA,CAAW,GAAG,CAAA,GACtD,QAAA,GACA,MAAA;AAAA,MACN,qBAAA,EAAuB,CAAA;AAAA,MACvB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,MAAA,EAAQ,aAAA,EAAe,KAAK;AAAA,GAC/B;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,cAAA,CAAe,OAAO,SAAS,CAAA;AAExE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,SAAA,EAAW,OAAO,iBAAiB,CAAA;AAAA,MAClC,GAAG,aAAA;AAAA,MACJ,YAAA,EAAY;AAAA,KAAA;AAAA,IAEX,YAAA,CAAa,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBACvB,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA,CAAW,IAAA;AAAA,MAAX;AAAA,QACC,WAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,OAAA,KAAY,UAAA,GAAa,UAAA,GAAa,SAAA;AAAA,QAC7C,UAAA,EAAY,QAAA,KAAa,SAAA,GAAY,IAAA,GAAO,KAAA;AAAA,QAC5C;AAAA,OAAA;AAAA,MAEC,IAAA,CAAK;AAAA,KAET;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  GlobalDomAttributes,\n  Typography,\n  TypographyBodyProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from 'react-aria/I18nProvider';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n  Intl.NumberFormatOptions,\n  | 'currency'\n  | 'currencyDisplay'\n  | 'currencySign'\n  | 'signDisplay'\n  | 'minimumFractionDigits'\n  | 'maximumFractionDigits'\n  | 'minimumSignificantDigits'\n  | 'maximumSignificantDigits'\n  | 'useGrouping'\n  | 'notation'\n>;\n\nexport type AmountProps = {\n  /**\n   * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n   *\n   * @default 'regular'\n   */\n  emphasis?: 'primary' | 'regular';\n  /**\n   * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n   *\n   * @default 'neutal'\n   */\n  variant?: 'neutal' | 'positive';\n  /**\n   * The amount value to be formatted and displayed.\n   *\n   * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n   * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n   */\n  value: string | number;\n  /** Currency formatting options */\n  formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n  SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const Amount = ({\n  emphasis = 'regular',\n  variant,\n  formatOptions,\n  value,\n  size,\n  ...props\n}: AmountProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps, filteredProps } = useSapphireStyleProps(props);\n  const { locale } = useLocale();\n\n  const formatter = useMemo(\n    () =>\n      new Intl.NumberFormat(locale, {\n        style: formatOptions?.currency ? 'currency' : undefined,\n        /**\n         * Always show the sign if the value starts with '+' or '-'.\n         */\n        signDisplay:\n          formatOptions?.signDisplay || String(value).startsWith('+')\n            ? 'always'\n            : 'auto',\n        minimumFractionDigits: 2,\n        ...formatOptions,\n      }),\n    [locale, formatOptions, value]\n  );\n\n  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n  return (\n    <span\n      style={styleProps.style}\n      className={styles['sapphire-amount']}\n      {...filteredProps}\n      aria-label={formattedValue}\n    >\n      {groupedParts.map((part, index) => (\n        <Typography.Body\n          elementType=\"span\"\n          key={index}\n          color={variant === 'positive' ? 'positive' : 'primary'}\n          isSemibold={emphasis === 'primary' ? true : false}\n          size={size}\n        >\n          {part.value}\n        </Typography.Body>\n      ))}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0DO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,IAAI,IAAA,CAAK,YAAA,CAAa,MAAA,EAAQ;AAAA,MAC5B,KAAA,EAAO,aAAA,EAAe,QAAA,GAAW,UAAA,GAAa,MAAA;AAAA;AAAA;AAAA;AAAA,MAI9C,WAAA,EACE,eAAe,WAAA,IAAe,MAAA,CAAO,KAAK,CAAA,CAAE,UAAA,CAAW,GAAG,CAAA,GACtD,QAAA,GACA,MAAA;AAAA,MACN,qBAAA,EAAuB,CAAA;AAAA,MACvB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,MAAA,EAAQ,aAAA,EAAe,KAAK;AAAA,GAC/B;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,cAAA,CAAe,OAAO,SAAS,CAAA;AAExE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,SAAA,EAAW,OAAO,iBAAiB,CAAA;AAAA,MAClC,GAAG,aAAA;AAAA,MACJ,YAAA,EAAY;AAAA,KAAA;AAAA,IAEX,YAAA,CAAa,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBACvB,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA,CAAW,IAAA;AAAA,MAAX;AAAA,QACC,WAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,OAAA,KAAY,UAAA,GAAa,UAAA,GAAa,SAAA;AAAA,QAC7C,UAAA,EAAY,QAAA,KAAa,SAAA,GAAY,IAAA,GAAO,KAAA;AAAA,QAC5C;AAAA,OAAA;AAAA,MAEC,IAAA,CAAK;AAAA,KAET;AAAA,GACH;AAEJ;;;;"}

package/build/esm/Autocomplete/src/Autocomplete.js

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react';
 import { useThemeCheck, useSapphireStyleProps, useComboBoxState, ListBoxPopover } from '@danske/sapphire-react';
-import { useComboBox } from '@react-aria/combobox';
+import { useComboBox } from 'react-aria/useComboBox';
 import { useMessageFormatter } from '@react-aria/i18n';
 import intlMessages from '../i18n/index.js';
 import { useFocusableRef } from '@react-spectrum/utils';
-import { filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 
 function Autocomplete(props) {
   useThemeCheck();
@@ -26,6 +26,7 @@ function Autocomplete(props) {
   const listBoxRef = useFocusableRef(null);
   const popoverRef = useRef(null);
   const triggerRef = useFocusableRef(null);
+  const collectionRef = useRef(null);
   const state = useComboBoxState({
     ...props,
     inputValue,
@@ -36,9 +37,14 @@ function Autocomplete(props) {
       if (key !== null) {
         onSelectionChange?.(key);
         onSuggestionSelected?.(key);
+        const itemText = collectionRef.current?.getItem(key)?.textValue ?? "";
+        if (itemText) {
+          props.onInputChange?.(itemText);
+        }
       }
     }
   });
+  collectionRef.current = state.collection;
   const { inputProps, listBoxProps } = useComboBox(
     {
       ...props,

package/build/esm/Autocomplete/src/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n  ListBoxProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ListBoxPopover,\n  useComboBoxState,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from '@react-aria/combobox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n  SapphireStyleProps &\n  Pick<\n    ComboBoxProps<T>,\n    | 'items'\n    | 'children'\n    | 'inputValue'\n    | 'defaultInputValue'\n    | 'onInputChange'\n    | 'isDisabled'\n  > &\n  Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n    /**\n     * This prop is badly named. It is NOT related to a selection state being\n     * changed since there is no selection state in this component.\n     *\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     *\n     * @deprecated\n     * Use `onSuggestionSelected` instead.\n     */\n    onSelectionChange?: Pick<\n      ComboBoxProps<T>,\n      'onSelectionChange'\n    >['onSelectionChange'];\n\n    /*\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     */\n    onSuggestionSelected?: (key: Key) => void;\n    /**\n     * Render function for the input element.\n     * Receives props that should be spread onto the input component.\n     */\n    renderInput: (inputProps: any) => ReactElement;\n\n    /**\n     * Accessible label for the suggestions listbox.\n     */\n    listboxAriaLabel?: string;\n\n    /**\n     * Controlled selected value.\n     */\n    value?: React.Key | null;\n\n    /**\n     * Decide what items to display in the dropdown menu.\n     * @default 'String.includes'\n     */\n    defaultFilter?: (textValue: string, inputValue: string) => boolean;\n  };\n\nexport function Autocomplete<T extends object>(\n  props: AutocompleteProps<T>\n): ReactElement {\n  useThemeCheck();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const {\n    inputValue,\n    renderInput,\n    loadingState,\n    loadingSkeletonRowsCount,\n    listboxAriaLabel,\n    onSuggestionSelected,\n    onSelectionChange,\n    ...otherProps\n  } = props;\n\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue,\n    allowsEmptyCollection: loadingState === 'loading',\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n    onSelectionChange: (key) => {\n      if (key !== null) {\n        onSelectionChange?.(key);\n        onSuggestionSelected?.(key);\n      }\n    },\n  });\n\n  const { inputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  const inputElement = renderInput({\n    ...inputProps,\n    isDisabled: props.isDisabled,\n    inputRef,\n    'aria-haspopup': 'listbox',\n    'aria-expanded': state.isOpen,\n    onChange: (value: string) => {\n      inputProps.onChange?.({\n        target: { value },\n        currentTarget: { value },\n      } as React.ChangeEvent<HTMLInputElement>);\n    },\n  });\n\n  return (\n    <div\n      ref={triggerRef}\n      {...filterDOMProps(otherProps, { global: true })}\n      style={{ display: 'inline-flex', ...style }}\n      className={className}\n    >\n      {inputElement}\n      {state.isOpen && (\n        <ListBoxPopover<T>\n          state={state}\n          triggerRef={triggerRef}\n          popoverRef={popoverRef}\n          listBoxRef={listBoxRef}\n          listBoxProps={listBoxProps}\n          loadingState={loadingState}\n          loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n          selectWidth={triggerRef.current?.offsetWidth}\n          disableSelectedStyles\n          isNonModal\n        >\n          {props.children || []}\n        </ListBoxPopover>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA0EO,SAAS,aACd,KAAA,EACc;AACd,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,aAAA,GAAgB,oBAAoB,YAAY,CAAA;AAEtD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,wBAAA;AAAA,IACA,gBAAA;AAAA,IACA,oBAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,gBAAkC,IAAI,CAAA;AACzD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,gBAAgC,IAAI,CAAA;AAEvD,EAAA,MAAM,QAAQ,gBAAA,CAAiB;AAAA,IAC7B,GAAG,KAAA;AAAA,IACH,UAAA;AAAA,IACA,uBAAuB,YAAA,KAAiB,SAAA;AAAA,IACxC,iBAAA,EAAmB,IAAA;AAAA,IACnB,iBAAA,EAAmB,IAAA;AAAA,IACnB,iBAAA,EAAmB,CAAC,GAAA,KAAQ;AAC1B,MAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,QAAA,iBAAA,GAAoB,GAAG,CAAA;AACvB,QAAA,oBAAA,GAAuB,GAAG,CAAA;AAAA,MAC5B;AAAA,IACF;AAAA,GACD,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,WAAA;AAAA,IACnC;AAAA,MACE,GAAG,KAAA;AAAA,MACH,YAAA,EAAc,gBAAA,IAAoB,aAAA,CAAc,qBAAqB,CAAA;AAAA,MACrE,QAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,eAAe,WAAA,CAAY;AAAA,IAC/B,GAAG,UAAA;AAAA,IACH,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,QAAA;AAAA,IACA,eAAA,EAAiB,SAAA;AAAA,IACjB,iBAAiB,KAAA,CAAM,MAAA;AAAA,IACvB,QAAA,EAAU,CAAC,KAAA,KAAkB;AAC3B,MAAA,UAAA,CAAW,QAAA,GAAW;AAAA,QACpB,MAAA,EAAQ,EAAE,KAAA,EAAM;AAAA,QAChB,aAAA,EAAe,EAAE,KAAA;AAAM,OACe,CAAA;AAAA,IAC1C;AAAA,GACD,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACJ,GAAG,cAAA,CAAe,UAAA,EAAY,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC/C,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAe,GAAG,KAAA,EAAM;AAAA,MAC1C;AAAA,KAAA;AAAA,IAEC,YAAA;AAAA,IACA,MAAM,MAAA,oBACL,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA,wBAAA;AAAA,QACA,WAAA,EAAa,WAAW,OAAA,EAAS,WAAA;AAAA,QACjC,qBAAA,EAAqB,IAAA;AAAA,QACrB,UAAA,EAAU;AAAA,OAAA;AAAA,MAET,KAAA,CAAM,YAAY;AAAC;AACtB,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n  ListBoxProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ListBoxPopover,\n  useComboBoxState,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from 'react-aria/useComboBox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from 'react-stately/useComboBoxState';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n  SapphireStyleProps &\n  Pick<\n    ComboBoxProps<T>,\n    | 'items'\n    | 'children'\n    | 'inputValue'\n    | 'defaultInputValue'\n    | 'onInputChange'\n    | 'isDisabled'\n  > &\n  Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n    /**\n     * This prop is badly named. It is NOT related to a selection state being\n     * changed since there is no selection state in this component.\n     *\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     *\n     * @deprecated\n     * Use `onSuggestionSelected` instead.\n     */\n    onSelectionChange?: Pick<\n      ComboBoxProps<T>,\n      'onSelectionChange'\n    >['onSelectionChange'];\n\n    /*\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     */\n    onSuggestionSelected?: (key: Key) => void;\n    /**\n     * Render function for the input element.\n     * Receives props that should be spread onto the input component.\n     */\n    renderInput: (inputProps: any) => ReactElement;\n\n    /**\n     * Accessible label for the suggestions listbox.\n     */\n    listboxAriaLabel?: string;\n\n    /**\n     * Controlled selected value.\n     */\n    value?: React.Key | null;\n\n    /**\n     * Decide what items to display in the dropdown menu.\n     * @default 'String.includes'\n     */\n    defaultFilter?: (textValue: string, inputValue: string) => boolean;\n  };\n\nexport function Autocomplete<T extends object>(\n  props: AutocompleteProps<T>\n): ReactElement {\n  useThemeCheck();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const {\n    inputValue,\n    renderInput,\n    loadingState,\n    loadingSkeletonRowsCount,\n    listboxAriaLabel,\n    onSuggestionSelected,\n    onSelectionChange,\n    ...otherProps\n  } = props;\n\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n  const collectionRef = useRef<\n    ReturnType<typeof useComboBoxState>['collection'] | null\n  >(null);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue,\n    allowsEmptyCollection: loadingState === 'loading',\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n    onSelectionChange: (key) => {\n      if (key !== null) {\n        onSelectionChange?.(key);\n        onSuggestionSelected?.(key);\n        // When both value and inputValue are controlled, react-stately skips\n        // updating inputValue\n        const itemText = collectionRef.current?.getItem(key)?.textValue ?? '';\n        if (itemText) {\n          props.onInputChange?.(itemText);\n        }\n      }\n    },\n  });\n\n  collectionRef.current = state.collection;\n\n  const { inputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  const inputElement = renderInput({\n    ...inputProps,\n    isDisabled: props.isDisabled,\n    inputRef,\n    'aria-haspopup': 'listbox',\n    'aria-expanded': state.isOpen,\n    onChange: (value: string) => {\n      inputProps.onChange?.({\n        target: { value },\n        currentTarget: { value },\n      } as React.ChangeEvent<HTMLInputElement>);\n    },\n  });\n\n  return (\n    <div\n      ref={triggerRef}\n      {...filterDOMProps(otherProps, { global: true })}\n      style={{ display: 'inline-flex', ...style }}\n      className={className}\n    >\n      {inputElement}\n      {state.isOpen && (\n        <ListBoxPopover<T>\n          state={state}\n          triggerRef={triggerRef}\n          popoverRef={popoverRef}\n          listBoxRef={listBoxRef}\n          listBoxProps={listBoxProps}\n          loadingState={loadingState}\n          loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n          selectWidth={triggerRef.current?.offsetWidth}\n          disableSelectedStyles\n          isNonModal\n        >\n          {props.children || []}\n        </ListBoxPopover>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/esm/Breadcrumbs/src/BreadcrumbItem.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { createLeafComponent, CollectionNode } from '@react-aria/collections';
+import { CollectionNode } from 'react-aria/private/collections/BaseCollection';
+import { createLeafComponent } from 'react-aria/CollectionBuilder';
 import { useThemeCheck, useSapphireStyleProps, Typography } from '@danske/sapphire-react';
 import { BreadcrumbsSeparator } from './BreadcrumbsSeparator.js';
 import clsx from 'clsx';

package/build/esm/Breadcrumbs/src/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItem.tsx"],"sourcesContent":["import React, { useContext, ForwardedRef } from 'react';\nimport type { BreadcrumbProps as RACBreadcrumbProps } from 'react-aria-components';\nimport { CollectionNode, createLeafComponent } from '@react-aria/collections';\nimport {\n  useSapphireStyleProps,\n  useThemeCheck,\n  SapphireStyleProps,\n  Typography,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu';\nimport { BreadcrumbItemNode } from './types';\nimport {\n  BreadcrumbItemLink,\n  BreadcrumbItemLinkProps,\n} from './BreadcrumbItemLink';\n\nexport type BreadcrumbItemProps = {\n  isDisabled?: boolean;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<RACBreadcrumbProps, 'children'> &\n  BreadcrumbItemLinkProps;\n\nclass BreadcrumbItemCollectionNode extends CollectionNode<unknown> {\n  static readonly type = 'item';\n}\n\n/**\n * The implementation is based on React Aria's BreadcrumbItem, with added support for\n * overflow menu data handling.\n */\nexport const BreadcrumbItem = createLeafComponent(\n  BreadcrumbItemCollectionNode,\n  function BreadcrumbItem(\n    props: BreadcrumbItemProps,\n    ref: ForwardedRef<HTMLLIElement>,\n    node: BreadcrumbItemNode\n  ): JSX.Element {\n    useThemeCheck();\n    const { styleProps } = useSapphireStyleProps(props);\n    const {\n      size,\n      overflowNodes,\n      isDisabled: breadcrumbsDisabled,\n    } = useContext(BreadcrumbsContext);\n    const { isDisabled: individualDisabled = false } = props;\n\n    const isCurrent = node.nextKey == null;\n    const isDisabled = individualDisabled || breadcrumbsDisabled;\n\n    /**\n     * The item should not be rendered if it's in the overflow indexes.\n     * The only exception is the first overflow menu item, which will be rendered\n     * as the overflow menu trigger.\n     */\n    const shouldRender = !overflowNodes.some((item) => item?.key === node.key);\n    const showOverflowMenu = overflowNodes[0]?.key === node.key;\n\n    if (!shouldRender && !showOverflowMenu) {\n      return <></>;\n    }\n\n    if (!shouldRender && showOverflowMenu) {\n      return <BreadcrumbOverflowMenu />;\n    }\n\n    node.href = props.href;\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(styles['sapphire-breadcrumbs__item'])}\n        style={{ ...styleProps.style }}\n        data-disabled={isDisabled || undefined}\n        data-current={isCurrent || undefined}\n      >\n        {isCurrent ? (\n          <Typography.Body\n            elementType=\"span\"\n            isSemibold\n            size={size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs'}\n          >\n            {node.rendered}\n          </Typography.Body>\n        ) : (\n          <BreadcrumbItemLink isDisabled={isDisabled} {...props}>\n            {node.rendered}\n          </BreadcrumbItemLink>\n        )}\n        {!isCurrent && <BreadcrumbsSeparator />}\n      </li>\n    );\n  }\n);\n"],"names":["BreadcrumbItem"],"mappings":";;;;;;;;;;AA4BA,MAAM,qCAAqC,cAAA,CAAwB;AAAA,EACjE,OAAgB,IAAA,GAAO,MAAA;AACzB;AAMO,MAAM,cAAA,GAAiB,mBAAA;AAAA,EAC5B,4BAAA;AAAA,EACA,SAASA,eAAAA,CACP,KAAA,EACA,GAAA,EACA,IAAA,EACa;AACb,IAAA,aAAA,EAAc;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,IAAA,MAAM;AAAA,MACJ,IAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAY;AAAA,KACd,GAAI,WAAW,kBAAkB,CAAA;AACjC,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,GAAqB,KAAA,EAAM,GAAI,KAAA;AAEnD,IAAA,MAAM,SAAA,GAAY,KAAK,OAAA,IAAW,IAAA;AAClC,IAAA,MAAM,aAAa,kBAAA,IAAsB,mBAAA;AAOzC,IAAA,MAAM,YAAA,GAAe,CAAC,aAAA,CAAc,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,EAAM,GAAA,KAAQ,IAAA,CAAK,GAAG,CAAA;AACzE,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,CAAC,CAAA,EAAG,QAAQ,IAAA,CAAK,GAAA;AAExD,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,gBAAA,EAAkB;AACtC,MAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAE,CAAA;AAAA,IACX;AAEA,IAAA,IAAI,CAAC,gBAAgB,gBAAA,EAAkB;AACrC,MAAA,2CAAQ,sBAAA,EAAA,IAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,IAAA,CAAK,OAAO,KAAA,CAAM,IAAA;AAElB,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC,CAAA;AAAA,QACpD,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,KAAA,EAAM;AAAA,QAC7B,iBAAe,UAAA,IAAc,MAAA;AAAA,QAC7B,gBAAc,SAAA,IAAa;AAAA,OAAA;AAAA,MAE1B,SAAA,mBACC,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA,CAAW,IAAA;AAAA,QAAX;AAAA,UACC,WAAA,EAAY,MAAA;AAAA,UACZ,UAAA,EAAU,IAAA;AAAA,UACV,MAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,KAAS,OAAO,IAAA,GAAO;AAAA,SAAA;AAAA,QAEnD,IAAA,CAAK;AAAA,0BAGR,KAAA,CAAA,aAAA,CAAC,kBAAA,EAAA,EAAmB,YAAyB,GAAG,KAAA,EAAA,EAC7C,KAAK,QACR,CAAA;AAAA,MAED,CAAC,SAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB;AAAA,KACvC;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItem.tsx"],"sourcesContent":["import React, { useContext, ForwardedRef } from 'react';\nimport type { BreadcrumbProps as RACBreadcrumbProps } from 'react-aria-components';\nimport { CollectionNode } from 'react-aria/private/collections/BaseCollection';\nimport { createLeafComponent } from 'react-aria/CollectionBuilder';\nimport {\n  useSapphireStyleProps,\n  useThemeCheck,\n  SapphireStyleProps,\n  Typography,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu';\nimport { BreadcrumbItemNode } from './types';\nimport {\n  BreadcrumbItemLink,\n  BreadcrumbItemLinkProps,\n} from './BreadcrumbItemLink';\n\nexport type BreadcrumbItemProps = {\n  isDisabled?: boolean;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<RACBreadcrumbProps, 'children'> &\n  BreadcrumbItemLinkProps;\n\nclass BreadcrumbItemCollectionNode extends CollectionNode<unknown> {\n  static readonly type = 'item';\n}\n\n/**\n * The implementation is based on React Aria's BreadcrumbItem, with added support for\n * overflow menu data handling.\n */\nexport const BreadcrumbItem = createLeafComponent(\n  BreadcrumbItemCollectionNode,\n  function BreadcrumbItem(\n    props: BreadcrumbItemProps,\n    ref: ForwardedRef<HTMLLIElement>,\n    node: BreadcrumbItemNode\n  ): JSX.Element {\n    useThemeCheck();\n    const { styleProps } = useSapphireStyleProps(props);\n    const {\n      size,\n      overflowNodes,\n      isDisabled: breadcrumbsDisabled,\n    } = useContext(BreadcrumbsContext);\n    const { isDisabled: individualDisabled = false } = props;\n\n    const isCurrent = node.nextKey == null;\n    const isDisabled = individualDisabled || breadcrumbsDisabled;\n\n    /**\n     * The item should not be rendered if it's in the overflow indexes.\n     * The only exception is the first overflow menu item, which will be rendered\n     * as the overflow menu trigger.\n     */\n    const shouldRender = !overflowNodes.some((item) => item?.key === node.key);\n    const showOverflowMenu = overflowNodes[0]?.key === node.key;\n\n    if (!shouldRender && !showOverflowMenu) {\n      return <></>;\n    }\n\n    if (!shouldRender && showOverflowMenu) {\n      return <BreadcrumbOverflowMenu />;\n    }\n\n    node.href = props.href;\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(styles['sapphire-breadcrumbs__item'])}\n        style={{ ...styleProps.style }}\n        data-disabled={isDisabled || undefined}\n        data-current={isCurrent || undefined}\n      >\n        {isCurrent ? (\n          <Typography.Body\n            elementType=\"span\"\n            isSemibold\n            size={size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs'}\n          >\n            {node.rendered}\n          </Typography.Body>\n        ) : (\n          <BreadcrumbItemLink isDisabled={isDisabled} {...props}>\n            {node.rendered}\n          </BreadcrumbItemLink>\n        )}\n        {!isCurrent && <BreadcrumbsSeparator />}\n      </li>\n    );\n  }\n);\n"],"names":["BreadcrumbItem"],"mappings":";;;;;;;;;;;AA6BA,MAAM,qCAAqC,cAAA,CAAwB;AAAA,EACjE,OAAgB,IAAA,GAAO,MAAA;AACzB;AAMO,MAAM,cAAA,GAAiB,mBAAA;AAAA,EAC5B,4BAAA;AAAA,EACA,SAASA,eAAAA,CACP,KAAA,EACA,GAAA,EACA,IAAA,EACa;AACb,IAAA,aAAA,EAAc;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,IAAA,MAAM;AAAA,MACJ,IAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAY;AAAA,KACd,GAAI,WAAW,kBAAkB,CAAA;AACjC,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,GAAqB,KAAA,EAAM,GAAI,KAAA;AAEnD,IAAA,MAAM,SAAA,GAAY,KAAK,OAAA,IAAW,IAAA;AAClC,IAAA,MAAM,aAAa,kBAAA,IAAsB,mBAAA;AAOzC,IAAA,MAAM,YAAA,GAAe,CAAC,aAAA,CAAc,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,EAAM,GAAA,KAAQ,IAAA,CAAK,GAAG,CAAA;AACzE,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,CAAC,CAAA,EAAG,QAAQ,IAAA,CAAK,GAAA;AAExD,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,gBAAA,EAAkB;AACtC,MAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAE,CAAA;AAAA,IACX;AAEA,IAAA,IAAI,CAAC,gBAAgB,gBAAA,EAAkB;AACrC,MAAA,2CAAQ,sBAAA,EAAA,IAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,IAAA,CAAK,OAAO,KAAA,CAAM,IAAA;AAElB,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC,CAAA;AAAA,QACpD,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,KAAA,EAAM;AAAA,QAC7B,iBAAe,UAAA,IAAc,MAAA;AAAA,QAC7B,gBAAc,SAAA,IAAa;AAAA,OAAA;AAAA,MAE1B,SAAA,mBACC,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA,CAAW,IAAA;AAAA,QAAX;AAAA,UACC,WAAA,EAAY,MAAA;AAAA,UACZ,UAAA,EAAU,IAAA;AAAA,UACV,MAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,KAAS,OAAO,IAAA,GAAO;AAAA,SAAA;AAAA,QAEnD,IAAA,CAAK;AAAA,0BAGR,KAAA,CAAA,aAAA,CAAC,kBAAA,EAAA,EAAmB,YAAyB,GAAG,KAAA,EAAA,EAC7C,KAAK,QACR,CAAA;AAAA,MAED,CAAC,SAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB;AAAA,KACvC;AAAA,EAEJ;AACF;;;;"}

package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { useThemeCheck, useSapphireStyleProps, TooltipIfNeeded } from '@danske/sapphire-react';
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';
-import { mergeRefs } from '@react-aria/utils';
+import { mergeRefs } from 'react-aria/mergeRefs';
 
 const BreadcrumbItemStatic = forwardRef(function BreadcrumbItemStatic2({ size, ...props }, ref) {
   useThemeCheck();

package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemStatic.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemStatic.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n  TooltipIfNeeded,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { mergeRefs } from '@react-aria/utils';\n\nexport type BreadcrumbItemStaticProps = Pick<\n  React.HTMLAttributes<HTMLSpanElement>,\n  'children'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & { size: 'sm' | 'md' | 'lg' };\n\nexport const BreadcrumbItemStatic = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbItemStaticProps\n>(function BreadcrumbItemStatic({ size, ...props }, ref): JSX.Element {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  return (\n    <TooltipIfNeeded<HTMLSpanElement> title={props.children}>\n      {(tooltipContentRef, tooltipProps) => {\n        const positioningRef = tooltipProps?.ref;\n        return (\n          <span\n            {...tooltipProps}\n            ref={\n              mergeRefs(\n                ref,\n                tooltipContentRef,\n                positioningRef\n              ) as React.LegacyRef<HTMLSpanElement>\n            }\n            className={clsx(\n              styles['sapphire-breadcrumbs__item--static'],\n              {\n                [styles['sapphire-breadcrumbs__item--static--sm']]:\n                  size === 'sm',\n                [styles['sapphire-breadcrumbs__item--static--lg']]:\n                  size === 'lg',\n              },\n              styleProps.className\n            )}\n            style={styleProps.style}\n          >\n            {props.children}\n          </span>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n});\n"],"names":["BreadcrumbItemStatic"],"mappings":";;;;;;AAmBO,MAAM,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,EAAkB;AACpE,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,2CACG,eAAA,EAAA,EAAiC,KAAA,EAAO,MAAM,QAAA,EAAA,EAC5C,CAAC,mBAAmB,YAAA,KAAiB;AACpC,IAAA,MAAM,iBAAiB,YAAA,EAAc,GAAA;AACrC,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,GAAA,EACE,SAAA;AAAA,UACE,GAAA;AAAA,UACA,iBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEF,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,oCAAoC,CAAA;AAAA,UAC3C;AAAA,YACE,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS,IAAA;AAAA,YACX,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS;AAAA,WACb;AAAA,UACA,UAAA,CAAW;AAAA,SACb;AAAA,QACA,OAAO,UAAA,CAAW;AAAA,OAAA;AAAA,MAEjB,KAAA,CAAM;AAAA,KACT;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"BreadcrumbItemStatic.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemStatic.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n  TooltipIfNeeded,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { mergeRefs } from 'react-aria/mergeRefs';\n\nexport type BreadcrumbItemStaticProps = Pick<\n  React.HTMLAttributes<HTMLSpanElement>,\n  'children'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & { size: 'sm' | 'md' | 'lg' };\n\nexport const BreadcrumbItemStatic = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbItemStaticProps\n>(function BreadcrumbItemStatic({ size, ...props }, ref): JSX.Element {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  return (\n    <TooltipIfNeeded<HTMLSpanElement> title={props.children}>\n      {(tooltipContentRef, tooltipProps) => {\n        const positioningRef = tooltipProps?.ref;\n        return (\n          <span\n            {...tooltipProps}\n            ref={\n              mergeRefs(\n                ref,\n                tooltipContentRef,\n                positioningRef\n              ) as React.LegacyRef<HTMLSpanElement>\n            }\n            className={clsx(\n              styles['sapphire-breadcrumbs__item--static'],\n              {\n                [styles['sapphire-breadcrumbs__item--static--sm']]:\n                  size === 'sm',\n                [styles['sapphire-breadcrumbs__item--static--lg']]:\n                  size === 'lg',\n              },\n              styleProps.className\n            )}\n            style={styleProps.style}\n          >\n            {props.children}\n          </span>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n});\n"],"names":["BreadcrumbItemStatic"],"mappings":";;;;;;AAmBO,MAAM,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,EAAkB;AACpE,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,2CACG,eAAA,EAAA,EAAiC,KAAA,EAAO,MAAM,QAAA,EAAA,EAC5C,CAAC,mBAAmB,YAAA,KAAiB;AACpC,IAAA,MAAM,iBAAiB,YAAA,EAAc,GAAA;AACrC,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,GAAA,EACE,SAAA;AAAA,UACE,GAAA;AAAA,UACA,iBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEF,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,oCAAoC,CAAA;AAAA,UAC3C;AAAA,YACE,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS,IAAA;AAAA,YACX,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS;AAAA,WACb;AAAA,UACA,UAAA,CAAW;AAAA,SACb;AAAA,QACA,OAAO,UAAA,CAAW;AAAA,OAAA;AAAA,MAEjB,KAAA,CAAM;AAAA,KACT;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/Breadcrumbs/src/Breadcrumbs.js

@@ -1,7 +1,9 @@
 import React, { createContext, forwardRef, useRef, useContext } from 'react';
-import { useBreadcrumbs } from '@react-aria/breadcrumbs';
-import { CollectionBuilder, Collection } from '@react-aria/collections';
-import { filterDOMProps, mergeProps } from '@react-aria/utils';
+import { useBreadcrumbs } from 'react-aria/useBreadcrumbs';
+import { Collection } from 'react-aria/Collection';
+import { CollectionBuilder } from 'react-aria/CollectionBuilder';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { mergeProps } from 'react-aria/mergeProps';
 import { useContextProps, BreadcrumbsContext as BreadcrumbsContext$1, CollectionRendererContext } from 'react-aria-components';
 import { useBreadcrumbThreshold } from './useBreadcrumbThreshold.js';
 import { useSapphireStyleProps } from '@danske/sapphire-react';

package/build/esm/Breadcrumbs/src/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../../src/Breadcrumbs/src/Breadcrumbs.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { Collection, CollectionBuilder } from '@react-aria/collections';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport { forwardRefType } from '@react-types/shared';\nimport { ForwardedRef, forwardRef, useContext, useRef } from 'react';\nimport {\n  BreadcrumbsContext as RACBreadcrumbsContext,\n  BreadcrumbsProps as RACBreadcrumbsProps,\n  CollectionRendererContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { useBreadcrumbThreshold } from './useBreadcrumbThreshold';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport clsx from 'clsx';\nimport { BreadcrumbItemNode } from './types';\n\nexport type BreadcrumbsProps<T extends object> = Pick<\n  RACBreadcrumbsProps<T>,\n  'aria-label' | 'isDisabled' | 'children'\n> & {\n  /**\n   * The size of the breadcrumbs component.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Maximum width for the breadcrumbs container. When content overflows,\n   * it will show an overflow menu with the first and last items.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n} & SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const BreadcrumbsContext = createContext<{\n  size: 'sm' | 'md' | 'lg';\n  overflowNodes: (BreadcrumbItemNode | null)[];\n  isDisabled?: boolean;\n}>({ size: 'md', overflowNodes: [] });\n\n/**\n * Implementation is based on React Aria's Breadcrumbs component.\n * It was necessary to own the implementation to add support for\n * handling the collection directly, as we need it for the overflow calculation logic.\n */\nexport const Breadcrumbs = (forwardRef as forwardRefType)(function Breadcrumbs<\n  T extends object\n>(\n  { maxWidth, size = 'md', ...props }: BreadcrumbsProps<T>,\n  fwdRef: ForwardedRef<HTMLOListElement>\n) {\n  const [RACprops, ref] = useContextProps(props, fwdRef, RACBreadcrumbsContext);\n  const { styleProps } = useSapphireStyleProps(RACprops);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { CollectionRoot } = useContext(CollectionRendererContext);\n  const { navProps } = useBreadcrumbs(RACprops);\n  const DOMProps = filterDOMProps(RACprops, { global: true });\n\n  return (\n    <CollectionBuilder content={<Collection {...RACprops} />}>\n      {(collection) => {\n        const { overflowNodes } = useBreadcrumbThreshold(\n          collection.size,\n          containerRef,\n          ref\n        );\n        const keys = Array.from(collection.getKeys());\n        return (\n          <div\n            ref={containerRef}\n            style={{\n              ...styleProps.style,\n              maxWidth,\n              display: 'flex',\n            }}\n          >\n            <ol\n              ref={ref}\n              {...mergeProps(DOMProps, navProps)}\n              className={clsx(styles['sapphire-breadcrumbs'], {\n                [styles['sapphire-breadcrumbs--sm']]: size === 'sm',\n                [styles['sapphire-breadcrumbs--lg']]: size === 'lg',\n              })}\n            >\n              <BreadcrumbsContext.Provider\n                value={{\n                  size,\n                  overflowNodes: overflowNodes.map((index) =>\n                    collection.getItem(keys[index])\n                  ),\n                  isDisabled: RACprops.isDisabled,\n                }}\n              >\n                <RACBreadcrumbsContext.Provider value={RACprops}>\n                  <CollectionRoot collection={collection} />\n                </RACBreadcrumbsContext.Provider>\n              </BreadcrumbsContext.Provider>\n            </ol>\n          </div>\n        );\n      }}\n    </CollectionBuilder>\n  );\n});\n"],"names":["Breadcrumbs","RACBreadcrumbsContext"],"mappings":";;;;;;;;;;AAwCO,MAAM,kBAAA,GAAqB,cAI/B,EAAE,IAAA,EAAM,MAAM,aAAA,EAAe,IAAI;AAO7B,MAAM,WAAA,GAAe,UAAA,CAA8B,SAASA,YAAAA,CAGjE,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAClC,MAAA,EACA;AACA,EAAA,MAAM,CAAC,QAAA,EAAU,GAAG,IAAI,eAAA,CAAgB,KAAA,EAAO,QAAQC,oBAAqB,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,QAAQ,CAAA;AACrD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,UAAA,CAAW,yBAAyB,CAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,CAAe,QAAQ,CAAA;AAC5C,EAAA,MAAM,WAAW,cAAA,CAAe,QAAA,EAAU,EAAE,MAAA,EAAQ,MAAM,CAAA;AAE1D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,qBAAkB,OAAA,kBAAS,KAAA,CAAA,aAAA,CAAC,cAAY,GAAG,QAAA,EAAU,CAAA,EAAA,EACnD,CAAC,UAAA,KAAe;AACf,IAAA,MAAM,EAAE,eAAc,GAAI,sBAAA;AAAA,MACxB,UAAA,CAAW,IAAA;AAAA,MACX,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,UAAA,CAAW,SAAS,CAAA;AAC5C,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO;AAAA,UACL,GAAG,UAAA,CAAW,KAAA;AAAA,UACd,QAAA;AAAA,UACA,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACC,GAAG,UAAA,CAAW,QAAA,EAAU,QAAQ,CAAA;AAAA,UACjC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,sBAAsB,CAAA,EAAG;AAAA,YAC9C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,YAC/C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS;AAAA,WAChD;AAAA,SAAA;AAAA,wBAED,KAAA,CAAA,aAAA;AAAA,UAAC,kBAAA,CAAmB,QAAA;AAAA,UAAnB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,IAAA;AAAA,cACA,eAAe,aAAA,CAAc,GAAA;AAAA,gBAAI,CAAC,KAAA,KAChC,UAAA,CAAW,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAC;AAAA,eAChC;AAAA,cACA,YAAY,QAAA,CAAS;AAAA;AACvB,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAACA,qBAAsB,QAAA,EAAtB,EAA+B,OAAO,QAAA,EAAA,kBACrC,KAAA,CAAA,aAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAwB,CAC1C;AAAA;AACF;AACF,KACF;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../src/Breadcrumbs/src/Breadcrumbs.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { useBreadcrumbs } from 'react-aria/useBreadcrumbs';\nimport { Collection } from 'react-aria/Collection';\nimport { CollectionBuilder } from 'react-aria/CollectionBuilder';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { forwardRefType } from '@react-types/shared';\nimport { ForwardedRef, forwardRef, useContext, useRef } from 'react';\nimport {\n  BreadcrumbsContext as RACBreadcrumbsContext,\n  BreadcrumbsProps as RACBreadcrumbsProps,\n  CollectionRendererContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { useBreadcrumbThreshold } from './useBreadcrumbThreshold';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport clsx from 'clsx';\nimport { BreadcrumbItemNode } from './types';\n\nexport type BreadcrumbsProps<T extends object> = Pick<\n  RACBreadcrumbsProps<T>,\n  'aria-label' | 'isDisabled' | 'children'\n> & {\n  /**\n   * The size of the breadcrumbs component.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Maximum width for the breadcrumbs container. When content overflows,\n   * it will show an overflow menu with the first and last items.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n} & SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const BreadcrumbsContext = createContext<{\n  size: 'sm' | 'md' | 'lg';\n  overflowNodes: (BreadcrumbItemNode | null)[];\n  isDisabled?: boolean;\n}>({ size: 'md', overflowNodes: [] });\n\n/**\n * Implementation is based on React Aria's Breadcrumbs component.\n * It was necessary to own the implementation to add support for\n * handling the collection directly, as we need it for the overflow calculation logic.\n */\nexport const Breadcrumbs = (forwardRef as forwardRefType)(function Breadcrumbs<\n  T extends object\n>(\n  { maxWidth, size = 'md', ...props }: BreadcrumbsProps<T>,\n  fwdRef: ForwardedRef<HTMLOListElement>\n) {\n  const [RACprops, ref] = useContextProps(props, fwdRef, RACBreadcrumbsContext);\n  const { styleProps } = useSapphireStyleProps(RACprops);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { CollectionRoot } = useContext(CollectionRendererContext);\n  const { navProps } = useBreadcrumbs(RACprops);\n  const DOMProps = filterDOMProps(RACprops, { global: true });\n\n  return (\n    <CollectionBuilder content={<Collection {...RACprops} />}>\n      {(collection) => {\n        const { overflowNodes } = useBreadcrumbThreshold(\n          collection.size,\n          containerRef,\n          ref\n        );\n        const keys = Array.from(collection.getKeys());\n        return (\n          <div\n            ref={containerRef}\n            style={{\n              ...styleProps.style,\n              maxWidth,\n              display: 'flex',\n            }}\n          >\n            <ol\n              ref={ref}\n              {...mergeProps(DOMProps, navProps)}\n              className={clsx(styles['sapphire-breadcrumbs'], {\n                [styles['sapphire-breadcrumbs--sm']]: size === 'sm',\n                [styles['sapphire-breadcrumbs--lg']]: size === 'lg',\n              })}\n            >\n              <BreadcrumbsContext.Provider\n                value={{\n                  size,\n                  overflowNodes: overflowNodes.map((index) =>\n                    collection.getItem(keys[index])\n                  ),\n                  isDisabled: RACprops.isDisabled,\n                }}\n              >\n                <RACBreadcrumbsContext.Provider value={RACprops}>\n                  <CollectionRoot collection={collection} />\n                </RACBreadcrumbsContext.Provider>\n              </BreadcrumbsContext.Provider>\n            </ol>\n          </div>\n        );\n      }}\n    </CollectionBuilder>\n  );\n});\n"],"names":["Breadcrumbs","RACBreadcrumbsContext"],"mappings":";;;;;;;;;;;;AA0CO,MAAM,kBAAA,GAAqB,cAI/B,EAAE,IAAA,EAAM,MAAM,aAAA,EAAe,IAAI;AAO7B,MAAM,WAAA,GAAe,UAAA,CAA8B,SAASA,YAAAA,CAGjE,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAClC,MAAA,EACA;AACA,EAAA,MAAM,CAAC,QAAA,EAAU,GAAG,IAAI,eAAA,CAAgB,KAAA,EAAO,QAAQC,oBAAqB,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,QAAQ,CAAA;AACrD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,UAAA,CAAW,yBAAyB,CAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,CAAe,QAAQ,CAAA;AAC5C,EAAA,MAAM,WAAW,cAAA,CAAe,QAAA,EAAU,EAAE,MAAA,EAAQ,MAAM,CAAA;AAE1D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,qBAAkB,OAAA,kBAAS,KAAA,CAAA,aAAA,CAAC,cAAY,GAAG,QAAA,EAAU,CAAA,EAAA,EACnD,CAAC,UAAA,KAAe;AACf,IAAA,MAAM,EAAE,eAAc,GAAI,sBAAA;AAAA,MACxB,UAAA,CAAW,IAAA;AAAA,MACX,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,UAAA,CAAW,SAAS,CAAA;AAC5C,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO;AAAA,UACL,GAAG,UAAA,CAAW,KAAA;AAAA,UACd,QAAA;AAAA,UACA,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACC,GAAG,UAAA,CAAW,QAAA,EAAU,QAAQ,CAAA;AAAA,UACjC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,sBAAsB,CAAA,EAAG;AAAA,YAC9C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,YAC/C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS;AAAA,WAChD;AAAA,SAAA;AAAA,wBAED,KAAA,CAAA,aAAA;AAAA,UAAC,kBAAA,CAAmB,QAAA;AAAA,UAAnB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,IAAA;AAAA,cACA,eAAe,aAAA,CAAc,GAAA;AAAA,gBAAI,CAAC,KAAA,KAChC,UAAA,CAAW,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAC;AAAA,eAChC;AAAA,cACA,YAAY,QAAA,CAAS;AAAA;AACvB,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAACA,qBAAsB,QAAA,EAAtB,EAA+B,OAAO,QAAA,EAAA,kBACrC,KAAA,CAAA,aAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAwB,CAC1C;AAAA;AACF;AACF,KACF;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useResizeObserver } from '@react-aria/utils';
+import { useResizeObserver } from 'react-aria/private/utils/useResizeObserver';
 
 const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
   const [itemWidths, setItemWidths] = useState([]);

package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreadcrumbThreshold.js","sources":["../../../../src/Breadcrumbs/src/useBreadcrumbThreshold.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react';\nimport { useResizeObserver } from '@react-aria/utils';\n\nexport const useBreadcrumbThreshold = (\n  childrenCount: number,\n  containerRef: React.RefObject<HTMLElement>,\n  breadcrumbRef: React.RefObject<HTMLOListElement>\n) => {\n  const [itemWidths, setItemWidths] = useState<number[]>([]);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  const { shouldRenderOverflow, maxVisibleTailChildren } = useMemo(() => {\n    if (!containerWidth || itemWidths.length === 0) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: childrenCount,\n      };\n    }\n\n    // Exit early if the container is wider than all items combined\n    const totalItemWidth = itemWidths.reduce((a, b) => a + b, 0);\n    if (totalItemWidth <= containerWidth) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: itemWidths.length - 1,\n      };\n    }\n\n    // The minimum number of items in the container is 2 (first and last).\n    let totalWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];\n    let visibleTailCount = 1; // Last item counted by default\n\n    for (\n      let i = itemWidths.length - 2;\n      i > 0 && totalWidth + itemWidths[i] < containerWidth;\n      i--\n    ) {\n      totalWidth += itemWidths[i];\n      visibleTailCount++;\n    }\n\n    visibleTailCount--; // When we are overflowing, take into account the icon button that will be rendered\n    return {\n      shouldRenderOverflow: true,\n      maxVisibleTailChildren: Math.max(1, visibleTailCount),\n    };\n  }, [itemWidths, containerWidth, childrenCount]);\n\n  /**\n   * Compute the individual widths of the breadcrumb items.\n   * It's important to have these values for all the items, since they disappear if the container\n   * is overflowing. We need these values to recompute the number of items that can fit,\n   * but we can't do that once they have disappeared from the container.\n   */\n  const computeItemWidths = () => {\n    if (!breadcrumbRef.current) return;\n    const breadcrumbItems = Array.from(\n      breadcrumbRef.current.children\n    ) as HTMLElement[];\n    const widths = breadcrumbItems\n      .map((item) => item.offsetWidth)\n      .filter(Boolean);\n\n    if (widths.length === breadcrumbItems.length) {\n      setItemWidths(widths);\n    }\n  };\n\n  /**\n   * Recompute the item widths when the children change.\n   */\n  useEffect(() => {\n    if (childrenCount !== itemWidths.length) {\n      computeItemWidths();\n    }\n  }, [containerRef.current, childrenCount]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      if (!containerRef.current) return;\n      setContainerWidth(containerRef.current.offsetWidth);\n    },\n  });\n\n  const overflowNodes = useMemo(() => {\n    if (childrenCount > 0 && shouldRenderOverflow) {\n      const tailCount = maxVisibleTailChildren > 1 ? maxVisibleTailChildren : 1;\n      const actualTailCount =\n        maxVisibleTailChildren === 1 ? maxVisibleTailChildren : tailCount;\n      const limitedTailCount = Math.min(actualTailCount, 5); // By design, we limit the number of visible tail items to 6\n      const tailStartIndex = childrenCount - limitedTailCount;\n      // Return overflow indexes (hidden items) - all items except first and tail items\n      return Array.from({ length: tailStartIndex - 1 }, (_, i) => i + 1);\n    }\n    return [];\n  }, [childrenCount, shouldRenderOverflow, maxVisibleTailChildren]);\n\n  return {\n    overflowNodes,\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,sBAAA,GAAyB,CACpC,aAAA,EACA,YAAA,EACA,aAAA,KACG;AACH,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAiB,CAAC,CAAA;AAE9D,EAAA,MAAM,EAAE,oBAAA,EAAsB,sBAAA,EAAuB,GAAI,QAAQ,MAAM;AACrE,IAAA,IAAI,CAAC,cAAA,IAAkB,UAAA,CAAW,MAAA,KAAW,CAAA,EAAG;AAC9C,MAAA,OAAO;AAAA,QACL,oBAAA,EAAsB,KAAA;AAAA,QACtB,sBAAA,EAAwB;AAAA,OAC1B;AAAA,IACF;AAGA,IAAA,MAAM,cAAA,GAAiB,WAAW,MAAA,CAAO,CAAC,GAAG,CAAA,KAAM,CAAA,GAAI,GAAG,CAAC,CAAA;AAC3D,IAAA,IAAI,kBAAkB,cAAA,EAAgB;AACpC,MAAA,OAAO;AAAA,QACL,oBAAA,EAAsB,KAAA;AAAA,QACtB,sBAAA,EAAwB,WAAW,MAAA,GAAS;AAAA,OAC9C;AAAA,IACF;AAGA,IAAA,IAAI,aAAa,UAAA,CAAW,CAAC,IAAI,UAAA,CAAW,UAAA,CAAW,SAAS,CAAC,CAAA;AACjE,IAAA,IAAI,gBAAA,GAAmB,CAAA;AAEvB,IAAA,KAAA,IACM,CAAA,GAAI,UAAA,CAAW,MAAA,GAAS,CAAA,EAC5B,CAAA,GAAI,CAAA,IAAK,UAAA,GAAa,UAAA,CAAW,CAAC,CAAA,GAAI,cAAA,EACtC,CAAA,EAAA,EACA;AACA,MAAA,UAAA,IAAc,WAAW,CAAC,CAAA;AAC1B,MAAA,gBAAA,EAAA;AAAA,IACF;AAEA,IAAA,gBAAA,EAAA;AACA,IAAA,OAAO;AAAA,MACL,oBAAA,EAAsB,IAAA;AAAA,MACtB,sBAAA,EAAwB,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,gBAAgB;AAAA,KACtD;AAAA,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,cAAA,EAAgB,aAAa,CAAC,CAAA;AAQ9C,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,CAAC,cAAc,OAAA,EAAS;AAC5B,IAAA,MAAM,kBAAkB,KAAA,CAAM,IAAA;AAAA,MAC5B,cAAc,OAAA,CAAQ;AAAA,KACxB;AACA,IAAA,MAAM,MAAA,GAAS,gBACZ,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,WAAW,CAAA,CAC9B,MAAA,CAAO,OAAO,CAAA;AAEjB,IAAA,IAAI,MAAA,CAAO,MAAA,KAAW,eAAA,CAAgB,MAAA,EAAQ;AAC5C,MAAA,aAAA,CAAc,MAAM,CAAA;AAAA,IACtB;AAAA,EACF,CAAA;AAKA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAA,KAAkB,WAAW,MAAA,EAAQ;AACvC,MAAA,iBAAA,EAAkB;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,CAAa,OAAA,EAAS,aAAa,CAAC,CAAA;AAExC,EAAA,iBAAA,CAAkB;AAAA,IAChB,GAAA,EAAK,YAAA;AAAA,IACL,UAAU,MAAM;AACd,MAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAC3B,MAAA,iBAAA,CAAkB,YAAA,CAAa,QAAQ,WAAW,CAAA;AAAA,IACpD;AAAA,GACD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAA,IAAI,aAAA,GAAgB,KAAK,oBAAA,EAAsB;AAC7C,MAAA,MAAM,SAAA,GAAY,sBAAA,GAAyB,CAAA,GAAI,sBAAA,GAAyB,CAAA;AACxE,MAAA,MAAM,eAAA,GACJ,sBAAA,KAA2B,CAAA,GAAI,sBAAA,GAAyB,SAAA;AAC1D,MAAA,MAAM,gBAAA,GAAmB,IAAA,CAAK,GAAA,CAAI,eAAA,EAAiB,CAAC,CAAA;AACpD,MAAA,MAAM,iBAAiB,aAAA,GAAgB,gBAAA;AAEvC,MAAA,OAAO,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,cAAA,GAAiB,CAAA,EAAE,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA;AAAA,IACnE;AACA,IAAA,OAAO,EAAC;AAAA,EACV,CAAA,EAAG,CAAC,aAAA,EAAe,oBAAA,EAAsB,sBAAsB,CAAC,CAAA;AAEhE,EAAA,OAAO;AAAA,IACL;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useBreadcrumbThreshold.js","sources":["../../../../src/Breadcrumbs/src/useBreadcrumbThreshold.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react';\nimport { useResizeObserver } from 'react-aria/private/utils/useResizeObserver';\n\nexport const useBreadcrumbThreshold = (\n  childrenCount: number,\n  containerRef: React.RefObject<HTMLElement>,\n  breadcrumbRef: React.RefObject<HTMLOListElement>\n) => {\n  const [itemWidths, setItemWidths] = useState<number[]>([]);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  const { shouldRenderOverflow, maxVisibleTailChildren } = useMemo(() => {\n    if (!containerWidth || itemWidths.length === 0) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: childrenCount,\n      };\n    }\n\n    // Exit early if the container is wider than all items combined\n    const totalItemWidth = itemWidths.reduce((a, b) => a + b, 0);\n    if (totalItemWidth <= containerWidth) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: itemWidths.length - 1,\n      };\n    }\n\n    // The minimum number of items in the container is 2 (first and last).\n    let totalWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];\n    let visibleTailCount = 1; // Last item counted by default\n\n    for (\n      let i = itemWidths.length - 2;\n      i > 0 && totalWidth + itemWidths[i] < containerWidth;\n      i--\n    ) {\n      totalWidth += itemWidths[i];\n      visibleTailCount++;\n    }\n\n    visibleTailCount--; // When we are overflowing, take into account the icon button that will be rendered\n    return {\n      shouldRenderOverflow: true,\n      maxVisibleTailChildren: Math.max(1, visibleTailCount),\n    };\n  }, [itemWidths, containerWidth, childrenCount]);\n\n  /**\n   * Compute the individual widths of the breadcrumb items.\n   * It's important to have these values for all the items, since they disappear if the container\n   * is overflowing. We need these values to recompute the number of items that can fit,\n   * but we can't do that once they have disappeared from the container.\n   */\n  const computeItemWidths = () => {\n    if (!breadcrumbRef.current) return;\n    const breadcrumbItems = Array.from(\n      breadcrumbRef.current.children\n    ) as HTMLElement[];\n    const widths = breadcrumbItems\n      .map((item) => item.offsetWidth)\n      .filter(Boolean);\n\n    if (widths.length === breadcrumbItems.length) {\n      setItemWidths(widths);\n    }\n  };\n\n  /**\n   * Recompute the item widths when the children change.\n   */\n  useEffect(() => {\n    if (childrenCount !== itemWidths.length) {\n      computeItemWidths();\n    }\n  }, [containerRef.current, childrenCount]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      if (!containerRef.current) return;\n      setContainerWidth(containerRef.current.offsetWidth);\n    },\n  });\n\n  const overflowNodes = useMemo(() => {\n    if (childrenCount > 0 && shouldRenderOverflow) {\n      const tailCount = maxVisibleTailChildren > 1 ? maxVisibleTailChildren : 1;\n      const actualTailCount =\n        maxVisibleTailChildren === 1 ? maxVisibleTailChildren : tailCount;\n      const limitedTailCount = Math.min(actualTailCount, 5); // By design, we limit the number of visible tail items to 6\n      const tailStartIndex = childrenCount - limitedTailCount;\n      // Return overflow indexes (hidden items) - all items except first and tail items\n      return Array.from({ length: tailStartIndex - 1 }, (_, i) => i + 1);\n    }\n    return [];\n  }, [childrenCount, shouldRenderOverflow, maxVisibleTailChildren]);\n\n  return {\n    overflowNodes,\n  };\n};\n"],"names":[],"mappings":"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"}

package/build/esm/FileDropzone/src/FileDropzone.js

@@ -3,12 +3,17 @@ import clsx from 'clsx';
 import { useSapphireStyleProps, useButton, Icon, Typography } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';
 import { Upload } from '@danske/sapphire-icons/react';
-import { useHover, Pressable } from '@react-aria/interactions';
-import { useId, useObjectRef, filterDOMProps, mergeProps } from '@react-aria/utils';
+import { useHover } from 'react-aria/useHover';
+import { Pressable } from 'react-aria/Pressable';
+import { mergeProps } from 'react-aria/mergeProps';
+import { useId } from 'react-aria/useId';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 import { FileTrigger } from './FileTrigger.js';
-import { useDrop, useClipboard } from '@react-aria/dnd';
+import { useDrop } from 'react-aria/useDrop';
+import { useClipboard } from 'react-aria/useClipboard';
 import { convertFileListToFileDropItems } from './utils.js';
-import { useFocusRing } from '@react-aria/focus';
+import { useFocusRing } from 'react-aria/useFocusRing';
 import { useMessageFormatter } from '@react-aria/i18n';
 import intlMessages from '../i18n/index.js';
 

package/build/esm/FileDropzone/src/FileDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, Pressable, useHover } from '@react-aria/interactions';\nimport {\n  mergeProps,\n  useId,\n  useObjectRef,\n  filterDOMProps,\n} from '@react-aria/utils';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useClipboard, useDrop } from '@react-aria/dnd';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    > {\n  /**\n   * Whether the dropzone has an error\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n   * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n   * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n   */\n  renderInstruction: (isDropping: boolean) => string;\n  /**\n   * Function that is called when the file select is opened on press, before any file is selected.\n   * @default \"() => null\"\n   */\n  onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n  props: FileDropzoneProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n    getDropOperation = () => 'copy',\n    ...otherProps\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useObjectRef(forwardedRef);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const { dropProps, isDropTarget: isDropping } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n    getDropOperation,\n  });\n  const { buttonProps, isPressed } = useButton(\n    { elementType: 'div' },\n    pressableRef as React.RefObject<Element>\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { clipboardProps } = useClipboard({\n    isDisabled,\n    onPaste: (items) =>\n      onDrop({\n        type: 'drop',\n        items,\n        x: 0,\n        y: 0,\n        dropOperation: 'copy',\n      }),\n  });\n\n  const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n  const onFileTriggerSelect = (files: FileList | null) => {\n    onDrop({\n      type: 'drop',\n      items: convertFileListToFileDropItems(files),\n      x: 0,\n      y: 0,\n      dropOperation: 'copy',\n    });\n  };\n\n  return (\n    <FileTrigger\n      acceptedFileTypes={acceptedFileTypes}\n      allowsMultiple={allowsMultiple}\n      onSelect={onFileTriggerSelect}\n      isDisabled={isDisabled}\n    >\n      <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n        <div\n          {...mergeProps(\n            dropProps,\n            hoverProps,\n            clipboardProps,\n            focusProps,\n            buttonProps\n          )}\n          {...filterDOMProps(otherProps, { global: true })}\n          style={{ ...styleProps.style }}\n          className={clsx(\n            styles['sapphire-dropzone'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-hover']]: isHovered && !isDropping,\n              [styles['is-active']]: isPressed,\n              [styles['is-disabled']]: isDisabled,\n              [styles['is-focus']]: isFocusVisible,\n              [styles['sapphire-dropzone--dropping']]: isDropping,\n              [styles['sapphire-dropzone--error']]: hasError,\n            },\n            styleProps.className\n          )}\n          aria-label={ariaLabel}\n          aria-invalid={hasError}\n          aria-describedby={paragraphId}\n        >\n          <div className={clsx(styles['sapphire-dropzone__content'])}>\n            <div className={clsx(styles['sapphire-dropzone__icon'])}>\n              <Icon size=\"lg\">\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Typography.Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : allowsMultiple\n                  ? format('dropzone-heading-default')\n                  : format('dropzone-heading-default-single')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body size=\"sm\" color=\"secondary\">\n                {renderInstruction(isDropping)}\n              </Typography.Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, useHover } from 'react-aria/useHover';\nimport { Pressable } from 'react-aria/Pressable';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { useId } from 'react-aria/useId';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useDrop } from 'react-aria/useDrop';\nimport { useClipboard } from 'react-aria/useClipboard';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from 'react-aria/useFocusRing';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    > {\n  /**\n   * Whether the dropzone has an error\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n   * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n   * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n   */\n  renderInstruction: (isDropping: boolean) => string;\n  /**\n   * Function that is called when the file select is opened on press, before any file is selected.\n   * @default \"() => null\"\n   */\n  onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n  props: FileDropzoneProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n    getDropOperation = () => 'copy',\n    ...otherProps\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useObjectRef(forwardedRef);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const { dropProps, isDropTarget: isDropping } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n    getDropOperation,\n  });\n  const { buttonProps, isPressed } = useButton(\n    { elementType: 'div' },\n    pressableRef as React.RefObject<Element>\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { clipboardProps } = useClipboard({\n    isDisabled,\n    onPaste: (items) =>\n      onDrop({\n        type: 'drop',\n        items,\n        x: 0,\n        y: 0,\n        dropOperation: 'copy',\n      }),\n  });\n\n  const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n  const onFileTriggerSelect = (files: FileList | null) => {\n    onDrop({\n      type: 'drop',\n      items: convertFileListToFileDropItems(files),\n      x: 0,\n      y: 0,\n      dropOperation: 'copy',\n    });\n  };\n\n  return (\n    <FileTrigger\n      acceptedFileTypes={acceptedFileTypes}\n      allowsMultiple={allowsMultiple}\n      onSelect={onFileTriggerSelect}\n      isDisabled={isDisabled}\n    >\n      <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n        <div\n          {...mergeProps(\n            dropProps,\n            hoverProps,\n            clipboardProps,\n            focusProps,\n            buttonProps\n          )}\n          {...filterDOMProps(otherProps, { global: true })}\n          style={{ ...styleProps.style }}\n          className={clsx(\n            styles['sapphire-dropzone'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-hover']]: isHovered && !isDropping,\n              [styles['is-active']]: isPressed,\n              [styles['is-disabled']]: isDisabled,\n              [styles['is-focus']]: isFocusVisible,\n              [styles['sapphire-dropzone--dropping']]: isDropping,\n              [styles['sapphire-dropzone--error']]: hasError,\n            },\n            styleProps.className\n          )}\n          aria-label={ariaLabel}\n          aria-invalid={hasError}\n          aria-describedby={paragraphId}\n        >\n          <div className={clsx(styles['sapphire-dropzone__content'])}>\n            <div className={clsx(styles['sapphire-dropzone__icon'])}>\n              <Icon size=\"lg\">\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Typography.Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : allowsMultiple\n                  ? format('dropzone-heading-default')\n                  : format('dropzone-heading-default-single')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body size=\"sm\" color=\"secondary\">\n                {renderInstruction(isDropping)}\n              </Typography.Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":"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"}

package/build/esm/FileDropzone/src/FileTrigger.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { useObjectRef, filterDOMProps } from '@react-aria/utils';
-import { PressResponder } from '@react-aria/interactions';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { PressResponder } from 'react-aria/private/interactions/PressResponder';
 
 const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
   return /* @__PURE__ */ React.createElement("input", { ...props, ref, type: "file", style: { display: "none" } });

package/build/esm/FileDropzone/src/FileTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest, { global: true });\n\n  return (\n    <>\n      <PressResponder\n        isDisabled={isDisabled}\n        onPress={() => {\n          if (inputRef.current) {\n            inputRef.current.value = '';\n          }\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;AA6BA,MAAM,kBAAkB,KAAA,CAAM,UAAA,CAAW,SAAS,YAAA,CAChD,OACA,GAAA,EACA;AACA,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAO,GAAG,KAAA,EAAO,GAAA,EAAU,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO,EAAG,CAAA;AAC7E,CAAC,CAAA;AAEM,MAAM,cAAc,KAAA,CAAM,UAAA,CAAW,SAAS,kBAAA,CACnD,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,WAAW,cAAA,CAAe,IAAA,EAAM,EAAE,MAAA,EAAQ,MAAM,CAAA;AAEtD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,IAAI,SAAS,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AAAA,QAC3B;AACA,QAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAC1B;AAAA,KAAA;AAAA,IAEC;AAAA,GACH,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,QAAA;AAAA,MACJ,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,QAAA;AAAA,MACL,MAAA,EAAQ,mBAAmB,QAAA,EAAS;AAAA,MACpC,UAAU,CAAC,CAAA,KAAM,QAAA,GAAY,CAAA,CAAE,OAA4B,KAAK,CAAA;AAAA,MAChE,QAAA,EAAU;AAAA;AAAA,GAEd,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { PressResponder } from 'react-aria/private/interactions/PressResponder';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest, { global: true });\n\n  return (\n    <>\n      <PressResponder\n        isDisabled={isDisabled}\n        onPress={() => {\n          if (inputRef.current) {\n            inputRef.current.value = '';\n          }\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;AA8BA,MAAM,kBAAkB,KAAA,CAAM,UAAA,CAAW,SAAS,YAAA,CAChD,OACA,GAAA,EACA;AACA,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAO,GAAG,KAAA,EAAO,GAAA,EAAU,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO,EAAG,CAAA;AAC7E,CAAC,CAAA;AAEM,MAAM,cAAc,KAAA,CAAM,UAAA,CAAW,SAAS,kBAAA,CACnD,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,WAAW,cAAA,CAAe,IAAA,EAAM,EAAE,MAAA,EAAQ,MAAM,CAAA;AAEtD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,IAAI,SAAS,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AAAA,QAC3B;AACA,QAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAC1B;AAAA,KAAA;AAAA,IAEC;AAAA,GACH,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,QAAA;AAAA,MACJ,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,QAAA;AAAA,MACL,MAAA,EAAQ,mBAAmB,QAAA,EAAS;AAAA,MACpC,UAAU,CAAC,CAAA,KAAM,QAAA,GAAY,CAAA,CAAE,OAA4B,KAAK,CAAA;AAAA,MAChE,QAAA,EAAU;AAAA;AAAA,GAEd,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/Filtering/src/FilterDropdown.js

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { useEffectEvent, filterDOMProps } from '@react-aria/utils';
-import { useControlledState } from '@react-stately/utils';
+import { VisuallyHidden } from 'react-aria/VisuallyHidden';
+import { useEffectEvent } from 'react-aria/private/utils/useEffectEvent';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { useControlledState } from 'react-stately/useControlledState';
 import { useSapphireStyleProps, PopoverTrigger, ButtonGroup, Button, ToggleButton } from '@danske/sapphire-react';
 import { ChevronUp, ChevronDown } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';
@@ -40,7 +41,6 @@ function FilterDropdown({
     e.preventDefault();
     onApply?.();
     close();
-    triggerRef.current?.focus();
   };
   const applyButton = /* @__PURE__ */ React.createElement(
     Button,