@procore/core-react 12.21.0-cdn.2 → 12.21.0-cdn.3

package/__mocks__/_hooks/DelayedCallback.tsx

@@ -0,0 +1,88 @@
+// Mock for src/_hooks/DelayedCallback.tsx
+
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+import type { TimerApi } from '../../src/_hooks/Timer'
+import { useTimer } from '../../src/_hooks/Timer'
+
+/* TYPES */
+
+export type BeforeResult = Promise<any> | boolean | undefined | void
+
+export type BeforeCallback = (event: Event) => BeforeResult
+
+interface DelayedCallbackConfig {
+  after?: (event: Event) => void
+  before?: BeforeCallback
+  delay: number
+  timer?: TimerApi
+}
+
+function noop() {}
+
+function returnTrue() {
+  return true
+}
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export function isPromise(obj: any): obj is Promise<any> {
+  return typeof obj === 'object' && typeof obj.then === 'function'
+}
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export function wrapPromise(result: BeforeResult): Promise<any> {
+  if (isPromise(result)) {
+    return result
+  }
+
+  if (typeof result === 'boolean') {
+    return Promise.resolve(result)
+  }
+
+  return Promise.resolve(true)
+}
+
+/* HOOK */
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export function useDelayedCallback({
+  after = noop,
+  before = returnTrue,
+  delay = 0,
+  timer,
+}: DelayedCallbackConfig) {
+  const defaultTimer = useTimer({})
+
+  const t = timer || defaultTimer
+
+  React.useEffect(() => {
+    return () => {
+      // cancel timeout on unmount
+      t.cancel()
+    }
+  }, [t])
+
+  return React.useCallback(
+    (event: any) => {
+      return wrapPromise(before(event)).then((shouldUpdate: boolean) => {
+        if (shouldUpdate) {
+          act(() => {
+            t.setTimer(() => after(event), delay)
+          })
+          return true
+        }
+        return false
+      })
+    },
+    [delay, before, after, t]
+  )
+}

package/__mocks__/_hooks/Visibility.tsx

@@ -0,0 +1,100 @@
+// Mock for src/_hooks/Visibility.tsx
+
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+
+/* TYPES */
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export interface VisibilityConfig {
+  afterHide?: (e?: Event) => void
+  afterShow?: () => void
+  initialIsVisible?: boolean
+}
+
+interface VisibilityApi {
+  hide: (e?: Event) => any
+  isVisible: boolean
+  show: () => any
+  toggle: () => any
+}
+
+interface Props extends VisibilityConfig {
+  children?: React.ReactNode
+}
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export interface RenderProps extends VisibilityConfig {
+  children: (props: VisibilityApi) => React.ReactElement<{}>
+}
+
+/* HOOK */
+
+function noop() {}
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export function useVisibility({
+  afterHide = noop,
+  afterShow = noop,
+  initialIsVisible = false,
+}: VisibilityConfig): VisibilityApi {
+  const [isVisible, setVisibility] = React.useState(initialIsVisible)
+  const isMounted = React.useRef(true)
+
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const hide = (e?: Event) => {
+    if (!isMounted.current) return
+
+    act(() => setVisibility(false))
+
+    if (isVisible) {
+      afterHide(e)
+    }
+  }
+
+  const show = () => {
+    if (!isMounted.current) return
+
+    act(() => {
+      setVisibility(true)
+      if (!isVisible) {
+        afterShow()
+      }
+    })
+  }
+
+  const toggle = isVisible ? hide : show
+
+  return {
+    hide,
+    isVisible,
+    show,
+    toggle,
+  }
+}
+
+/* RENDER PROP */
+
+/**
+ * @deprecatedSince 9
+ * @deprecated Never officially documented/supported
+ */
+export function Visibility({ children, ...props }: RenderProps) {
+  const visibility = useVisibility(props)
+
+  return typeof children === 'function' ? children(visibility) : children
+}

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,11 +5,11 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_21_0-cdn_2__sc-aacdj4-0"
+  componentId: "core-12_21_0-cdn_3__sc-aacdj4-0"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_21_0-cdn_2__sc-aacdj4-1"
+  componentId: "core-12_21_0-cdn_3__sc-aacdj4-1"
 })(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -22,7 +22,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_21_0-cdn_2__sc-aacdj4-2"
+  componentId: "core-12_21_0-cdn_3__sc-aacdj4-2"
 })(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.js

@@ -1,8 +1,9 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["as", "clickable", "disabled", "href", "size", "children", "onBlur", "onFocus", "rel", "role", "target"],
-  _excluded2 = ["icon"],
-  _excluded3 = ["children"],
-  _excluded4 = ["imageUrl"];
+  _excluded2 = ["onPress"],
+  _excluded3 = ["icon"],
+  _excluded4 = ["children"],
+  _excluded5 = ["imageUrl"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -29,7 +30,8 @@ function AvatarInner(_ref, ref) {
     target = _ref.target,
     props = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = props,
-    onPress = _ref2.onPress;
+    onPress = _ref2.onPress,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
   var _useButton = useButton(_objectSpread(_objectSpread({}, props), {}, {
       onBlur: onBlur,
       onFocus: onFocus,
@@ -57,7 +59,7 @@ function AvatarInner(_ref, ref) {
     $disabled: disabled,
     $size: size,
     "data-qa": "core-avatar"
-  }, a11yProps, props), React.Children.only(children), /*#__PURE__*/React.createElement(StyledAvatarOverlay, {
+  }, a11yProps, restProps), React.Children.only(children), /*#__PURE__*/React.createElement(StyledAvatarOverlay, {
     "aria-hidden": true
   }));
 }
@@ -65,14 +67,14 @@ var Avatar_ = /*#__PURE__*/React.forwardRef(AvatarInner);
 var NextAvatar_ = /*#__PURE__*/React.forwardRef(AvatarInner);
 export var Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref5, ref) {
   var icon = _ref5.icon,
-    props = _objectWithoutProperties(_ref5, _excluded2);
+    props = _objectWithoutProperties(_ref5, _excluded3);
   return /*#__PURE__*/React.createElement(StyledIconContainer, _extends({
     ref: ref
   }, props), icon);
 });
 export var Label = /*#__PURE__*/React.forwardRef(function Label(_ref6, ref) {
   var children = _ref6.children,
-    props = _objectWithoutProperties(_ref6, _excluded3);
+    props = _objectWithoutProperties(_ref6, _excluded4);
   // Breaking change: Option to make aria-hidden since parent requires a label.
   // Can add in major once labelling is enforced
   return /*#__PURE__*/React.createElement(StyledLabelContainer, _extends({
@@ -81,7 +83,7 @@ export var Label = /*#__PURE__*/React.forwardRef(function Label(_ref6, ref) {
 });
 export var Portrait = /*#__PURE__*/React.forwardRef(function Portrait(_ref7, ref) {
   var imageUrl = _ref7.imageUrl,
-    props = _objectWithoutProperties(_ref7, _excluded4);
+    props = _objectWithoutProperties(_ref7, _excluded5);
   return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({
     ref: ref,
     $imageUrl: imageUrl

package/dist/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["useButton","React","addSubcomponents","StyledAvatarContainer","StyledAvatarOverlay","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","AvatarInner","_ref","ref","as","clickable","disabled","href","size","children","onBlur","onFocus","rel","role","target","props","_objectWithoutProperties","_excluded","_ref2","onPress","_useButton","_objectSpread","elementType","isDisabled","type","buttonProps","linkDisabled","a11yProps","$clickable","_defineProperty","undefined","createElement","_extends","$disabled","$size","Children","only","Avatar_","forwardRef","NextAvatar_","Icon","_ref5","icon","_excluded2","Label","_ref6","_excluded3","Portrait","_ref7","imageUrl","_excluded4","$imageUrl","displayName","NextAvatar","Avatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button'\nimport React from 'react'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  StyledAvatarContainer,\n  StyledAvatarOverlay,\n  StyledIconContainer,\n  StyledLabelContainer,\n  StyledPortraitContainer,\n} from './Avatar.styles'\nimport type {\n  AvatarIconProps,\n  AvatarLabelProps,\n  AvatarPortraitProps,\n  AvatarProps,\n  AvatarRef,\n  AvatarRoles,\n  AvatarRoleType,\n  BaseAvatarProps,\n} from './Avatar.types'\n\nfunction AvatarInner(\n  {\n    as,\n    clickable,\n    disabled,\n    // @ts-ignore link only\n    href,\n    size,\n    children,\n    onBlur,\n    onFocus,\n    // @ts-ignore link only\n    rel,\n    // @ts-ignore not on legacy\n    role,\n    // @ts-ignore link only\n    target,\n    ...props\n  }: AvatarProps<AvatarRoleType>,\n  ref: AvatarRef<AvatarRoleType>\n) {\n  const { onPress } = props as AvatarProps<'button'>\n\n  let { buttonProps } = useButton(\n    {\n      ...props,\n      onBlur: onBlur as (e: React.FocusEvent) => void,\n      onFocus: onFocus as (e: React.FocusEvent) => void,\n      elementType: (as as any as string) === 'a' ? 'a' : 'div',\n      href,\n      isDisabled: disabled,\n      onPress,\n      rel,\n      target,\n      type: 'button',\n    },\n    ref as any // TODO fix\n  )\n\n  const linkDisabled = disabled || (role === 'link' && !href)\n\n  const a11yProps =\n    role === 'button'\n      ? { ...buttonProps, as: as || 'div', $clickable: !disabled }\n      : role === 'link'\n      ? {\n          ['aria-disabled']: linkDisabled ? true : undefined,\n          as: as || 'a',\n          $clickable: !linkDisabled,\n          href: linkDisabled ? undefined : href,\n          onBlur,\n          onFocus,\n          rel,\n          role: 'link',\n          target,\n        }\n      : role === 'img'\n      ? {\n          ['aria-disabled']: disabled ? true : undefined,\n          role: 'img',\n          onBlur,\n          onFocus,\n        }\n      : { onBlur, onFocus }\n\n  return (\n    <StyledAvatarContainer\n      ref={ref as any}\n      $clickable={clickable}\n      $disabled={disabled}\n      $size={size}\n      data-qa=\"core-avatar\"\n      {...a11yProps}\n      {...(props as any)} // TODO fix\n    >\n      {React.Children.only(children)}\n      <StyledAvatarOverlay aria-hidden />\n    </StyledAvatarContainer>\n  )\n}\n\nconst Avatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props:\n    | AvatarProps<Role>\n    // Legacy\n    | (BaseAvatarProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof AvatarInner>\n\nconst NextAvatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props: AvatarProps<Role>\n) => ReturnType<typeof AvatarInner>\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarIconProps\n>(function Icon({ icon, ...props }, ref) {\n  return (\n    <StyledIconContainer ref={ref} {...props}>\n      {icon}\n    </StyledIconContainer>\n  )\n})\n\nexport const Label = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarLabelProps\n>(function Label({ children, ...props }, ref) {\n  // Breaking change: Option to make aria-hidden since parent requires a label.\n  // Can add in major once labelling is enforced\n  return (\n    <StyledLabelContainer ref={ref} {...props}>\n      {children}\n    </StyledLabelContainer>\n  )\n})\n\nexport const Portrait = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarPortraitProps\n>(function Portrait({ imageUrl, ...props }, ref) {\n  return (\n    <StyledPortraitContainer ref={ref} $imageUrl={imageUrl} {...props}>\n      <StyledAvatarOverlay />\n    </StyledPortraitContainer>\n  )\n})\n\n// @ts-ignore\nAvatar_.displayName = 'Avatar'\n\nIcon.displayName = 'Avatar.Icon'\n\nLabel.displayName = 'Avatar.Label'\n\nPortrait.displayName = 'Avatar.Portrait'\n\n// @ts-ignore\nNextAvatar_.displayName = 'Avatar'\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const NextAvatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  NextAvatar_\n)\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const Avatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  Avatar_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","names":["useButton","React","addSubcomponents","StyledAvatarContainer","StyledAvatarOverlay","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","AvatarInner","_ref","ref","as","clickable","disabled","href","size","children","onBlur","onFocus","rel","role","target","props","_objectWithoutProperties","_excluded","_ref2","onPress","restProps","_excluded2","_useButton","_objectSpread","elementType","isDisabled","type","buttonProps","linkDisabled","a11yProps","$clickable","_defineProperty","undefined","createElement","_extends","$disabled","$size","Children","only","Avatar_","forwardRef","NextAvatar_","Icon","_ref5","icon","_excluded3","Label","_ref6","_excluded4","Portrait","_ref7","imageUrl","_excluded5","$imageUrl","displayName","NextAvatar","Avatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button'\nimport React from 'react'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  StyledAvatarContainer,\n  StyledAvatarOverlay,\n  StyledIconContainer,\n  StyledLabelContainer,\n  StyledPortraitContainer,\n} from './Avatar.styles'\nimport type {\n  AvatarIconProps,\n  AvatarLabelProps,\n  AvatarPortraitProps,\n  AvatarProps,\n  AvatarRef,\n  AvatarRoles,\n  AvatarRoleType,\n  BaseAvatarProps,\n} from './Avatar.types'\n\nfunction AvatarInner(\n  {\n    as,\n    clickable,\n    disabled,\n    // @ts-ignore link only\n    href,\n    size,\n    children,\n    onBlur,\n    onFocus,\n    // @ts-ignore link only\n    rel,\n    // @ts-ignore not on legacy\n    role,\n    // @ts-ignore link only\n    target,\n    ...props\n  }: AvatarProps<AvatarRoleType>,\n  ref: AvatarRef<AvatarRoleType>\n) {\n  const { onPress, ...restProps } = props as AvatarProps<'button'>\n\n  let { buttonProps } = useButton(\n    {\n      ...props,\n      onBlur: onBlur as (e: React.FocusEvent) => void,\n      onFocus: onFocus as (e: React.FocusEvent) => void,\n      elementType: (as as any as string) === 'a' ? 'a' : 'div',\n      href,\n      isDisabled: disabled,\n      onPress,\n      rel,\n      target,\n      type: 'button',\n    },\n    ref as any // TODO fix\n  )\n\n  const linkDisabled = disabled || (role === 'link' && !href)\n\n  const a11yProps =\n    role === 'button'\n      ? { ...buttonProps, as: as || 'div', $clickable: !disabled }\n      : role === 'link'\n      ? {\n          ['aria-disabled']: linkDisabled ? true : undefined,\n          as: as || 'a',\n          $clickable: !linkDisabled,\n          href: linkDisabled ? undefined : href,\n          onBlur,\n          onFocus,\n          rel,\n          role: 'link',\n          target,\n        }\n      : role === 'img'\n      ? {\n          ['aria-disabled']: disabled ? true : undefined,\n          role: 'img',\n          onBlur,\n          onFocus,\n        }\n      : { onBlur, onFocus }\n\n  return (\n    <StyledAvatarContainer\n      ref={ref as any}\n      $clickable={clickable}\n      $disabled={disabled}\n      $size={size}\n      data-qa=\"core-avatar\"\n      {...a11yProps}\n      {...(restProps as any)} // TODO fix\n    >\n      {React.Children.only(children)}\n      <StyledAvatarOverlay aria-hidden />\n    </StyledAvatarContainer>\n  )\n}\n\nconst Avatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props:\n    | AvatarProps<Role>\n    // Legacy\n    | (BaseAvatarProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof AvatarInner>\n\nconst NextAvatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props: AvatarProps<Role>\n) => ReturnType<typeof AvatarInner>\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarIconProps\n>(function Icon({ icon, ...props }, ref) {\n  return (\n    <StyledIconContainer ref={ref} {...props}>\n      {icon}\n    </StyledIconContainer>\n  )\n})\n\nexport const Label = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarLabelProps\n>(function Label({ children, ...props }, ref) {\n  // Breaking change: Option to make aria-hidden since parent requires a label.\n  // Can add in major once labelling is enforced\n  return (\n    <StyledLabelContainer ref={ref} {...props}>\n      {children}\n    </StyledLabelContainer>\n  )\n})\n\nexport const Portrait = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarPortraitProps\n>(function Portrait({ imageUrl, ...props }, ref) {\n  return (\n    <StyledPortraitContainer ref={ref} $imageUrl={imageUrl} {...props}>\n      <StyledAvatarOverlay />\n    </StyledPortraitContainer>\n  )\n})\n\n// @ts-ignore\nAvatar_.displayName = 'Avatar'\n\nIcon.displayName = 'Avatar.Icon'\n\nLabel.displayName = 'Avatar.Label'\n\nPortrait.displayName = 'Avatar.Portrait'\n\n// @ts-ignore\nNextAvatar_.displayName = 'Avatar'\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const NextAvatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  NextAvatar_\n)\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const Avatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  Avatar_\n)\n"],"mappings":"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"}

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_21_0-cdn_2__sc-7q2ydl-0"
+  componentId: "core-12_21_0-cdn_3__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_21_0-cdn_2__sc-7q2ydl-1"
+  componentId: "core-12_21_0-cdn_3__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_21_0-cdn_2__sc-7q2ydl-2"
+  componentId: "core-12_21_0-cdn_3__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_21_0-cdn_2__sc-7q2ydl-3"
+  componentId: "core-12_21_0-cdn_3__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_21_0-cdn_2__sc-7q2ydl-4"
+  componentId: "core-12_21_0-cdn_3__sc-7q2ydl-4"
 })(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus, getGapOutlineFocus, function (_ref2) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;

package/dist/AvatarStack/AvatarStack.styles.js

@@ -7,32 +7,32 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-0"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}&[role='img']:focus{outline:none;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-1"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-2"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-2"
 })(["padding-top:", "px;padding-bottom:", "px;padding-left:", "px;"], spacing.sm, spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-3"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-3"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-4"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-4"
 })(["display:flex;margin-left:", "px;margin-bottom:", "px;"], spacing.md, spacing.lg);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-5"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-5"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_21_0-cdn_2__sc-ft72hu-6"
+  componentId: "core-12_21_0-cdn_3__sc-ft72hu-6"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadge",
-  componentId: "core-12_21_0-cdn_2__sc-rpertu-0"
+  componentId: "core-12_21_0-cdn_3__sc-rpertu-0"
 })(["display:inline-block;position:relative;"]);
 export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledBadgeLabel",
-  componentId: "core-12_21_0-cdn_2__sc-rpertu-1"
+  componentId: "core-12_21_0-cdn_3__sc-rpertu-1"
 })(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
 //# sourceMappingURL=Badge.styles.js.map

package/dist/Banner/Banner.styles.js

@@ -39,7 +39,7 @@ var expandContent = function expandContent(maxHeight) {
 };
 export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBannerContainer",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-0"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-0"
 })(["align-items:center;border-left:", "px solid;border-radius:", "px;color:", ";display:flex;justify-content:space-between;min-height:52px;padding:0 ", "px;", " ", " ", ""], bannerLeft, borderRadius.md, colors.gray15, spacing.lg, bannerShadow, function (_ref) {
   var variant = _ref.variant;
   var _bannerVariantColors$ = bannerVariantColors[variant],
@@ -52,15 +52,15 @@ export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-1"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-1"
 })(["align-self:center;margin:", "px ", "px ", "px 0;width:100%;"], spacing.sm, spacing.lg, spacing.sm);
 export var StyledExpandableContentContainer = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContentContainer",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-2"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-2"
 })(["color:", ";min-height:52px;padding:0 ", "px;position:relative;z-index:1;", ""], colors.gray15, spacing.lg, bannerShadow);
 export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContent",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-3"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-3"
 })(["animation-duration:450ms;animation-fill-mode:forwards;animation-timing-function:ease-out;background-color:", ";box-sizing:border-box;font-size:14px;font-weight:500;letter-spacing:0.25px;line-height:20px;overflow-y:auto;padding:0 ", "px;position:relative;z-index:0;", " ", ""], colors.white, spacing.xl * 2 + spacing.sm, function (_ref3) {
   var $isOverflowingY = _ref3.$isOverflowingY;
   return $isOverflowingY && focusable;
@@ -70,23 +70,23 @@ export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
 });
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-4"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-4"
 })(["", " color:", ";font-weight:", ";"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-5"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-5"
 })(["", " color:", ";"], getTypographyIntent('body'), colors.gray15);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-6"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-6"
 })(["flex:0 0 auto;margin:", "px 0;"], spacing.lg);
 export var StyledActionsTrigger = /*#__PURE__*/styled(DropdownButton).withConfig({
   displayName: "StyledActionsTrigger",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-7"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-7"
 })(["flex-shrink:0;& + ", ",& + ", "{margin-left:-", "px;}"], StyledButton, StyledLinkButton, spacing.sm);
 export var StyledAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAction",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-8"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-8"
 })(["margin:", "px 0 ", "px -", "px;& + ", ",& + ", ",& + ", "{margin-left:-", "px;}", ",", "{background:rgba(0,0,0,0.05);color:", ";&:hover{background:", ";color:", ";}}"], spacing.sm, spacing.sm, spacing.sm, StyledButton, StyledLinkButton, StyledActionsTrigger, spacing.sm, StyledButton, StyledLinkButton, colors.gray15, colors.gray85, colors.gray15);
 function getMiniBannerIconColor(_ref5) {
   var variant = _ref5.variant;
@@ -94,6 +94,6 @@ function getMiniBannerIconColor(_ref5) {
 }
 export var StyledMiniBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMiniBannerContainer",
-  componentId: "core-12_21_0-cdn_2__sc-149wm7c-9"
+  componentId: "core-12_21_0-cdn_3__sc-149wm7c-9"
 })(["align-items:center;background-color:", ";display:flex;justify-content:space-between;padding:0 ", "px;", " ", " & ", "{margin:", "px;}"], colors.gray96, spacing.md, getTypographyIntent('small'), getMiniBannerIconColor, StyledContent, spacing.sm);
 //# sourceMappingURL=Banner.styles.js.map

package/dist/Box/Box.styles.js

@@ -21,7 +21,7 @@ function sizeToPx(size) {
 }
 export var StyledBox = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBox",
-  componentId: "core-12_21_0-cdn_2__sc-fgsy0p-0"
+  componentId: "core-12_21_0-cdn_3__sc-fgsy0p-0"
 })(["", " ", ""], function (_ref) {
   var $as = _ref.$as;
   if ($as === 'ol' || $as === 'ul') {

package/dist/Breadcrumbs/Breadcrumbs.styles.js

@@ -4,19 +4,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_21_0-cdn_2__sc-1q6nqfz-0"
+  componentId: "core-12_21_0-cdn_3__sc-1q6nqfz-0"
 })(["color:", ";display:flex;align-items:center;a,a:hover{display:inline-flex;text-decoration:none;}"], colors.gray50);
 export var StyledList = /*#__PURE__*/styled.ol.withConfig({
   displayName: "StyledList",
-  componentId: "core-12_21_0-cdn_2__sc-1q6nqfz-1"
+  componentId: "core-12_21_0-cdn_3__sc-1q6nqfz-1"
 })(["display:flex;margin:0;padding-left:0;"]);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSeparator",
-  componentId: "core-12_21_0-cdn_2__sc-1q6nqfz-2"
+  componentId: "core-12_21_0-cdn_3__sc-1q6nqfz-2"
 })(["align-items:center;display:inline-flex;justify-content:center;margin:0px ", "px;"], spacing.xs);
 export var StyledCrumb = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledCrumb",
-  componentId: "core-12_21_0-cdn_2__sc-1q6nqfz-3"
+  componentId: "core-12_21_0-cdn_3__sc-1q6nqfz-3"
 })(["", " align-items:center;color:", ";display:inline-flex;min-height:24px;text-decoration:none;&:hover{cursor:", ";text-decoration:", ";}> a{color:", ";", "}", ""], getTypographyIntent('body'), colors.gray45, function (_ref) {
   var active = _ref.active;
   return active ? 'default' : 'pointer';

package/dist/Button/Button.styles.js

@@ -93,11 +93,11 @@ function getColors(loading, variant) {
 }
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_21_0-cdn_2__sc-c5bhwh-0"
+  componentId: "core-12_21_0-cdn_3__sc-c5bhwh-0"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledSpinner",
-  componentId: "core-12_21_0-cdn_2__sc-c5bhwh-1"
+  componentId: "core-12_21_0-cdn_3__sc-c5bhwh-1"
 })(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
   var size = _ref.size;
   var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
@@ -105,14 +105,14 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 });
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_21_0-cdn_2__sc-c5bhwh-2"
+  componentId: "core-12_21_0-cdn_3__sc-c5bhwh-2"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 export function getButtonStyles(block, disabled, loading, size, variant) {
   return css(["", " ", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
 }
 export var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_21_0-cdn_2__sc-c5bhwh-3"
+  componentId: "core-12_21_0-cdn_3__sc-c5bhwh-3"
 })(["", ""], function (_ref2) {
   var $block = _ref2.$block,
     disabled = _ref2.disabled,
@@ -123,7 +123,7 @@ export var StyledButton = /*#__PURE__*/styled.button.withConfig({
 });
 export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkButton",
-  componentId: "core-12_21_0-cdn_2__sc-c5bhwh-4"
+  componentId: "core-12_21_0-cdn_3__sc-c5bhwh-4"
 })(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
   var $block = _ref3.$block,
     $disabled = _ref3.$disabled,

package/dist/Calendar/Calendar.styles.js

@@ -8,31 +8,31 @@ var cellSize = 36; // TODO one-off size
 
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-0"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-0"
 })(["", ";display:inline-flex;flex-direction:column;padding:", "px ", "px ", "px;"], getTypographyIntent('small'), spacing.lg, spacing.md, spacing.md);
 export var StyledPaginator = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledPaginator",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-1"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-1"
 })(["flex:0 0 auto;"]);
 export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelect",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-2"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-2"
 })(["display:inline-flex;flex:1 1 0;margin-left:", "px;> div{font-size:12px;}"], spacing.sm);
 export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledNavigation",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-3"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-3"
 })(["display:inline-flex;margin-bottom:", "px;", " + ", ",", " + ", "{margin-left:", "px;}"], spacing.sm, StyledPaginator, StyledSelect, StyledSelect, StyledPaginator, spacing.sm);
 export var StyledCell = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCell",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-4"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-4"
 })(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;"], cellSize, cellSize);
 export var StyledDayHeaderCell = /*#__PURE__*/styled(StyledCell).withConfig({
   displayName: "StyledDayHeaderCell",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-5"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-5"
 })(["cursor:default;font-weight:", ";"], typographyWeights.semibold);
 export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
   displayName: "StyledDayCell",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-6"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-6"
 })(["", ""], function (_ref) {
   var _ref$$disabled = _ref.$disabled,
     $disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
@@ -55,6 +55,6 @@ export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
 });
 export var StyledWeekRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWeekRow",
-  componentId: "core-12_21_0-cdn_2__sc-1kkl86t-7"
+  componentId: "core-12_21_0-cdn_3__sc-1kkl86t-7"
 })(["display:inline-flex;padding-bottom:2px;user-select:none;&:last-child{padding-bottom:0;}", "{&:first-child{border-top-left-radius:", "px;border-bottom-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;border-bottom-right-radius:", "px;}}"], StyledCell, borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
 //# sourceMappingURL=Calendar.styles.js.map

package/dist/Card/Card.styles.js

@@ -4,7 +4,7 @@ import { colors } from '../_styles/colors';
 import { getShadow } from '../_styles/shadows';
 export var StyledCardContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCardContainer",
-  componentId: "core-12_21_0-cdn_2__sc-2fii7b-0"
+  componentId: "core-12_21_0-cdn_3__sc-2fii7b-0"
 })(["background-color:", ";border-radius:", "px;transition:box-shadow 0.2s ease-in-out;", " ", ""], colors.white, borderRadius.md, function (_ref) {
   var $level = _ref.$level,
     $shadowStrength = _ref.$shadowStrength;