@danske/sapphire-react-lab 0.106.2 → 0.107.0

package/build/esm/core/src/BreakpointProvider/useBreakpointContext.js

@@ -0,0 +1,11 @@
+import { BreakpointContext } from '@danske/sapphire-react-context';
+import { useContext } from 'react';
+
+function useBreakpointContext() {
+  return useContext(
+    BreakpointContext
+  );
+}
+
+export { useBreakpointContext };
+//# sourceMappingURL=useBreakpointContext.js.map

package/build/esm/core/src/BreakpointProvider/useBreakpointContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpointContext.js","sources":["../../../../../../core/src/BreakpointProvider/useBreakpointContext.ts"],"sourcesContent":["import {\n  BreakpointContext,\n  BreakpointContextValue,\n} from '@danske/sapphire-react-context';\nimport { Breakpoints } from '../utils/useBreakpointTokens';\nimport { useContext } from 'react';\n\nexport function useBreakpointContext(): BreakpointContextValue<Breakpoints> | null {\n  return useContext(\n    BreakpointContext\n  ) as BreakpointContextValue<Breakpoints> | null;\n}\n"],"names":[],"mappings":";;;AAOO,SAAS,oBAAA,GAAmE;AACjF,EAAA,OAAO,UAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}

package/build/esm/core/src/Flex/src/Flex.js

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import { commonStyleHandlers } from '../../utils/SapphireStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+
+const flexStylePropsHandler = {
+  ...commonStyleHandlers,
+  flexDirection: "flexDirection",
+  flexWrap: "flexWrap",
+  flexFlow: "flexFlow",
+  justifyContent: { styleProp: "justifyContent", convertValue: flexAlignValue },
+  alignItems: { styleProp: "alignItems", convertValue: flexAlignValue },
+  alignContent: { styleProp: "alignContent", convertValue: flexAlignValue },
+  gap: "gap",
+  columnGap: "columnGap",
+  rowGap: "rowGap",
+  padding: "padding",
+  paddingLeft: "paddingLeft",
+  paddingRight: "paddingRight",
+  paddingTop: "paddingTop",
+  paddingBottom: "paddingBottom",
+  container: "container",
+  containerType: "containerType",
+  containerName: "containerName"
+};
+forwardRef(function Flex2(props, ref) {
+  useThemeCheck();
+  const { children, elementType, ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, flexStylePropsHandler);
+  const style = {
+    ...styleProps.style,
+    display: "flex"
+  };
+  const ElementType2 = elementType || "div";
+  return /* @__PURE__ */ React.createElement(
+    ElementType2,
+    {
+      ...filteredProps,
+      ...filterDOMProps(props, { global: true }),
+      style,
+      ref,
+      className: styleProps.className
+    },
+    children
+  );
+});
+function flexAlignValue(value) {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  return value;
+}
+
+export { flexStylePropsHandler };
+//# sourceMappingURL=Flex.js.map

package/build/esm/core/src/Flex/src/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../../../../core/src/Flex/src/Flex.tsx"],"sourcesContent":["import { DOMAttributes, DOMProps } from '@react-types/shared';\nimport React, { ElementType, ForwardedRef, forwardRef, ReactNode } from 'react';\n\nimport {\n  commonStyleHandlers,\n  ResponsiveCssProp,\n  SapphireCommonStyleProps,\n  SapphireStyleProps,\n  StyleHandlers,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport interface FlexStyleProps extends SapphireCommonStyleProps {\n  /**\n   * The direction in which to layout children. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).\n   * @default 'row'\n   */\n  flexDirection?: ResponsiveCssProp<'flexDirection'>;\n  /**\n   * Whether to wrap items onto multiple lines. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).\n   * @default false\n   */\n  flexWrap?: ResponsiveCssProp<'flexWrap'>;\n  /**\n   *  CSS shorthand property specifies the direction of a flex container, as well as its wrapping\n   * behavior. see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)\n   */\n  flexFlow?: ResponsiveCssProp<'flexFlow'>;\n\n  justifyContent?: ResponsiveCssProp<'justifyContent'>;\n  alignItems?: ResponsiveCssProp<'alignItems'>;\n  alignContent?: ResponsiveCssProp<'alignContent'>;\n\n  /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */\n  gap?: ResponsiveCssProp<'gap', 'size'>;\n  /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */\n  columnGap?: ResponsiveCssProp<'columnGap', 'size'>;\n  /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */\n  rowGap?: ResponsiveCssProp<'rowGap', 'size'>;\n\n  padding?: ResponsiveCssProp<'padding', 'size'>;\n  paddingLeft?: ResponsiveCssProp<'padding', 'size'>;\n  paddingRight?: ResponsiveCssProp<'paddingRight', 'size'>;\n  paddingTop?: ResponsiveCssProp<'paddingTop', 'size'>;\n  paddingBottom?: ResponsiveCssProp<'paddingBottom', 'size'>;\n\n  container?: ResponsiveCssProp<'container'>;\n  containerType?: ResponsiveCssProp<'containerType'>;\n  containerName?: ResponsiveCssProp<'containerName'>;\n}\nexport interface FlexProps\n  extends DOMProps,\n    GlobalDomAttributes,\n    Omit<\n      DOMAttributes,\n      'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'\n    >,\n    SapphireStyleProps,\n    FlexStyleProps {\n  /** Children of the flex container. */\n  children: ReactNode;\n  /**\n   * @default 'div'\n   */\n  elementType?: ElementType;\n}\n\nexport const flexStylePropsHandler: StyleHandlers<FlexStyleProps> = {\n  ...commonStyleHandlers,\n  flexDirection: 'flexDirection',\n  flexWrap: 'flexWrap',\n  flexFlow: 'flexFlow',\n  justifyContent: { styleProp: 'justifyContent', convertValue: flexAlignValue },\n  alignItems: { styleProp: 'alignItems', convertValue: flexAlignValue },\n  alignContent: { styleProp: 'alignContent', convertValue: flexAlignValue },\n  gap: 'gap',\n  columnGap: 'columnGap',\n  rowGap: 'rowGap',\n  padding: 'padding',\n  paddingLeft: 'paddingLeft',\n  paddingRight: 'paddingRight',\n  paddingTop: 'paddingTop',\n  paddingBottom: 'paddingBottom',\n  container: 'container',\n  containerType: 'containerType',\n  containerName: 'containerName',\n};\n\nexport const Flex = forwardRef(function Flex(\n  props: FlexProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n  const { children, elementType, ...otherProps } = props;\n  const { styleProps, filteredProps } = useSapphireStyleProps<\n    Omit<FlexProps, 'children'>,\n    FlexStyleProps\n  >(otherProps, flexStylePropsHandler);\n\n  const style = {\n    ...styleProps.style,\n    display: 'flex',\n  };\n\n  const ElementType = elementType || 'div';\n\n  return (\n    <ElementType\n      {...filteredProps}\n      {...filterDOMProps(props, { global: true })}\n      style={style}\n      ref={ref}\n      className={styleProps.className}\n    >\n      {children}\n    </ElementType>\n  );\n});\n\n/**\n * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'\n * in flex containers for browser compatibility.\n */\nfunction flexAlignValue(value: string): string {\n  if (value === 'start') {\n    return 'flex-start';\n  }\n\n  if (value === 'end') {\n    return 'flex-end';\n  }\n\n  return value;\n}\n"],"names":["Flex","ElementType"],"mappings":";;;;;;;;;;;AAwEO,MAAM,qBAAA,GAAuD;AAAA,EAClE,GAAG,mBAAA;AAAA,EACH,aAAA,EAAe,eAAA;AAAA,EACf,QAAA,EAAU,UAAA;AAAA,EACV,QAAA,EAAU,UAAA;AAAA,EACV,cAAA,EAAgB,EAAE,SAAA,EAAW,gBAAA,EAAkB,cAAc,cAAA,EAAe;AAAA,EAC5E,UAAA,EAAY,EAAE,SAAA,EAAW,YAAA,EAAc,cAAc,cAAA,EAAe;AAAA,EACpE,YAAA,EAAc,EAAE,SAAA,EAAW,cAAA,EAAgB,cAAc,cAAA,EAAe;AAAA,EACxE,GAAA,EAAK,KAAA;AAAA,EACL,SAAA,EAAW,WAAA;AAAA,EACX,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,WAAA,EAAa,aAAA;AAAA,EACb,YAAA,EAAc,cAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,aAAA,EAAe,eAAA;AAAA,EACf,SAAA,EAAW,WAAA;AAAA,EACX,aAAA,EAAe,eAAA;AAAA,EACf,aAAA,EAAe;AACjB;AAEoB,UAAA,CAAW,SAASA,KAAAA,CACtC,OACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAa,GAAG,YAAW,GAAI,KAAA;AACjD,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,qBAAA,CAGpC,YAAY,qBAAqB,CAAA;AAEnC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,UAAA,CAAW,KAAA;AAAA,IACd,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,MAAMC,eAAc,WAAA,IAAe,KAAA;AAEnC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAACA,YAAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,KAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAW,UAAA,CAAW;AAAA,KAAA;AAAA,IAErB;AAAA,GACH;AAEJ,CAAC;AAMD,SAAS,eAAe,KAAA,EAAuB;AAC7C,EAAA,IAAI,UAAU,OAAA,EAAS;AACrB,IAAA,OAAO,YAAA;AAAA,EACT;AAEA,EAAA,IAAI,UAAU,KAAA,EAAO;AACnB,IAAA,OAAO,UAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}

package/build/esm/core/src/Grid/src/Grid.js

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import { commonStyleHandlers } from '../../utils/SapphireStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+
+const gridStylePropsHandler = {
+  ...commonStyleHandlers,
+  gridAutoFlow: "gridAutoFlow",
+  gridAutoColumns: "gridAutoColumns",
+  gridAutoRows: "gridAutoRows",
+  gridTemplateAreas: "gridTemplateAreas",
+  gridTemplateColumns: "gridTemplateColumns",
+  gridTemplateRows: "gridTemplateRows",
+  gap: "gap",
+  columnGap: "columnGap",
+  rowGap: "rowGap",
+  justifyItems: "justifyItems",
+  justifyContent: "justifyContent",
+  alignItems: "alignItems",
+  alignContent: "alignContent",
+  padding: "padding",
+  paddingLeft: "paddingLeft",
+  paddingRight: "paddingRight",
+  paddingTop: "paddingTop",
+  paddingBottom: "paddingBottom"
+};
+forwardRef(function Grid2(props, ref) {
+  useThemeCheck();
+  const { children, ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, gridStylePropsHandler);
+  const style = {
+    ...styleProps.style,
+    display: "grid"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filteredProps,
+      ...filterDOMProps(props, { global: true }),
+      style,
+      ref,
+      className: styleProps.className
+    },
+    children
+  );
+});
+
+export { gridStylePropsHandler };
+//# sourceMappingURL=Grid.js.map

package/build/esm/core/src/Grid/src/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../../../../core/src/Grid/src/Grid.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, ReactNode } from 'react';\nimport { DOMAttributes, DOMProps } from '@react-types/shared';\n\nimport {\n  commonStyleHandlers,\n  ResponsiveCssProp,\n  SapphireCommonStyleProps,\n  SapphireStyleProps,\n  StyleHandlers,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport interface GridStyleProps extends SapphireCommonStyleProps {\n  /* Controls how the auto-placement algorithm works. Specifies how auto-placed items get flowed into the grid.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).\n   */\n  gridAutoFlow?: ResponsiveCssProp<'gridAutoFlow'>;\n\n  /* Specifies the size of an implicitly-created grid column track or pattern of tracks.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns).\n   */\n  gridAutoColumns?: ResponsiveCssProp<'gridAutoColumns'>;\n\n  /* Specifies the size of an implicitly-created grid row track or pattern of tracks.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows).\n   */\n  gridAutoRows?: ResponsiveCssProp<'gridAutoRows'>;\n\n  /* Specifies named grid areas, establishing the cells in the grid and assigning them names.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).\n   */\n  gridTemplateAreas?: ResponsiveCssProp<'gridTemplateAreas'>;\n\n  /* Defines the line names and track sizing functions of the grid columns.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).\n   */\n  gridTemplateColumns?: ResponsiveCssProp<'gridTemplateColumns'>;\n\n  /* Defines the line names and track sizing functions of the grid rows.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).\n   */\n  gridTemplateRows?: ResponsiveCssProp<'gridTemplateRows'>;\n\n  /* The space between rows and columns. It is a shorthand for rowGap and columnGap.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).\n   */\n  gap?: ResponsiveCssProp<'gap', 'size'>;\n\n  /* The space to display between a grid's columns.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).\n   */\n  columnGap?: ResponsiveCssProp<'columnGap', 'size'>;\n\n  /* The space to display between a grid's rows.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).\n   */\n  rowGap?: ResponsiveCssProp<'rowGap', 'size'>;\n\n  /* The space to display between a grid's rows.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).\n   */\n  justifyItems?: ResponsiveCssProp<'justifyItems'>;\n\n  /* The space to display between a grid's columns.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).\n   */\n  justifyContent?: ResponsiveCssProp<'justifyContent'>;\n\n  /* Sets the align-self value on all direct children as a group\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).\n   */\n  alignItems?: ResponsiveCssProp<'alignItems'>;\n\n  /* Sets the distribution of space between and around content items along the grid's block axis.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).\n   */\n  alignContent?: ResponsiveCssProp<'alignContent'>;\n  padding?: ResponsiveCssProp<'padding', 'size'>;\n  paddingLeft?: ResponsiveCssProp<'padding', 'size'>;\n  paddingRight?: ResponsiveCssProp<'paddingRight', 'size'>;\n  paddingTop?: ResponsiveCssProp<'paddingTop', 'size'>;\n  paddingBottom?: ResponsiveCssProp<'paddingBottom', 'size'>;\n}\nexport interface GridProps\n  extends DOMProps,\n    Omit<\n      DOMAttributes,\n      'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'\n    >,\n    SapphireStyleProps,\n    GridStyleProps,\n    GlobalDomAttributes {\n  /** Children of the grid container. */\n  children: ReactNode;\n}\n\nexport const gridStylePropsHandler: StyleHandlers<GridStyleProps> = {\n  ...commonStyleHandlers,\n  gridAutoFlow: 'gridAutoFlow',\n  gridAutoColumns: 'gridAutoColumns',\n  gridAutoRows: 'gridAutoRows',\n  gridTemplateAreas: 'gridTemplateAreas',\n  gridTemplateColumns: 'gridTemplateColumns',\n  gridTemplateRows: 'gridTemplateRows',\n  gap: 'gap',\n  columnGap: 'columnGap',\n  rowGap: 'rowGap',\n  justifyItems: 'justifyItems',\n  justifyContent: 'justifyContent',\n  alignItems: 'alignItems',\n  alignContent: 'alignContent',\n  padding: 'padding',\n  paddingLeft: 'paddingLeft',\n  paddingRight: 'paddingRight',\n  paddingTop: 'paddingTop',\n  paddingBottom: 'paddingBottom',\n};\n\nexport const Grid = forwardRef(function Grid(\n  props: GridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const { children, ...otherProps } = props;\n  const { styleProps, filteredProps } = useSapphireStyleProps<\n    Omit<GridProps, 'children'>,\n    GridStyleProps\n  >(otherProps, gridStylePropsHandler);\n\n  const style = {\n    ...styleProps.style,\n    display: 'grid',\n  };\n\n  return (\n    <div\n      {...filteredProps}\n      {...filterDOMProps(props, { global: true })}\n      style={style}\n      ref={ref}\n      className={styleProps.className}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Grid"],"mappings":";;;;;;;;;;;AAmGO,MAAM,qBAAA,GAAuD;AAAA,EAClE,GAAG,mBAAA;AAAA,EACH,YAAA,EAAc,cAAA;AAAA,EACd,eAAA,EAAiB,iBAAA;AAAA,EACjB,YAAA,EAAc,cAAA;AAAA,EACd,iBAAA,EAAmB,mBAAA;AAAA,EACnB,mBAAA,EAAqB,qBAAA;AAAA,EACrB,gBAAA,EAAkB,kBAAA;AAAA,EAClB,GAAA,EAAK,KAAA;AAAA,EACL,SAAA,EAAW,WAAA;AAAA,EACX,MAAA,EAAQ,QAAA;AAAA,EACR,YAAA,EAAc,cAAA;AAAA,EACd,cAAA,EAAgB,gBAAA;AAAA,EAChB,UAAA,EAAY,YAAA;AAAA,EACZ,YAAA,EAAc,cAAA;AAAA,EACd,OAAA,EAAS,SAAA;AAAA,EACT,WAAA,EAAa,aAAA;AAAA,EACb,YAAA,EAAc,cAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,aAAA,EAAe;AACjB;AAEoB,UAAA,CAAW,SAASA,KAAAA,CACtC,OACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,UAAA,EAAW,GAAI,KAAA;AACpC,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,qBAAA,CAGpC,YAAY,qBAAqB,CAAA;AAEnC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,UAAA,CAAW,KAAA;AAAA,IACd,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,KAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAW,UAAA,CAAW;AAAA,KAAA;AAAA,IAErB;AAAA,GACH;AAEJ,CAAC;;;;"}

package/build/esm/core/src/Icon/src/Icon.js

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import React from 'react';
+import { getWrappedElement } from '@react-spectrum/utils';
+import iconStyles from '@danske/sapphire-css/components/icon/icon.module.css';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+
+const Icon = React.forwardRef(function Icon2({
+  size = "md",
+  color = "inherit",
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  const colorClass = color === "inherit" ? void 0 : iconStyles[`sapphire-icon--${color}`];
+  return React.cloneElement(getWrappedElement(props.children), {
+    ref,
+    role: "img",
+    ...ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true },
+    className: clsx(
+      iconStyles["sapphire-icon"],
+      styleProps.className,
+      iconStyles[`sapphire-icon--${size}`],
+      colorClass
+    ),
+    style: styleProps.style
+  });
+});
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/build/esm/core/src/Icon/src/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../../../../core/src/Icon/src/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { getWrappedElement } from '@react-spectrum/utils';\nimport styles from '@danske/sapphire-css/components/icon/icon.module.css';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\n\nexport type IconProps = GlobalDomAttributes &\n  SapphireStyleProps & {\n    'aria-label'?: string;\n    /**\n     * The size of the icon.\n     * @default 'md'\n     */\n    size?: 'sm' | 'md' | 'lg' | 'xl';\n    /**\n     * The semantic color of the icon\n     * @default 'inherit'\n     */\n    color?:\n      | 'inherit'\n      | 'primary'\n      | 'secondary'\n      | 'positive'\n      | 'negative'\n      | 'warning'\n      | 'informative';\n    children: React.ReactNode;\n  };\n\n/**\n * `Icon` should be used to render Sapphire icon or custom SVG with the correct size, semantic color, and\n * accessibility attributes.\n *\n * Provide an `aria-label` when the icon conveys meaning on its own. If the icon is decorative,\n * omit `aria-label` and it will be hidden from assistive technologies.\n */\nexport const Icon = React.forwardRef(function Icon(\n  {\n    size = 'md',\n    color = 'inherit',\n    'aria-label': ariaLabel,\n    ...props\n  }: IconProps,\n  ref: React.Ref<HTMLSpanElement>\n) {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(props);\n  const colorClass =\n    color === 'inherit' ? undefined : styles[`sapphire-icon--${color}`];\n\n  return React.cloneElement(getWrappedElement(props.children), {\n    ref,\n    role: 'img',\n    ...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true }),\n    className: clsx(\n      styles['sapphire-icon'],\n      styleProps.className,\n      styles[`sapphire-icon--${size}`],\n      colorClass\n    ),\n    style: styleProps.style,\n  });\n});\n"],"names":["Icon","styles"],"mappings":";;;;;;;;;;;;AA0CO,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,SAASA,KAAAA,CAC5C;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,SAAA;AAAA,EACR,YAAA,EAAc,SAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,aACJ,KAAA,KAAU,SAAA,GAAY,SAAYC,UAAA,CAAO,CAAA,eAAA,EAAkB,KAAK,CAAA,CAAE,CAAA;AAEpE,EAAA,OAAO,KAAA,CAAM,YAAA,CAAa,iBAAA,CAAkB,KAAA,CAAM,QAAQ,CAAA,EAAG;AAAA,IAC3D,GAAA;AAAA,IACA,IAAA,EAAM,KAAA;AAAA,IACN,GAAI,YAAY,EAAE,YAAA,EAAc,WAAU,GAAI,EAAE,eAAe,IAAA,EAAK;AAAA,IACpE,SAAA,EAAW,IAAA;AAAA,MACTA,WAAO,eAAe,CAAA;AAAA,MACtB,UAAA,CAAW,SAAA;AAAA,MACXA,UAAA,CAAO,CAAA,eAAA,EAAkB,IAAI,CAAA,CAAE,CAAA;AAAA,MAC/B;AAAA,KACF;AAAA,IACA,OAAO,UAAA,CAAW;AAAA,GACnB,CAAA;AACH,CAAC;;;;"}

package/build/esm/core/src/ListBox/i18n/da-DK.json.js

@@ -0,0 +1,7 @@
+var empty$6 = "Ingen resultater";
+var da = {
+	empty: empty$6
+};
+
+export { da as default, empty$6 as empty };
+//# sourceMappingURL=da-DK.json.js.map

package/build/esm/core/src/ListBox/i18n/de-DE.json.js

@@ -0,0 +1,7 @@
+var empty$4 = "Keine Ergebnisse";
+var de = {
+	empty: empty$4
+};
+
+export { de as default, empty$4 as empty };
+//# sourceMappingURL=de-DE.json.js.map

package/build/esm/core/src/ListBox/i18n/en-US.json.js

@@ -0,0 +1,7 @@
+var empty$5 = "No results";
+var en = {
+	empty: empty$5
+};
+
+export { en as default, empty$5 as empty };
+//# sourceMappingURL=en-US.json.js.map

package/build/esm/core/src/ListBox/i18n/fi-FI.json.js

@@ -0,0 +1,7 @@
+var empty$3 = "Ei tuloksia";
+var fi = {
+	empty: empty$3
+};
+
+export { fi as default, empty$3 as empty };
+//# sourceMappingURL=fi-FI.json.js.map

package/build/esm/core/src/ListBox/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../core/src/ListBox/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;;;;"}

package/build/esm/core/src/ListBox/i18n/nb-NO.json.js

@@ -0,0 +1,7 @@
+var empty$2 = "Ingen resultater";
+var no = {
+	empty: empty$2
+};
+
+export { no as default, empty$2 as empty };
+//# sourceMappingURL=nb-NO.json.js.map

package/build/esm/core/src/ListBox/i18n/pl-PL.json.js

@@ -0,0 +1,7 @@
+var empty$1 = "Brak wyników";
+var pl = {
+	empty: empty$1
+};
+
+export { pl as default, empty$1 as empty };
+//# sourceMappingURL=pl-PL.json.js.map

package/build/esm/core/src/ListBox/i18n/sv-SE.json.js

@@ -0,0 +1,7 @@
+var empty = "Inga resultat";
+var se = {
+	empty: empty
+};
+
+export { se as default, empty };
+//# sourceMappingURL=sv-SE.json.js.map

package/build/esm/core/src/ListBox/src/ListBoxContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ListBoxContext = React.createContext(
+  null
+);
+
+export { ListBoxContext };
+//# sourceMappingURL=ListBoxContext.js.map

package/build/esm/core/src/ListBox/src/ListBoxContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxContext.js","sources":["../../../../../../../core/src/ListBox/src/ListBoxContext.ts"],"sourcesContent":["import { ListState } from 'react-stately/useListState';\nimport React from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>;\n  shouldUseVirtualFocus: boolean;\n  disableSelectedStyles: boolean;\n  containerMaxWidth?: number;\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(\n  null\n);\n"],"names":[],"mappings":";;AAUO,MAAM,iBAAiB,KAAA,CAAM,aAAA;AAAA,EAClC;AACF;;;;"}

package/build/esm/core/src/ListBox/src/ListBoxEmptyState.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/listbox/listbox.module.css';
+
+const ListBoxEmptyState = ({
+  children
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      styles["sapphire-listbox__item"],
+      styles["sapphire-listbox__item--empty"]
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__content"]) }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      className: styles["sapphire-listbox__primary-text"]
+    },
+    children
+  ))
+);
+
+export { ListBoxEmptyState };
+//# sourceMappingURL=ListBoxEmptyState.js.map

package/build/esm/core/src/ListBox/src/ListBoxEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxEmptyState.js","sources":["../../../../../../../core/src/ListBox/src/ListBoxEmptyState.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/listbox/listbox.module.css';\n\ninterface ListBoxEmptyStateProps {\n  children?: React.ReactNode;\n}\n\nexport const ListBoxEmptyState: React.FC<ListBoxEmptyStateProps> = ({\n  children,\n}) => (\n  <div\n    className={clsx(\n      styles['sapphire-listbox__item'],\n      styles['sapphire-listbox__item--empty']\n    )}\n  >\n    <div className={clsx(styles['sapphire-listbox__content'])}>\n      <div\n        role=\"presentation\"\n        className={styles['sapphire-listbox__primary-text']}\n      >\n        {children}\n      </div>\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;;;AAQO,MAAM,oBAAsD,CAAC;AAAA,EAClE;AACF,CAAA,qBACE,KAAA,CAAA,aAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAA;AAAA,MACT,OAAO,wBAAwB,CAAA;AAAA,MAC/B,OAAO,+BAA+B;AAAA;AACxC,GAAA;AAAA,sCAEC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,MAAA,CAAO,2BAA2B,CAAC,CAAA,EAAA,kBACtD,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,SAAA,EAAW,OAAO,gCAAgC;AAAA,KAAA;AAAA,IAEjD;AAAA,GAEL;AACF;;;;"}

package/build/esm/core/src/ListBox/src/ListBoxItemSkeleton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import iconStyles from '@danske/sapphire-css/components/icon/icon.module.css';
+import styles from '@danske/sapphire-css/components/listbox/listbox.module.css';
+import { Skeleton } from '../../Skeleton/src/Skeleton.js';
+
+const ListBoxItemSkeleton = ({
+  index,
+  primaryText = true,
+  secondaryText = false,
+  icon = false,
+  iconSize = "lg"
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      styles["sapphire-listbox__item"],
+      styles["js-hover"],
+      styles["js-focus"]
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-listbox__content"] }, icon && /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-listbox__icon"] }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(iconStyles["sapphire-icon"], {
+        [iconStyles["sapphire-icon--sm"]]: iconSize === "sm",
+        [iconStyles["sapphire-icon--md"]]: iconSize === "md",
+        [iconStyles["sapphire-icon--lg"]]: iconSize === "lg",
+        [iconStyles["sapphire-icon--xl"]]: iconSize === "xl"
+      })
+    },
+    icon === true ? /* @__PURE__ */ React.createElement(Skeleton.Circle, { index }) : icon
+  )), /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-listbox__text-container"] }, /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-listbox__primary-text"] }, primaryText === true ? /* @__PURE__ */ React.createElement(Skeleton.Text, { index }) : primaryText), secondaryText && /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-listbox__secondary-text"] }, secondaryText === true ? /* @__PURE__ */ React.createElement(Skeleton.Text, { index }) : secondaryText)))
+);
+
+export { ListBoxItemSkeleton };
+//# sourceMappingURL=ListBoxItemSkeleton.js.map

package/build/esm/core/src/ListBox/src/ListBoxItemSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxItemSkeleton.js","sources":["../../../../../../../core/src/ListBox/src/ListBoxItemSkeleton.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport iconStyles from '@danske/sapphire-css/components/icon/icon.module.css';\nimport styles from '@danske/sapphire-css/components/listbox/listbox.module.css';\nimport { Skeleton } from '../../Skeleton';\n\ninterface ListBoxItemSkeletonProps {\n  index?: number;\n  /**\n   * Can be used for rendering custom skeleton (ReactNode) instead of primaryText\n   * @default 'true'\n   */\n  primaryText?: boolean | React.ReactNode;\n  secondaryText?: boolean | React.ReactNode;\n  icon?: boolean | React.ReactNode;\n  /**\n   * The size of the skeleton icon.\n   * @default 'lg'\n   */\n  iconSize?: 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const ListBoxItemSkeleton: React.FC<ListBoxItemSkeletonProps> = ({\n  index,\n  primaryText = true,\n  secondaryText = false,\n  icon = false,\n  iconSize = 'lg',\n}) => (\n  <div\n    className={clsx(\n      styles['sapphire-listbox__item'],\n      styles['js-hover'],\n      styles['js-focus']\n    )}\n  >\n    <div className={styles['sapphire-listbox__content']}>\n      {icon && (\n        <div className={styles['sapphire-listbox__icon']}>\n          <div\n            className={clsx(iconStyles['sapphire-icon'], {\n              [iconStyles['sapphire-icon--sm']]: iconSize === 'sm',\n              [iconStyles['sapphire-icon--md']]: iconSize === 'md',\n              [iconStyles['sapphire-icon--lg']]: iconSize === 'lg',\n              [iconStyles['sapphire-icon--xl']]: iconSize === 'xl',\n            })}\n          >\n            {icon === true ? <Skeleton.Circle index={index} /> : icon}\n          </div>\n        </div>\n      )}\n      <div className={styles['sapphire-listbox__text-container']}>\n        <div className={styles['sapphire-listbox__primary-text']}>\n          {primaryText === true ? <Skeleton.Text index={index} /> : primaryText}\n        </div>\n        {secondaryText && (\n          <div className={styles['sapphire-listbox__secondary-text']}>\n            {secondaryText === true ? (\n              <Skeleton.Text index={index} />\n            ) : (\n              secondaryText\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,sBAA0D,CAAC;AAAA,EACtE,KAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,aAAA,GAAgB,KAAA;AAAA,EAChB,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW;AACb,CAAA,qBACE,KAAA,CAAA,aAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAA;AAAA,MACT,OAAO,wBAAwB,CAAA;AAAA,MAC/B,OAAO,UAAU,CAAA;AAAA,MACjB,OAAO,UAAU;AAAA;AACnB,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,2BAA2B,CAAA,EAAA,EAC/C,IAAA,oBACC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,wBAAwB,CAAA,EAAA,kBAC7C,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,eAAe,CAAA,EAAG;AAAA,QAC3C,CAAC,UAAA,CAAW,mBAAmB,CAAC,GAAG,QAAA,KAAa,IAAA;AAAA,QAChD,CAAC,UAAA,CAAW,mBAAmB,CAAC,GAAG,QAAA,KAAa,IAAA;AAAA,QAChD,CAAC,UAAA,CAAW,mBAAmB,CAAC,GAAG,QAAA,KAAa,IAAA;AAAA,QAChD,CAAC,UAAA,CAAW,mBAAmB,CAAC,GAAG,QAAA,KAAa;AAAA,OACjD;AAAA,KAAA;AAAA,IAEA,SAAS,IAAA,mBAAO,KAAA,CAAA,aAAA,CAAC,SAAS,MAAA,EAAT,EAAgB,OAAc,CAAA,GAAK;AAAA,GAEzD,CAAA,kBAEF,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,kCAAkC,CAAA,EAAA,kBACvD,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,gCAAgC,CAAA,EAAA,EACpD,gBAAgB,IAAA,mBAAO,KAAA,CAAA,aAAA,CAAC,SAAS,IAAA,EAAT,EAAc,KAAA,EAAc,CAAA,GAAK,WAC5D,CAAA,EACC,aAAA,wCACE,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,kCAAkC,CAAA,EAAA,EACtD,kBAAkB,IAAA,mBACjB,KAAA,CAAA,aAAA,CAAC,SAAS,IAAA,EAAT,EAAc,OAAc,CAAA,GAE7B,aAEJ,CAEJ,CACF;AACF;;;;"}

package/build/esm/core/src/ListBox/src/ListBoxOption.js

@@ -0,0 +1,105 @@
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+import { useHover } from 'react-aria/useHover';
+import { isFocusVisible } from 'react-aria/private/interactions/useFocusVisible';
+import { useFocusRing } from 'react-aria/useFocusRing';
+import { useOption } from 'react-aria/useListBox';
+import { mergeProps } from 'react-aria/mergeProps';
+import styles from '@danske/sapphire-css/components/listbox/listbox.module.css';
+import avatarStyles from '@danske/sapphire-css/components/avatar/avatar.module.css';
+import { Checkmark } from '@danske/sapphire-icons/react';
+import { Icon } from '../../Icon/src/Icon.js';
+import '@danske/sapphire-react-context';
+import 'react-aria/useId';
+import '../../utils/useSapphireTextStyleProps.js';
+import './StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import 'react-aria/useButton';
+import { usePreventTouchEnd } from '../../utils/usePreventTouchEnd.js';
+import { ListBoxContext } from './ListBoxContext.js';
+import '@danske/sapphire-css/themes/default';
+import '@danske/sapphire-css/themes/default-dark';
+import '@danske/sapphire-css/themes/realkredit';
+import { tokens } from '@danske/sapphire-css/themes';
+import 'react-dom';
+import 'react-aria/I18nProvider';
+import '../../ThemeRoot/src/ThemeRoot.js';
+import 'react-aria/PortalProvider';
+
+const ListBoxOption = ({
+  item
+}) => {
+  const ref = React.useRef(null);
+  const {
+    state,
+    shouldUseVirtualFocus,
+    disableSelectedStyles,
+    containerMaxWidth
+  } = useContext(ListBoxContext);
+  const {
+    optionProps,
+    isDisabled,
+    isFocused: isVirtuallyFocused,
+    isPressed
+  } = useOption({ key: item.key }, state, ref);
+  const { focusProps, isFocusVisible: isFocusRingVisible } = useFocusRing();
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  usePreventTouchEnd(ref);
+  const rightIcon = item.props.rightIcon || item.props.icon;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...mergeProps(
+        optionProps,
+        hoverProps,
+        shouldUseVirtualFocus ? {} : focusProps
+      ),
+      ref,
+      className: clsx(
+        styles["sapphire-listbox__item"],
+        styles["js-hover"],
+        styles["js-focus"],
+        {
+          [styles["is-disabled"]]: isDisabled,
+          [styles["is-focus"]]: shouldUseVirtualFocus ? isVirtuallyFocused && isFocusVisible() : isFocusRingVisible,
+          [styles["is-hover"]]: isHovered,
+          [styles["is-active"]]: isPressed
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(styles["sapphire-listbox__content"]),
+        style: containerMaxWidth !== void 0 ? {
+          maxWidth: `calc(${containerMaxWidth}px - 2 * ${tokens.size.iconSm})`
+        } : void 0
+      },
+      !disableSelectedStyles && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(styles["sapphire-listbox__checkmark"]),
+          style: {
+            visibility: state.selectionManager.selectedKeys.has(item.key) ? "visible" : "hidden"
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon, { size: "sm", color: "informative" }, /* @__PURE__ */ React.createElement(Checkmark, null))
+      ),
+      item.props.leftIcon && /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, item.props.leftIcon)),
+      /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__text-container"]) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__primary-text"]) }, item.rendered), item.props.secondaryText && /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__secondary-text"]) }, item.props.secondaryText)),
+      rightIcon ? /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, rightIcon)) : item.props.avatar && /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            avatarStyles["sapphire-avatar"],
+            avatarStyles["sapphire-avatar--sm"]
+          )
+        },
+        item.props.avatar
+      ))
+    )
+  );
+};
+
+export { ListBoxOption };
+//# sourceMappingURL=ListBoxOption.js.map

package/build/esm/core/src/ListBox/src/ListBoxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxOption.js","sources":["../../../../../../../core/src/ListBox/src/ListBoxOption.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { useHover } from 'react-aria/useHover';\nimport { isFocusVisible } from 'react-aria/private/interactions/useFocusVisible';\nimport { useFocusRing } from 'react-aria/useFocusRing';\nimport { useOption } from 'react-aria/useListBox';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { Node } from '@react-types/shared';\n\nimport styles from '@danske/sapphire-css/components/listbox/listbox.module.css';\nimport avatarStyles from '@danske/sapphire-css/components/avatar/avatar.module.css';\nimport { Checkmark } from '@danske/sapphire-icons/react';\n\nimport { Icon } from '../../Icon';\nimport { usePreventTouchEnd } from '../../utils';\nimport { ListBoxContext } from './ListBoxContext';\nimport { tokens } from '../../SapphireProvider';\n\ninterface OptionProps<T> {\n  item: Node<T>;\n}\n\nexport const ListBoxOption = <T extends object>({\n  item,\n}: OptionProps<T>): JSX.Element => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const {\n    state,\n    shouldUseVirtualFocus,\n    disableSelectedStyles,\n    containerMaxWidth,\n  } = useContext(ListBoxContext)!;\n  const {\n    optionProps,\n    isDisabled,\n    isFocused: isVirtuallyFocused,\n    isPressed,\n  } = useOption({ key: item.key }, state, ref);\n\n  const { focusProps, isFocusVisible: isFocusRingVisible } = useFocusRing();\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n\n  usePreventTouchEnd(ref);\n\n  const rightIcon = item.props.rightIcon || item.props.icon;\n\n  return (\n    <div\n      {...mergeProps(\n        optionProps,\n        hoverProps,\n        shouldUseVirtualFocus ? {} : focusProps\n      )}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-listbox__item'],\n        styles['js-hover'],\n        styles['js-focus'],\n        {\n          [styles['is-disabled']]: isDisabled,\n          [styles['is-focus']]: shouldUseVirtualFocus\n            ? isVirtuallyFocused && isFocusVisible()\n            : isFocusRingVisible,\n          [styles['is-hover']]: isHovered,\n          [styles['is-active']]: isPressed,\n        }\n      )}\n    >\n      <div\n        className={clsx(styles['sapphire-listbox__content'])}\n        style={\n          containerMaxWidth !== undefined\n            ? {\n                maxWidth: `calc(${containerMaxWidth}px - 2 * ${tokens.size.iconSm})`,\n              }\n            : undefined\n        }\n      >\n        {!disableSelectedStyles && (\n          <div\n            className={clsx(styles['sapphire-listbox__checkmark'])}\n            style={{\n              visibility: state.selectionManager.selectedKeys.has(item.key)\n                ? 'visible'\n                : 'hidden',\n            }}\n          >\n            <Icon size=\"sm\" color=\"informative\">\n              <Checkmark />\n            </Icon>\n          </div>\n        )}\n        {item.props.leftIcon && (\n          <div className={clsx(styles['sapphire-listbox__icon'])}>\n            <Icon size=\"sm\">{item.props.leftIcon}</Icon>\n          </div>\n        )}\n        <div className={clsx(styles['sapphire-listbox__text-container'])}>\n          <div className={clsx(styles['sapphire-listbox__primary-text'])}>\n            {item.rendered}\n          </div>\n          {item.props.secondaryText && (\n            <div className={clsx(styles['sapphire-listbox__secondary-text'])}>\n              {item.props.secondaryText}\n            </div>\n          )}\n        </div>\n        {rightIcon ? (\n          <div className={clsx(styles['sapphire-listbox__icon'])}>\n            <Icon size=\"sm\">{rightIcon}</Icon>\n          </div>\n        ) : (\n          item.props.avatar && (\n            <div className={clsx(styles['sapphire-listbox__icon'])}>\n              <div\n                className={clsx(\n                  avatarStyles['sapphire-avatar'],\n                  avatarStyles['sapphire-avatar--sm']\n                )}\n              >\n                {item.props.avatar}\n              </div>\n            </div>\n          )\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/core/src/ListBox/src/ListBoxSection.js

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import { useListBoxSection } from 'react-aria/useListBox';
+import styles from '@danske/sapphire-css/components/listbox/listbox.module.css';
+import { useVirtualizerItem } from 'react-aria/private/virtualizer/useVirtualizerItem';
+import { layoutInfoToStyle } from 'react-aria/private/virtualizer/VirtualizerItem';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import { Separator } from '../../Separator/src/Separator.js';
+
+function ListBoxSection({
+  item,
+  layoutInfo,
+  virtualizer,
+  childrenViews,
+  children
+}) {
+  useThemeCheck();
+  const { groupProps, headingProps } = useListBoxSection({
+    "aria-label": item["aria-label"],
+    heading: item.rendered
+  });
+  const headerLayoutInfo = childrenViews && childrenViews.find((c) => c.viewType === "header")?.layoutInfo;
+  const dividerLayoutInfo = childrenViews && childrenViews.find((c) => c.viewType === "divider")?.layoutInfo;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, headerLayoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      style: layoutInfoToStyle(headerLayoutInfo, "ltr")
+    },
+    item.prevKey && /* @__PURE__ */ React.createElement(
+      Separator,
+      {
+        UNSAFE_className: styles["sapphire-listbox__separator"]
+      }
+    ),
+    item.rendered && /* @__PURE__ */ React.createElement(
+      SectionHeader,
+      {
+        item,
+        headerLayoutInfo,
+        headingProps,
+        virtualizer
+      }
+    )
+  ), layoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...groupProps,
+      key: layoutInfo.key,
+      style: layoutInfoToStyle(layoutInfo, "ltr"),
+      className: styles["sapphire-listbox__section"]
+    },
+    children
+  ), dividerLayoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      style: layoutInfoToStyle(dividerLayoutInfo, "ltr")
+    },
+    /* @__PURE__ */ React.createElement(Separator, { UNSAFE_className: styles["sapphire-listbox__separator"] })
+  ));
+}
+const SectionHeader = ({
+  item,
+  headerLayoutInfo,
+  headingProps,
+  virtualizer
+}) => {
+  const headerRef = useRef(null);
+  useVirtualizerItem({
+    layoutInfo: headerLayoutInfo,
+    virtualizer,
+    ref: headerRef
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...headingProps,
+      ref: headerRef,
+      className: styles["sapphire-listbox__section-header"]
+    },
+    item.rendered
+  );
+};
+
+export { ListBoxSection };
+//# sourceMappingURL=ListBoxSection.js.map

package/build/esm/core/src/ListBox/src/ListBoxSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxSection.js","sources":["../../../../../../../core/src/ListBox/src/ListBoxSection.tsx"],"sourcesContent":["import React, { DOMAttributes, ReactNode, useRef } from 'react';\nimport { FocusableElement, Node } from '@react-types/shared';\nimport { useListBoxSection } from 'react-aria/useListBox';\nimport { ReusableView } from 'react-stately/useVirtualizerState';\nimport styles from '@danske/sapphire-css/components/listbox/listbox.module.css';\nimport {\n  useVirtualizerItem,\n  VirtualizerItemOptions,\n} from 'react-aria/private/virtualizer/useVirtualizerItem';\nimport { layoutInfoToStyle } from 'react-aria/private/virtualizer/VirtualizerItem';\nimport { LayoutInfo } from 'react-stately/useVirtualizerState';\n\nimport { useThemeCheck } from '../../utils/useThemeCheck';\nimport { Separator } from '../../Separator';\n\ntype ListBoxSectionProps<T> = Omit<VirtualizerItemOptions, 'ref'> & {\n  item: Node<T>;\n  childrenViews?: ReusableView<Node<T>, ReactNode>[];\n  children?: ReactNode;\n};\n\nexport function ListBoxSection<T extends object>({\n  item,\n  layoutInfo,\n  virtualizer,\n  childrenViews,\n  children,\n}: ListBoxSectionProps<T>): JSX.Element {\n  useThemeCheck();\n\n  const { groupProps, headingProps } = useListBoxSection({\n    'aria-label': item['aria-label'],\n    heading: item.rendered,\n  });\n\n  const headerLayoutInfo =\n    childrenViews &&\n    childrenViews.find((c) => c.viewType === 'header')?.layoutInfo;\n  const dividerLayoutInfo =\n    childrenViews &&\n    childrenViews.find((c) => c.viewType === 'divider')?.layoutInfo;\n\n  return (\n    <>\n      {headerLayoutInfo && (\n        <div\n          role=\"presentation\"\n          style={layoutInfoToStyle(headerLayoutInfo, 'ltr')}\n        >\n          {item.prevKey && (\n            <Separator\n              UNSAFE_className={styles['sapphire-listbox__separator']}\n            />\n          )}\n          {item.rendered && (\n            <SectionHeader\n              item={item}\n              headerLayoutInfo={headerLayoutInfo!}\n              headingProps={headingProps}\n              virtualizer={virtualizer}\n            />\n          )}\n        </div>\n      )}\n      {layoutInfo && (\n        <div\n          {...groupProps}\n          key={layoutInfo.key}\n          style={layoutInfoToStyle(layoutInfo, 'ltr')}\n          className={styles['sapphire-listbox__section']}\n        >\n          {children}\n        </div>\n      )}\n      {dividerLayoutInfo && (\n        <div\n          role=\"presentation\"\n          style={layoutInfoToStyle(dividerLayoutInfo, 'ltr')}\n        >\n          <Separator UNSAFE_className={styles['sapphire-listbox__separator']} />\n        </div>\n      )}\n    </>\n  );\n}\n\nconst SectionHeader = <T,>({\n  item,\n  headerLayoutInfo,\n  headingProps,\n  virtualizer,\n}: {\n  item: Node<T>;\n  headerLayoutInfo: LayoutInfo;\n  headingProps: DOMAttributes<FocusableElement>;\n  virtualizer: VirtualizerItemOptions['virtualizer'];\n}) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  useVirtualizerItem({\n    layoutInfo: headerLayoutInfo!,\n    virtualizer,\n    ref: headerRef,\n  });\n\n  return (\n    <div\n      {...headingProps}\n      ref={headerRef}\n      className={styles['sapphire-listbox__section-header']}\n    >\n      {item.rendered}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAqBO,SAAS,cAAA,CAAiC;AAAA,EAC/C,IAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAAwC;AACtC,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,iBAAA,CAAkB;AAAA,IACrD,YAAA,EAAc,KAAK,YAAY,CAAA;AAAA,IAC/B,SAAS,IAAA,CAAK;AAAA,GACf,CAAA;AAED,EAAA,MAAM,gBAAA,GACJ,iBACA,aAAA,CAAc,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,QAAA,KAAa,QAAQ,CAAA,EAAG,UAAA;AACtD,EAAA,MAAM,iBAAA,GACJ,iBACA,aAAA,CAAc,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,QAAA,KAAa,SAAS,CAAA,EAAG,UAAA;AAEvD,EAAA,iEAEK,gBAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,iBAAA,CAAkB,gBAAA,EAAkB,KAAK;AAAA,KAAA;AAAA,IAE/C,KAAK,OAAA,oBACJ,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,gBAAA,EAAkB,OAAO,6BAA6B;AAAA;AAAA,KACxD;AAAA,IAED,KAAK,QAAA,oBACJ,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,gBAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AAAA;AACF,KAIL,UAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,KAAA,EAAO,iBAAA,CAAkB,UAAA,EAAY,KAAK,CAAA;AAAA,MAC1C,SAAA,EAAW,OAAO,2BAA2B;AAAA,KAAA;AAAA,IAE5C;AAAA,KAGJ,iBAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,iBAAA,CAAkB,iBAAA,EAAmB,KAAK;AAAA,KAAA;AAAA,oBAEjD,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,gBAAA,EAAkB,MAAA,CAAO,6BAA6B,CAAA,EAAG;AAAA,GAG1E,CAAA;AAEJ;AAEA,MAAM,gBAAgB,CAAK;AAAA,EACzB,IAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAKM;AACJ,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAE7C,EAAA,kBAAA,CAAmB;AAAA,IACjB,UAAA,EAAY,gBAAA;AAAA,IACZ,WAAA;AAAA,IACA,GAAA,EAAK;AAAA,GACN,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAO,kCAAkC;AAAA,KAAA;AAAA,IAEnD,IAAA,CAAK;AAAA,GACR;AAEJ,CAAA;;;;"}