@danske/sapphire-react-lab 0.89.0 → 0.90.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type SapphireAccordionProps } from './src/Accordion';\nimport {\n  AccordionHeading,\n  SapphireAccordionHeadingProps,\n} from './src/AccordionHeading';\nimport {\n  AccordionItem,\n  type SapphireAccordionItemProps,\n} 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. https://jira.danskebank.com/browse/UC-3414 (fixed)\n * https://jira.danskebank.com/browse/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 SapphireAccordionProps,\n  type SapphireAccordionItemProps,\n  type SapphireAccordionHeadingProps,\n};\n"],"names":[],"mappings":";;;;;AA0BM,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';\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. https://jira.danskebank.com/browse/UC-3414 (fixed)\n * https://jira.danskebank.com/browse/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":";;;;;AAuBM,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA;AAAA,EAC1C,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AAAA,CAAA;;;;"}

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

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
-import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import clsx from 'clsx';
-import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
 import { useAccordion } from '@react-aria/accordion';
 import { useObjectRef, mergeProps, filterDOMProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
+import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
 import { _AccordionItem } from './AccordionItem.js';
 import { AccordionContext } from './AccordionContext.js';
 import { useTreeState } from './useTreeState.js';

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 styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport clsx from 'clsx';\nimport {\n  HeadingProps,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { CollectionBase, DOMProps, Expandable } from '@react-types/shared';\nimport { useAccordion } from '@react-aria/accordion';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { AccordionContext } from './AccordionContext';\nimport { TreeExpansionMode, useTreeState } from './useTreeState';\n\nexport interface SapphireAccordionProps<T>\n  extends 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?: HeadingProps['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  }: SapphireAccordionProps<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, { 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              !sidePadding && hasNegativeSideMargin,\n          },\n          styleProps.className\n        )}\n        style={{\n          ...(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        {[...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\nexport const Accordion = forwardRef(_Accordion) as <T extends object>(\n  props: SapphireAccordionProps<T> & { ref?: Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,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,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,gBACA,cAAe,CAAA,KAAA,EAAO,EAAE,SAAA,EAAW,IAHvC,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,MACD,CAAA,MAAA,CAAO,0CACN,CAAA,GAAA,CAAC,WAAe,IAAA,qBAAA;AAAA,KAAA,EAEpB,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAA,EAAO,cACD,CAAA,cAAA,CAAA,EAAA,EAAA,WAAA,IAAe,qBACf,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,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,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;AAQL,MAAM,YAAY,UAAW,CAAA,UAAA;;;;"}
+{"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} 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 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, { 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              !sidePadding && hasNegativeSideMargin,\n          },\n          styleProps.className\n        )}\n        style={{\n          ...(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        {[...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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,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,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,gBACA,cAAe,CAAA,KAAA,EAAO,EAAE,SAAA,EAAW,IAHvC,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,MACD,CAAA,MAAA,CAAO,0CACN,CAAA,GAAA,CAAC,WAAe,IAAA,qBAAA;AAAA,KAAA,EAEpB,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAA,EAAO,cACD,CAAA,cAAA,CAAA,EAAA,EAAA,WAAA,IAAe,qBACf,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,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,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;;;;"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import clsx from 'clsx';
 import { filterDOMProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;

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 styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport clsx from 'clsx';\nimport { DOMProps } from '@react-types/shared';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport interface SapphireAccordionHeadingProps extends DOMProps {\n  children?: ReactNode;\n}\n\nexport const AccordionHeading = ({\n  children,\n  ...props\n}: SapphireAccordionHeadingProps) => {\n  return (\n    <div\n      {...filterDOMProps(props)}\n      className={clsx(styles['sapphire-accordion__item-heading'])}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,MAAA,gBAAA,GAAmB,CAAC,EAGI,KAAA;AAHJ,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,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,cAAA,CAAe,KADrB,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, { 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) => {\n  return (\n    <div\n      {...filterDOMProps(props)}\n      className={clsx(styles['sapphire-accordion__item-heading'])}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,MAAA,gBAAA,GAAmB,CAAC,EAGJ,KAAA;AAHI,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,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,cAAA,CAAe,KADrB,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAEtB,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}

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 { useHover, usePress } from '@react-aria/interactions';\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 { HeadingProps, Icon } from '@danske/sapphire-react';\nimport { ChevronDown } from '@danske/sapphire-icons/react';\n\nimport { useAccordionContext } from './AccordionContext';\n\ninterface AccordionItemProps<T> {\n  item: Node<T>;\n  state: TreeState<T>;\n  headerLevel: HeadingProps['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>(props: AccordionItemProps<T>): 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 { isHovered, hoverProps } = useHover({ isDisabled });\n  const { pressProps, isPressed } = usePress({ isDisabled });\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, hoverProps, pressProps, focusProps)}\n          aria-disabled={isDisabled}\n          ref={ref}\n          className={clsx(\n            styles['sapphire-accordion__item-header'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-focus']]: isFocusVisible,\n              [styles['is-hover']]: isHovered,\n              [styles['is-active']]: isPressed,\n            }\n          )}\n          style={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\n        >\n          {item.props.heading}\n          <div className={clsx(styles['sapphire-accordion__item-arrow'])}>\n            <Icon>\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={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\n        >\n          {item.props.children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport interface SapphireAccordionItemProps<T>\n  extends Omit<ItemProps<T>, 'title'> {\n  heading: ReactNode;\n}\n\nexport const AccordionItem = Item as <T>(\n  props: SapphireAccordionItemProps<T>\n) => JSX.Element;\n"],"names":[],"mappings":"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"}
+{"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 { useHover, usePress } from '@react-aria/interactions';\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 { Icon, TypographyHeadingProps } 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 { isHovered, hoverProps } = useHover({ isDisabled });\n  const { pressProps, isPressed } = usePress({ isDisabled });\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, hoverProps, pressProps, focusProps)}\n          aria-disabled={isDisabled}\n          ref={ref}\n          className={clsx(\n            styles['sapphire-accordion__item-header'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-focus']]: isFocusVisible,\n              [styles['is-hover']]: isHovered,\n              [styles['is-active']]: isPressed,\n            }\n          )}\n          style={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\n        >\n          {item.props.heading}\n          <div className={clsx(styles['sapphire-accordion__item-arrow'])}>\n            <Icon>\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={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\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":[],"mappings":"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"}

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

@@ -1,9 +1,8 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { useSapphireStyleProps, useButton, Icon, Heading } from '@danske/sapphire-react';
+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 { Body } from '../../Typography/src/Body.js';
 import { useHover, usePress, Pressable } from '@react-aria/interactions';
 import { useId, mergeProps } from '@react-aria/utils';
 import { FileTrigger } from './FileTrigger.js';
@@ -108,12 +107,12 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, ref) {
     className: clsx(styles["sapphire-dropzone__icon"])
   }, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(Upload, null))), /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-dropzone__heading"])
-  }, /* @__PURE__ */ React.createElement(Heading, {
+  }, /* @__PURE__ */ React.createElement(Typography.Heading, {
     level: 6
   }, isDropping ? format("dropzone-heading-dropping") : format("dropzone-heading-default"))), /* @__PURE__ */ React.createElement("div", {
     id: paragraphId,
     className: clsx(styles["sapphire-dropzone__paragraph"])
-  }, /* @__PURE__ */ React.createElement(Body, {
+  }, /* @__PURE__ */ React.createElement(Typography.Body, {
     level: 2
   }, renderInstruction(isDropping)))))));
 });

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, useRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { Body } from '../../Typography/src/Body';\nimport {\n  HoverProps,\n  Pressable,\n  useHover,\n  usePress,\n} from '@react-aria/interactions';\nimport { mergeProps, useId } 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 SapphireStyleProps,\n    Omit<DropOptions, 'hasDropButton'>,\n    HoverProps,\n    FileSelectProps,\n    AriaLabelingProps {\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  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useRef(null);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const {\n    dropProps,\n    dropButtonProps,\n    isDropTarget: isDropping,\n  } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n  });\n  const { buttonProps } = useButton(\n    { ...dropButtonProps, elementType: 'div' },\n    pressableRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps, isPressed } = usePress({});\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            pressProps\n          )}\n          ref={ref}\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>\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : format('dropzone-heading-default')}\n              </Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Body level={2}>{renderInstruction(isDropping)}</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, useRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport {\n  HoverProps,\n  Pressable,\n  useHover,\n  usePress,\n} from '@react-aria/interactions';\nimport { mergeProps, useId } 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 SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    AriaLabelingProps {\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  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useRef(null);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const {\n    dropProps,\n    dropButtonProps,\n    isDropTarget: isDropping,\n  } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n  });\n  const { buttonProps } = useButton(\n    { ...dropButtonProps, elementType: 'div' },\n    pressableRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps, isPressed } = usePress({});\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            pressProps\n          )}\n          ref={ref}\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>\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                  : format('dropzone-heading-default')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body level={2}>\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/Filtering/src/FilterDropdown.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { useControlledState } from '@react-stately/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { PopoverTrigger, Flex, tokens, Button } from '@danske/sapphire-react';
-import { ToggleButton } from '../../ToggleButton/src/ToggleButton.js';
+import { useControlledState } from '@react-stately/utils';
+import { PopoverTrigger, Flex, tokens, Button, ToggleButton } from '@danske/sapphire-react';
 import { ChevronUp, ChevronDown } from '@danske/sapphire-icons/react';
 
 function FilterDropdown({
   children,
   label,
   value,
+  isDisabled = false,
+  isApplyDisabled = false,
   isOpen: isOpenProp,
-  clearButtonLabel = "Clear",
   applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
   defaultOpen = false,
-  onOpenChange,
   hasApplyButton = false,
+  noMaxWidth,
   onApply,
   onClear,
-  noMaxWidth,
-  isDisabled = false
+  onOpenChange
 }) {
   const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultOpen, onOpenChange);
   const hasValue = value != null && value !== "";
@@ -29,7 +29,8 @@ function FilterDropdown({
   };
   const applyButton = /* @__PURE__ */ React.createElement(Button, {
     type: "submit",
-    excludeFromTabOrder: !hasApplyButton
+    excludeFromTabOrder: !hasApplyButton,
+    isDisabled: isApplyDisabled
   }, applyButtonLabel);
   return /* @__PURE__ */ React.createElement(PopoverTrigger, {
     popoverContent: /* @__PURE__ */ React.createElement("form", {

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useControlledState } from '@react-stately/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport {\n  Button,\n  Flex,\n  SapphireStyleProps,\n  tokens,\n  PopoverTrigger,\n  PopoverTriggerProps,\n} from '@danske/sapphire-react';\nimport { ToggleButton } from '../../ToggleButton';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\n\nexport interface SapphireFilterDropdownProps\n  extends SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Wheter the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isOpen: isOpenProp,\n  clearButtonLabel = 'Clear',\n  applyButtonLabel = 'Apply',\n  defaultOpen = false,\n  onOpenChange,\n  hasApplyButton = false,\n  onApply,\n  onClear,\n  noMaxWidth,\n  isDisabled = false,\n}: SapphireFilterDropdownProps): JSX.Element {\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    onOpenChange\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const apply = () => {\n    onApply?.();\n    close();\n  };\n\n  const applyButton = (\n    <Button type=\"submit\" excludeFromTabOrder={!hasApplyButton}>\n      {applyButtonLabel}\n    </Button>\n  );\n  return (\n    <PopoverTrigger\n      popoverContent={\n        <form onSubmit={apply}>\n          {children}\n          <Flex\n            justifyContent=\"space-between\"\n            marginTop={tokens.size.spacing30}\n          >\n            <Button\n              variant=\"secondary\"\n              onPress={() => {\n                close();\n                onClear?.();\n              }}\n              isDisabled={!hasValue}\n            >\n              {clearButtonLabel}\n            </Button>\n            {hasApplyButton ? (\n              applyButton\n            ) : (\n              // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n              <VisuallyHidden>{applyButton}</VisuallyHidden>\n            )}\n          </Flex>\n        </form>\n      }\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAkE+B,SAAA,cAAA,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,gBAAmB,GAAA,OAAA;AAAA,EACnB,gBAAmB,GAAA,OAAA;AAAA,EACnB,WAAc,GAAA,KAAA;AAAA,EACd,YAAA;AAAA,EACA,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,KAAA;AAAA,CAC8B,EAAA;AAG3C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAa,CAAA,GAAA,kBAAA,CAC1B,YACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,QAAA,GAAW,KAAS,IAAA,IAAA,IAAQ,KAAU,KAAA,EAAA,CAAA;AAC5C,EAAM,MAAA,KAAA,GAAQ,MAAM,SAAU,CAAA,KAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,IAAA,KAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGF,EAAM,MAAA,WAAA,uCACH,MAAD,EAAA;AAAA,IAAQ,IAAK,EAAA,QAAA;AAAA,IAAS,qBAAqB,CAAC,cAAA;AAAA,GACzC,EAAA,gBAAA,CAAA,CAAA;AAGL,EAAA,2CACG,cAAD,EAAA;AAAA,IACE,cAAA,sCACG,MAAD,EAAA;AAAA,MAAM,QAAU,EAAA,KAAA;AAAA,KACb,EAAA,QAAA,sCACA,IAAD,EAAA;AAAA,MACE,cAAe,EAAA,eAAA;AAAA,MACf,SAAA,EAAW,OAAO,IAAK,CAAA,SAAA;AAAA,KAAA,sCAEtB,MAAD,EAAA;AAAA,MACE,OAAQ,EAAA,WAAA;AAAA,MACR,SAAS,MAAM;AACb,QAAA,KAAA,EAAA,CAAA;AACA,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MAEF,YAAY,CAAC,QAAA;AAAA,KAAA,EAEZ,gBAEF,CAAA,EAAA,cAAA,GACC,WAGA,mBAAA,KAAA,CAAA,aAAA,CAAC,gBAAD,IAAiB,EAAA,WAAA,CAAA,CAAA,CAAA;AAAA,IAKzB,SAAU,EAAA,aAAA;AAAA,IACV,MAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,UAAA;AAAA,GAAA,sCAEC,YAAD,EAAA;AAAA,IACE,MAAM,MAAS,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA,IAAA,CAAA,uCAAiB,WAAD,EAAA,IAAA,CAAA;AAAA,IAC/B,SAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,UAAA;AAAA,GAEC,EAAA,KAAA,EACA,KAAQ,GAAA,IAAA,GAAO,EACf,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  Flex,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  tokens,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\n\nexport interface FilterDropdownProps\n  extends SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n}: FilterDropdownProps): JSX.Element {\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    onOpenChange\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const apply = () => {\n    onApply?.();\n    close();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n  return (\n    <PopoverTrigger\n      popoverContent={\n        <form onSubmit={apply}>\n          {children}\n          <Flex\n            justifyContent=\"space-between\"\n            marginTop={tokens.size.spacing30}\n          >\n            <Button\n              variant=\"secondary\"\n              onPress={() => {\n                close();\n                onClear?.();\n              }}\n              isDisabled={!hasValue}\n            >\n              {clearButtonLabel}\n            </Button>\n            {hasApplyButton ? (\n              applyButton\n            ) : (\n              // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n              <VisuallyHidden>{applyButton}</VisuallyHidden>\n            )}\n          </Flex>\n        </form>\n      }\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAuE+B,SAAA,cAAA,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAa,GAAA,KAAA;AAAA,EACb,eAAkB,GAAA,KAAA;AAAA,EAClB,MAAQ,EAAA,UAAA;AAAA,EACR,gBAAmB,GAAA,OAAA;AAAA,EACnB,gBAAmB,GAAA,OAAA;AAAA,EACnB,WAAc,GAAA,KAAA;AAAA,EACd,cAAiB,GAAA,KAAA;AAAA,EACjB,UAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,CACmC,EAAA;AAGnC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAa,CAAA,GAAA,kBAAA,CAC1B,YACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,QAAA,GAAW,KAAS,IAAA,IAAA,IAAQ,KAAU,KAAA,EAAA,CAAA;AAC5C,EAAM,MAAA,KAAA,GAAQ,MAAM,SAAU,CAAA,KAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,IAAA,KAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGF,EAAM,MAAA,WAAA,uCACH,MAAD,EAAA;AAAA,IACE,IAAK,EAAA,QAAA;AAAA,IACL,qBAAqB,CAAC,cAAA;AAAA,IACtB,UAAY,EAAA,eAAA;AAAA,GAEX,EAAA,gBAAA,CAAA,CAAA;AAGL,EAAA,2CACG,cAAD,EAAA;AAAA,IACE,cAAA,sCACG,MAAD,EAAA;AAAA,MAAM,QAAU,EAAA,KAAA;AAAA,KACb,EAAA,QAAA,sCACA,IAAD,EAAA;AAAA,MACE,cAAe,EAAA,eAAA;AAAA,MACf,SAAA,EAAW,OAAO,IAAK,CAAA,SAAA;AAAA,KAAA,sCAEtB,MAAD,EAAA;AAAA,MACE,OAAQ,EAAA,WAAA;AAAA,MACR,SAAS,MAAM;AACb,QAAA,KAAA,EAAA,CAAA;AACA,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MAEF,YAAY,CAAC,QAAA;AAAA,KAAA,EAEZ,gBAEF,CAAA,EAAA,cAAA,GACC,WAGA,mBAAA,KAAA,CAAA,aAAA,CAAC,gBAAD,IAAiB,EAAA,WAAA,CAAA,CAAA,CAAA;AAAA,IAKzB,SAAU,EAAA,aAAA;AAAA,IACV,MAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,UAAA;AAAA,GAAA,sCAEC,YAAD,EAAA;AAAA,IACE,MAAM,MAAS,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA,IAAA,CAAA,uCAAiB,WAAD,EAAA,IAAA,CAAA;AAAA,IAC/B,SAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,UAAA;AAAA,GAEC,EAAA,KAAA,EACA,KAAQ,GAAA,IAAA,GAAO,EACf,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/LabeledValue/src/LabeledValue.js

@@ -30,7 +30,7 @@ function LabeledValue(props) {
     contextualHelp,
     label,
     labelPlacement = "above",
-    size = "large"
+    size = "lg"
   } = props;
   const { fieldProps } = useField({ label });
   return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, fieldProps), {
@@ -41,7 +41,7 @@ function LabeledValue(props) {
     size
   }, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-labeled-value"], {
-      [styles["sapphire-labeled-value--medium"]]: size === "medium"
+      [styles["sapphire-labeled-value--md"]]: size === "md"
     })
   }, children)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n  children?: React.ReactNode;\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n}\n\nexport function LabeledValue(props: LabeledValueProps) {\n  useThemeCheck();\n  const {\n    children,\n    contextualHelp,\n    label,\n    labelPlacement = 'above',\n    size = 'large',\n  } = props;\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field {...fieldProps} labelPlacement={labelPlacement} size={size}>\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-labeled-value'], {\n            [styles['sapphire-labeled-value--medium']]: size === 'medium',\n          })}\n        >\n          {children}\n        </div>\n      </Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,YAAA,CAAsB,KAA0B,EAAA;AACrD,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,OAAA;AAAA,GACL,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,CAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,yBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAC/C,CAAA,MAAA,CAAO,oCAAoC,IAAS,KAAA,QAAA;AAAA,KAAA,CAAA;AAAA,GAGtD,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n  children?: React.ReactNode;\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n}\n\nexport function LabeledValue(props: LabeledValueProps) {\n  useThemeCheck();\n  const {\n    children,\n    contextualHelp,\n    label,\n    labelPlacement = 'above',\n    size = 'lg',\n  } = props;\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field {...fieldProps} labelPlacement={labelPlacement} size={size}>\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-labeled-value'], {\n            [styles['sapphire-labeled-value--md']]: size === 'md',\n          })}\n        >\n          {children}\n        </div>\n      </Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,YAAA,CAAsB,KAA0B,EAAA;AACrD,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,IAAA;AAAA,GACL,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,CAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,yBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAC/C,CAAA,MAAA,CAAO,gCAAgC,IAAS,KAAA,IAAA;AAAA,KAAA,CAAA;AAAA,GAGlD,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/NumberField/src/NumberField.js

@@ -1,15 +1,15 @@
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import { useFocusRing } from '@react-aria/focus';
+import { useMessageFormatter } from '@react-aria/i18n';
 import { useObjectRef, mergeProps } from '@react-aria/utils';
 import { createFocusableRef } from '@react-spectrum/utils';
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useSapphireNumberField } from './useSapphireNumberField.js';
 import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
-import { useFocusRing } from '@react-aria/focus';
-import clsx from 'clsx';
 import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
-import { useAutofillStyle } from './useAutofillStyle.js';
-import { useMessageFormatter } from '@react-aria/i18n';
 import intlMessages from '../i18n/index.js';
 import { StepperButton } from './StepperButton.js';
+import { useAutofillStyle } from './useAutofillStyle.js';
+import { useSapphireNumberField } from './useSapphireNumberField.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -52,7 +52,7 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
     contextualHelp,
     prefix,
     postfix,
-    size = "large",
+    size = "lg",
     labelPlacement = "above",
     necessityIndicator = false,
     alignInputRight,
@@ -93,14 +93,14 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
   const { focusProps, isFocusVisible } = useFocusRing(props);
   const { styleProps } = useSapphireStyleProps(props);
   const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
-  const domRef = useRef(null);
-  useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(domRef, inputRef)), {
+  const containerRef = useRef(null);
+  useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(containerRef, inputRef)), {
     getInputElement() {
       return inputRef.current;
     }
   }));
   return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, removeUniqueDOMProps(otherProps)), {
-    ref: domRef,
+    ref: containerRef,
     isDisabled,
     error: !!error,
     size,
@@ -113,7 +113,7 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
     className: clsx(textFieldStyles["sapphire-text-field"], {
       [textFieldStyles["is-focus"]]: isFocusVisible,
       [textFieldStyles["sapphire-text-field--error"]]: error === true || typeof error === "string",
-      [textFieldStyles["sapphire-text-field--medium"]]: size === "medium"
+      [textFieldStyles["sapphire-text-field--md"]]: size === "md"
     }),
     style: __spreadValues({}, styleProps.style.width ? { width: styleProps.style.width } : {})
   }, prefix && /* @__PURE__ */ React.createElement("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport React from 'react';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { useFocusRing } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing(props);\n  const { styleProps } = useSapphireStyleProps(props);\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const domRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={domRef}\n      isDisabled={isDisabled}\n      error={!!error}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      {label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              isRequired && necessityIndicator\n                ? 'required'\n                : !isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          className={clsx(textFieldStyles['sapphire-text-field'], {\n            [textFieldStyles['is-focus']]: isFocusVisible,\n            [textFieldStyles['sapphire-text-field--error']]:\n              error === true || typeof error === 'string',\n            [textFieldStyles['sapphire-text-field--medium']]: size === 'medium',\n          })}\n          style={{\n            ...(styleProps.style.width\n              ? { width: styleProps.style.width }\n              : {}),\n          }}\n        >\n          {prefix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n                [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                  typeof prefix !== 'string',\n              })}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            {...mergeProps(inputProps, focusProps, {\n              onChange: updateStyle,\n              onBlur: updateStyle,\n            })}\n            ref={inputRef}\n            className={clsx(textFieldStyles['sapphire-text-field__input'], {\n              [textFieldStyles['sapphire-text-field__input--align-right']]:\n                !!alignInputRight,\n            })}\n            style={autofillStyles}\n          />\n          {postfix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n                [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                  typeof postfix !== 'string',\n              })}\n            >\n              {postfix}\n            </span>\n          )}\n          {showButtons && (\n            <div\n              className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n            >\n              <StepperButton\n                variant=\"increment\"\n                size={size}\n                {...incrementButtonProps}\n              />\n              <StepperButton\n                variant=\"decrement\"\n                size={size}\n                {...decrementButtonProps}\n              />\n            </div>\n          )}\n        </div>\n      </Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  ForwardedRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A HelpButton to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'lg',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing(props);\n  const { styleProps } = useSapphireStyleProps(props);\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(containerRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={containerRef}\n      isDisabled={isDisabled}\n      error={!!error}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      {label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              isRequired && necessityIndicator\n                ? 'required'\n                : !isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          className={clsx(textFieldStyles['sapphire-text-field'], {\n            [textFieldStyles['is-focus']]: isFocusVisible,\n            [textFieldStyles['sapphire-text-field--error']]:\n              error === true || typeof error === 'string',\n            [textFieldStyles['sapphire-text-field--md']]: size === 'md',\n          })}\n          style={{\n            ...(styleProps.style.width\n              ? { width: styleProps.style.width }\n              : {}),\n          }}\n        >\n          {prefix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n                [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                  typeof prefix !== 'string',\n              })}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            {...mergeProps(inputProps, focusProps, {\n              onChange: updateStyle,\n              onBlur: updateStyle,\n            })}\n            ref={inputRef}\n            className={clsx(textFieldStyles['sapphire-text-field__input'], {\n              [textFieldStyles['sapphire-text-field__input--align-right']]:\n                !!alignInputRight,\n            })}\n            style={autofillStyles}\n          />\n          {postfix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n                [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                  typeof postfix !== 'string',\n              })}\n            >\n              {postfix}\n            </span>\n          )}\n          {showButtons && (\n            <div\n              className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n            >\n              <StepperButton\n                variant=\"increment\"\n                size={size}\n                {...incrementButtonProps}\n              />\n              <StepperButton\n                variant=\"decrement\"\n                size={size}\n                {...decrementButtonProps}\n              />\n            </div>\n          )}\n        </div>\n      </Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":[],"mappings":"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"}

package/build/esm/NumberField/src/StepperButton.js

@@ -55,7 +55,7 @@ const StepperButton = (_a) => {
       [textFieldStyles["is-hover"]]: isHovered
     })
   }), /* @__PURE__ */ React.createElement(Icon, {
-    size: size === "large" ? "m" : "s"
+    size: size === "lg" ? "md" : "sm"
   }, variant === "increment" ? /* @__PURE__ */ React.createElement(CaretUp, null) : /* @__PURE__ */ React.createElement(CaretDown, null)));
 };
 

package/build/esm/NumberField/src/StepperButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretUp, CaretDown } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'large' | 'medium';\n}) => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'large' ? 'm' : 's'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,GAAA;AAAA,GAAA,EAClC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretUp, CaretDown } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'lg' | 'md';\n}) => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'lg' ? 'md' : 'sm'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,GAAA,EAChC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/TagGroup/src/Tag.js

@@ -92,14 +92,14 @@ function RemoveButton(removeButtonProps) {
   return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, buttonProps), {
     className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
   }), /* @__PURE__ */ React.createElement(Icon, {
-    size: "s"
+    size: "sm"
   }, /* @__PURE__ */ React.createElement(Close, null)));
 }
 const IconError = () => {
   return /* @__PURE__ */ React.createElement("span", {
     className: clsx(styles["sapphire-tag__error-icon"])
   }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "s"
+    size: "sm"
   }, /* @__PURE__ */ React.createElement(AlertCircle, null)));
 };
 

package/build/esm/TagGroup/src/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck } from '@danske/sapphire-react';\nimport { AlertCircle, Close } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from '@react-aria/focus';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef(null);\n  const {\n    allowsRemoving,\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <FocusRing focusRingClass={styles['is-focus']}>\n      <div\n        ref={ref}\n        {...mergeProps(\n          {\n            onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n              /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n            as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n              if (e.key !== ' ') {\n                onKeyDown?.(e);\n              } else {\n                e.preventDefault();\n              }\n            },\n          },\n          rowProps,\n          hoverProps\n        )}\n        className={clsx(\n          styles['sapphire-tag'],\n          styles['js-focus'],\n          styles['js-hover'],\n          {\n            [styles['sapphire-tag--actionable']]: hasAction,\n            [styles['is-active']]: hasAction && isPressed,\n            [styles['is-hover']]: hasAction && isHovered,\n            [styles['is-disabled']]: isDisabled,\n          }\n        )}\n        {...(hasError ? { 'aria-invalid': true } : {})}\n      >\n        <div {...gridCellProps} className={styles['sapphire-tag__content']}>\n          {hasError && <IconError />}\n          {item.rendered}\n          {allowsRemoving && (\n            <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n          )}\n        </div>\n      </div>\n    </FocusRing>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"s\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"s\">\n        <AlertCircle />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck } from '@danske/sapphire-react';\nimport { AlertCircle, Close } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from '@react-aria/focus';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef(null);\n  const {\n    allowsRemoving,\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <FocusRing focusRingClass={styles['is-focus']}>\n      <div\n        ref={ref}\n        {...mergeProps(\n          {\n            onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n              /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n            as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n              if (e.key !== ' ') {\n                onKeyDown?.(e);\n              } else {\n                e.preventDefault();\n              }\n            },\n          },\n          rowProps,\n          hoverProps\n        )}\n        className={clsx(\n          styles['sapphire-tag'],\n          styles['js-focus'],\n          styles['js-hover'],\n          {\n            [styles['sapphire-tag--actionable']]: hasAction,\n            [styles['is-active']]: hasAction && isPressed,\n            [styles['is-hover']]: hasAction && isHovered,\n            [styles['is-disabled']]: isDisabled,\n          }\n        )}\n        {...(hasError ? { 'aria-invalid': true } : {})}\n      >\n        <div {...gridCellProps} className={styles['sapphire-tag__content']}>\n          {hasError && <IconError />}\n          {item.rendered}\n          {allowsRemoving && (\n            <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n          )}\n        </div>\n      </div>\n    </FocusRing>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"sm\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"sm\">\n        <AlertCircle />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    AriaLabelingProps,\n    SapphireStyleProps {\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup(props, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      error={!!errorMessage}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n    >\n      {(labelText || contextualHelp) && (\n        <Field.Label>\n          <Label {...labelProps} contextualHelp={contextualHelp}>\n            {labelText}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div {...gridProps} ref={ref} className={styles['sapphire-tag-group']}>\n          {[...state.collection].map((item) => (\n            <Tag\n              key={item.key}\n              item={item}\n              state={state}\n              hasError={item.props.hasError}\n            />\n          ))}\n        </div>\n      </Field.Control>\n      {(note || errorMessage) &&\n        (errorMessage ? (\n          <Field.Footer>\n            <Field.Note {...errorMessageProps}>{errorMessage}</Field.Note>\n          </Field.Footer>\n        ) : (\n          <Field.Footer>\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          </Field.Footer>\n        ))}\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAA,QAAA,CAAoC,KAAyB,EAAA;AAClE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IALH,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,QAAQ,YAAa,CAAA,KAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,gBAAkB,EAAA,SAAA,EAAW,YAAY,iBAC/C,EAAA,GAAA,WAAA,CAAY,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,KAAA,EAAO,CAAC,CAAC,YAAA;AAAA,IACT,cAAA;AAAA,IACA,sBAAuB,EAAA,KAAA;AAAA,GAErB,CAAA,EAAA,CAAA,SAAA,IAAa,mCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACpB,CAAA,EAAA,SAAA,CAAA,CAAA,sCAIN,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,GAAA;AAAA,IAAU,WAAW,MAAO,CAAA,oBAAA,CAAA;AAAA,GAC7C,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,GAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,EAAU,KAAK,KAAM,CAAA,QAAA;AAAA,GAK3B,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAQ,kBAEN,YAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,sCACG,KAAM,CAAA,IAAA,EAAP,mBAAgB,iBAAoB,CAAA,EAAA,YAAA,CAAA,CAAA,uCAGrC,KAAM,CAAA,MAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,gBAAmB,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    AriaLabelingProps,\n    SapphireStyleProps {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup(props, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      error={!!errorMessage}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n    >\n      {(labelText || contextualHelp) && (\n        <Field.Label>\n          <Label {...labelProps} contextualHelp={contextualHelp}>\n            {labelText}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div {...gridProps} ref={ref} className={styles['sapphire-tag-group']}>\n          {[...state.collection].map((item) => (\n            <Tag\n              key={item.key}\n              item={item}\n              state={state}\n              hasError={item.props.hasError}\n            />\n          ))}\n        </div>\n      </Field.Control>\n      {(note || errorMessage) &&\n        (errorMessage ? (\n          <Field.Footer>\n            <Field.Note {...errorMessageProps}>{errorMessage}</Field.Note>\n          </Field.Footer>\n        ) : (\n          <Field.Footer>\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          </Field.Footer>\n        ))}\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAA,QAAA,CAAoC,KAAyB,EAAA;AAClE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IALH,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,QAAQ,YAAa,CAAA,KAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,gBAAkB,EAAA,SAAA,EAAW,YAAY,iBAC/C,EAAA,GAAA,WAAA,CAAY,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,KAAA,EAAO,CAAC,CAAC,YAAA;AAAA,IACT,cAAA;AAAA,IACA,sBAAuB,EAAA,KAAA;AAAA,GAErB,CAAA,EAAA,CAAA,SAAA,IAAa,mCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACpB,CAAA,EAAA,SAAA,CAAA,CAAA,sCAIN,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,GAAA;AAAA,IAAU,WAAW,MAAO,CAAA,oBAAA,CAAA;AAAA,GAC7C,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,GAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,EAAU,KAAK,KAAM,CAAA,QAAA;AAAA,GAK3B,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAQ,kBAEN,YAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,sCACG,KAAM,CAAA,IAAA,EAAP,mBAAgB,iBAAoB,CAAA,EAAA,YAAA,CAAA,CAAA,uCAGrC,KAAM,CAAA,MAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,gBAAmB,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -1,24 +1,7 @@
-export { ToggleButton } from './ToggleButton/src/ToggleButton.js';
-export { Calendar } from './Calendar/src/Calendar.js';
-export { RangeCalendar } from './Calendar/src/RangeCalendar.js';
-import '@react-stately/calendar';
-import '@react-stately/utils';
-export { NotificationBadge } from './NotificationBadge/src/NotificationBadge.js';
 export { FilterDropdown } from './Filtering/src/FilterDropdown.js';
-export { DateField } from './DateField/src/DateField.js';
-export { DateRangeField } from './DateField/src/DateRangeField.js';
-export { isDateOutsideValidRange, isEndDateBeforeStartDate } from './DateField/src/helpers.js';
-export { FeedbackMessage } from './FeedbackMessage/src/FeedbackMessage.js';
-export { SearchField } from './SearchField/src/SearchField.js';
-export { ToastProvider } from './Toast/src/ToastProvider.js';
-export { useShowToast } from './Toast/src/useShowToast.js';
 export { Accordion } from './Accordion/index.js';
-export { Typography } from './Typography/index.js';
-export { Fieldset } from './Fieldset/src/Fieldset.js';
-export { Avatar } from './Avatar/src/Avatar.js';
 export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
 export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
-export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { TagGroup } from './TagGroup/src/TagGroup.js';
 export { TagItem } from './TagGroup/src/TagItem.js';

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}