@danske/sapphire-react-lab 0.88.1 → 0.90.2

package/build/esm/Accordion/index.js

@@ -1,6 +1,7 @@
 import { Accordion } from './src/Accordion.js';
 import { AccordionHeading } from './src/AccordionHeading.js';
 import { AccordionItem } from './src/AccordionItem.js';
+export { AccordionContext } from './src/AccordionContext.js';
 
 const _Accordion = Object.assign(Accordion, {
   Heading: AccordionHeading,

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';\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  type SapphireAccordionProps,\n  type SapphireAccordionItemProps,\n  type SapphireAccordionHeadingProps,\n};\n"],"names":[],"mappings":";;;;AAyBM,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,11 +1,12 @@
 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 { useTreeState } from './useTreeState.js';
-import { _AccordionItem } from './AccordionItem.js';
 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';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -42,29 +43,39 @@ const _Accordion = (_a, ref) => {
   var _b = _a, {
     expansionMode = "multiple",
     headerLevel = 5,
-    hideLastDivider = false
+    hideLastDivider = false,
+    hasNegativeSideMargin = false,
+    sidePadding
   } = _b, props = __objRest(_b, [
     "expansionMode",
     "headerLevel",
-    "hideLastDivider"
+    "hideLastDivider",
+    "hasNegativeSideMargin",
+    "sidePadding"
   ]);
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
   const state = useTreeState(__spreadProps(__spreadValues({}, props), { expansionMode }));
   const forwardedRef = useObjectRef(ref);
   const { accordionProps } = useAccordion(props, state, forwardedRef);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(accordionProps, filterDOMProps(props, { labelable: true }))), {
+  return /* @__PURE__ */ React.createElement(AccordionContext.Provider, {
+    value: { sidePadding }
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(accordionProps, filterDOMProps(props, { labelable: true }))), {
+    ref: forwardedRef,
     className: clsx(styles["sapphire-accordion"], {
-      [styles["sapphire-accordion--without-last-divider"]]: hideLastDivider
+      [styles["sapphire-accordion--without-last-divider"]]: hideLastDivider,
+      [styles["sapphire-accordion--negative-margin-self"]]: !sidePadding && hasNegativeSideMargin
     }, styleProps.className),
-    ref: forwardedRef,
-    style: styleProps.style
+    style: __spreadValues(__spreadValues({}, sidePadding && hasNegativeSideMargin ? {
+      marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
+      width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
+    } : {}), styleProps.style)
   }), [...state.collection].map((item) => /* @__PURE__ */ React.createElement(_AccordionItem, {
     headerLevel,
     key: item.key,
     item,
     state
-  })));
+  }))));
 };
 const Accordion = forwardRef(_Accordion);
 

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 { TreeExpansionMode, useTreeState } from './useTreeState';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\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 list item.\n   * Useful when rendered in a container which already has borders.\n   */\n  hideLastDivider?: boolean;\n}\n\nconst _Accordion = <T extends object>(\n  {\n    expansionMode = 'multiple',\n    headerLevel = 5,\n    hideLastDivider = false,\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    <div\n      {...mergeProps(\n        accordionProps,\n        filterDOMProps(props, { labelable: true })\n      )}\n      className={clsx(\n        styles['sapphire-accordion'],\n        {\n          [styles['sapphire-accordion--without-last-divider']]: hideLastDivider,\n        },\n        styleProps.className\n      )}\n      ref={forwardedRef}\n      style={styleProps.style}\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  );\n};\n\nexport const Accordion = forwardRef(_Accordion) as <T extends object>(\n  props: SapphireAccordionProps<T> & { ref?: Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,UAAA,GAAa,CACjB,EAAA,EAMA,GACG,KAAA;AAPH,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAgB,aAAA,GAAA,UAAA;AAAA,IAChB,WAAc,GAAA,CAAA;AAAA,IACd,eAAkB,GAAA,KAAA;AAAA,GAHpB,GAAA,EAAA,EAIK,kBAJL,EAIK,EAAA;AAAA,IAHH,eAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;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,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,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oBACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,0CAA8C,CAAA,GAAA,eAAA;AAAA,KAAA,EAExD,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,GAAK,EAAA,YAAA;AAAA,IACL,OAAO,UAAW,CAAA,KAAA;AAAA,GAEjB,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;AAAA,CAAA,CAAA;AAOH,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/AccordionContext.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+
+const AccordionContext = React.createContext({
+  sidePadding: void 0
+});
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("Accordion context can only be used within Accordion component.");
+}
+
+export { AccordionContext, useAccordionContext };
+//# sourceMappingURL=AccordionContext.js.map

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

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

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

@@ -1,13 +1,14 @@
 import React, { useRef } from 'react';
-import { useHover, usePress } from '@react-aria/interactions';
+import clsx from 'clsx';
+import { useAccordionItem } from '@react-aria/accordion';
 import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import clsx from 'clsx';
+import { Item } from '@react-stately/collections';
 import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
 import { Icon } from '@danske/sapphire-react';
 import { ChevronDown } from '@danske/sapphire-icons/react';
-import { useAccordionItem } from '@react-aria/accordion';
-import { Item } from '@react-stately/collections';
+import { useAccordionContext } from './AccordionContext.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -28,8 +29,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const customPaddingStyleProps = (sidePadding) => ({
+  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
+  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
+});
 function _AccordionItem(props) {
   const { state, item } = props;
+  const { sidePadding } = useAccordionContext();
   const isOpen = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { isHovered, hoverProps } = useHover({ isDisabled });
@@ -55,14 +61,16 @@ function _AccordionItem(props) {
       [styles["is-focus"]]: isFocusVisible,
       [styles["is-hover"]]: isHovered,
       [styles["is-active"]]: isPressed
-    })
+    }),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }), item.props.heading, /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-accordion__item-arrow"])
   }, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(ChevronDown, null))))), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
     className: clsx(styles["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-accordion__item-content"])
+    className: clsx(styles["sapphire-accordion__item-content"]),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }, item.props.children)));
 }
 const AccordionItem = Item;

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 { Node, ItemProps } from '@react-types/shared';\nimport { TreeState } from '@react-stately/tree';\nimport { useHover, usePress } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\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';\nimport { useAccordionItem } from '@react-aria/accordion';\nimport { Item } from '@react-stately/collections';\n\ninterface AccordionItemProps<T> {\n  item: Node<T>;\n  state: TreeState<T>;\n  headerLevel: HeadingProps['level'];\n}\n\nexport function _AccordionItem<T>(props: AccordionItemProps<T>): JSX.Element {\n  const { state, item } = props;\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        >\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 className={clsx(styles['sapphire-accordion__item-content'])}>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAAA,cAAA,CAA2B,KAA2C,EAAA;AAC3E,EAAM,MAAA,EAAE,OAAO,IAAS,EAAA,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAE/C,EAAA,MAAM,EAAE,SAAA,EAAW,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAA,MAAM,MAAM,MAA0B,CAAA,IAAA,CAAA,CAAA;AAEtC,EAAA,MAAM,EAAE,WAAA,EAAa,WAAgB,EAAA,GAAA,gBAAA,CAAoB,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAWvE,EAAM,MAAA,SAAA,GAAY,CAAC,CAA2B,KAAA;AAC5C,IAAE,CAAA,CAAA,eAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGJ,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,0BAA6B,CAAA,EAAA;AAAA,MAAA,CACjD,OAAO,gCAAoC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC3C,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,IAAK,EAAA,SAAA;AAAA,IAAU,cAAY,KAAM,CAAA,WAAA;AAAA,GAAA,sCACnC,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,YAAY,UADtD,CAAA,CAAA,EAAA;AAAA,IAEE,eAAe,EAAA,UAAA;AAAA,IACf,GAAA;AAAA,IACA,WAAW,IACT,CAAA,MAAA,CAAO,oCACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,MAAA,CACrB,OAAO,UAAc,CAAA,GAAA,SAAA;AAAA,MAAA,CACrB,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,EAI1B,IAAK,CAAA,KAAA,CAAM,OACZ,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,gCAAA,CAAA,CAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,kBAKP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,WAAa,EAAA,EAAE,SADhC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,eAAa,CAAC,MAAA;AAAA,IACd,SAAA,EAAW,KAAK,MAAO,CAAA,0CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAEtB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,EACzB,KAAK,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAYf,MAAM,aAAgB,GAAA;;;;"}
+{"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)));
 };