@danske/sapphire-react-lab 0.103.0 → 0.105.1

package/build/esm/Accordion/index.js

@@ -2,10 +2,12 @@ import { Accordion } from './src/Accordion.js';
 import { AccordionHeading } from './src/AccordionHeading.js';
 import { AccordionItem } from './src/AccordionItem.js';
 export { AccordionContext } from './src/AccordionContext.js';
+import { AccordionPanel } from './src/AccordionPanel.js';
 
 const _Accordion = Object.assign(Accordion, {
   Heading: AccordionHeading,
-  Item: AccordionItem
+  Item: AccordionItem,
+  Panel: AccordionPanel
 });
 
 export { _Accordion as Accordion };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type AccordionProps } from './src/Accordion';\nimport {\n  AccordionHeading,\n  AccordionHeadingProps,\n} from './src/AccordionHeading';\nimport { AccordionItem, type AccordionItemProps } from './src/AccordionItem';\nimport { AccordionContext } from './src/AccordionContext';\n\n/*\n * Before moving Accordion component to the core package, it's important to check on the\n * latest release of \"@react-aria/accordion\".\n * The hook and the component package are marked as \"pre-release\", so we can expect some changes.\n *\n * https://github.com/adobe/react-spectrum/issues/2801#issuecomment-1035377858\n * https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027\n *\n * The current implementation is based on the SelectableCollection API, which creates bugs when\n * focusable items are used inside of the Accordion.Item.\n * E.g. UC-3414 (fixed), UC-3545 (to-do)\n *\n * Alternatively, we can re-implement the component.\n */\nconst _Accordion = Object.assign(Accordion, {\n  Heading: AccordionHeading,\n  Item: AccordionItem,\n});\n\nexport {\n  _Accordion as Accordion,\n  AccordionContext,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeadingProps,\n};\n"],"names":[],"mappings":";;;;;AAsBM,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA;AAAA,EAC1C,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type AccordionProps } from './src/Accordion';\nimport {\n  AccordionHeading,\n  AccordionHeadingProps,\n} from './src/AccordionHeading';\nimport { AccordionItem, type AccordionItemProps } from './src/AccordionItem';\nimport { AccordionContext } from './src/AccordionContext';\nimport { AccordionPanel, AccordionPanelProps } from './src/AccordionPanel';\n\n/*\n * Before moving Accordion component to the core package, it's important to check on the\n * latest release of \"@react-aria/accordion\".\n * The hook and the component package are marked as \"pre-release\", so we can expect some changes.\n *\n * https://github.com/adobe/react-spectrum/issues/2801#issuecomment-1035377858\n * https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027\n *\n * The current implementation is based on the SelectableCollection API, which creates bugs when\n * focusable items are used inside of the Accordion.Item.\n * E.g. UC-3414 (fixed), UC-3545 (to-do)\n *\n * Alternatively, we can re-implement the component.\n */\nconst _Accordion = Object.assign(Accordion, {\n  Heading: AccordionHeading,\n  Item: AccordionItem,\n  Panel: AccordionPanel,\n});\n\nexport {\n  _Accordion as Accordion,\n  AccordionContext,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeadingProps,\n  type AccordionPanelProps,\n};\n"],"names":[],"mappings":";;;;;;AAuBM,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA;AAAA,EAC1C,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AAAA,EACN,KAAO,EAAA,cAAA;AAAA,CAAA;;;;"}

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

@@ -1,12 +1,11 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { useAccordion } from '@react-aria/accordion';
-import { useObjectRef, mergeProps, filterDOMProps } from '@react-aria/utils';
+import { useObjectRef, filterDOMProps } from '@react-aria/utils';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { useThemeCheck, useSapphireStyleProps, withTruthyZero } from '@danske/sapphire-react';
-import { _AccordionItem } from './AccordionItem.js';
+import { FocusScope } from '@react-aria/focus';
 import { AccordionContext } from './AccordionContext.js';
-import { useTreeState } from './useTreeState.js';
+import { DisclosureGroup } from 'react-aria-components';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -39,28 +38,41 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const _Accordion = (_a, ref) => {
+const Accordion = forwardRef(function Accordion2(_a, ref) {
   var _b = _a, {
-    expansionMode = "multiple",
+    allowsMultipleExpanded = true,
     headerLevel = 5,
     hideLastDivider = false,
     hasNegativeSideMargin = false,
-    sidePadding
+    sidePadding,
+    children,
+    expandedKeys,
+    defaultExpandedKeys,
+    onExpandedChange,
+    isDisabled
   } = _b, props = __objRest(_b, [
-    "expansionMode",
+    "allowsMultipleExpanded",
     "headerLevel",
     "hideLastDivider",
     "hasNegativeSideMargin",
-    "sidePadding"
+    "sidePadding",
+    "children",
+    "expandedKeys",
+    "defaultExpandedKeys",
+    "onExpandedChange",
+    "isDisabled"
   ]);
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps(__spreadValues({}, props), { expansionMode }));
   const forwardedRef = useObjectRef(ref);
-  const { accordionProps } = useAccordion(props, state, forwardedRef);
-  return /* @__PURE__ */ React.createElement(AccordionContext.Provider, {
-    value: { sidePadding }
-  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(accordionProps, filterDOMProps(props, { global: true, labelable: true }))), {
+  return /* @__PURE__ */ React.createElement(FocusScope, null, /* @__PURE__ */ React.createElement(AccordionContext.Provider, {
+    value: { sidePadding, headerLevel }
+  }, /* @__PURE__ */ React.createElement(DisclosureGroup, __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true, labelable: true })), {
+    allowsMultipleExpanded,
+    expandedKeys,
+    defaultExpandedKeys,
+    onExpandedChange,
+    isDisabled,
     ref: forwardedRef,
     className: clsx(styles["sapphire-accordion"], {
       [styles["sapphire-accordion--without-last-divider"]]: hideLastDivider,
@@ -70,14 +82,8 @@ const _Accordion = (_a, ref) => {
       marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
       width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
     } : {}), styleProps.style)
-  }), Array.from(state.collection).map((item) => /* @__PURE__ */ React.createElement(_AccordionItem, {
-    headerLevel,
-    key: item.key,
-    item,
-    state
-  }))));
-};
-const Accordion = forwardRef(_Accordion);
+  }), children)));
+});
 
 export { Accordion };
 //# sourceMappingURL=Accordion.js.map

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, Ref, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useAccordion } from '@react-aria/accordion';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CollectionBase, DOMProps, Expandable } 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';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { AccordionContext } from './AccordionContext';\nimport { TreeExpansionMode, useTreeState } from './useTreeState';\n\nexport interface AccordionProps<T>\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    CollectionBase<T>,\n    DOMProps,\n    Expandable {\n  /** Allow one or many expanded items\n   * @default 'multiple'\n   */\n  expansionMode?: TreeExpansionMode;\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\nconst _Accordion = <T extends object>(\n  {\n    expansionMode = 'multiple',\n    headerLevel = 5,\n    hideLastDivider = false,\n    hasNegativeSideMargin = false,\n    sidePadding,\n    ...props\n  }: AccordionProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const state = useTreeState<T>({ ...props, expansionMode });\n  const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n  const { accordionProps } = useAccordion(props, state, forwardedRef);\n\n  return (\n    <AccordionContext.Provider value={{ sidePadding }}>\n      <div\n        {...mergeProps(\n          accordionProps,\n          filterDOMProps(props, { global: true, labelable: true })\n        )}\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) && 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        {Array.from(state.collection).map((item) => (\n          <_AccordionItem<T>\n            headerLevel={headerLevel}\n            key={item.key}\n            item={item}\n            state={state}\n          />\n        ))}\n      </div>\n    </AccordionContext.Provider>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore Expression produces a union type that is too complex to represent.\nexport const Accordion = forwardRef(_Accordion) as <T extends object>(\n  props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAM,UAAA,GAAa,CACjB,EAAA,EAQA,GACG,KAAA;AATH,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAgB,aAAA,GAAA,UAAA;AAAA,IAChB,WAAc,GAAA,CAAA;AAAA,IACd,eAAkB,GAAA,KAAA;AAAA,IAClB,qBAAwB,GAAA,KAAA;AAAA,IACxB,WAAA;AAAA,GALF,GAAA,EAAA,EAMK,kBANL,EAMK,EAAA;AAAA,IALH,eAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,uBAAA;AAAA,IACA,aAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAgB,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,aAAA,EAAA,CAAA,CAAA,CAAA;AAC1C,EAAA,MAAM,eAAe,YAA6B,CAAA,GAAA,CAAA,CAAA;AAElD,EAAA,MAAM,EAAE,cAAA,EAAA,GAAmB,YAAa,CAAA,KAAA,EAAO,KAAO,EAAA,YAAA,CAAA,CAAA;AAEtD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,iBAAiB,QAAlB,EAAA;AAAA,IAA2B,OAAO,EAAE,WAAA,EAAA;AAAA,GAClC,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UACF,CAAA,cAAA,EACA,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAM,EAAA,SAAA,EAAW,IAHrD,EAAA,CAAA,CAAA,CAAA,EAAA;AAAA,IAKE,GAAK,EAAA,YAAA;AAAA,IACL,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oBACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,0CACN,CAAA,GAAA,eAAA;AAAA,MAAA,CACD,MAAO,CAAA,0CAAA,CAAA,GACN,CAACA,cAAA,CAA4B,WAC7B,CAAA,IAAA,qBAAA;AAAA,KAAA,EAEJ,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAO,EAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EACDA,cAA4B,CAAA,WAAA,CAAA,IAAgB,qBAC5C,GAAA;AAAA,MACE,YACE,OAAO,WAAA,KAAgB,QACnB,GAAA,CAAA,KAAA,EAAQ,sBACR,CAAI,CAAA,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,MACV,OAAO,CAAoB,iBAAA,EAAA,WAAA,CAAA,IAAA,EACzB,OAAO,WAAA,KAAgB,WAAW,EAAK,GAAA,IAAA,CAAA,EAAA,CAAA;AAAA,KAAA,GAG3C,KACD,UAAW,CAAA,KAAA,CAAA;AAAA,GAGf,CAAA,EAAA,KAAA,CAAM,KAAK,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCAChC,cAAD,EAAA;AAAA,IACE,WAAA;AAAA,IACA,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AAUL,MAAM,YAAY,UAAW,CAAA,UAAA;;;;"}
+{"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\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":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DO,MAAM,SAAY,GAAA,UAAA,CAAW,SAClC,UAAA,CAAA,EAAA,EAaA,GACA,EAAA;AAdA,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAyB,sBAAA,GAAA,IAAA;AAAA,IACzB,WAAc,GAAA,CAAA;AAAA,IACd,eAAkB,GAAA,KAAA;AAAA,IAClB,qBAAwB,GAAA,KAAA;AAAA,IACxB,WAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,GAVF,GAAA,EAAA,EAWK,kBAXL,EAWK,EAAA;AAAA,IAVH,wBAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,uBAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,eAAe,YAA6B,CAAA,GAAA,CAAA,CAAA;AAElD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAiB,QAAlB,EAAA;AAAA,IAA2B,KAAA,EAAO,EAAE,WAAa,EAAA,WAAA,EAAA;AAAA,GAC/C,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,cAAA,CAAe,OAAO,EAAE,MAAA,EAAQ,IAAM,EAAA,SAAA,EAAW,IADvD,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,sBAAA;AAAA,IACA,YAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAK,EAAA,YAAA;AAAA,IACL,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oBACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,0CACN,CAAA,GAAA,eAAA;AAAA,MAAA,CACD,MAAO,CAAA,0CAAA,CAAA,GACN,CAACA,cAAA,CAA4B,WAC7B,CAAA,IAAA,qBAAA;AAAA,KAAA,EAEJ,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAO,EAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EACDA,cAA4B,CAAA,WAAA,CAAA,IAChC,qBACI,GAAA;AAAA,MACE,YACE,OAAO,WAAA,KAAgB,QACnB,GAAA,CAAA,KAAA,EAAQ,sBACR,CAAI,CAAA,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,MACV,OAAO,CAAoB,iBAAA,EAAA,WAAA,CAAA,IAAA,EACzB,OAAO,WAAA,KAAgB,WAAW,EAAK,GAAA,IAAA,CAAA,EAAA,CAAA;AAAA,KAAA,GAG3C,KACD,UAAW,CAAA,KAAA,CAAA;AAAA,GAGf,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 
 const AccordionContext = React.createContext({
-  sidePadding: void 0
+  sidePadding: void 0,
+  headerLevel: 5
 });
 function useAccordionContext() {
   const context = useContext(AccordionContext);

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../../../../src/Accordion/src/AccordionContext.ts"],"sourcesContent":["import React, { useContext } from 'react';\n\ninterface AccordionContextProps {\n  sidePadding?: number | string;\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n  sidePadding: undefined,\n});\n\nexport function useAccordionContext(): AccordionContextProps {\n  const context = useContext(AccordionContext);\n  if (context) {\n    return context;\n  }\n  throw new Error(\n    'Accordion context can only be used within Accordion component.'\n  );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,gBAAA,GAAmB,MAAM,aAAqC,CAAA;AAAA,EACzE,WAAa,EAAA,KAAA,CAAA;AAAA,CAAA,EAAA;AAG8C,SAAA,mBAAA,GAAA;AAC3D,EAAA,MAAM,UAAU,UAAW,CAAA,gBAAA,CAAA,CAAA;AAC3B,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAET,EAAA,MAAM,IAAI,KACR,CAAA,gEAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../../../../src/Accordion/src/AccordionContext.ts"],"sourcesContent":["import { TypographyHeadingProps } from '@danske/sapphire-react';\nimport React, { useContext } from 'react';\n\ninterface AccordionContextProps {\n  sidePadding?: number | string;\n  headerLevel?: TypographyHeadingProps['level'];\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n  sidePadding: undefined,\n  headerLevel: 5,\n});\n\nexport function useAccordionContext(): AccordionContextProps {\n  const context = useContext(AccordionContext);\n  if (context) {\n    return context;\n  }\n  throw new Error(\n    'Accordion context can only be used within Accordion component.'\n  );\n}\n"],"names":[],"mappings":";;AAQa,MAAA,gBAAA,GAAmB,MAAM,aAAqC,CAAA;AAAA,EACzE,WAAa,EAAA,KAAA,CAAA;AAAA,EACb,WAAa,EAAA,CAAA;AAAA,CAAA,EAAA;AAG8C,SAAA,mBAAA,GAAA;AAC3D,EAAA,MAAM,UAAU,UAAW,CAAA,gBAAA,CAAA,CAAA;AAC3B,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAET,EAAA,MAAM,IAAI,KACR,CAAA,gEAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { filterDOMProps } from '@react-aria/utils';
 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';
+import { Button } from 'react-aria-components';
+import { useAccordionContext } from './AccordionContext.js';
+import { customPaddingStyleProps } from './utils.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -34,16 +39,31 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const AccordionHeading = (_a) => {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
+const AccordionHeading = forwardRef(function AccordionHeading2(_a, ref) {
+  var _b = _a, { children, headerLevel } = _b, props = __objRest(_b, ["children", "headerLevel"]);
+  const { sidePadding, headerLevel: contextHeaderLevel } = useAccordionContext();
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    role: "heading",
+    "aria-level": headerLevel != null ? headerLevel : contextHeaderLevel
+  }, filterDOMProps(props, { global: true })), {
+    ref
+  }), /* @__PURE__ */ React.createElement(Button, {
+    slot: "trigger",
+    className: ({ isFocusVisible }) => clsx(styles["sapphire-accordion__item-header"], styles["js-focus"], {
+      [styles["is-focus"]]: isFocusVisible
+    }),
+    style: withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
+  }, /* @__PURE__ */ React.createElement(Typography.Heading, {
+    level: 6,
+    elementType: "span"
+  }, /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-accordion__item-heading"])
-  }), children);
-};
+  }, children)), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-accordion__item-arrow"])
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: "lg"
+  }, /* @__PURE__ */ React.createElement(ChevronDown, null)))));
+});
 
 export { AccordionHeading };
 //# sourceMappingURL=AccordionHeading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeading.js","sources":["../../../../src/Accordion/src/AccordionHeading.tsx"],"sourcesContent":["import React, { 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';\n\nexport interface AccordionHeadingProps extends DOMProps {\n  children?: ReactNode;\n}\n\nexport const AccordionHeading = ({\n  children,\n  ...props\n}: AccordionHeadingProps): React.JSX.Element => {\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-accordion__item-heading'])}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,MAAA,gBAAA,GAAmB,CAAC,EAGe,KAAA;AAHf,EAC/B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,GAD+B,GAAA,EAAA,EAE5B,kBAF4B,EAE5B,EAAA;AAAA,IADH,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAEtB,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"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":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,gBAAmB,GAAA,UAAA,CAAW,SACzC,iBAAA,CAAA,EAAA,EACA,GACmB,EAAA;AAFnB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,WAAZ,EAAA,GAAA,EAAA,EAA4B,KAA5B,GAAA,SAAA,CAAA,EAAA,EAA4B,CAA1B,UAAU,EAAA,aAAA,CAAA,CAAA,CAAA;AAGZ,EAAM,MAAA,EAAE,WAAa,EAAA,WAAA,EAAa,kBAChC,EAAA,GAAA,mBAAA,EAAA,CAAA;AAEF,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,IAAK,EAAA,SAAA;AAAA,IACL,cAAY,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,kBAAA;AAAA,GAAA,EACvB,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,IAHtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAIE,GAAA;AAAA,GAAA,CAAA,sCAEC,MAAD,EAAA;AAAA,IACE,IAAK,EAAA,SAAA;AAAA,IACL,SAAA,EAAW,CAAC,EAAE,cAAA,EAAA,KACZ,KAAK,MAAO,CAAA,iCAAA,CAAA,EAAoC,OAAO,UAAa,CAAA,EAAA;AAAA,MAAA,CACjE,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAG1B,KACE,EAAAA,cAAA,CAA4B,WACxB,CAAA,GAAA,uBAAA,CAAwB,WACxB,CAAA,GAAA,EAAA;AAAA,GAGN,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,OAAZ,EAAA;AAAA,IAAoB,KAAO,EAAA,CAAA;AAAA,IAAG,WAAY,EAAA,MAAA;AAAA,GAAA,sCACvC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GACzB,EAAA,QAAA,CAAA,CAAA,sCAGJ,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,gCAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GAAA,sCACR,WAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -1,17 +1,11 @@
-import React, { useRef } from 'react';
+import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { useAccordionItem } from '@react-aria/accordion';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { Item } from '@react-stately/collections';
 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';
-import { useAccordionContext } from './AccordionContext.js';
+import { Disclosure } from 'react-aria-components';
+import { useFocusManager } from '@react-aria/focus';
+import { useObjectRef, useEvent } from '@react-aria/utils';
 
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -27,52 +21,60 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const customPaddingStyleProps = (sidePadding) => ({
-  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
-  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
-});
-function _AccordionItem(props) {
-  const { state, item } = props;
-  const { sidePadding } = useAccordionContext();
-  const isOpen = state.expandedKeys.has(item.key);
-  const isDisabled = state.disabledKeys.has(item.key);
-  const { focusProps, isFocusVisible } = useFocusRing();
-  const ref = useRef(null);
-  const { buttonProps, regionProps } = useAccordionItem(props, state, ref);
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const AccordionItem = forwardRef(function AccordionItem2(_a, forwardedRef) {
+  var _b = _a, { children, id } = _b, props = __objRest(_b, ["children", "id"]);
+  const ref = useObjectRef(forwardedRef);
+  const focusManager = useFocusManager();
   const onKeyDown = (e) => {
-    e.stopPropagation();
+    if (!focusManager)
+      return;
+    if (!(e.target instanceof Element) || e.target.getAttribute("slot") !== "trigger")
+      return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusManager.focusNext();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusManager.focusPrevious();
+        break;
+      case "Home":
+        e.preventDefault();
+        focusManager.focusFirst();
+        break;
+      case "End":
+        e.preventDefault();
+        focusManager.focusLast();
+        break;
+      default:
+        return;
+    }
   };
-  return /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-accordion__item"], {
-      [styles["sapphire-accordion__item--open"]]: isOpen,
+  useEvent(ref, "keydown", onKeyDown);
+  return /* @__PURE__ */ React.createElement(Disclosure, __spreadValues({
+    ref,
+    id,
+    className: ({ isExpanded, isDisabled }) => clsx(styles["sapphire-accordion__item"], {
+      [styles["sapphire-accordion__item--open"]]: isExpanded,
       [styles["is-disabled"]]: isDisabled
     })
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "heading",
-    "aria-level": props.headerLevel
-  }, /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, focusProps)), {
-    "aria-disabled": isDisabled,
-    ref,
-    className: clsx(styles["sapphire-accordion__item-header"], styles["js-focus"], {
-      [styles["is-focus"]]: isFocusVisible
-    }),
-    style: withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
-  }), /* @__PURE__ */ React.createElement(Typography.Heading, {
-    level: 6
-  }, item.props.heading), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-accordion__item-arrow"])
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "lg"
-  }, /* @__PURE__ */ React.createElement(ChevronDown, null))))), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(regionProps, { onKeyDown })), {
-    "aria-hidden": !isOpen,
+  }, props), /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-accordion__item-content-wrapper"])
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-accordion__item-content"]),
-    style: withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
-  }, item.props.children)));
-}
-const AccordionItem = Item;
+  }, children));
+});
 
-export { AccordionItem, _AccordionItem };
+export { AccordionItem };
 //# sourceMappingURL=AccordionItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item } from '@react-stately/collections';\nimport { TreeState } from '@react-stately/tree';\nimport { Node, ItemProps } 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';\n\nimport { useAccordionContext } from './AccordionContext';\n\ninterface SapphireAccordionItemProps<T> {\n  item: Node<T>;\n  state: TreeState<T>;\n  headerLevel: TypographyHeadingProps['level'];\n}\n\nconst customPaddingStyleProps = (sidePadding: number | string) => ({\n  paddingLeft:\n    typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n  paddingRight:\n    typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n});\n\nexport function _AccordionItem<T>(\n  props: SapphireAccordionItemProps<T>\n): JSX.Element {\n  const { state, item } = props;\n  const { sidePadding } = useAccordionContext();\n\n  const isOpen = state.expandedKeys.has(item.key);\n  const isDisabled = state.disabledKeys.has(item.key);\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const ref = useRef<HTMLButtonElement>(null);\n\n  const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);\n\n  /**\n   * Fixes the bug when the onKeyDown event handler set on the useSelectableCollection\n   * (a dependency of useAccordion) interfered with the keyboard events handling\n   * and blocked the usage of some keyboard shortcuts for Accordion.Item children.\n   * E.g. changing DateField value with Arrow key or text selection with Shift+ArrowUp.\n   *\n   * Source:\n   * https://github.com/adobe/react-spectrum/blob/546ffa41f7d1d3a566950a14d8f46cf726891220/packages/%40react-aria/selection/src/useSelectableCollection.ts#L178\n   */\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <div\n      className={clsx(styles['sapphire-accordion__item'], {\n        [styles['sapphire-accordion__item--open']]: isOpen,\n        [styles['is-disabled']]: isDisabled,\n      })}\n    >\n      <div role=\"heading\" aria-level={props.headerLevel}>\n        <button\n          {...mergeProps(buttonProps, focusProps)}\n          aria-disabled={isDisabled}\n          ref={ref}\n          className={clsx(\n            styles['sapphire-accordion__item-header'],\n            styles['js-focus'],\n            {\n              [styles['is-focus']]: isFocusVisible,\n            }\n          )}\n          style={\n            hasAllowedCustomSidePadding(sidePadding)\n              ? customPaddingStyleProps(sidePadding)\n              : {}\n          }\n        >\n          <Typography.Heading level={6}>\n            {item.props.heading}\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      <div\n        {...mergeProps(regionProps, { onKeyDown })}\n        aria-hidden={!isOpen}\n        className={clsx(styles['sapphire-accordion__item-content-wrapper'])}\n      >\n        <div\n          className={clsx(styles['sapphire-accordion__item-content'])}\n          style={\n            hasAllowedCustomSidePadding(sidePadding)\n              ? customPaddingStyleProps(sidePadding)\n              : {}\n          }\n        >\n          {item.props.children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport interface AccordionItemProps<T> extends Omit<ItemProps<T>, 'title'> {\n  heading: ReactNode;\n}\n\nexport const AccordionItem = Item as <T>(\n  props: AccordionItemProps<T>\n) => JSX.Element;\n"],"names":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,uBAAA,GAA0B,CAAC,WAAkC,MAAA;AAAA,EACjE,WACE,EAAA,OAAO,WAAgB,KAAA,QAAA,GAAW,cAAc,CAAG,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,EACrD,YACE,EAAA,OAAO,WAAgB,KAAA,QAAA,GAAW,cAAc,CAAG,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAGhD,SAAA,cAAA,CACL,KACa,EAAA;AACb,EAAM,MAAA,EAAE,OAAO,IAAS,EAAA,GAAA,KAAA,CAAA;AACxB,EAAA,MAAM,EAAE,WAAgB,EAAA,GAAA,mBAAA,EAAA,CAAA;AAExB,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAE/C,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAA,MAAM,MAAM,MAA0B,CAAA,IAAA,CAAA,CAAA;AAEtC,EAAA,MAAM,EAAE,WAAA,EAAa,WAAgB,EAAA,GAAA,gBAAA,CAAoB,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAWvE,EAAM,MAAA,SAAA,GAAY,CAAC,CAA2B,KAAA;AAC5C,IAAE,CAAA,CAAA,eAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGJ,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,0BAA6B,CAAA,EAAA;AAAA,MAAA,CACjD,OAAO,gCAAoC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC3C,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,IAAK,EAAA,SAAA;AAAA,IAAU,cAAY,KAAM,CAAA,WAAA;AAAA,GAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,aAAa,UAD9B,CAAA,CAAA,EAAA;AAAA,IAEE,eAAe,EAAA,UAAA;AAAA,IACf,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,iCAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAG1B,KACE,EAAAA,cAAA,CAA4B,WACxB,CAAA,GAAA,uBAAA,CAAwB,WACxB,CAAA,GAAA,EAAA;AAAA,GAGN,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,OAAZ,EAAA;AAAA,IAAoB,KAAO,EAAA,CAAA;AAAA,GAAA,EACxB,IAAK,CAAA,KAAA,CAAM,OAEd,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,gCAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GACT,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAD,IAKR,CAAA,CAAA,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,WAAa,EAAA,EAAE,SADhC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,eAAa,CAAC,MAAA;AAAA,IACd,SAAA,EAAW,KAAK,MAAO,CAAA,0CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAEtB,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,IACvB,KACE,EAAAA,cAAA,CAA4B,WACxB,CAAA,GAAA,uBAAA,CAAwB,WACxB,CAAA,GAAA,EAAA;AAAA,GAAA,EAGL,KAAK,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAWf,MAAM,aAAgB,GAAA;;;;"}
+{"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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,aAAgB,GAAA,UAAA,CAAW,SACtC,cAAA,CAAA,EAAA,EACA,YACa,EAAA;AAFb,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,EAAZ,EAAA,GAAA,EAAA,EAAmB,KAAnB,GAAA,SAAA,CAAA,EAAA,EAAmB,CAAjB,UAAU,EAAA,IAAA,CAAA,CAAA,CAAA;AAGZ,EAAA,MAAM,MAAM,YAA6B,CAAA,YAAA,CAAA,CAAA;AACzC,EAAA,MAAM,YAAe,GAAA,eAAA,EAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAY,CAAC,CAAqB,KAAA;AACtC,IAAA,IAAI,CAAC,YAAA;AAAc,MAAA,OAAA;AAEnB,IAAA,IACE,EAAI,CAAA,CAAA,MAAA,YAAkB,YACtB,CAAE,CAAA,MAAA,CAAO,aAAa,MAAY,CAAA,KAAA,SAAA;AAElC,MAAA,OAAA;AAEF,IAAA,QAAQ,CAAE,CAAA,GAAA;AAAA,MACH,KAAA,WAAA;AACH,QAAE,CAAA,CAAA,cAAA,EAAA,CAAA;AACF,QAAa,YAAA,CAAA,SAAA,EAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,SAAA;AACH,QAAE,CAAA,CAAA,cAAA,EAAA,CAAA;AACF,QAAa,YAAA,CAAA,aAAA,EAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,MAAA;AACH,QAAE,CAAA,CAAA,cAAA,EAAA,CAAA;AACF,QAAa,YAAA,CAAA,UAAA,EAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAE,CAAA,CAAA,cAAA,EAAA,CAAA;AACF,QAAa,YAAA,CAAA,SAAA,EAAA,CAAA;AACb,QAAA,MAAA;AAAA,MAAA;AAEA,QAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAIN,EAAA,QAAA,CAAS,KAAK,SAAW,EAAA,SAAA,CAAA,CAAA;AAEzB,EAAA,2CACG,UAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAW,CAAC,EAAE,YAAY,UACxB,EAAA,KAAA,IAAA,CAAK,OAAO,0BAA6B,CAAA,EAAA;AAAA,MAAA,CACtC,OAAO,gCAAoC,CAAA,GAAA,UAAA;AAAA,MAAA,CAC3C,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAGzB,EAAA,KAAA,CAAA,sCAEH,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,0CAAA,CAAA,CAAA;AAAA,GACzB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import { filterDOMProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
+import { DisclosurePanel } from 'react-aria-components';
+import { useAccordionContext } from './AccordionContext.js';
+import { customPaddingStyleProps } from './utils.js';
+import { withTruthyZero } from '@danske/sapphire-react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const AccordionPanel = forwardRef(function AccordionPanel2(_a, ref) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const { sidePadding } = useAccordionContext();
+  return /* @__PURE__ */ React.createElement(DisclosurePanel, __spreadValues(__spreadProps(__spreadValues({
+    ref
+  }, filterDOMProps(props, { global: true })), {
+    className: clsx(styles["sapphire-accordion__item-content"]),
+    style: {
+      height: "var(--disclosure-panel-height)"
+    }
+  }), props), /* @__PURE__ */ React.createElement("div", {
+    style: __spreadValues({}, withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}),
+    className: styles["sapphire-accordion__item-content-inner"]
+  }, children));
+});
+
+export { AccordionPanel };
+//# sourceMappingURL=AccordionPanel.js.map

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

@@ -0,0 +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":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,cAAiB,GAAA,UAAA,CAAW,SACvC,eAAA,CAAA,EAAA,EACA,GACmB,EAAA;AAFnB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,QAAA,EAAA,GAAA,EAAA,EAAe,KAAf,GAAA,SAAA,CAAA,EAAA,EAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AAGF,EAAA,MAAM,EAAE,WAAgB,EAAA,GAAA,mBAAA,EAAA,CAAA;AAExB,EAAA,2CACG,eAAD,EAAA,cAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,IAFtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAGE,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MAKL,MAAQ,EAAA,gCAAA;AAAA,KAAA;AAAA,GAEN,CAAA,EAAA,KAAA,CAAA,sCAEH,KAAD,EAAA;AAAA,IACE,KAAO,EAAA,cAAA,CAAA,EAAA,EACDA,cAA4B,CAAA,WAAA,CAAA,GAC5B,wBAAwB,WACxB,CAAA,GAAA,EAAA,CAAA;AAAA,IAEN,WAAW,MAAO,CAAA,wCAAA,CAAA;AAAA,GAEjB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,7 @@
+const customPaddingStyleProps = (sidePadding) => ({
+  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
+  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
+});
+
+export { customPaddingStyleProps };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/Accordion/src/utils.ts"],"sourcesContent":["export const customPaddingStyleProps = (sidePadding: number | string) => ({\n  paddingLeft:\n    typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n  paddingRight:\n    typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n});\n"],"names":[],"mappings":"AAAa,MAAA,uBAAA,GAA0B,CAAC,WAAkC,MAAA;AAAA,EACxE,WACE,EAAA,OAAO,WAAgB,KAAA,QAAA,GAAW,cAAc,CAAG,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,EACrD,YACE,EAAA,OAAO,WAAgB,KAAA,QAAA,GAAW,cAAc,CAAG,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { useThemeCheck, useSapphireStyleProps, Typography } from '@danske/sapphire-react';
+import { useLocale } from '@react-aria/i18n';
+import { useGroupAmount } from './useGroupAmount.js';
+import styles from '@danske/sapphire-css/components/amount/amount.module.css';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Amount = (_a) => {
+  var _b = _a, {
+    emphasis = "regular",
+    variant,
+    formatOptions,
+    value,
+    size
+  } = _b, props = __objRest(_b, [
+    "emphasis",
+    "variant",
+    "formatOptions",
+    "value",
+    "size"
+  ]);
+  useThemeCheck();
+  const { styleProps, filteredProps } = useSapphireStyleProps(props);
+  const { locale } = useLocale();
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, __spreadValues({
+    style: (formatOptions == null ? void 0 : formatOptions.currency) ? "currency" : void 0,
+    signDisplay: (formatOptions == null ? void 0 : formatOptions.signDisplay) || String(value).startsWith("+") ? "always" : "auto",
+    minimumFractionDigits: 2
+  }, formatOptions)), [locale, formatOptions, value]);
+  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);
+  return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({
+    style: styleProps.style,
+    className: styles["sapphire-amount"]
+  }, filteredProps), {
+    "aria-label": formattedValue
+  }), groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(Typography.Body, {
+    elementType: "span",
+    key: index,
+    color: variant === "positive" ? "positive" : "primary",
+    isSemibold: emphasis === "primary" ? true : false,
+    size
+  }, part.value)));
+};
+
+export { Amount };
+//# sourceMappingURL=Amount.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Da,MAAA,MAAA,GAAS,CAAC,EAOS,KAAA;AAPT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAW,QAAA,GAAA,SAAA;AAAA,IACX,OAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,GALqB,GAAA,EAAA,EAMlB,kBANkB,EAMlB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAY,EAAA,aAAA,EAAA,GAAkB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,OAChB,CAAA,MACE,IAAI,IAAA,CAAK,aAAa,MAAQ,EAAA,cAAA,CAAA;AAAA,IAC5B,KAAA,EAAO,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,IAAW,UAAa,GAAA,KAAA,CAAA;AAAA,IAI9C,aACE,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,WAAA,KAAe,OAAO,KAAO,CAAA,CAAA,UAAA,CAAW,OACnD,QACA,GAAA,MAAA;AAAA,IACN,qBAAuB,EAAA,CAAA;AAAA,GACpB,EAAA,aAAA,CAAA,CAAA,EAEP,CAAC,MAAA,EAAQ,aAAe,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1B,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAiB,EAAA,GAAA,cAAA,CAAe,KAAO,EAAA,SAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,OAAO,UAAW,CAAA,KAAA;AAAA,IAClB,WAAW,MAAO,CAAA,iBAAA,CAAA;AAAA,GAAA,EACd,aAHN,CAAA,EAAA;AAAA,IAIE,YAAY,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,GAAI,CAAA,CAAC,MAAM,KACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IACE,WAAY,EAAA,MAAA;AAAA,IACZ,GAAK,EAAA,KAAA;AAAA,IACL,KAAA,EAAO,OAAY,KAAA,UAAA,GAAa,UAAa,GAAA,SAAA;AAAA,IAC7C,UAAA,EAAY,QAAa,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA;AAAA,IAC5C,IAAA;AAAA,GAAA,EAEC,IAAK,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+const useGroupAmount = (value, formatter) => {
+  const numberValue = useMemo(() => {
+    const parsed = Number(value);
+    return isNaN(parsed) ? 0 : parsed;
+  }, [value]);
+  const groupedParts = useMemo(() => {
+    const parts = formatter.formatToParts(numberValue);
+    const result = [];
+    let currentNumber = "";
+    parts.forEach((part) => {
+      if (part.type === "plusSign" || part.type === "minusSign") {
+        result.push({ type: "sign", value: part.value });
+      } else if (part.type === "currency") {
+        if (currentNumber) {
+          result.push({ type: "number", value: currentNumber });
+          currentNumber = "";
+        }
+        result.push({ type: "currency", value: part.value });
+      } else if (part.type !== "literal") {
+        currentNumber += part.value;
+      }
+    });
+    if (currentNumber) {
+      result.push({ type: "number", value: currentNumber });
+    }
+    return result;
+  }, [numberValue, formatter]);
+  const formattedValue = useMemo(() => groupedParts.map((part) => part.value).join(""), [groupedParts]);
+  return { formattedValue, groupedParts };
+};
+
+export { useGroupAmount };
+//# sourceMappingURL=useGroupAmount.js.map