@procore/core-react 12.25.0 → 12.25.2

package/dist/PillSelect/PillSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillSelect.js","names":["Check","React","Pill","Select","Tooltip","OverflowObserver","PillSelectCheckedContainer","PillSelectLabel","PillSelectLabelWrapper","PillSelectOptionWrapper","emptyArr","defaultGetId","option","id","defaultGetLabel","label","defaultGetGroup","groupId","defaultGetSuggested","suggested","defaultGetColor","color","PillSelectOption","forwardRef","_ref","ref","selected","props","_objectWithoutProperties","_excluded","createElement","Option","_extends","size","PillSelectOptGroup","OptGroup","PillSelect","_ref2","afterHide_","afterHide","afterShow_","afterShow","_ref2$getColor","getColor","_ref2$getGroup","getGroup","_ref2$getId","getId","_ref2$getLabel","getLabel","_ref2$getSuggested","getSuggested","_ref2$groupGetId","groupGetId","_ref2$groupGetLabel","groupGetLabel","optgroups","_ref2$options","options","value","_excluded2","_React$useMemo","useMemo","optionsByGroup","map","optgroup","filter","_ref3","length","_React$useState","useState","_React$useState2","_slicedToArray","isOpened","setIsOpened","useCallback","_ref4","isOverflowing","pill","showTooltip","disabled","trigger","overlay","_ref5","Fragment","key","displayName"],"sources":["../../src/PillSelect/PillSelect.tsx"],"sourcesContent":["import { Check } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Pill } from '../Pill/Pill'\nimport { Select } from '../Select/Select'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  PillSelectCheckedContainer,\n  PillSelectLabel,\n  PillSelectLabelWrapper,\n  PillSelectOptionWrapper,\n} from './PillSelect.styles'\nimport type {\n  PillOptGroup,\n  PillOption,\n  PillOptionProps,\n  PillSelectProps,\n} from './PillSelect.types'\n\nconst emptyArr: Array<any> = []\n\nfunction defaultGetId(option: PillOption | PillOptGroup) {\n  return option.id\n}\n\nfunction defaultGetLabel(option: PillOption | PillOptGroup) {\n  return option.label\n}\n\nfunction defaultGetGroup(option: PillOption) {\n  return option.groupId\n}\n\nfunction defaultGetSuggested(option: PillOption) {\n  return option.suggested\n}\n\nexport function defaultGetColor(option: PillOption) {\n  return option.color\n}\n\nconst PillSelectOption = React.forwardRef<HTMLDivElement, PillOptionProps>(\n  function PillSelectOption({ color, label, selected, ...props }, ref) {\n    return (\n      <Select.Option selected={selected} {...props} ref={ref}>\n        <PillSelectOptionWrapper>\n          <Pill color={color}>{label}</Pill>\n          <PillSelectCheckedContainer>\n            {selected && <Check size=\"sm\" />}\n          </PillSelectCheckedContainer>\n        </PillSelectOptionWrapper>\n      </Select.Option>\n    )\n  }\n)\n\nconst PillSelectOptGroup = React.forwardRef<HTMLDivElement, DivAttributes>(\n  function PillSelectOptGroup(props, ref) {\n    return <Select.OptGroup {...props} ref={ref} />\n  }\n)\n\n/**\n\n Pill Selects are used when you need a user to select between one of several\n options that are shown as pills. Often this will be a status, such as marking\n an item “closed”, “draft”, etc.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pillselect--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill-select)\n\n */\nexport const PillSelect = React.forwardRef<\n  HTMLDivElement,\n  PillSelectProps<any, any>\n>(function PillSelect(\n  {\n    afterHide: afterHide_,\n    afterShow: afterShow_,\n    getColor = defaultGetColor,\n    getGroup = defaultGetGroup,\n    getId = defaultGetId,\n    getLabel = defaultGetLabel,\n    getSuggested = defaultGetSuggested,\n    groupGetId = defaultGetId,\n    groupGetLabel = defaultGetLabel,\n    optgroups,\n    options = emptyArr,\n    value,\n    ...props\n  },\n  ref\n) {\n  const { color, id, label } = React.useMemo(() => {\n    if (!value) {\n      return {}\n    }\n    return {\n      color: getColor(value),\n      id: getId(value),\n      label: getLabel(value),\n    }\n  }, [getColor, getId, getLabel, value])\n\n  const optionsByGroup = React.useMemo(\n    () =>\n      optgroups\n        ?.map((optgroup) => ({\n          optgroup,\n          options: options.filter(\n            (option) => getGroup(option) === groupGetId(optgroup)\n          ),\n        }))\n        .filter(({ options }) => options.length),\n    [options, optgroups, groupGetId, getGroup]\n  )\n\n  const [isOpened, setIsOpened] = React.useState(false)\n\n  const afterShow = React.useCallback(() => {\n    setIsOpened(true)\n    afterShow_?.()\n  }, [afterShow_])\n\n  const afterHide = React.useCallback(() => {\n    setIsOpened(false)\n    afterHide_?.()\n  }, [afterHide_])\n\n  return (\n    <Select\n      afterHide={afterHide}\n      afterShow={afterShow}\n      label={\n        label ? (\n          <OverflowObserver>\n            {({ isOverflowing, ref }) => {\n              const pill = (\n                <PillSelectLabel color={color} ref={ref}>\n                  {label}\n                </PillSelectLabel>\n              )\n\n              const showTooltip = isOverflowing && !isOpened\n\n              return (\n                <PillSelectLabelWrapper disabled={props.disabled}>\n                  {showTooltip ? (\n                    <Tooltip trigger=\"hover\" overlay={label}>\n                      {pill}\n                    </Tooltip>\n                  ) : (\n                    pill\n                  )}\n                </PillSelectLabelWrapper>\n              )\n            }}\n          </OverflowObserver>\n        ) : null\n      }\n      {...props}\n      ref={ref}\n    >\n      {optionsByGroup ? (\n        optionsByGroup.map(({ optgroup, options }) => (\n          <React.Fragment key={groupGetId(optgroup)}>\n            <PillSelectOptGroup key={groupGetId(optgroup)}>\n              {groupGetLabel(optgroup)}\n            </PillSelectOptGroup>\n            {options.map((option) => (\n              <PillSelectOption\n                key={getId(option)}\n                color={getColor(option)}\n                label={getLabel(option)}\n                selected={getId(option) === id}\n                suggested={getSuggested(option)}\n                value={option}\n              />\n            ))}\n          </React.Fragment>\n        ))\n      ) : (\n        <>\n          {options.map((option) => (\n            <PillSelectOption\n              key={getId(option)}\n              color={getColor(option)}\n              label={getLabel(option)}\n              selected={getId(option) === id}\n              suggested={getSuggested(option)}\n              value={option}\n            />\n          ))}\n        </>\n      )}\n    </Select>\n  )\n})\n\nPillSelect.displayName = 'PillSelect'\n"],"mappings":"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"}
+{"version":3,"file":"PillSelect.js","names":["Check","React","Pill","Select","Tooltip","OverflowObserver","PillSelectCheckedContainer","PillSelectLabel","PillSelectLabelWrapper","PillSelectOptionWrapper","emptyArr","defaultGetId","option","id","defaultGetLabel","label","defaultGetGroup","groupId","defaultGetSuggested","suggested","defaultGetColor","color","PillSelectOption","forwardRef","_ref","ref","selected","props","_objectWithoutProperties","_excluded","createElement","Option","_extends","size","PillSelectOptGroup","OptGroup","PillSelect","_ref2","afterHide_","afterHide","afterShow_","afterShow","_ref2$getColor","getColor","_ref2$getGroup","getGroup","_ref2$getId","getId","_ref2$getLabel","getLabel","_ref2$getSuggested","getSuggested","_ref2$groupGetId","groupGetId","_ref2$groupGetLabel","groupGetLabel","optgroups","_ref2$options","options","value","_excluded2","_React$useMemo","useMemo","optionsByGroup","map","optgroup","filter","_ref3","length","_React$useState","useState","_React$useState2","_slicedToArray","isOpened","setIsOpened","useCallback","_ref4","isOverflowing","pill","showTooltip","disabled","trigger","overlay","_ref5","Fragment","key","displayName"],"sources":["../../src/PillSelect/PillSelect.tsx"],"sourcesContent":["import { Check } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Pill } from '../Pill/Pill'\nimport { Select } from '../Select/Select'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { OverflowObserver } from '../_hooks/OverflowObserver'\nimport {\n  PillSelectCheckedContainer,\n  PillSelectLabel,\n  PillSelectLabelWrapper,\n  PillSelectOptionWrapper,\n} from './PillSelect.styles'\nimport type {\n  PillOptGroup,\n  PillOption,\n  PillOptionProps,\n  PillSelectProps,\n} from './PillSelect.types'\n\nconst emptyArr: Array<any> = []\n\nfunction defaultGetId(option: PillOption | PillOptGroup) {\n  return option.id\n}\n\nfunction defaultGetLabel(option: PillOption | PillOptGroup) {\n  return option.label\n}\n\nfunction defaultGetGroup(option: PillOption) {\n  return option.groupId\n}\n\nfunction defaultGetSuggested(option: PillOption) {\n  return option.suggested\n}\n\nexport function defaultGetColor(option: PillOption) {\n  return option.color\n}\n\nconst PillSelectOption = React.forwardRef<HTMLDivElement, PillOptionProps>(\n  function PillSelectOption({ color, label, selected, ...props }, ref) {\n    return (\n      <Select.Option selected={selected} {...props} ref={ref}>\n        <PillSelectOptionWrapper>\n          <Pill color={color}>{label}</Pill>\n          <PillSelectCheckedContainer>\n            {selected && <Check size=\"sm\" />}\n          </PillSelectCheckedContainer>\n        </PillSelectOptionWrapper>\n      </Select.Option>\n    )\n  }\n)\n\nconst PillSelectOptGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function PillSelectOptGroup(props, ref) {\n  return <Select.OptGroup {...props} ref={ref} />\n})\n\n/**\n\n Pill Selects are used when you need a user to select between one of several\n options that are shown as pills. Often this will be a status, such as marking\n an item “closed”, “draft”, etc.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-pillselect--demo)\n\n @see [Design Guidelines](https://design.procore.com/pill-select)\n\n */\nexport const PillSelect = React.forwardRef<\n  HTMLDivElement,\n  PillSelectProps<any, any>\n>(function PillSelect(\n  {\n    afterHide: afterHide_,\n    afterShow: afterShow_,\n    getColor = defaultGetColor,\n    getGroup = defaultGetGroup,\n    getId = defaultGetId,\n    getLabel = defaultGetLabel,\n    getSuggested = defaultGetSuggested,\n    groupGetId = defaultGetId,\n    groupGetLabel = defaultGetLabel,\n    optgroups,\n    options = emptyArr,\n    value,\n    ...props\n  },\n  ref\n) {\n  const { color, id, label } = React.useMemo(() => {\n    if (!value) {\n      return {}\n    }\n    return {\n      color: getColor(value),\n      id: getId(value),\n      label: getLabel(value),\n    }\n  }, [getColor, getId, getLabel, value])\n\n  const optionsByGroup = React.useMemo(\n    () =>\n      optgroups\n        ?.map((optgroup) => ({\n          optgroup,\n          options: options.filter(\n            (option) => getGroup(option) === groupGetId(optgroup)\n          ),\n        }))\n        .filter(({ options }) => options.length),\n    [options, optgroups, groupGetId, getGroup]\n  )\n\n  const [isOpened, setIsOpened] = React.useState(false)\n\n  const afterShow = React.useCallback(() => {\n    setIsOpened(true)\n    afterShow_?.()\n  }, [afterShow_])\n\n  const afterHide = React.useCallback(() => {\n    setIsOpened(false)\n    afterHide_?.()\n  }, [afterHide_])\n\n  return (\n    <Select\n      afterHide={afterHide}\n      afterShow={afterShow}\n      label={\n        label ? (\n          <OverflowObserver>\n            {({ isOverflowing, ref }) => {\n              const pill = (\n                <PillSelectLabel color={color} ref={ref}>\n                  {label}\n                </PillSelectLabel>\n              )\n\n              const showTooltip = isOverflowing && !isOpened\n\n              return (\n                <PillSelectLabelWrapper disabled={props.disabled}>\n                  {showTooltip ? (\n                    <Tooltip trigger=\"hover\" overlay={label}>\n                      {pill}\n                    </Tooltip>\n                  ) : (\n                    pill\n                  )}\n                </PillSelectLabelWrapper>\n              )\n            }}\n          </OverflowObserver>\n        ) : null\n      }\n      {...props}\n      ref={ref}\n    >\n      {optionsByGroup ? (\n        optionsByGroup.map(({ optgroup, options }) => (\n          <React.Fragment key={groupGetId(optgroup)}>\n            <PillSelectOptGroup key={groupGetId(optgroup)}>\n              {groupGetLabel(optgroup)}\n            </PillSelectOptGroup>\n            {options.map((option) => (\n              <PillSelectOption\n                key={getId(option)}\n                color={getColor(option)}\n                label={getLabel(option)}\n                selected={getId(option) === id}\n                suggested={getSuggested(option)}\n                value={option}\n              />\n            ))}\n          </React.Fragment>\n        ))\n      ) : (\n        <>\n          {options.map((option) => (\n            <PillSelectOption\n              key={getId(option)}\n              color={getColor(option)}\n              label={getLabel(option)}\n              selected={getId(option) === id}\n              suggested={getSuggested(option)}\n              value={option}\n            />\n          ))}\n        </>\n      )}\n    </Select>\n  )\n})\n\nPillSelect.displayName = 'PillSelect'\n"],"mappings":"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"}

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_25_0__sc-1ai2ze0-0"
+  componentId: "core-12_25_2__sc-1ai2ze0-0"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectCheckedContainer",
-  componentId: "core-12_25_0__sc-1ai2ze0-1"
+  componentId: "core-12_25_2__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_25_0__sc-1ai2ze0-2"
+  componentId: "core-12_25_2__sc-1ai2ze0-2"
 })(["", ""], getEllipsis);
 export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PillSelectLabelWrapper",
-  componentId: "core-12_25_0__sc-1ai2ze0-3"
+  componentId: "core-12_25_2__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.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { PopoverContentProps, PopoverProps, PopoverRole } from './Popover.types';
 declare function PopoverInner<Role extends PopoverRole>({ children, initialIsVisible, restoreFocusOnHide, placement, overlay, overlayRef, role, ...props }: PopoverProps<Role>, ref: React.ForwardedRef<HTMLElement>): React.JSX.Element;
 /**
@@ -23,6 +22,6 @@ declare function PopoverInner<Role extends PopoverRole>({ children, initialIsVis
 
 */
 export declare const Popover: (<Role extends PopoverRole>(props: PopoverProps<Role>) => ReturnType<typeof PopoverInner>) & {
-    Content: React.ForwardRefExoticComponent<DivAttributes & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","_ref2$restoreFocusOnH","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n  PopoverContentProps,\n  PopoverProps,\n  PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & PopoverContentProps\n>(function Content(\n  { children, block = false, fluid = false, placement = 'top', ...props },\n  ref\n) {\n  return (\n    <StyledPopover ref={ref}>\n      <StyledPopoverContent\n        {...props}\n        $block={block}\n        $fluid={fluid}\n        $placement={placement}\n      >\n        {children}\n      </StyledPopoverContent>\n    </StyledPopover>\n  )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n  {\n    children,\n    initialIsVisible = false,\n    restoreFocusOnHide = false,\n    placement = 'top',\n    overlay,\n    overlayRef,\n    role,\n    ...props\n  }: PopoverProps<Role>,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const overlayNode = isReactElement(overlay) ? (\n    React.cloneElement(overlay, { placement })\n  ) : (\n    <React.Fragment />\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        role,\n        ref,\n        restoreFocusOnHide,\n        shrinkOverlay: true,\n        arrow: true,\n        overlayRef,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n  props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","_ref2$restoreFocusOnH","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n  PopoverContentProps,\n  PopoverProps,\n  PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & PopoverContentProps\n>(function Content(\n  { children, block = false, fluid = false, placement = 'top', ...props },\n  ref\n) {\n  return (\n    <StyledPopover ref={ref}>\n      <StyledPopoverContent\n        {...props}\n        $block={block}\n        $fluid={fluid}\n        $placement={placement}\n      >\n        {children}\n      </StyledPopoverContent>\n    </StyledPopover>\n  )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n  {\n    children,\n    initialIsVisible = false,\n    restoreFocusOnHide = false,\n    placement = 'top',\n    overlay,\n    overlayRef,\n    role,\n    ...props\n  }: PopoverProps<Role>,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const overlayNode = isReactElement(overlay) ? (\n    React.cloneElement(overlay, { placement })\n  ) : (\n    <React.Fragment />\n  )\n\n  return (\n    <OverlayTrigger\n      {...{\n        ...props,\n        initialIsVisible,\n        overlay: overlayNode,\n        placement,\n        role,\n        ref,\n        restoreFocusOnHide,\n        shrinkOverlay: true,\n        arrow: true,\n        overlayRef,\n      }}\n    >\n      {children}\n    </OverlayTrigger>\n  )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n  props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}

package/dist/Popover/Popover.styles.js

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.styles.js","names":["styled","css","borderRadius","colors","getShadow","popoverArrowSize","StyledPopoverContent","span","withConfig","displayName","componentId","white","md","gray15","_ref","$block","$fluid","StyledPopover","div"],"sources":["../../src/Popover/Popover.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport type { Placement } from '../_utils/placement'\n\nexport const popoverArrowSize = 6\n\ninterface StyledPopoverProps {\n  $block: boolean\n  $fluid: boolean\n  $placement: Placement\n}\n\nexport const StyledPopoverContent = styled.span<StyledPopoverProps>`\n  background-color: ${colors.white};\n  border-radius: ${borderRadius.md}px;\n\n  color: ${colors.gray15};\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ${({ $block, $fluid }) => {\n    if ($block || $fluid) {\n      return css`\n        max-width: none;\n      `\n    }\n  }}\n`\n\nexport const StyledPopover = styled.div`\n  display: inline-block;\n  ${getShadow(3)}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.white};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAG9C,OAAO,IAAMC,gBAAgB,GAAG,CAAC;AAQjC,OAAO,IAAMC,oBAAoB,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0HACzBP,MAAM,CAACQ,KAAK,EACfT,YAAY,CAACU,EAAE,EAEvBT,MAAM,CAACU,MAAM,EAKpB,UAAAC,IAAA,EAAwB;EAAA,IAArBC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EACjB,IAAID,MAAM,IAAIC,MAAM,EAAE;IACpB,OAAOf,GAAG;EAGZ;AACF,CAAC,CACF;AAED,OAAO,IAAMgB,aAAa,gBAAGjB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAEnCN,SAAS,CAAC,CAAC,CAAC,EAGED,MAAM,CAACQ,KAAK,CAE7B"}
+{"version":3,"file":"Popover.styles.js","names":["styled","css","borderRadius","colors","getShadow","popoverArrowSize","StyledPopoverContent","span","withConfig","displayName","componentId","white","gray15","_ref","$block","$fluid","StyledPopover","div","md"],"sources":["../../src/Popover/Popover.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport type { Placement } from '../_utils/placement'\n\nexport const popoverArrowSize = 6\n\ninterface StyledPopoverProps {\n  $block: boolean\n  $fluid: boolean\n  $placement: Placement\n}\n\nexport const StyledPopoverContent = styled.span<StyledPopoverProps>`\n  background-color: ${colors.white};\n  border-radius: inherit;\n\n  color: ${colors.gray15};\n  display: inline-block;\n  max-width: 250px;\n  position: relative;\n\n  ${({ $block, $fluid }) => {\n    if ($block || $fluid) {\n      return css`\n        max-width: none;\n      `\n    }\n  }}\n`\n\nexport const StyledPopover = styled.div`\n  display: inline-block;\n  border-radius: ${borderRadius.md}px;\n  ${getShadow(3)}\n\n  & + [data-overlay-arrow] {\n    background: ${colors.white};\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAG9C,OAAO,IAAMC,gBAAgB,GAAG,CAAC;AAQjC,OAAO,IAAMC,oBAAoB,gBAAGN,MAAM,CAACO,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HACzBP,MAAM,CAACQ,KAAK,EAGvBR,MAAM,CAACS,MAAM,EAKpB,UAAAC,IAAA,EAAwB;EAAA,IAArBC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EACjB,IAAID,MAAM,IAAIC,MAAM,EAAE;IACpB,OAAOd,GAAG;EAGZ;AACF,CAAC,CACF;AAED,OAAO,IAAMe,aAAa,gBAAGhB,MAAM,CAACiB,GAAG,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAEpBR,YAAY,CAACgB,EAAE,EAC9Bd,SAAS,CAAC,CAAC,CAAC,EAGED,MAAM,CAACQ,KAAK,CAE7B"}

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_25_0__sc-15o1h2-0"
+  componentId: "core-12_25_2__sc-15o1h2-0"
 })(["left:0;pointer-events:none;position:fixed;top:0;> *{pointer-events:all;}"]);
 //# sourceMappingURL=Portal.styles.js.map

package/dist/ProgressBar/ProgressBar.styles.js

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

package/dist/ProgressBar/ProgressBar.types.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="react" />
 import type { LoaderProps } from '../Loader/Loader.types';
-import type { DivAttributes } from '../_utils/types';
 declare type ValueTextRender = (props: {
     value: number;
 }) => string;
-export interface ProgressBarProps extends LoaderProps, Omit<DivAttributes, 'aria-valuetext' | 'role'> {
+export interface ProgressBarProps extends LoaderProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-valuetext' | 'role'> {
     /**
      * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.
      * If this would not be accurate, use this property to make the progress bar value understandable.

package/dist/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.types.js","names":[],"sources":["../../src/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { LoaderProps } from '../Loader/Loader.types'\nimport type { DivAttributes } from '../_utils/types'\n\ntype ValueTextRender = (props: { value: number }) => string\n\n// TODO: add required 'aria-label' when closer to the major version\nexport interface ProgressBarProps\n  extends LoaderProps,\n    Omit<DivAttributes, 'aria-valuetext' | 'role'> {\n  /**\n   * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.\n   * If this would not be accurate, use this property to make the progress bar value understandable.\n   *\n   * @since 11.8.0\n   */\n  ['aria-valuetext']?: string | ValueTextRender\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.types.js","names":[],"sources":["../../src/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { LoaderProps } from '../Loader/Loader.types'\n\ntype ValueTextRender = (props: { value: number }) => string\n\n// TODO: add required 'aria-label' when closer to the major version\nexport interface ProgressBarProps\n  extends LoaderProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-valuetext' | 'role'> {\n  /**\n   * @a11y Assistive technologies often present the value of `aria-valuenow` as a percentage.\n   * If this would not be accurate, use this property to make the progress bar value understandable.\n   *\n   * @since 11.8.0\n   */\n  ['aria-valuetext']?: string | ValueTextRender\n}\n"],"mappings":""}

package/dist/RadioButton/RadioButton.styles.js

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

package/dist/Required/Required.styles.js

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

package/dist/Search/Search.styles.js

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

package/dist/Section/Section.js

@@ -15,13 +15,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { ChevronDown, ChevronRight } from '@procore/core-icons/dist';
+import { ChevronDown, ChevronRight } from '@procore/core-icons';
 import cx from 'classnames';
 import React from 'react';
 import { ulid } from 'ulid';
-import { Button } from '../Button/Button';
+import { Button } from '../Button';
 import { getHeadingComponent } from '../Semantic/Semantic';
-import { Title } from '../Title/Title';
+import { Title } from '../Title';
 import { sectionClassnames, StyledSection, StyledSectionBanner, StyledSectionCollapseHeading, StyledSectionContentRegion, StyledSectionHeader, StyledSectionInner, StyledTitle } from './Section.styles';
 var isFunction = function isFunction(obj) {
   return typeof obj === 'function';
@@ -123,7 +123,7 @@ export var Section = /*#__PURE__*/React.forwardRef(function Section(_ref3, ref)
     onClick: toggleOpen,
     variant: "tertiary"
   })) : null, /*#__PURE__*/React.createElement(StyledTitle, null, /*#__PURE__*/React.createElement(Title.Text, null, heading && /*#__PURE__*/React.createElement(Heading, {
-    "aria-hidden": expandId ? true : false,
+    "aria-hidden": !!expandId,
     id: headingTextId
     // Pass level since Heading component renders
     // under the incremented (level + 1) LevelProvider.
@@ -136,7 +136,8 @@ export var Section = /*#__PURE__*/React.forwardRef(function Section(_ref3, ref)
     "aria-hidden": !open,
     "aria-labelledby": heading ? headingTextId : undefined,
     id: contentRegionId,
-    role: "region",
+    role: heading ? 'region' : undefined,
+    tabIndex: open ? 0 : -1,
     $closed: expandClosed,
     $noHeader: !hasHeader
   }, open ? children : null))));

package/dist/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["ChevronDown","ChevronRight","cx","React","ulid","Button","getHeadingComponent","Title","sectionClassnames","StyledSection","StyledSectionBanner","StyledSectionCollapseHeading","StyledSectionContentRegion","StyledSectionHeader","StyledSectionInner","StyledTitle","isFunction","obj","LevelContext","createContext","SectionContext","open","setSection","toggleSection","Heading","_ref","level_","level","props","_objectWithoutProperties","_excluded","useContext","H","createElement","SectionProvider","_ref2","children","_React$useState","useState","_React$useState2","_slicedToArray","setSectionsOpen","id","prev","_objectSpread","_defineProperty","Provider","value","Section","forwardRef","_ref3","ref","actions","banner","className","expandId","heading","_ref3$initialIsOpen","initialIsOpen","pills","subtext","assets","_excluded2","sections","toggleOpen","useCallback","useEffect","undefined","_React$useMemo","useMemo","contentRegionId","concat","headingTextId","expandClosed","divide","hasHeader","_extends","levelAnonymous","role","icon","onClick","variant","Text","Subtext","Pills","Actions","Assets","$closed","$noHeader","displayName"],"sources":["../../src/Section/Section.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@procore/core-icons/dist'\nimport cx from 'classnames'\nimport React from 'react'\nimport { ulid } from 'ulid'\nimport { Button } from '../Button/Button'\nimport { getHeadingComponent } from '../Semantic/Semantic'\nimport type { HeadingProps } from '../Semantic/Semantic.types'\nimport { Title } from '../Title/Title'\nimport {\n  sectionClassnames,\n  StyledSection,\n  StyledSectionBanner,\n  StyledSectionCollapseHeading,\n  StyledSectionContentRegion,\n  StyledSectionHeader,\n  StyledSectionInner,\n  StyledTitle,\n} from './Section.styles'\nimport type {\n  SectionContextAPI,\n  SectionProps,\n  SectionProviderProps,\n} from './Section.types'\n\nconst isFunction = (obj: unknown): boolean => typeof obj === 'function'\n\n// Header levels start at level 2\nexport const LevelContext = React.createContext(2)\n\nconst SectionContext = React.createContext<SectionContextAPI>({\n  open: {},\n  setSection: () => {},\n  toggleSection: () => {},\n})\n\nexport function Heading({\n  level: level_,\n  ...props\n}: HeadingProps & { level?: number }) {\n  const level = React.useContext(LevelContext)\n  const H = getHeadingComponent(level_ || level)\n  return <H {...props} />\n}\n\nexport const SectionProvider = ({ children }: SectionProviderProps) => {\n  const [open, setSectionsOpen] = React.useState<{\n    [key: string]: boolean\n  }>({})\n\n  const toggleSection: SectionContextAPI['toggleSection'] = (id) =>\n    setSectionsOpen((prev) => ({\n      ...prev,\n      [id]: !prev[id],\n    }))\n\n  const setSection: SectionContextAPI['setSection'] = (id, open) =>\n    setSectionsOpen((prev) => ({\n      ...prev,\n      [id]: open,\n    }))\n\n  return (\n    <SectionContext.Provider\n      value={{\n        open,\n        toggleSection,\n        setSection,\n      }}\n    >\n      {children}\n    </SectionContext.Provider>\n  )\n}\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development. See Panel.Section or DetailPage.Section\n */\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n  function Section(\n    {\n      actions,\n      banner,\n      children,\n      className,\n      expandId,\n      heading,\n      initialIsOpen = true,\n      pills,\n      subtext,\n      assets,\n      ...props\n    },\n    ref\n  ) {\n    const level = React.useContext(LevelContext)\n\n    const sections = React.useContext(SectionContext)\n    const toggleOpen = React.useCallback(() => {\n      if (expandId) {\n        sections.toggleSection(expandId)\n      }\n    }, [expandId])\n    const open = expandId ? sections.open[expandId] : true\n\n    React.useEffect(() => {\n      if (expandId && open === undefined) {\n        sections.setSection(expandId, initialIsOpen)\n      }\n    }, [])\n\n    const { contentRegionId, headingTextId } = React.useMemo(() => {\n      return {\n        contentRegionId: `content-${ulid()}`,\n        headingTextId: `heading-${ulid()}`,\n      }\n    }, [])\n\n    const expandClosed = !open || !children\n    const divide = level >= 3 || !heading\n    const hasHeader = heading || actions\n\n    return (\n      <LevelContext.Provider value={level + 1}>\n        <StyledSection\n          ref={ref}\n          className={cx(className, {\n            [sectionClassnames.divide]: divide,\n            [sectionClassnames.levelAnonymous]: !heading,\n            [sectionClassnames.level(level)]: heading && level,\n          })}\n          {...props}\n        >\n          <StyledSectionInner>\n            {banner && <StyledSectionBanner>{banner}</StyledSectionBanner>}\n\n            {hasHeader ? (\n              <StyledSectionHeader>\n                {expandId ? (\n                  <StyledSectionCollapseHeading\n                    aria-labelledby={headingTextId}\n                    aria-level={level}\n                    role=\"heading\"\n                  >\n                    <Button\n                      aria-controls={contentRegionId}\n                      aria-expanded={open}\n                      aria-labelledby={headingTextId}\n                      icon={open ? <ChevronDown /> : <ChevronRight />}\n                      onClick={toggleOpen}\n                      variant=\"tertiary\"\n                    />\n                  </StyledSectionCollapseHeading>\n                ) : null}\n                <StyledTitle>\n                  <Title.Text>\n                    {heading && (\n                      <Heading\n                        aria-hidden={expandId ? true : false}\n                        id={headingTextId}\n                        // Pass level since Heading component renders\n                        // under the incremented (level + 1) LevelProvider.\n                        // Alternative, render Heading as a variable outside of return.\n                        level={level}\n                      >\n                        {heading}\n                      </Heading>\n                    )}\n                  </Title.Text>\n                  <Title.Subtext>{subtext}</Title.Subtext>\n                  <Title.Pills>{pills}</Title.Pills>\n                  <Title.Actions>\n                    {isFunction(actions)\n                      ? (actions as Function)({ open })\n                      : actions}\n                  </Title.Actions>\n                  <Title.Assets>{assets}</Title.Assets>\n                </StyledTitle>\n              </StyledSectionHeader>\n            ) : null}\n            <StyledSectionContentRegion\n              aria-hidden={!open}\n              aria-labelledby={heading ? headingTextId : undefined}\n              id={contentRegionId}\n              role=\"region\"\n              $closed={expandClosed}\n              $noHeader={!hasHeader}\n            >\n              {open ? children : null}\n            </StyledSectionContentRegion>\n          </StyledSectionInner>\n        </StyledSection>\n      </LevelContext.Provider>\n    )\n  }\n)\n\nSection.displayName = 'Section'\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["ChevronDown","ChevronRight","cx","React","ulid","Button","getHeadingComponent","Title","sectionClassnames","StyledSection","StyledSectionBanner","StyledSectionCollapseHeading","StyledSectionContentRegion","StyledSectionHeader","StyledSectionInner","StyledTitle","isFunction","obj","LevelContext","createContext","SectionContext","open","setSection","toggleSection","Heading","_ref","level_","level","props","_objectWithoutProperties","_excluded","useContext","H","createElement","SectionProvider","_ref2","children","_React$useState","useState","_React$useState2","_slicedToArray","setSectionsOpen","id","prev","_objectSpread","_defineProperty","Provider","value","Section","forwardRef","_ref3","ref","actions","banner","className","expandId","heading","_ref3$initialIsOpen","initialIsOpen","pills","subtext","assets","_excluded2","sections","toggleOpen","useCallback","useEffect","undefined","_React$useMemo","useMemo","contentRegionId","concat","headingTextId","expandClosed","divide","hasHeader","_extends","levelAnonymous","role","icon","onClick","variant","Text","Subtext","Pills","Actions","Assets","tabIndex","$closed","$noHeader","displayName"],"sources":["../../src/Section/Section.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@procore/core-icons'\nimport cx from 'classnames'\nimport React from 'react'\nimport { ulid } from 'ulid'\nimport { Button } from '../Button'\nimport { getHeadingComponent } from '../Semantic/Semantic'\nimport type { HeadingProps } from '../Semantic/Semantic.types'\nimport { Title } from '../Title'\nimport {\n  sectionClassnames,\n  StyledSection,\n  StyledSectionBanner,\n  StyledSectionCollapseHeading,\n  StyledSectionContentRegion,\n  StyledSectionHeader,\n  StyledSectionInner,\n  StyledTitle,\n} from './Section.styles'\nimport type {\n  SectionContextAPI,\n  SectionProps,\n  SectionProviderProps,\n} from './Section.types'\n\nconst isFunction = (obj: unknown): boolean => typeof obj === 'function'\n\n// Header levels start at level 2\nexport const LevelContext = React.createContext(2)\n\nconst SectionContext = React.createContext<SectionContextAPI>({\n  open: {},\n  setSection: () => {},\n  toggleSection: () => {},\n})\n\nexport function Heading({\n  level: level_,\n  ...props\n}: HeadingProps & { level?: number }) {\n  const level = React.useContext(LevelContext)\n  const H = getHeadingComponent(level_ || level)\n  return <H {...props} />\n}\n\nexport const SectionProvider = ({ children }: SectionProviderProps) => {\n  const [open, setSectionsOpen] = React.useState<{\n    [key: string]: boolean\n  }>({})\n\n  const toggleSection: SectionContextAPI['toggleSection'] = (id) =>\n    setSectionsOpen((prev) => ({\n      ...prev,\n      [id]: !prev[id],\n    }))\n\n  const setSection: SectionContextAPI['setSection'] = (id, open) =>\n    setSectionsOpen((prev) => ({\n      ...prev,\n      [id]: open,\n    }))\n\n  return (\n    <SectionContext.Provider\n      value={{\n        open,\n        toggleSection,\n        setSection,\n      }}\n    >\n      {children}\n    </SectionContext.Provider>\n  )\n}\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development. See Panel.Section or DetailPage.Section\n */\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n  function Section(\n    {\n      actions,\n      banner,\n      children,\n      className,\n      expandId,\n      heading,\n      initialIsOpen = true,\n      pills,\n      subtext,\n      assets,\n      ...props\n    },\n    ref\n  ) {\n    const level = React.useContext(LevelContext)\n\n    const sections = React.useContext(SectionContext)\n    const toggleOpen = React.useCallback(() => {\n      if (expandId) {\n        sections.toggleSection(expandId)\n      }\n    }, [expandId])\n    const open = expandId ? sections.open[expandId] : true\n\n    React.useEffect(() => {\n      if (expandId && open === undefined) {\n        sections.setSection(expandId, initialIsOpen)\n      }\n    }, [])\n\n    const { contentRegionId, headingTextId } = React.useMemo(() => {\n      return {\n        contentRegionId: `content-${ulid()}`,\n        headingTextId: `heading-${ulid()}`,\n      }\n    }, [])\n\n    const expandClosed = !open || !children\n    const divide = level >= 3 || !heading\n    const hasHeader = heading || actions\n\n    return (\n      <LevelContext.Provider value={level + 1}>\n        <StyledSection\n          ref={ref}\n          className={cx(className, {\n            [sectionClassnames.divide]: divide,\n            [sectionClassnames.levelAnonymous]: !heading,\n            [sectionClassnames.level(level)]: heading && level,\n          })}\n          {...props}\n        >\n          <StyledSectionInner>\n            {banner && <StyledSectionBanner>{banner}</StyledSectionBanner>}\n\n            {hasHeader ? (\n              <StyledSectionHeader>\n                {expandId ? (\n                  <StyledSectionCollapseHeading\n                    aria-labelledby={headingTextId}\n                    aria-level={level}\n                    role=\"heading\"\n                  >\n                    <Button\n                      aria-controls={contentRegionId}\n                      aria-expanded={open}\n                      aria-labelledby={headingTextId}\n                      icon={open ? <ChevronDown /> : <ChevronRight />}\n                      onClick={toggleOpen}\n                      variant=\"tertiary\"\n                    />\n                  </StyledSectionCollapseHeading>\n                ) : null}\n                <StyledTitle>\n                  <Title.Text>\n                    {heading && (\n                      <Heading\n                        aria-hidden={!!expandId}\n                        id={headingTextId}\n                        // Pass level since Heading component renders\n                        // under the incremented (level + 1) LevelProvider.\n                        // Alternative, render Heading as a variable outside of return.\n                        level={level}\n                      >\n                        {heading}\n                      </Heading>\n                    )}\n                  </Title.Text>\n                  <Title.Subtext>{subtext}</Title.Subtext>\n                  <Title.Pills>{pills}</Title.Pills>\n                  <Title.Actions>\n                    {isFunction(actions)\n                      ? (actions as Function)({ open })\n                      : actions}\n                  </Title.Actions>\n                  <Title.Assets>{assets}</Title.Assets>\n                </StyledTitle>\n              </StyledSectionHeader>\n            ) : null}\n            <StyledSectionContentRegion\n              aria-hidden={!open}\n              aria-labelledby={heading ? headingTextId : undefined}\n              id={contentRegionId}\n              role={heading ? 'region' : undefined}\n              tabIndex={open ? 0 : -1}\n              $closed={expandClosed}\n              $noHeader={!hasHeader}\n            >\n              {open ? children : null}\n            </StyledSectionContentRegion>\n          </StyledSectionInner>\n        </StyledSection>\n      </LevelContext.Provider>\n    )\n  }\n)\n\nSection.displayName = 'Section'\n"],"mappings":"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"}

package/dist/Section/Section.styles.d.ts

@@ -16,9 +16,9 @@ export declare const StyledSectionHeader: import("styled-components/dist/types")
 export declare const StyledTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").TitleProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Pills: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
-    Text: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
-    Subtext: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
-    Actions: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
-    Assets: import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("../Title/Title.types").TitleAssetsProps & import("react").RefAttributes<HTMLDivElement>>;
+    Pills: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Text: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Subtext: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Actions: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Assets: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../Title/Title.types").TitleAssetsProps & import("react").RefAttributes<HTMLDivElement>>;
 }, keyof import("react").Component<any, {}, any>>;

package/dist/Section/Section.styles.js

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

package/dist/Section/Section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.styles.js","names":["styled","css","StyledFormRow","Title","colors","spacing","StyledSectionBanner","div","withConfig","displayName","componentId","sm","StyledSectionInner","StyledSectionCollapseHeading","sectionClassnames","divide","levelAnonymous","level","num","concat","StyledSection","lg","gray85","xs","StyledSectionContentRegion","_ref","$closed","_ref2","$noHeader","xl","StyledSectionHeader","StyledTitle"],"sources":["../../src/Section/Section.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledFormRow } from '../Form/Form.styles'\nimport { Title } from '../Title/Title'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledSectionBanner = styled.div`\n  margin-bottom: ${spacing.sm}px;\n\n  > * + * {\n    margin-top: ${spacing.sm}px;\n  }\n`\n\nexport const StyledSectionInner = styled.div``\n\nexport const StyledSectionCollapseHeading = styled.div`\n  align-self: flex-start;\n  margin-right: ${spacing.sm}px;\n`\n\nexport const sectionClassnames = {\n  divide: 'section--divide',\n  levelAnonymous: 'section--level-anon',\n  level: (num: number) => `section--level-${num}`,\n}\n\nexport const StyledSection = styled.div`\n  padding-left: ${spacing.lg}px;\n  padding-right: ${spacing.lg}px;\n  padding-bottom: ${spacing.lg}px;\n\n  & > ${StyledSectionInner} {\n    padding-top: ${spacing.lg}px;\n  }\n\n  // horizontal divider\n  &.${sectionClassnames.divide} {\n    & > ${StyledSectionInner} {\n      border-top: 1px solid ${colors.gray85};\n    }\n  }\n\n  // if leading, no horizontal divider\n  &:first-child > ${StyledSectionInner} {\n    border-top: 0;\n  }\n\n  & & {\n    padding-left: 0;\n    padding-right: 0;\n\n    // if leading in nested, add the division back\n    &:first-child > ${StyledSectionInner} {\n      border-top: 1px solid ${colors.gray85};\n    }\n\n    &:last-child {\n      padding-bottom: 0;\n    }\n  }\n\n  // form rows have trailing space for error message\n  ${StyledFormRow}:last-of-type {\n    margin-bottom: ${spacing.lg * -1}px;\n  }\n\n  // form rows have trailing space for error message\n  ${StyledFormRow} + &&& {\n    padding-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledSectionContentRegion = styled.div<{\n  $closed: boolean\n  $noHeader: boolean\n}>`\n  padding-top: ${spacing.sm}px;\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      padding-top: 0;\n    `}\n\n  ${({ $noHeader }) =>\n    $noHeader &&\n    css`\n      padding-top: 0;\n    `}\n\n  // if a nested section isn't first\n  // Section\n  //   P\n  //   Section <-- space above\n  & > :not(${StyledSection}) + ${StyledSection} {\n    padding-top: ${spacing.xl}px;\n  }\n\n  // nested sections, the last one doesn't need more trailing space\n  ${StyledSection} ${StyledSection} &:last-of-type {\n    padding-bottom: 0;\n  }\n`\n\nexport const StyledSectionHeader = styled.div`\n  align-items: center;\n  display: flex;\n  // min-height on header for alignment:\n  //  - when heading line height is less than the collapse button height\n  //  - when heading line height is less than the button size it will shift\n  //      the heading text when the section is opened and buttons appear\n  min-height: 36px;\n  word-break: break-word;\n`\n\nexport const StyledTitle = styled(Title)`\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,mBAAmB,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAC1BL,OAAO,CAACM,EAAE,EAGXN,OAAO,CAACM,EAAE,CAE3B;AAED,OAAO,IAAMC,kBAAkB,gBAAGZ,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE9C,OAAO,IAAMG,4BAA4B,gBAAGb,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAEpCL,OAAO,CAACM,EAAE,CAC3B;AAED,OAAO,IAAMG,iBAAiB,GAAG;EAC/BC,MAAM,EAAE,iBAAiB;EACzBC,cAAc,EAAE,qBAAqB;EACrCC,KAAK,EAAE,SAAPA,KAAKA,CAAGC,GAAW;IAAA,yBAAAC,MAAA,CAAuBD,GAAG;EAAA;AAC/C,CAAC;AAED,OAAO,IAAME,aAAa,gBAAGpB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8WACrBL,OAAO,CAACgB,EAAE,EACThB,OAAO,CAACgB,EAAE,EACThB,OAAO,CAACgB,EAAE,EAEtBT,kBAAkB,EACPP,OAAO,CAACgB,EAAE,EAIvBP,iBAAiB,CAACC,MAAM,EACpBH,kBAAkB,EACER,MAAM,CAACkB,MAAM,EAKvBV,kBAAkB,EAShBA,kBAAkB,EACVR,MAAM,CAACkB,MAAM,EASvCpB,aAAa,EACIG,OAAO,CAACgB,EAAE,GAAG,CAAC,CAAC,EAIhCnB,aAAa,EACEG,OAAO,CAACkB,EAAE,CAE5B;AAED,OAAO,IAAMC,0BAA0B,gBAAGxB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HAInCL,OAAO,CAACM,EAAE,EAEvB,UAAAc,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,IACPzB,GAAG,oBAEF;AAAA,GAED,UAAA0B,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OACZA,SAAS,IACT3B,GAAG,oBAEF;AAAA,GAMQmB,aAAa,EAAOA,aAAa,EAC3Bf,OAAO,CAACwB,EAAE,EAIzBT,aAAa,EAAIA,aAAa,CAGjC;AAED,OAAO,IAAMU,mBAAmB,gBAAG9B,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAS5C;AAED,OAAO,IAAMqB,WAAW,gBAAG/B,MAAM,CAACG,KAAK,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mBAEvC"}
+{"version":3,"file":"Section.styles.js","names":["styled","css","StyledFormRow","Title","colors","getFocus","spacing","StyledSectionBanner","div","withConfig","displayName","componentId","sm","StyledSectionInner","StyledSectionCollapseHeading","sectionClassnames","divide","levelAnonymous","level","num","concat","StyledSection","lg","gray85","xs","StyledSectionContentRegion","_ref","$closed","_ref2","$noHeader","xl","StyledSectionHeader","StyledTitle"],"sources":["../../src/Section/Section.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledFormRow } from '../Form/Form.styles'\nimport { Title } from '../Title/Title'\nimport { colors } from '../_styles/colors'\nimport { getFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledSectionBanner = styled.div`\n  margin-bottom: ${spacing.sm}px;\n\n  > * + * {\n    margin-top: ${spacing.sm}px;\n  }\n`\n\nexport const StyledSectionInner = styled.div``\n\nexport const StyledSectionCollapseHeading = styled.div`\n  align-self: flex-start;\n  margin-right: ${spacing.sm}px;\n`\n\nexport const sectionClassnames = {\n  divide: 'section--divide',\n  levelAnonymous: 'section--level-anon',\n  level: (num: number) => `section--level-${num}`,\n}\n\nexport const StyledSection = styled.div`\n  padding-left: ${spacing.lg}px;\n  padding-right: ${spacing.lg}px;\n  padding-bottom: ${spacing.lg}px;\n\n  & > ${StyledSectionInner} {\n    padding-top: ${spacing.lg}px;\n  }\n\n  // horizontal divider\n  &.${sectionClassnames.divide} {\n    & > ${StyledSectionInner} {\n      border-top: 1px solid ${colors.gray85};\n    }\n  }\n\n  // if leading, no horizontal divider\n  &:first-child > ${StyledSectionInner} {\n    border-top: 0;\n  }\n\n  & & {\n    padding-left: 0;\n    padding-right: 0;\n\n    // if leading in nested, add the division back\n    &:first-child > ${StyledSectionInner} {\n      border-top: 1px solid ${colors.gray85};\n    }\n\n    &:last-child {\n      padding-bottom: 0;\n    }\n  }\n\n  // form rows have trailing space for error message\n  ${StyledFormRow}:last-of-type {\n    margin-bottom: ${spacing.lg * -1}px;\n  }\n\n  // form rows have trailing space for error message\n  ${StyledFormRow} + &&& {\n    padding-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledSectionContentRegion = styled.div<{\n  $closed: boolean\n  $noHeader: boolean\n}>`\n  padding-top: ${spacing.sm}px;\n\n  &:focus-visible {\n    ${getFocus()}\n  }\n\n  ${({ $closed }) =>\n    $closed &&\n    css`\n      padding-top: 0;\n    `}\n\n  ${({ $noHeader }) =>\n    $noHeader &&\n    css`\n      padding-top: 0;\n    `}\n\n  // if a nested section isn't first\n  // Section\n  //   P\n  //   Section <-- space above\n  & > :not(${StyledSection}) + ${StyledSection} {\n    padding-top: ${spacing.xl}px;\n  }\n\n  // nested sections, the last one doesn't need more trailing space\n  ${StyledSection} ${StyledSection} &:last-of-type {\n    padding-bottom: 0;\n  }\n`\n\nexport const StyledSectionHeader = styled.div`\n  align-items: center;\n  display: flex;\n  // min-height on header for alignment:\n  //  - when heading line height is less than the collapse button height\n  //  - when heading line height is less than the button size it will shift\n  //      the heading text when the section is opened and buttons appear\n  min-height: 36px;\n  word-break: break-word;\n`\n\nexport const StyledTitle = styled(Title)`\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,mBAAmB,gBAAGP,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAC1BL,OAAO,CAACM,EAAE,EAGXN,OAAO,CAACM,EAAE,CAE3B;AAED,OAAO,IAAMC,kBAAkB,gBAAGb,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE9C,OAAO,IAAMG,4BAA4B,gBAAGd,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAEpCL,OAAO,CAACM,EAAE,CAC3B;AAED,OAAO,IAAMG,iBAAiB,GAAG;EAC/BC,MAAM,EAAE,iBAAiB;EACzBC,cAAc,EAAE,qBAAqB;EACrCC,KAAK,EAAE,SAAPA,KAAKA,CAAGC,GAAW;IAAA,yBAAAC,MAAA,CAAuBD,GAAG;EAAA;AAC/C,CAAC;AAED,OAAO,IAAME,aAAa,gBAAGrB,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8WACrBL,OAAO,CAACgB,EAAE,EACThB,OAAO,CAACgB,EAAE,EACThB,OAAO,CAACgB,EAAE,EAEtBT,kBAAkB,EACPP,OAAO,CAACgB,EAAE,EAIvBP,iBAAiB,CAACC,MAAM,EACpBH,kBAAkB,EACET,MAAM,CAACmB,MAAM,EAKvBV,kBAAkB,EAShBA,kBAAkB,EACVT,MAAM,CAACmB,MAAM,EASvCrB,aAAa,EACII,OAAO,CAACgB,EAAE,GAAG,CAAC,CAAC,EAIhCpB,aAAa,EACEI,OAAO,CAACkB,EAAE,CAE5B;AAED,OAAO,IAAMC,0BAA0B,gBAAGzB,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gJAInCL,OAAO,CAACM,EAAE,EAGrBP,QAAQ,CAAC,CAAC,EAGZ,UAAAqB,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,IACP1B,GAAG,oBAEF;AAAA,GAED,UAAA2B,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OACZA,SAAS,IACT5B,GAAG,oBAEF;AAAA,GAMQoB,aAAa,EAAOA,aAAa,EAC3Bf,OAAO,CAACwB,EAAE,EAIzBT,aAAa,EAAIA,aAAa,CAGjC;AAED,OAAO,IAAMU,mBAAmB,gBAAG/B,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAS5C;AAED,OAAO,IAAMqB,WAAW,gBAAGhC,MAAM,CAACG,KAAK,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mBAEvC"}

package/dist/SegmentedController/SegmentedController.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_25_0__sc-ocai3-0"
+  componentId: "core-12_25_2__sc-ocai3-0"
 })(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";"], function (_ref) {
   var $block = _ref.$block;
   return $block ? 'flex' : 'inline-flex';
@@ -15,7 +15,7 @@ export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
   displayName: "StyledSegment",
-  componentId: "core-12_25_0__sc-ocai3-1"
+  componentId: "core-12_25_2__sc-ocai3-1"
 })(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
   var _ref3$$focused = _ref3.$focused,
     $focused = _ref3$$focused === void 0 ? false : _ref3$$focused;
@@ -37,10 +37,10 @@ export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
 });
 export var StyledSegmentDisabledInteractiveWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSegmentDisabledInteractiveWrapper",
-  componentId: "core-12_25_0__sc-ocai3-2"
+  componentId: "core-12_25_2__sc-ocai3-2"
 })(["display:flex;flex:1 1 auto;min-width:0;height:100%;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md);
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_25_0__sc-ocai3-3"
+  componentId: "core-12_25_2__sc-ocai3-3"
 })(["", ";display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], getTypographyIntent('body'));
 //# sourceMappingURL=SegmentedController.styles.js.map

package/dist/SegmentedController/SegmentedController.types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DivAttributes, Placement, Props } from '../_utils/types';
+import type { Placement, Props } from '../_utils/types';
 /**
  * @deprecated Please use the `active` and `disabled` props
  * @deprecatedSince 11
@@ -9,7 +9,7 @@ export declare const segmentedControllerSegmentVariant: {
     readonly disabled: "disabled";
     readonly none: "";
 };
-export interface SegmentedControllerProps extends Props, Omit<DivAttributes, 'onChange'> {
+export interface SegmentedControllerProps extends Props, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * The segment is active
      * @since 10.19.0

package/dist/SegmentedController/SegmentedController.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedController.types.js","names":["segmentedControllerSegmentVariant","active","disabled","none"],"sources":["../../src/SegmentedController/SegmentedController.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { DivAttributes, Placement, Props } from '../_utils/types'\n\n/**\n * @deprecated Please use the `active` and `disabled` props\n * @deprecatedSince 11\n */\nexport const segmentedControllerSegmentVariant = {\n  active: 'active',\n  disabled: 'disabled',\n  none: '',\n} as const\n\nexport interface SegmentedControllerProps\n  extends Props,\n    Omit<DivAttributes, 'onChange'> {\n  /**\n   * The segment is active\n   * @since 10.19.0\n   * @deprecated The property is not used anywhere\n   * @deprecatedSince 12.18.0\n   * */\n  active?: number\n\n  /**\n   * The segment controller is block sized\n   * @since 10.19.0\n   */\n  block?: boolean\n\n  /**\n   * Disables all segments in the controller\n   * @since 10.19.0\n   */\n  disabled?: boolean\n\n  /**\n   * A callback to be called when the radio group value changes\n   * @since 10.19.0\n   */\n  onChange?: (selected: number) => void\n\n  /**\n   * @deprecated Please use the `block` prop\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  variant?: 'block' | ''\n}\n\nexport interface SegmentedControllerSegmentProps extends Props {\n  /**\n   * The segment is active\n   * @since 10.19.0\n   * @deprecated Use `selected` instead\n   * @deprecatedSince 12.18.0\n   */\n  active?: boolean\n\n  /**\n   * Is the segment disabled\n   * @since 10.19.0\n   */\n  disabled?: boolean\n\n  /**\n   * To change the tooltip placement\n   * @since 10.19.0\n   */\n  placement?: Placement\n\n  /**\n   * The segment is selected\n   * @since 12.18.0\n   * */\n  selected?: boolean\n\n  /**\n   * The tooltip we want to display on hover\n   * @since 10.19.0\n   */\n  tooltip?: React.ReactNode\n\n  /**\n   * A number to be used as radio input value\n   * @internal\n   * @since 11.3.0\n   */\n  internalIndex?: number\n}\n\nexport interface SegmentedControllerTooltipProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  overlay?: any\n  /**\n   * @since 10.19.0\n   */\n  placement: Placement\n}\n"],"mappings":"AAGA;AACA;AACA;AACA;AACA,OAAO,IAAMA,iCAAiC,GAAG;EAC/CC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE;AACR,CAAU"}
+{"version":3,"file":"SegmentedController.types.js","names":["segmentedControllerSegmentVariant","active","disabled","none"],"sources":["../../src/SegmentedController/SegmentedController.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { Placement, Props } from '../_utils/types'\n\n/**\n * @deprecated Please use the `active` and `disabled` props\n * @deprecatedSince 11\n */\nexport const segmentedControllerSegmentVariant = {\n  active: 'active',\n  disabled: 'disabled',\n  none: '',\n} as const\n\nexport interface SegmentedControllerProps\n  extends Props,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * The segment is active\n   * @since 10.19.0\n   * @deprecated The property is not used anywhere\n   * @deprecatedSince 12.18.0\n   * */\n  active?: number\n\n  /**\n   * The segment controller is block sized\n   * @since 10.19.0\n   */\n  block?: boolean\n\n  /**\n   * Disables all segments in the controller\n   * @since 10.19.0\n   */\n  disabled?: boolean\n\n  /**\n   * A callback to be called when the radio group value changes\n   * @since 10.19.0\n   */\n  onChange?: (selected: number) => void\n\n  /**\n   * @deprecated Please use the `block` prop\n   * @deprecatedSince 11\n   * @since 10.19.0\n   */\n  variant?: 'block' | ''\n}\n\nexport interface SegmentedControllerSegmentProps extends Props {\n  /**\n   * The segment is active\n   * @since 10.19.0\n   * @deprecated Use `selected` instead\n   * @deprecatedSince 12.18.0\n   */\n  active?: boolean\n\n  /**\n   * Is the segment disabled\n   * @since 10.19.0\n   */\n  disabled?: boolean\n\n  /**\n   * To change the tooltip placement\n   * @since 10.19.0\n   */\n  placement?: Placement\n\n  /**\n   * The segment is selected\n   * @since 12.18.0\n   * */\n  selected?: boolean\n\n  /**\n   * The tooltip we want to display on hover\n   * @since 10.19.0\n   */\n  tooltip?: React.ReactNode\n\n  /**\n   * A number to be used as radio input value\n   * @internal\n   * @since 11.3.0\n   */\n  internalIndex?: number\n}\n\nexport interface SegmentedControllerTooltipProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  overlay?: any\n  /**\n   * @since 10.19.0\n   */\n  placement: Placement\n}\n"],"mappings":"AAGA;AACA;AACA;AACA;AACA,OAAO,IAAMA,iCAAiC,GAAG;EAC/CC,MAAM,EAAE,QAAQ;EAChBC,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE;AACR,CAAU"}

package/dist/Select/Select.styles.d.ts

@@ -4,9 +4,9 @@ export declare const dataQa: {
     hovered: string;
 };
 export declare const tableSelectClassName = "select--table";
-export declare const StyledSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledSelectMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledSelectButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $hoverable: boolean;
 }>> & string;