@procore/core-react 12.35.0 → 12.37.0

package/dist/Pagination/Pagination.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.types.js","names":[],"sources":["../../src/Pagination/Pagination.types.ts"],"sourcesContent":["import type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport type { Props } from '../_utils/types'\n\nexport interface FieldProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n}\n\nexport interface PageNotationProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  end: number\n  /**\n   * @since 10.19.0\n   */\n  items: number\n  /**\n   * @since 10.19.0\n   */\n  start: number\n}\n\nexport interface NavigationIconProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  onClick?: any\n}\n\nexport interface PresetPaginationProps extends Props {\n  /**\n   * Current page selected, 1 based.\n   * @since 10.19.0\n   */\n  activePage?: number\n\n  /**\n   * Total number of items across pages.\n   * @since 10.19.0\n   */\n  items: number\n\n  /**\n   * A callback that receives the page selected.\n   * @since 10.19.0\n   */\n  onSelectPage?: (page: number) => void\n\n  /**\n   * Number of items per page.\n   * @since 10.19.0\n   */\n  perPage?: number\n}\n\nexport interface PaginationMenuProps {\n  /**\n   * @since 10.19.0\n   */\n  activePage: number\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  pages: number\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: PageSelectProps['onSelect']\n}\n\nexport interface PageSelectProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  activePage?: number\n  /**\n   * @since 11.6.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 11.6.0\n   */\n  id?: string\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => any\n  /**\n   * @since 10.19.0\n   */\n  pages?: number\n}\n\nexport interface PaginationHookConfig {\n  /**\n   * @since 10.19.0\n   */\n  activePage: number\n  /**\n   * @since 10.19.0\n   */\n  items: number\n  /**\n   * @since 10.19.0\n   */\n  onSelectPage: (page: number) => void\n  /**\n   * @since 10.19.0\n   */\n  perPage: number\n}\n\nexport interface PaginationHook {\n  /**\n   * @since 10.19.0\n   */\n  end: number\n  /**\n   * @since 10.19.0\n   */\n  isFirst: boolean\n  /**\n   * @since 10.19.0\n   */\n  isLast: boolean\n  /**\n   * @since 10.19.0\n   */\n  pages: number\n  /**\n   * @since 10.19.0\n   */\n  selectNext: () => void\n  /**\n   * @since 10.19.0\n   */\n  selectPage: (selection: Selection) => void\n  /**\n   * @since 10.19.0\n   */\n  selectPrev: () => void\n  /**\n   * @since 10.19.0\n   */\n  start: number\n}\n"],"mappings":""}
+{"version":3,"file":"Pagination.types.js","names":[],"sources":["../../src/Pagination/Pagination.types.ts"],"sourcesContent":["import type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport type { Props } from '../_utils/types'\n\nexport interface FieldProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n}\n\nexport interface PageNotationProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  end: number\n  /**\n   * @since 10.19.0\n   */\n  items: number\n  /**\n   * @since 10.19.0\n   */\n  start: number\n}\n\nexport interface NavigationIconProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  onClick?: any\n}\n\nexport interface PresetPaginationProps extends Props {\n  /**\n   * Current page selected, 1 based.\n   * @since 10.19.0\n   */\n  activePage?: number\n\n  /**\n   * Total number of items across pages.\n   * @since 10.19.0\n   */\n  items: number\n\n  /**\n   * A callback that receives the page selected.\n   * @since 10.19.0\n   */\n  onSelectPage?: (page: number) => void\n\n  /**\n   * Number of items per page.\n   * @since 10.19.0\n   */\n  perPage?: number\n}\n\nexport interface PaginationMenuProps {\n  /**\n   * @since 10.19.0\n   */\n  activePage: number\n  /**\n   * @since 12.34.2\n   */\n  maxHeight?: number\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  pages: number\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: PageSelectProps['onSelect']\n}\n\nexport interface PageSelectProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  activePage?: number\n  /**\n   * @since 11.6.0\n   */\n  'aria-labelledby'?: string\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 11.6.0\n   */\n  id?: string\n  /**\n   * @since 10.19.0\n   */\n  onSelect?: (selection: Selection) => any\n  /**\n   * @since 10.19.0\n   */\n  pages?: number\n}\n\nexport interface PaginationHookConfig {\n  /**\n   * @since 10.19.0\n   */\n  activePage: number\n  /**\n   * @since 10.19.0\n   */\n  items: number\n  /**\n   * @since 10.19.0\n   */\n  onSelectPage: (page: number) => void\n  /**\n   * @since 10.19.0\n   */\n  perPage: number\n}\n\nexport interface PaginationHook {\n  /**\n   * @since 10.19.0\n   */\n  end: number\n  /**\n   * @since 10.19.0\n   */\n  isFirst: boolean\n  /**\n   * @since 10.19.0\n   */\n  isLast: boolean\n  /**\n   * @since 10.19.0\n   */\n  pages: number\n  /**\n   * @since 10.19.0\n   */\n  selectNext: () => void\n  /**\n   * @since 10.19.0\n   */\n  selectPage: (selection: Selection) => void\n  /**\n   * @since 10.19.0\n   */\n  selectPrev: () => void\n  /**\n   * @since 10.19.0\n   */\n  start: number\n}\n"],"mappings":""}

package/dist/Pagination/PaginationSelect.js

@@ -1,4 +1,10 @@
-var _excluded = ["activePage", "menuRef", "onSelect", "pages"];
+var _excluded = ["activePage", "maxHeight", "menuRef", "onSelect", "pages"];
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -7,10 +13,25 @@ import React from 'react';
 import { DropdownButton } from '../Dropdown/Dropdown';
 import { MenuImperative } from '../MenuImperative/MenuImperative';
 import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
+import { mergeRefs } from '../_utils/mergeRefs';
 import { StyledOverlay } from './Pagination.styles';
 var noop = function noop() {};
+var DEFAULT_MAX_HEIGHT = 300;
+var VIEWPORT_PADDING = 16;
+function computeAvailableHeight(triggerEl) {
+  if (!triggerEl) {
+    return DEFAULT_MAX_HEIGHT;
+  }
+  var rect = triggerEl.getBoundingClientRect();
+  var viewportHeight = window.innerHeight;
+  var spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING;
+  var spaceAbove = rect.top - VIEWPORT_PADDING;
+  var availableSpace = Math.max(spaceBelow, spaceAbove);
+  return Math.min(DEFAULT_MAX_HEIGHT, availableSpace);
+}
 var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref, ref) {
   var activePage = _ref.activePage,
+    maxHeight = _ref.maxHeight,
     menuRef = _ref.menuRef,
     _ref$onSelect = _ref.onSelect,
     onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
@@ -60,9 +81,13 @@ var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref,
       ref: lastItemRef
     }, page);
   }, pages);
+  var overlayStyle = maxHeight ? {
+    maxHeight: maxHeight
+  } : undefined;
   return /*#__PURE__*/React.createElement(StyledOverlay, {
     ref: ref,
-    shadowStrength: 2
+    shadowStrength: 2,
+    style: overlayStyle
   }, /*#__PURE__*/React.createElement(MenuImperative, _extends({
     circular: true
   }, props, {
@@ -84,6 +109,27 @@ export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationS
     pages = _ref2$pages === void 0 ? 0 : _ref2$pages,
     props = _objectWithoutProperties(_ref2, ["activePage", "aria-labelledby", "disabled", "id", "onSelect", "pages"]);
   var menuRef = React.useRef(null);
+  var triggerRef = React.useRef(null);
+  var _React$useState = React.useState(undefined),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    maxHeight = _React$useState2[0],
+    setMaxHeight = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isOpen = _React$useState4[0],
+    setIsOpen = _React$useState4[1];
+
+  // Recompute height on viewport resize
+  React.useEffect(function () {
+    if (!isOpen) return;
+    function handleResize() {
+      setMaxHeight(computeAvailableHeight(triggerRef.current));
+    }
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [isOpen]);
 
   // Safari has an issue with giving focus to buttons after clicking on them
   // if the button or menu do not have focus, the keyboard navigation does not work,
@@ -94,6 +140,14 @@ export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationS
     // but super specific to pagination, not really a concern elsewhere
     ;
     (_menuRef$current7 = menuRef.current) === null || _menuRef$current7 === void 0 ? void 0 : (_menuRef$current7$el = _menuRef$current7.el) === null || _menuRef$current7$el === void 0 ? void 0 : (_menuRef$current7$el$ = _menuRef$current7$el.firstChild) === null || _menuRef$current7$el$ === void 0 ? void 0 : _menuRef$current7$el$.focus();
+
+    // Compute available height
+    setIsOpen(true);
+    setMaxHeight(computeAvailableHeight(triggerRef.current));
+  }
+  function afterHide() {
+    setIsOpen(false);
+    setMaxHeight(undefined);
   }
   function onKeyDown(e) {
     if (e.key === 'Up' || e.key === 'ArrowUp') {
@@ -115,14 +169,16 @@ export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationS
     passA11yPropsToOverlay: true,
     autoFocus: true,
     afterShow: afterShow,
+    afterHide: afterHide,
     overlay: /*#__PURE__*/React.createElement(PaginationMenu, {
       activePage: activePage,
+      maxHeight: maxHeight,
       menuRef: menuRef,
       onSelect: onSelect,
       pages: pages
     }),
     placement: "bottom-left",
-    ref: ref,
+    ref: mergeRefs(ref, triggerRef),
     trigger: "click"
   }, props), /*#__PURE__*/React.createElement(DropdownButton, {
     "aria-labelledby": ariaLabelledby,

package/dist/Pagination/PaginationSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationSelect.js","names":["times","React","DropdownButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","StyledOverlay","noop","PaginationMenu","forwardRef","_ref","ref","activePage","menuRef","_ref$onSelect","onSelect","onSelect_","pages","props","_objectWithoutProperties","_excluded","ctx","lastItemRef","useRef","hasFooter","useEffect","_menuRef$current","current","highlightFirst","_menuRef$current2","_menuRef$current3","highlightSuggested","highlightSelected","onKeyDown","event","_menuRef$current4","currentPage","highlighted","key","_menuRef$current5","highlight","_menuRef$current6","stopPropagation","highlightLast","selection","hide","children","index","page","createElement","Item","item","selected","shadowStrength","_extends","circular","Fragment","Options","slice","Footer","padding","length","PaginationSelect","_ref2","_ref2$activePage","ariaLabelledby","disabled","id","_ref2$pages","afterShow","_menuRef$current7","_menuRef$current7$el","_menuRef$current7$el$","el","firstChild","focus","e","_menuRef$current8","preventDefault","prev","_menuRef$current9","next","_menuRef$current0","select","role","passA11yPropsToOverlay","autoFocus","overlay","placement","trigger","arrow","variant"],"sources":["../../src/Pagination/PaginationSelect.tsx"],"sourcesContent":["import { times } from 'ramda'\nimport React from 'react'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n  OverlayTrigger,\n  useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { StyledOverlay } from './Pagination.styles'\nimport type { PageSelectProps, PaginationMenuProps } from './Pagination.types'\n\nconst noop = () => {}\n\nconst PaginationMenu = React.forwardRef<HTMLDivElement, PaginationMenuProps>(\n  function PaginationMenu(\n    { activePage, menuRef, onSelect: onSelect_ = noop, pages, ...props },\n    ref\n  ) {\n    const ctx = useOverlayTriggerContext()\n\n    const lastItemRef = React.useRef<HTMLDivElement>(null)\n\n    const hasFooter = pages > 10\n\n    React.useEffect(() => {\n      menuRef.current?.highlightFirst()\n    }, [menuRef])\n\n    React.useEffect(() => {\n      menuRef.current?.highlightSuggested()\n      menuRef.current?.highlightSelected()\n    }, [menuRef])\n\n    function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n      const currentPage = menuRef.current?.highlighted()\n\n      if (event.key === 'ArrowDown' || event.key === 'Down') {\n        // when on the second to last item, want to jump to the last item (in the footer)\n        if (currentPage === pages - 1 && lastItemRef.current) {\n          menuRef.current?.highlight(lastItemRef.current)\n        }\n      } else if (event.key === 'ArrowUp' || event.key === 'Up') {\n        // on the last item (in the footer), want to jump back to the second to last\n        // item back in the menu\n        if (hasFooter && currentPage === pages) {\n          event.stopPropagation()\n          menuRef.current?.highlightLast()\n        }\n      }\n    }\n\n    function onSelect(selection: Selection) {\n      onSelect_(selection)\n\n      ctx.hide(selection.event)\n    }\n\n    const children = times((index: number) => {\n      const page = index + 1\n\n      return (\n        <MenuImperative.Item\n          item={page}\n          key={index}\n          selected={page === activePage}\n          ref={lastItemRef}\n        >\n          {page}\n        </MenuImperative.Item>\n      )\n    }, pages)\n\n    return (\n      <StyledOverlay ref={ref} shadowStrength={2}>\n        <MenuImperative\n          circular\n          {...props}\n          ref={menuRef}\n          onKeyDown={onKeyDown}\n          onSelect={onSelect}\n        >\n          {hasFooter ? (\n            <>\n              <MenuImperative.Options>\n                {children.slice(0, -1)}\n              </MenuImperative.Options>\n              <MenuImperative.Footer padding=\"xs none\">\n                {children[children.length - 1]}\n              </MenuImperative.Footer>\n            </>\n          ) : (\n            <MenuImperative.Options>{children}</MenuImperative.Options>\n          )}\n        </MenuImperative>\n      </StyledOverlay>\n    )\n  }\n)\n\nexport const PaginationSelect = React.forwardRef<\n  HTMLButtonElement,\n  PageSelectProps\n>(function PaginationSelect(\n  {\n    activePage = 1,\n    [`aria-labelledby`]: ariaLabelledby,\n    disabled,\n    id,\n    onSelect,\n    pages = 0,\n    ...props\n  },\n  ref\n) {\n  const menuRef = React.useRef<MenuRef>(null)\n\n  // Safari has an issue with giving focus to buttons after clicking on them\n  // if the button or menu do not have focus, the keyboard navigation does not work,\n  // so just focus the menu when we open it\n  function afterShow() {\n    // this is brittle, if MenuImperative dom structure changes this could break\n    // but super specific to pagination, not really a concern elsewhere\n    ;(menuRef.current?.el?.firstChild as HTMLDivElement)?.focus()\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (e.key === 'Up' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      menuRef.current?.prev()\n    } else if (e.key === 'Down' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      menuRef.current?.next()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      menuRef.current?.select(e)\n    }\n  }\n\n  return (\n    <OverlayTrigger\n      role=\"listbox\"\n      passA11yPropsToOverlay\n      autoFocus\n      afterShow={afterShow}\n      overlay={\n        <PaginationMenu\n          activePage={activePage}\n          menuRef={menuRef}\n          onSelect={onSelect}\n          pages={pages}\n        />\n      }\n      placement=\"bottom-left\"\n      ref={ref}\n      trigger=\"click\"\n      {...props}\n    >\n      <DropdownButton\n        aria-labelledby={ariaLabelledby}\n        arrow\n        disabled={disabled}\n        id={id}\n        onKeyDown={onKeyDown}\n        role=\"combobox\"\n        variant=\"tertiary\"\n      >\n        {activePage}\n      </DropdownButton>\n    </OverlayTrigger>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"PaginationSelect.js","names":["times","React","DropdownButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","mergeRefs","StyledOverlay","noop","DEFAULT_MAX_HEIGHT","VIEWPORT_PADDING","computeAvailableHeight","triggerEl","rect","getBoundingClientRect","viewportHeight","window","innerHeight","spaceBelow","bottom","spaceAbove","top","availableSpace","Math","max","min","PaginationMenu","forwardRef","_ref","ref","activePage","maxHeight","menuRef","_ref$onSelect","onSelect","onSelect_","pages","props","_objectWithoutProperties","_excluded","ctx","lastItemRef","useRef","hasFooter","useEffect","_menuRef$current","current","highlightFirst","_menuRef$current2","_menuRef$current3","highlightSuggested","highlightSelected","onKeyDown","event","_menuRef$current4","currentPage","highlighted","key","_menuRef$current5","highlight","_menuRef$current6","stopPropagation","highlightLast","selection","hide","children","index","page","createElement","Item","item","selected","overlayStyle","undefined","shadowStrength","style","_extends","circular","Fragment","Options","slice","Footer","padding","length","PaginationSelect","_ref2","_ref2$activePage","ariaLabelledby","disabled","id","_ref2$pages","triggerRef","_React$useState","useState","_React$useState2","_slicedToArray","setMaxHeight","_React$useState3","_React$useState4","isOpen","setIsOpen","handleResize","addEventListener","removeEventListener","afterShow","_menuRef$current7","_menuRef$current7$el","_menuRef$current7$el$","el","firstChild","focus","afterHide","e","_menuRef$current8","preventDefault","prev","_menuRef$current9","next","_menuRef$current0","select","role","passA11yPropsToOverlay","autoFocus","overlay","placement","trigger","arrow","variant"],"sources":["../../src/Pagination/PaginationSelect.tsx"],"sourcesContent":["import { times } from 'ramda'\nimport React from 'react'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n  OverlayTrigger,\n  useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport { StyledOverlay } from './Pagination.styles'\nimport type { PageSelectProps, PaginationMenuProps } from './Pagination.types'\n\nconst noop = () => {}\n\nconst DEFAULT_MAX_HEIGHT = 300\nconst VIEWPORT_PADDING = 16\n\nfunction computeAvailableHeight(triggerEl: HTMLElement | null): number {\n  if (!triggerEl) {\n    return DEFAULT_MAX_HEIGHT\n  }\n\n  const rect = triggerEl.getBoundingClientRect()\n  const viewportHeight = window.innerHeight\n\n  const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING\n  const spaceAbove = rect.top - VIEWPORT_PADDING\n\n  const availableSpace = Math.max(spaceBelow, spaceAbove)\n\n  return Math.min(DEFAULT_MAX_HEIGHT, availableSpace)\n}\n\nconst PaginationMenu = React.forwardRef<HTMLDivElement, PaginationMenuProps>(\n  function PaginationMenu(\n    {\n      activePage,\n      maxHeight,\n      menuRef,\n      onSelect: onSelect_ = noop,\n      pages,\n      ...props\n    },\n    ref\n  ) {\n    const ctx = useOverlayTriggerContext()\n\n    const lastItemRef = React.useRef<HTMLDivElement>(null)\n\n    const hasFooter = pages > 10\n\n    React.useEffect(() => {\n      menuRef.current?.highlightFirst()\n    }, [menuRef])\n\n    React.useEffect(() => {\n      menuRef.current?.highlightSuggested()\n      menuRef.current?.highlightSelected()\n    }, [menuRef])\n\n    function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n      const currentPage = menuRef.current?.highlighted()\n\n      if (event.key === 'ArrowDown' || event.key === 'Down') {\n        // when on the second to last item, want to jump to the last item (in the footer)\n        if (currentPage === pages - 1 && lastItemRef.current) {\n          menuRef.current?.highlight(lastItemRef.current)\n        }\n      } else if (event.key === 'ArrowUp' || event.key === 'Up') {\n        // on the last item (in the footer), want to jump back to the second to last\n        // item back in the menu\n        if (hasFooter && currentPage === pages) {\n          event.stopPropagation()\n          menuRef.current?.highlightLast()\n        }\n      }\n    }\n\n    function onSelect(selection: Selection) {\n      onSelect_(selection)\n\n      ctx.hide(selection.event)\n    }\n\n    const children = times((index: number) => {\n      const page = index + 1\n\n      return (\n        <MenuImperative.Item\n          item={page}\n          key={index}\n          selected={page === activePage}\n          ref={lastItemRef}\n        >\n          {page}\n        </MenuImperative.Item>\n      )\n    }, pages)\n\n    const overlayStyle = maxHeight ? { maxHeight } : undefined\n\n    return (\n      <StyledOverlay ref={ref} shadowStrength={2} style={overlayStyle}>\n        <MenuImperative\n          circular\n          {...props}\n          ref={menuRef}\n          onKeyDown={onKeyDown}\n          onSelect={onSelect}\n        >\n          {hasFooter ? (\n            <>\n              <MenuImperative.Options>\n                {children.slice(0, -1)}\n              </MenuImperative.Options>\n              <MenuImperative.Footer padding=\"xs none\">\n                {children[children.length - 1]}\n              </MenuImperative.Footer>\n            </>\n          ) : (\n            <MenuImperative.Options>{children}</MenuImperative.Options>\n          )}\n        </MenuImperative>\n      </StyledOverlay>\n    )\n  }\n)\n\nexport const PaginationSelect = React.forwardRef<\n  HTMLButtonElement,\n  PageSelectProps\n>(function PaginationSelect(\n  {\n    activePage = 1,\n    [`aria-labelledby`]: ariaLabelledby,\n    disabled,\n    id,\n    onSelect,\n    pages = 0,\n    ...props\n  },\n  ref\n) {\n  const menuRef = React.useRef<MenuRef>(null)\n  const triggerRef = React.useRef<HTMLButtonElement>(null)\n  const [maxHeight, setMaxHeight] = React.useState<number | undefined>(\n    undefined\n  )\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  // Recompute height on viewport resize\n  React.useEffect(() => {\n    if (!isOpen) return\n\n    function handleResize() {\n      setMaxHeight(computeAvailableHeight(triggerRef.current))\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [isOpen])\n\n  // Safari has an issue with giving focus to buttons after clicking on them\n  // if the button or menu do not have focus, the keyboard navigation does not work,\n  // so just focus the menu when we open it\n  function afterShow() {\n    // this is brittle, if MenuImperative dom structure changes this could break\n    // but super specific to pagination, not really a concern elsewhere\n    ;(menuRef.current?.el?.firstChild as HTMLDivElement)?.focus()\n\n    // Compute available height\n    setIsOpen(true)\n    setMaxHeight(computeAvailableHeight(triggerRef.current))\n  }\n\n  function afterHide() {\n    setIsOpen(false)\n    setMaxHeight(undefined)\n  }\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (e.key === 'Up' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      menuRef.current?.prev()\n    } else if (e.key === 'Down' || e.key === 'ArrowDown') {\n      e.preventDefault()\n      menuRef.current?.next()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      menuRef.current?.select(e)\n    }\n  }\n\n  return (\n    <OverlayTrigger\n      role=\"listbox\"\n      passA11yPropsToOverlay\n      autoFocus\n      afterShow={afterShow}\n      afterHide={afterHide}\n      overlay={\n        <PaginationMenu\n          activePage={activePage}\n          maxHeight={maxHeight}\n          menuRef={menuRef}\n          onSelect={onSelect}\n          pages={pages}\n        />\n      }\n      placement=\"bottom-left\"\n      ref={mergeRefs(ref, triggerRef)}\n      trigger=\"click\"\n      {...props}\n    >\n      <DropdownButton\n        aria-labelledby={ariaLabelledby}\n        arrow\n        disabled={disabled}\n        id={id}\n        onKeyDown={onKeyDown}\n        role=\"combobox\"\n        variant=\"tertiary\"\n      >\n        {activePage}\n      </DropdownButton>\n    </OverlayTrigger>\n  )\n})\n"],"mappings":"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"}

package/dist/Panel/Panel.styles.js

@@ -11,15 +11,15 @@ var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
 var panel = /*#__PURE__*/css(["display:flex;align-items:center;padding:", "px;background:", ";"], spacing.lg, colors.white);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_35_0__sc-lidix2-0"
+  componentId: "core-12_37_0__sc-lidix2-0"
 })(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
 export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_35_0__sc-lidix2-1"
+  componentId: "core-12_37_0__sc-lidix2-1"
 })(["flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBackAction",
-  componentId: "core-12_35_0__sc-lidix2-2"
+  componentId: "core-12_37_0__sc-lidix2-2"
 })(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
   var $active = _ref.$active;
   return $active ? headerActionSize : 0;
@@ -35,38 +35,38 @@ export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledMoreMenu",
-  componentId: "core-12_35_0__sc-lidix2-3"
+  componentId: "core-12_37_0__sc-lidix2-3"
 })(["max-height:128px;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_35_0__sc-lidix2-4"
+  componentId: "core-12_37_0__sc-lidix2-4"
 })(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
 export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCloseButton",
-  componentId: "core-12_35_0__sc-lidix2-5"
+  componentId: "core-12_37_0__sc-lidix2-5"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_35_0__sc-lidix2-6"
+  componentId: "core-12_37_0__sc-lidix2-6"
 })(["height:100%;background:", ";overflow-y:auto;&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
   var secondaryBgColor = _ref5.secondaryBgColor;
   return secondaryBgColor ? colors.gray96 : colors.white;
 }, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
 export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
   displayName: "StyledPanel",
-  componentId: "core-12_35_0__sc-lidix2-7"
+  componentId: "core-12_37_0__sc-lidix2-7"
 })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
 export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterNotation",
-  componentId: "core-12_35_0__sc-lidix2-8"
+  componentId: "core-12_37_0__sc-lidix2-8"
 })(["flex-grow:1;"]);
 export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterActions",
-  componentId: "core-12_35_0__sc-lidix2-9"
+  componentId: "core-12_37_0__sc-lidix2-9"
 })(["", ""], gutter);
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_35_0__sc-lidix2-10"
+  componentId: "core-12_37_0__sc-lidix2-10"
 })(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
   var $hasShadow = _ref6.$hasShadow;
   return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);

package/dist/Pill/Pill.styles.js

@@ -6,18 +6,18 @@ import { PillColorPalets } from './Pill.colorPalette';
 var pillButtonSize = 16;
 export var StyledPill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPill",
-  componentId: "core-12_35_0__sc-99e1t5-0"
+  componentId: "core-12_37_0__sc-99e1t5-0"
 })(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
   var $color = _ref.$color;
   return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
 });
 export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_35_0__sc-99e1t5-1"
+  componentId: "core-12_37_0__sc-99e1t5-1"
 })(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
 export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledRemoveButton",
-  componentId: "core-12_35_0__sc-99e1t5-2"
+  componentId: "core-12_37_0__sc-99e1t5-2"
 })(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
   var $color = _ref2.$color;
   return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);

package/dist/PillSelect/PillSelect.styles.js

@@ -6,19 +6,19 @@ import { spacing } from '../_styles/spacing';
 var checkedIconPlaceholderWidth = 32;
 export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectOptionWrapper",
-  componentId: "core-12_35_0__sc-1ai2ze0-0"
+  componentId: "core-12_37_0__sc-1ai2ze0-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectCheckedContainer",
-  componentId: "core-12_35_0__sc-1ai2ze0-1"
+  componentId: "core-12_37_0__sc-1ai2ze0-1"
 })(["align-items:center;color:", ";display:inline-flex;padding-left:", "px;width:", "px;"], colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
 export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
   displayName: "PillSelectLabel",
-  componentId: "core-12_35_0__sc-1ai2ze0-2"
+  componentId: "core-12_37_0__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_35_0__sc-1ai2ze0-3"
+  componentId: "core-12_37_0__sc-1ai2ze0-3"
 })(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["pointer-events:none;"]);

package/dist/Popover/Popover.styles.js

@@ -5,7 +5,7 @@ import { getShadow } from '../_styles/shadows';
 export var popoverArrowSize = 6;
 export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledPopoverContent",
-  componentId: "core-12_35_0__sc-1cd0ihn-0"
+  componentId: "core-12_37_0__sc-1cd0ihn-0"
 })(["background-color:", ";border-radius:inherit;color:", ";display:inline-block;max-width:250px;position:relative;", ""], colors.white, colors.gray15, function (_ref) {
   var $block = _ref.$block,
     $fluid = _ref.$fluid;
@@ -15,6 +15,6 @@ export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPopover",
-  componentId: "core-12_35_0__sc-1cd0ihn-1"
+  componentId: "core-12_37_0__sc-1cd0ihn-1"
 })(["display:inline-block;border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], borderRadius.md, getShadow(3), colors.white);
 //# sourceMappingURL=Popover.styles.js.map

package/dist/Portal/Portal.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortal",
-  componentId: "core-12_35_0__sc-15o1h2-0"
+  componentId: "core-12_37_0__sc-15o1h2-0"
 })(["left:0;pointer-events:none;position:fixed;top:0;> *{pointer-events:all;}"]);
 //# sourceMappingURL=Portal.styles.js.map

package/dist/ProgressBar/ProgressBar.styles.js

@@ -7,11 +7,11 @@ var animationDelay = '300ms';
 var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
 export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
   displayName: "StyledProgressBarLoader",
-  componentId: "core-12_35_0__sc-vdy2wl-0"
+  componentId: "core-12_37_0__sc-vdy2wl-0"
 })([""]);
 export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgressBar",
-  componentId: "core-12_35_0__sc-vdy2wl-1"
+  componentId: "core-12_37_0__sc-vdy2wl-1"
 })(["overflow:hidden;position:relative;display:block;height:", "px;background-color:", ";border-radius:", "px;margin:", "px 0;transition:background-color 0s linear;", " ", ""], loaderGridUnit, function (_ref) {
   var $complete = _ref.$complete;
   return $complete ? colors.blue50 : colors.gray94;

package/dist/RadioButton/RadioButton.styles.js

@@ -9,7 +9,7 @@ export var dataQa = {
 var radioButtonSize = 20;
 export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledRadioButton",
-  componentId: "core-12_35_0__sc-nd95zs-0"
+  componentId: "core-12_37_0__sc-nd95zs-0"
 })(["color:", ";display:flex;position:relative;vertical-align:middle;& + &{margin-top:", "px;}", " ", ""], colors.gray15, spacing.md, function (_ref) {
   var $error = _ref.$error;
   return $error && css(["", ":before,", ":checked:not(:disabled) + ", ":before{border-color:", ";}", ":checked:disabled + ", ":before{border-color:", ";}"], StyledRadioButtonLabel, StyledRadioButtonInput, StyledRadioButtonLabel, colors.red50, StyledRadioButtonInput, StyledRadioButtonLabel, colors.gray85);
@@ -19,10 +19,10 @@ export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
 });
 export var StyledRadioButtonLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRadioButtonLabel",
-  componentId: "core-12_35_0__sc-nd95zs-1"
-})(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray70, radioButtonSize, radioButtonSize, radioButtonSize);
+  componentId: "core-12_37_0__sc-nd95zs-1"
+})(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray50, radioButtonSize, radioButtonSize, radioButtonSize);
 export var StyledRadioButtonInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledRadioButtonInput",
-  componentId: "core-12_35_0__sc-nd95zs-2"
+  componentId: "core-12_37_0__sc-nd95zs-2"
 })(["left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;&:focus:not(:checked),&[data-qa=", "]:not(:checked){&:not(:disabled) + ", ":before{", "}}&:focus:checked:not(:disabled),&[data-qa=", "]:checked:not(:disabled){+ ", ":before{box-shadow:0 0 0 2px ", ";}}&:checked + ", ":before{border:6px solid ", ";}&:disabled + ", ":before{border-color:", ";}&:disabled:checked + ", ":before{border-color:", ";}"], dataQa.focused, StyledRadioButtonLabel, getFocus(), dataQa.focused, StyledRadioButtonLabel, colors.blue40, StyledRadioButtonLabel, colors.blue50, StyledRadioButtonLabel, colors.gray85, StyledRadioButtonLabel, colors.blue85);
 //# sourceMappingURL=RadioButton.styles.js.map

package/dist/RadioButton/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["styled","css","getTypographyIntent","colors","getFocus","spacing","dataQa","focused","radioButtonSize","StyledRadioButton","label","withConfig","displayName","componentId","gray15","md","_ref","$error","StyledRadioButtonLabel","StyledRadioButtonInput","red50","gray85","_ref2","$children","span","white","gray70","input","blue40","blue50","blue85"],"sources":["../../src/RadioButton/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const dataQa = {\n  focused: 'core-radio-focused',\n}\n\nconst radioButtonSize = 20\n\nexport const StyledRadioButton = styled.label<{\n  $children?: React.ReactNode\n  $error?: boolean\n}>`\n  color: ${colors.gray15};\n  display: flex;\n  position: relative;\n  vertical-align: middle;\n\n  & + & {\n    margin-top: ${spacing.md}px;\n  }\n\n  ${({ $error }) =>\n    $error &&\n    css`\n      ${StyledRadioButtonLabel}:before,\n      ${StyledRadioButtonInput}:checked:not(:disabled) + ${StyledRadioButtonLabel}:before {\n        border-color: ${colors.red50};\n      }\n\n      ${StyledRadioButtonInput}:checked:disabled + ${StyledRadioButtonLabel}:before {\n        border-color: ${colors.gray85};\n      }\n    `}\n\n  ${({ $children }) =>\n    $children &&\n    css`\n      ${StyledRadioButtonLabel} {\n        &:before {\n          margin-right: ${spacing.md}px;\n        }\n      }\n    `}\n`\n\nexport const StyledRadioButtonLabel = styled.span`\n  ${getTypographyIntent('body')};\n\n  cursor: default;\n  display: flex;\n\n  &:before {\n    background: ${colors.white};\n    border-radius: 100%;\n    border: 2px solid ${colors.gray70};\n    content: '';\n    display: inline-block;\n    flex: 0;\n    height: ${radioButtonSize}px;\n    min-width: ${radioButtonSize}px;\n    width: ${radioButtonSize}px;\n  }\n`\n\nexport const StyledRadioButtonInput = styled.input`\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n\n  &:focus:not(:checked),\n  &[data-qa=${dataQa.focused}]:not(:checked) {\n    &:not(:disabled) + ${StyledRadioButtonLabel}:before {\n      ${getFocus()}\n    }\n  }\n\n  &:focus:checked:not(:disabled),\n  &[data-qa=${dataQa.focused}]:checked:not(:disabled) {\n    + ${StyledRadioButtonLabel}:before {\n      box-shadow: 0 0 0 2px ${colors.blue40};\n    }\n  }\n\n  &:checked + ${StyledRadioButtonLabel}:before {\n    border: 6px solid ${colors.blue50};\n  }\n\n  &:disabled + ${StyledRadioButtonLabel}:before {\n    border-color: ${colors.gray85};\n  }\n\n  &:disabled:checked + ${StyledRadioButtonLabel}:before {\n    border-color: ${colors.blue85};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,eAAe,GAAG,EAAE;AAE1B,OAAO,IAAMC,iBAAiB,gBAAGT,MAAM,CAACU,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2GAIlCV,MAAM,CAACW,MAAM,EAMNT,OAAO,CAACU,EAAE,EAGxB,UAAAC,IAAA;EAAA,IAAGC,MAAM,GAAAD,IAAA,CAANC,MAAM;EAAA,OACTA,MAAM,IACNhB,GAAG,uIACCiB,sBAAsB,EACtBC,sBAAsB,EAA6BD,sBAAsB,EACzDf,MAAM,CAACiB,KAAK,EAG5BD,sBAAsB,EAAuBD,sBAAsB,EACnDf,MAAM,CAACkB,MAAM,CAEhC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OACZA,SAAS,IACTtB,GAAG,2CACCiB,sBAAsB,EAEJb,OAAO,CAACU,EAAE,CAG/B;AAAA,EACJ;AAED,OAAO,IAAMG,sBAAsB,gBAAGlB,MAAM,CAACwB,IAAI,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gMAC7CX,mBAAmB,CAAC,MAAM,CAAC,EAMbC,MAAM,CAACsB,KAAK,EAENtB,MAAM,CAACuB,MAAM,EAIvBlB,eAAe,EACZA,eAAe,EACnBA,eAAe,CAE3B;AAED,OAAO,IAAMW,sBAAsB,gBAAGnB,MAAM,CAAC2B,KAAK,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6ZASpCP,MAAM,CAACC,OAAO,EACHW,sBAAsB,EACvCd,QAAQ,CAAC,CAAC,EAKJE,MAAM,CAACC,OAAO,EACpBW,sBAAsB,EACAf,MAAM,CAACyB,MAAM,EAI3BV,sBAAsB,EACdf,MAAM,CAAC0B,MAAM,EAGpBX,sBAAsB,EACnBf,MAAM,CAACkB,MAAM,EAGRH,sBAAsB,EAC3Bf,MAAM,CAAC2B,MAAM,CAEhC"}
+{"version":3,"file":"RadioButton.styles.js","names":["styled","css","getTypographyIntent","colors","getFocus","spacing","dataQa","focused","radioButtonSize","StyledRadioButton","label","withConfig","displayName","componentId","gray15","md","_ref","$error","StyledRadioButtonLabel","StyledRadioButtonInput","red50","gray85","_ref2","$children","span","white","gray50","input","blue40","blue50","blue85"],"sources":["../../src/RadioButton/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const dataQa = {\n  focused: 'core-radio-focused',\n}\n\nconst radioButtonSize = 20\n\nexport const StyledRadioButton = styled.label<{\n  $children?: React.ReactNode\n  $error?: boolean\n}>`\n  color: ${colors.gray15};\n  display: flex;\n  position: relative;\n  vertical-align: middle;\n\n  & + & {\n    margin-top: ${spacing.md}px;\n  }\n\n  ${({ $error }) =>\n    $error &&\n    css`\n      ${StyledRadioButtonLabel}:before,\n      ${StyledRadioButtonInput}:checked:not(:disabled) + ${StyledRadioButtonLabel}:before {\n        border-color: ${colors.red50};\n      }\n\n      ${StyledRadioButtonInput}:checked:disabled + ${StyledRadioButtonLabel}:before {\n        border-color: ${colors.gray85};\n      }\n    `}\n\n  ${({ $children }) =>\n    $children &&\n    css`\n      ${StyledRadioButtonLabel} {\n        &:before {\n          margin-right: ${spacing.md}px;\n        }\n      }\n    `}\n`\n\nexport const StyledRadioButtonLabel = styled.span`\n  ${getTypographyIntent('body')};\n\n  cursor: default;\n  display: flex;\n\n  &:before {\n    background: ${colors.white};\n    border-radius: 100%;\n    border: 2px solid ${colors.gray50};\n    content: '';\n    display: inline-block;\n    flex: 0;\n    height: ${radioButtonSize}px;\n    min-width: ${radioButtonSize}px;\n    width: ${radioButtonSize}px;\n  }\n`\n\nexport const StyledRadioButtonInput = styled.input`\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n\n  &:focus:not(:checked),\n  &[data-qa=${dataQa.focused}]:not(:checked) {\n    &:not(:disabled) + ${StyledRadioButtonLabel}:before {\n      ${getFocus()}\n    }\n  }\n\n  &:focus:checked:not(:disabled),\n  &[data-qa=${dataQa.focused}]:checked:not(:disabled) {\n    + ${StyledRadioButtonLabel}:before {\n      box-shadow: 0 0 0 2px ${colors.blue40};\n    }\n  }\n\n  &:checked + ${StyledRadioButtonLabel}:before {\n    border: 6px solid ${colors.blue50};\n  }\n\n  &:disabled + ${StyledRadioButtonLabel}:before {\n    border-color: ${colors.gray85};\n  }\n\n  &:disabled:checked + ${StyledRadioButtonLabel}:before {\n    border-color: ${colors.blue85};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,eAAe,GAAG,EAAE;AAE1B,OAAO,IAAMC,iBAAiB,gBAAGT,MAAM,CAACU,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2GAIlCV,MAAM,CAACW,MAAM,EAMNT,OAAO,CAACU,EAAE,EAGxB,UAAAC,IAAA;EAAA,IAAGC,MAAM,GAAAD,IAAA,CAANC,MAAM;EAAA,OACTA,MAAM,IACNhB,GAAG,uIACCiB,sBAAsB,EACtBC,sBAAsB,EAA6BD,sBAAsB,EACzDf,MAAM,CAACiB,KAAK,EAG5BD,sBAAsB,EAAuBD,sBAAsB,EACnDf,MAAM,CAACkB,MAAM,CAEhC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OACZA,SAAS,IACTtB,GAAG,2CACCiB,sBAAsB,EAEJb,OAAO,CAACU,EAAE,CAG/B;AAAA,EACJ;AAED,OAAO,IAAMG,sBAAsB,gBAAGlB,MAAM,CAACwB,IAAI,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gMAC7CX,mBAAmB,CAAC,MAAM,CAAC,EAMbC,MAAM,CAACsB,KAAK,EAENtB,MAAM,CAACuB,MAAM,EAIvBlB,eAAe,EACZA,eAAe,EACnBA,eAAe,CAE3B;AAED,OAAO,IAAMW,sBAAsB,gBAAGnB,MAAM,CAAC2B,KAAK,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6ZASpCP,MAAM,CAACC,OAAO,EACHW,sBAAsB,EACvCd,QAAQ,CAAC,CAAC,EAKJE,MAAM,CAACC,OAAO,EACpBW,sBAAsB,EACAf,MAAM,CAACyB,MAAM,EAI3BV,sBAAsB,EACdf,MAAM,CAAC0B,MAAM,EAGpBX,sBAAsB,EACnBf,MAAM,CAACkB,MAAM,EAGRH,sBAAsB,EAC3Bf,MAAM,CAAC2B,MAAM,CAEhC"}

package/dist/Required/Required.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredMark",
-  componentId: "core-12_35_0__sc-bja1ql-0"
+  componentId: "core-12_37_0__sc-bja1ql-0"
 })(["color:", ";", ""], colors.red50, function (_ref) {
   var $showLabel = _ref.$showLabel;
   if ($showLabel) {
@@ -15,10 +15,10 @@ export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
 });
 export var StyledRequiredContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredContainer",
-  componentId: "core-12_35_0__sc-bja1ql-1"
+  componentId: "core-12_37_0__sc-bja1ql-1"
 })(["", " ", " > &{margin-left:", "px;}"], getTypographyIntent('small'), StyledCheckboxLabel, spacing.xs);
 export var StyledRequiredText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledRequiredText",
-  componentId: "core-12_35_0__sc-bja1ql-2"
+  componentId: "core-12_37_0__sc-bja1ql-2"
 })(["font-style:italic;color:", ";margin-left:4px;"], colors.gray45);
 //# sourceMappingURL=Required.styles.js.map

package/dist/Search/Search.styles.js

@@ -33,22 +33,22 @@ export function getSearchInputStyles() {
 }
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_35_0__sc-3j8khv-0"
+  componentId: "core-12_37_0__sc-3j8khv-0"
 })(["", ""], getSearchInputStyles);
 var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_35_0__sc-3j8khv-1"
+  componentId: "core-12_37_0__sc-3j8khv-1"
 })(["position:absolute;top:", "px;"], buttonTop);
 export var StyledSearchButton = /*#__PURE__*/styled(StyledButton).withConfig({
   displayName: "StyledSearchButton",
-  componentId: "core-12_35_0__sc-3j8khv-2"
+  componentId: "core-12_37_0__sc-3j8khv-2"
 })([""]);
 export var StyledClearButton = /*#__PURE__*/styled(StyledButton).withConfig({
   displayName: "StyledClearButton",
-  componentId: "core-12_35_0__sc-3j8khv-3"
+  componentId: "core-12_37_0__sc-3j8khv-3"
 })([""]);
 export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearch",
-  componentId: "core-12_35_0__sc-3j8khv-4"
+  componentId: "core-12_37_0__sc-3j8khv-4"
 })(["position:relative;width:100%;", "{padding-right:", "px;}", "{right:", "px;}", "{right:", "px;}"], StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
 //# sourceMappingURL=Search.styles.js.map

package/dist/Section/Section.styles.js

@@ -6,15 +6,15 @@ import { getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledSectionBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionBanner",
-  componentId: "core-12_35_0__sc-1lxbrwv-0"
+  componentId: "core-12_37_0__sc-1lxbrwv-0"
 })(["margin-bottom:", "px;> * + *{margin-top:", "px;}"], spacing.sm, spacing.sm);
 export var StyledSectionInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionInner",
-  componentId: "core-12_35_0__sc-1lxbrwv-1"
+  componentId: "core-12_37_0__sc-1lxbrwv-1"
 })([""]);
 export var StyledSectionCollapseHeading = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionCollapseHeading",
-  componentId: "core-12_35_0__sc-1lxbrwv-2"
+  componentId: "core-12_37_0__sc-1lxbrwv-2"
 })(["align-self:flex-start;margin-right:", "px;"], spacing.sm);
 export var sectionClassnames = {
   divide: 'section--divide',
@@ -25,11 +25,11 @@ export var sectionClassnames = {
 };
 export var StyledSection = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSection",
-  componentId: "core-12_35_0__sc-1lxbrwv-3"
+  componentId: "core-12_37_0__sc-1lxbrwv-3"
 })(["padding-left:", "px;padding-right:", "px;padding-bottom:", "px;& > ", "{padding-top:", "px;}&.", "{& > ", "{border-top:1px solid ", ";}}&:first-child > ", "{border-top:0;}& &{padding-left:0;padding-right:0;&:first-child > ", "{border-top:1px solid ", ";}&:last-child{padding-bottom:0;}}", ":last-of-type{margin-bottom:", "px;}", " + &&&{padding-top:", "px;}"], spacing.lg, spacing.lg, spacing.lg, StyledSectionInner, spacing.lg, sectionClassnames.divide, StyledSectionInner, colors.gray85, StyledSectionInner, StyledSectionInner, colors.gray85, StyledFormRow, spacing.lg * -1, StyledFormRow, spacing.xs);
 export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionContentRegion",
-  componentId: "core-12_35_0__sc-1lxbrwv-4"
+  componentId: "core-12_37_0__sc-1lxbrwv-4"
 })(["padding-top:", "px;&:focus-visible{", "}", " ", " & > :not(", ") + ", "{padding-top:", "px;}", " ", " &:last-of-type{padding-bottom:0;}"], spacing.sm, getFocus(), function (_ref) {
   var $closed = _ref.$closed;
   return $closed && css(["padding-top:0;"]);
@@ -39,10 +39,10 @@ export var StyledSectionContentRegion = /*#__PURE__*/styled.div.withConfig({
 }, StyledSection, StyledSection, spacing.xl, StyledSection, StyledSection);
 export var StyledSectionHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSectionHeader",
-  componentId: "core-12_35_0__sc-1lxbrwv-5"
+  componentId: "core-12_37_0__sc-1lxbrwv-5"
 })(["align-items:center;display:flex;min-height:36px;word-break:break-word;"]);
 export var StyledTitle = /*#__PURE__*/styled(Title).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_35_0__sc-1lxbrwv-6"
+  componentId: "core-12_37_0__sc-1lxbrwv-6"
 })(["width:100%;"]);
 //# sourceMappingURL=Section.styles.js.map

package/dist/SegmentedController/SegmentedController.js

@@ -236,7 +236,7 @@ export var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref7, ref)
   return overlay ? /*#__PURE__*/React.createElement(TooltipBase, _extends({}, props, {
     overlay: overlay,
     ref: ref,
-    trigger: "hover"
+    trigger: ['hover', 'focus']
   }), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
 var withState = function withState(config) {