@danske/sapphire-react-lab 0.105.2 → 0.106.1

package/build/esm/ProgressIndicator/src/ProgressIndicator.js

@@ -5,25 +5,6 @@ import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
 import { useProgressBar } from '@react-aria/progress';
 import { filterDOMProps } from '@react-aria/utils';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -33,25 +14,32 @@ const ProgressIndicator = (props) => {
   } = props;
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  const { progressBarProps } = useProgressBar(__spreadProps(__spreadValues({}, props), {
+  const { progressBarProps } = useProgressBar({
+    ...props,
     minValue: 0,
     valueLabel: ariaValueText
-  }));
+  });
   const minValue = 0;
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
-    className: clsx(styles["sapphire-progress"])
-  }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, progressBarProps), {
-    className: styles["sapphire-progress--indicator"],
-    style: __spreadProps(__spreadValues({}, styleProps), { width: `${widthPercentage}%` }),
-    "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
-    "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
-  })), segments > 1 && /* @__PURE__ */ React.createElement("div", {
-    className: styles["sapphire-progress--segments"]
-  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", {
-    key: index
-  }))));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps(props, { global: true }),
+      className: clsx(styles["sapphire-progress"])
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...progressBarProps,
+        className: styles["sapphire-progress--indicator"],
+        style: { ...styleProps, width: `${widthPercentage}%` },
+        "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
+        "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
+      }
+    ),
+    segments > 1 && /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-progress--segments"] }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", { key: index })))
+  );
 };
 
 export { ProgressIndicator };

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.js","sources":["../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from '@react-aria/progress';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-progress'])}\n    >\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\n        aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n        aria-labelledby={\n          'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n        }\n      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAA,iBAAA,GAAoB,CAC/B,KACgB,KAAA;AAChB,EAAM,MAAA;AAAA,IACJ,QAAW,GAAA,GAAA;AAAA,IACX,KAAO,EAAA,SAAA;AAAA,IACP,QAAW,GAAA,CAAA;AAAA,IACX,gBAAkB,EAAA,aAAA;AAAA,GAChB,GAAA,KAAA,CAAA;AAEJ,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,gBAAA,EAAA,GAAqB,cAAe,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACvC,KADuC,CAAA,EAAA;AAAA,IAE1C,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,aAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAGd,EAAA,MAAM,QAAW,GAAA,CAAA,CAAA;AAEjB,EAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAI,WAAW,QAAW,CAAA,EAAA,QAAA,CAAA,CAAA;AACtD,EAAM,MAAA,eAAA,GAAmB,QAAQ,QAAY,GAAA,GAAA,CAAA;AAE7C,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,mBAAA,CAAA,CAAA;AAAA,GAEvB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,gBADN,CAAA,EAAA;AAAA,IAEE,WAAW,MAAO,CAAA,8BAAA,CAAA;AAAA,IAClB,KAAO,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,UAAL,CAAA,EAAA,EAAiB,OAAO,CAAG,EAAA,eAAA,CAAA,CAAA,CAAA,EAAA,CAAA;AAAA,IAClC,YAAY,EAAA,YAAA,IAAgB,KAAQ,GAAA,KAAA,CAAM,YAAgB,CAAA,GAAA,KAAA,CAAA;AAAA,IAC1D,iBACE,EAAA,iBAAA,IAAqB,KAAQ,GAAA,KAAA,CAAM,iBAAqB,CAAA,GAAA,KAAA,CAAA;AAAA,GAG3D,CAAA,CAAA,EAAA,QAAA,GAAW,CACV,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,6BAAA,CAAA;AAAA,GACpB,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,YAAY,CAAC,CAAA,EAAG,KACpC,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IAAM,GAAK,EAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"ProgressIndicator.js","sources":["../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from '@react-aria/progress';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-progress'])}\n    >\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\n        aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n        aria-labelledby={\n          'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n        }\n      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,KACgB;AAChB,EAAA,MAAM;AAAA,IACJ,QAAA,GAAW,GAAA;AAAA,IACX,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,GAAW,CAAA;AAAA,IACX,gBAAA,EAAkB;AAAA,GACpB,GAAI,KAAA;AAEJ,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,cAAA,CAAe;AAAA,IAC1C,GAAG,KAAA;AAAA,IACH,QAAA,EAAU,CAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAA;AAEjB,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,SAAA,EAAW,QAAQ,GAAG,QAAQ,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAmB,QAAQ,QAAA,GAAY,GAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAmB,CAAC;AAAA,KAAA;AAAA,oBAE3C,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA;AAAA,QACJ,SAAA,EAAW,OAAO,8BAA8B,CAAA;AAAA,QAChD,OAAO,EAAE,GAAG,YAAY,KAAA,EAAO,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAI;AAAA,QACrD,YAAA,EAAY,YAAA,IAAgB,KAAA,GAAQ,KAAA,CAAM,YAAY,CAAA,GAAI,MAAA;AAAA,QAC1D,iBAAA,EACE,iBAAA,IAAqB,KAAA,GAAQ,KAAA,CAAM,iBAAiB,CAAA,GAAI;AAAA;AAAA,KAE5D;AAAA,IACC,QAAA,GAAW,qBACV,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,6BAA6B,CAAA,EAAA,EACjD,KAAA,CAAM,IAAA,CAAK,EAAE,QAAQ,QAAA,EAAS,EAAG,CAAC,CAAA,EAAG,KAAA,yCACnC,MAAA,EAAA,EAAK,GAAA,EAAK,KAAA,EAAO,CACnB,CACH;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Sidebar/index.ts"],"sourcesContent":["import { Sidebar } from './src/Sidebar';\nimport { SidebarHeader } from './src/Header';\nimport { SidebarItem } from './src/Item';\nimport { SidebarExpandableItem } from './src/ExpandableItem';\nimport { SidebarSection } from './src/Section';\nimport { SidebarBody } from './src/Body';\nimport { SidebarList } from './src/List';\nimport { ResponsiveSidebarProvider } from './src/ResponsiveSidebarContext';\nimport { SidebarPanelTrigger } from './src/Panel';\n\nconst _Sidebar = Object.assign(Sidebar, {\n  ResponsiveProvider: ResponsiveSidebarProvider,\n  Header: SidebarHeader,\n  Body: SidebarBody,\n  List: SidebarList,\n  Item: SidebarItem,\n  ExpandableItem: SidebarExpandableItem,\n  Section: SidebarSection,\n  PanelTrigger: SidebarPanelTrigger,\n});\n\nexport { _Sidebar as Sidebar };\nexport { type SidebarProps } from './src/Sidebar';\nexport { type SidebarItemProps } from './src/Item';\nexport { type SidebarExpandableItemProps } from './src/ExpandableItem';\nexport { type SidebarSectionProps } from './src/Section';\nexport { type SidebarBodyProps } from './src/Body';\nexport { type SidebarListProps } from './src/List';\nexport { type SidebarHeaderProps } from './src/Header';\n"],"names":[],"mappings":";;;;;;;;;;AAUM,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,OAAS,EAAA;AAAA,EACtC,kBAAoB,EAAA,yBAAA;AAAA,EACpB,MAAQ,EAAA,aAAA;AAAA,EACR,IAAM,EAAA,WAAA;AAAA,EACN,IAAM,EAAA,WAAA;AAAA,EACN,IAAM,EAAA,WAAA;AAAA,EACN,cAAgB,EAAA,qBAAA;AAAA,EAChB,OAAS,EAAA,cAAA;AAAA,EACT,YAAc,EAAA,mBAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/Sidebar/index.ts"],"sourcesContent":["import { Sidebar } from './src/Sidebar';\nimport { SidebarHeader } from './src/Header';\nimport { SidebarItem } from './src/Item';\nimport { SidebarExpandableItem } from './src/ExpandableItem';\nimport { SidebarSection } from './src/Section';\nimport { SidebarBody } from './src/Body';\nimport { SidebarList } from './src/List';\nimport { ResponsiveSidebarProvider } from './src/ResponsiveSidebarContext';\nimport { SidebarPanelTrigger } from './src/Panel';\n\nconst _Sidebar = Object.assign(Sidebar, {\n  ResponsiveProvider: ResponsiveSidebarProvider,\n  Header: SidebarHeader,\n  Body: SidebarBody,\n  List: SidebarList,\n  Item: SidebarItem,\n  ExpandableItem: SidebarExpandableItem,\n  Section: SidebarSection,\n  PanelTrigger: SidebarPanelTrigger,\n});\n\nexport { _Sidebar as Sidebar };\nexport { type SidebarProps } from './src/Sidebar';\nexport { type SidebarItemProps } from './src/Item';\nexport { type SidebarExpandableItemProps } from './src/ExpandableItem';\nexport { type SidebarSectionProps } from './src/Section';\nexport { type SidebarBodyProps } from './src/Body';\nexport { type SidebarListProps } from './src/List';\nexport { type SidebarHeaderProps } from './src/Header';\n"],"names":[],"mappings":";;;;;;;;;;AAUA,MAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAO,OAAA,EAAS;AAAA,EACtC,kBAAA,EAAoB,yBAAA;AAAA,EACpB,MAAA,EAAQ,aAAA;AAAA,EACR,IAAA,EAAM,WAAA;AAAA,EACN,IAAA,EAAM,WAAA;AAAA,EACN,IAAA,EAAM,WAAA;AAAA,EACN,cAAA,EAAgB,qBAAA;AAAA,EAChB,OAAA,EAAS,cAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC;;;;"}

package/build/esm/Sidebar/src/Body.js

@@ -4,52 +4,27 @@ import { filterDOMProps } from '@react-aria/utils';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
 import { useScrollCheck } from '@danske/sapphire-react';
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarBody = (_a) => {
-  var _b = _a, {
-    elementType = "nav",
-    children
-  } = _b, props = __objRest(_b, [
-    "elementType",
-    "children"
-  ]);
+const SidebarBody = ({
+  elementType = "nav",
+  children,
+  ...props
+}) => {
   const RootNode = elementType;
   const sidebarBody = useRef(null);
   const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);
-  return /* @__PURE__ */ React.createElement(RootNode, __spreadValues(__spreadValues({
-    ref: sidebarBody,
-    tabIndex: -1,
-    className: clsx(styles["sapphire-sidebar__body"], {
-      [styles["sapphire-sidebar__body--scrolled"]]: isScrolled
-    })
-  }, filterDOMProps(props, { global: true })), scrollCheckProps), children);
+  return /* @__PURE__ */ React.createElement(
+    RootNode,
+    {
+      ref: sidebarBody,
+      tabIndex: -1,
+      className: clsx(styles["sapphire-sidebar__body"], {
+        [styles["sapphire-sidebar__body--scrolled"]]: isScrolled
+      }),
+      ...filterDOMProps(props, { global: true }),
+      ...scrollCheckProps
+    },
+    children
+  );
 };
 
 export { SidebarBody };

package/build/esm/Sidebar/src/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../src/Sidebar/src/Body.tsx"],"sourcesContent":["import React, { ReactNode, useRef } 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/sidebar/sidebar.module.css';\nimport { useScrollCheck } from '@danske/sapphire-react';\n\nexport interface SidebarBodyProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'nav'\n   */\n  elementType?: string;\n  children?: ReactNode;\n}\n\nexport const SidebarBody = ({\n  elementType = 'nav',\n  children,\n  ...props\n}: SidebarBodyProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n  const sidebarBody = useRef<HTMLElement>(null);\n  const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);\n\n  return (\n    <RootNode\n      ref={sidebarBody}\n      tabIndex={\n        -1 /* Some browsers will make this focusable because it overflows */\n      }\n      className={clsx(styles['sapphire-sidebar__body'], {\n        [styles['sapphire-sidebar__body--scrolled']]: isScrolled,\n      })}\n      {...filterDOMProps(props, { global: true })}\n      {...scrollCheckProps}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBa,MAAA,WAAA,GAAc,CAAC,EAIe,KAAA;AAJf,EAC1B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAc,WAAA,GAAA,KAAA;AAAA,IACd,QAAA;AAAA,GAF0B,GAAA,EAAA,EAGvB,kBAHuB,EAGvB,EAAA;AAAA,IAFH,aAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAA;AACjB,EAAA,MAAM,cAAc,MAAoB,CAAA,IAAA,CAAA,CAAA;AACxC,EAAM,MAAA,EAAE,UAAY,EAAA,gBAAA,EAAA,GAAqB,cAAe,CAAA,WAAA,CAAA,CAAA;AAExD,EAAA,2CACG,QAAD,EAAA,cAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAK,EAAA,WAAA;AAAA,IACL,QACE,EAAA,CAAA,CAAA;AAAA,IAEF,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CAC/C,OAAO,kCAAsC,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAE5C,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,UAChC,gBAEH,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Body.js","sources":["../../../../src/Sidebar/src/Body.tsx"],"sourcesContent":["import React, { ReactNode, useRef } 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/sidebar/sidebar.module.css';\nimport { useScrollCheck } from '@danske/sapphire-react';\n\nexport interface SidebarBodyProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'nav'\n   */\n  elementType?: string;\n  children?: ReactNode;\n}\n\nexport const SidebarBody = ({\n  elementType = 'nav',\n  children,\n  ...props\n}: SidebarBodyProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n  const sidebarBody = useRef<HTMLElement>(null);\n  const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);\n\n  return (\n    <RootNode\n      ref={sidebarBody}\n      tabIndex={\n        -1 /* Some browsers will make this focusable because it overflows */\n      }\n      className={clsx(styles['sapphire-sidebar__body'], {\n        [styles['sapphire-sidebar__body--scrolled']]: isScrolled,\n      })}\n      {...filterDOMProps(props, { global: true })}\n      {...scrollCheckProps}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2C;AACzC,EAAA,MAAM,QAAA,GAAW,WAAA;AACjB,EAAA,MAAM,WAAA,GAAc,OAAoB,IAAI,CAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,gBAAA,EAAiB,GAAI,eAAe,WAAW,CAAA;AAEnE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,QAAA,EACE,EAAA;AAAA,MAEF,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,QAChD,CAAC,MAAA,CAAO,kCAAkC,CAAC,GAAG;AAAA,OAC/C,CAAA;AAAA,MACA,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MACzC,GAAG;AAAA,KAAA;AAAA,IAEH;AAAA,GACH;AAEJ;;;;"}

package/build/esm/Sidebar/src/ExpandableItem.js

@@ -11,78 +11,56 @@ import { useSidebar } from './useSidebar.js';
 import { useSecondarySidebarContext } from './SecondarySidebarContext.js';
 import { useIsSidebarCollapsed } from './ResponsiveSidebarContext.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarExpandableItem = React.forwardRef(function SidebarExpandableItem2(_a, ref) {
-  var _b = _a, {
+const SidebarExpandableItem = React.forwardRef(
+  function SidebarExpandableItem2({
     id,
     isActive,
     body,
     header,
-    children
-  } = _b, props = __objRest(_b, [
-    "id",
-    "isActive",
-    "body",
-    "header",
-    "children"
-  ]);
-  const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
-  const isCollapsed = useIsSidebarCollapsed();
-  const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
-  const itemId = useId(id);
-  const isOpen = openedId === itemId;
-  useLayoutEffect(() => {
-    if (isOpen) {
-      setContent({ header, body });
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ React.createElement("li", {
-    className: clsx(styles["sapphire-sidebar__nav-item"])
-  }, /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
-    variant: "tertiary",
-    "aria-current": isActive || void 0,
-    ref
-  }, mergeProps(getExpandableItemProps(itemId), props)), {
-    UNSAFE_className: clsx(buttonStyles["sapphire-button--stretch-left-align"], {
-      [buttonStyles["sapphire-button--selected"]]: isActive && !isOpen,
-      [buttonStyles["is-active"]]: isOpen
-    })
-  }), children), /* @__PURE__ */ React.createElement(SecondarySidebar, __spreadValues({
-    isOpen: isOpen && !isCollapsed,
-    header,
-    themeVariant
-  }, secondarySidebarProps), body));
-});
+    children,
+    ...props
+  }, ref) {
+    const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
+    const isCollapsed = useIsSidebarCollapsed();
+    const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
+    const itemId = useId(id);
+    const isOpen = openedId === itemId;
+    useLayoutEffect(() => {
+      if (isOpen) {
+        setContent({ header, body });
+      }
+    }, [isOpen]);
+    return /* @__PURE__ */ React.createElement("li", { className: clsx(styles["sapphire-sidebar__nav-item"]) }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "tertiary",
+        "aria-current": isActive || void 0,
+        ref,
+        ...mergeProps(
+          getExpandableItemProps(itemId),
+          props
+        ),
+        UNSAFE_className: clsx(
+          buttonStyles["sapphire-button--stretch-left-align"],
+          {
+            [buttonStyles["sapphire-button--selected"]]: isActive && !isOpen,
+            [buttonStyles["is-active"]]: isOpen
+          }
+        )
+      },
+      children
+    ), /* @__PURE__ */ React.createElement(
+      SecondarySidebar,
+      {
+        isOpen: isOpen && !isCollapsed,
+        header,
+        themeVariant,
+        ...secondarySidebarProps
+      },
+      body
+    ));
+  }
+);
 const SecondarySidebar = ({
   isOpen,
   onClose,
@@ -95,38 +73,51 @@ const SecondarySidebar = ({
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
-        onClose == null ? void 0 : onClose();
+        onClose?.();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ React.createElement(Transition, {
-    in: isOpen,
-    mountOnEnter: true,
-    nodeRef: ref,
-    unmountOnExit: true,
-    onExited: onCloseTransitionDone,
-    timeout: 200
-  }, (transitionState) => /* @__PURE__ */ React.createElement("div", {
-    ref,
-    className: clsx(styles["sapphire-sidebar__secondary-container"], {
-      [styles["sapphire-sidebar--slide-in"]]: true,
-      [styles["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
-    })
-  }, /* @__PURE__ */ React.createElement(FocusScope, {
-    restoreFocus: true,
-    autoFocus: true
-  }, /* @__PURE__ */ React.createElement(_Sidebar, {
-    themeVariant,
-    closeOnBlurWithin: false,
-    header: /* @__PURE__ */ React.createElement(_Sidebar.Header, {
-      closeButtonProps: {
-        onPress: () => onClose == null ? void 0 : onClose()
-      }
-    }, header),
-    panelHeader: null
-  }, children))));
+  return /* @__PURE__ */ React.createElement(
+    Transition,
+    {
+      in: isOpen,
+      mountOnEnter: true,
+      nodeRef: ref,
+      unmountOnExit: true,
+      onExited: onCloseTransitionDone,
+      timeout: 200
+    },
+    (transitionState) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: clsx(styles["sapphire-sidebar__secondary-container"], {
+          [styles["sapphire-sidebar--slide-in"]]: true,
+          [styles["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
+        })
+      },
+      /* @__PURE__ */ React.createElement(FocusScope, { restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(
+        _Sidebar,
+        {
+          themeVariant,
+          closeOnBlurWithin: false,
+          header: /* @__PURE__ */ React.createElement(
+            _Sidebar.Header,
+            {
+              closeButtonProps: {
+                onPress: () => onClose?.()
+              }
+            },
+            header
+          ),
+          panelHeader: null
+        },
+        children
+      ))
+    )
+  );
 };
 
 export { SidebarExpandableItem };

package/build/esm/Sidebar/src/ExpandableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableItem.js","sources":["../../../../src/Sidebar/src/ExpandableItem.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps, ThemeVariant } from '@danske/sapphire-react';\nimport { FocusScope } from '@react-aria/focus';\nimport { FocusableRef } from '@react-types/shared';\nimport { Transition } from 'react-transition-group';\nimport { Sidebar } from '..';\nimport { mergeProps, useId } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport { useIsSidebarCollapsed } from './ResponsiveSidebarContext';\n\nexport type SidebarExpandableItemProps = Omit<\n  ButtonProps<'button'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n\n  /**\n   * The id of the group.\n   * Used in `onSecondarySidebarChange` or when the sidebar is controlled\n   */\n  id?: string;\n\n  /**\n   * Heading used for secondary sidebar\n   */\n  header: ReactNode;\n\n  /**\n   * Subitems (secondary sidebar)\n   */\n  body: ReactNode;\n  children?: ReactNode;\n};\n\nexport const SidebarExpandableItem = React.forwardRef(\n  function SidebarExpandableItem(\n    {\n      id,\n      isActive,\n      body,\n      header,\n      children,\n      ...props\n    }: SidebarExpandableItemProps,\n    ref: FocusableRef<HTMLAnchorElement>\n  ): React.JSX.Element {\n    const { openedId, setContent, themeVariant } = useSecondarySidebarContext();\n    const isCollapsed = useIsSidebarCollapsed();\n    const { getExpandableItemProps, secondarySidebarProps } = useSidebar();\n    const itemId = useId(id);\n    const isOpen = openedId === itemId;\n\n    useLayoutEffect(() => {\n      if (isOpen) {\n        setContent({ header, body });\n      }\n    }, [isOpen]);\n\n    return (\n      <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n        <Button\n          variant=\"tertiary\"\n          aria-current={isActive || undefined}\n          ref={ref}\n          {...mergeProps(\n            getExpandableItemProps(itemId),\n            props as ButtonProps<'button'>\n          )}\n          UNSAFE_className={clsx(\n            buttonStyles['sapphire-button--stretch-left-align'],\n            {\n              [buttonStyles['sapphire-button--selected']]: isActive && !isOpen,\n              [buttonStyles['is-active']]: isOpen,\n            }\n          )}\n        >\n          {children}\n        </Button>\n        <SecondarySidebar\n          isOpen={isOpen && !isCollapsed}\n          header={header}\n          themeVariant={themeVariant}\n          {...secondarySidebarProps}\n        >\n          {body}\n        </SecondarySidebar>\n      </li>\n    );\n  }\n);\n\nconst SecondarySidebar = ({\n  isOpen,\n  onClose,\n  onCloseTransitionDone,\n  themeVariant,\n  header,\n  children,\n}: {\n  isOpen: boolean;\n  onClose?: () => void;\n  onCloseTransitionDone?: () => void;\n  themeVariant?: ThemeVariant;\n  header: ReactNode;\n  children: ReactNode;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [onClose]);\n\n  return (\n    <Transition\n      in={isOpen}\n      mountOnEnter\n      nodeRef={ref}\n      unmountOnExit\n      onExited={onCloseTransitionDone}\n      timeout={200}\n    >\n      {(transitionState) => (\n        <div\n          ref={ref}\n          className={clsx(styles['sapphire-sidebar__secondary-container'], {\n            [styles['sapphire-sidebar--slide-in']]: true,\n            [styles['sapphire-sidebar--slide-out']]:\n              transitionState === 'exiting',\n          })}\n        >\n          <FocusScope restoreFocus autoFocus>\n            <Sidebar\n              themeVariant={themeVariant}\n              closeOnBlurWithin={\n                false /* no focus management on nested sidebars */\n              }\n              header={\n                <Sidebar.Header\n                  closeButtonProps={{\n                    onPress: () => onClose?.(),\n                  }}\n                >\n                  {header}\n                </Sidebar.Header>\n              }\n              panelHeader={null}\n            >\n              {children}\n            </Sidebar>\n          </FocusScope>\n        </div>\n      )}\n    </Transition>\n  );\n};\n"],"names":["Sidebar"],"mappings":"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"}
+{"version":3,"file":"ExpandableItem.js","sources":["../../../../src/Sidebar/src/ExpandableItem.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps, ThemeVariant } from '@danske/sapphire-react';\nimport { FocusScope } from '@react-aria/focus';\nimport { FocusableRef } from '@react-types/shared';\nimport { Transition } from 'react-transition-group';\nimport { Sidebar } from '..';\nimport { mergeProps, useId } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport { useIsSidebarCollapsed } from './ResponsiveSidebarContext';\n\nexport type SidebarExpandableItemProps = Omit<\n  ButtonProps<'button'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n\n  /**\n   * The id of the group.\n   * Used in `onSecondarySidebarChange` or when the sidebar is controlled\n   */\n  id?: string;\n\n  /**\n   * Heading used for secondary sidebar\n   */\n  header: ReactNode;\n\n  /**\n   * Subitems (secondary sidebar)\n   */\n  body: ReactNode;\n  children?: ReactNode;\n};\n\nexport const SidebarExpandableItem = React.forwardRef(\n  function SidebarExpandableItem(\n    {\n      id,\n      isActive,\n      body,\n      header,\n      children,\n      ...props\n    }: SidebarExpandableItemProps,\n    ref: FocusableRef<HTMLAnchorElement>\n  ): React.JSX.Element {\n    const { openedId, setContent, themeVariant } = useSecondarySidebarContext();\n    const isCollapsed = useIsSidebarCollapsed();\n    const { getExpandableItemProps, secondarySidebarProps } = useSidebar();\n    const itemId = useId(id);\n    const isOpen = openedId === itemId;\n\n    useLayoutEffect(() => {\n      if (isOpen) {\n        setContent({ header, body });\n      }\n    }, [isOpen]);\n\n    return (\n      <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n        <Button\n          variant=\"tertiary\"\n          aria-current={isActive || undefined}\n          ref={ref}\n          {...mergeProps(\n            getExpandableItemProps(itemId),\n            props as ButtonProps<'button'>\n          )}\n          UNSAFE_className={clsx(\n            buttonStyles['sapphire-button--stretch-left-align'],\n            {\n              [buttonStyles['sapphire-button--selected']]: isActive && !isOpen,\n              [buttonStyles['is-active']]: isOpen,\n            }\n          )}\n        >\n          {children}\n        </Button>\n        <SecondarySidebar\n          isOpen={isOpen && !isCollapsed}\n          header={header}\n          themeVariant={themeVariant}\n          {...secondarySidebarProps}\n        >\n          {body}\n        </SecondarySidebar>\n      </li>\n    );\n  }\n);\n\nconst SecondarySidebar = ({\n  isOpen,\n  onClose,\n  onCloseTransitionDone,\n  themeVariant,\n  header,\n  children,\n}: {\n  isOpen: boolean;\n  onClose?: () => void;\n  onCloseTransitionDone?: () => void;\n  themeVariant?: ThemeVariant;\n  header: ReactNode;\n  children: ReactNode;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [onClose]);\n\n  return (\n    <Transition\n      in={isOpen}\n      mountOnEnter\n      nodeRef={ref}\n      unmountOnExit\n      onExited={onCloseTransitionDone}\n      timeout={200}\n    >\n      {(transitionState) => (\n        <div\n          ref={ref}\n          className={clsx(styles['sapphire-sidebar__secondary-container'], {\n            [styles['sapphire-sidebar--slide-in']]: true,\n            [styles['sapphire-sidebar--slide-out']]:\n              transitionState === 'exiting',\n          })}\n        >\n          <FocusScope restoreFocus autoFocus>\n            <Sidebar\n              themeVariant={themeVariant}\n              closeOnBlurWithin={\n                false /* no focus management on nested sidebars */\n              }\n              header={\n                <Sidebar.Header\n                  closeButtonProps={{\n                    onPress: () => onClose?.(),\n                  }}\n                >\n                  {header}\n                </Sidebar.Header>\n              }\n              panelHeader={null}\n            >\n              {children}\n            </Sidebar>\n          </FocusScope>\n        </div>\n      )}\n    </Transition>\n  );\n};\n"],"names":["SidebarExpandableItem","Sidebar"],"mappings":"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"}

package/build/esm/Sidebar/src/Header.js

@@ -5,50 +5,20 @@ import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
 import { IconButton } from '@danske/sapphire-react';
 import { CloseLarge } from '@danske/sapphire-icons/react';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarHeader = (_a) => {
-  var _b = _a, {
+const SidebarHeader = ({
+  children,
+  closeButtonProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps(props),
+      className: clsx(styles["sapphire-sidebar__header"])
+    },
     children,
-    closeButtonProps
-  } = _b, props = __objRest(_b, [
-    "children",
-    "closeButtonProps"
-  ]);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props)), {
-    className: clsx(styles["sapphire-sidebar__header"])
-  }), children, closeButtonProps && /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, closeButtonProps), {
-    "aria-label": "Close"
-  }), /* @__PURE__ */ React.createElement(CloseLarge, null)));
+    closeButtonProps && /* @__PURE__ */ React.createElement(IconButton, { ...closeButtonProps, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseLarge, null))
+  );
 };
 
 export { SidebarHeader };

package/build/esm/Sidebar/src/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/Sidebar/src/Header.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/sidebar/sidebar.module.css';\nimport { IconButton, IconButtonProps } from '@danske/sapphire-react';\nimport { CloseLarge } from '@danske/sapphire-icons/react';\n\nexport interface SidebarHeaderProps extends DOMProps {\n  children: ReactNode;\n  /**\n   * Props for the close button\n   * If none provided, close button won't show\n   */\n  closeButtonProps?: Omit<\n    IconButtonProps<'button'>,\n    'children' | 'aria-label' | 'aria-hidden'\n  >;\n}\n\nexport const SidebarHeader = ({\n  children,\n  closeButtonProps,\n  ...props\n}: SidebarHeaderProps): React.JSX.Element => {\n  return (\n    <div\n      {...filterDOMProps(props)}\n      className={clsx(styles['sapphire-sidebar__header'])}\n    >\n      {children}\n      {closeButtonProps && (\n        <IconButton {...closeButtonProps} aria-label=\"Close\">\n          <CloseLarge />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBa,MAAA,aAAA,GAAgB,CAAC,EAIe,KAAA;AAJf,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,gBAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,UAAA;AAAA,IACA,kBAAA;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,0BAAA,CAAA,CAAA;AAAA,GAAA,CAAA,EAEtB,QACA,EAAA,gBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAD,iCAAgB,gBAAhB,CAAA,EAAA;AAAA,IAAkC,YAAW,EAAA,OAAA;AAAA,GAAA,CAAA,sCAC1C,UAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/Sidebar/src/Header.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/sidebar/sidebar.module.css';\nimport { IconButton, IconButtonProps } from '@danske/sapphire-react';\nimport { CloseLarge } from '@danske/sapphire-icons/react';\n\nexport interface SidebarHeaderProps extends DOMProps {\n  children: ReactNode;\n  /**\n   * Props for the close button\n   * If none provided, close button won't show\n   */\n  closeButtonProps?: Omit<\n    IconButtonProps<'button'>,\n    'children' | 'aria-label' | 'aria-hidden'\n  >;\n}\n\nexport const SidebarHeader = ({\n  children,\n  closeButtonProps,\n  ...props\n}: SidebarHeaderProps): React.JSX.Element => {\n  return (\n    <div\n      {...filterDOMProps(props)}\n      className={clsx(styles['sapphire-sidebar__header'])}\n    >\n      {children}\n      {closeButtonProps && (\n        <IconButton {...closeButtonProps} aria-label=\"Close\">\n          <CloseLarge />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA6C;AAC3C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAe,KAAK,CAAA;AAAA,MACxB,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,0BAA0B,CAAC;AAAA,KAAA;AAAA,IAEjD,QAAA;AAAA,IACA,gBAAA,wCACE,UAAA,EAAA,EAAY,GAAG,kBAAkB,YAAA,EAAW,OAAA,EAAA,kBAC3C,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,IAAW,CACd;AAAA,GAEJ;AAEJ;;;;"}

package/build/esm/Sidebar/src/Item.js

@@ -6,50 +6,23 @@ import { Button } from '@danske/sapphire-react';
 import { mergeProps } from '@react-aria/utils';
 import { useSidebar } from './useSidebar.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarItem = React.forwardRef(function SidebarItem2(_a, ref) {
-  var _b = _a, { isActive, children } = _b, props = __objRest(_b, ["isActive", "children"]);
+const SidebarItem = React.forwardRef(function SidebarItem2({ isActive, children, ...props }, ref) {
   const { itemProps } = useSidebar();
-  return /* @__PURE__ */ React.createElement("li", {
-    className: clsx(styles["sapphire-sidebar__nav-item"])
-  }, /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
-    ref,
-    variant: "tertiary",
-    elementType: "a",
-    "aria-current": isActive ? "page" : void 0
-  }, mergeProps(props, itemProps)), {
-    UNSAFE_className: clsx(buttonStyles["sapphire-button--stretch-left-align"], { [buttonStyles["sapphire-button--selected"]]: isActive })
-  }), children));
+  return /* @__PURE__ */ React.createElement("li", { className: clsx(styles["sapphire-sidebar__nav-item"]) }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref,
+      variant: "tertiary",
+      elementType: "a",
+      "aria-current": isActive ? "page" : void 0,
+      ...mergeProps(props, itemProps),
+      UNSAFE_className: clsx(
+        buttonStyles["sapphire-button--stretch-left-align"],
+        { [buttonStyles["sapphire-button--selected"]]: isActive }
+      )
+    },
+    children
+  ));
 });
 
 export { SidebarItem };

package/build/esm/Sidebar/src/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../src/Sidebar/src/Item.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps } from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\n\nexport type SidebarItemProps = Omit<\n  ButtonProps<'a'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n  children?: ReactNode;\n};\n\nexport const SidebarItem = React.forwardRef(function SidebarItem(\n  { isActive, children, ...props }: SidebarItemProps,\n  ref: FocusableRef<HTMLAnchorElement>\n): React.JSX.Element {\n  const { itemProps } = useSidebar();\n\n  return (\n    <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n      <Button\n        ref={ref}\n        variant=\"tertiary\"\n        elementType=\"a\"\n        aria-current={isActive ? 'page' : undefined}\n        {...mergeProps(props as ButtonProps<'a'>, itemProps)}\n        UNSAFE_className={clsx(\n          buttonStyles['sapphire-button--stretch-left-align'],\n          { [buttonStyles['sapphire-button--selected']]: isActive }\n        )}\n      >\n        {children}\n      </Button>\n    </li>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,IACA,GACmB,EAAA;AAFnB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,QAAZ,EAAA,GAAA,EAAA,EAAyB,KAAzB,GAAA,SAAA,CAAA,EAAA,EAAyB,CAAvB,UAAU,EAAA,UAAA,CAAA,CAAA,CAAA;AAGZ,EAAA,MAAM,EAAE,SAAc,EAAA,GAAA,UAAA,EAAA,CAAA;AAEtB,EAAA,2CACG,IAAD,EAAA;AAAA,IAAI,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACxB,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,OAAQ,EAAA,UAAA;AAAA,IACR,WAAY,EAAA,GAAA;AAAA,IACZ,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,GAC9B,EAAA,UAAA,CAAW,OAA2B,SAL5C,CAAA,CAAA,EAAA;AAAA,IAME,kBAAkB,IAChB,CAAA,YAAA,CAAa,qCACb,CAAA,EAAA,EAAA,CAAG,aAAa,2BAA+B,CAAA,GAAA,QAAA,EAAA,CAAA;AAAA,GAGhD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"Item.js","sources":["../../../../src/Sidebar/src/Item.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps } from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\n\nexport type SidebarItemProps = Omit<\n  ButtonProps<'a'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n  children?: ReactNode;\n};\n\nexport const SidebarItem = React.forwardRef(function SidebarItem(\n  { isActive, children, ...props }: SidebarItemProps,\n  ref: FocusableRef<HTMLAnchorElement>\n): React.JSX.Element {\n  const { itemProps } = useSidebar();\n\n  return (\n    <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n      <Button\n        ref={ref}\n        variant=\"tertiary\"\n        elementType=\"a\"\n        aria-current={isActive ? 'page' : undefined}\n        {...mergeProps(props as ButtonProps<'a'>, itemProps)}\n        UNSAFE_className={clsx(\n          buttonStyles['sapphire-button--stretch-left-align'],\n          { [buttonStyles['sapphire-button--selected']]: isActive }\n        )}\n      >\n        {children}\n      </Button>\n    </li>\n  );\n});\n"],"names":["SidebarItem"],"mappings":";;;;;;;;AAoBO,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,SAASA,YAAAA,CACnD,EAAE,QAAA,EAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAC/B,GAAA,EACmB;AACnB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,UAAA,EAAW;AAEjC,EAAA,2CACG,IAAA,EAAA,EAAG,SAAA,EAAW,KAAK,MAAA,CAAO,4BAA4B,CAAC,CAAA,EAAA,kBACtD,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,WAAA,EAAY,GAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MACjC,GAAG,UAAA,CAAW,KAAA,EAA2B,SAAS,CAAA;AAAA,MACnD,gBAAA,EAAkB,IAAA;AAAA,QAChB,aAAa,qCAAqC,CAAA;AAAA,QAClD,EAAE,CAAC,YAAA,CAAa,2BAA2B,CAAC,GAAG,QAAA;AAAS;AAC1D,KAAA;AAAA,IAEC;AAAA,GAEL,CAAA;AAEJ,CAAC;;;;"}