@danske/sapphire-react-lab 0.106.2 → 0.107.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.js","sources":["../../../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Typography,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, useHover } from 'react-aria/useHover';\nimport { Pressable } from 'react-aria/Pressable';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { useId } from 'react-aria/useId';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useDrop } from 'react-aria/useDrop';\nimport { useClipboard } from 'react-aria/useClipboard';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from 'react-aria/useFocusRing';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      DropOptions,\n      | 'getDropOperation'\n      | 'onDropEnter'\n      | 'onDropActivate'\n      | 'onDropMove'\n      | 'onDropExit'\n      | 'onDrop'\n    >,\n    HoverProps,\n    FileSelectProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    > {\n  /**\n   * Whether the dropzone has an error\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n   * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n   * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n   */\n  renderInstruction: (isDropping: boolean) => string;\n  /**\n   * Function that is called when the file select is opened on press, before any file is selected.\n   * @default \"() => null\"\n   */\n  onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n  props: FileDropzoneProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n    getDropOperation = () => 'copy',\n    ...otherProps\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useObjectRef(forwardedRef);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const { dropProps, isDropTarget: isDropping } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n    getDropOperation,\n  });\n  const { buttonProps, isPressed } = useButton(\n    { elementType: 'div' },\n    pressableRef as React.RefObject<Element>\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { clipboardProps } = useClipboard({\n    isDisabled,\n    onPaste: (items) =>\n      onDrop({\n        type: 'drop',\n        items,\n        x: 0,\n        y: 0,\n        dropOperation: 'copy',\n      }),\n  });\n\n  const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n  const onFileTriggerSelect = (files: FileList | null) => {\n    onDrop({\n      type: 'drop',\n      items: convertFileListToFileDropItems(files),\n      x: 0,\n      y: 0,\n      dropOperation: 'copy',\n    });\n  };\n\n  return (\n    <FileTrigger\n      acceptedFileTypes={acceptedFileTypes}\n      allowsMultiple={allowsMultiple}\n      onSelect={onFileTriggerSelect}\n      isDisabled={isDisabled}\n    >\n      <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n        <div\n          {...mergeProps(\n            dropProps,\n            hoverProps,\n            clipboardProps,\n            focusProps,\n            buttonProps\n          )}\n          {...filterDOMProps(otherProps, { global: true })}\n          style={{ ...styleProps.style }}\n          className={clsx(\n            styles['sapphire-dropzone'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-hover']]: isHovered && !isDropping,\n              [styles['is-active']]: isPressed,\n              [styles['is-disabled']]: isDisabled,\n              [styles['is-focus']]: isFocusVisible,\n              [styles['sapphire-dropzone--dropping']]: isDropping,\n              [styles['sapphire-dropzone--error']]: hasError,\n            },\n            styleProps.className\n          )}\n          aria-label={ariaLabel}\n          aria-invalid={hasError}\n          aria-describedby={paragraphId}\n        >\n          <div className={clsx(styles['sapphire-dropzone__content'])}>\n            <div className={clsx(styles['sapphire-dropzone__icon'])}>\n              <Icon size=\"lg\">\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Typography.Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : allowsMultiple\n                  ? format('dropzone-heading-default')\n                  : format('dropzone-heading-default-single')}\n              </Typography.Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Typography.Body size=\"sm\" color=\"secondary\">\n                {renderInstruction(isDropping)}\n              </Typography.Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAgEO,MAAM,eAAe,KAAA,CAAM,UAAA,CAAW,SAAS,eAAA,CACpD,OACA,YAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,UAAA,GAAa,KAAA;AAAA,IACb,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAmB,MAAM,IAAA;AAAA,IACzB,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAS,MAAM,IAAA;AAAA,IACf,mBAAmB,MAAM,MAAA;AAAA,IACzB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,YAAY,CAAA,GAAI,MAAA,GAAY,EAAA;AACtD,EAAA,MAAM,MAAA,GAAS,oBAAoB,YAAY,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAC9C,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,KAAc,QAAA,CAAS,EAAE,YAAY,CAAA;AACzD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,UAAA,KAAe,OAAA,CAAQ;AAAA,IACtD,GAAG,KAAA;AAAA,IACH,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe,IAAA;AAAA,IACf,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,SAAA,EAAU,GAAI,SAAA;AAAA,IACjC,EAAE,aAAa,KAAA,EAAM;AAAA,IACrB;AAAA,GACF;AACA,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,YAAA,EAAa;AAEpD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,YAAA,CAAa;AAAA,IACtC,UAAA;AAAA,IACA,OAAA,EAAS,CAAC,KAAA,KACR,MAAA,CAAO;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,KAAA;AAAA,MACA,CAAA,EAAG,CAAA;AAAA,MACH,CAAA,EAAG,CAAA;AAAA,MACH,aAAA,EAAe;AAAA,KAChB;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,SAAA,GAAoB,KAAA,CAAM,YAAY,CAAA,IAAK,UAAA;AAEjD,EAAA,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAA2B;AACtD,IAAA,MAAA,CAAO;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,KAAA,EAAO,+BAA+B,KAAK,CAAA;AAAA,MAC3C,CAAA,EAAG,CAAA;AAAA,MACH,CAAA,EAAG,CAAA;AAAA,MACH,aAAA,EAAe;AAAA,KAChB,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA,EAAU,mBAAA;AAAA,MACV;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAK,YAAA,EAAc,SAAS,gBAAA,EAAA,kBACrC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,UACF,SAAA;AAAA,UACA,UAAA;AAAA,UACA,cAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,cAAA,CAAe,UAAA,EAAY,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,QAC/C,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,KAAA,EAAM;AAAA,QAC7B,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,mBAAmB,CAAA;AAAA,UAC1B,OAAO,UAAU,CAAA;AAAA,UACjB,OAAO,UAAU,CAAA;AAAA,UACjB;AAAA,YACE,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG,aAAa,CAAC,UAAA;AAAA,YACpC,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,SAAA;AAAA,YACvB,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG,UAAA;AAAA,YACzB,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG,cAAA;AAAA,YACtB,CAAC,MAAA,CAAO,6BAA6B,CAAC,GAAG,UAAA;AAAA,YACzC,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG;AAAA,WACxC;AAAA,UACA,UAAA,CAAW;AAAA,SACb;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,cAAA,EAAc,QAAA;AAAA,QACd,kBAAA,EAAkB;AAAA,OAAA;AAAA,sBAElB,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,IAAA,CAAK,OAAO,4BAA4B,CAAC,CAAA,EAAA,kBACvD,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,MAAA,CAAO,yBAAyB,CAAC,CAAA,EAAA,kBACpD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,MAAK,IAAA,EAAA,kBACT,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,IAAO,CACV,CACF,CAAA,sCACC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC,qBACvD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,OAAA,EAAX,EAAmB,KAAA,EAAO,CAAA,EAAA,EACxB,aACG,MAAA,CAAO,2BAA2B,CAAA,GAClC,cAAA,GACA,MAAA,CAAO,0BAA0B,IACjC,MAAA,CAAO,iCAAiC,CAC9C,CACF,CAAA,kBACA,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,WAAA;AAAA,UACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,8BAA8B,CAAC;AAAA,SAAA;AAAA,wBAEtD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,IAAA,EAAK,MAAK,KAAA,EAAM,WAAA,EAAA,EAC9B,iBAAA,CAAkB,UAAU,CAC/B;AAAA,OAEJ;AAAA,KAEJ;AAAA,GACF;AAEJ,CAAC;;;;"}

package/build/esm/lab/src/FileDropzone/src/FileTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTrigger.js","sources":["../../../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { PressResponder } from 'react-aria/private/interactions/PressResponder';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest, { global: true });\n\n  return (\n    <>\n      <PressResponder\n        isDisabled={isDisabled}\n        onPress={() => {\n          if (inputRef.current) {\n            inputRef.current.value = '';\n          }\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;AA8BA,MAAM,kBAAkB,KAAA,CAAM,UAAA,CAAW,SAAS,YAAA,CAChD,OACA,GAAA,EACA;AACA,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAO,GAAG,KAAA,EAAO,GAAA,EAAU,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO,EAAG,CAAA;AAC7E,CAAC,CAAA;AAEM,MAAM,cAAc,KAAA,CAAM,UAAA,CAAW,SAAS,kBAAA,CACnD,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,WAAW,cAAA,CAAe,IAAA,EAAM,EAAE,MAAA,EAAQ,MAAM,CAAA;AAEtD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAS,MAAM;AACb,QAAA,IAAI,SAAS,OAAA,EAAS;AACpB,UAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AAAA,QAC3B;AACA,QAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,MAC1B;AAAA,KAAA;AAAA,IAEC;AAAA,GACH,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,QAAA;AAAA,MACJ,QAAA,EAAU,UAAA;AAAA,MACV,GAAA,EAAK,QAAA;AAAA,MACL,MAAA,EAAQ,mBAAmB,QAAA,EAAS;AAAA,MACpC,UAAU,CAAC,CAAA,KAAM,QAAA,GAAY,CAAA,CAAE,OAA4B,KAAK,CAAA;AAAA,MAChE,QAAA,EAAU;AAAA;AAAA,GAEd,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/lab/src/FileDropzone/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/FileDropzone/src/utils.ts"],"sourcesContent":["import { FileDropItem } from '@react-types/shared';\n\nexport const convertFileListToFileDropItems = (\n  fileList: FileList | null\n): FileDropItem[] => {\n  if (!fileList) {\n    return [];\n  }\n\n  return Array.from(fileList).map((file) => ({\n    kind: 'file',\n    type: file.type,\n    name: file.name,\n    getFile: () => Promise.resolve(file),\n    getText: () =>\n      new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = () => reject(reader.error);\n        reader.readAsText(file);\n      }),\n  }));\n};\n"],"names":[],"mappings":"AAEO,MAAM,8BAAA,GAAiC,CAC5C,QAAA,KACmB;AACnB,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,OAAO,MAAM,IAAA,CAAK,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,IACzC,IAAA,EAAM,MAAA;AAAA,IACN,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,OAAA,EAAS,MAAM,OAAA,CAAQ,OAAA,CAAQ,IAAI,CAAA;AAAA,IACnC,SAAS,MACP,IAAI,OAAA,CAAgB,CAAC,SAAS,MAAA,KAAW;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,UAAA,EAAW;AAC9B,MAAA,MAAA,CAAO,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAA,CAAO,MAAgB,CAAA;AACrD,MAAA,MAAA,CAAO,OAAA,GAAU,MAAM,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA;AAC1C,MAAA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,IACxB,CAAC;AAAA,GACL,CAAE,CAAA;AACJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport clsx from 'clsx';\nimport { VisuallyHidden } from 'react-aria/VisuallyHidden';\nimport { useEffectEvent } from 'react-aria/private/utils/useEffectEvent';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n   * Whether the 'Clear' button is hidden.\n   */\n  hideClearButton?: boolean;\n  /**\n   * Whether the 'Clear' button is disabled.\n   */\n  isClearDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n  /**\n   * The size of the buttons incl. the trigger itself.\n   * @default 'md'\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isClearDisabled,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  hideClearButton = false,\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n  ...props\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\n  const { styleProps } = useSapphireStyleProps(props);\n\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    useEffectEvent(onOpenChange)\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    onApply?.();\n    close();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      size={buttonSize}\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n\n  return (\n    <PopoverTrigger\n      ref={triggerRef}\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n      noPadding\n      popoverContent={\n        <form\n          {...filterDOMProps(props, { global: true })}\n          onSubmit={onSubmit}\n          className={clsx(\n            styles['sapphire-filter-dropdown'],\n            styleProps.className\n          )}\n          style={{ ...styleProps.style }}\n        >\n          <div className={styles['sapphire-filter-dropdown__body']}>\n            {children}\n          </div>\n          <div className={styles['sapphire-filter-dropdown__footer']}>\n            <ButtonGroup align=\"right\">\n              {!hideClearButton && (\n                <Button\n                  size={buttonSize}\n                  variant=\"text\"\n                  onPress={() => {\n                    close();\n                    onClear?.();\n                  }}\n                  isDisabled={isClearDisabled ?? !hasValue}\n                >\n                  {clearButtonLabel}\n                </Button>\n              )}\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </ButtonGroup>\n          </div>\n        </form>\n      }\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n        size={buttonSize}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/esm/{Filtering → lab/src/Filtering}/src/SearchableSelectFilter.js

@@ -33,6 +33,8 @@ import 'react-aria/useHover';
 import 'react-aria/FocusRing';
 import 'react-stately/Item';
 import '../../TimeField/src/TimeField.js';
+import '../../TruncateOverflow/src/TruncateOverflow.js';
+import '../../DataGrid/index.js';
 
 function SearchableSelectFilter(props) {
   const { searchField, listBox, size = "md", ...otherProps } = props;

package/build/esm/lab/src/Filtering/src/SearchableSelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n  Flex,\n  ListBoxProps,\n  SapphireStyleProps,\n  SearchFieldPropsWithRef,\n  tokens,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from 'react-aria/mergeRefs';\nimport { useControlledState } from 'react-stately/useControlledState';\n\nexport interface SearchableSelectFilterProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Omit<FilterDropdownProps, 'children'> {\n  /**\n   * The SearchField to search items with.\n   */\n  searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n  /**\n   * The ListBox to select items from.\n   */\n  listBox: ReactElement<ListBoxProps<object>>;\n  /**\n   * The Button size of the trigger\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n  props: SearchableSelectFilterProps\n): JSX.Element {\n  const { searchField, listBox, size = 'md', ...otherProps } = props;\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n\n  const searchFieldProps = searchField.props;\n  const listBoxProps = listBox.props;\n\n  const [searchQuery, setSearchQuery] = useControlledState(\n    searchFieldProps?.value,\n    '',\n    searchFieldProps.onChange\n  );\n\n  if (\n    listBoxProps.connectedInputRef &&\n    typeof process !== 'undefined' &&\n    process.env?.NODE_ENV === 'development'\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n    );\n  }\n\n  const hasSelection =\n    listBoxProps.selectedKeys === 'all' ||\n    Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n  return (\n    <FilterDropdown\n      {...otherProps}\n      noMaxWidth={otherProps.noMaxWidth ?? true}\n      buttonSize={size}\n      // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n      // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n      hasApplyButton={Boolean(otherProps.onApply)}\n      // In scenarios where selections are not applied immediately we want to allow cancelling\n      // the filter selection via 'Clear' button as soon as at least 1 item is selected\n      isClearDisabled={\n        otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n      }\n    >\n      <Flex flexDirection=\"column\" height=\"100%\">\n        {cloneElement(searchField, {\n          size: 'md',\n          value: searchFieldProps.value || searchQuery,\n          inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n          width: searchFieldProps.width || '100%',\n          marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n          onChange: setSearchQuery,\n        })}\n        {cloneElement(listBox, {\n          connectedInputRef: searchFieldRef,\n          selectionMode: listBoxProps.selectionMode || 'multiple',\n          marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n          hasScrollDividers: true,\n          filter:\n            // This is a way to also allow opting out of the internal filter with filter={undefined}\n            // without us having to allow for more values on the ListBox filter prop\n            'filter' in listBoxProps\n              ? listBoxProps.filter\n              : (textValue: string) =>\n                  textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n        })}\n      </Flex>\n    </FilterDropdown>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,SAAS,uBACd,KAAA,EACa;AACb,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAS,OAAO,IAAA,EAAM,GAAG,YAAW,GAAI,KAAA;AAC7D,EAAA,MAAM,cAAA,GAAiB,OAAyB,IAAI,CAAA;AAEpD,EAAA,MAAM,mBAAmB,WAAA,CAAY,KAAA;AACrC,EAAA,MAAM,eAAe,OAAA,CAAQ,KAAA;AAE7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,kBAAA;AAAA,IACpC,gBAAA,EAAkB,KAAA;AAAA,IAClB,EAAA;AAAA,IACA,gBAAA,CAAiB;AAAA,GACnB;AAEA,EAAA,IACE,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,OAAA,CAAQ,GAAA,EAAK,aAAa,aAAA,EAC1B;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,YAAA,GACJ,YAAA,CAAa,YAAA,KAAiB,KAAA,IAC9B,KAAA,CAAM,IAAA,CAAK,YAAA,CAAa,YAAA,IAAgB,EAAE,CAAA,CAAE,MAAA,GAAS,CAAA;AAEvD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,UAAA,EAAY,WAAW,UAAA,IAAc,IAAA;AAAA,MACrC,UAAA,EAAY,IAAA;AAAA,MAGZ,cAAA,EAAgB,OAAA,CAAQ,UAAA,CAAW,OAAO,CAAA;AAAA,MAG1C,iBACE,UAAA,CAAW,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAA,CAAW;AAAA,KAAA;AAAA,wCAG7D,IAAA,EAAA,EAAK,aAAA,EAAc,UAAS,MAAA,EAAO,MAAA,EAAA,EACjC,aAAa,WAAA,EAAa;AAAA,MACzB,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO,iBAAiB,KAAA,IAAS,WAAA;AAAA,MACjC,QAAA,EAAU,SAAA,CAAU,cAAA,EAAgB,gBAAA,CAAiB,QAAQ,CAAA;AAAA,MAC7D,KAAA,EAAO,iBAAiB,KAAA,IAAS,MAAA;AAAA,MACjC,YAAA,EAAc,gBAAA,CAAiB,YAAA,IAAgB,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC3D,QAAA,EAAU;AAAA,KACX,CAAA,EACA,YAAA,CAAa,OAAA,EAAS;AAAA,MACrB,iBAAA,EAAmB,cAAA;AAAA,MACnB,aAAA,EAAe,aAAa,aAAA,IAAiB,UAAA;AAAA,MAC7C,OAAA,EAAS,CAAA,KAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,6BAA6B,KAAK,CAAA,MAAA,CAAA;AAAA,MAC/D,iBAAA,EAAmB,IAAA;AAAA,MACnB,MAAA;AAAA;AAAA;AAAA,QAGE,QAAA,IAAY,YAAA,GACR,YAAA,CAAa,MAAA,GACb,CAAC,SAAA,KACC,SAAA,CAAU,WAAA,EAAY,CAAE,QAAA,CAAS,WAAA,CAAY,WAAA,EAAa;AAAA;AAAA,KACnE,CACH;AAAA,GACF;AAEJ;;;;"}

package/build/esm/lab/src/Flag/src/Flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flag.js","sources":["../../../../../../src/Flag/src/Flag.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { getWrappedElement } from '@react-spectrum/utils';\nimport styles from '@danske/sapphire-css/components/flag/flag.module.css';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\n\nexport type FlagProps = GlobalDomAttributes &\n  SapphireStyleProps & {\n    'aria-label'?: string;\n    /**\n     * The size of the flag.\n     * @default 'lg'\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    /**\n     * Flags come in square or rounded shapes. Square flags are used for display purposes, ensuring a clean and consistent look.\n     * Rounded flags are reserved for actionable elements like buttons or selectors, providing a more interactive and approachable feel.\n     * @default false\n     */\n    rounded?: boolean;\n    children: React.ReactNode;\n  };\n\nexport const Flag = React.forwardRef(function Flag(\n  { size = 'lg', rounded, 'aria-label': ariaLabel, ...props }: FlagProps,\n  ref: React.Ref<HTMLSpanElement>\n) {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return React.cloneElement(getWrappedElement(props.children), {\n    ref,\n    role: 'img',\n    ...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true }),\n    className: clsx(styles['sapphire-flag'], styleProps.className, {\n      [styles['sapphire-flag--xs']]: size === 'xs',\n      [styles['sapphire-flag--sm']]: size === 'sm',\n      [styles['sapphire-flag--md']]: size === 'md',\n      [styles['sapphire-flag--lg']]: size === 'lg',\n      [styles['sapphire-flag--xl']]: size === 'xl',\n      [styles['sapphire-flag--rounded']]: rounded,\n    }),\n    style: styleProps.style,\n  });\n});\n"],"names":["Flag"],"mappings":";;;;;;AA6BO,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,SAASA,MAC5C,EAAE,IAAA,GAAO,IAAA,EAAM,OAAA,EAAS,YAAA,EAAc,SAAA,EAAW,GAAG,KAAA,IACpD,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAElD,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,WAAW,IAAA,CAAK,MAAA,CAAO,eAAe,CAAA,EAAG,WAAW,SAAA,EAAW;AAAA,MAC7D,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,wBAAwB,CAAC,GAAG;AAAA,KACrC,CAAA;AAAA,IACD,OAAO,UAAA,CAAW;AAAA,GACnB,CAAA;AACH,CAAC;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledValue.js","sources":["../../../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from 'react-aria/useField';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { mergeProps } from 'react-aria/mergeProps';\n\nexport interface LabeledValueProps\n  extends SapphireStyleProps,\n    GlobalDomAttributes {\n  children?: React.ReactNode;\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n}\n\nexport function LabeledValue({\n  children,\n  contextualHelp,\n  label,\n  labelPlacement = 'above',\n  size = 'lg',\n  ...otherProps\n}: LabeledValueProps): React.JSX.Element {\n  useThemeCheck();\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field\n      {...mergeProps(fieldProps, otherProps)}\n      labelPlacement={labelPlacement}\n      size={size}\n      noDefaultWidth\n    >\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>{children}</Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;AAkCO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA,GAAiB,OAAA;AAAA,EACjB,IAAA,GAAO,IAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAyC;AACvC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,QAAA,CAAS,EAAE,OAAO,CAAA;AAEzC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA,CAAW,UAAA,EAAY,UAAU,CAAA;AAAA,MACrC,cAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA,CAAC,MAAM,KAAA,EAAN,IAAA,sCACE,KAAA,EAAA,EAAM,cAAA,EAAgC,IAAA,EAAA,EACpC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,IAAA,EAAe,QAAS;AAAA,GAC3B;AAEJ;;;;"}

package/build/esm/{NumberField → lab/src/NumberField}/i18n/da-DK.json.js

@@ -1,9 +1,9 @@
 var increment$6 = "øge";
 var decrement$6 = "formindske";
-var da$1 = {
+var da$2 = {
 	increment: increment$6,
 	decrement: decrement$6
 };
 
-export { decrement$6 as decrement, da$1 as default, increment$6 as increment };
+export { decrement$6 as decrement, da$2 as default, increment$6 as increment };
 //# sourceMappingURL=da-DK.json.js.map

package/build/esm/{NumberField → lab/src/NumberField}/i18n/de-DE.json.js

@@ -1,9 +1,9 @@
 var increment$4 = "erhöhen";
 var decrement$4 = "verringern";
-var de$1 = {
+var de$2 = {
 	increment: increment$4,
 	decrement: decrement$4
 };
 
-export { decrement$4 as decrement, de$1 as default, increment$4 as increment };
+export { decrement$4 as decrement, de$2 as default, increment$4 as increment };
 //# sourceMappingURL=de-DE.json.js.map

package/build/esm/{NumberField → lab/src/NumberField}/i18n/en-US.json.js

@@ -1,9 +1,9 @@
 var increment$5 = "Increase";
 var decrement$5 = "Decrease";
-var en$1 = {
+var en$2 = {
 	increment: increment$5,
 	decrement: decrement$5
 };
 
-export { decrement$5 as decrement, en$1 as default, increment$5 as increment };
+export { decrement$5 as decrement, en$2 as default, increment$5 as increment };
 //# sourceMappingURL=en-US.json.js.map

package/build/esm/{NumberField → lab/src/NumberField}/i18n/fi-FI.json.js

@@ -1,9 +1,9 @@
 var increment$3 = "lisääntyä";
 var decrement$3 = "vähentää";
-var fi$1 = {
+var fi$2 = {
 	increment: increment$3,
 	decrement: decrement$3
 };
 
-export { decrement$3 as decrement, fi$1 as default, increment$3 as increment };
+export { decrement$3 as decrement, fi$2 as default, increment$3 as increment };
 //# sourceMappingURL=fi-FI.json.js.map

package/build/esm/lab/src/NumberField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/NumberField/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,qBAAe;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/{NumberField → lab/src/NumberField}/i18n/nb-NO.json.js

@@ -1,9 +1,9 @@
 var increment$2 = "øke";
 var decrement$2 = "avta";
-var no$1 = {
+var no$2 = {
 	increment: increment$2,
 	decrement: decrement$2
 };
 
-export { decrement$2 as decrement, no$1 as default, increment$2 as increment };
+export { decrement$2 as decrement, no$2 as default, increment$2 as increment };
 //# sourceMappingURL=nb-NO.json.js.map

package/build/esm/{NumberField → lab/src/NumberField}/i18n/pl-PL.json.js

@@ -1,9 +1,9 @@
 var increment$1 = "zwiększyć";
 var decrement$1 = "zmniejszenie";
-var pl$1 = {
+var pl$2 = {
 	increment: increment$1,
 	decrement: decrement$1
 };
 
-export { decrement$1 as decrement, pl$1 as default, increment$1 as increment };
+export { decrement$1 as decrement, pl$2 as default, increment$1 as increment };
 //# sourceMappingURL=pl-PL.json.js.map

package/build/esm/{NumberField → lab/src/NumberField}/i18n/sv-SE.json.js

@@ -1,9 +1,9 @@
 var increment = "öka";
 var decrement = "minska";
-var se$1 = {
+var se$2 = {
 	increment: increment,
 	decrement: decrement
 };
 
-export { decrement, se$1 as default, increment };
+export { decrement, se$2 as default, increment };
 //# sourceMappingURL=sv-SE.json.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["../../../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  ForwardedRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n  useMemo,\n} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from 'react-aria/useFocusRing';\nimport { useLocale } from 'react-aria/I18nProvider';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n  Separator,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport { useNumberFieldFormatting } from './useNumberFieldFormatting';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  /**\n   * A string or element to show before / after the input value.\n   *\n   * By default (`'auto'`), the component will automatically extract currency/unit symbols\n   * from the locale formatter and display them as prefix/postfix.\n   * If you provide a custom prefix or postfix, those will be used instead and\n   * the extracted symbols will be ignored.\n   *\n   * @default 'auto' - automatically extracts currency/unit symbols from locale formatter\n   */\n  affix?: 'auto' | { prefix?: ReactNode; postfix?: ReactNode };\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A HelpButton to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n  /**\n   * Enables automatic formatting of the input value as the user types, based on the provided formatter and affix.\n   *\n   * @default false\n   */\n  autoFormat?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    affix = 'auto',\n    size = 'lg',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    autoFormat = false,\n    ...otherProps\n  } = props;\n\n  // Extract prefix and postfix from affix prop\n  const { prefix, postfix } = useMemo(() => {\n    if (affix === 'auto') {\n      return { prefix: undefined, postfix: undefined };\n    }\n    return { prefix: affix.prefix, postfix: affix.postfix };\n  }, [affix]);\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n  const { locale } = useLocale();\n\n  const formatter = useMemo(\n    () => new Intl.NumberFormat(locale, props.formatOptions),\n    [locale, props.formatOptions]\n  );\n\n  const formattingResult = useNumberFieldFormatting({\n    inputRef,\n    formatter,\n    inputValue: inputProps.value as string,\n    prefix,\n    postfix,\n    onOriginalKeyDown: inputProps.onKeyDown,\n    onChange: props.onChange,\n    autoFormat,\n  });\n\n  const { extractedPrefix, extractedPostfix, handleInput, handleKeyDown } =\n    autoFormat\n      ? formattingResult\n      : {\n          extractedPrefix: formattingResult.extractedPrefix,\n          extractedPostfix: formattingResult.extractedPostfix,\n          handleInput: undefined,\n          handleKeyDown: inputProps.onKeyDown,\n        };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(containerRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={containerRef}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      <Field.Context\n        descriptionProps={error ? errorMessageProps : descriptionProps}\n      >\n        {label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                isRequired && necessityIndicator\n                  ? 'required'\n                  : !isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {label}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            className={clsx(textFieldStyles['sapphire-text-field'], {\n              [textFieldStyles['is-focus']]: isFocusVisible,\n              [textFieldStyles['sapphire-text-field--error']]:\n                error === true || typeof error === 'string',\n              [textFieldStyles['sapphire-text-field--md']]: size === 'md',\n            })}\n          >\n            {extractedPrefix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__prefix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                      typeof extractedPrefix !== 'string',\n                  }\n                )}\n              >\n                {extractedPrefix}\n              </span>\n            )}\n            <input\n              {...mergeProps(\n                inputProps,\n                focusProps,\n                {\n                  onChange: updateStyle,\n                  onBlur: updateStyle,\n                },\n                autoFormat\n                  ? {\n                      onInput: handleInput,\n                      onKeyDown: handleKeyDown,\n                    }\n                  : {}\n              )}\n              value={formattingResult?.displayValue ?? inputProps.value}\n              ref={inputRef}\n              className={clsx(textFieldStyles['sapphire-text-field__input'], {\n                [textFieldStyles['sapphire-text-field__input--align-right']]:\n                  !!alignInputRight,\n              })}\n              style={autofillStyles}\n            />\n            {extractedPostfix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__postfix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                      typeof extractedPostfix !== 'string',\n                  }\n                )}\n              >\n                {extractedPostfix}\n              </span>\n            )}\n            {showButtons && (\n              <div className={textFieldStyles['sapphire-text-field__stepper']}>\n                <StepperButton\n                  variant=\"decrement\"\n                  size={size}\n                  {...decrementButtonProps}\n                />\n                <Separator orientation=\"vertical\" />\n                <StepperButton\n                  variant=\"increment\"\n                  size={size}\n                  {...incrementButtonProps}\n                />\n              </div>\n            )}\n          </div>\n        </Field.Control>\n        {((error && typeof error !== 'boolean') || note) && (\n          <Field.Footer>\n            {error && typeof error !== 'boolean' ? (\n              <Field.Note variant=\"error\">{error}</Field.Note>\n            ) : note ? (\n              note\n            ) : (\n              <></>\n            )}\n          </Field.Footer>\n        )}\n      </Field.Context>\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":["NumberField"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperButton.js","sources":["../../../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria/useButton';\nimport { useHover } from 'react-aria/useHover';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { Add, Subtract } from '@danske/sapphire-icons/react';\nimport { useFocusRing } from 'react-aria/useFocusRing';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'lg' | 'md';\n}): React.JSX.Element => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  return (\n    <button\n      {...mergeProps(\n        buttonProps,\n        hoverProps,\n        focusProps,\n        filterDOMProps(props, { global: true })\n      )}\n      tabIndex={0} // tabIndex comes as \"-1\" from the react-aria hook\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n          [styles['is-focus']]: isFocusVisible,\n        }\n      )}\n    >\n      <Icon size={size === 'lg' ? 'md' : 'sm'}>\n        {variant === 'increment' ? <Add /> : <Subtract />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;AAcO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAGyB;AACvB,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAA,EAAU,GAAI,SAAA,CAAU,OAAO,GAAG,CAAA;AACvD,EAAA,MAAM,EAAE,YAAY,SAAA,EAAU,GAAI,SAAS,EAAE,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAC3E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,YAAA,EAAa;AAEpD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,QACF,WAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM;AAAA,OACxC;AAAA,MACA,QAAA,EAAU,CAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACTA,gBAAO,qCAAqC,CAAA;AAAA,QAC5CA,gBAAO,UAAU,CAAA;AAAA,QACjB;AAAA,UACE,CAACA,eAAA,CAAO,WAAW,CAAC,GAAG,SAAA;AAAA,UACvB,CAACA,eAAA,CAAO,UAAU,CAAC,GAAG,SAAA;AAAA,UACtB,CAACA,eAAA,CAAO,UAAU,CAAC,GAAG;AAAA;AACxB;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,KAAS,OAAO,IAAA,GAAO,IAAA,EAAA,EAChC,OAAA,KAAY,WAAA,mBAAc,KAAA,CAAA,aAAA,CAAC,GAAA,EAAA,IAAI,CAAA,mBAAK,KAAA,CAAA,aAAA,CAAC,cAAS,CACjD;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"cursorHelpers.js","sources":["../../../../../../src/NumberField/src/cursorHelpers.ts"],"sourcesContent":["/**\n * Check if the input type is a delete operation\n */\nexport const isDeleteOperation = (inputType: string): boolean => {\n  return (\n    inputType === 'deleteContentBackward' ||\n    inputType === 'deleteContentForward'\n  );\n};\n\n/**\n * Calculate the correct cursor position after formatting is applied.\n *\n * @param oldValue - The unformatted value (what's in input before formatting)\n * @param newValue - The formatted value (what we're replacing it with)\n * @param oldCursor - The cursor position in the unformatted value\n * @param inputType - The input type from InputEvent\n * @param decimalSeparator - The decimal separator character\n * @param numericValue - The parsed numeric value (optional, used for special decimal handling)\n * @returns The new cursor position in the formatted value\n */\nexport const calculateCursorPosition = (\n  oldValue: string,\n  newValue: string,\n  oldCursor: number,\n  inputType: string,\n  decimalSeparator: string,\n  numericValue?: number | null\n): number => {\n  // For empty values, position at start\n  if (!newValue) return 0;\n\n  // Find decimal positions\n  const oldDecimalPos = oldValue.indexOf(decimalSeparator);\n  const newDecimalPos = newValue.indexOf(decimalSeparator);\n\n  // Special handling: if numeric value is 0 and user performed a delete operation\n  // Position cursor at the start (before the 0) to allow easy re-typing\n  if (numericValue === 0 && isDeleteOperation(inputType)) {\n    return 0;\n  }\n\n  // Count digits before cursor in the appropriate section\n  const countDigits = (str: string, start: number, end: number): number => {\n    let count = 0;\n    for (let i = start; i < end; i++) {\n      if (/[0-9]/.test(str[i])) count++;\n    }\n    return count;\n  };\n\n  // If user was at decimal position in old value and deleted it, position cursor before decimal in new formatted value\n  if (\n    isDeleteOperation(inputType) &&\n    oldDecimalPos >= 0 &&\n    oldCursor === oldDecimalPos &&\n    newDecimalPos >= 0\n  ) {\n    return newDecimalPos;\n  }\n\n  // Cursor is in decimal part\n  if (oldDecimalPos >= 0 && oldCursor > oldDecimalPos && newDecimalPos >= 0) {\n    const digitsBeforeCursor = countDigits(\n      oldValue,\n      oldDecimalPos + 1,\n      oldCursor\n    );\n    let digitCount = 0;\n    for (let i = newDecimalPos + 1; i < newValue.length; i++) {\n      if (/[0-9]/.test(newValue[i]) && ++digitCount === digitsBeforeCursor) {\n        return i + 1;\n      }\n    }\n    return newDecimalPos + 1;\n  }\n\n  // Cursor is in integer part\n  const oldEnd = oldDecimalPos >= 0 ? oldDecimalPos : oldValue.length;\n  const newEnd = newDecimalPos >= 0 ? newDecimalPos : newValue.length;\n  const intDigitsBeforeCursor = countDigits(\n    oldValue,\n    0,\n    Math.min(oldCursor, oldEnd)\n  );\n\n  if (intDigitsBeforeCursor === 0) {\n    // Cursor was at start - special handling for delete operations\n    if (isDeleteOperation(inputType)) {\n      for (let i = 0; i < newValue.length; i++) {\n        if (/[0-9]/.test(newValue[i])) return i + 1;\n      }\n    }\n    return 0;\n  }\n\n  // Find position after same number of integer digits\n  let digitCount = 0;\n  for (let i = 0; i < newEnd; i++) {\n    if (/[0-9]/.test(newValue[i]) && ++digitCount === intDigitsBeforeCursor) {\n      return i + 1;\n    }\n  }\n\n  return newDecimalPos >= 0 ? newDecimalPos : newValue.length;\n};\n"],"names":["digitCount"],"mappings":"AAGO,MAAM,iBAAA,GAAoB,CAAC,SAAA,KAA+B;AAC/D,EAAA,OACE,SAAA,KAAc,2BACd,SAAA,KAAc,sBAAA;AAElB;AAaO,MAAM,0BAA0B,CACrC,QAAA,EACA,UACA,SAAA,EACA,SAAA,EACA,kBACA,YAAA,KACW;AAEX,EAAA,IAAI,CAAC,UAAU,OAAO,CAAA;AAGtB,EAAA,MAAM,aAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,gBAAgB,CAAA;AACvD,EAAA,MAAM,aAAA,GAAgB,QAAA,CAAS,OAAA,CAAQ,gBAAgB,CAAA;AAIvD,EAAA,IAAI,YAAA,KAAiB,CAAA,IAAK,iBAAA,CAAkB,SAAS,CAAA,EAAG;AACtD,IAAA,OAAO,CAAA;AAAA,EACT;AAGA,EAAA,MAAM,WAAA,GAAc,CAAC,GAAA,EAAa,KAAA,EAAe,GAAA,KAAwB;AACvE,IAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,IAAA,KAAA,IAAS,CAAA,GAAI,KAAA,EAAO,CAAA,GAAI,GAAA,EAAK,CAAA,EAAA,EAAK;AAChC,MAAA,IAAI,OAAA,CAAQ,IAAA,CAAK,GAAA,CAAI,CAAC,CAAC,CAAA,EAAG,KAAA,EAAA;AAAA,IAC5B;AACA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAGA,EAAA,IACE,iBAAA,CAAkB,SAAS,CAAA,IAC3B,aAAA,IAAiB,KACjB,SAAA,KAAc,aAAA,IACd,iBAAiB,CAAA,EACjB;AACA,IAAA,OAAO,aAAA;AAAA,EACT;AAGA,EAAA,IAAI,aAAA,IAAiB,CAAA,IAAK,SAAA,GAAY,aAAA,IAAiB,iBAAiB,CAAA,EAAG;AACzE,IAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,MACzB,QAAA;AAAA,MACA,aAAA,GAAgB,CAAA;AAAA,MAChB;AAAA,KACF;AACA,IAAA,IAAIA,WAAAA,GAAa,CAAA;AACjB,IAAA,KAAA,IAAS,IAAI,aAAA,GAAgB,CAAA,EAAG,CAAA,GAAI,QAAA,CAAS,QAAQ,CAAA,EAAA,EAAK;AACxD,MAAA,IAAI,OAAA,CAAQ,KAAK,QAAA,CAAS,CAAC,CAAC,CAAA,IAAK,EAAEA,gBAAe,kBAAA,EAAoB;AACpE,QAAA,OAAO,CAAA,GAAI,CAAA;AAAA,MACb;AAAA,IACF;AACA,IAAA,OAAO,aAAA,GAAgB,CAAA;AAAA,EACzB;AAGA,EAAA,MAAM,MAAA,GAAS,aAAA,IAAiB,CAAA,GAAI,aAAA,GAAgB,QAAA,CAAS,MAAA;AAC7D,EAAA,MAAM,MAAA,GAAS,aAAA,IAAiB,CAAA,GAAI,aAAA,GAAgB,QAAA,CAAS,MAAA;AAC7D,EAAA,MAAM,qBAAA,GAAwB,WAAA;AAAA,IAC5B,QAAA;AAAA,IACA,CAAA;AAAA,IACA,IAAA,CAAK,GAAA,CAAI,SAAA,EAAW,MAAM;AAAA,GAC5B;AAEA,EAAA,IAAI,0BAA0B,CAAA,EAAG;AAE/B,IAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,MAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,QAAA,CAAS,QAAQ,CAAA,EAAA,EAAK;AACxC,QAAA,IAAI,QAAQ,IAAA,CAAK,QAAA,CAAS,CAAC,CAAC,CAAA,SAAU,CAAA,GAAI,CAAA;AAAA,MAC5C;AAAA,IACF;AACA,IAAA,OAAO,CAAA;AAAA,EACT;AAGA,EAAA,IAAI,UAAA,GAAa,CAAA;AACjB,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,MAAA,EAAQ,CAAA,EAAA,EAAK;AAC/B,IAAA,IAAI,OAAA,CAAQ,KAAK,QAAA,CAAS,CAAC,CAAC,CAAA,IAAK,EAAE,eAAe,qBAAA,EAAuB;AACvE,MAAA,OAAO,CAAA,GAAI,CAAA;AAAA,IACb;AAAA,EACF;AAEA,EAAA,OAAO,aAAA,IAAiB,CAAA,GAAI,aAAA,GAAgB,QAAA,CAAS,MAAA;AACvD;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"formatHelpers.js","sources":["../../../../../../src/NumberField/src/formatHelpers.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\n/** Extract separators from Intl.NumberFormat */\nexport const getSeparators = (formatter: Intl.NumberFormat) => {\n  const parts = formatter.formatToParts(1000.1);\n  const groupSeparator = parts.find((p) => p.type === 'group')?.value ?? ',';\n  let decimalSeparator = parts.find((p) => p.type === 'decimal')?.value;\n\n  // Percentage formatters don't show decimals, so detect from a plain formatter\n  if (!decimalSeparator) {\n    const locale = formatter.resolvedOptions().locale;\n    const plainFormatter = new Intl.NumberFormat(locale);\n    decimalSeparator =\n      plainFormatter.formatToParts(1.1).find((p) => p.type === 'decimal')\n        ?.value ?? '.';\n  }\n\n  return { groupSeparator, decimalSeparator };\n};\n\n/** Extract only numeric parts (digits, group/decimal separators) from unformatted number */\nexport const trimSymbol = (\n  value: string,\n  symbol: string | undefined\n): string => {\n  if (!symbol) return value;\n  if (value.startsWith(symbol)) {\n    return value.slice(symbol.length).trimStart();\n  } else if (value.endsWith(symbol)) {\n    return value.slice(0, -symbol.length).trimEnd();\n  }\n  return value;\n};\n\n/**\n * Parse numeric value from user input string.\n * Handles edge cases and converts percentage display values to actual values.\n */\nexport const parseNumericValue = (\n  value: string,\n  decimalSeparator: string,\n  formatter?: Intl.NumberFormat\n): number | null => {\n  if (!value || value === '-') return null;\n\n  // Remove all non-numeric characters except decimal separator and minus\n  const cleaned = value.replace(\n    new RegExp(`[^0-9${decimalSeparator}\\\\-]`, 'g'),\n    ''\n  );\n  if (!cleaned) return null;\n\n  // Normalize minus sign (keep only if at start)\n  const hasLeadingMinus = cleaned.startsWith('-');\n  const withoutMinus = cleaned.replace(/-/g, '');\n  const normalized = hasLeadingMinus ? '-' + withoutMinus : withoutMinus;\n\n  // Normalize decimal separator (keep only first occurrence)\n  const parts = normalized.split(decimalSeparator);\n  const withStandardDecimal =\n    parts.length > 1\n      ? parts[0] + '.' + parts.slice(1).join('')\n      : normalized.replace(decimalSeparator, '.');\n\n  let parsed = parseFloat(withStandardDecimal);\n  if (isNaN(parsed)) return null;\n\n  // Convert percentage display value (25) to actual value (0.25)\n  if (formatter?.resolvedOptions().style === 'percent') {\n    parsed /= 100;\n  }\n\n  return parsed;\n};\n\n/**\n * Format user input string with locale-aware separators.\n * Optionally strips currency/unit/percent symbols for display.\n */\nexport const formatNumberString = (\n  value: string,\n  formatter: Intl.NumberFormat,\n  decimalSeparator: string,\n  shouldStripSymbols: boolean,\n  symbol?: string\n): string => {\n  // Allow typing special characters\n  if (!value || value === '-' || value === decimalSeparator) {\n    return value;\n  }\n\n  // Preserve trailing decimal separator for ongoing input\n  const hasTrailingDecimal = value.endsWith(decimalSeparator);\n\n  const numericValue = parseNumericValue(value, decimalSeparator, formatter);\n\n  // Fallback: return cleaned value if parsing fails\n  if (numericValue === null) {\n    return value.replace(new RegExp(`[^0-9${decimalSeparator}\\\\-]`, 'g'), '');\n  }\n\n  try {\n    const formatted = formatter.format(numericValue);\n    const result =\n      shouldStripSymbols && symbol ? trimSymbol(formatted, symbol) : formatted;\n\n    // Re-append trailing decimal separator to allow continued typing\n    return hasTrailingDecimal && !result.includes(decimalSeparator)\n      ? result + decimalSeparator\n      : result;\n  } catch (_) {\n    return value;\n  }\n};\n\n/** Check if part is a symbol that should be extracted */\nconst isSymbol = (type: string) =>\n  ['currency', 'unit', 'percentSign'].includes(type);\n\nexport interface SymbolExtractionInfo {\n  extractedPrefix: ReactNode;\n  extractedPostfix: ReactNode;\n  symbol?: string;\n}\n\n/** Check if parts start or end with a symbol */\nconst hasSymbolAt = (\n  parts: Intl.NumberFormatPart[],\n  start: boolean\n): boolean => {\n  const [first, second] = start\n    ? [parts[0], parts[1]]\n    : [parts[parts.length - 1], parts[parts.length - 2]];\n  return (\n    isSymbol(first?.type) ||\n    (first?.type === 'literal' && isSymbol(second?.type))\n  );\n};\n\n/**\n * Extract currency/unit/percent symbols and determine their position.\n *\n * If user has provided custom prefix/postfix, those will be used instead of extracted ones.\n */\nexport const extractSymbol = (\n  formatter: Intl.NumberFormat,\n  prefix?: ReactNode,\n  postfix?: ReactNode\n): SymbolExtractionInfo => {\n  const parts = formatter.formatToParts(1000.1);\n\n  const extractedPrefix = hasSymbolAt(parts, true)\n    ? parts.find((part) => isSymbol(part.type))?.value || null\n    : null;\n  const extractedPostfix = hasSymbolAt(parts, false)\n    ? [...parts].reverse().find((part) => isSymbol(part.type))?.value || null\n    : null;\n\n  return prefix !== undefined || postfix !== undefined\n    ? {\n        extractedPrefix: prefix,\n        extractedPostfix: postfix,\n        symbol: extractedPrefix || extractedPostfix || undefined,\n      }\n    : {\n        extractedPrefix,\n        extractedPostfix,\n        symbol: extractedPrefix || extractedPostfix || undefined,\n      };\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardHelpers.js","sources":["../../../../../../src/NumberField/src/keyboardHelpers.ts"],"sourcesContent":["import { RefObject } from 'react';\n\n/** Escape special regex characters */\nconst escapeRegExp = (str: string): string =>\n  str.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n\n/** Extract suffix (non-numeric trailing characters) from value */\nconst getSuffix = (\n  value: string,\n  groupSeparator: string,\n  decimalSeparator: string\n): string | undefined => {\n  const suffixReg = new RegExp(\n    `\\\\d([^${escapeRegExp(groupSeparator)}${escapeRegExp(\n      decimalSeparator\n    )}0-9]+)`\n  );\n  return value.match(suffixReg)?.[1];\n};\n\ninterface HandleKeyDownParams {\n  event: React.KeyboardEvent<HTMLInputElement>;\n  inputRef: RefObject<HTMLInputElement>;\n  groupSeparator: string;\n  decimalSeparator: string;\n  onOriginalKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n}\n\n/**\n * Handle keyboard events for number field input.\n * Manages special behaviors for separators, navigation, and deletion.\n */\nexport function handleNumberFieldKeyDown({\n  event,\n  inputRef,\n  groupSeparator,\n  decimalSeparator,\n  onOriginalKeyDown,\n}: HandleKeyDownParams): void {\n  const { key } = event;\n  const input = event.currentTarget;\n  const { selectionStart, value } = input;\n\n  if (selectionStart === null) {\n    onOriginalKeyDown?.(event);\n    return;\n  }\n\n  // Handle typing a digit at the start when value is 0\n  // Example: \"|0.00\" → user types \"7\" → becomes \"7.00\" (replace, not insert)\n  if (/^[0-9]$/.test(key)) {\n    const decimalPos = value.indexOf(decimalSeparator);\n\n    // Check if cursor is at the start and the integer part is just \"0\"\n    if (selectionStart === 0) {\n      // Extract the integer part (everything before decimal separator)\n      const integerPart = decimalPos >= 0 ? value.slice(0, decimalPos) : value;\n\n      // Remove group separators to check if it's just \"0\"\n      const cleanedInteger = integerPart.replace(\n        new RegExp(escapeRegExp(groupSeparator), 'g'),\n        ''\n      );\n\n      if (cleanedInteger === '0') {\n        event.preventDefault();\n\n        // Replace the \"0\" with the typed digit\n        const newValue = key + (decimalPos >= 0 ? value.slice(decimalPos) : '');\n        input.value = newValue;\n\n        // Position cursor after the typed digit\n        input.setSelectionRange(1, 1);\n\n        // Trigger input event to reformat\n        const inputEvent = new Event('input', { bubbles: true });\n        input.dispatchEvent(inputEvent);\n        return;\n      }\n    }\n  }\n\n  // Handle typing decimal separator to navigate to decimal part\n  // Example: \"123|.00\" → user types \".\" → cursor moves to \"123.|00\"\n  if (key === decimalSeparator) {\n    const decimalPos = value.indexOf(decimalSeparator);\n\n    // If decimal exists and cursor is before it, jump to after decimal\n    if (decimalPos >= 0 && selectionStart <= decimalPos) {\n      event.preventDefault();\n      input.setSelectionRange(decimalPos + 1, decimalPos + 1);\n      return;\n    }\n  }\n\n  // Handle Backspace when cursor is right after a group separator\n  // Example: \"1,|234\" with Backspace should delete '1', not ','\n  if (\n    key === 'Backspace' &&\n    selectionStart > 0 &&\n    value[selectionStart - 1] === groupSeparator\n  ) {\n    event.preventDefault();\n\n    // Find the digit before the separator\n    let deletePos = selectionStart - 2;\n    while (deletePos >= 0 && value[deletePos] === groupSeparator) {\n      deletePos--;\n    }\n\n    if (deletePos >= 0) {\n      // Delete the digit and let formatting handle the rest\n      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);\n      input.value = newValue;\n\n      // Set cursor position before the separator that was after the deleted digit\n      input.setSelectionRange(deletePos, deletePos);\n\n      // Trigger input event to reformat\n      const inputEvent = new Event('input', { bubbles: true });\n      input.dispatchEvent(inputEvent);\n    }\n    return;\n  }\n\n  // Handle Backspace when cursor is right after decimal separator\n  // Example: \"123.|00\" with Backspace should delete '3', not '.'\n  if (\n    key === 'Backspace' &&\n    selectionStart > 0 &&\n    value[selectionStart - 1] === decimalSeparator\n  ) {\n    event.preventDefault();\n\n    // Find the digit before the decimal separator\n    let deletePos = selectionStart - 2;\n    while (deletePos >= 0 && value[deletePos] === groupSeparator) {\n      deletePos--;\n    }\n\n    if (deletePos >= 0) {\n      // Delete the digit and let formatting handle the rest\n      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);\n      input.value = newValue;\n\n      // Set cursor position at the decimal separator (which shifted left by 1)\n      const decimalPos = newValue.indexOf(decimalSeparator);\n      if (decimalPos >= 0) {\n        input.setSelectionRange(decimalPos, decimalPos);\n      }\n\n      // Trigger input event to reformat\n      const inputEvent = new Event('input', { bubbles: true });\n      input.dispatchEvent(inputEvent);\n    }\n    return;\n  }\n\n  // Handle Delete when cursor is right before a group separator\n  // Example: \"1|,234\" with Delete should delete '2', not ','\n  if (key === 'Delete' && value[selectionStart] === groupSeparator) {\n    event.preventDefault();\n\n    // Find the digit after the separator\n    let deletePos = selectionStart + 1;\n    while (deletePos < value.length && value[deletePos] === groupSeparator) {\n      deletePos++;\n    }\n\n    if (deletePos < value.length) {\n      // Delete the digit and let formatting handle the rest\n      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);\n      input.value = newValue;\n\n      // Keep cursor at the same position (before the separator)\n      input.setSelectionRange(selectionStart, selectionStart);\n\n      // Trigger input event to reformat\n      const inputEvent = new Event('input', { bubbles: true });\n      input.dispatchEvent(inputEvent);\n    }\n    return;\n  }\n\n  // Handle Delete when cursor is right before decimal separator\n  // Example: \"123|.00\" with Delete should delete '0' (first decimal digit), not '.'\n  if (key === 'Delete' && value[selectionStart] === decimalSeparator) {\n    event.preventDefault();\n\n    // Find the first digit after the separator\n    let deletePos = selectionStart + 1;\n    while (deletePos < value.length && !/[0-9]/.test(value[deletePos])) {\n      deletePos++;\n    }\n\n    if (deletePos < value.length) {\n      // Delete the digit and let formatting handle the rest\n      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);\n      input.value = newValue;\n\n      // Keep cursor at the decimal separator\n      input.setSelectionRange(selectionStart, selectionStart);\n\n      // Trigger input event to reformat\n      const inputEvent = new Event('input', { bubbles: true });\n      input.dispatchEvent(inputEvent);\n    }\n    return;\n  }\n\n  // Prevent cursor from entering suffix area (skip for arrow keys and empty values)\n  if (key !== 'ArrowUp' && key !== 'ArrowDown' && value !== '-') {\n    const suffix = getSuffix(value, groupSeparator, decimalSeparator);\n\n    if (suffix && selectionStart > value.length - suffix.length) {\n      const suffixStartPos = value.length - suffix.length;\n      inputRef.current?.setSelectionRange(suffixStartPos, suffixStartPos);\n    }\n  }\n\n  onOriginalKeyDown?.(event);\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAutofillStyle.js","sources":["../../../../../../src/NumberField/src/useAutofillStyle.ts"],"sourcesContent":["import { CSSProperties, RefObject, useState } from 'react';\n\ninterface UseAutofillStyle {\n  autofillStyles: CSSProperties;\n  updateStyle: () => void;\n}\n\n//Copied from TextFieldBase, once NumberField moves into Core, this file can be removed and the import updated\nexport function useAutofillStyle<T>(\n  inputRef: RefObject<\n    T extends 'input' ? HTMLInputElement : HTMLTextAreaElement\n  >\n): UseAutofillStyle {\n  const [styles, setStyles] = useState<CSSProperties>({});\n\n  const updateStyle = () => {\n    const input = inputRef.current;\n    if (input) {\n      const color = window.getComputedStyle(input).backgroundColor;\n\n      setStyles({\n        boxShadow: `-100px 0 ${color}, 100px 0 ${color}`,\n      });\n    }\n  };\n\n  return {\n    autofillStyles: styles,\n    updateStyle,\n  };\n}\n"],"names":[],"mappings":";;AAQO,SAAS,iBACd,QAAA,EAGkB;AAClB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAA,CAAwB,EAAE,CAAA;AAEtD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AACvB,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,gBAAA,CAAiB,KAAK,CAAA,CAAE,eAAA;AAE7C,MAAA,SAAA,CAAU;AAAA,QACR,SAAA,EAAW,CAAA,SAAA,EAAY,KAAK,CAAA,UAAA,EAAa,KAAK,CAAA;AAAA,OAC/C,CAAA;AAAA,IACH;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,cAAA,EAAgB,MAAA;AAAA,IAChB;AAAA,GACF;AACF;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNumberFieldFormatting.js","sources":["../../../../../../src/NumberField/src/useNumberFieldFormatting.ts"],"sourcesContent":["import {\n  useMemo,\n  useCallback,\n  RefObject,\n  ReactNode,\n  useRef,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport {\n  getSeparators,\n  parseNumericValue,\n  formatNumberString,\n  trimSymbol,\n  extractSymbol,\n} from './formatHelpers';\nimport { calculateCursorPosition } from './cursorHelpers';\nimport { handleNumberFieldKeyDown } from './keyboardHelpers';\n\ninterface UseNumberFieldFormattingParams {\n  inputRef: RefObject<HTMLInputElement>;\n  formatter: Intl.NumberFormat;\n  inputValue: string;\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  onOriginalKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onChange?: (value: number) => void;\n  autoFormat: boolean;\n}\n\ninterface UseNumberFieldFormattingReturn {\n  displayValue: string;\n  extractedPrefix: ReactNode;\n  extractedPostfix: ReactNode;\n  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;\n  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * Hook for number field formatting with locale-aware separators and cursor management.\n * Handles currency/unit extraction, number formatting, and maintains correct cursor position.\n * When autoFormat is false, returns original values without any computation.\n */\nexport function useNumberFieldFormatting({\n  inputRef,\n  formatter,\n  inputValue,\n  prefix,\n  postfix,\n  onOriginalKeyDown,\n  onChange,\n  autoFormat,\n}: UseNumberFieldFormattingParams): UseNumberFieldFormattingReturn {\n  const { groupSeparator, decimalSeparator } = useMemo(\n    () => getSeparators(formatter),\n    [formatter]\n  );\n\n  const [formattedValue, setFormattedValue] = useState<string>('');\n\n  // Extract and position currency/unit symbols\n  const symbolInfo = useMemo(\n    () => extractSymbol(formatter, prefix, postfix),\n    [formatter, prefix, postfix]\n  );\n\n  const { extractedPrefix, extractedPostfix, symbol } = symbolInfo;\n\n  // Track cursor position to restore after React updates the value\n  const cursorPositionRef = useRef<number | null>(null);\n\n  // Format the input value for display\n  const displayValue = useMemo(() => {\n    const numericValue = parseNumericValue(\n      inputValue,\n      decimalSeparator,\n      formatter\n    );\n    if (numericValue === null) return inputValue;\n\n    try {\n      const trimmedValue = trimSymbol(inputValue, symbol) || inputValue;\n      return autoFormat ? formattedValue || trimmedValue : trimmedValue;\n    } catch {\n      return inputValue;\n    }\n  }, [\n    inputValue,\n    symbol,\n    formatter,\n    decimalSeparator,\n    autoFormat,\n    formattedValue,\n  ]);\n\n  // Restore cursor position after value changes\n  useLayoutEffect(() => {\n    if (cursorPositionRef.current !== null && inputRef.current) {\n      inputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [displayValue, inputRef]);\n\n  // Handle input with formatting and cursor management\n  const handleInput = useCallback(\n    (e: React.FormEvent<HTMLInputElement>): void => {\n      if (!autoFormat) return;\n\n      const input = e.currentTarget;\n      const { value, selectionStart } = input;\n      const inputType = (e.nativeEvent as InputEvent).inputType || '';\n      const shouldStrip = !!symbol;\n\n      /**\n       * Check if we're exceeding maximum decimal places when typing at the end.\n       * For example, with max 2 decimals, having \"12,34|\" and typing \"5\" should be prevented.\n       */\n      //#region Prevent excess decimals\n      const maxFractionDigits =\n        formatter.resolvedOptions().maximumFractionDigits || 0;\n      const decimalIndex = value.indexOf(decimalSeparator);\n\n      if (decimalIndex !== -1 && selectionStart !== null) {\n        // Count decimal digits in the new value\n        const decimalPart = value\n          .slice(decimalIndex + 1)\n          .replace(new RegExp(`[^0-9]`, 'g'), '');\n        const prevDecimalIndex = displayValue.indexOf(decimalSeparator);\n        const prevDecimalLength =\n          prevDecimalIndex !== -1\n            ? displayValue.slice(prevDecimalIndex + 1).length\n            : 0;\n\n        // If we have more decimals than allowed and cursor was at the end of decimals, prevent and restore\n        if (\n          decimalPart.length > maxFractionDigits &&\n          selectionStart > decimalIndex + 1 + prevDecimalLength\n        ) {\n          e.preventDefault();\n          // Store cursor position to restore after React's update\n          cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;\n          return;\n        }\n      }\n      //#endregion Prevent excess decimals\n\n      const formattedValue = formatNumberString(\n        value,\n        formatter,\n        decimalSeparator,\n        shouldStrip,\n        symbol\n      );\n\n      setFormattedValue(formattedValue);\n\n      const numericValue = parseNumericValue(\n        formattedValue,\n        decimalSeparator,\n        formatter\n      );\n\n      // Calculate and store cursor position for restoration after React's update\n      if (\n        formattedValue !== value &&\n        formattedValue !== '' &&\n        selectionStart !== null\n      ) {\n        const newCursorPosition = calculateCursorPosition(\n          value,\n          formattedValue,\n          selectionStart,\n          inputType,\n          decimalSeparator,\n          numericValue\n        );\n\n        cursorPositionRef.current = newCursorPosition;\n      }\n\n      if (numericValue !== null) {\n        onChange?.(numericValue);\n      }\n    },\n    [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]\n  );\n\n  // Handle keydown for special key behaviors\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>): void => {\n      handleNumberFieldKeyDown({\n        event: e,\n        inputRef,\n        groupSeparator,\n        decimalSeparator,\n        onOriginalKeyDown,\n      });\n    },\n    [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]\n  );\n\n  return {\n    displayValue,\n    extractedPrefix,\n    extractedPostfix,\n    handleInput,\n    handleKeyDown,\n  };\n}\n"],"names":["formattedValue"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport {\n  AriaNumberFieldProps,\n  NumberFieldAria,\n  useNumberField,\n} from 'react-aria/useNumberField';\nimport { useNumberFieldState } from 'react-stately/useNumberFieldState';\nimport { useLocale } from 'react-aria/I18nProvider';\n\nexport interface SapphireNumberFieldProps\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  extends Pick<\n    AriaNumberFieldProps,\n    | 'label'\n    | 'isDisabled'\n    | 'isRequired'\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'incrementAriaLabel'\n    | 'decrementAriaLabel'\n    | 'onFocus'\n    | 'onBlur'\n    | 'formatOptions'\n    | 'step'\n    | 'minValue'\n    | 'maxValue'\n    | 'placeholder'\n    | 'isReadOnly'\n    | 'autoFocus'\n    | 'onFocusChange'\n    | 'onKeyUp'\n    | 'onKeyDown'\n  > {\n  /**\n   * Whether the input should render as having an error and an error message.\n   * This also sets the appropriate `aria` attributes on the input.\n   *\n   * A `boolean` sets the error state.\n   * A `ReactNode` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**\n   */\n  error?: boolean | React.ReactNode;\n}\n\nexport const useSapphireNumberField = (\n  { error, ...numberFieldProps }: SapphireNumberFieldProps,\n  ref: RefObject<HTMLInputElement>\n): NumberFieldAria & { state: ReturnType<typeof useNumberFieldState> } => {\n  const { locale } = useLocale();\n  const numberFieldState = useNumberFieldState({\n    ...numberFieldProps,\n    locale,\n  });\n  const numberFieldAria = useNumberField(\n    {\n      ...numberFieldProps,\n      validationState:\n        error === false || error === undefined ? undefined : 'invalid',\n    },\n    numberFieldState,\n    ref\n  );\n\n  return { ...numberFieldAria, state: numberFieldState };\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,yBAAyB,CACpC,EAAE,OAAO,GAAG,gBAAA,IACZ,GAAA,KACwE;AACxE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,mBAAmB,mBAAA,CAAoB;AAAA,IAC3C,GAAG,gBAAA;AAAA,IACH;AAAA,GACD,CAAA;AACD,EAAA,MAAM,eAAA,GAAkB,cAAA;AAAA,IACtB;AAAA,MACE,GAAG,gBAAA;AAAA,MACH,eAAA,EACE,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU,SAAY,MAAA,GAAY;AAAA,KACzD;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,GAAG,eAAA,EAAiB,KAAA,EAAO,gBAAA,EAAiB;AACvD;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.js","sources":["../../../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from 'react-aria/useProgressBar';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\n/**\n * When users need a visual representation of how far along a process or operation is, either as a continuous bar or divided into discrete segments.\n */\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-progress'])}\n    >\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\n        aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n        aria-labelledby={\n          'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n        }\n      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8CO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,KACgB;AAChB,EAAA,MAAM;AAAA,IACJ,QAAA,GAAW,GAAA;AAAA,IACX,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,GAAW,CAAA;AAAA,IACX,gBAAA,EAAkB;AAAA,GACpB,GAAI,KAAA;AAEJ,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,cAAA,CAAe;AAAA,IAC1C,GAAG,KAAA;AAAA,IACH,QAAA,EAAU,CAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAA;AAEjB,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,SAAA,EAAW,QAAQ,GAAG,QAAQ,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAmB,QAAQ,QAAA,GAAY,GAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAmB,CAAC;AAAA,KAAA;AAAA,oBAE3C,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA;AAAA,QACJ,SAAA,EAAW,OAAO,8BAA8B,CAAA;AAAA,QAChD,OAAO,EAAE,GAAG,YAAY,KAAA,EAAO,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAI;AAAA,QACrD,YAAA,EAAY,YAAA,IAAgB,KAAA,GAAQ,KAAA,CAAM,YAAY,CAAA,GAAI,MAAA;AAAA,QAC1D,iBAAA,EACE,iBAAA,IAAqB,KAAA,GAAQ,KAAA,CAAM,iBAAiB,CAAA,GAAI;AAAA;AAAA,KAE5D;AAAA,IACC,QAAA,GAAW,qBACV,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,6BAA6B,CAAA,EAAA,EACjD,KAAA,CAAM,IAAA,CAAK,EAAE,QAAQ,QAAA,EAAS,EAAG,CAAC,CAAA,EAAG,KAAA,yCACnC,MAAA,EAAA,EAAK,GAAA,EAAK,KAAA,EAAO,CACnB,CACH;AAAA,GAEJ;AAEJ;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Body.js","sources":["../../../../../../src/Sidebar/src/Body.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport { useScrollCheck } from '@danske/sapphire-react';\n\nexport interface SidebarBodyProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'nav'\n   */\n  elementType?: string;\n  children?: ReactNode;\n}\n\nexport const SidebarBody = ({\n  elementType = 'nav',\n  children,\n  ...props\n}: SidebarBodyProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n  const sidebarBody = useRef<HTMLElement>(null);\n  const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);\n\n  return (\n    <RootNode\n      ref={sidebarBody}\n      tabIndex={\n        -1 /* Some browsers will make this focusable because it overflows */\n      }\n      className={clsx(styles['sapphire-sidebar__body'], {\n        [styles['sapphire-sidebar__body--scrolled']]: isScrolled,\n      })}\n      {...filterDOMProps(props, { global: true })}\n      {...scrollCheckProps}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2C;AACzC,EAAA,MAAM,QAAA,GAAW,WAAA;AACjB,EAAA,MAAM,WAAA,GAAc,OAAoB,IAAI,CAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,gBAAA,EAAiB,GAAI,eAAe,WAAW,CAAA;AAEnE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,QAAA,EACE,EAAA;AAAA,MAEF,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,QAChD,CAAC,MAAA,CAAO,kCAAkC,CAAC,GAAG;AAAA,OAC/C,CAAA;AAAA,MACA,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MACzC,GAAG;AAAA,KAAA;AAAA,IAEH;AAAA,GACH;AAEJ;;;;"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../../../../src/Sidebar/src/List.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\n\nexport interface SidebarListProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'ul'\n   */\n  elementType?: 'ul' | 'ol';\n  children?: ReactNode;\n}\n\nexport const SidebarList = ({\n  elementType = 'ul',\n  children,\n  ...props\n}: SidebarListProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n\n  return (\n    <RootNode\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-sidebar__nav-list'])}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;AAeO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA,GAAc,IAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2C;AACzC,EAAA,MAAM,QAAA,GAAW,WAAA;AAEjB,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC;AAAA,KAAA;AAAA,IAEnD;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../../../../../src/Sidebar/src/Panel.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from 'react';\nimport {\n  IconButton,\n  ModalLayout,\n  Panel,\n  PanelProps,\n  tokens,\n  View,\n} from '@danske/sapphire-react';\nimport { ChevronLeft } from '@danske/sapphire-icons/react';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarPanelProps = Omit<\n  PanelProps,\n  'isOpen' | 'size' | 'direction'\n> & { header: ReactNode };\n\nexport const SidebarPanel = ({\n  children,\n  header,\n  ...props\n}: SidebarPanelProps) => {\n  const { openedId, setOpenedId, content } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n\n  if (!responsiveContext) {\n    throw new Error(\n      '<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n\n  const { isPanelOpen, setPanelOpen } = responsiveContext;\n  const isCollapsed = useIsSidebarCollapsed();\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      // if breakpoint changes, we want to close the panel until opened manually again\n      setPanelOpen(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <Panel\n      {...props}\n      isOpen={isPanelOpen}\n      onClose={() => setPanelOpen(false)}\n      onCloseTransitionDone={() => setOpenedId(null)}\n      alignLeft\n      isDismissable\n      width={320}\n    >\n      <ModalLayout\n        header={\n          <ModalLayout.Header\n            heading={openedId === null ? header : content?.header}\n            backButton={\n              openedId !== null && (\n                <IconButton\n                  size=\"md\"\n                  aria-label=\"Back\"\n                  variant=\"tertiary\"\n                  marginLeft={`calc(-1 * ${tokens.size.spacingSm})`}\n                  onPress={() => setOpenedId(null)}\n                >\n                  <ChevronLeft />\n                </IconButton>\n              )\n            }\n          />\n        }\n        body={\n          <ModalLayout.Body\n            noPadding\n            UNSAFE_style={{\n              paddingLeft: tokens.size.spacingMd.value,\n              paddingRight: tokens.size.spacingMd.value,\n            }}\n          >\n            <>\n              <View isHidden={openedId !== null}>{children}</View>\n              {openedId && content?.body}\n            </>\n          </ModalLayout.Body>\n        }\n      />\n    </Panel>\n  );\n};\n\nexport const SidebarPanelTrigger = ({\n  children,\n}: {\n  children: (triggerProps: any) => JSX.Element;\n}) => {\n  const context = useResponsiveSidebarContext();\n  if (!context) {\n    throw new Error(\n      '<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n  const isCollapsed = useIsSidebarCollapsed();\n  const panelTriggerProps = {\n    onPress: () => {\n      context.setPanelOpen(true);\n    },\n  };\n\n  return isCollapsed ? children(panelTriggerProps) : null;\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveSidebarContext.js","sources":["../../../../../../src/Sidebar/src/ResponsiveSidebarContext.tsx"],"sourcesContent":["import { useControlledState } from 'react-stately/useControlledState';\nimport { BreakpointKey, useMatchedBreakpoints } from '@danske/sapphire-react';\nimport React, { ReactNode, useContext } from 'react';\n\nexport interface ResponsiveSidebarContextValue {\n  isPanelOpen: boolean;\n  setPanelOpen: (open: boolean) => void;\n  collapsed: boolean | BreakpointKey | undefined;\n}\n\nexport const ResponsiveSidebarContext =\n  React.createContext<ResponsiveSidebarContextValue | null>(null);\n\nexport function useResponsiveSidebarContext() {\n  return useContext(ResponsiveSidebarContext);\n}\n\n/**\n * Hook to determine if the sidebar should be collapsed.\n * Returns true if collapsed, false if expanded, or null if not in responsive mode.\n */\nexport function useIsSidebarCollapsed(): boolean | null {\n  const context = useContext(ResponsiveSidebarContext);\n  const matchedBreakpoints: string[] = useMatchedBreakpoints();\n\n  if (!context) {\n    return null;\n  }\n\n  const { collapsed } = context;\n\n  // If collapsed is a boolean, use it directly\n  if (typeof collapsed === 'boolean') {\n    return collapsed;\n  }\n\n  // If collapsed is a breakpoint string, check if we're below that breakpoint\n  if (typeof collapsed === 'string') {\n    return !matchedBreakpoints.includes(collapsed);\n  }\n\n  // If collapsed is undefined, default to 'md' breakpoint behavior\n  return !matchedBreakpoints.includes('md');\n}\n\nexport const ResponsiveSidebarProvider = ({\n  collapsed,\n  isPanelOpen,\n  defaultIsPanelOpen,\n  onPanelOpenChange,\n  children,\n}: {\n  /**\n   * Controls whether the sidebar is collapsed.\n   * - When `true`: sidebar is always collapsed (shows as panel)\n   * - When `false`: sidebar is always expanded (shows as sidebar)\n   * - When a breakpoint string (e.g., 'md', 'lg'): automatically collapses below that breakpoint\n   * - When `undefined`: defaults to 'md' breakpoint behavior (collapses below medium screens)\n   * @default undefined (equivalent to 'md')\n   */\n  collapsed?: boolean | BreakpointKey;\n\n  /**\n   * If the sidebar panel is open (controlled)\n   */\n  isPanelOpen?: boolean;\n\n  /**\n   * The default state of the panel (uncontrolled)\n   */\n  defaultIsPanelOpen?: boolean;\n\n  /**\n   * Callback for when the state of the panel changes\n   */\n  onPanelOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}) => {\n  const [isOpen, setOpen] = useControlledState<boolean>(\n    isPanelOpen,\n    defaultIsPanelOpen ?? false,\n    onPanelOpenChange\n  );\n\n  return (\n    <ResponsiveSidebarContext.Provider\n      value={{\n        isPanelOpen: isOpen,\n        setPanelOpen: setOpen,\n        collapsed,\n      }}\n    >\n      {children}\n    </ResponsiveSidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,wBAAA,GACX,KAAA,CAAM,aAAA,CAAoD,IAAI;AAEzD,SAAS,2BAAA,GAA8B;AAC5C,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;AAMO,SAAS,qBAAA,GAAwC;AACtD,EAAA,MAAM,OAAA,GAAU,WAAW,wBAAwB,CAAA;AACnD,EAAA,MAAM,qBAA+B,qBAAA,EAAsB;AAE3D,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAGtB,EAAA,IAAI,OAAO,cAAc,SAAA,EAAW;AAClC,IAAA,OAAO,SAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,cAAc,QAAA,EAAU;AACjC,IAAA,OAAO,CAAC,kBAAA,CAAmB,QAAA,CAAS,SAAS,CAAA;AAAA,EAC/C;AAGA,EAAA,OAAO,CAAC,kBAAA,CAAmB,QAAA,CAAS,IAAI,CAAA;AAC1C;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC,SAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAA,KA0BM;AACJ,EAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,kBAAA;AAAA,IACxB,WAAA;AAAA,IACA,kBAAA,IAAsB,KAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,MAAA;AAAA,QACb,YAAA,EAAc,OAAA;AAAA,QACd;AAAA;AACF,KAAA;AAAA,IAEC;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecondarySidebarContext.js","sources":["../../../../../../src/Sidebar/src/SecondarySidebarContext.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useState } from 'react';\nimport { ThemeVariant } from '@danske/sapphire-react';\nimport { useControlledState } from 'react-stately/useControlledState';\n\nexport type SecondarySidebarContent = {\n  header: ReactNode;\n  body: ReactNode;\n} | null;\n\nexport interface SecondarySidebarContextValue {\n  content: SecondarySidebarContent;\n  setContent: (content: SecondarySidebarContent) => void;\n  openedId: string | null;\n  setOpenedId: (id: string | null) => void;\n  themeVariant: ThemeVariant | undefined;\n}\n\nexport const SecondarySidebarContext =\n  React.createContext<SecondarySidebarContextValue | null>(null);\n\nexport const useSecondarySidebarContext = (): SecondarySidebarContextValue => {\n  const context = useContext(SecondarySidebarContext);\n  if (context) {\n    return context;\n  }\n  throw new Error('This should be rendered inside a <Sidebar />.');\n};\n\nexport const SecondarySidebarProvider = ({\n  openedId,\n  defaultOpenedId,\n  onOpenedIdChange,\n  themeVariant,\n  children,\n}: {\n  openedId?: string | null;\n  defaultOpenedId?: string | null;\n  onOpenedIdChange?: (id: string | null) => void;\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) => {\n  const context = useContext(SecondarySidebarContext);\n\n  const [secondarySidebarId, setSecondarySidebarId] = useControlledState<\n    string | null\n  >(openedId, defaultOpenedId ?? null, onOpenedIdChange);\n\n  const [content, setContent] = useState<SecondarySidebarContent>(null);\n\n  return (\n    <SecondarySidebarContext.Provider\n      value={{\n        openedId: context?.openedId ?? secondarySidebarId,\n        setOpenedId: context?.setOpenedId ?? setSecondarySidebarId,\n        content: context?.content ?? content,\n        setContent: context?.setContent ?? setContent,\n        themeVariant: themeVariant ?? context?.themeVariant,\n      }}\n    >\n      {children}\n    </SecondarySidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,uBAAA,GACX,KAAA,CAAM,aAAA,CAAmD,IAAI;AAExD,MAAM,6BAA6B,MAAoC;AAC5E,EAAA,MAAM,OAAA,GAAU,WAAW,uBAAuB,CAAA;AAClD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AACjE;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAMM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,uBAAuB,CAAA;AAElD,EAAA,MAAM,CAAC,oBAAoB,qBAAqB,CAAA,GAAI,mBAElD,QAAA,EAAU,eAAA,IAAmB,MAAM,gBAAgB,CAAA;AAErD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkC,IAAI,CAAA;AAEpE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA,CAAwB,QAAA;AAAA,IAAxB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,SAAS,QAAA,IAAY,kBAAA;AAAA,QAC/B,WAAA,EAAa,SAAS,WAAA,IAAe,qBAAA;AAAA,QACrC,OAAA,EAAS,SAAS,OAAA,IAAW,OAAA;AAAA,QAC7B,UAAA,EAAY,SAAS,UAAA,IAAc,UAAA;AAAA,QACnC,YAAA,EAAc,gBAAgB,OAAA,EAAS;AAAA;AACzC,KAAA;AAAA,IAEC;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../../../../src/Sidebar/src/Section.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useListBoxSection } from 'react-aria/useListBox';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\n\nexport type SidebarSectionProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Section title\n     * If not provided, please pass the `aria-label`\n     */\n    title?: string;\n\n    /**\n     * Section aria title\n     */\n    'aria-label'?: string;\n\n    children?: ReactNode;\n  };\n\nexport const SidebarSection = ({\n  title,\n  'aria-label': label,\n  children,\n  ...props\n}: SidebarSectionProps) => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: title,\n    'aria-label': label,\n  });\n\n  return (\n    <>\n      <li\n        role=\"separator\"\n        className={clsx(styles['sapphire-sidebar__separator'])}\n      ></li>\n      <li\n        {...itemProps}\n        {...styleProps}\n        {...filterDOMProps(props, { global: true })}\n      >\n        {title && (\n          <div\n            {...headingProps}\n            className={clsx(styles['sapphire-sidebar__section-header'])}\n          >\n            {title}\n          </div>\n        )}\n        <ul\n          {...groupProps}\n          className={clsx(styles['sapphire-sidebar__section'])}\n        >\n          {children}\n        </ul>\n      </li>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,YAAA,EAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,UAAA,KAAe,iBAAA,CAAkB;AAAA,IAChE,OAAA,EAAS,KAAA;AAAA,IACT,YAAA,EAAc;AAAA,GACf,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,6BAA6B,CAAC;AAAA;AAAA,GACtD,kBACD,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM;AAAA,KAAA;AAAA,IAEzC,KAAA,oBACC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC;AAAA,OAAA;AAAA,MAEzD;AAAA,KACH;AAAA,oBAEF,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,2BAA2B,CAAC;AAAA,OAAA;AAAA,MAElD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}

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

@@ -0,0 +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 } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { FocusWithinProps, useFocusWithin } from 'react-aria/useFocusWithin';\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":";;;;;;;;;;;;AA+GO,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/lab/src/Sidebar/src/useSidebar.js.map

@@ -0,0 +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,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/lab/src/Slider/index.js.map

@@ -0,0 +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":";;;AAGA,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,MAAA,EAAQ;AAAA,EACpC,MAAM,KAAA,CAAM;AACd,CAAC;;;;"}

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

@@ -0,0 +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\n/**\n * Lets users select a single numeric value within a defined range by dragging\n * a thumb along a track. Use it when precise value entry is less important than quick,\n * visual range selection (e.g. volume, brightness, or filter thresholds).\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":";;;;;;AAkDO,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/lab/src/TagGroup/src/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from 'react-aria/useButton';\nimport { useHover } from 'react-aria/useHover';\nimport { useTag } from 'react-aria/useTagGroup';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { mergeRefs } from 'react-aria/mergeRefs';\nimport type { ListState } from 'react-stately/useListState';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck, TooltipIfNeeded } from '@danske/sapphire-react';\nimport { Close, Error } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from 'react-aria/FocusRing';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n  /**\n   * Control whether the tag is removable or not.\n   * This behavior is overridden to `false` if the tag is disabled.\n   *\n   * @default false\n   */\n  allowsRemoving?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>): React.JSX.Element {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <TooltipIfNeeded<HTMLDivElement> title={item.rendered}>\n      {(tooltipRef, tooltipProps) => {\n        const { ref: tooltipTargetRef, ...restTooltipProps } =\n          tooltipProps || {};\n        return (\n          <FocusRing focusRingClass={styles['is-focus']}>\n            <div\n              ref={mergeRefs(ref, tooltipTargetRef)}\n              {...mergeProps(\n                {\n                  onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n                    /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n                  as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n                    if (e.key !== ' ') {\n                      onKeyDown?.(e);\n                    } else {\n                      e.preventDefault();\n                    }\n                  },\n                },\n                rowProps,\n                hoverProps,\n                restTooltipProps\n              )}\n              className={clsx(\n                styles['sapphire-tag'],\n                styles['js-focus'],\n                styles['js-hover'],\n                {\n                  [styles['sapphire-tag--actionable']]: hasAction,\n                  [styles['is-active']]: hasAction && isPressed,\n                  [styles['is-hover']]: hasAction && isHovered,\n                  [styles['is-disabled']]: isDisabled,\n                }\n              )}\n              {...(hasError ? { 'aria-invalid': true } : {})}\n            >\n              <div\n                {...gridCellProps}\n                className={styles['sapphire-tag__content']}\n              >\n                {hasError && !isDisabled && <IconError />}\n                <span\n                  ref={tooltipRef as React.Ref<HTMLSpanElement>}\n                  className={styles['sapphire-tag__label']}\n                >\n                  {item.rendered}\n                </span>\n                {!isDisabled && props.allowsRemoving && (\n                  <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n                )}\n              </div>\n            </div>\n          </FocusRing>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"sm\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"sm\">\n        <Error />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAsCO,SAAS,IAAO,KAAA,EAAuC;AAC5D,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,QAAA,GAAW,KAAA,EAAO,IAAA,EAAM,OAAM,GAAI,KAAA;AAC1C,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM;AAAA,IACJ,aAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA,EAAU,EAAE,SAAA,EAAW,GAAG,QAAA,EAAS;AAAA,IACnC,GAAG;AAAA,GACL,GAAI,MAAA,CAAO,KAAA,EAAO,KAAA,EAAO,GAAG,CAAA;AAC5B,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,KAAc,QAAA,CAAS,EAAE,YAAY,CAAA;AAGzD,EAAA,MAAM,YAAa,UAAA,CAAmB,SAAA;AAEtC,EAAA,2CACG,eAAA,EAAA,EAAgC,KAAA,EAAO,KAAK,QAAA,EAAA,EAC1C,CAAC,YAAY,YAAA,KAAiB;AAC7B,IAAA,MAAM,EAAE,GAAA,EAAK,gBAAA,EAAkB,GAAG,gBAAA,EAAiB,GACjD,gBAAgB,EAAC;AACnB,IAAA,uBACE,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,EAAU,cAAA,EAAgB,MAAA,CAAO,UAAU,CAAA,EAAA,kBAC1C,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA,CAAU,GAAA,EAAK,gBAAgB,CAAA;AAAA,QACnC,GAAG,UAAA;AAAA,UACF;AAAA,YACE,SAAA,EAAW,CAAC,CAAA,KAA6C;AAGvD,cAAA,IAAI,CAAA,CAAE,QAAQ,GAAA,EAAK;AACjB,gBAAA,SAAA,GAAY,CAAC,CAAA;AAAA,cACf,CAAA,MAAO;AACL,gBAAA,CAAA,CAAE,cAAA,EAAe;AAAA,cACnB;AAAA,YACF;AAAA,WACF;AAAA,UACA,QAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,cAAc,CAAA;AAAA,UACrB,OAAO,UAAU,CAAA;AAAA,UACjB,OAAO,UAAU,CAAA;AAAA,UACjB;AAAA,YACE,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,SAAA;AAAA,YACtC,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,SAAA,IAAa,SAAA;AAAA,YACpC,CAAC,MAAA,CAAO,UAAU,CAAC,GAAG,SAAA,IAAa,SAAA;AAAA,YACnC,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA;AAC3B,SACF;AAAA,QACC,GAAI,QAAA,GAAW,EAAE,cAAA,EAAgB,IAAA,KAAS;AAAC,OAAA;AAAA,sBAE5C,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,aAAA;AAAA,UACJ,SAAA,EAAW,OAAO,uBAAuB;AAAA,SAAA;AAAA,QAExC,QAAA,IAAY,CAAC,UAAA,oBAAc,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,IAAU,CAAA;AAAA,wBACvC,KAAA,CAAA,aAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,UAAA;AAAA,YACL,SAAA,EAAW,OAAO,qBAAqB;AAAA,WAAA;AAAA,UAEtC,IAAA,CAAK;AAAA,SACR;AAAA,QACC,CAAC,UAAA,IAAc,KAAA,CAAM,kCACpB,KAAA,CAAA,aAAA,CAAC,YAAA,EAAA,EAAc,GAAI,iBAAA,EAAuC;AAAA;AAE9D,KAEJ,CAAA;AAAA,EAEJ,CACF,CAAA;AAEJ;AAEA,SAAS,aAAa,iBAAA,EAAoC;AACxD,EAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAC7B,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,SAAA,CAAU,mBAAmB,SAAS,CAAA;AAC9D,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,sBAAsB,CAAA,EAAG,MAAA,CAAO,UAAU,CAAC;AAAA,KAAA;AAAA,wCAEjE,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAA,kBACT,KAAA,CAAA,aAAA,CAAC,WAAM,CACT;AAAA,GACF;AAEJ;AAEA,MAAM,YAAY,MAAM;AACtB,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,IAAA,CAAK,OAAO,0BAA0B,CAAC,CAAA,EAAA,kBACtD,KAAA,CAAA,aAAA,CAAC,QAAK,IAAA,EAAK,IAAA,EAAA,kBACT,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,IAAM,CACT,CACF,CAAA;AAEJ,CAAA;;;;"}