@procore/core-react 12.41.0 → 12.43.0

package/dist/OverlayTrigger/a11yPresets.js

@@ -4,9 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { ariaHideOutside } from '@react-aria/overlays';
 import { useId, useLabels } from '@react-aria/utils';
-import React from 'react';
 var emptyObj = {};
 var returnEmpty = function returnEmpty() {
   return {};
@@ -53,6 +51,7 @@ var a11yPresets = {
 
 export function getA11yPreset(role) {
   switch (role) {
+    case 'alertdialog':
     case 'dialog':
     case 'listbox':
     case 'menu':
@@ -167,36 +166,29 @@ export function useLabelledPopup(_ref6) {
  * - Focus management props to work with FocusScope
  *
  * For modal dialog experiences (full screen locked experiences):
- * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
- * - (it will in breaking) Prevent scroll
+ * - what dialog above does
+ * - adds aria-modal="true"
+ * - this hook does not determine where to mount or how many modals are open
  *
- * For either experiences, you still MUST support:
- * - have Escape key to close (It should!)
- * - have click outside, like scrim click
+ * For either experiences, you still MUST support a way to close by mouse and keyboard.
+ *
+ * Using `aria-modal`, you need to keep additional overlay content inside, so
+ * portals must be smart enough to know where other overlays
+ * like tooltips or toasts should go to remain visible to screen readers (inside the aria-modal).
  *
- * _More about 'modal dialog' and `isModal` not using `aria-modal`:_
  * Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
  * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
  *  Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
  * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
- * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
- * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
- * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
- * [Screen Reader aria modal support table](https://a11ysupport.io/tech/aria/aria-modal_attribute) - [MS Narrator Edge aria modal support](https://a11ysupport.io/tests/apg__modal-dialog-example/aria__aria-modal_attribute/convey_presence/narrator/edge)
- * _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
- * Using aria-modal, then we would need to involve Portal and so tooltips
- * or Toasts could mount within the visible aria-modal container.
  */
-
 export function useModalDialogLike(_ref7) {
   var ariaDescribedby = _ref7['aria-describedby'],
     ariaDetails = _ref7['aria-details'],
     ariaLabelledby = _ref7['aria-labelledby'],
     ariaLabel = _ref7['aria-label'],
+    ariaModal = _ref7['aria-modal'],
     id = _ref7.id,
-    isModal = _ref7.isModal,
     isOpen = _ref7.isOpen,
-    ref = _ref7.ref,
     _ref7$role = _ref7.role,
     role = _ref7$role === void 0 ? 'dialog' : _ref7$role;
   var _useLabelled2 = useLabelled({
@@ -207,23 +199,27 @@ export function useModalDialogLike(_ref7) {
     }),
     labelProps = _useLabelled2.labelProps,
     widgetProps = _useLabelled2.widgetProps;
-  var dialogProps = _objectSpread(_objectSpread({}, widgetProps), {}, {
+  var dialogProps = _objectSpread(_objectSpread({
+    'aria-modal': ariaModal
+  }, widgetProps), {}, {
     id: id,
     role: role,
     tabIndex: -1
   });
 
   // usePreventScroll({
-  //   isDisabled: isModal ? !isOpen : true,
+  //   isDisabled: ariaModal ? !isOpen : true,
   // })
 
   // Fills aria-modal=true
-  React.useLayoutEffect(function () {
-    if (isModal && isOpen && ref.current) {
-      // Could add additional visible element refs here
-      return ariaHideOutside([ref.current]);
-    }
-  }, [isModal, isOpen, ref]);
+  // import { ariaHideOutside } from '@react-aria/overlays'
+  // React.useLayoutEffect(() => {
+  //   if (isModal && isOpen && ref.current) {
+  //     // Could add additional visible element refs here
+  //     return ariaHideOutside([ref.current])
+  //   }
+  // }, [isModal, isOpen, ref])
+
   return {
     dialogProps: dialogProps,
     labelProps: labelProps,
@@ -251,6 +247,11 @@ export function useOverlayTriggerA11y(_ref8) {
     id_ = _ref8.id,
     isOpen = _ref8.isOpen,
     role = _ref8.role;
+  if (
+  // @ts-expect-error Checking for invalid usage
+  role === 'alertdialog') {
+    console.error('@procore/core-react: useOverlayTriggerA11y role alertdialog is not supported because it requires aria-modal to be true. This is intended for non-modal dialogs.');
+  }
   var isDialog = role === 'dialog';
   var id = useId(id_);
   var _getA11yPreset3 = getA11yPreset(role),
@@ -273,8 +274,9 @@ export function useOverlayTriggerA11y(_ref8) {
       'aria-details': ariaDetails,
       'aria-labelledby': ariaLabelledby,
       'aria-label': ariaLabel,
+      'aria-modal': undefined,
+      // OverlayTrigger only supports non-modal dialogs
       id: id,
-      isModal: false,
       isOpen: isOpen
     }),
     dialogProps = _useModalDialogLike.dialogProps,

package/dist/OverlayTrigger/a11yPresets.js.map

@@ -1 +1 @@
-{"version":3,"file":"a11yPresets.js","names":["ariaHideOutside","useId","useLabels","React","emptyObj","returnEmpty","a11yPresets","haspopup","getOverlayProps","_ref","role","overlayId","id","getTriggerProps","_ref2","isVisible","undefined","tooltip","_ref3","_ref4","getA11yPreset","useLabelled","props","_ref5","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","ariaLabelOnly","labelledId","widgetId","fieldProps","descriptionProps","labelProps","widgetProps","_objectSpread","useLabelledPopup","_ref6","_getA11yPreset$getTri","_getA11yPreset","_getA11yPreset$getOve","_getA11yPreset2","id_","isOpen","_ref6$type","type","popupRole","popupId_","popupId","presetArgs","triggerProps","call","overlayProps","_useLabelled","popupProps","useModalDialogLike","_ref7","isModal","ref","_ref7$role","_useLabelled2","dialogProps","tabIndex","useLayoutEffect","current","focusScopeProps","autoFocus","contain","restoreFocus","useOverlayTriggerA11y","_ref8","alwaysAriaVisible","canPropOverlayUp","isDialog","_getA11yPreset3","overlayA11yProps","wrapperA11yProps","_useModalDialogLike","portalProps","wrapperFinalProps","focusScopeFinalProps","wrapperProps"],"sources":["../../src/OverlayTrigger/a11yPresets.ts"],"sourcesContent":["import { ariaHideOutside } from '@react-aria/overlays'\nimport { useId, useLabels } from '@react-aria/utils'\nimport type { AriaAttributes } from 'react'\nimport React from 'react'\nimport type { OverlayTriggerRole } from './OverlayTrigger.types'\n\nconst emptyObj = {}\nconst returnEmpty: GetA11yProps = () => ({})\n\ntype GetA11yProps = (props: {\n  role: OverlayTriggerRole\n  isVisible: boolean\n  overlayId: string\n}) => AriaAttributes & { id?: string }\n\nconst a11yPresets: Record<\n  'tooltip' | 'haspopup',\n  {\n    getOverlayProps: GetA11yProps\n    getTriggerProps: GetA11yProps\n  }\n> = {\n  haspopup: {\n    getOverlayProps: ({ role, overlayId }) => ({\n      id: overlayId,\n      role,\n    }),\n    getTriggerProps: ({ role, isVisible, overlayId }) => ({\n      'aria-expanded': isVisible,\n      'aria-controls': isVisible ? overlayId : undefined,\n      'aria-haspopup': role as 'dialog' | 'listbox' | 'menu',\n    }),\n  },\n  tooltip: {\n    getOverlayProps: ({ overlayId }) => ({\n      role: 'tooltip',\n      id: overlayId,\n    }),\n    getTriggerProps: ({ isVisible, overlayId }) => ({\n      'aria-describedby': isVisible ? overlayId : undefined,\n      // 'aria-expanded': isVisible,\n    }),\n  },\n}\n\nexport function getA11yPreset(role?: OverlayTriggerRole) {\n  switch (role) {\n    case 'dialog':\n    case 'listbox':\n    case 'menu':\n      return a11yPresets.haspopup\n    case 'tooltip':\n      return a11yPresets.tooltip\n    case 'none':\n      return {\n        getOverlayProps: (() => ({ role: 'none' })) as GetA11yProps,\n        getTriggerProps: returnEmpty,\n      }\n    default:\n      return {\n        getOverlayProps: returnEmpty,\n        getTriggerProps: returnEmpty,\n      }\n  }\n}\n\ntype LabelConfig = {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  /**\n   * ID for the widget itself\n   */\n  id?: string\n}\n\ntype DialogBase = LabelConfig & {\n  isOpen: boolean\n  role?: 'dialog'\n}\n\ntype NonModalDialogConfig = DialogBase & {\n  isModal?: never | false\n}\n\ntype ModalDialogConfig = DialogBase & {\n  /**\n   *\n   * To enable `ariaHideOutside`. Set `isModal` to false to disable.\n   * @a11y Replicates `aria-modal` inert outside content\n   * @default false\n   */\n  isModal: true\n  ref: React.RefObject<HTMLElement>\n}\n\ntype ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig\n\ntype OverlayTriggerA11yConfig = LabelConfig & {\n  /**\n   * Assure `aria-hidden` is not applied. A code side-effect\n   * from `ariaHideOutside` hiding everthing outside the scope.\n   */\n  alwaysAriaVisible?: boolean\n  /**\n   * When properties should be passed to the overlay UI itself,\n   * and not the wrapper element.\n   */\n  canPropOverlayUp: boolean\n  isOpen: boolean\n  role?: OverlayTriggerRole\n  // ref: React.RefObject<HTMLElement> // Only necessary for modal\n}\n\n/**\n * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.\n *\n * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.\n * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)\n */\nexport function useLabelled(props?: LabelConfig) {\n  const {\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    id,\n  } = props || (emptyObj as LabelConfig)\n  const ariaLabelOnly = ariaLabel && !ariaLabelledby\n\n  // Generate an ID. We want to use this unless they are using only aria-label\n  const labelledId = useId(ariaLabelledby)\n\n  // Merges aria-label and aria-labelledby into aria-labelledby when both exist\n  const widgetId = useId(id)\n  let fieldProps = useLabels({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelOnly ? undefined : labelledId,\n    id: widgetId,\n  })\n\n  return {\n    descriptionProps: { id: ariaDescribedby },\n    labelProps: { id: ariaLabelOnly ? undefined : labelledId },\n    widgetProps: {\n      ...fieldProps,\n      'aria-describedby': ariaDescribedby,\n      'aria-details': ariaDetails,\n    },\n  }\n}\n\n/**\n * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).\n * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)\n * but with element title support.\n * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)\n */\nexport function useLabelledPopup({\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  id: id_,\n  isOpen,\n  type = 'button',\n  popupRole,\n  popupId: popupId_,\n}: LabelConfig & {\n  isOpen: boolean\n  popupId?: string\n  type?: 'button' | 'combobox' // Role? Not used. Show concept that popups manage 2 roles\n  popupRole: 'dialog' | 'menu' | 'listbox'\n}) {\n  /** Web spec default for aria-haspopup=true is menu, unless element has role combobox, which have an implicit aria-haspopup value of listbox. */\n  // const popupRole = popupRole_ || type === 'combobox' ? 'listbox' : 'menu'\n  const id = useId(id_)\n  const popupId = useId(popupId_)\n\n  const presetArgs = {\n    isVisible: isOpen,\n    role: popupRole,\n    overlayId: popupId,\n  }\n\n  const triggerProps = getA11yPreset(popupRole).getTriggerProps?.(presetArgs)\n  const overlayProps = getA11yPreset(popupRole).getOverlayProps?.(presetArgs)\n\n  const { labelProps, widgetProps } = useLabelled({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    id,\n  })\n\n  return {\n    labelProps,\n    popupProps: { role: popupRole, ...widgetProps, ...overlayProps },\n    triggerProps,\n  }\n}\n\n/**\n * For dialog experiences:\n * - Has role dialog and aria linked title props\n * - Focus management props to work with FocusScope\n *\n * For modal dialog experiences (full screen locked experiences):\n * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)\n * - (it will in breaking) Prevent scroll\n *\n * For either experiences, you still MUST support:\n * - have Escape key to close (It should!)\n * - have click outside, like scrim click\n *\n * _More about 'modal dialog' and `isModal` not using `aria-modal`:_\n * Setting aria-modal=\"true\" tells assistive technologies to let the user know the ability to interact with,\n * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.\n *  Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.\n * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).\n * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on\n * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a\n * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.\n * [Screen Reader aria modal support table](https://a11ysupport.io/tech/aria/aria-modal_attribute) - [MS Narrator Edge aria modal support](https://a11ysupport.io/tests/apg__modal-dialog-example/aria__aria-modal_attribute/convey_presence/narrator/edge)\n * _Future Considerations:_ Replace ariaHideOutside with aria-modal=\"true\".\n * Using aria-modal, then we would need to involve Portal and so tooltips\n * or Toasts could mount within the visible aria-modal container.\n */\n\nexport function useModalDialogLike({\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  id,\n  isModal,\n  isOpen,\n  // @ts-expect-error\n  ref,\n  role = 'dialog',\n}: ModalDialogLikeConfig) {\n  const { labelProps, widgetProps } = useLabelled({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n  })\n\n  const dialogProps = {\n    // 'aria-modal': true,\n    ...widgetProps,\n    id,\n    role,\n    tabIndex: -1,\n  }\n\n  // usePreventScroll({\n  //   isDisabled: isModal ? !isOpen : true,\n  // })\n\n  // Fills aria-modal=true\n  React.useLayoutEffect(() => {\n    if (isModal && isOpen && ref.current) {\n      // Could add additional visible element refs here\n      return ariaHideOutside([ref.current])\n    }\n  }, [isModal, isOpen, ref])\n\n  return {\n    dialogProps,\n    labelProps,\n    focusScopeProps: {\n      autoFocus: true,\n      contain: true,\n      restoreFocus: true,\n    },\n  }\n}\n\n/**\n * Takes many roles and determines props necessary for DOM/components.\n * **Side effect of role=\"dialog\"**, current and any content added later\n * outside of the element (like by portals) will get `aria-hidden=true`\n * to replace the `aria-modal=true` `inert` nature.\n * @see useModalDialogLike */\nexport function useOverlayTriggerA11y({\n  alwaysAriaVisible,\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  // can we remove this? have it role based? be optional?\n  canPropOverlayUp,\n  id: id_,\n  isOpen,\n  role,\n}: OverlayTriggerA11yConfig) {\n  const isDialog = role === 'dialog'\n\n  const id = useId(id_)\n\n  const { getTriggerProps, getOverlayProps } = getA11yPreset(role)\n\n  const triggerProps = getTriggerProps?.({\n    isVisible: isOpen,\n    role: role!,\n    overlayId: id,\n  })\n\n  const overlayA11yProps = getOverlayProps?.({\n    isVisible: isOpen,\n    role: role!,\n    overlayId: id,\n  })\n\n  const wrapperA11yProps = !canPropOverlayUp ? overlayA11yProps : emptyObj\n  const overlayProps = canPropOverlayUp ? overlayA11yProps : emptyObj\n\n  const { dialogProps, labelProps, focusScopeProps } = useModalDialogLike({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    id,\n    isModal: false,\n    isOpen,\n  })\n\n  /**  This is a code side-effect from ariaHideOutside hiding everthing */\n  const portalProps =\n    role === 'tooltip' || alwaysAriaVisible // || !role\n      ? { 'data-react-aria-top-layer': true, 'data-live-announcer': true }\n      : emptyObj\n\n  /**\n   * If it is a dialog, we can merge the dialog props with any haspopup props\n   */\n  const wrapperFinalProps = isDialog\n    ? {\n        ...wrapperA11yProps,\n        ...dialogProps,\n      }\n    : wrapperA11yProps\n\n  /**\n   * If it is a dialog, we have opinions on `FocusScope` props.\n   */\n  const focusScopeFinalProps = isDialog\n    ? focusScopeProps\n    : (emptyObj as {\n        autoFocus?: boolean\n        contain?: boolean\n        restoreFocus?: boolean\n      })\n\n  return {\n    focusScopeProps: focusScopeFinalProps,\n    labelProps,\n    overlayProps,\n    portalProps,\n    triggerProps,\n    wrapperProps: wrapperFinalProps,\n  }\n}\n\n// WIP Example combobox\n// function useCombox({\n//   controls,\n//   isOpen = false,\n// }: {\n//   controls: 'dialog' | 'menu' | 'listbox'\n//   isOpen: boolean\n// }) {\n//   const { labelProps, popupProps, triggerProps } = useLabelledPopup({\n//     role: controls,\n//     type: 'combobox',\n//     isOpen,\n//   })\n// dispatch between elements.\n// NOTE combobox has two labels, that could be different\n// one for the trigger input (typically the form label)\n// second for the thing it controls (listbox, dialog)\n// - label id=1\n// - input role='combobox' aria-labelledby=1\n// - div role={controls} aria-label\n// Also, any icon only buttons like clear or open should have a\n// label and -1 tabindex. No nested interactive roles.\n// }\n"],"mappings":"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"}
+{"version":3,"file":"a11yPresets.js","names":["useId","useLabels","emptyObj","returnEmpty","a11yPresets","haspopup","getOverlayProps","_ref","role","overlayId","id","getTriggerProps","_ref2","isVisible","undefined","tooltip","_ref3","_ref4","getA11yPreset","useLabelled","props","_ref5","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","ariaLabelOnly","labelledId","widgetId","fieldProps","descriptionProps","labelProps","widgetProps","_objectSpread","useLabelledPopup","_ref6","_getA11yPreset$getTri","_getA11yPreset","_getA11yPreset$getOve","_getA11yPreset2","id_","isOpen","_ref6$type","type","popupRole","popupId_","popupId","presetArgs","triggerProps","call","overlayProps","_useLabelled","popupProps","useModalDialogLike","_ref7","ariaModal","_ref7$role","_useLabelled2","dialogProps","tabIndex","focusScopeProps","autoFocus","contain","restoreFocus","useOverlayTriggerA11y","_ref8","alwaysAriaVisible","canPropOverlayUp","console","error","isDialog","_getA11yPreset3","overlayA11yProps","wrapperA11yProps","_useModalDialogLike","portalProps","wrapperFinalProps","focusScopeFinalProps","wrapperProps"],"sources":["../../src/OverlayTrigger/a11yPresets.ts"],"sourcesContent":["import { useId, useLabels } from '@react-aria/utils'\nimport type { AriaAttributes } from 'react'\nimport type { OverlayTriggerRole } from './OverlayTrigger.types'\n\nconst emptyObj = {}\nconst returnEmpty: GetA11yProps = () => ({})\n\ntype GetA11yProps = (props: {\n  role: OverlayTriggerRole\n  isVisible: boolean\n  overlayId: string\n}) => AriaAttributes & { id?: string }\n\nconst a11yPresets: Record<\n  'tooltip' | 'haspopup',\n  {\n    getOverlayProps: GetA11yProps\n    getTriggerProps: GetA11yProps\n  }\n> = {\n  haspopup: {\n    getOverlayProps: ({ role, overlayId }) => ({\n      id: overlayId,\n      role,\n    }),\n    getTriggerProps: ({ role, isVisible, overlayId }) => ({\n      'aria-expanded': isVisible,\n      'aria-controls': isVisible ? overlayId : undefined,\n      'aria-haspopup': role as 'dialog' | 'listbox' | 'menu',\n    }),\n  },\n  tooltip: {\n    getOverlayProps: ({ overlayId }) => ({\n      role: 'tooltip',\n      id: overlayId,\n    }),\n    getTriggerProps: ({ isVisible, overlayId }) => ({\n      'aria-describedby': isVisible ? overlayId : undefined,\n      // 'aria-expanded': isVisible,\n    }),\n  },\n}\n\nexport function getA11yPreset(role?: OverlayTriggerRole | 'alertdialog') {\n  switch (role) {\n    case 'alertdialog':\n    case 'dialog':\n    case 'listbox':\n    case 'menu':\n      return a11yPresets.haspopup\n    case 'tooltip':\n      return a11yPresets.tooltip\n    case 'none':\n      return {\n        getOverlayProps: (() => ({ role: 'none' })) as GetA11yProps,\n        getTriggerProps: returnEmpty,\n      }\n    default:\n      return {\n        getOverlayProps: returnEmpty,\n        getTriggerProps: returnEmpty,\n      }\n  }\n}\n\ntype LabelConfig = {\n  'aria-describedby'?: string\n  'aria-details'?: string\n  'aria-labelledby'?: string\n  'aria-label'?: string\n  /**\n   * ID for the widget itself\n   */\n  id?: string\n}\n\ntype DialogBase = LabelConfig & {\n  isOpen: boolean\n  role?: 'dialog' | 'alertdialog'\n}\n\ntype NonModalDialogConfig = DialogBase & {\n  'aria-modal'?: never | false\n}\n\ntype ModalDialogConfig = DialogBase & {\n  /**\n   * @a11y This will add `aria-modal={true}` and rely on browsers to\n   * handle making outside content inert.\n   * @default false\n   */\n  'aria-modal': true\n  // ref: React.RefObject<HTMLElement>\n}\n\ntype ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig\n\ntype OverlayTriggerA11yConfig = LabelConfig & {\n  /**\n   * Assure `aria-hidden` is not applied. A code side-effect\n   * from `ariaHideOutside` hiding everthing outside the scope.\n   */\n  alwaysAriaVisible?: boolean\n  /**\n   * When properties should be passed to the overlay UI itself,\n   * and not the wrapper element.\n   */\n  canPropOverlayUp: boolean\n  isOpen: boolean\n  role?: OverlayTriggerRole\n}\n\n/**\n * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.\n *\n * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.\n * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)\n */\nexport function useLabelled(props?: LabelConfig) {\n  const {\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    id,\n  } = props || (emptyObj as LabelConfig)\n  const ariaLabelOnly = ariaLabel && !ariaLabelledby\n\n  // Generate an ID. We want to use this unless they are using only aria-label\n  const labelledId = useId(ariaLabelledby)\n\n  // Merges aria-label and aria-labelledby into aria-labelledby when both exist\n  const widgetId = useId(id)\n  let fieldProps = useLabels({\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelOnly ? undefined : labelledId,\n    id: widgetId,\n  })\n\n  return {\n    descriptionProps: { id: ariaDescribedby },\n    labelProps: { id: ariaLabelOnly ? undefined : labelledId },\n    widgetProps: {\n      ...fieldProps,\n      'aria-describedby': ariaDescribedby,\n      'aria-details': ariaDetails,\n    },\n  }\n}\n\n/**\n * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).\n * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)\n * but with element title support.\n * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)\n */\nexport function useLabelledPopup({\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  id: id_,\n  isOpen,\n  type = 'button',\n  popupRole,\n  popupId: popupId_,\n}: LabelConfig & {\n  isOpen: boolean\n  popupId?: string\n  type?: 'button' | 'combobox' // Role? Not used. Show concept that popups manage 2 roles\n  popupRole: 'dialog' | 'menu' | 'listbox'\n}) {\n  /** Web spec default for aria-haspopup=true is menu, unless element has role combobox, which have an implicit aria-haspopup value of listbox. */\n  // const popupRole = popupRole_ || type === 'combobox' ? 'listbox' : 'menu'\n  const id = useId(id_)\n  const popupId = useId(popupId_)\n\n  const presetArgs = {\n    isVisible: isOpen,\n    role: popupRole,\n    overlayId: popupId,\n  }\n\n  const triggerProps = getA11yPreset(popupRole).getTriggerProps?.(presetArgs)\n  const overlayProps = getA11yPreset(popupRole).getOverlayProps?.(presetArgs)\n\n  const { labelProps, widgetProps } = useLabelled({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    id,\n  })\n\n  return {\n    labelProps,\n    popupProps: { role: popupRole, ...widgetProps, ...overlayProps },\n    triggerProps,\n  }\n}\n\n/**\n * For dialog experiences:\n * - Has role dialog and aria linked title props\n * - Focus management props to work with FocusScope\n *\n * For modal dialog experiences (full screen locked experiences):\n * - what dialog above does\n * - adds aria-modal=\"true\"\n * - this hook does not determine where to mount or how many modals are open\n *\n * For either experiences, you still MUST support a way to close by mouse and keyboard.\n *\n * Using `aria-modal`, you need to keep additional overlay content inside, so\n * portals must be smart enough to know where other overlays\n * like tooltips or toasts should go to remain visible to screen readers (inside the aria-modal).\n *\n * Setting aria-modal=\"true\" tells assistive technologies to let the user know the ability to interact with,\n * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.\n *  Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.\n * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).\n */\nexport function useModalDialogLike({\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  'aria-modal': ariaModal,\n  id,\n  isOpen,\n  role = 'dialog',\n}: ModalDialogLikeConfig) {\n  const { labelProps, widgetProps } = useLabelled({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n  })\n\n  const dialogProps = {\n    'aria-modal': ariaModal,\n    ...widgetProps,\n    id,\n    role,\n    tabIndex: -1,\n  }\n\n  // usePreventScroll({\n  //   isDisabled: ariaModal ? !isOpen : true,\n  // })\n\n  // Fills aria-modal=true\n  // import { ariaHideOutside } from '@react-aria/overlays'\n  // React.useLayoutEffect(() => {\n  //   if (isModal && isOpen && ref.current) {\n  //     // Could add additional visible element refs here\n  //     return ariaHideOutside([ref.current])\n  //   }\n  // }, [isModal, isOpen, ref])\n\n  return {\n    dialogProps,\n    labelProps,\n    focusScopeProps: {\n      autoFocus: true,\n      contain: true,\n      restoreFocus: true,\n    },\n  }\n}\n\n/**\n * Takes many roles and determines props necessary for DOM/components.\n * **Side effect of role=\"dialog\"**, current and any content added later\n * outside of the element (like by portals) will get `aria-hidden=true`\n * to replace the `aria-modal=true` `inert` nature.\n * @see useModalDialogLike */\nexport function useOverlayTriggerA11y({\n  alwaysAriaVisible,\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-labelledby': ariaLabelledby,\n  'aria-label': ariaLabel,\n  // can we remove this? have it role based? be optional?\n  canPropOverlayUp,\n  id: id_,\n  isOpen,\n  role,\n}: OverlayTriggerA11yConfig) {\n  if (\n    // @ts-expect-error Checking for invalid usage\n    role === 'alertdialog'\n  ) {\n    console.error(\n      '@procore/core-react: useOverlayTriggerA11y role alertdialog is not supported because it requires aria-modal to be true. This is intended for non-modal dialogs.'\n    )\n  }\n  const isDialog = role === 'dialog'\n\n  const id = useId(id_)\n\n  const { getTriggerProps, getOverlayProps } = getA11yPreset(role)\n\n  const triggerProps = getTriggerProps?.({\n    isVisible: isOpen,\n    role: role!,\n    overlayId: id,\n  })\n\n  const overlayA11yProps = getOverlayProps?.({\n    isVisible: isOpen,\n    role: role!,\n    overlayId: id,\n  })\n\n  const wrapperA11yProps = !canPropOverlayUp ? overlayA11yProps : emptyObj\n  const overlayProps = canPropOverlayUp ? overlayA11yProps : emptyObj\n\n  const { dialogProps, labelProps, focusScopeProps } = useModalDialogLike({\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    'aria-modal': undefined, // OverlayTrigger only supports non-modal dialogs\n    id,\n    isOpen,\n  })\n\n  /**  This is a code side-effect from ariaHideOutside hiding everthing */\n  const portalProps =\n    role === 'tooltip' || alwaysAriaVisible // || !role\n      ? { 'data-react-aria-top-layer': true, 'data-live-announcer': true }\n      : emptyObj\n\n  /**\n   * If it is a dialog, we can merge the dialog props with any haspopup props\n   */\n  const wrapperFinalProps = isDialog\n    ? {\n        ...wrapperA11yProps,\n        ...dialogProps,\n      }\n    : wrapperA11yProps\n\n  /**\n   * If it is a dialog, we have opinions on `FocusScope` props.\n   */\n  const focusScopeFinalProps = isDialog\n    ? focusScopeProps\n    : (emptyObj as {\n        autoFocus?: boolean\n        contain?: boolean\n        restoreFocus?: boolean\n      })\n\n  return {\n    focusScopeProps: focusScopeFinalProps,\n    labelProps,\n    overlayProps,\n    portalProps,\n    triggerProps,\n    wrapperProps: wrapperFinalProps,\n  }\n}\n\n// WIP Example combobox\n// function useCombox({\n//   controls,\n//   isOpen = false,\n// }: {\n//   controls: 'dialog' | 'menu' | 'listbox'\n//   isOpen: boolean\n// }) {\n//   const { labelProps, popupProps, triggerProps } = useLabelledPopup({\n//     role: controls,\n//     type: 'combobox',\n//     isOpen,\n//   })\n// dispatch between elements.\n// NOTE combobox has two labels, that could be different\n// one for the trigger input (typically the form label)\n// second for the thing it controls (listbox, dialog)\n// - label id=1\n// - input role='combobox' aria-labelledby=1\n// - div role={controls} aria-label\n// Also, any icon only buttons like clear or open should have a\n// label and -1 tabindex. No nested interactive roles.\n// }\n"],"mappings":"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"}

package/dist/PageLayout/PageLayout.styles.d.ts

@@ -10,7 +10,7 @@ export declare const StyledPageTitle: import("styled-components/dist/types").ISt
 export declare const StyledPageBreadcrumbs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLElement> | ((instance: HTMLElement | null) => void) | null | undefined;
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
 }>, never>, never>> & string;
 export declare const StyledPageBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/PageLayout/PageLayout.styles.js

@@ -11,52 +11,52 @@ var outerPageSpacing = spacing.lg;
 var outerPageSpacingSmaller = spacing.md;
 export var StyledPageHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_41_0__sc-1cvdbsv-0"
+  componentId: "core-12_43_0__sc-1cvdbsv-0"
 })(["padding-top:", "px;padding-right:", "px;padding-left:", "px;@media ", "{padding-right:", "px;padding-left:", "px;}", ""], headerVerticalSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, function (_ref) {
   var $transparent = _ref.$transparent;
   return !$transparent && css(["", " background-color:", ";"], getShadow(1.5), colors.white);
 });
 export var StyledPageHeaderItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageHeaderItem",
-  componentId: "core-12_41_0__sc-1cvdbsv-1"
+  componentId: "core-12_43_0__sc-1cvdbsv-1"
 })(["margin-top:", "px;&:first-child{margin-top:0;}"], headerVerticalSpacing);
 export var StyledPageTitle = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTitle",
-  componentId: "core-12_41_0__sc-1cvdbsv-2"
+  componentId: "core-12_43_0__sc-1cvdbsv-2"
 })(["&:last-child{padding-bottom:", "px;}"], headerVerticalSpacing);
 export var StyledPageBreadcrumbs = /*#__PURE__*/styled(StyledPageHeaderItem).attrs({
   as: 'nav'
 }).withConfig({
   displayName: "StyledPageBreadcrumbs",
-  componentId: "core-12_41_0__sc-1cvdbsv-3"
+  componentId: "core-12_43_0__sc-1cvdbsv-3"
 })([""]);
 export var StyledPageBanner = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageBanner",
-  componentId: "core-12_41_0__sc-1cvdbsv-4"
+  componentId: "core-12_43_0__sc-1cvdbsv-4"
 })([""]);
 export var getActions = function getActions() {
   return css(["flex-shrink:0;padding-left:", "px;> button,> a{&:first-child{margin-left:0;}margin-left:", "px;}"], spacing.xl, spacing.sm);
 };
 export var StyledPageActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageActions",
-  componentId: "core-12_41_0__sc-1cvdbsv-5"
+  componentId: "core-12_43_0__sc-1cvdbsv-5"
 })(["", ""], getActions());
 export var StyledPageTabs = /*#__PURE__*/styled(StyledPageHeaderItem).withConfig({
   displayName: "StyledPageTabs",
-  componentId: "core-12_41_0__sc-1cvdbsv-6"
+  componentId: "core-12_43_0__sc-1cvdbsv-6"
 })([""]);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_41_0__sc-1cvdbsv-7"
+  componentId: "core-12_43_0__sc-1cvdbsv-7"
 })(["padding-top:", "px;padding-left:", "px;padding-right:", "px;@media ", "{padding-top:", "px;padding-left:", "px;padding-right:", "px;}"], outerPageSpacing, outerPageSpacing, outerPageSpacing, mediaBreakpointsDown.tabletMd, outerPageSpacingSmaller, outerPageSpacingSmaller, outerPageSpacingSmaller);
 var navigationWidth = 200;
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_41_0__sc-1cvdbsv-8"
+  componentId: "core-12_43_0__sc-1cvdbsv-8"
 })(["float:left;max-height:100vh;min-width:", "px;overflow-y:auto;position:sticky;top:0;width:", "px;", "{padding:20px ", "px 0 0;}@media screen and (max-width:1024px){display:none;}"], navigationWidth, navigationWidth, StyledAnchorNavigation, spacing.sm);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_41_0__sc-1cvdbsv-9"
+  componentId: "core-12_43_0__sc-1cvdbsv-9"
 })([""]);
 var panelWidth = 400;
 var zIndexes = {
@@ -69,7 +69,7 @@ export var animationDuration = {
 };
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_41_0__sc-1cvdbsv-10"
+  componentId: "core-12_43_0__sc-1cvdbsv-10"
 })(["background-color:", ";", " position:sticky;bottom:0;z-index:", ";", ""], colors.white, function (_ref2) {
   var $hasShadow = _ref2.$hasShadow;
   return $hasShadow && getShadow(2, 'top');
@@ -79,7 +79,7 @@ export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledAside = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAside",
-  componentId: "core-12_41_0__sc-1cvdbsv-11"
+  componentId: "core-12_43_0__sc-1cvdbsv-11"
 })(["", " @media ", "{position:absolute;right:0;}"], function (_ref4) {
   var $closed = _ref4.$closed,
     $open = _ref4.$open;
@@ -99,7 +99,7 @@ var getPanelAnimation = function getPanelAnimation() {
 };
 export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsidePanel",
-  componentId: "core-12_41_0__sc-1cvdbsv-12"
+  componentId: "core-12_43_0__sc-1cvdbsv-12"
 })(["", " @media ", "{", "}", " ", " border-left:1px solid ", ";width:", "px;position:fixed;background-color:", ";overflow:auto;z-index:", ";", " ", ""], function (_ref7) {
   var $rightOffset = _ref7.$rightOffset;
   return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], mediaBreakpointsDown.tabletMd, getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
@@ -118,7 +118,7 @@ export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageMain",
-  componentId: "core-12_41_0__sc-1cvdbsv-13"
+  componentId: "core-12_43_0__sc-1cvdbsv-13"
 })(["position:relative;max-width:100%;background-color:", ";", " ", ""], colors.gray96, function () {
   return isIE11() && css(["flex:1 0 0%;"]);
 }, function (_ref10) {
@@ -133,13 +133,13 @@ export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPageContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageContainer",
-  componentId: "core-12_41_0__sc-1cvdbsv-14"
+  componentId: "core-12_43_0__sc-1cvdbsv-14"
 })(["display:grid;grid-template-columns:1fr auto;", ""], function () {
   return isIE11() && css(["display:flex;flex-wrap:wrap;"]);
 });
 export var StyledAsideFluidContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAsideFluidContainer",
-  componentId: "core-12_41_0__sc-1cvdbsv-15"
+  componentId: "core-12_43_0__sc-1cvdbsv-15"
 })(["", ""], function (_ref11) {
   var $closed = _ref11.$closed,
     $open = _ref11.$open;

package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js

@@ -3,6 +3,6 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageFooter = /*#__PURE__*/styled.footer.withConfig({
   displayName: "StyledPageFooter",
-  componentId: "core-12_41_0__sc-1f0zfyf-0"
+  componentId: "core-12_43_0__sc-1f0zfyf-0"
 })(["display:flex;align-items:center;justify-content:space-between;background-color:", ";padding:", "px;width:100%;box-shadow:0 -2px 6px 0 rgba(0,0,0,0.1);position:sticky;bottom:0;"], colors.white, spacing.lg);
 //# sourceMappingURL=PageFooterTemplate.styles.js.map

package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js

@@ -5,16 +5,16 @@ import { colors } from '../../_styles/colors';
 import { spacing } from '../../_styles/spacing';
 export var StyledPageHeader = /*#__PURE__*/styled(Page.Header).withConfig({
   displayName: "StyledPageHeader",
-  componentId: "core-12_41_0__sc-1d5kop0-0"
+  componentId: "core-12_43_0__sc-1d5kop0-0"
 })(["border-bottom:1px solid ", ";padding-top:", "px;", ""], colors.gray85, spacing.lg, function (p) {
   return p.$hasPaddingBottom && "padding-bottom: ".concat(spacing.lg, "px;");
 });
 export var StyledActions = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledActions",
-  componentId: "core-12_41_0__sc-1d5kop0-1"
+  componentId: "core-12_43_0__sc-1d5kop0-1"
 })(["width:fit-content;"]);
 export var StyledToggleActionBox = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledToggleActionBox",
-  componentId: "core-12_41_0__sc-1d5kop0-2"
+  componentId: "core-12_43_0__sc-1d5kop0-2"
 })(["bottom:", "px;position:relative;padding-left:48px;"], spacing.lg);
 //# sourceMappingURL=PageHeaderTemplate.styles.js.map

package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js

@@ -10,10 +10,10 @@ var panelWidthSmall = 360;
 export var mobileBreakpoint = 440;
 export var StyledPageAside = /*#__PURE__*/styled(Page.Aside).withConfig({
   displayName: "StyledPageAside",
-  componentId: "core-12_41_0__sc-1p7nu53-0"
+  componentId: "core-12_43_0__sc-1p7nu53-0"
 })(["position:sticky;top:0;right:0;max-height:100vh;width:100%;height:100%;@media ", "{position:sticky;max-width:", "px;flex-basis:", "px;}", "{@media ", "{max-width:", "px;}}", "{position:sticky;top:0;right:0;box-shadow:none;animation:none;padding-bottom:68px;@media ", "{width:", "px;}@media (max-width:", "px){padding-bottom:0;}}", "{position:fixed;bottom:0;display:flex;width:100%;max-width:400px;@media ", "{max-width:", "px;}}"], mediaBreakpointsDown.tabletLg, panelWidthSmall, panelWidthSmall, StyledAsideFluidContainer, mediaBreakpointsDown.tabletLg, panelWidthSmall, StyledAsidePanel, mediaBreakpointsDown.tabletLg, panelWidthSmall, mobileBreakpoint, StyledPanelFooter, mediaBreakpointsDown.tabletLg, panelWidthSmall);
 export var StyledModal = /*#__PURE__*/styled(Modal).withConfig({
   displayName: "StyledModal",
-  componentId: "core-12_41_0__sc-1p7nu53-1"
+  componentId: "core-12_43_0__sc-1p7nu53-1"
 })(["top:", "px;bottom:", "px;max-width:416px;transform:none;", "{max-height:100vh;}@media (max-width:", "px){top:0;bottom:0;left:0;right:0;max-width:100%;}"], spacing.md, spacing.md, StyledModalContent, mobileBreakpoint);
 //# sourceMappingURL=PagePaneTemplate.styles.js.map

package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js

@@ -5,14 +5,14 @@ import { spacing } from '../../_styles/spacing';
 export var mobileBreakpoint = 440;
 export var StyledPageWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageWrapper",
-  componentId: "core-12_41_0__sc-uuo7st-0"
+  componentId: "core-12_43_0__sc-uuo7st-0"
 })(["display:flex;flex-direction:column;"]);
 export var StyledPageBodyWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPageBodyWrapper",
-  componentId: "core-12_41_0__sc-uuo7st-1"
+  componentId: "core-12_43_0__sc-uuo7st-1"
 })(["display:grid;grid-template-columns:1fr auto;"]);
 export var StyledPageBody = /*#__PURE__*/styled(Page.Body).withConfig({
   displayName: "StyledPageBody",
-  componentId: "core-12_41_0__sc-uuo7st-2"
+  componentId: "core-12_43_0__sc-uuo7st-2"
 })(["padding-bottom:", "px;@media ", "{padding:", "px;}"], spacing.lg, mediaBreakpointsDown.desktopMd, spacing.md);
 //# sourceMappingURL=PageTemplate.styles.js.map

package/dist/Pagination/Pagination.styles.js

@@ -5,22 +5,22 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_41_0__sc-fy34i1-0"
+  componentId: "core-12_43_0__sc-fy34i1-0"
 })(["display:flex;align-items:center;"]);
 export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledPageCount",
-  componentId: "core-12_41_0__sc-fy34i1-1"
+  componentId: "core-12_43_0__sc-fy34i1-1"
 })(["margin-right:", "px;"], spacing.xl);
 export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledCurrentPage",
-  componentId: "core-12_41_0__sc-fy34i1-2"
+  componentId: "core-12_43_0__sc-fy34i1-2"
 })(["margin-right:", "px;"], spacing.sm);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_41_0__sc-fy34i1-3"
+  componentId: "core-12_43_0__sc-fy34i1-3"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_41_0__sc-fy34i1-4"
+  componentId: "core-12_43_0__sc-fy34i1-4"
 })(["min-height:80px;max-height:300px;max-width:248px;"]);
 //# sourceMappingURL=Pagination.styles.js.map

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;padding:", "px;background:", ";"], spacing.lg, colors.white);
 export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeader",
-  componentId: "core-12_41_0__sc-lidix2-0"
+  componentId: "core-12_43_0__sc-lidix2-0"
 })(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
 export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_41_0__sc-lidix2-1"
+  componentId: "core-12_43_0__sc-lidix2-1"
 })(["flex-grow:1;"]);
 export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBackAction",
-  componentId: "core-12_41_0__sc-lidix2-2"
+  componentId: "core-12_43_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_41_0__sc-lidix2-3"
+  componentId: "core-12_43_0__sc-lidix2-3"
 })(["max-height:128px;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_41_0__sc-lidix2-4"
+  componentId: "core-12_43_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_41_0__sc-lidix2-5"
+  componentId: "core-12_43_0__sc-lidix2-5"
 })(["margin-left:", "px;"], spacing.sm);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_41_0__sc-lidix2-6"
+  componentId: "core-12_43_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_41_0__sc-lidix2-7"
+  componentId: "core-12_43_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_41_0__sc-lidix2-8"
+  componentId: "core-12_43_0__sc-lidix2-8"
 })(["flex-grow:1;"]);
 export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooterActions",
-  componentId: "core-12_41_0__sc-lidix2-9"
+  componentId: "core-12_43_0__sc-lidix2-9"
 })(["", ""], gutter);
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_41_0__sc-lidix2-10"
+  componentId: "core-12_43_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_41_0__sc-99e1t5-0"
+  componentId: "core-12_43_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_41_0__sc-99e1t5-1"
+  componentId: "core-12_43_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_41_0__sc-99e1t5-2"
+  componentId: "core-12_43_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_41_0__sc-1ai2ze0-0"
+  componentId: "core-12_43_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_41_0__sc-1ai2ze0-1"
+  componentId: "core-12_43_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_41_0__sc-1ai2ze0-2"
+  componentId: "core-12_43_0__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_41_0__sc-1ai2ze0-3"
+  componentId: "core-12_43_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_41_0__sc-1cd0ihn-0"
+  componentId: "core-12_43_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_41_0__sc-1cd0ihn-1"
+  componentId: "core-12_43_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_41_0__sc-15o1h2-0"
+  componentId: "core-12_43_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,15 +7,15 @@ 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_41_0__sc-vdy2wl-0"
+  componentId: "core-12_43_0__sc-vdy2wl-0"
 })([""]);
 export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledProgressBar",
-  componentId: "core-12_41_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) {
+  componentId: "core-12_43_0__sc-vdy2wl-1"
+})(["background-color:", ";border-radius:", "px;border:1px solid ", ";display:block;height:", "px;margin:", "px 0;overflow:hidden;position:relative;transition:background-color 0s linear;", " ", ";"], function (_ref) {
   var $complete = _ref.$complete;
   return $complete ? colors.blue50 : colors.gray94;
-}, loaderGridUnit * 2, loaderGridUnit * 2, function (_ref2) {
+}, loaderGridUnit * 2, colors.gray50, loaderGridUnit, loaderGridUnit * 2, function (_ref2) {
   var $finalized = _ref2.$finalized;
   return $finalized && css(["transition-delay:", ";", "{animation:", " 0 ease-out ", " forwards;}"], animationDelay, StyledProgressBarLoader, fadeIn, animationDelay);
 }, function (_ref3) {