@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.3.1

package/lib/components/ComboBox/ComboBox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAsD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SASzB,CAAC"}
+{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAmD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SASzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js

@@ -5,10 +5,7 @@ import { StyledFormControl } from '../FormControl';
 import { StyledPopover } from '../Popover';
 export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
     return css `
-    min-width: calc(${base['content-width'].xs} + ${base['hit-area']['mouse-min']});
-
     @media (pointer: coarse) {
-      min-width: calc(${base['content-width'].xs} + ${base['hit-area']['finger-min']});
       min-height: ${base['hit-area']['finger-min']};
     }
 

package/lib/components/ComboBox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;sBACU,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;wBAGzD,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBAChE,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;MAGN,aAAa;;;;GAIhB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    min-width: calc(${base['content-width'].xs} + ${base['hit-area']['mouse-min']});\n\n    @media (pointer: coarse) {\n      min-width: calc(${base['content-width'].xs} + ${base['hit-area']['finger-min']});\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    & > ${StyledButton} {\n      align-self: stretch;\n      height: auto;\n      margin-block: -0.0625rem;\n      margin-inline-end: -0.0625rem;\n      border-start-start-radius: 0;\n      border-start-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;MAGN,aAAa;;;;GAIhB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      margin-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n\n    & > ${StyledButton} {\n      align-self: stretch;\n      height: auto;\n      margin-block: -0.0625rem;\n      margin-inline-end: -0.0625rem;\n      border-start-start-radius: 0;\n      border-start-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+N7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA8N7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js

@@ -154,9 +154,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
                                 }, tabIndex: '-1', "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": ariaDescribedBy, children: element.text }, element.id));
                         }) })), _jsx(Flex, { item: { grow: 1 }, as: 'input', size: 1, ref: inputRef, value: value, 
                         // no-op avoids react uncontrolled warning
-                        onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', 
-                        // eslint-disable-next-line jsx-a11y/no-autofocus
-                        autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
+                        onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
 });
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.js.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    cursor: text;\n\n    ul {\n      list-style: none;\n      display: contents;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    input {\n      width: 8ch;\n      height: 1.125rem;\n    }\n  `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusReturnEl: focusDescendant,\n        clearFocusReturn: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation) {\n          if (idx === selected.length - 1) {\n            // If removing last selected item\n            if (selected.length > 1) {\n              // If other selected items, focus previous\n              setFocusDescendant(\n                (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                  null\n              );\n            } else {\n              // Blur selected if final only item removed\n              onSelectedBlur?.();\n            }\n          } else if (selected.length > 1) {\n            // If not last item removed and other selected items, focus next\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n                null\n            );\n          }\n        }\n        onRemove?.(selectionId, idx);\n        inputRef.current?.focus();\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', justify: 'between' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n          item={{ grow: 1 }}\n          onClick={(e: MouseEvent<HTMLDivElement>) => {\n            if (\n              e.target instanceof HTMLElement &&\n              !e.currentTarget.contains(e.target.closest('li'))\n            ) {\n              inputRef.current?.focus();\n              inputRef.current?.click();\n            }\n          }}\n        >\n          {selected.length > 0 && (\n            <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n              {selected.map((element, idx) => {\n                return (\n                  <Selectable\n                    as='li'\n                    key={element.id}\n                    role='option'\n                    id={element.id.toString()}\n                    status={status}\n                    onClick={e => {\n                      const mouseClick = e.detail !== 0;\n\n                      if (!readOnly && !disabled && !mouseClick) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onRemove={() => {\n                      if (!readOnly && !disabled) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onKeyDown={(e: KeyboardEvent<Element>) => {\n                      // prevent browser's Back on FF\n                      if (e.key === 'Backspace') e.preventDefault();\n                    }}\n                    tabIndex='-1'\n                    aria-label={`${t('remove')} ${element.text}`}\n                    aria-describedby={ariaDescribedBy}\n                  >\n                    {element.text}\n                  </Selectable>\n                );\n              })}\n            </ul>\n          )}\n          <Flex\n            item={{ grow: 1 }}\n            as='input'\n            size={1}\n            ref={inputRef}\n            value={value}\n            // no-op avoids react uncontrolled warning\n            onChange={onChange || (() => {})}\n            onKeyDown={onInputKeyDown}\n            readOnly={readOnly || !onChange}\n            disabled={disabled}\n            placeholder={selected?.length ? undefined : placeholder}\n            autoComplete='off'\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n            {...restProps}\n          />\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}
+{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n  useConsolidatedRef,\n  useActiveDescendant,\n  useDirection,\n  useI18n,\n  useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  const { background } = theme.components.badges.selectable.base;\n  const { 'foreground-color': foreground } = theme.base.palette;\n  const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n  return css`\n    cursor: text;\n\n    ul {\n      list-style: none;\n      display: contents;\n\n      &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n        color: ${theme.base.palette.interactive};\n        box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n        outline: none;\n\n        ${StyledBareButton} {\n          color: ${theme.base.palette.interactive};\n        }\n      }\n    }\n\n    input {\n      width: 8ch;\n      height: 1.125rem;\n    }\n  `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      onResolveSuggestion,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      pauseDescendantEvaluation,\n      onSelectedFocus,\n      onSelectedBlur,\n      'aria-controls': ariaControls,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const id = useUID();\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n    const [activeItemId, setActiveItemId] = useState<string | null>(null);\n    const { start, end } = useDirection();\n\n    const uadConfig = useMemo(\n      () => ({\n        focusEl: inputRef.current,\n        scope: listRef.current,\n        selector: 'li[role=\"option\"]',\n        orientation: 'horizontal' as const,\n        focusReturnEl: focusDescendant,\n        clearFocusReturn: () => {\n          setFocusDescendant(null);\n        },\n        pauseDescendantEvaluation,\n        onClick: (el: HTMLElement) => {\n          el.click();\n        }\n      }),\n      [pauseDescendantEvaluation, selected, focusDescendant]\n    );\n\n    const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n    const handleSelectedRemoval = useCallback(\n      (selectionId, idx) => {\n        if (!pauseDescendantEvaluation) {\n          if (idx === selected.length - 1) {\n            // If removing last selected item\n            if (selected.length > 1) {\n              // If other selected items, focus previous\n              setFocusDescendant(\n                (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n                  null\n              );\n            } else {\n              // Blur selected if final only item removed\n              onSelectedBlur?.();\n            }\n          } else if (selected.length > 1) {\n            // If not last item removed and other selected items, focus next\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n                null\n            );\n          }\n        }\n        onRemove?.(selectionId, idx);\n        inputRef.current?.focus();\n      },\n      [selected, onRemove, onSelectedBlur, uadConfig]\n    );\n\n    useEffect(() => {\n      // Maintain active item & prev. val only as it changes.\n      if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n        setActiveItemId(activeDescendant.id);\n      }\n    }, [activeDescendant]);\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (selected.length && inputRef.current?.selectionStart === 0) {\n          const lastIndex = selected.length - 1;\n          if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n            setFocusDescendant(\n              (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n                null\n            );\n            onSelectedFocus?.();\n          }\n\n          const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n            ?.id;\n          const onLastItem = activeItemId === lastSelectableId;\n\n          if (\n            !pauseDescendantEvaluation &&\n            ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n          ) {\n            onSelectedBlur?.();\n          }\n\n          if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n            handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n          }\n        }\n        onKeyDown?.(e);\n      },\n      [\n        pauseDescendantEvaluation,\n        activeItemId,\n        onKeyDown,\n        handleSelectedRemoval,\n        selected,\n        readOnly,\n        disabled\n      ]\n    );\n\n    const ariaDescribedBy = useMemo(() => {\n      return onChange\n        ? `${id}-inputDescription  ${id}-searchDescription`\n        : `${id}-inputDescription`;\n    }, [id]);\n\n    return (\n      <Flex\n        as={StyledMultiSelectInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', justify: 'between' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n          item={{ grow: 1 }}\n          onClick={(e: MouseEvent<HTMLDivElement>) => {\n            if (\n              e.target instanceof HTMLElement &&\n              !e.currentTarget.contains(e.target.closest('li'))\n            ) {\n              inputRef.current?.focus();\n              inputRef.current?.click();\n            }\n          }}\n        >\n          {selected.length > 0 && (\n            <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n              {selected.map((element, idx) => {\n                return (\n                  <Selectable\n                    as='li'\n                    key={element.id}\n                    role='option'\n                    id={element.id.toString()}\n                    status={status}\n                    onClick={e => {\n                      const mouseClick = e.detail !== 0;\n\n                      if (!readOnly && !disabled && !mouseClick) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onRemove={() => {\n                      if (!readOnly && !disabled) {\n                        handleSelectedRemoval(element.id, idx);\n                      }\n                    }}\n                    onKeyDown={(e: KeyboardEvent<Element>) => {\n                      // prevent browser's Back on FF\n                      if (e.key === 'Backspace') e.preventDefault();\n                    }}\n                    tabIndex='-1'\n                    aria-label={`${t('remove')} ${element.text}`}\n                    aria-describedby={ariaDescribedBy}\n                  >\n                    {element.text}\n                  </Selectable>\n                );\n              })}\n            </ul>\n          )}\n          <Flex\n            item={{ grow: 1 }}\n            as='input'\n            size={1}\n            ref={inputRef}\n            value={value}\n            // no-op avoids react uncontrolled warning\n            onChange={onChange || (() => {})}\n            onKeyDown={onInputKeyDown}\n            readOnly={readOnly || !onChange}\n            disabled={disabled}\n            placeholder={selected?.length ? undefined : placeholder}\n            autoComplete='off'\n            autoFocus={autoFocus}\n            aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n            {...restProps}\n          />\n        </Flex>\n        {actions}\n\n        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`}>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAgCD,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB;UAAoC,OAAO;SA+B7E,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAgCD,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB;UAAoC,OAAO;SA+B7E,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
 import Flex from '../Flex';
+import Grid from '../Grid';
 import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
@@ -83,7 +84,7 @@ const FieldGroup = forwardRef(({ children, description, name, additionalInfo, ac
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
     const uid = useUID();
-    const descAndChildren = (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    const descAndChildren = (_jsxs(Grid, { container: { gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
     return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, additionalInfo: additionalInfo, children: collapsible ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                         setOpen(cur => !cur);
                     }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), _jsx(StyledFieldGroupName, { children: name })] }) })) : (_jsx(StyledFieldGroupName, { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n  omitProps('open')\n)(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${open &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n            {collapsible ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <StyledFieldGroupName>{name}</StyledFieldGroupName>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n  omitProps('open')\n)(\n  ({\n    open,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${open &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n            {collapsible ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <StyledFieldGroupName>{name}</StyledFieldGroupName>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/HTML/HTML.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAmBrB,CAAC;AA0CH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAoBrB,CAAC;AA0CH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/HTML/HTML.js

@@ -136,6 +136,7 @@ export const StyledHTML = styled.div(({ theme }) => {
     return css `
     width: 100%;
     overflow-x: auto;
+    overflow-wrap: break-word;
     ${getHtmlStyles(theme)}
 
     ${StyledPopover} ul {

package/lib/components/HTML/HTML.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { sameOrigin } from '../../utils';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n  content: string;\n  customTags?: string[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return `\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: 0.25rem;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-x: auto;\n    ${getHtmlStyles(theme)}\n\n    ${StyledPopover} ul {\n      ul {\n        padding-inline-start: 0;\n      }\n      ol {\n        padding-inline-start: 0;\n      }\n    }\n\n    ${StyledPopover} li {\n      margin: 0;\n    }\n  `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nconst targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\ndompurify.addHook('beforeSanitizeAttributes', node => {\n  // Can be passed text nodes\n  if (!(node instanceof HTMLElement || node instanceof SVGElement)) return;\n\n  node.removeAttribute('class');\n\n  if (\n    node.tagName === 'A' &&\n    node.hasAttribute('href') &&\n    node.getAttribute('target') === '_blank'\n  ) {\n    targetBlankSet.add(node as HTMLAnchorElement);\n  }\n});\n\ndompurify.addHook('afterSanitizeAttributes', node => {\n  if (node.tagName === 'A' && node.hasAttribute('href')) {\n    const href = node.getAttribute('href')!;\n\n    let fullURL: URL;\n    try {\n      fullURL = new URL(href, window.location.href);\n    } catch (e) {\n      return;\n    }\n\n    if (!sameOrigin(window.location, fullURL)) {\n      node.setAttribute('target', '_blank');\n      node.setAttribute('rel', 'noopener');\n    } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n      node.setAttribute('target', '_blank');\n      targetBlankSet.delete(node as HTMLAnchorElement);\n    }\n  }\n});\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n  ({ content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n    const [mounted, setMounted] = useState(false);\n    const sanitizedHtml = useMemo(() => {\n      // Don't render content on the server at all.\n      return mounted\n        ? dompurify.sanitize(content, {\n            CUSTOM_ELEMENT_HANDLING: {\n              tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null\n            }\n          })\n        : '';\n    }, [content, customTags, mounted]);\n\n    useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    return (\n      <StyledHTML {...restProps} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} />\n    );\n  }\n);\n\nexport default HTML;\n"]}
+{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useEffect,\n  useMemo\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { sameOrigin } from '../../utils';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n  content: string;\n  customTags?: string[];\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return `\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: 0.25rem;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    overflow-x: auto;\n    overflow-wrap: break-word;\n    ${getHtmlStyles(theme)}\n\n    ${StyledPopover} ul {\n      ul {\n        padding-inline-start: 0;\n      }\n      ol {\n        padding-inline-start: 0;\n      }\n    }\n\n    ${StyledPopover} li {\n      margin: 0;\n    }\n  `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nconst targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\ndompurify.addHook('beforeSanitizeAttributes', node => {\n  // Can be passed text nodes\n  if (!(node instanceof HTMLElement || node instanceof SVGElement)) return;\n\n  node.removeAttribute('class');\n\n  if (\n    node.tagName === 'A' &&\n    node.hasAttribute('href') &&\n    node.getAttribute('target') === '_blank'\n  ) {\n    targetBlankSet.add(node as HTMLAnchorElement);\n  }\n});\n\ndompurify.addHook('afterSanitizeAttributes', node => {\n  if (node.tagName === 'A' && node.hasAttribute('href')) {\n    const href = node.getAttribute('href')!;\n\n    let fullURL: URL;\n    try {\n      fullURL = new URL(href, window.location.href);\n    } catch (e) {\n      return;\n    }\n\n    if (!sameOrigin(window.location, fullURL)) {\n      node.setAttribute('target', '_blank');\n      node.setAttribute('rel', 'noopener');\n    } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n      node.setAttribute('target', '_blank');\n      targetBlankSet.delete(node as HTMLAnchorElement);\n    }\n  }\n});\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n  ({ content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n    const [mounted, setMounted] = useState(false);\n    const sanitizedHtml = useMemo(() => {\n      // Don't render content on the server at all.\n      return mounted\n        ? dompurify.sanitize(content, {\n            CUSTOM_ELEMENT_HANDLING: {\n              tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null\n            }\n          })\n        : '';\n    }, [content, customTags, mounted]);\n\n    useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    return (\n      <StyledHTML {...restProps} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} />\n    );\n  }\n);\n\nexport default HTML;\n"]}

package/lib/components/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAQ7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAoKrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAQ7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAM3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAwLrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Link/Link.js

@@ -7,13 +7,16 @@ import Popover from '../Popover';
 import BareButton from '../Button/BareButton';
 import { defaultThemeProp } from '../../theme';
 import { useBreakpoint, useConsolidatedRef, useI18n, useUID, useModalContext, useOS } from '../../hooks';
-import { tryCatch } from '../../utils';
+import { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
 import AppShellContext from '../AppShell/AppShellContext';
 import { Keyboard } from '../Badges';
 import Text, { StyledText } from '../Text';
 import { StyledKeyboard } from '../Badges/Keyboard';
 import Flex from '../Flex';
+import Icon, { registerIcon } from '../Icon';
+import * as openIcon from '../Icon/icons/open.icon';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 export const StyledLinkPopover = styled.div(({ theme, preview }) => css `
     background-color: ${theme.components.tooltip['background-color']};
     ${preview &&
@@ -99,7 +102,8 @@ export const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme
 StyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;
 export const StyledLink = styled(Button) ``;
 StyledLink.defaultProps = defaultThemeProp;
-const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...restProps }, ref) => {
+registerIcon(openIcon);
+const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, target: targetProp, children, ...restProps }, ref) => {
     const { initialized: inModal } = useModalContext();
     const { previewTriggerRef } = useContext(AppShellContext);
     const uid = useUID();
@@ -112,6 +116,11 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
     const t = useI18n();
     const { macintosh } = useOS();
     const contextMenuOpened = useRef(false);
+    const url = new URL(href, document.location.href);
+    const crossOrigin = documentIsAvailable
+        ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)
+        : false;
+    const target = crossOrigin ? '_blank' : targetProp;
     const showPopover = () => {
         if (isSmallOrAbove) {
             setPopover(true);
@@ -154,12 +163,12 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
             setPopoverHideDelay('short');
         }
     }, [popoverHideDelay, popover, previewPopover]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledLink, { href: href, variant: variant, ref: linkRef, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: hidePopover, onFocus: onFocusLink, onBlur: onBlurLink, onKeyUp: onKeyUp, onContextMenu: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledLink, { href: href, variant: variant, ref: linkRef, target: target, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: hidePopover, onFocus: onFocusLink, onBlur: onBlurLink, onKeyUp: onKeyUp, onContextMenu: () => {
                     contextMenuOpened.current = true;
                     setPopoverHideDelay('none');
                     setPreviewPopover(false);
                     setPopover(false);
-                }, "aria-describedby": previewable ? `${uid}-preview-instructions` : undefined }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
+                }, children: [children, target === '_blank' && (_jsx(VisuallyHiddenText, { children: t('opens_in_a_new_tab') })), crossOrigin && _jsx(Icon, { name: 'open' })] }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPreviewPopover, onMouseLeave: hidePreviewPopover, as: StyledLinkPopover, arrow: true, preview: true, onHide: hidePreviewPopover, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: popoverHideDelay, placement: 'bottom', target: linkRef.current, onMouseEnter: showPopover, onMouseLeave: hidePopover, as: StyledLinkPopover, arrow: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
 });
 export default Link;
 //# sourceMappingURL=Link.js.map

package/lib/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default \"link\"\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    { href, variant = 'link', previewable, onPreview, ...restProps }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n          aria-describedby={previewable ? `${uid}-preview-instructions` : undefined}\n        />\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  KeyboardEvent,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover, { PopoverProps } from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n  useBreakpoint,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useModalContext,\n  useOS\n} from '../../hooks';\nimport { documentIsAvailable, sameOrigin, tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface LinkProps extends BaseProps {\n  /** Text or content for the Link. */\n  children: ReactNode;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /**\n   * Controls the styling of the Link.\n   * @default \"link\"\n   */\n  variant?: ButtonProps['variant'];\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: ButtonProps['icon'];\n  /** Determines if the Link should render a popover when focused or hovered over. */\n  previewable?: boolean;\n  /** Callback function that is run when the preview popover is interacted with. */\n  onPreview?: (e: { href: string }) => void;\n  /** Specifies where to open the link href. */\n  target?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n  ({ theme, preview }) => css`\n    background-color: ${theme.components.tooltip['background-color']};\n    ${preview &&\n    css`\n      padding: ${theme.base.spacing};\n    `}\n  `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n  const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    z-index: 1;\n    padding: 0 ${theme.base.spacing};\n    min-height: 1.5rem;\n    line-height: 1;\n    color: ${contrastColor};\n    font-size: ${fontSize.xs};\n    text-decoration: none;\n\n    /* FIXME: Button selector specificity... */\n    & + & {\n      margin: 0;\n    }\n\n    & + &::before {\n      content: '';\n      position: absolute;\n      inset-inline-start: 0;\n      inset-block: 0;\n      width: 1px; /* stylelint-disable-line unit-allowed-list */\n      background-color: ${contrastColor};\n      opacity: ${theme.base.transparency['transparent-3']};\n    }\n\n    &:hover,\n    &:active {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n        0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n    }\n  `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n  return css`\n    width: 100%;\n    padding: unset;\n\n    &:hover,\n    &:active {\n      text-decoration: none;\n      ${StyledText} span {\n        text-decoration: underline;\n      }\n    }\n\n    ${StyledText} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n    }\n\n    ${StyledKeyboard} {\n      color: ${theme.base.palette.light};\n      background-color: ${theme.base.colors.gray.dark};\n      border-color: ${theme.base.colors.gray.medium};\n      inset-block-start: unset;\n\n      &:first-of-type {\n        margin-inline: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nregisterIcon(openIcon);\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n  (\n    {\n      href,\n      variant = 'link',\n      previewable,\n      onPreview,\n      target: targetProp,\n      children,\n      ...restProps\n    }: PropsWithoutRef<LinkProps>,\n    ref: LinkProps['ref']\n  ) => {\n    const { initialized: inModal } = useModalContext();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const uid = useUID();\n    const linkRef = useConsolidatedRef(ref);\n    const [popover, setPopover] = useState(false);\n    const [popoverHideDelay, setPopoverHideDelay] = useState<PopoverProps['hideDelay']>('short');\n    const [previewPopover, setPreviewPopover] = useState(false);\n    const previewBtnRef = useRef<HTMLButtonElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const t = useI18n();\n    const { macintosh } = useOS();\n    const contextMenuOpened = useRef(false);\n\n    const url = new URL(href, document.location.href);\n    const crossOrigin = documentIsAvailable\n      ? /^https?:$/.test(url.protocol) && !sameOrigin(document.location, url)\n      : false;\n    const target = crossOrigin ? '_blank' : targetProp;\n\n    const showPopover = () => {\n      if (isSmallOrAbove) {\n        setPopover(true);\n        setPreviewPopover(false);\n      }\n    };\n\n    const showPreviewPopover = () => {\n      if (isSmallOrAbove && !popover && !contextMenuOpened.current) setPreviewPopover(true);\n    };\n\n    const hidePopover = () => {\n      setPopover(false);\n    };\n\n    const hidePreviewPopover = () => {\n      setPreviewPopover(false);\n    };\n\n    const onEnterLink = () => {\n      if (previewable) showPopover();\n    };\n\n    const onFocusLink = () => {\n      if (previewable) showPreviewPopover();\n    };\n\n    const onBlurLink = () => {\n      contextMenuOpened.current = false;\n      hidePreviewPopover();\n    };\n\n    const onPreviewClick = () => {\n      previewTriggerRef.current = linkRef.current;\n      onPreview?.({ href });\n    };\n\n    const onKeyUp = (e: KeyboardEvent) => {\n      if (e.getModifierState('Alt') && e.code === 'KeyP') {\n        onPreviewClick();\n      }\n    };\n\n    useEffect(() => {\n      if (popoverHideDelay === 'none' && !popover && !previewPopover) {\n        setPopoverHideDelay('short');\n      }\n    }, [popoverHideDelay, popover, previewPopover]);\n\n    return (\n      <>\n        <StyledLink\n          href={href}\n          variant={variant}\n          ref={linkRef as any}\n          target={target}\n          {...restProps}\n          onMouseEnter={onEnterLink}\n          onMouseLeave={hidePopover}\n          onFocus={onFocusLink}\n          onBlur={onBlurLink}\n          onKeyUp={onKeyUp}\n          onContextMenu={() => {\n            contextMenuOpened.current = true;\n\n            setPopoverHideDelay('none');\n            setPreviewPopover(false);\n            setPopover(false);\n          }}\n        >\n          {children}\n          {target === '_blank' && (\n            <VisuallyHiddenText>{t('opens_in_a_new_tab')}</VisuallyHiddenText>\n          )}\n          {crossOrigin && <Icon name='open' />}\n        </StyledLink>\n\n        {!inModal && (\n          <Popover\n            show={previewPopover}\n            groupId='link_preview'\n            showDelay='short'\n            hideDelay={popoverHideDelay}\n            placement='bottom'\n            target={linkRef.current}\n            onMouseEnter={showPreviewPopover}\n            onMouseLeave={hidePreviewPopover}\n            as={StyledLinkPopover}\n            arrow\n            preview\n            onHide={hidePreviewPopover}\n          >\n            <StyledLinkPreviewPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              <Text>\n                <span>{t('preview')}</span>\n                <Flex container={{ inline: true, justify: 'end' }}>\n                  <Keyboard keyName='Alt' />\n                  <Keyboard keyName='P' />\n                </Flex>\n              </Text>\n            </StyledLinkPreviewPopoverBtn>\n          </Popover>\n        )}\n\n        <Popover\n          show={popover}\n          groupId='link_preview'\n          showDelay='short'\n          hideDelay={popoverHideDelay}\n          placement='bottom'\n          target={linkRef.current}\n          onMouseEnter={showPopover}\n          onMouseLeave={hidePopover}\n          as={StyledLinkPopover}\n          arrow\n        >\n          {!inModal && (\n            <StyledLinkPopoverBtn\n              preview\n              type='button'\n              ref={previewBtnRef}\n              onClick={onPreviewClick}\n              tabIndex='-1'\n            >\n              {t('preview')}\n            </StyledLinkPopoverBtn>\n          )}\n          <StyledLinkPopoverBtn\n            forwardedAs='a'\n            href={href}\n            target='_blank'\n            rel='noreferrer'\n            tabIndex='-1'\n          >\n            {t('link_open_in_tab_text')}\n          </StyledLinkPopoverBtn>\n        </Popover>\n\n        {previewable && (\n          <span id={`${uid}-preview-instructions`} hidden>\n            {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n          </span>\n        )}\n      </>\n    );\n  }\n);\n\nexport default Link;\n"]}

package/lib/components/Location/LocationInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocationInput.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,OAAO,iBAAiB,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAqB,EAAE,iBAAiB,EAAsB,MAAM,gBAAgB,CAAC;AAErF,MAAM,WAAW,kBACf,SAAQ,iBAAiB,EACvB,iBAAiB,EACjB,SAAS,EACT,gBAAgB;IAClB,kFAAkF;IAClF,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KAAK,IAAI,CAAC;CACZ;AASD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAwJxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LocationInput.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,OAAO,iBAAiB,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAqB,EAAE,iBAAiB,EAAsB,MAAM,gBAAgB,CAAC;AAErF,MAAM,WAAW,kBACf,SAAQ,iBAAiB,EACvB,iBAAiB,EACjB,SAAS,EACT,gBAAgB;IAClB,kFAAkF;IAClF,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KAAK,IAAI,CAAC;CACZ;AASD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAuJxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Location/LocationInput.js

@@ -67,7 +67,6 @@ const LocationInput = forwardRef((props, ref) => {
                             primary: t('use_input_value', [filterValue])
                         }),
                         mode: 'action',
-                        emptyText: t('location_not_found_text'),
                         footer: !showMap && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(PoweredByGoogleImage, {}) }))
                     }
                     : undefined, actions: !disabled &&

package/lib/components/Location/LocationInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocationInput.js","sourceRoot":"","sources":["../../../src/components/Location/LocationInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport ComboBox from '../ComboBox';\nimport { MenuProps } from '../Menu';\nimport { useI18n } from '../../hooks';\nimport { createUID } from '../../utils/utils';\nimport FormField from '../FormField';\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\n\nimport PoweredByGoogleImage from './PoweredByGoogleImage';\nimport CurrentLocationButton from './CurrentLocationButton';\nimport MapsContext from './MapsContext';\nimport { getPlaceById, getPlacePredictions, loadMapsAPI } from './utils';\nimport BaseLocationProps from './Location.types';\nimport { LatLng } from './types';\nimport LocationView, { LocationViewProps, StyledLocationView } from './LocationView';\n\nexport interface LocationInputProps\n  extends LocationViewProps,\n    BaseLocationProps,\n    BaseProps,\n    FormControlProps {\n  /** Button when clicked will show additional information for the location input */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /**\n   * Get user current location on component first render.\n   * @default false\n   */\n  defaultToCurrentLocation?: boolean;\n  /** The value of the location field. */\n  value?: string;\n  /**\n   * Callback fired on every change of the location input.\n   * The argument passed back is the component's value prop.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback fired when the control's input loses focus.\n   * The argument passed back is the component's value prop.\n   */\n  onBlur?: (value: string) => void;\n  /**\n   * Set to true renders the map view below input.\n   * @default false\n   */\n  showMap?: boolean;\n  /** Location coordinates used for the map view. */\n  location?: LatLng | string;\n  /** Callback fired when user chooses location from the dropdown of suggestions or submits input value. */\n  onSelect?: (value: {\n    name?: string;\n    address?: string;\n    latitude?: number;\n    longitude?: number;\n  }) => void;\n}\n\nconst StyledLocationMap = styled.div`\n  ${StyledLocationView} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst LocationInput: FC<LocationInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<LocationInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      label,\n      labelHidden,\n      id = createUID(),\n      location = '',\n      value = '',\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      additionalInfo,\n      onSelect,\n      onError,\n      onChange,\n      bias,\n      showMap,\n      defaultToCurrentLocation,\n      centerMapOnChange,\n      height,\n      zoomLevel,\n      onClick,\n      onBlur,\n      ...restProps\n    } = props;\n    const { name, ...providerOpts } = useContext(MapsContext);\n    const t = useI18n();\n    const [placePredictionMenu, setPlacePredictionMenu] = useState<MenuProps>({ items: [] });\n    const [filterValue, setFilterValue] = useState('');\n\n    useEffect(() => {\n      const mapApiPromise = loadMapsAPI(name, providerOpts).catch(error => onError?.(error));\n\n      if (filterValue) {\n        mapApiPromise\n          .then(() => getPlacePredictions(filterValue, bias))\n          .then(({ placePredictions, token }) => {\n            setPlacePredictionMenu({\n              items: placePredictions.map(item => ({\n                id: item.place_id,\n                primary: item.structured_formatting.main_text,\n                secondary: [item.structured_formatting.secondary_text]\n              })),\n              emptyText: t('location_not_found_text'),\n              onItemClick: itemId =>\n                getPlaceById(itemId, token).then(arg => {\n                  setFilterValue('');\n                  onSelect?.(arg);\n                })\n            });\n          })\n          .catch(error => {\n            setPlacePredictionMenu({ items: [] });\n            onError?.(error);\n          });\n      } else {\n        setPlacePredictionMenu({ items: [] });\n      }\n    }, [filterValue, bias, onError, onSelect]);\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n        onChange?.(e.target.value);\n      },\n      [onChange]\n    );\n\n    const onMapClick = useCallback(\n      (placeInfo: { latitude: number; longitude: number; name?: string; address?: string }) => {\n        onSelect?.(placeInfo);\n        onClick?.(placeInfo);\n      },\n      [onSelect, onClick]\n    );\n\n    const Comp = (\n      <>\n        <ComboBox\n          placeholder={t('location_input_placeholder')}\n          menu={\n            filterValue\n              ? {\n                  ...placePredictionMenu,\n                  items: placePredictionMenu.items.concat({\n                    id: createUID(),\n                    primary: t('use_input_value', [filterValue])\n                  }),\n                  mode: 'action',\n                  emptyText: t('location_not_found_text'),\n                  footer: !showMap && (\n                    <Flex container={{ justify: 'end' }}>\n                      <PoweredByGoogleImage />\n                    </Flex>\n                  )\n                }\n              : undefined\n          }\n          actions={\n            !disabled &&\n            !readOnly && (\n              <CurrentLocationButton\n                {...{ defaultToCurrentLocation, onError, onChange: onSelect }}\n              />\n            )\n          }\n          onChange={onInputChange}\n          onBlur={() => {\n            setFilterValue('');\n            onBlur?.(value);\n          }}\n          value={value}\n          {...{\n            required,\n            disabled,\n            readOnly,\n            status,\n            ...restProps\n          }}\n        />\n        {showMap && (\n          <StyledLocationMap>\n            <LocationView\n              {...{\n                location,\n                onClick: onMapClick,\n                onError,\n                bias,\n                disabled,\n                readOnly,\n                centerMapOnChange,\n                height,\n                zoomLevel\n              }}\n            />\n          </StyledLocationMap>\n        )}\n      </>\n    );\n\n    return label ? (\n      <FormField\n        {...{ label, labelHidden, id, info, status, ref, required, disabled, additionalInfo }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default LocationInput;\n"]}
+{"version":3,"file":"LocationInput.js","sourceRoot":"","sources":["../../../src/components/Location/LocationInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport ComboBox from '../ComboBox';\nimport { MenuProps } from '../Menu';\nimport { useI18n } from '../../hooks';\nimport { createUID } from '../../utils/utils';\nimport FormField from '../FormField';\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\n\nimport PoweredByGoogleImage from './PoweredByGoogleImage';\nimport CurrentLocationButton from './CurrentLocationButton';\nimport MapsContext from './MapsContext';\nimport { getPlaceById, getPlacePredictions, loadMapsAPI } from './utils';\nimport BaseLocationProps from './Location.types';\nimport { LatLng } from './types';\nimport LocationView, { LocationViewProps, StyledLocationView } from './LocationView';\n\nexport interface LocationInputProps\n  extends LocationViewProps,\n    BaseLocationProps,\n    BaseProps,\n    FormControlProps {\n  /** Button when clicked will show additional information for the location input */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /**\n   * Get user current location on component first render.\n   * @default false\n   */\n  defaultToCurrentLocation?: boolean;\n  /** The value of the location field. */\n  value?: string;\n  /**\n   * Callback fired on every change of the location input.\n   * The argument passed back is the component's value prop.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback fired when the control's input loses focus.\n   * The argument passed back is the component's value prop.\n   */\n  onBlur?: (value: string) => void;\n  /**\n   * Set to true renders the map view below input.\n   * @default false\n   */\n  showMap?: boolean;\n  /** Location coordinates used for the map view. */\n  location?: LatLng | string;\n  /** Callback fired when user chooses location from the dropdown of suggestions or submits input value. */\n  onSelect?: (value: {\n    name?: string;\n    address?: string;\n    latitude?: number;\n    longitude?: number;\n  }) => void;\n}\n\nconst StyledLocationMap = styled.div`\n  ${StyledLocationView} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst LocationInput: FC<LocationInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<LocationInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      label,\n      labelHidden,\n      id = createUID(),\n      location = '',\n      value = '',\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      additionalInfo,\n      onSelect,\n      onError,\n      onChange,\n      bias,\n      showMap,\n      defaultToCurrentLocation,\n      centerMapOnChange,\n      height,\n      zoomLevel,\n      onClick,\n      onBlur,\n      ...restProps\n    } = props;\n    const { name, ...providerOpts } = useContext(MapsContext);\n    const t = useI18n();\n    const [placePredictionMenu, setPlacePredictionMenu] = useState<MenuProps>({ items: [] });\n    const [filterValue, setFilterValue] = useState('');\n\n    useEffect(() => {\n      const mapApiPromise = loadMapsAPI(name, providerOpts).catch(error => onError?.(error));\n\n      if (filterValue) {\n        mapApiPromise\n          .then(() => getPlacePredictions(filterValue, bias))\n          .then(({ placePredictions, token }) => {\n            setPlacePredictionMenu({\n              items: placePredictions.map(item => ({\n                id: item.place_id,\n                primary: item.structured_formatting.main_text,\n                secondary: [item.structured_formatting.secondary_text]\n              })),\n              emptyText: t('location_not_found_text'),\n              onItemClick: itemId =>\n                getPlaceById(itemId, token).then(arg => {\n                  setFilterValue('');\n                  onSelect?.(arg);\n                })\n            });\n          })\n          .catch(error => {\n            setPlacePredictionMenu({ items: [] });\n            onError?.(error);\n          });\n      } else {\n        setPlacePredictionMenu({ items: [] });\n      }\n    }, [filterValue, bias, onError, onSelect]);\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n        onChange?.(e.target.value);\n      },\n      [onChange]\n    );\n\n    const onMapClick = useCallback(\n      (placeInfo: { latitude: number; longitude: number; name?: string; address?: string }) => {\n        onSelect?.(placeInfo);\n        onClick?.(placeInfo);\n      },\n      [onSelect, onClick]\n    );\n\n    const Comp = (\n      <>\n        <ComboBox\n          placeholder={t('location_input_placeholder')}\n          menu={\n            filterValue\n              ? {\n                  ...placePredictionMenu,\n                  items: placePredictionMenu.items.concat({\n                    id: createUID(),\n                    primary: t('use_input_value', [filterValue])\n                  }),\n                  mode: 'action',\n                  footer: !showMap && (\n                    <Flex container={{ justify: 'end' }}>\n                      <PoweredByGoogleImage />\n                    </Flex>\n                  )\n                }\n              : undefined\n          }\n          actions={\n            !disabled &&\n            !readOnly && (\n              <CurrentLocationButton\n                {...{ defaultToCurrentLocation, onError, onChange: onSelect }}\n              />\n            )\n          }\n          onChange={onInputChange}\n          onBlur={() => {\n            setFilterValue('');\n            onBlur?.(value);\n          }}\n          value={value}\n          {...{\n            required,\n            disabled,\n            readOnly,\n            status,\n            ...restProps\n          }}\n        />\n        {showMap && (\n          <StyledLocationMap>\n            <LocationView\n              {...{\n                location,\n                onClick: onMapClick,\n                onError,\n                bias,\n                disabled,\n                readOnly,\n                centerMapOnChange,\n                height,\n                zoomLevel\n              }}\n            />\n          </StyledLocationMap>\n        )}\n      </>\n    );\n\n    return label ? (\n      <FormField\n        {...{ label, labelHidden, id, info, status, ref, required, disabled, additionalInfo }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default LocationInput;\n"]}

package/lib/components/SkipLinks/SkipLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAS9C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,8TAuB1B,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgEhC,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SkipLinks.d.ts","sourceRoot":"","sources":["../../../src/components/SkipLinks/SkipLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAUjC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,8TAuB1B,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAoChC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/SkipLinks/SkipLinks.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
+import { focusHeadingOrContainer } from '../../utils';
 import Button, { StyledButton } from '../Button';
 import Popover from '../Popover';
 import Flex from '../Flex';
@@ -26,30 +27,6 @@ export const StyledSkipLinks = styled(Popover)(props => {
 });
 StyledSkipLinks.defaultProps = defaultThemeProp;
 const SkipLinks = memo(({ items }) => {
-    const onClick = useCallback((item) => {
-        const selectedEl = document.querySelector(item.target.selector);
-        const container = selectedEl ?? document;
-        const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el ?? container.querySelector(tag), null);
-        const target = heading ?? selectedEl;
-        if (!target)
-            return;
-        if (target === selectedEl && !selectedEl.hasAttribute('aria-label')) {
-            selectedEl.setAttribute('aria-label', item.target.ariaLabel);
-            selectedEl.addEventListener('focusout', () => {
-                selectedEl.removeAttribute('aria-label');
-            }, { once: true });
-        }
-        if (target.hasAttribute('tabindex')) {
-            target.focus();
-        }
-        else {
-            target.setAttribute('tabindex', '-1');
-            target.focus();
-            target.addEventListener('focusout', () => {
-                target.removeAttribute('tabindex');
-            }, { once: true });
-        }
-    }, []);
     return (_jsx(Flex, { as: StyledSkipLinks, container: { gap: 0.5, direction: 'column' }, show: true, placement: 'bottom-end', target: {
             getBoundingClientRect: () => ({
                 height: 0,
@@ -61,7 +38,7 @@ const SkipLinks = memo(({ items }) => {
                 left: 24,
                 right: 24
             })
-        }, children: items.map(item => (_jsx(Button, { variant: 'link', onClick: () => onClick(item), children: item.label }, item.label))) }));
+        }, children: items.map(item => (_jsx(Button, { variant: 'link', onClick: () => focusHeadingOrContainer(document.querySelector(item.target.selector) ?? document, item.target.ariaLabel), children: item.label }, item.label))) }));
 });
 export default SkipLinks;
 //# sourceMappingURL=SkipLinks.js.map