@danske/sapphire-react-lab 0.101.1 → 0.102.0

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\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 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 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  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\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    // We need to manually restore focus to trigger as apply button is a form submit button\n    triggerRef.current?.focus();\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          onSubmit={onSubmit}\n          className={styles['sapphire-filter-dropdown']}\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              <Button\n                size={buttonSize}\n                variant=\"text\"\n                onPress={() => {\n                  close();\n                  onClear?.();\n                }}\n                isDisabled={isClearDisabled ?? !hasValue}\n              >\n                {clearButtonLabel}\n              </Button>\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </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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"}
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent, filterDOMProps } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\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 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  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\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    // We need to manually restore focus to trigger as apply button is a form submit button\n    triggerRef.current?.focus();\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={styles['sapphire-filter-dropdown']}\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              <Button\n                size={buttonSize}\n                variant=\"text\"\n                onPress={() => {\n                  close();\n                  onClear?.();\n                }}\n                isDisabled={isClearDisabled ?? !hasValue}\n              >\n                {clearButtonLabel}\n              </Button>\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </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/src/SearchableSelectFilter.js

@@ -4,6 +4,7 @@ import '../../Accordion/index.js';
 import '@danske/sapphire-icons/react';
 import '@danske/sapphire-css/components/alert/alert.module.css';
 import 'clsx';
+import { mergeRefs } from '@react-aria/utils';
 import '@react-aria/combobox';
 import '@react-aria/i18n';
 import '@react-spectrum/utils';
@@ -13,7 +14,6 @@ import '../../Breadcrumbs/src/BreadcrumbItemLink.js';
 import '../../FileDropzone/src/FileDropzone.js';
 import '../../FileDropzone/src/FileTrigger.js';
 import { FilterDropdown } from './FilterDropdown.js';
-import { mergeRefs } from '@react-aria/utils';
 import { useControlledState } from '@react-stately/utils';
 import '../../Flag/src/Flag.js';
 import '@react-aria/label';

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

@@ -1 +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} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n  extends 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":"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"}
+{"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/utils';\nimport { useControlledState } from '@react-stately/utils';\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":"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"}

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

@@ -1 +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} from '@danske/sapphire-react';\n\nexport type FlagProps = 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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,IAAO,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,KAAA,CACnC,IACA,GACA,EAAA;AAFA,EAAE,IAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,GAAO,IAAM,EAAA,OAAA,EAAS,YAAc,EAAA,SAAA,EAAA,GAAtC,IAAoD,KAApD,GAAA,SAAA,CAAA,EAAA,EAAoD,CAAlD,MAAA,EAAa,SAAS,EAAA,YAAA,CAAA,CAAA,CAAA;AAGxB,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EAAA,OAAO,KAAM,CAAA,YAAA,CAAa,iBAAkB,CAAA,KAAA,CAAM,QAAW,CAAA,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IAC3D,GAAA;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GAAA,EACF,YAAY,EAAE,YAAA,EAAc,SAAc,EAAA,GAAA,EAAE,eAAe,IAHJ,EAAA,CAAA,EAAA;AAAA,IAI3D,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,eAAA,CAAA,EAAkB,WAAW,SAAW,EAAA;AAAA,MAC5D,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MAAA,CACvC,OAAO,wBAA4B,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAEtC,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,IAAO,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,KAAA,CACnC,IACA,GACA,EAAA;AAFA,EAAE,IAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,GAAO,IAAM,EAAA,OAAA,EAAS,YAAc,EAAA,SAAA,EAAA,GAAtC,IAAoD,KAApD,GAAA,SAAA,CAAA,EAAA,EAAoD,CAAlD,MAAA,EAAa,SAAS,EAAA,YAAA,CAAA,CAAA,CAAA;AAGxB,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EAAA,OAAO,KAAM,CAAA,YAAA,CAAa,iBAAkB,CAAA,KAAA,CAAM,QAAW,CAAA,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IAC3D,GAAA;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GAAA,EACF,YAAY,EAAE,YAAA,EAAc,SAAc,EAAA,GAAA,EAAE,eAAe,IAHJ,EAAA,CAAA,EAAA;AAAA,IAI3D,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,eAAA,CAAA,EAAkB,WAAW,SAAW,EAAA;AAAA,MAC5D,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MAAA,CACvC,OAAO,wBAA4B,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAEtC,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { mergeProps } from '@react-aria/utils';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n  children?: React.ReactNode;\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n}\n\nexport function LabeledValue({\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,SAAA,YAAA,CAAsB,EAOY,EAAA;AAPZ,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,IAAA;AAAA,GALoB,GAAA,EAAA,EAMxB,uBANwB,EAMxB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,YAAY,UAD7B,CAAA,CAAA,EAAA;AAAA,IAEE,cAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,GAAA,CAAA,kBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,KAGL,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,OAAA,EAAP,IAAgB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from '@react-aria/label';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { mergeProps } from '@react-aria/utils';\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,SAAA,YAAA,CAAsB,EAOY,EAAA;AAPZ,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,IAAA;AAAA,GALoB,GAAA,EAAA,EAMxB,uBANwB,EAMxB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,YAAY,UAD7B,CAAA,CAAA,EAAA;AAAA,IAEE,cAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,GAAA,CAAA,kBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,KAGL,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,OAAA,EAAP,IAAgB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -1 +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} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A HelpButton to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'lg',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(containerRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={containerRef}\n      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            {prefix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__prefix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                      typeof prefix !== 'string',\n                  }\n                )}\n              >\n                {prefix}\n              </span>\n            )}\n            <input\n              {...mergeProps(inputProps, focusProps, {\n                onChange: updateStyle,\n                onBlur: updateStyle,\n              })}\n              ref={inputRef}\n              className={clsx(textFieldStyles['sapphire-text-field__input'], {\n                [textFieldStyles['sapphire-text-field__input--align-right']]:\n                  !!alignInputRight,\n              })}\n              style={autofillStyles}\n            />\n            {postfix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__postfix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                      typeof postfix !== 'string',\n                  }\n                )}\n              >\n                {postfix}\n              </span>\n            )}\n            {showButtons && (\n              <div\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__stepper']\n                )}\n              >\n                <StepperButton\n                  variant=\"increment\"\n                  size={size}\n                  {...incrementButtonProps}\n                />\n                <StepperButton\n                  variant=\"decrement\"\n                  size={size}\n                  {...decrementButtonProps}\n                />\n              </div>\n            )}\n          </div>\n        </Field.Control>\n        {((error && 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":[],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  ForwardedRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A HelpButton to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'lg'\n   */\n  size?: 'lg' | 'md';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'lg',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(containerRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={containerRef}\n      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            {prefix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__prefix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                      typeof prefix !== 'string',\n                  }\n                )}\n              >\n                {prefix}\n              </span>\n            )}\n            <input\n              {...mergeProps(inputProps, focusProps, {\n                onChange: updateStyle,\n                onBlur: updateStyle,\n              })}\n              ref={inputRef}\n              className={clsx(textFieldStyles['sapphire-text-field__input'], {\n                [textFieldStyles['sapphire-text-field__input--align-right']]:\n                  !!alignInputRight,\n              })}\n              style={autofillStyles}\n            />\n            {postfix && (\n              <span\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__postfix'],\n                  {\n                    [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                      typeof postfix !== 'string',\n                  }\n                )}\n              >\n                {postfix}\n              </span>\n            )}\n            {showButtons && (\n              <div\n                className={clsx(\n                  textFieldStyles['sapphire-text-field__stepper']\n                )}\n              >\n                <StepperButton\n                  variant=\"increment\"\n                  size={size}\n                  {...incrementButtonProps}\n                />\n                <StepperButton\n                  variant=\"decrement\"\n                  size={size}\n                  {...decrementButtonProps}\n                />\n              </div>\n            )}\n          </div>\n        </Field.Control>\n        {((error && 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":[],"mappings":"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"}

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

@@ -48,7 +48,7 @@ const StepperButton = (_a) => {
   const ref = useRef(null);
   const { buttonProps, isPressed } = useButton(props, ref);
   const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, filterDOMProps(props))), {
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, filterDOMProps(props, { global: true }))), {
     ref,
     className: clsx(textFieldStyles["sapphire-text-field__stepper-button"], textFieldStyles["js-hover"], {
       [textFieldStyles["is-active"]]: isPressed,

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

@@ -1 +1 @@
-{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretDown, CaretUp } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'lg' | 'md';\n}): React.JSX.Element => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'lg' ? 'md' : 'sm'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOL,KAAA;AAPK,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,GAAA,EAChC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretDown, CaretUp } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'lg' | 'md';\n}): React.JSX.Element => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(\n        buttonProps,\n        hoverProps,\n        filterDOMProps(props, { global: true })\n      )}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'lg' ? 'md' : 'sm'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOL,KAAA;AAPK,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UACF,CAAA,WAAA,EACA,YACA,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,IAJpC,EAAA,CAAA,CAAA,CAAA,EAAA;AAAA,IAME,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,GAAA,EAChC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';
 import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
 import { useProgressBar } from '@react-aria/progress';
+import { filterDOMProps } from '@react-aria/utils';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -39,9 +40,9 @@ const ProgressIndicator = (props) => {
   const minValue = 0;
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
     className: clsx(styles["sapphire-progress"])
-  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, progressBarProps), {
+  }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, progressBarProps), {
     className: styles["sapphire-progress--indicator"],
     style: __spreadProps(__spreadValues({}, styleProps), { width: `${widthPercentage}%` }),
     "aria-label": "aria-label" in props ? props["aria-label"] : void 0,

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n} 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  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAA,MAAA,GAAS,CAAC,EAMS,KAAA;AANT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,GAJqB,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,WAAW,CAAC,EAAE,UACZ,EAAA,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CACpC,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAI5B,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Ca,MAAA,MAAA,GAAS,CAAC,EAMS,KAAA;AANT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,GAJqB,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,WAAW,CAAC,EAAE,UACZ,EAAA,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CACpC,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAI5B,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\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    SapphireStyleProps {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\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   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   *\n   * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n   * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(\n  props: TagGroupProps<T>\n): React.JSX.Element {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    onRemove: originalOnRemove,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n\n  // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n  // If an external onRemove handler is provided, use it directly.\n  // Otherwise, call individual onRemove handlers on each tag item.\n  const onRemove = originalOnRemove\n    ? (keys: Set<Key>) => {\n        // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n        console.warn(\n          'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n        );\n        originalOnRemove(keys);\n      }\n    : (keys: Set<Key>) => {\n        // Iterate through the keys and call each item's onRemove handler\n        Array.from(keys).forEach((key) => {\n          const item = state.collection.getItem(key);\n          if (item) {\n            (item.props as TagItemProps<T>).onRemove?.();\n          }\n        });\n      };\n\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup({ ...props, onRemove }, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n      noDefaultWidth\n    >\n      <Field.Context\n        descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n      >\n        {(labelText || contextualHelp) && (\n          <Field.Label>\n            <Label {...labelProps} contextualHelp={contextualHelp}>\n              {labelText}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...gridProps}\n            ref={ref}\n            className={styles['sapphire-tag-group']}\n          >\n            {Array.from(state.collection).map((item) => (\n              <Tag\n                key={item.key}\n                item={item}\n                state={state}\n                hasError={item.props.hasError}\n                // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n                // Always allow removing if `onRemove` was provided, for backwards compatibility\n                // Allow removal of the tag item if a removal handler is provided\n                allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n              />\n            ))}\n          </div>\n        </Field.Control>\n        {(note || errorMessage) &&\n          (errorMessage ? (\n            <Field.Footer>\n              <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n            </Field.Footer>\n          ) : (\n            <Field.Footer>{note}</Field.Footer>\n          ))}\n      </Field.Context>\n    </Field>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\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    SapphireStyleProps,\n    GlobalDomAttributes {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\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   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   *\n   * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n   * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(\n  props: TagGroupProps<T>\n): React.JSX.Element {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    onRemove: originalOnRemove,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n\n  // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n  // If an external onRemove handler is provided, use it directly.\n  // Otherwise, call individual onRemove handlers on each tag item.\n  const onRemove = originalOnRemove\n    ? (keys: Set<Key>) => {\n        // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n        console.warn(\n          'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n        );\n        originalOnRemove(keys);\n      }\n    : (keys: Set<Key>) => {\n        // Iterate through the keys and call each item's onRemove handler\n        Array.from(keys).forEach((key) => {\n          const item = state.collection.getItem(key);\n          if (item) {\n            (item.props as TagItemProps<T>).onRemove?.();\n          }\n        });\n      };\n\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup({ ...props, onRemove }, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n      noDefaultWidth\n    >\n      <Field.Context\n        descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n      >\n        {(labelText || contextualHelp) && (\n          <Field.Label>\n            <Label {...labelProps} contextualHelp={contextualHelp}>\n              {labelText}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...gridProps}\n            ref={ref}\n            className={styles['sapphire-tag-group']}\n          >\n            {Array.from(state.collection).map((item) => (\n              <Tag\n                key={item.key}\n                item={item}\n                state={state}\n                hasError={item.props.hasError}\n                // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n                // Always allow removing if `onRemove` was provided, for backwards compatibility\n                // Allow removal of the tag item if a removal handler is provided\n                allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n              />\n            ))}\n          </div>\n        </Field.Control>\n        {(note || errorMessage) &&\n          (errorMessage ? (\n            <Field.Footer>\n              <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n            </Field.Footer>\n          ) : (\n            <Field.Footer>{note}</Field.Footer>\n          ))}\n      </Field.Context>\n    </Field>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from '@react-aria/datepicker';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport {\n  useTimeFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport { useLocale, useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from '@react-aria/utils';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: 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     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\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. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` sets the error state with an additional error message.\n     *\n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | ReactNode;\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     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n      </Field.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\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          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeField.js","sources":["../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from '@react-aria/datepicker';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport {\n  useTimeFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport { useLocale, useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from '@react-aria/utils';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: 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     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\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. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` sets the error state with an additional error message.\n     *\n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | ReactNode;\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     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n      </Field.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\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          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}

package/build/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
 import * as _react_types_shared from '@react-types/shared';
 import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue, PressEvents } from '@react-types/shared';
-import { SapphireStyleProps, TypographyHeadingProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, FieldProps } from '@danske/sapphire-react';
+import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, FieldProps } from '@danske/sapphire-react';
 import { ComboBoxProps } from '@react-types/combobox';
 import { BreadcrumbProps, BreadcrumbsProps as BreadcrumbsProps$1, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
 import { HoverProps } from '@react-aria/interactions';
@@ -13,7 +13,7 @@ export { useLocale } from '@react-aria/i18n';
 
 declare type TreeExpansionMode = 'single' | 'multiple';
 
-interface AccordionProps<T> extends SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
+interface AccordionProps<T> extends GlobalDomAttributes, SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
     /** Allow one or many expanded items
      * @default 'multiple'
      */
@@ -68,7 +68,7 @@ declare const _Accordion: (<T extends object>(props: AccordionProps<T> & {
     Item: <T_1>(props: AccordionItemProps<T_1>) => JSX.Element;
 };
 
-interface SapphireAlertProps extends SapphireStyleProps {
+interface SapphireAlertProps extends GlobalDomAttributes, SapphireStyleProps {
     /**
      * The content of the alert.
      */
@@ -84,7 +84,7 @@ interface SapphireAlertProps extends SapphireStyleProps {
 }
 declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
 
-declare type AutocompleteProps<T extends object> = SapphireStyleProps & Pick<ComboBoxProps<T>, 'items' | 'children' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'onSelectionChange' | 'isDisabled'> & Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {
+declare type AutocompleteProps<T extends object> = GlobalDomAttributes & SapphireStyleProps & Pick<ComboBoxProps<T>, 'items' | 'children' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'onSelectionChange' | 'isDisabled'> & Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {
     /**
      * Render function for the input element.
      * Receives props that should be spread onto the input component.
@@ -108,7 +108,7 @@ declare function Autocomplete<T extends object>(props: AutocompleteProps<T>): Re
 
 declare type BreadcrumbItemProps = {
     isDisabled?: boolean;
-} & SapphireStyleProps & Pick<BreadcrumbProps, 'children'>;
+} & SapphireStyleProps & GlobalDomAttributes & Pick<BreadcrumbProps, 'children'>;
 declare const BreadcrumbItem: ({ children, isDisabled: individualDisabled, ...props }: BreadcrumbItemProps) => JSX.Element;
 
 declare type BreadcrumbsProps<T extends object> = Pick<BreadcrumbsProps$1<T>, 'aria-label' | 'isDisabled'> & {
@@ -124,14 +124,14 @@ declare type BreadcrumbsProps<T extends object> = Pick<BreadcrumbsProps$1<T>, 'a
      * it will show an overflow menu with the first and last items.
      */
     maxWidth?: React__default.CSSProperties['maxWidth'];
-} & SapphireStyleProps;
+} & SapphireStyleProps & GlobalDomAttributes;
 /**
  * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
  */
 declare const Breadcrumbs: <T extends object>({ size, children, maxWidth, ...props }: BreadcrumbsProps<T>) => JSX.Element;
 
-declare type BreadcrumbItemLinkProps = Omit<ButtonProps<'a'>, 'variant' | 'iconAlign'> & SapphireStyleProps;
-declare const BreadcrumbItemLink: React__default.ForwardRefExoticComponent<Omit<ButtonProps<"a">, "variant" | "iconAlign"> & SapphireStyleProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
+declare type BreadcrumbItemLinkProps = Omit<ButtonProps<'a'>, 'variant' | 'iconAlign'> & SapphireStyleProps & GlobalDomAttributes;
+declare const BreadcrumbItemLink: React__default.ForwardRefExoticComponent<Omit<ButtonProps<"a">, "variant" | "iconAlign"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
 
 interface FileSelectProps {
     /**
@@ -158,7 +158,7 @@ interface FileTriggerProps extends FileSelectProps {
 }
 declare const FileTrigger: React__default.ForwardRefExoticComponent<FileTriggerProps & React__default.RefAttributes<HTMLInputElement>>;
 
-interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDropOperation' | 'onDropEnter' | 'onDropActivate' | 'onDropMove' | 'onDropExit' | 'onDrop'>, HoverProps, FileSelectProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
+interface FileDropzoneProps extends GlobalDomAttributes, SapphireStyleProps, Pick<DropOptions, 'getDropOperation' | 'onDropEnter' | 'onDropActivate' | 'onDropMove' | 'onDropExit' | 'onDrop'>, HoverProps, FileSelectProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
     /**
      * Whether the dropzone has an error
      * @default false
@@ -178,7 +178,7 @@ interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDr
 }
 declare const FileDropzone: React__default.ForwardRefExoticComponent<FileDropzoneProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
+interface FilterDropdownProps extends GlobalDomAttributes, SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
     /**
      * "Filter by" label, shown inside the trigger button.
      */
@@ -237,9 +237,9 @@ interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerPro
 /**
  * A button with a dropdown, used for filtering UI.
  */
-declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isClearDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, buttonSize, }: FilterDropdownProps): JSX.Element;
+declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isClearDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, buttonSize, ...props }: FilterDropdownProps): JSX.Element;
 
-interface SearchableSelectFilterProps extends SapphireStyleProps, Omit<FilterDropdownProps, 'children'> {
+interface SearchableSelectFilterProps extends GlobalDomAttributes, SapphireStyleProps, Omit<FilterDropdownProps, 'children'> {
     /**
      * The SearchField to search items with.
      */
@@ -259,7 +259,7 @@ interface SearchableSelectFilterProps extends SapphireStyleProps, Omit<FilterDro
  */
 declare function SearchableSelectFilter(props: SearchableSelectFilterProps): JSX.Element;
 
-declare type FlagProps = SapphireStyleProps & {
+declare type FlagProps = GlobalDomAttributes & SapphireStyleProps & {
     'aria-label'?: string;
     /**
      * The size of the flag.
@@ -274,7 +274,7 @@ declare type FlagProps = SapphireStyleProps & {
     rounded?: boolean;
     children: React__default.ReactNode;
 };
-declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps & {
+declare const Flag: React__default.ForwardRefExoticComponent<Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & SapphireStyleProps & {
     'aria-label'?: string | undefined;
     /**
      * The size of the flag.
@@ -290,7 +290,7 @@ declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps
     children: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLSpanElement>>;
 
-interface LabeledValueProps extends DOMProps, SapphireStyleProps {
+interface LabeledValueProps extends SapphireStyleProps, GlobalDomAttributes {
     children?: React__default.ReactNode;
     /**
      * A HelpButton element to place next to the label.
@@ -328,7 +328,7 @@ interface SapphireNumberFieldProps extends Pick<AriaNumberFieldProps, 'label' |
 declare type NumberFieldRef = FocusableRefValue<HTMLInputElement, HTMLDivElement> & {
     getInputElement(): HTMLInputElement | null;
 };
-interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, SapphireStyleProps {
+interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, SapphireStyleProps, GlobalDomAttributes {
     prefix?: ReactNode;
     postfix?: ReactNode;
     inputRef?: RefObject<HTMLInputElement | null>;
@@ -391,7 +391,7 @@ declare type ProgressIndicatorProps = {
      * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext
      */
     'aria-valuetext'?: string;
-} & SapphireStyleProps & ({
+} & SapphireStyleProps & GlobalDomAttributes & ({
     'aria-labelledby': string;
 } | {
     'aria-label': string;
@@ -405,7 +405,7 @@ declare type SliderProps = {
      * Use {@Link Slider.Note} to render the note.
      */
     note?: ReactNode;
-} & SapphireStyleProps & Pick<FieldProps, 'labelPlacement'> & Pick<SliderProps$1<number>, // We're only supporting sliders with one end
+} & SapphireStyleProps & GlobalDomAttributes & Pick<FieldProps, 'labelPlacement'> & Pick<SliderProps$1<number>, // We're only supporting sliders with one end
 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'value' | 'defaultValue' | 'aria-label' | 'onChange' | 'onChangeEnd'> & Pick<SliderThumbProps, 'name'>;
 
 declare const _Slider: (({ label, labelPlacement, note, name, ...props }: SliderProps) => JSX.Element) & {
@@ -415,7 +415,7 @@ declare const _Slider: (({ label, labelPlacement, note, name, ...props }: Slider
     } & React.HTMLAttributes<HTMLElement>) => React.JSX.Element;
 };
 
-interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps {
+interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps, GlobalDomAttributes {
     /**
      * A HelpButton element to place next to the label.
      */
@@ -472,7 +472,7 @@ interface TagItemProps<T> extends ItemProps<T> {
 }
 declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
 
-declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'shouldForceLeadingZeros'> & SapphireStyleProps & {
+declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, 'isDisabled' | 'isRequired' | 'isReadOnly' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'shouldForceLeadingZeros'> & SapphireStyleProps & GlobalDomAttributes & {
     /**
      * @default 'lg'
      */
@@ -515,7 +515,7 @@ declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, '
      */
     contextualHelp?: ReactNode;
 };
-declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "value" | "label" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "isReadOnly" | "isRequired" | "defaultValue" | "shouldForceLeadingZeros"> & SapphireStyleProps & {
+declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "value" | "label" | "onFocus" | "onBlur" | "onChange" | "isDisabled" | "isReadOnly" | "isRequired" | "defaultValue" | "shouldForceLeadingZeros"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
     /**
      * @default 'lg'
      */