@danske/sapphire-react-lab 0.105.2 → 0.106.1

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
-import { useThemeCheck, useSapphireStyleProps, ThemeRoot } from '@danske/sapphire-react';
+import { useThemeCheck, ThemeRoot, useSapphireStyleProps } from '@danske/sapphire-react';
 import React from 'react';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useFocusWithin } from '@react-aria/interactions';
@@ -9,106 +9,77 @@ import { useSidebar } from './useSidebar.js';
 import { SecondarySidebarProvider } from './SecondarySidebarContext.js';
 import { useResponsiveSidebarContext, 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 Sidebar = (_a) => {
-  var _b = _a, {
-    themeVariant,
-    openedSecondarySidebar,
-    defaultOpenedSecondarySidebar,
-    onSecondarySidebarChange,
-    secondarySidebarThemeVariant,
-    children
-  } = _b, props = __objRest(_b, [
-    "themeVariant",
-    "openedSecondarySidebar",
-    "defaultOpenedSecondarySidebar",
-    "onSecondarySidebarChange",
-    "secondarySidebarThemeVariant",
-    "children"
-  ]);
+const Sidebar = ({
+  themeVariant,
+  openedSecondarySidebar,
+  defaultOpenedSecondarySidebar,
+  onSecondarySidebarChange,
+  secondarySidebarThemeVariant,
+  children,
+  ...props
+}) => {
   useThemeCheck();
-  return /* @__PURE__ */ React.createElement(SecondarySidebarProvider, {
-    openedId: openedSecondarySidebar,
-    defaultOpenedId: defaultOpenedSecondarySidebar,
-    onOpenedIdChange: onSecondarySidebarChange,
-    themeVariant: secondarySidebarThemeVariant
-  }, /* @__PURE__ */ React.createElement(WithThemeRoot, {
-    themeVariant
-  }, /* @__PURE__ */ React.createElement(SidebarContent, __spreadValues({}, props), children)));
+  return /* @__PURE__ */ React.createElement(
+    SecondarySidebarProvider,
+    {
+      openedId: openedSecondarySidebar,
+      defaultOpenedId: defaultOpenedSecondarySidebar,
+      onOpenedIdChange: onSecondarySidebarChange,
+      themeVariant: secondarySidebarThemeVariant
+    },
+    /* @__PURE__ */ React.createElement(WithThemeRoot, { themeVariant }, /* @__PURE__ */ React.createElement(SidebarContent, { ...props }, children))
+  );
 };
-const SidebarContent = (_c) => {
-  var _d = _c, {
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange,
-    closeOnBlurWithin = true,
-    header,
-    panelHeader,
-    children
-  } = _d, props = __objRest(_d, [
-    "onBlurWithin",
-    "onFocusWithin",
-    "onFocusWithinChange",
-    "closeOnBlurWithin",
-    "header",
-    "panelHeader",
-    "children"
-  ]);
+const SidebarContent = ({
+  onBlurWithin,
+  onFocusWithin,
+  onFocusWithinChange,
+  closeOnBlurWithin = true,
+  header,
+  panelHeader,
+  children,
+  ...props
+}) => {
   const { styleProps } = useSapphireStyleProps(props);
   const { sidebarProps } = useSidebar();
-  const { focusWithinProps } = useFocusWithin(mergeProps({
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange
-  }, closeOnBlurWithin ? sidebarProps : {}));
+  const { focusWithinProps } = useFocusWithin(
+    mergeProps(
+      {
+        onBlurWithin,
+        onFocusWithin,
+        onFocusWithinChange
+      },
+      closeOnBlurWithin ? sidebarProps : {}
+    )
+  );
   const responsiveSidebarContext = useResponsiveSidebarContext();
   const isCollapsed = useIsSidebarCollapsed();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isCollapsed && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, styleProps), filterDOMProps(props, { global: true })), focusWithinProps), {
-    className: clsx(styles["sapphire-sidebar"]),
-    tabIndex: -1
-  }), header, children), responsiveSidebarContext && /* @__PURE__ */ React.createElement(SidebarPanel, {
-    header: panelHeader
-  }, children));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isCollapsed && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...styleProps,
+      ...filterDOMProps(props, { global: true }),
+      ...focusWithinProps,
+      className: clsx(styles["sapphire-sidebar"]),
+      tabIndex: -1
+    },
+    header,
+    children
+  ), responsiveSidebarContext && /* @__PURE__ */ React.createElement(SidebarPanel, { header: panelHeader }, children));
 };
 const WithThemeRoot = ({
   children,
   themeVariant
-}) => themeVariant ? /* @__PURE__ */ React.createElement(ThemeRoot, {
-  variant: themeVariant,
-  noSurface: true,
-  height: "100%",
-  width: "min-content"
-}, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}) => themeVariant ? /* @__PURE__ */ React.createElement(
+  ThemeRoot,
+  {
+    variant: themeVariant,
+    noSurface: true,
+    height: "100%",
+    width: "min-content"
+  },
+  children
+) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 
 export { Sidebar };
 //# sourceMappingURL=Sidebar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/Sidebar/src/Sidebar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ThemeRoot,\n  ThemeVariant,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { DOMProps } from '@react-types/shared';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport { FocusWithinProps, useFocusWithin } from '@react-aria/interactions';\nimport { SidebarPanel } from './Panel';\nimport { useSidebar } from './useSidebar';\nimport { SecondarySidebarProvider } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Shorthand to wrap the sidebar in a ThemeRoot with a different theme variant\n     */\n    themeVariant?: ThemeVariant;\n\n    /**\n     * The theme variant for the overflow sidebar\n     */\n    secondarySidebarThemeVariant?: ThemeVariant;\n\n    /**\n     * Callback for when the sidebar's elements lose focus.\n     * Useful to know when to close the overflow sidebar.\n     */\n    onBlurWithin?: FocusWithinProps['onBlurWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements first gains focus.\n     */\n    onFocusWithin?: FocusWithinProps['onFocusWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements loses or gains focus\n     */\n    onFocusWithinChange?: FocusWithinProps['onFocusWithinChange'];\n\n    /**\n     * Whether the overflow sidebar should close when all sidebar's elements\n     * lost focus\n     * @default true\n     */\n    closeOnBlurWithin?: boolean;\n\n    /**\n     * The header of the sidebar\n     */\n    header: ReactNode;\n\n    /**\n     * The header of the sidebar for small screens, when the sidebar is\n     * rendered as a panel\n     */\n    panelHeader?: ReactNode;\n\n    /**\n     * The id of the opened secondary sidebar (controlled)\n     */\n    openedSecondarySidebar?: string | null;\n\n    /**\n     * The id of the secondary sidebar opened by default (uncontrolled)\n     */\n    defaultOpenedSecondarySidebar?: string | null;\n\n    /**\n     * Callback for when the secondary sidebar opens or closes\n     */\n    onSecondarySidebarChange?: (id: string | null) => void;\n\n    children?: ReactNode;\n  };\n\n/**\n * Sidebar component for the site's main navigation.\n * Takes the height of the container.\n *\n * The default recommended way to use it is in the example below. But each part\n * can be replaced with a custom implementation.\n *\n * **Example:**\n * ```tsx\n * <Sidebar\n *  header={\n *    <Sidebar.Header>\n *      header\n *    </Sidebar.Header>\n *  }\n * >\n *   <Sidebar.Body>\n *     <Sidebar.List>\n *       ...\n *     </Sidebar.List>\n *   </Sidebar.Body>\n * </Sidebar>\n * ```\n */\nexport const Sidebar = ({\n  themeVariant,\n  openedSecondarySidebar,\n  defaultOpenedSecondarySidebar,\n  onSecondarySidebarChange,\n  secondarySidebarThemeVariant,\n  children,\n  ...props\n}: SidebarProps) => {\n  useThemeCheck();\n\n  return (\n    <SecondarySidebarProvider\n      openedId={openedSecondarySidebar}\n      defaultOpenedId={defaultOpenedSecondarySidebar}\n      onOpenedIdChange={onSecondarySidebarChange}\n      themeVariant={secondarySidebarThemeVariant}\n    >\n      <WithThemeRoot themeVariant={themeVariant}>\n        <SidebarContent {...props}>{children}</SidebarContent>\n      </WithThemeRoot>\n    </SecondarySidebarProvider>\n  );\n};\n\nconst SidebarContent = ({\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange,\n  closeOnBlurWithin = true,\n  header,\n  panelHeader,\n  children,\n  ...props\n}: SidebarProps) => {\n  const { styleProps } = useSapphireStyleProps(props);\n  const { sidebarProps } = useSidebar();\n\n  const { focusWithinProps } = useFocusWithin(\n    mergeProps(\n      {\n        onBlurWithin,\n        onFocusWithin,\n        onFocusWithinChange,\n      },\n      closeOnBlurWithin ? sidebarProps : {}\n    )\n  );\n\n  const responsiveSidebarContext = useResponsiveSidebarContext();\n  const isCollapsed = useIsSidebarCollapsed();\n\n  return (\n    <>\n      {!isCollapsed && (\n        <div\n          {...styleProps}\n          {...filterDOMProps(props, { global: true })}\n          {...focusWithinProps}\n          className={clsx(styles['sapphire-sidebar'])}\n          tabIndex={-1 /* sidebar must be focusable but not tabbable */}\n        >\n          {header}\n          {children}\n        </div>\n      )}\n      {responsiveSidebarContext && (\n        <SidebarPanel header={panelHeader}>{children}</SidebarPanel>\n      )}\n    </>\n  );\n};\n\nconst WithThemeRoot = ({\n  children,\n  themeVariant,\n}: {\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) =>\n  themeVariant ? (\n    <ThemeRoot\n      variant={themeVariant}\n      noSurface\n      height=\"100%\"\n      width=\"min-content\"\n    >\n      {children}\n    </ThemeRoot>\n  ) : (\n    <>{children}</>\n  );\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/Sidebar/src/Sidebar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ThemeRoot,\n  ThemeVariant,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { DOMProps } from '@react-types/shared';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport { FocusWithinProps, useFocusWithin } from '@react-aria/interactions';\nimport { SidebarPanel } from './Panel';\nimport { useSidebar } from './useSidebar';\nimport { SecondarySidebarProvider } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Shorthand to wrap the sidebar in a ThemeRoot with a different theme variant\n     */\n    themeVariant?: ThemeVariant;\n\n    /**\n     * The theme variant for the overflow sidebar\n     */\n    secondarySidebarThemeVariant?: ThemeVariant;\n\n    /**\n     * Callback for when the sidebar's elements lose focus.\n     * Useful to know when to close the overflow sidebar.\n     */\n    onBlurWithin?: FocusWithinProps['onBlurWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements first gains focus.\n     */\n    onFocusWithin?: FocusWithinProps['onFocusWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements loses or gains focus\n     */\n    onFocusWithinChange?: FocusWithinProps['onFocusWithinChange'];\n\n    /**\n     * Whether the overflow sidebar should close when all sidebar's elements\n     * lost focus\n     * @default true\n     */\n    closeOnBlurWithin?: boolean;\n\n    /**\n     * The header of the sidebar\n     */\n    header: ReactNode;\n\n    /**\n     * The header of the sidebar for small screens, when the sidebar is\n     * rendered as a panel\n     */\n    panelHeader?: ReactNode;\n\n    /**\n     * The id of the opened secondary sidebar (controlled)\n     */\n    openedSecondarySidebar?: string | null;\n\n    /**\n     * The id of the secondary sidebar opened by default (uncontrolled)\n     */\n    defaultOpenedSecondarySidebar?: string | null;\n\n    /**\n     * Callback for when the secondary sidebar opens or closes\n     */\n    onSecondarySidebarChange?: (id: string | null) => void;\n\n    children?: ReactNode;\n  };\n\n/**\n * Sidebar component for the site's main navigation.\n * Takes the height of the container.\n *\n * The default recommended way to use it is in the example below. But each part\n * can be replaced with a custom implementation.\n *\n * **Example:**\n * ```tsx\n * <Sidebar\n *  header={\n *    <Sidebar.Header>\n *      header\n *    </Sidebar.Header>\n *  }\n * >\n *   <Sidebar.Body>\n *     <Sidebar.List>\n *       ...\n *     </Sidebar.List>\n *   </Sidebar.Body>\n * </Sidebar>\n * ```\n */\nexport const Sidebar = ({\n  themeVariant,\n  openedSecondarySidebar,\n  defaultOpenedSecondarySidebar,\n  onSecondarySidebarChange,\n  secondarySidebarThemeVariant,\n  children,\n  ...props\n}: SidebarProps) => {\n  useThemeCheck();\n\n  return (\n    <SecondarySidebarProvider\n      openedId={openedSecondarySidebar}\n      defaultOpenedId={defaultOpenedSecondarySidebar}\n      onOpenedIdChange={onSecondarySidebarChange}\n      themeVariant={secondarySidebarThemeVariant}\n    >\n      <WithThemeRoot themeVariant={themeVariant}>\n        <SidebarContent {...props}>{children}</SidebarContent>\n      </WithThemeRoot>\n    </SecondarySidebarProvider>\n  );\n};\n\nconst SidebarContent = ({\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange,\n  closeOnBlurWithin = true,\n  header,\n  panelHeader,\n  children,\n  ...props\n}: SidebarProps) => {\n  const { styleProps } = useSapphireStyleProps(props);\n  const { sidebarProps } = useSidebar();\n\n  const { focusWithinProps } = useFocusWithin(\n    mergeProps(\n      {\n        onBlurWithin,\n        onFocusWithin,\n        onFocusWithinChange,\n      },\n      closeOnBlurWithin ? sidebarProps : {}\n    )\n  );\n\n  const responsiveSidebarContext = useResponsiveSidebarContext();\n  const isCollapsed = useIsSidebarCollapsed();\n\n  return (\n    <>\n      {!isCollapsed && (\n        <div\n          {...styleProps}\n          {...filterDOMProps(props, { global: true })}\n          {...focusWithinProps}\n          className={clsx(styles['sapphire-sidebar'])}\n          tabIndex={-1 /* sidebar must be focusable but not tabbable */}\n        >\n          {header}\n          {children}\n        </div>\n      )}\n      {responsiveSidebarContext && (\n        <SidebarPanel header={panelHeader}>{children}</SidebarPanel>\n      )}\n    </>\n  );\n};\n\nconst WithThemeRoot = ({\n  children,\n  themeVariant,\n}: {\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) =>\n  themeVariant ? (\n    <ThemeRoot\n      variant={themeVariant}\n      noSurface\n      height=\"100%\"\n      width=\"min-content\"\n    >\n      {children}\n    </ThemeRoot>\n  ) : (\n    <>{children}</>\n  );\n"],"names":[],"mappings":";;;;;;;;;;;AA8GO,MAAM,UAAU,CAAC;AAAA,EACtB,YAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,wBAAA;AAAA,EACA,4BAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAoB;AAClB,EAAA,aAAA,EAAc;AAEd,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,wBAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,sBAAA;AAAA,MACV,eAAA,EAAiB,6BAAA;AAAA,MACjB,gBAAA,EAAkB,wBAAA;AAAA,MAClB,YAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA,CAAC,iBAAc,YAAA,EAAA,kBACb,KAAA,CAAA,aAAA,CAAC,kBAAgB,GAAG,KAAA,EAAA,EAAQ,QAAS,CACvC;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA,GAAoB,IAAA;AAAA,EACpB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAoB;AAClB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,UAAA,EAAW;AAEpC,EAAA,MAAM,EAAE,kBAAiB,GAAI,cAAA;AAAA,IAC3B,UAAA;AAAA,MACE;AAAA,QACE,YAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,iBAAA,GAAoB,eAAe;AAAC;AACtC,GACF;AAEA,EAAA,MAAM,2BAA2B,2BAAA,EAA4B;AAC7D,EAAA,MAAM,cAAc,qBAAA,EAAsB;AAE1C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,CAAC,WAAA,oBACA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MACzC,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kBAAkB,CAAC,CAAA;AAAA,MAC1C,QAAA,EAAU;AAAA,KAAA;AAAA,IAET,MAAA;AAAA,IACA;AAAA,KAGJ,wBAAA,oBACC,KAAA,CAAA,aAAA,CAAC,gBAAa,MAAA,EAAQ,WAAA,EAAA,EAAc,QAAS,CAEjD,CAAA;AAEJ,CAAA;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB,QAAA;AAAA,EACA;AACF,CAAA,KAIE,YAAA,mBACE,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACC,OAAA,EAAS,YAAA;AAAA,IACT,SAAA,EAAS,IAAA;AAAA,IACT,MAAA,EAAO,MAAA;AAAA,IACP,KAAA,EAAM;AAAA,GAAA;AAAA,EAEL;AACH,CAAA,6DAEG,QAAS,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSidebar.js","sources":["../../../../src/Sidebar/src/useSidebar.ts"],"sourcesContent":["import { useResponsiveSidebarContext } from './ResponsiveSidebarContext';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\n\n/**\n * Returns props to be spread on different components that make the Sidebar.\n */\nexport const useSidebar = () => {\n  const { openedId, setOpenedId } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n  const { isPanelOpen, setPanelOpen } = responsiveContext\n    ? responsiveContext\n    : { isPanelOpen: false, setPanelOpen: () => {} };\n\n  return {\n    sidebarProps: { onBlurWithin: () => setOpenedId(null) },\n    itemProps: {\n      onPress: () => {\n        setPanelOpen(false);\n        if (!isPanelOpen) {\n          /* If panel is open, let the secondary sidebar get closed\n           * when the closing transition is done. See `panelProps`\n           */\n          setOpenedId(null);\n        }\n      },\n    },\n    getExpandableItemProps: (id: string) => ({\n      onPress: () => setOpenedId(openedId === id ? null : id),\n    }),\n    secondarySidebarProps: {\n      onClose: () => setOpenedId(null),\n    },\n  };\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAa,MAAM;AAC9B,EAAM,MAAA,EAAE,UAAU,WAAgB,EAAA,GAAA,0BAAA,EAAA,CAAA;AAClC,EAAA,MAAM,iBAAoB,GAAA,2BAAA,EAAA,CAAA;AAC1B,EAAM,MAAA,EAAE,aAAa,YAAiB,EAAA,GAAA,iBAAA,GAClC,oBACA,EAAE,WAAA,EAAa,KAAO,EAAA,YAAA,EAAc,MAAM;AAAA,GAAA,EAAA,CAAA;AAE9C,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,EAAE,YAAc,EAAA,MAAM,WAAY,CAAA,IAAA,CAAA,EAAA;AAAA,IAChD,SAAW,EAAA;AAAA,MACT,SAAS,MAAM;AACb,QAAa,YAAA,CAAA,KAAA,CAAA,CAAA;AACb,QAAA,IAAI,CAAC,WAAa,EAAA;AAIhB,UAAY,WAAA,CAAA,IAAA,CAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAIlB,sBAAA,EAAwB,CAAC,EAAgB,MAAA;AAAA,MACvC,OAAS,EAAA,MAAM,WAAY,CAAA,QAAA,KAAa,KAAK,IAAO,GAAA,EAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAEtD,qBAAuB,EAAA;AAAA,MACrB,OAAA,EAAS,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"useSidebar.js","sources":["../../../../src/Sidebar/src/useSidebar.ts"],"sourcesContent":["import { useResponsiveSidebarContext } from './ResponsiveSidebarContext';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\n\n/**\n * Returns props to be spread on different components that make the Sidebar.\n */\nexport const useSidebar = () => {\n  const { openedId, setOpenedId } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n  const { isPanelOpen, setPanelOpen } = responsiveContext\n    ? responsiveContext\n    : { isPanelOpen: false, setPanelOpen: () => {} };\n\n  return {\n    sidebarProps: { onBlurWithin: () => setOpenedId(null) },\n    itemProps: {\n      onPress: () => {\n        setPanelOpen(false);\n        if (!isPanelOpen) {\n          /* If panel is open, let the secondary sidebar get closed\n           * when the closing transition is done. See `panelProps`\n           */\n          setOpenedId(null);\n        }\n      },\n    },\n    getExpandableItemProps: (id: string) => ({\n      onPress: () => setOpenedId(openedId === id ? null : id),\n    }),\n    secondarySidebarProps: {\n      onClose: () => setOpenedId(null),\n    },\n  };\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,0BAAA,EAA2B;AAC7D,EAAA,MAAM,oBAAoB,2BAAA,EAA4B;AACtD,EAAA,MAAM,EAAE,WAAA,EAAa,YAAA,EAAa,GAAI,iBAAA,GAClC,oBACA,EAAE,WAAA,EAAa,KAAA,EAAO,YAAA,EAAc,MAAM;AAAA,EAAC,CAAA,EAAE;AAEjD,EAAA,OAAO;AAAA,IACL,cAAc,EAAE,YAAA,EAAc,MAAM,WAAA,CAAY,IAAI,CAAA,EAAE;AAAA,IACtD,SAAA,EAAW;AAAA,MACT,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,IAAI,CAAC,WAAA,EAAa;AAIhB,UAAA,WAAA,CAAY,IAAI,CAAA;AAAA,QAClB;AAAA,MACF;AAAA,KACF;AAAA,IACA,sBAAA,EAAwB,CAAC,EAAA,MAAgB;AAAA,MACvC,SAAS,MAAM,WAAA,CAAY,QAAA,KAAa,EAAA,GAAK,OAAO,EAAE;AAAA,KACxD,CAAA;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI;AAAA;AACjC,GACF;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Slider/index.ts"],"sourcesContent":["import { Field } from '@danske/sapphire-react';\nimport { Slider } from './src/Slider';\n\nconst _Slider = Object.assign(Slider, {\n  Note: Field.Note,\n});\n\nexport { _Slider as Slider };\nexport { type SliderProps } from './src/Slider';\n"],"names":[],"mappings":";;;AAGM,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,MAAQ,EAAA;AAAA,EACpC,MAAM,KAAM,CAAA,IAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/Slider/index.ts"],"sourcesContent":["import { Field } from '@danske/sapphire-react';\nimport { Slider } from './src/Slider';\n\nconst _Slider = Object.assign(Slider, {\n  Note: Field.Note,\n});\n\nexport { _Slider as Slider };\nexport { type SliderProps } from './src/Slider';\n"],"names":[],"mappings":";;;AAGA,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,MAAA,EAAQ;AAAA,EACpC,MAAM,KAAA,CAAM;AACd,CAAC;;;;"}

package/build/esm/Slider/src/Slider.js

@@ -4,79 +4,54 @@ import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapp
 import { Slider as Slider$1, SliderTrack, SliderThumb } from 'react-aria-components';
 import React from '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 Slider = (_a) => {
-  var _b = _a, {
-    label,
-    labelPlacement = "above",
-    note,
-    name
-  } = _b, props = __objRest(_b, [
-    "label",
-    "labelPlacement",
-    "note",
-    "name"
-  ]);
+const Slider = ({
+  label,
+  labelPlacement = "above",
+  note,
+  name,
+  ...props
+}) => {
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, styleProps), {
-    labelPlacement
-  }), /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, __spreadProps(__spreadValues({}, props), {
-    style: { height: "100%" }
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider"]),
-    role: "slider"
-  }, /* @__PURE__ */ React.createElement(SliderTrack, {
-    className: ({ isDisabled }) => clsx(styles["sapphire-slider__track"], {
-      [styles["is-disabled"]]: isDisabled
-    })
-  }, ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider__track-remaining"])
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider__track-fill"]),
-    style: { width: state.getThumbPercent(0) * 100 + "%" }
-  }), /* @__PURE__ */ React.createElement(SliderThumb, {
-    name,
-    className: (state2) => clsx(styles["sapphire-slider__thumb"], {
-      [styles["is-focus"]]: state2.isFocusVisible
-    }),
-    style: ({ state: state2 }) => {
-      const percent = Math.min(3 + state2.getThumbPercent(0) * 94, 100);
-      return {
-        left: `${percent}%`
-      };
-    }
-  })))))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
+  return /* @__PURE__ */ React.createElement(Field, { ...styleProps, labelPlacement }, /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, { ...props, style: { height: "100%" } }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-slider"]), role: "slider" }, /* @__PURE__ */ React.createElement(
+    SliderTrack,
+    {
+      className: ({ isDisabled }) => clsx(styles["sapphire-slider__track"], {
+        [styles["is-disabled"]]: isDisabled
+      })
+    },
+    ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          styles["sapphire-slider__track-remaining"]
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(styles["sapphire-slider__track-fill"]),
+        style: { width: state.getThumbPercent(0) * 100 + "%" }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      SliderThumb,
+      {
+        name,
+        className: (state2) => clsx(styles["sapphire-slider__thumb"], {
+          [styles["is-focus"]]: state2.isFocusVisible
+        }),
+        style: ({ state: state2 }) => {
+          const percent = Math.min(
+            3 + state2.getThumbPercent(0) * 94,
+            100
+          );
+          return {
+            left: `${percent}%`
+          };
+        }
+      }
+    ))
+  )))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
 };
 
 export { Slider };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Ca,MAAA,MAAA,GAAS,CAAC,EAMS,KAAA;AANT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,GAJqB,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,WAAW,CAAC,EAAE,UACZ,EAAA,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CACpC,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAI5B,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb","state"],"mappings":";;;;;;AA6CO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,cAAA,GAAiB,OAAA;AAAA,EACjB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAElD,EAAA,2CACG,KAAA,EAAA,EAAO,GAAG,YAAY,cAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAC,MAAM,OAAA,EAAN,IAAA,EACE,KAAA,oBACC,KAAA,CAAA,aAAA,CAAC,MAAM,KAAA,EAAN,IAAA,sCACE,KAAA,EAAA,IAAA,EAAO,KAAM,CAChB,CAAA,kBAGF,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,sBACC,KAAA,CAAA,aAAA,CAACA,QAAA,EAAA,EAAW,GAAG,KAAA,EAAO,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,sBACrC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,iBAAiB,CAAC,CAAA,EAAG,MAAK,QAAA,EAAA,kBACpD,KAAA,CAAA,aAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAC,EAAE,UAAA,OACZ,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,QACrC,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA,OAC1B;AAAA,KAAA;AAAA,IAGF,CAAC,EAAE,KAAA,EAAM,qBACR,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,kCAAkC;AAAA;AAC3C;AAAA,KACF,kBACA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,6BAA6B,CAAC,CAAA;AAAA,QACrD,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,CAAM,gBAAgB,CAAC,CAAA,GAAI,MAAM,GAAA;AAAI;AAAA,KACvD,kBACA,KAAA,CAAA,aAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,WAAW,CAACC,MAAAA,KACV,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,UACrC,CAAC,MAAA,CAAO,UAAU,CAAC,GAAGA,MAAAA,CAAM;AAAA,SAC7B,CAAA;AAAA,QAEH,KAAA,EAAO,CAAC,EAAE,KAAA,EAAAA,QAAM,KAAM;AAEpB,UAAA,MAAM,UAAU,IAAA,CAAK,GAAA;AAAA,YACnB,CAAA,GAAIA,MAAAA,CAAM,eAAA,CAAgB,CAAC,CAAA,GAAI,EAAA;AAAA,YAC/B;AAAA,WACF;AACA,UAAA,OAAO;AAAA,YACL,IAAA,EAAM,GAAG,OAAO,CAAA,CAAA;AAAA,WAClB;AAAA,QACF;AAAA;AAAA,KAEJ;AAAA,GAGN,CACF,CACF,CAAA,EAEC,IAAA,oBAAQ,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAA,EAAN,IAAA,EAAc,IAAK,CAC/B,CACF,CAAA;AAEJ;;;;"}

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

@@ -3,110 +3,94 @@ import clsx from 'clsx';
 import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useTag } from '@react-aria/tag';
-import { mergeRefs, mergeProps } from '@react-aria/utils';
+import { mergeProps, mergeRefs } from '@react-aria/utils';
 import { useThemeCheck, TooltipIfNeeded, Icon } from '@danske/sapphire-react';
-import { Close, Error } from '@danske/sapphire-icons/react';
+import { Error, Close } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/tag/tag.module.css';
 import { FocusRing } from '@react-aria/focus';
 
-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;
-};
 function Tag(props) {
   useThemeCheck();
   const { hasError = false, item, state } = props;
   const ref = useRef(null);
-  const _a = useTag(props, state, ref), {
+  const {
     gridCellProps,
     isDisabled,
     isFocused,
     isPressed,
     removeButtonProps,
-    rowProps: _b
-  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest(_c, ["onKeyDown"]), otherProps = __objRest(_a, [
-    "gridCellProps",
-    "isDisabled",
-    "isFocused",
-    "isPressed",
-    "removeButtonProps",
-    "rowProps"
-  ]);
+    rowProps: { onKeyDown, ...rowProps },
+    ...otherProps
+  } = useTag(props, state, ref);
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
-  return /* @__PURE__ */ React.createElement(TooltipIfNeeded, {
-    title: item.rendered
-  }, (tooltipRef, tooltipProps) => {
-    const _a2 = tooltipProps || {}, { ref: tooltipTargetRef } = _a2, restTooltipProps = __objRest(_a2, ["ref"]);
-    return /* @__PURE__ */ React.createElement(FocusRing, {
-      focusRingClass: styles["is-focus"]
-    }, /* @__PURE__ */ React.createElement("div", __spreadValues(__spreadProps(__spreadValues({
-      ref: mergeRefs(ref, tooltipTargetRef)
-    }, mergeProps({
-      onKeyDown: (e) => {
-        if (e.key !== " ") {
-          onKeyDown == null ? void 0 : onKeyDown(e);
-        } else {
-          e.preventDefault();
-        }
-      }
-    }, rowProps, hoverProps, restTooltipProps)), {
-      className: clsx(styles["sapphire-tag"], styles["js-focus"], styles["js-hover"], {
-        [styles["sapphire-tag--actionable"]]: hasAction,
-        [styles["is-active"]]: hasAction && isPressed,
-        [styles["is-hover"]]: hasAction && isHovered,
-        [styles["is-disabled"]]: isDisabled
-      })
-    }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridCellProps), {
-      className: styles["sapphire-tag__content"]
-    }), hasError && !isDisabled && /* @__PURE__ */ React.createElement(IconError, null), /* @__PURE__ */ React.createElement("span", {
-      ref: tooltipRef,
-      className: styles["sapphire-tag__label"]
-    }, item.rendered), !isDisabled && props.allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, __spreadValues({}, removeButtonProps)))));
+  return /* @__PURE__ */ React.createElement(TooltipIfNeeded, { title: item.rendered }, (tooltipRef, tooltipProps) => {
+    const { ref: tooltipTargetRef, ...restTooltipProps } = tooltipProps || {};
+    return /* @__PURE__ */ React.createElement(FocusRing, { focusRingClass: styles["is-focus"] }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: mergeRefs(ref, tooltipTargetRef),
+        ...mergeProps(
+          {
+            onKeyDown: (e) => {
+              if (e.key !== " ") {
+                onKeyDown?.(e);
+              } else {
+                e.preventDefault();
+              }
+            }
+          },
+          rowProps,
+          hoverProps,
+          restTooltipProps
+        ),
+        className: clsx(
+          styles["sapphire-tag"],
+          styles["js-focus"],
+          styles["js-hover"],
+          {
+            [styles["sapphire-tag--actionable"]]: hasAction,
+            [styles["is-active"]]: hasAction && isPressed,
+            [styles["is-hover"]]: hasAction && isHovered,
+            [styles["is-disabled"]]: isDisabled
+          }
+        ),
+        ...hasError ? { "aria-invalid": true } : {}
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ...gridCellProps,
+          className: styles["sapphire-tag__content"]
+        },
+        hasError && !isDisabled && /* @__PURE__ */ React.createElement(IconError, null),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            ref: tooltipRef,
+            className: styles["sapphire-tag__label"]
+          },
+          item.rendered
+        ),
+        !isDisabled && props.allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, { ...removeButtonProps })
+      )
+    ));
   });
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = useRef(null);
   const { buttonProps } = useButton(removeButtonProps, buttonRef);
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, buttonProps), {
-    className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
-  }), /* @__PURE__ */ React.createElement(Icon, {
-    size: "sm"
-  }, /* @__PURE__ */ React.createElement(Close, null)));
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...buttonProps,
+      className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
+    },
+    /* @__PURE__ */ React.createElement(Icon, { 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: "sm"
-  }, /* @__PURE__ */ React.createElement(Error, null)));
+  return /* @__PURE__ */ React.createElement("span", { className: clsx(styles["sapphire-tag__error-icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, /* @__PURE__ */ React.createElement(Error, null)));
 };
 
 export { Tag };