@procore/core-react 12.14.0 → 12.16.0

package/dist/TieredSelect/TieredSelect.styles.js

@@ -9,19 +9,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledTieredSelect = /*#__PURE__*/styled(MenuImperative).withConfig({
   displayName: "StyledTieredSelect",
-  componentId: "core-12_14_0__sc-e1ql06-0"
+  componentId: "core-12_16_0__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_14_0__sc-e1ql06-1"
+  componentId: "core-12_16_0__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_14_0__sc-e1ql06-2"
+  componentId: "core-12_16_0__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_14_0__sc-e1ql06-3"
+  componentId: "core-12_16_0__sc-e1ql06-3"
 })(["background-color:", ";flex-wrap:wrap;margin-top:", "px;max-height:68px;overflow-y:auto;padding:", "px ", "px;", ""], colors.gray96, spacing.sm, spacing.xs, spacing.md, function (_ref) {
   var $nonInteractive = _ref.$nonInteractive;
   if ($nonInteractive) {
@@ -30,22 +30,22 @@ export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).with
 });
 export var StyledTieredSelectHome = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectHome",
-  componentId: "core-12_14_0__sc-e1ql06-4"
+  componentId: "core-12_16_0__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_14_0__sc-e1ql06-5"
+  componentId: "core-12_16_0__sc-e1ql06-5"
 })(["align-items:center;display:flex;justify-content:space-between;padding:2px ", "px;"], spacing.lg);
 export var StyledTieredSelectLoadingMore = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectLoadingMore",
-  componentId: "core-12_14_0__sc-e1ql06-6"
+  componentId: "core-12_16_0__sc-e1ql06-6"
 })(["align-items:center;justify-content:center;padding:", "px ", "px 0px ", "px;"], spacing.xs, spacing.lg, spacing.lg);
 export var StyledTieredSelectOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledTieredSelectOverlay",
-  componentId: "core-12_14_0__sc-e1ql06-7"
+  componentId: "core-12_16_0__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_14_0__sc-e1ql06-8"
+  componentId: "core-12_16_0__sc-e1ql06-8"
 })(["min-height:auto;"]);
 //# sourceMappingURL=TieredSelect.styles.js.map

package/dist/TieredSelect/TieredSelect.types.d.ts

@@ -77,43 +77,62 @@ export interface TieredSelectApi {
      */
     block?: boolean;
     /**
-     * Callback for using a custom <Code>tier</Code> shape
-     * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>
-     * Defaults to <CodeBlock>{'(tier: any) => tier.GroupId'}</CodeBlock>
+     * Callback for using a custom `tier` shape
+     * ```
+     * (tier: any) => Id
+     * ```
+     * Defaults to
+     * ```
+     * (tier: any) => tier.GroupId
+     * ```
      * @since 10.19.0
      */
     getGroupId: (tier: any) => Id;
     /**
-     * Callback for using a custom <Code>tier</Code> shape
-     * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>
-     * Defaults to <CodeBlock>{'(tier: any) => tier.Id'}</CodeBlock>
+     * Callback for using a custom `tier` shape
+     * ```
+     * (tier: any) => Id
+     * ```
+     * Defaults to
+     * ```
+     * (tier: any) => tier.Id
+     * ```
      * @since 10.19.0
      */
     getId: (tier: any) => Id;
     /**
-     * Callback for using a custom <Code>tier</Code> shape
-     * <CodeBlock>{'(tier: any) => string'}</CodeBlock>
-     * Defaults to <CodeBlock>{'(tier: any) => tier.Label'}</CodeBlock>
+     * Callback for using a custom `tier` shape
+     * ```
+     * (tier: any) => string
+     * ```
+     * Defaults to
+     * ```
+     * (tier: any) => tier.Label
+     * ```
      * @since 10.19.0
      */
     getLabel: (tier: any) => string | undefined;
     /**
-     * Callback for using a custom <Code>tier</Code> shape
-     * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>
-     * Defaults to <CodeBlock>{'(tier: any) => tier.NextGroupId'}</CodeBlock>
+     * Callback for using a custom `tier` shape
+     * ```
+     * (tier: any) => Id
+     * ```
+     * Defaults to
+     * ```
+     * (tier: any) => tier.NextGroupId
+     * ```
      * @since 10.19.0
      */
     getNextGroupId: (tier: any) => Id;
     /**
-     * Predefined strings or a callback for using a custom <Code>value</Code>{' '}
-     * string
-     * <CodeBlock>{'(value: any[]) => string | undefined'}</CodeBlock>
-     * Defaults to{' '}
-     * <CodeBlock>
-     * {
-     *     '(value: any[]) => value.map((tier) => getLabel!(tier)).join(" > ")'
-     * }
-     * </CodeBlock>
+     * Predefined strings or a callback for using a custom `value` string
+     * ```
+     * (value: any[]) => string | undefined
+     * ```
+     * Defaults to
+     * ```
+     * (value: any[]) => value.map((tier) => getLabel!(tier)).join(" > ")
+     * ```
      * @since 10.19.0
      */
     getValueString: GetValueStringFn;
@@ -133,27 +152,27 @@ export interface TieredSelectApi {
     isLeaf?: (tier: any) => boolean;
     /**
      * Used to display a loading indicator as the last item of the list. Can
-     * be used with <Code>onScrollBottom</Code> or <Code>onSearch</Code>{' '}
-     * (empty <Code>options</Code> during search async call) to indicate the
+     * be used with `onScrollBottom` or `onSearch`
+     * (empty `options` during search async call) to indicate the
      * loading of new items.
      * @since 10.19.0
      */
     loadingMore?: boolean;
     /**
-     * <div>
-     *  Callback for selecting an item from the tiered select. Returns the{' '}
-     *  <Code>Selection</Code> object from the <Code>Menu</Code> api, along
-     *  with the updated <Code>value</Code>
-     * </div>
-     * <CodeBlock>
-     *  {'(Selection: { event, item, group }, value) =>'}
-     * </CodeBlock>
+     * Callback for selecting an item from the tiered select. Returns the
+     * `Selection` object from the `Menu` api, along
+     * with the updated `value`
+     * ```
+     * (Selection: { event, item, group }, value) =>
+     * ```
      * @since 10.19.0
      */
     onChange: (selection: TierSelection) => void;
     /**
      * Callback for when the x icon is pressed.
-     * <CodeBlock>{'(event) =>'}</CodeBlock>
+     * ```
+     * (event) =>
+     * ```
      * @since 10.19.0
      */
     onClear?: SelectProps['onClear'];
@@ -161,9 +180,9 @@ export interface TieredSelectApi {
      * Callback for when navigation occurs. Triggered by the left and right
      * arrow keys, or clicking a navigable item. Returns the id of the next
      * group that will be navigated to, and the updated path.
-     * <CodeBlock>
-     *  {'(nextGroupId: string | number | undefined, path: any[]) => '}
-     * </CodeBlock>
+     * ```
+     * (nextGroupId: string | number | undefined, path: any[]) =>
+     * ```
      * @since 10.19.0
      */
     onNavigate?: (nextGroupId: Id, value: any[]) => void;
@@ -171,22 +190,27 @@ export interface TieredSelectApi {
      * Pass this callback when a quick create experience is desired. Called
      * when the "create" button in quick create mode is clicked. Returns the
      * value of the quick create input.
-     * <CodeBlock>{'(string) =>'}</CodeBlock>
+     * ```
+     * (string) =>
+     * ```
      * @since 10.19.0
      */
     onQuickCreate?: (name: string) => void;
     /**
      * Called when the selection menu is scrolled to the bottom. Can be
-     * combined with <Code>loadingMore</Code>
-     * for an async infinite scrolling menu.
-     * <CodeBlock>{'(event) =>'}</CodeBlock>
+     * combined with `loadingMore` for an async infinite scrolling menu.
+     * ```
+     * (event) =>
+     * ```
      * @since 10.19.0
      */
     onScrollBottom?: SelectProps['onScrollBottom'];
     /**
      * Called when searching the TieredSelect. Behavior must be controlled by
      * implementor
-     * <CodeBlock>{'(event) =>'}</CodeBlock>
+     * ```
+     * (event) =>
+     * ```
      * @since 10.19.0
      */
     onSearch?: SelectProps['onSearch'];

package/dist/TieredSelect/TieredSelect.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TieredSelect.types.js","names":[],"sources":["../../src/TieredSelect/TieredSelect.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport type { SelectProps } from '../Select/Select.types'\n\nexport type GetValueStringFn = (value: any[]) => string | undefined\n\nexport type GetValueString = 'full-path' | 'leaf-only' | GetValueStringFn\n\nexport type Div = React.ComponentPropsWithoutRef<'div'>\n\nexport type Id = number | string | null | undefined\n\n// all keys are optional since data shape can custom\nexport interface Tier {\n  /**\n   * @since 10.19.0\n   */\n  id?: Id\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 10.19.0\n   */\n  nextGroupId?: Id\n  /**\n   * @since 10.19.0\n   */\n  groupId?: Id\n}\n\nexport interface TierSelection extends Selection {\n  /**\n   * @since 10.19.0\n   */\n  value: any[]\n}\n\nexport interface InternalTieredSelectProps\n  extends Omit<Div, 'onSelect' | 'onChange'> {\n  /**\n   * @since 10.19.0\n   */\n  block?: SelectProps['block']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: SelectProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: SelectProps['error']\n  /**\n   * @since 10.19.0\n   */\n  loading?: SelectProps['loading']\n  /**\n   * @since 10.19.0\n   */\n  options?: any[]\n  /**\n   * @since 10.19.0\n   */\n  value?: any[]\n}\n\nexport interface TieredSelectApi {\n  /**\n   * @since 10.19.0\n   */\n  afterHide: SelectProps['afterHide']\n  /**\n   * @since 10.19.0\n   */\n  afterShow: SelectProps['afterShow']\n  /**\n   * @since 10.19.0\n   */\n  beforeHide: SelectProps['beforeHide']\n  /**\n   * @since 10.19.0\n   */\n  beforeShow: SelectProps['beforeShow']\n  /**\n   * @since 10.19.0\n   */\n  block?: boolean\n\n  /**\n   * Callback for using a custom <Code>tier</Code> shape\n   * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>\n   * Defaults to <CodeBlock>{'(tier: any) => tier.GroupId'}</CodeBlock>\n   * @since 10.19.0\n   */\n  getGroupId: (tier: any) => Id\n\n  /**\n   * Callback for using a custom <Code>tier</Code> shape\n   * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>\n   * Defaults to <CodeBlock>{'(tier: any) => tier.Id'}</CodeBlock>\n   * @since 10.19.0\n   */\n  getId: (tier: any) => Id\n\n  /**\n   * Callback for using a custom <Code>tier</Code> shape\n   * <CodeBlock>{'(tier: any) => string'}</CodeBlock>\n   * Defaults to <CodeBlock>{'(tier: any) => tier.Label'}</CodeBlock>\n   * @since 10.19.0\n   */\n  getLabel: (tier: any) => string | undefined\n\n  /**\n   * Callback for using a custom <Code>tier</Code> shape\n   * <CodeBlock>{'(tier: any) => Id'}</CodeBlock>\n   * Defaults to <CodeBlock>{'(tier: any) => tier.NextGroupId'}</CodeBlock>\n   * @since 10.19.0\n   */\n  getNextGroupId: (tier: any) => Id\n\n  /**\n   * Predefined strings or a callback for using a custom <Code>value</Code>{' '}\n   * string\n   * <CodeBlock>{'(value: any[]) => string | undefined'}</CodeBlock>\n   * Defaults to{' '}\n   * <CodeBlock>\n   * {\n   *     '(value: any[]) => value.map((tier) => getLabel!(tier)).join(\" > \")'\n   * }\n   * </CodeBlock>\n   * @since 10.19.0\n   */\n  getValueString: GetValueStringFn\n\n  /**\n   * The i18n key to use for the tiered select's configurable strings.\n   * Defaults to using the core library's default strings.\n   * @since 10.19.0\n   */\n  i18nScope: string\n  /**\n   * @since 10.19.0\n   */\n  isTierDisabled?: (tier: any) => boolean | string | undefined\n  /**\n   * @since 10.19.0\n   */\n  isLeaf?: (tier: any) => boolean\n\n  /**\n   * Used to display a loading indicator as the last item of the list. Can\n   * be used with <Code>onScrollBottom</Code> or <Code>onSearch</Code>{' '}\n   * (empty <Code>options</Code> during search async call) to indicate the\n   * loading of new items.\n   * @since 10.19.0\n   */\n  loadingMore?: boolean\n\n  /**\n   * <div>\n   *  Callback for selecting an item from the tiered select. Returns the{' '}\n   *  <Code>Selection</Code> object from the <Code>Menu</Code> api, along\n   *  with the updated <Code>value</Code>\n   * </div>\n   * <CodeBlock>\n   *  {'(Selection: { event, item, group }, value) =>'}\n   * </CodeBlock>\n   * @since 10.19.0\n   */\n  onChange: (selection: TierSelection) => void\n\n  /**\n   * Callback for when the x icon is pressed.\n   * <CodeBlock>{'(event) =>'}</CodeBlock>\n   * @since 10.19.0\n   */\n  onClear?: SelectProps['onClear']\n\n  /**\n   * Callback for when navigation occurs. Triggered by the left and right\n   * arrow keys, or clicking a navigable item. Returns the id of the next\n   * group that will be navigated to, and the updated path.\n   * <CodeBlock>\n   *  {'(nextGroupId: string | number | undefined, path: any[]) => '}\n   * </CodeBlock>\n   * @since 10.19.0\n   */\n  onNavigate?: (nextGroupId: Id, value: any[]) => void\n\n  /**\n   * Pass this callback when a quick create experience is desired. Called\n   * when the \"create\" button in quick create mode is clicked. Returns the\n   * value of the quick create input.\n   * <CodeBlock>{'(string) =>'}</CodeBlock>\n   * @since 10.19.0\n   */\n  onQuickCreate?: (name: string) => void\n\n  /**\n   * Called when the selection menu is scrolled to the bottom. Can be\n   * combined with <Code>loadingMore</Code>\n   * for an async infinite scrolling menu.\n   * <CodeBlock>{'(event) =>'}</CodeBlock>\n   * @since 10.19.0\n   */\n  onScrollBottom?: SelectProps['onScrollBottom']\n\n  /**\n   * Called when searching the TieredSelect. Behavior must be controlled by\n   * implementor\n   * <CodeBlock>{'(event) =>'}</CodeBlock>\n   * @since 10.19.0\n   */\n  onSearch?: SelectProps['onSearch']\n  /**\n   * @since 10.19.0\n   */\n  tabIndex?: number\n}\nexport interface TieredSelectProps\n  extends Partial<Omit<TieredSelectApi, 'getValueString'>>,\n    Omit<Div, 'onSelect' | 'onChange'> {\n  /**\n   * @since 10.19.0\n   */\n  block?: SelectProps['block']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: SelectProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: SelectProps['error']\n  /**\n   * Prop to define a custom footer for the tiered select. Accepts a `React.ReactNode`. Takes precedence over quick create footer.\n   *\n   * Example:\n   * ```tsx\n   * <TieredSelect\n   *   ...\n   *   footer={<div>Custom Footer</div>}\n   *   ...\n   * />\n   * ```\n   *\n   * @default undefined\n   * @since 11.4.0\n   */\n  footer?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  getValueString?: GetValueString\n  /**\n   * @since 10.19.0\n   */\n  loading?: SelectProps['loading']\n  /**\n   * Flat array of tier objects, this array is used as data for the component\n   * @since 10.19.0\n   */\n  options?: any[]\n\n  /**\n   * If true, any tier is selectable. If false, only leaf nodes are selectable\n   * @default true\n   * @since 10.19.0\n   */\n  selectableTiers?: boolean\n\n  /**\n   * Flat array of tier objects that represents the selected value\n   * @since 10.19.0\n   */\n  value?: any[]\n}\n\nexport interface TieredSelectMenuProps\n  extends Omit<Div, 'onSelect' | 'onChange' | 'onDragEnd'>,\n    Pick<TieredSelectProps, 'footer' | 'loading' | 'loadingMore' | 'options'> {\n  /**\n   * @since 10.19.0\n   */\n  currentTier: Id\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  onChange: (selection: TierSelection) => void\n  /**\n   * @since 10.19.0\n   */\n  onNavigate: (nextGroupId: Id, value: any[]) => void\n  /**\n   * @since 10.19.0\n   */\n  onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  previousValue: any[]\n  /**\n   * @since 10.19.0\n   */\n  value: any[]\n}\n\nexport interface ArrowButtonProps {\n  /**\n   * @since 10.19.0\n   */\n  onClick?: (event: React.SyntheticEvent) => void\n}\n\nexport interface QuickCreateInputProps {\n  /**\n   * @since 10.19.0\n   */\n  autoFocus: boolean\n  /**\n   * @since 10.19.0\n   */\n  onSubmit: (name: string) => void\n  /**\n   * @since 10.19.0\n   */\n  placeholder: string\n}\n\nexport interface OptionsProps {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  emptyMessage?: string\n}\n"],"mappings":""}
+{"version":3,"file":"TieredSelect.types.js","names":[],"sources":["../../src/TieredSelect/TieredSelect.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport type { SelectProps } from '../Select/Select.types'\n\nexport type GetValueStringFn = (value: any[]) => string | undefined\n\nexport type GetValueString = 'full-path' | 'leaf-only' | GetValueStringFn\n\nexport type Div = React.ComponentPropsWithoutRef<'div'>\n\nexport type Id = number | string | null | undefined\n\n// all keys are optional since data shape can custom\nexport interface Tier {\n  /**\n   * @since 10.19.0\n   */\n  id?: Id\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 10.19.0\n   */\n  nextGroupId?: Id\n  /**\n   * @since 10.19.0\n   */\n  groupId?: Id\n}\n\nexport interface TierSelection extends Selection {\n  /**\n   * @since 10.19.0\n   */\n  value: any[]\n}\n\nexport interface InternalTieredSelectProps\n  extends Omit<Div, 'onSelect' | 'onChange'> {\n  /**\n   * @since 10.19.0\n   */\n  block?: SelectProps['block']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: SelectProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: SelectProps['error']\n  /**\n   * @since 10.19.0\n   */\n  loading?: SelectProps['loading']\n  /**\n   * @since 10.19.0\n   */\n  options?: any[]\n  /**\n   * @since 10.19.0\n   */\n  value?: any[]\n}\n\nexport interface TieredSelectApi {\n  /**\n   * @since 10.19.0\n   */\n  afterHide: SelectProps['afterHide']\n  /**\n   * @since 10.19.0\n   */\n  afterShow: SelectProps['afterShow']\n  /**\n   * @since 10.19.0\n   */\n  beforeHide: SelectProps['beforeHide']\n  /**\n   * @since 10.19.0\n   */\n  beforeShow: SelectProps['beforeShow']\n  /**\n   * @since 10.19.0\n   */\n  block?: boolean\n\n  /**\n   * Callback for using a custom `tier` shape\n   * ```\n   * (tier: any) => Id\n   * ```\n   * Defaults to\n   * ```\n   * (tier: any) => tier.GroupId\n   * ```\n   * @since 10.19.0\n   */\n  getGroupId: (tier: any) => Id\n\n  /**\n   * Callback for using a custom `tier` shape\n   * ```\n   * (tier: any) => Id\n   * ```\n   * Defaults to\n   * ```\n   * (tier: any) => tier.Id\n   * ```\n   * @since 10.19.0\n   */\n  getId: (tier: any) => Id\n\n  /**\n   * Callback for using a custom `tier` shape\n   * ```\n   * (tier: any) => string\n   * ```\n   * Defaults to\n   * ```\n   * (tier: any) => tier.Label\n   * ```\n   * @since 10.19.0\n   */\n  getLabel: (tier: any) => string | undefined\n\n  /**\n   * Callback for using a custom `tier` shape\n   * ```\n   * (tier: any) => Id\n   * ```\n   * Defaults to\n   * ```\n   * (tier: any) => tier.NextGroupId\n   * ```\n   * @since 10.19.0\n   */\n  getNextGroupId: (tier: any) => Id\n\n  /**\n   * Predefined strings or a callback for using a custom `value` string\n   * ```\n   * (value: any[]) => string | undefined\n   * ```\n   * Defaults to\n   * ```\n   * (value: any[]) => value.map((tier) => getLabel!(tier)).join(\" > \")\n   * ```\n   * @since 10.19.0\n   */\n  getValueString: GetValueStringFn\n\n  /**\n   * The i18n key to use for the tiered select's configurable strings.\n   * Defaults to using the core library's default strings.\n   * @since 10.19.0\n   */\n  i18nScope: string\n  /**\n   * @since 10.19.0\n   */\n  isTierDisabled?: (tier: any) => boolean | string | undefined\n  /**\n   * @since 10.19.0\n   */\n  isLeaf?: (tier: any) => boolean\n\n  /**\n   * Used to display a loading indicator as the last item of the list. Can\n   * be used with `onScrollBottom` or `onSearch`\n   * (empty `options` during search async call) to indicate the\n   * loading of new items.\n   * @since 10.19.0\n   */\n  loadingMore?: boolean\n\n  /**\n   * Callback for selecting an item from the tiered select. Returns the\n   * `Selection` object from the `Menu` api, along\n   * with the updated `value`\n   * ```\n   * (Selection: { event, item, group }, value) =>\n   * ```\n   * @since 10.19.0\n   */\n  onChange: (selection: TierSelection) => void\n\n  /**\n   * Callback for when the x icon is pressed.\n   * ```\n   * (event) =>\n   * ```\n   * @since 10.19.0\n   */\n  onClear?: SelectProps['onClear']\n\n  /**\n   * Callback for when navigation occurs. Triggered by the left and right\n   * arrow keys, or clicking a navigable item. Returns the id of the next\n   * group that will be navigated to, and the updated path.\n   * ```\n   * (nextGroupId: string | number | undefined, path: any[]) =>\n   * ```\n   * @since 10.19.0\n   */\n  onNavigate?: (nextGroupId: Id, value: any[]) => void\n\n  /**\n   * Pass this callback when a quick create experience is desired. Called\n   * when the \"create\" button in quick create mode is clicked. Returns the\n   * value of the quick create input.\n   * ```\n   * (string) =>\n   * ```\n   * @since 10.19.0\n   */\n  onQuickCreate?: (name: string) => void\n\n  /**\n   * Called when the selection menu is scrolled to the bottom. Can be\n   * combined with `loadingMore` for an async infinite scrolling menu.\n   * ```\n   * (event) =>\n   * ```\n   * @since 10.19.0\n   */\n  onScrollBottom?: SelectProps['onScrollBottom']\n\n  /**\n   * Called when searching the TieredSelect. Behavior must be controlled by\n   * implementor\n   * ```\n   * (event) =>\n   * ```\n   * @since 10.19.0\n   */\n  onSearch?: SelectProps['onSearch']\n  /**\n   * @since 10.19.0\n   */\n  tabIndex?: number\n}\nexport interface TieredSelectProps\n  extends Partial<Omit<TieredSelectApi, 'getValueString'>>,\n    Omit<Div, 'onSelect' | 'onChange'> {\n  /**\n   * @since 10.19.0\n   */\n  block?: SelectProps['block']\n  /**\n   * @since 10.19.0\n   */\n  disabled?: SelectProps['disabled']\n  /**\n   * @since 10.19.0\n   */\n  error?: SelectProps['error']\n  /**\n   * Prop to define a custom footer for the tiered select. Accepts a `React.ReactNode`. Takes precedence over quick create footer.\n   *\n   * Example:\n   * ```tsx\n   * <TieredSelect\n   *   ...\n   *   footer={<div>Custom Footer</div>}\n   *   ...\n   * />\n   * ```\n   *\n   * @default undefined\n   * @since 11.4.0\n   */\n  footer?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  getValueString?: GetValueString\n  /**\n   * @since 10.19.0\n   */\n  loading?: SelectProps['loading']\n  /**\n   * Flat array of tier objects, this array is used as data for the component\n   * @since 10.19.0\n   */\n  options?: any[]\n\n  /**\n   * If true, any tier is selectable. If false, only leaf nodes are selectable\n   * @default true\n   * @since 10.19.0\n   */\n  selectableTiers?: boolean\n\n  /**\n   * Flat array of tier objects that represents the selected value\n   * @since 10.19.0\n   */\n  value?: any[]\n}\n\nexport interface TieredSelectMenuProps\n  extends Omit<Div, 'onSelect' | 'onChange' | 'onDragEnd'>,\n    Pick<TieredSelectProps, 'footer' | 'loading' | 'loadingMore' | 'options'> {\n  /**\n   * @since 10.19.0\n   */\n  currentTier: Id\n  /**\n   * @since 10.19.0\n   */\n  menuRef: React.RefObject<MenuRef>\n  /**\n   * @since 10.19.0\n   */\n  onChange: (selection: TierSelection) => void\n  /**\n   * @since 10.19.0\n   */\n  onNavigate: (nextGroupId: Id, value: any[]) => void\n  /**\n   * @since 10.19.0\n   */\n  onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void\n  /**\n   * @since 10.19.0\n   */\n  previousValue: any[]\n  /**\n   * @since 10.19.0\n   */\n  value: any[]\n}\n\nexport interface ArrowButtonProps {\n  /**\n   * @since 10.19.0\n   */\n  onClick?: (event: React.SyntheticEvent) => void\n}\n\nexport interface QuickCreateInputProps {\n  /**\n   * @since 10.19.0\n   */\n  autoFocus: boolean\n  /**\n   * @since 10.19.0\n   */\n  onSubmit: (name: string) => void\n  /**\n   * @since 10.19.0\n   */\n  placeholder: string\n}\n\nexport interface OptionsProps {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  emptyMessage?: string\n}\n"],"mappings":""}

package/dist/Tile/Tile.styles.js

@@ -39,7 +39,7 @@ var getTileStyles = function getTileStyles(_ref) {
 };
 export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkTile",
-  componentId: "core-12_14_0__sc-8q9p0n-0"
+  componentId: "core-12_16_0__sc-8q9p0n-0"
 })(["", " text-decoration:none;color:inherit;"], function (_ref2) {
   var $orientation = _ref2.$orientation;
   return getTileStyles({
@@ -49,7 +49,7 @@ export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
 });
 export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelectableTile",
-  componentId: "core-12_14_0__sc-8q9p0n-1"
+  componentId: "core-12_16_0__sc-8q9p0n-1"
 })(["", ""], function (_ref3) {
   var $orientation = _ref3.$orientation,
     $selected = _ref3.$selected,
@@ -65,7 +65,7 @@ export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledInteractableTile",
-  componentId: "core-12_14_0__sc-8q9p0n-2"
+  componentId: "core-12_16_0__sc-8q9p0n-2"
 })(["", ""], function (_ref4) {
   var $orientation = _ref4.$orientation;
   return getTileStyles({
@@ -74,26 +74,26 @@ export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_14_0__sc-8q9p0n-3"
+  componentId: "core-12_16_0__sc-8q9p0n-3"
 })(["grid-area:footer;padding:", "px;> ", "{flex-wrap:wrap-reverse;}"], spacing.lg, StyledActions);
 export var StyledTileContent = /*#__PURE__*/styled(StyledContent).withConfig({
   displayName: "StyledTileContent",
-  componentId: "core-12_14_0__sc-8q9p0n-4"
+  componentId: "core-12_16_0__sc-8q9p0n-4"
 })(["grid-column-start:hero-start;grid-column-end:body-end;padding:", "px;+ ", "{padding-top:0;}> ", ",> ", " > ", ",> ", "{grid-column-gap:", "px;}"], spacing.lg, StyledFooter, SFormRow, SForm, SFormRow, SFormRow, spacing.md);
 export var StyledHeroMedia = /*#__PURE__*/styled.figure.withConfig({
   displayName: "StyledHeroMedia",
-  componentId: "core-12_14_0__sc-8q9p0n-5"
+  componentId: "core-12_16_0__sc-8q9p0n-5"
 })(["grid-area:hero;margin:0;position:relative;overflow:hidden;font-size:0;> *{font-size:initial;}+ ", "{grid-area:body;}> video{background-color:", ";}> img,> picture > img{object-fit:cover;}", ""], StyledTileContent, colors.black, function (_ref5) {
   var $orientation = _ref5.$orientation;
   return $orientation === 'landscape' && !isIE11() ? css(["border-top-left-radius:inherit;border-bottom-left-radius:inherit;> *,> picture > img{height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:inherit;border-top-right-radius:inherit;> *,> picture > img{min-height:inherit;max-height:inherit;height:auto;width:100%;}"]);
 });
 export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroOverlay",
-  componentId: "core-12_14_0__sc-8q9p0n-6"
+  componentId: "core-12_16_0__sc-8q9p0n-6"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;"]);
 export var StyledHeroText = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroText",
-  componentId: "core-12_14_0__sc-8q9p0n-7"
+  componentId: "core-12_16_0__sc-8q9p0n-7"
 })(["grid-area:hero;+ ", "{grid-area:body;}padding:", "px;border-radius:inherit;", ""], StyledTileContent, spacing.lg, function (_ref6) {
   var $orientation = _ref6.$orientation;
   return $orientation === 'landscape' ? css(["display:flex;flex-direction:column;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);

package/dist/Tile/Tile.types.d.ts

@@ -33,7 +33,7 @@ export interface SelectableTileProps extends TileCommonProps, Omit<DivAttributes
      */
     variant?: 'selectable';
     /**
-     * A function for controlling <Code>selected</Code> Tile prop.
+     * A function for controlling `selected` Tile prop.
      * @since 10.19.0
      */
     onClick?: () => {};

package/dist/Tile/Tile.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.types.js","names":[],"sources":["../../src/Tile/Tile.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { AnchorAttributes, DivAttributes, Props } from '../_utils/types'\n\nexport interface HeroTextProps extends Props {}\nexport interface HeroMediaProps extends Props {\n  overlay?: boolean\n  onOverlayClick?: React.MouseEventHandler<HTMLDivElement>\n}\n\nexport interface TileCommonProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  orientation: 'portrait' | 'landscape'\n}\n\nexport interface InteractableTileProps extends TileCommonProps, DivAttributes {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'interactive'\n}\n\nexport interface LinkTileProps extends TileCommonProps, AnchorAttributes {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'link'\n}\n\nexport interface SelectableTileProps\n  extends TileCommonProps,\n    Omit<DivAttributes, 'onClick'> {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'selectable'\n\n  /**\n   * A function for controlling <Code>selected</Code> Tile prop.\n   * @since 10.19.0\n   */\n  onClick?: () => {}\n\n  /**\n   * Only with selectable variant.\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * Only with selectable variant.\n   * @default false\n   * @since 10.19.0\n   */\n  disabled?: boolean\n}\n\nexport type TileProps =\n  | SelectableTileProps\n  | InteractableTileProps\n  | LinkTileProps\n"],"mappings":""}
+{"version":3,"file":"Tile.types.js","names":[],"sources":["../../src/Tile/Tile.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { AnchorAttributes, DivAttributes, Props } from '../_utils/types'\n\nexport interface HeroTextProps extends Props {}\nexport interface HeroMediaProps extends Props {\n  overlay?: boolean\n  onOverlayClick?: React.MouseEventHandler<HTMLDivElement>\n}\n\nexport interface TileCommonProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  orientation: 'portrait' | 'landscape'\n}\n\nexport interface InteractableTileProps extends TileCommonProps, DivAttributes {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'interactive'\n}\n\nexport interface LinkTileProps extends TileCommonProps, AnchorAttributes {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'link'\n}\n\nexport interface SelectableTileProps\n  extends TileCommonProps,\n    Omit<DivAttributes, 'onClick'> {\n  /**\n   * To change tile behaviour\n   * @since 10.19.0\n   */\n  variant?: 'selectable'\n\n  /**\n   * A function for controlling `selected` Tile prop.\n   * @since 10.19.0\n   */\n  onClick?: () => {}\n\n  /**\n   * Only with selectable variant.\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * Only with selectable variant.\n   * @default false\n   * @since 10.19.0\n   */\n  disabled?: boolean\n}\n\nexport type TileProps =\n  | SelectableTileProps\n  | InteractableTileProps\n  | LinkTileProps\n"],"mappings":""}

package/dist/Title/Title.styles.js

@@ -5,36 +5,36 @@ import { Typography } from '../Typography/Typography';
 import { spacing } from '../_styles/spacing';
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_14_0__sc-1t2ye1d-0"
+  componentId: "core-12_16_0__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_14_0__sc-1t2ye1d-1"
+  componentId: "core-12_16_0__sc-1t2ye1d-1"
 })(["margin-right:", "px;", ""], spacing.md, function (_ref) {
   var alignment = _ref.alignment;
   return css(["align-self:", ";"], alignment);
 });
 export var StyledTitleContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleContent",
-  componentId: "core-12_14_0__sc-1t2ye1d-2"
+  componentId: "core-12_16_0__sc-1t2ye1d-2"
 })(["align-self:center;", ""], function (_ref2) {
   var $hasActions = _ref2.$hasActions;
   return $hasActions && css(["margin-right:", "px;"], spacing.lg);
 });
 export var StyledText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledText",
-  componentId: "core-12_14_0__sc-1t2ye1d-3"
+  componentId: "core-12_16_0__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_14_0__sc-1t2ye1d-4"
+  componentId: "core-12_16_0__sc-1t2ye1d-4"
 })(["margin-left:", "px;", "{vertical-align:text-top;}"], spacing.sm, StyledPill);
 export var StyledTitleActions = /*#__PURE__*/styled(StyledActions).withConfig({
   displayName: "StyledTitleActions",
-  componentId: "core-12_14_0__sc-1t2ye1d-5"
+  componentId: "core-12_16_0__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_14_0__sc-1t2ye1d-6"
+  componentId: "core-12_16_0__sc-1t2ye1d-6"
 })(["display:block;"]);
 //# sourceMappingURL=Title.styles.js.map

package/dist/Toast/Toast.styles.js

@@ -7,7 +7,7 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledToast = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToast",
-  componentId: "core-12_14_0__sc-1l6lk2n-0"
+  componentId: "core-12_16_0__sc-1l6lk2n-0"
 })(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
@@ -16,13 +16,13 @@ export var StyledToast = /*#__PURE__*/styled.div.withConfig({
 // $legacy is direct string inside Toast. Next is with subcomponents
 export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledToastText",
-  componentId: "core-12_14_0__sc-1l6lk2n-1"
+  componentId: "core-12_16_0__sc-1l6lk2n-1"
 })(["", " font-weight:", ";overflow:hidden;", ""], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
   var $legacy = _ref2.$legacy;
   return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
 });
 export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToastButton",
-  componentId: "core-12_14_0__sc-1l6lk2n-2"
+  componentId: "core-12_16_0__sc-1l6lk2n-2"
 })(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/ToggleButton/ToggleButton.styles.js

@@ -3,7 +3,7 @@ import { Button } from '../Button/Button';
 import { colors } from '../_styles/colors';
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_14_0__sc-1x59fxi-0"
+  componentId: "core-12_16_0__sc-1x59fxi-0"
 })(["", ""], function (_ref) {
   var $selected = _ref.$selected;
   return $selected && css(["background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}&:hover{background-color:", ";color:", ";}&:focus{background-color:", ";color:", ";}&:disabled{background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue96, colors.blue70, colors.blue70, colors.blue50);

package/dist/ToggleButton/ToggleButton.types.d.ts

@@ -10,7 +10,7 @@ export interface ToggleButtonProps extends ButtonAttributes {
     selected?: boolean;
     /**
      * The icon to display on the left side of the label. This should be an
-     * icon from <Code>@procore/core-icons</Code>.
+     * icon from `@procore/core-icons`.
      * @since 10.19.0
      */
     icon?: React.ReactNode;

package/dist/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","names":[],"sources":["../../src/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonSizes } from '../Button/Button.types'\nimport type { ButtonAttributes } from '../_utils/types'\n\nexport interface ToggleButtonProps extends ButtonAttributes {\n  /**\n   * Set the current value of the toggle button\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * The icon to display on the left side of the label. This should be an\n   * icon from <Code>@procore/core-icons</Code>.\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n\n  /**\n   * Shows the toggle button spinner\n   * @since 12.13.0\n   */\n  loading?: boolean\n\n  /**\n   * The toggle button size\n   * @since 10.19.0\n   */\n  size?: ButtonSizes\n}\n"],"mappings":""}
+{"version":3,"file":"ToggleButton.types.js","names":[],"sources":["../../src/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonSizes } from '../Button/Button.types'\nimport type { ButtonAttributes } from '../_utils/types'\n\nexport interface ToggleButtonProps extends ButtonAttributes {\n  /**\n   * Set the current value of the toggle button\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * The icon to display on the left side of the label. This should be an\n   * icon from `@procore/core-icons`.\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n\n  /**\n   * Shows the toggle button spinner\n   * @since 12.13.0\n   */\n  loading?: boolean\n\n  /**\n   * The toggle button size\n   * @since 10.19.0\n   */\n  size?: ButtonSizes\n}\n"],"mappings":""}

package/dist/Token/Token.styles.js

@@ -6,15 +6,15 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_14_0__sc-zqi94b-0"
+  componentId: "core-12_16_0__sc-zqi94b-0"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_14_0__sc-zqi94b-1"
+  componentId: "core-12_16_0__sc-zqi94b-1"
 })(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;width:16px;&:hover{background:", ";color:", ";}"], spacing.sm, spacing.sm, colors.white, colors.blue40);
 export var StyledToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToken",
-  componentId: "core-12_14_0__sc-zqi94b-2"
+  componentId: "core-12_16_0__sc-zqi94b-2"
 })(["align-items:center;background-color:", ";border-radius:200px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:24px;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", " ", " ", ""], colors.blue50, colors.white, spacing.xs, spacing.md, colors.blue45, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused,

package/dist/ToolHeader/ToolHeader.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBadge",
-  componentId: "core-12_14_0__sc-1jpjx47-0"
+  componentId: "core-12_16_0__sc-1jpjx47-0"
 })(["", " border-radius:10px;border-style:solid;border-width:1px;display:inline-block;margin-bottom:", "px;padding:1px ", "px;", ""], getTypographyIntent('small'), spacing.sm, spacing.sm, function (_ref) {
   var $variant = _ref.$variant;
   if ($variant) {
@@ -18,22 +18,22 @@ export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
 // TODO in v12 remove cursor: pointer;
 export var StyledToolHeaderIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeaderIconContainer",
-  componentId: "core-12_14_0__sc-1jpjx47-1"
+  componentId: "core-12_16_0__sc-1jpjx47-1"
 })(["color:", ";cursor:pointer;display:inline-flex;flex:0 0 auto;"], colors.orange50);
 export var StyledHeaderTabs = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderTabs",
-  componentId: "core-12_14_0__sc-1jpjx47-2"
+  componentId: "core-12_16_0__sc-1jpjx47-2"
 })(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_14_0__sc-1jpjx47-3"
+  componentId: "core-12_16_0__sc-1jpjx47-3"
 })(["flex:0 0 auto;margin-left:auto;padding-left:", "px;"], spacing.lg);
 export var StyledToolHeaderTitle = /*#__PURE__*/styled(H1).withConfig({
   displayName: "StyledToolHeaderTitle",
-  componentId: "core-12_14_0__sc-1jpjx47-4"
+  componentId: "core-12_16_0__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_14_0__sc-1jpjx47-5"
+  componentId: "core-12_16_0__sc-1jpjx47-5"
 })(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg);
 //# sourceMappingURL=ToolHeader.styles.js.map

package/dist/ToolLandingPage/ToolLandingPage.styles.js

@@ -3,14 +3,14 @@ import { Page } from '../PageLayout';
 import { spacing } from '../_styles/spacing';
 export var StyledTitleOuter = /*#__PURE__*/styled(Page.Title).withConfig({
   displayName: "StyledTitleOuter",
-  componentId: "core-12_14_0__sc-wa8j06-0"
+  componentId: "core-12_16_0__sc-wa8j06-0"
 })(["align-items:center;display:flex;gap:", "px;"], spacing.md);
 export var StyledTitleInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleInner",
-  componentId: "core-12_14_0__sc-wa8j06-1"
+  componentId: "core-12_16_0__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_14_0__sc-wa8j06-2"
+  componentId: "core-12_16_0__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ToolLandingPageTemplate: React.ForwardRefExoticComponent<Omit<import("../PageTemplate/PageTemplate.types").PageTemplateProps, "footer"> & Omit<import("../PageHeaderTemplate/PageHeaderTemplate.types").PageHeaderTemplateProps, "actions" | "beforeTitleZone" | "breadcrumbs"> & {
+    headerActions?: React.ReactNode;
+    settingsHref?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.js

@@ -0,0 +1,44 @@
+var _excluded = ["children", "header", "pane", "innerPane", "headerActions", "settingsHref"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Cog } from '@procore/core-icons';
+import React from 'react';
+import { LinkButton } from '../Button';
+import { PageHeaderTemplate } from '../PageHeaderTemplate/PageHeaderTemplate';
+import { PageTemplate } from '../PageTemplate/PageTemplate';
+import { Tooltip } from '../Tooltip';
+import { useI18nContext } from '../_hooks/I18n';
+import { colors } from '../_styles/colors';
+export var ToolLandingPageTemplate = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    header = _ref.header,
+    pane = _ref.pane,
+    innerPane = _ref.innerPane,
+    headerActions = _ref.headerActions,
+    settingsHref = _ref.settingsHref,
+    headerProps = _objectWithoutProperties(_ref, _excluded);
+  var i18n = useI18nContext();
+  var settingsButton = settingsHref ? /*#__PURE__*/React.createElement(Tooltip, {
+    overlay: i18n.t('core.toolHeader.settingsAction'),
+    trigger: ['hover', 'focus']
+  }, /*#__PURE__*/React.createElement(LinkButton, {
+    "aria-label": i18n.t('core.toolHeader.settingsAction'),
+    role: "link",
+    icon: /*#__PURE__*/React.createElement(Cog, {
+      color: colors.orange50
+    }),
+    href: settingsHref,
+    variant: "tertiary"
+  })) : null;
+  return /*#__PURE__*/React.createElement(PageTemplate, {
+    header: header !== null && header !== void 0 ? header : /*#__PURE__*/React.createElement(PageHeaderTemplate, _extends({
+      actions: headerActions,
+      beforeTitleZone: settingsButton
+    }, headerProps)),
+    pane: pane,
+    innerPane: innerPane,
+    ref: ref
+  }, children);
+});
+//# sourceMappingURL=ToolLandingPageTemplate.js.map

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolLandingPageTemplate.js","names":["Cog","React","LinkButton","PageHeaderTemplate","PageTemplate","Tooltip","useI18nContext","colors","ToolLandingPageTemplate","forwardRef","_ref","ref","children","header","pane","innerPane","headerActions","settingsHref","headerProps","_objectWithoutProperties","_excluded","i18n","settingsButton","createElement","overlay","t","trigger","role","icon","color","orange50","href","variant","_extends","actions","beforeTitleZone"],"sources":["../../src/ToolLandingPageTemplate/ToolLandingPageTemplate.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons'\nimport React from 'react'\nimport { LinkButton } from '../Button'\nimport { PageHeaderTemplate } from '../PageHeaderTemplate/PageHeaderTemplate'\nimport { PageTemplate } from '../PageTemplate/PageTemplate'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { colors } from '../_styles/colors'\nimport type { ToolLandingPageTemplateProps } from './ToolLandingPageTemplate.types'\n\nexport const ToolLandingPageTemplate = React.forwardRef<\n  HTMLDivElement,\n  ToolLandingPageTemplateProps\n>(\n  (\n    {\n      children,\n      header,\n      pane,\n      innerPane,\n      headerActions,\n      settingsHref,\n      ...headerProps\n    }: ToolLandingPageTemplateProps,\n    ref\n  ) => {\n    const i18n = useI18nContext()\n\n    const settingsButton = settingsHref ? (\n      <Tooltip\n        overlay={i18n.t('core.toolHeader.settingsAction')}\n        trigger={['hover', 'focus']}\n      >\n        <LinkButton\n          aria-label={i18n.t('core.toolHeader.settingsAction')}\n          role=\"link\"\n          icon={<Cog color={colors.orange50} />}\n          href={settingsHref}\n          variant=\"tertiary\"\n        />\n      </Tooltip>\n    ) : null\n\n    return (\n      <PageTemplate\n        header={\n          header ?? (\n            <PageHeaderTemplate\n              actions={headerActions}\n              beforeTitleZone={settingsButton}\n              {...headerProps}\n            />\n          )\n        }\n        pane={pane}\n        innerPane={innerPane}\n        ref={ref}\n      >\n        {children}\n      </PageTemplate>\n    )\n  }\n)\n"],"mappings":";;;;AAAA,SAASA,GAAG,QAAQ,qBAAqB;AACzC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,SAASC,kBAAkB,QAAQ,0CAA0C;AAC7E,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,MAAM,QAAQ,mBAAmB;AAG1C,OAAO,IAAMC,uBAAuB,gBAAGP,KAAK,CAACQ,UAAU,CAIrD,UAAAC,IAAA,EAUEC,GAAG,EACA;EAAA,IATDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,aAAa,GAAAN,IAAA,CAAbM,aAAa;IACbC,YAAY,GAAAP,IAAA,CAAZO,YAAY;IACTC,WAAW,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAIhB,IAAMC,IAAI,GAAGf,cAAc,CAAC,CAAC;EAE7B,IAAMgB,cAAc,GAAGL,YAAY,gBACjChB,KAAA,CAAAsB,aAAA,CAAClB,OAAO;IACNmB,OAAO,EAAEH,IAAI,CAACI,CAAC,CAAC,gCAAgC,CAAE;IAClDC,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,gBAE5BzB,KAAA,CAAAsB,aAAA,CAACrB,UAAU;IACT,cAAYmB,IAAI,CAACI,CAAC,CAAC,gCAAgC,CAAE;IACrDE,IAAI,EAAC,MAAM;IACXC,IAAI,eAAE3B,KAAA,CAAAsB,aAAA,CAACvB,GAAG;MAAC6B,KAAK,EAAEtB,MAAM,CAACuB;IAAS,CAAE,CAAE;IACtCC,IAAI,EAAEd,YAAa;IACnBe,OAAO,EAAC;EAAU,CACnB,CACM,CAAC,GACR,IAAI;EAER,oBACE/B,KAAA,CAAAsB,aAAA,CAACnB,YAAY;IACXS,MAAM,EACJA,MAAM,aAANA,MAAM,cAANA,MAAM,gBACJZ,KAAA,CAAAsB,aAAA,CAACpB,kBAAkB,EAAA8B,QAAA;MACjBC,OAAO,EAAElB,aAAc;MACvBmB,eAAe,EAAEb;IAAe,GAC5BJ,WAAW,CAChB,CAEJ;IACDJ,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBJ,GAAG,EAAEA;EAAI,GAERC,QACW,CAAC;AAEnB,CACF,CAAC"}

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { PageHeaderTemplateProps } from '../PageHeaderTemplate/PageHeaderTemplate.types';
+import type { PageTemplateProps } from '../PageTemplate/PageTemplate.types';
+export declare type ToolLandingPageTemplateProps = Omit<PageTemplateProps, 'footer'> & Omit<PageHeaderTemplateProps, 'actions' | 'beforeTitleZone' | 'breadcrumbs'> & {
+    headerActions?: ReactNode;
+    settingsHref?: string;
+};

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToolLandingPageTemplate.types.js.map

package/dist/ToolLandingPageTemplate/ToolLandingPageTemplate.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolLandingPageTemplate.types.js","names":[],"sources":["../../src/ToolLandingPageTemplate/ToolLandingPageTemplate.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { PageHeaderTemplateProps } from '../PageHeaderTemplate/PageHeaderTemplate.types'\nimport type { PageTemplateProps } from '../PageTemplate/PageTemplate.types'\n\nexport type ToolLandingPageTemplateProps = Omit<PageTemplateProps, 'footer'> &\n  Omit<\n    PageHeaderTemplateProps,\n    'actions' | 'beforeTitleZone' | 'breadcrumbs'\n  > & {\n    headerActions?: ReactNode\n    settingsHref?: string\n  }\n"],"mappings":""}