@procore/core-react 12.51.0 → 12.53.0

package/dist/TieredSelect/LeafSelectionTieredSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeafSelectionTieredSelect.js","names":["React","OverlayTrigger","Select","isEventSource","useI18nContext","TieredSelectContext","TieredSelectMenu","stopProp","e","key","stopPropagation","empty","hideKeys","overlay","target","LeafSelectionTieredSelect","forwardRef","_ref","ref","className","_ref$disabled","disabled","_ref$error","error","_ref$loading","loading","onKeyDown","_ref$options","options","_ref$value","value","props","_objectWithoutProperties","_excluded","_React$useContext","useContext","afterHide","afterShow","beforeHide","beforeShow","block","getGroupId","getNextGroupId","getValueString","i18nScope","isLeaf","onChange","onClear","onNavigate","onSearch","tabIndex","I18n","tieredSelectMenuRef","useRef","tieredSelectButtonRef","clearRef","createRef","_React$useState","useState","_React$useState2","_slicedToArray","valueString","setValueString","_React$useState3","_React$useState4","currentTier","setCurrentTier","_React$useState5","_React$useState6","internalValue","setInternalValue","_React$useState7","_React$useState8","previousValue","setPreviousValue","useEffect","lastEntryInValue","length","internalOnChange","useCallback","selection","item","internalOnNavigate","nextGroupId","internalOnClear","event","internalOnSearch","internalBeforeHide","_tieredSelectMenuRef$","isEscapeKey","KeyboardEvent","isClickOutside","MouseEvent","current","el","lastValue","createElement","autoFocus","canFlip","_extends","menuRef","placement","trigger","Button","label","placeholder","t","scope"],"sources":["../../src/TieredSelect/LeafSelectionTieredSelect.tsx"],"sourcesContent":["import React from 'react'\nimport type { MenuRef } from '../MenuImperative/MenuImperative.types'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { Select } from '../Select/Select'\nimport { isEventSource } from '../_hooks/ClickOutside'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { TieredSelectContext } from './TieredSelect'\nimport type {\n  Id,\n  InternalTieredSelectProps,\n  Tier,\n  TierSelection,\n} from './TieredSelect.types'\nimport { TieredSelectMenu } from './TieredSelectMenu'\n\nfunction stopProp(e: React.KeyboardEvent<HTMLDivElement>) {\n  if (e.key === 'Escape' || e.key === 'Esc') {\n    e.stopPropagation()\n  }\n}\nconst empty: any[] = []\n\nconst hideKeys = {\n  overlay: ['Escape', 'Esc'],\n  target: ['Escape', 'Esc'],\n}\n\nexport const LeafSelectionTieredSelect = React.forwardRef<\n  HTMLDivElement,\n  InternalTieredSelectProps\n>(function LeafSelectionTieredSelect(\n  {\n    className,\n    disabled = false,\n    error = false,\n    loading = false,\n    onKeyDown, // goes no where\n    options = empty,\n    value = empty,\n    ...props\n  },\n  ref\n) {\n  const {\n    afterHide,\n    afterShow,\n    beforeHide,\n    beforeShow,\n    block,\n    getGroupId,\n    getNextGroupId,\n    getValueString,\n    i18nScope,\n    isLeaf,\n    onChange,\n    onClear,\n    onNavigate,\n    onSearch,\n    tabIndex,\n  } = React.useContext(TieredSelectContext)\n  const I18n = useI18nContext()\n\n  const tieredSelectMenuRef = React.useRef<MenuRef>(null)\n  const tieredSelectButtonRef = React.useRef<HTMLDivElement>(null)\n  const clearRef = React.createRef<HTMLButtonElement>()\n\n  const [valueString, setValueString] = React.useState<string | undefined>('')\n  const [currentTier, setCurrentTier] = React.useState<Id>(null)\n\n  // internal value used for navigation\n  const [internalValue, setInternalValue] = React.useState<Tier[]>(value)\n  // value to reset to if navigation occurs but no selection has been made\n  const [previousValue, setPreviousValue] = React.useState<Tier[]>(value)\n\n  // if value prop changes, update value state, current tier, and set button label\n  // else open to root\n  React.useEffect(\n    function () {\n      const lastEntryInValue = value[value.length - 1]\n\n      if (value.length > 0) {\n        setInternalValue(value)\n        setPreviousValue(value)\n        setValueString(getValueString(value))\n        // show children of last tier in value if not a leaf node\n        // otherwise we want to show the parent of the last tier in value\n        if (isLeaf && !isLeaf(lastEntryInValue)) {\n          setCurrentTier(getNextGroupId(lastEntryInValue))\n        } else {\n          setCurrentTier(getGroupId(lastEntryInValue))\n        }\n      } else {\n        setCurrentTier(null)\n        setInternalValue([])\n        setPreviousValue([])\n        setValueString('')\n      }\n    },\n    [getGroupId, getValueString, getNextGroupId, isLeaf, value]\n  )\n\n  const internalOnChange = React.useCallback(\n    function (selection: TierSelection) {\n      setInternalValue(selection.value)\n      setPreviousValue(selection.value)\n      setValueString(getValueString(selection.value))\n      setCurrentTier(getGroupId(selection.item))\n      onChange(selection)\n    },\n    [getGroupId, onChange, getValueString]\n  )\n\n  const internalOnNavigate = React.useCallback(\n    function (nextGroupId: Id, value: any[]) {\n      setInternalValue(value)\n      setCurrentTier(nextGroupId)\n      onNavigate && onNavigate(nextGroupId, value)\n    },\n    [onNavigate]\n  )\n\n  const internalOnClear = React.useCallback(\n    function (event: React.MouseEvent<HTMLButtonElement>) {\n      setValueString('')\n      setInternalValue([])\n      setPreviousValue([])\n      internalOnNavigate(null, [])\n      onClear && onClear(event)\n    },\n    [internalOnNavigate, onClear]\n  )\n\n  const internalOnSearch = React.useCallback(\n    function (event: any) {\n      onSearch && onSearch(event)\n    },\n    [onSearch]\n  )\n\n  const internalBeforeHide = React.useCallback(\n    function (e: Event) {\n      const isEscapeKey =\n        e instanceof KeyboardEvent && (e.key === 'Escape' || e.key === 'Esc')\n\n      const isClickOutside =\n        e instanceof MouseEvent &&\n        !isEventSource({ current: tieredSelectMenuRef?.current?.el }, e)\n\n      const lastValue = previousValue[previousValue.length - 1]\n\n      if (valueString && (isClickOutside || isEscapeKey)) {\n        setInternalValue(previousValue)\n        if (isLeaf && isLeaf(lastValue)) {\n          setCurrentTier(getGroupId(lastValue))\n        } else {\n          setCurrentTier(getNextGroupId(lastValue))\n        }\n      }\n      return beforeHide && beforeHide(e)\n    },\n    [\n      beforeHide,\n      getGroupId,\n      getNextGroupId,\n      isLeaf,\n      tieredSelectMenuRef,\n      previousValue,\n      valueString,\n    ]\n  )\n\n  return (\n    <OverlayTrigger\n      autoFocus\n      afterHide={afterHide}\n      afterShow={afterShow}\n      beforeHide={internalBeforeHide}\n      beforeShow={(e: Event) => {\n        return beforeShow && e.target !== clearRef.current && beforeShow(e)\n      }}\n      canFlip={true}\n      hideKeys={hideKeys}\n      overlay={\n        <TieredSelectMenu\n          currentTier={currentTier}\n          options={options}\n          loading={loading}\n          menuRef={tieredSelectMenuRef}\n          onNavigate={internalOnNavigate}\n          onSearch={internalOnSearch}\n          onChange={internalOnChange}\n          value={internalValue}\n          previousValue={previousValue}\n          {...props}\n          onKeyDown={stopProp}\n        />\n      }\n      placement=\"bottom-left\"\n      ref={ref}\n      trigger=\"click\"\n    >\n      <Select.Button\n        block={block}\n        className={className}\n        clearRef={clearRef}\n        disabled={disabled}\n        error={error}\n        label={valueString}\n        loading={loading}\n        placeholder={I18n.t('placeholder', { scope: i18nScope })}\n        onClear={internalOnClear}\n        ref={tieredSelectButtonRef}\n        tabIndex={tabIndex}\n      >\n        {valueString || I18n.t('placeholder', { scope: i18nScope })}\n      </Select.Button>\n    </OverlayTrigger>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"LeafSelectionTieredSelect.js","names":["React","OverlayTrigger","Select","isEventSource","useI18nContext","TieredSelectContext","TieredSelectMenu","stopProp","e","key","stopPropagation","empty","hideKeys","overlay","target","LeafSelectionTieredSelect","forwardRef","_ref","ref","className","_ref$disabled","disabled","_ref$error","error","_ref$loading","loading","onKeyDown","ariaLabelledby","_ref$options","options","_ref$value","value","props","_objectWithoutProperties","_excluded","_React$useContext","useContext","afterHide","afterShow","beforeHide","beforeShow","block","getGroupId","getNextGroupId","getValueString","i18nScope","isLeaf","onChange","onClear","onNavigate","onSearch","tabIndex","I18n","tieredSelectMenuRef","useRef","tieredSelectButtonRef","clearRef","createRef","_React$useState","useState","_React$useState2","_slicedToArray","valueString","setValueString","_React$useState3","_React$useState4","currentTier","setCurrentTier","_React$useState5","_React$useState6","internalValue","setInternalValue","_React$useState7","_React$useState8","previousValue","setPreviousValue","useEffect","lastEntryInValue","length","internalOnChange","useCallback","selection","item","internalOnNavigate","nextGroupId","internalOnClear","event","internalOnSearch","internalBeforeHide","_tieredSelectMenuRef$","isEscapeKey","KeyboardEvent","isClickOutside","MouseEvent","current","el","lastValue","createElement","autoFocus","canFlip","_extends","menuRef","placement","trigger","Button","label","placeholder","t","scope"],"sources":["../../src/TieredSelect/LeafSelectionTieredSelect.tsx"],"sourcesContent":["import React from 'react'\nimport type { MenuRef } from '../MenuImperative/MenuImperative.types'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { Select } from '../Select/Select'\nimport { isEventSource } from '../_hooks/ClickOutside'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { TieredSelectContext } from './TieredSelect'\nimport type {\n  Id,\n  InternalTieredSelectProps,\n  Tier,\n  TierSelection,\n} from './TieredSelect.types'\nimport { TieredSelectMenu } from './TieredSelectMenu'\n\nfunction stopProp(e: React.KeyboardEvent<HTMLDivElement>) {\n  if (e.key === 'Escape' || e.key === 'Esc') {\n    e.stopPropagation()\n  }\n}\nconst empty: any[] = []\n\nconst hideKeys = {\n  overlay: ['Escape', 'Esc'],\n  target: ['Escape', 'Esc'],\n}\n\nexport const LeafSelectionTieredSelect = React.forwardRef<\n  HTMLDivElement,\n  InternalTieredSelectProps\n>(function LeafSelectionTieredSelect(\n  {\n    className,\n    disabled = false,\n    error = false,\n    loading = false,\n    onKeyDown, // goes no where\n    'aria-labelledby': ariaLabelledby,\n    options = empty,\n    value = empty,\n    ...props\n  },\n  ref\n) {\n  const {\n    afterHide,\n    afterShow,\n    beforeHide,\n    beforeShow,\n    block,\n    getGroupId,\n    getNextGroupId,\n    getValueString,\n    i18nScope,\n    isLeaf,\n    onChange,\n    onClear,\n    onNavigate,\n    onSearch,\n    tabIndex,\n  } = React.useContext(TieredSelectContext)\n  const I18n = useI18nContext()\n\n  const tieredSelectMenuRef = React.useRef<MenuRef>(null)\n  const tieredSelectButtonRef = React.useRef<HTMLDivElement>(null)\n  const clearRef = React.createRef<HTMLButtonElement>()\n\n  const [valueString, setValueString] = React.useState<string | undefined>('')\n  const [currentTier, setCurrentTier] = React.useState<Id>(null)\n\n  // internal value used for navigation\n  const [internalValue, setInternalValue] = React.useState<Tier[]>(value)\n  // value to reset to if navigation occurs but no selection has been made\n  const [previousValue, setPreviousValue] = React.useState<Tier[]>(value)\n\n  // if value prop changes, update value state, current tier, and set button label\n  // else open to root\n  React.useEffect(\n    function () {\n      const lastEntryInValue = value[value.length - 1]\n\n      if (value.length > 0) {\n        setInternalValue(value)\n        setPreviousValue(value)\n        setValueString(getValueString(value))\n        // show children of last tier in value if not a leaf node\n        // otherwise we want to show the parent of the last tier in value\n        if (isLeaf && !isLeaf(lastEntryInValue)) {\n          setCurrentTier(getNextGroupId(lastEntryInValue))\n        } else {\n          setCurrentTier(getGroupId(lastEntryInValue))\n        }\n      } else {\n        setCurrentTier(null)\n        setInternalValue([])\n        setPreviousValue([])\n        setValueString('')\n      }\n    },\n    [getGroupId, getValueString, getNextGroupId, isLeaf, value]\n  )\n\n  const internalOnChange = React.useCallback(\n    function (selection: TierSelection) {\n      setInternalValue(selection.value)\n      setPreviousValue(selection.value)\n      setValueString(getValueString(selection.value))\n      setCurrentTier(getGroupId(selection.item))\n      onChange(selection)\n    },\n    [getGroupId, onChange, getValueString]\n  )\n\n  const internalOnNavigate = React.useCallback(\n    function (nextGroupId: Id, value: any[]) {\n      setInternalValue(value)\n      setCurrentTier(nextGroupId)\n      onNavigate && onNavigate(nextGroupId, value)\n    },\n    [onNavigate]\n  )\n\n  const internalOnClear = React.useCallback(\n    function (event: React.MouseEvent<HTMLButtonElement>) {\n      setValueString('')\n      setInternalValue([])\n      setPreviousValue([])\n      internalOnNavigate(null, [])\n      onClear && onClear(event)\n    },\n    [internalOnNavigate, onClear]\n  )\n\n  const internalOnSearch = React.useCallback(\n    function (event: any) {\n      onSearch && onSearch(event)\n    },\n    [onSearch]\n  )\n\n  const internalBeforeHide = React.useCallback(\n    function (e: Event) {\n      const isEscapeKey =\n        e instanceof KeyboardEvent && (e.key === 'Escape' || e.key === 'Esc')\n\n      const isClickOutside =\n        e instanceof MouseEvent &&\n        !isEventSource({ current: tieredSelectMenuRef?.current?.el }, e)\n\n      const lastValue = previousValue[previousValue.length - 1]\n\n      if (valueString && (isClickOutside || isEscapeKey)) {\n        setInternalValue(previousValue)\n        if (isLeaf && isLeaf(lastValue)) {\n          setCurrentTier(getGroupId(lastValue))\n        } else {\n          setCurrentTier(getNextGroupId(lastValue))\n        }\n      }\n      return beforeHide && beforeHide(e)\n    },\n    [\n      beforeHide,\n      getGroupId,\n      getNextGroupId,\n      isLeaf,\n      tieredSelectMenuRef,\n      previousValue,\n      valueString,\n    ]\n  )\n\n  return (\n    <OverlayTrigger\n      autoFocus\n      afterHide={afterHide}\n      afterShow={afterShow}\n      beforeHide={internalBeforeHide}\n      beforeShow={(e: Event) => {\n        return beforeShow && e.target !== clearRef.current && beforeShow(e)\n      }}\n      canFlip={true}\n      hideKeys={hideKeys}\n      overlay={\n        <TieredSelectMenu\n          currentTier={currentTier}\n          options={options}\n          loading={loading}\n          menuRef={tieredSelectMenuRef}\n          onNavigate={internalOnNavigate}\n          onSearch={internalOnSearch}\n          onChange={internalOnChange}\n          value={internalValue}\n          previousValue={previousValue}\n          {...props}\n          onKeyDown={stopProp}\n        />\n      }\n      placement=\"bottom-left\"\n      ref={ref}\n      trigger=\"click\"\n    >\n      <Select.Button\n        block={block}\n        className={className}\n        clearRef={clearRef}\n        disabled={disabled}\n        error={error}\n        label={valueString}\n        loading={loading}\n        placeholder={I18n.t('placeholder', { scope: i18nScope })}\n        aria-labelledby={ariaLabelledby}\n        onClear={internalOnClear}\n        ref={tieredSelectButtonRef}\n        tabIndex={tabIndex}\n      >\n        {valueString || I18n.t('placeholder', { scope: i18nScope })}\n      </Select.Button>\n    </OverlayTrigger>\n  )\n})\n"],"mappings":"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"}

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_51_0__sc-e1ql06-0"
+  componentId: "core-12_53_0__sc-e1ql06-0"
 })(["align-items:stretch;max-height:40vh;"]);
 export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledTieredSelectIcon",
-  componentId: "core-12_51_0__sc-e1ql06-1"
+  componentId: "core-12_53_0__sc-e1ql06-1"
 })(["height:24px;width:24px;"]);
 export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledTieredSelectArrowButton",
-  componentId: "core-12_51_0__sc-e1ql06-2"
+  componentId: "core-12_53_0__sc-e1ql06-2"
 })(["border:1px solid transparent;"]);
 export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
   displayName: "StyledTieredSelectBreadcrumbs",
-  componentId: "core-12_51_0__sc-e1ql06-3"
+  componentId: "core-12_53_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_51_0__sc-e1ql06-4"
+  componentId: "core-12_53_0__sc-e1ql06-4"
 })(["height:20px;"]);
 export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
   displayName: "StyledTieredSelectOption",
-  componentId: "core-12_51_0__sc-e1ql06-5"
+  componentId: "core-12_53_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_51_0__sc-e1ql06-6"
+  componentId: "core-12_53_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_51_0__sc-e1ql06-7"
+  componentId: "core-12_53_0__sc-e1ql06-7"
 })(["max-width:248px;min-width:inherit;"]);
 export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledTieredSelectSpinnerOverlay",
-  componentId: "core-12_51_0__sc-e1ql06-8"
+  componentId: "core-12_53_0__sc-e1ql06-8"
 })(["min-height:auto;"]);
 //# sourceMappingURL=TieredSelect.styles.js.map

package/dist/Tile/Tile.styles.js

@@ -44,7 +44,7 @@ var getTileStyles = function getTileStyles(_ref) {
 };
 export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkTile",
-  componentId: "core-12_51_0__sc-8q9p0n-0"
+  componentId: "core-12_53_0__sc-8q9p0n-0"
 })(["", " text-decoration:none;color:inherit;"], function (_ref2) {
   var $orientation = _ref2.$orientation;
   return getTileStyles({
@@ -54,7 +54,7 @@ export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
 });
 export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSelectableTile",
-  componentId: "core-12_51_0__sc-8q9p0n-1"
+  componentId: "core-12_53_0__sc-8q9p0n-1"
 })(["", ""], function (_ref3) {
   var $orientation = _ref3.$orientation,
     $selected = _ref3.$selected,
@@ -72,7 +72,7 @@ export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledInteractableTile",
-  componentId: "core-12_51_0__sc-8q9p0n-2"
+  componentId: "core-12_53_0__sc-8q9p0n-2"
 })(["", ""], function (_ref4) {
   var $orientation = _ref4.$orientation;
   return getTileStyles({
@@ -81,26 +81,26 @@ export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFooter",
-  componentId: "core-12_51_0__sc-8q9p0n-3"
+  componentId: "core-12_53_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_51_0__sc-8q9p0n-4"
+  componentId: "core-12_53_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_51_0__sc-8q9p0n-5"
+  componentId: "core-12_53_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:calc(", "px - 1px);border-bottom-left-radius:calc(", "px - 1px);> *,> picture > img{border-bottom-left-radius:calc(", "px - 1px);border-top-left-radius:calc(", "px - 1px);height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md, mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:calc(", "px - 1px);border-top-right-radius:calc(", "px - 1px);> *,> picture > img{border-top-left-radius:calc(", "px - 1px);border-top-right-radius:calc(", "px - 1px);min-height:inherit;max-height:inherit;height:auto;width:100%;}"], borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
 });
 export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeroOverlay",
-  componentId: "core-12_51_0__sc-8q9p0n-6"
+  componentId: "core-12_53_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_51_0__sc-8q9p0n-7"
+  componentId: "core-12_53_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;align-items:flex-start;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);

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_51_0__sc-1t2ye1d-0"
+  componentId: "core-12_53_0__sc-1t2ye1d-0"
 })(["display:flex;align-items:flex-start;"]);
 export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAssets",
-  componentId: "core-12_51_0__sc-1t2ye1d-1"
+  componentId: "core-12_53_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_51_0__sc-1t2ye1d-2"
+  componentId: "core-12_53_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_51_0__sc-1t2ye1d-3"
+  componentId: "core-12_53_0__sc-1t2ye1d-3"
 })(["> h1,> h2,> h3{display:inline;}"]);
 export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTitlePill",
-  componentId: "core-12_51_0__sc-1t2ye1d-4"
+  componentId: "core-12_53_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_51_0__sc-1t2ye1d-5"
+  componentId: "core-12_53_0__sc-1t2ye1d-5"
 })(["margin-left:auto;"]);
 export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledSubtext",
-  componentId: "core-12_51_0__sc-1t2ye1d-6"
+  componentId: "core-12_53_0__sc-1t2ye1d-6"
 })(["display:block;margin-top:", "px;"], spacing.xs);
 //# sourceMappingURL=Title.styles.js.map

package/dist/Toast/Toast.styles.js

@@ -7,22 +7,25 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledToast = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToast",
-  componentId: "core-12_51_0__sc-1l6lk2n-0"
-})(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;a{color:", ";text-decoration:underline;}"], getShadow(4, 'bottom'), function (_ref) {
+  componentId: "core-12_53_0__sc-1l6lk2n-0"
+})(["", " align-items:flex-start;background-color:", ";border-radius:", "px;box-sizing:border-box;color:", ";display:flex;flex-wrap:wrap;max-width:min(550px,calc(100vw - ", "px));min-height:48px;padding:", "px ", "px;width:550px;a{color:", ";text-decoration:underline;}"], getShadow(4, 'bottom'), function (_ref) {
   var $variant = _ref.$variant;
   return $variant === 'success' ? colors.green30 : colors.red50;
-}, borderRadius.md, colors.white, spacing.md, spacing.xl, colors.white);
+}, borderRadius.md, colors.white, spacing.lg, spacing.md, spacing.xl, colors.white);
 
 // $legacy is direct string inside Toast. Next is with subcomponents
 export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledToastText",
-  componentId: "core-12_51_0__sc-1l6lk2n-1"
-})(["", " font-weight:", ";overflow:hidden;", ""], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
+  componentId: "core-12_53_0__sc-1l6lk2n-1"
+})(["", " flex:1 1 0;font-weight:", ";min-width:0;overflow-wrap:anywhere;", " @media (max-width:320px){flex:0 0 100%;order:1;padding:", "px 0 0;", "}"], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
   var $legacy = _ref2.$legacy;
   return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
+}, spacing.md, function (_ref3) {
+  var $legacy = _ref3.$legacy;
+  return $legacy && 'margin-left: 0;';
 });
 export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToastButton",
-  componentId: "core-12_51_0__sc-1l6lk2n-2"
-})(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
+  componentId: "core-12_53_0__sc-1l6lk2n-2"
+})(["align-self:flex-start;line-height:0;color:", ";flex-shrink:0;padding:0;margin-left:auto;"], colors.white);
 //# sourceMappingURL=Toast.styles.js.map

package/dist/Toast/Toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.js","names":["styled","Button","getTypographyIntent","typographyWeights","borderRadius","colors","getShadow","spacing","StyledToast","div","withConfig","displayName","componentId","_ref","$variant","green30","red50","md","white","xl","StyledToastText","span","semibold","_ref2","$legacy","concat","lg","StyledToastButton"],"sources":["../../src/Toast/Toast.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '../Button'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { ToastVariant } from './Toast.types'\n\nexport const StyledToast = styled.div<{ $variant: ToastVariant }>`\n  ${getShadow(4, 'bottom')}\n\n  align-items: center;\n  background-color: ${({ $variant }) =>\n    $variant === 'success' ? colors.green30 : colors.red50};\n  border-radius: ${borderRadius.md}px;\n  color: ${colors.white};\n  display: flex;\n  min-height: 48px;\n  padding: ${spacing.md}px ${spacing.xl}px;\n  width: 550px;\n\n  a {\n    color: ${colors.white};\n    text-decoration: underline;\n  }\n`\n\n// $legacy is direct string inside Toast. Next is with subcomponents\nexport const StyledToastText = styled.span<{ $legacy?: boolean }>`\n  ${getTypographyIntent('body')}\n  font-weight: ${typographyWeights.semibold};\n  overflow: hidden;\n\n  ${({ $legacy }) =>\n    $legacy ? `margin-left: ${spacing.lg}px;` : `padding: 0 ${spacing.lg}px;`}\n`\n\nexport const StyledToastButton = styled(Button)`\n  line-height: 0;\n  color: ${colors.white};\n  padding: 0;\n  margin-left: auto;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,iCAAiC;AACxC,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8LACjCN,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGJ,UAAAO,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OAC7BA,QAAQ,KAAK,SAAS,GAAGT,MAAM,CAACU,OAAO,GAAGV,MAAM,CAACW,KAAK;AAAA,GACvCZ,YAAY,CAACa,EAAE,EACvBZ,MAAM,CAACa,KAAK,EAGVX,OAAO,CAACU,EAAE,EAAMV,OAAO,CAACY,EAAE,EAI1Bd,MAAM,CAACa,KAAK,CAGxB;;AAED;AACA,OAAO,IAAME,eAAe,gBAAGpB,MAAM,CAACqB,IAAI,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDACtCV,mBAAmB,CAAC,MAAM,CAAC,EACdC,iBAAiB,CAACmB,QAAQ,EAGvC,UAAAC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,mBAAAC,MAAA,CAAmBlB,OAAO,CAACmB,EAAE,yBAAAD,MAAA,CAAsBlB,OAAO,CAACmB,EAAE,QAAK;AAAA,EAC5E;AAED,OAAO,IAAMC,iBAAiB,gBAAG3B,MAAM,CAACC,MAAM,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAEpCP,MAAM,CAACa,KAAK,CAGtB"}
+{"version":3,"file":"Toast.styles.js","names":["styled","Button","getTypographyIntent","typographyWeights","borderRadius","colors","getShadow","spacing","StyledToast","div","withConfig","displayName","componentId","_ref","$variant","green30","red50","md","white","lg","xl","StyledToastText","span","semibold","_ref2","$legacy","concat","_ref3","StyledToastButton"],"sources":["../../src/Toast/Toast.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '../Button'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport type { ToastVariant } from './Toast.types'\n\nexport const StyledToast = styled.div<{ $variant: ToastVariant }>`\n  ${getShadow(4, 'bottom')}\n\n  align-items: flex-start;\n  background-color: ${({ $variant }) =>\n    $variant === 'success' ? colors.green30 : colors.red50};\n  border-radius: ${borderRadius.md}px;\n  box-sizing: border-box;\n  color: ${colors.white};\n  display: flex;\n  flex-wrap: wrap;\n  max-width: min(550px, calc(100vw - ${spacing.lg}px));\n  min-height: 48px;\n  padding: ${spacing.md}px ${spacing.xl}px;\n  width: 550px;\n\n  a {\n    color: ${colors.white};\n    text-decoration: underline;\n  }\n`\n\n// $legacy is direct string inside Toast. Next is with subcomponents\nexport const StyledToastText = styled.span<{ $legacy?: boolean }>`\n  ${getTypographyIntent('body')}\n  flex: 1 1 0;\n  font-weight: ${typographyWeights.semibold};\n  min-width: 0;\n  overflow-wrap: anywhere;\n\n  ${({ $legacy }) =>\n    $legacy ? `margin-left: ${spacing.lg}px;` : `padding: 0 ${spacing.lg}px;`}\n\n  @media (max-width: 320px) {\n    flex: 0 0 100%;\n    order: 1;\n    padding: ${spacing.md}px 0 0;\n\n    ${({ $legacy }) => $legacy && 'margin-left: 0;'}\n  }\n`\n\nexport const StyledToastButton = styled(Button)`\n  align-self: flex-start;\n  line-height: 0;\n  color: ${colors.white};\n  flex-shrink: 0;\n  padding: 0;\n  margin-left: auto;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SACEC,mBAAmB,EACnBC,iBAAiB,QACZ,iCAAiC;AACxC,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,WAAW,gBAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iRACjCN,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGJ,UAAAO,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OAC7BA,QAAQ,KAAK,SAAS,GAAGT,MAAM,CAACU,OAAO,GAAGV,MAAM,CAACW,KAAK;AAAA,GACvCZ,YAAY,CAACa,EAAE,EAEvBZ,MAAM,CAACa,KAAK,EAGgBX,OAAO,CAACY,EAAE,EAEpCZ,OAAO,CAACU,EAAE,EAAMV,OAAO,CAACa,EAAE,EAI1Bf,MAAM,CAACa,KAAK,CAGxB;;AAED;AACA,OAAO,IAAMG,eAAe,gBAAGrB,MAAM,CAACsB,IAAI,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yJACtCV,mBAAmB,CAAC,MAAM,CAAC,EAEdC,iBAAiB,CAACoB,QAAQ,EAIvC,UAAAC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,mBAAAC,MAAA,CAAmBnB,OAAO,CAACY,EAAE,yBAAAO,MAAA,CAAsBnB,OAAO,CAACY,EAAE,QAAK;AAAA,GAK9DZ,OAAO,CAACU,EAAE,EAEnB,UAAAU,KAAA;EAAA,IAAGF,OAAO,GAAAE,KAAA,CAAPF,OAAO;EAAA,OAAOA,OAAO,IAAI,iBAAiB;AAAA,EAElD;AAED,OAAO,IAAMG,iBAAiB,gBAAG5B,MAAM,CAACC,MAAM,CAAC,CAAAS,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iGAGpCP,MAAM,CAACa,KAAK,CAItB"}

package/dist/ToggleButton/ToggleButton.styles.js

@@ -5,7 +5,7 @@ import { focusBlue } from '../_styles/mixins';
 var selectedStyles = /*#__PURE__*/css(["background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}&.hover,&:hover{background-color:", ";color:", ";}&.focus,&:focus{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";}&:disabled{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue50, colors.blue96, colors.blue70, colors.blue70, colors.blue70, colors.blue50);
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_51_0__sc-1x59fxi-0"
+  componentId: "core-12_53_0__sc-1x59fxi-0"
 })(["&.focus,&:focus{box-shadow:none;outline:2px solid ", ";outline-offset:4px;}&.selected{", "}", ""], focusBlue, selectedStyles, function (_ref) {
   var $selected = _ref.$selected;
   return $selected && selectedStyles;

package/dist/Token/Token.styles.js

@@ -7,23 +7,23 @@ import { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledErrorIcon = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledErrorIcon",
-  componentId: "core-12_51_0__sc-zqi94b-0"
+  componentId: "core-12_53_0__sc-zqi94b-0"
 })(["align-items:center;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;"], colors.white, spacing.xs);
 export var StyledErrorButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledErrorButton",
-  componentId: "core-12_51_0__sc-zqi94b-1"
+  componentId: "core-12_53_0__sc-zqi94b-1"
 })(["", " align-items:center;border-radius:50%;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;&:focus-visible{", "}"], getUnstyledButton, colors.white, spacing.xs, getGapOutlineFocus('ontop'));
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_51_0__sc-zqi94b-2"
+  componentId: "core-12_53_0__sc-zqi94b-2"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_51_0__sc-zqi94b-3"
+  componentId: "core-12_53_0__sc-zqi94b-3"
 })(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40, colors.white);
 export var StyledToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToken",
-  componentId: "core-12_51_0__sc-zqi94b-4"
+  componentId: "core-12_53_0__sc-zqi94b-4"
 })(["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_51_0__sc-1jpjx47-0"
+  componentId: "core-12_53_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_51_0__sc-1jpjx47-1"
+  componentId: "core-12_53_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_51_0__sc-1jpjx47-2"
+  componentId: "core-12_53_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_51_0__sc-1jpjx47-3"
+  componentId: "core-12_53_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_51_0__sc-1jpjx47-4"
+  componentId: "core-12_53_0__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_51_0__sc-1jpjx47-5"
+  componentId: "core-12_53_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_51_0__sc-wa8j06-0"
+  componentId: "core-12_53_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_51_0__sc-wa8j06-1"
+  componentId: "core-12_53_0__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_51_0__sc-wa8j06-2"
+  componentId: "core-12_53_0__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.styles.js

@@ -8,16 +8,16 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledTooltip = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTooltip",
-  componentId: "core-12_51_0__sc-1fawsi4-0"
+  componentId: "core-12_53_0__sc-1fawsi4-0"
 })(["", " color:", ";max-width:200px;padding:", "px ", "px;position:relative;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;&:empty{display:none;}"], getTypographyIntent('small'), colors.white, spacing.sm, spacing.md);
 export var StyledContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_51_0__sc-1fawsi4-1"
+  componentId: "core-12_53_0__sc-1fawsi4-1"
 })(["display:inline-flex;background-color:", ";border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}&:has(> span:empty) + [data-overlay-arrow]{display:none;}"], colors.gray15, borderRadius.md, getShadow(3, 'bottom'), colors.gray15);
 
 // This is for the inline typography icon button. Note: not `Button` styles
 export var StyledTooltipButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledTooltipButton",
-  componentId: "core-12_51_0__sc-1fawsi4-2"
+  componentId: "core-12_53_0__sc-1fawsi4-2"
 })(["", " border-radius:50%;color:", ";display:inline-flex;vertical-align:middle;&:focus-visible{", "}* + &{margin-left:", "px;}"], getUnstyledButton, colors.gray45, getGapOutlineFocus('ontop'), spacing.sm);
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tree/Tree.js

@@ -3,7 +3,7 @@ var _excluded = ["options", "expanded", "selected", "selectionLimit", "getRoot",
   _excluded2 = ["nodes", "rowRenderer", "highlight", "isTreeFocused"],
   _excluded3 = ["node", "getIcon", "getLabel", "handleExpansion", "handleSelection", "selectionLimit", "isFileLimitReached", "shouldShowTooltip", "isMouseOver", "treeContainer"],
   _excluded4 = ["children", "isSelected"],
-  _excluded5 = ["children", "isHighlighted", "isSelected", "isSelectable", "isExpandable", "isFileLimitReached", "level"];
+  _excluded5 = ["children", "isHighlighted", "isSelected", "isSelectable", "isExpandable", "isFileLimitReached", "isKeyboardMode", "level"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -180,13 +180,17 @@ export var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     isTreeFocused = _React$useState4[0],
     setIsTreeFocused = _React$useState4[1];
-  var _React$useState5 = React.useState({
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isKeyboardMode = _React$useState6[0],
+    setIsKeyboardMode = _React$useState6[1];
+  var _React$useState7 = React.useState({
       width: 0,
       height: 0
     }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    containerSize = _React$useState6[0],
-    setContainerSize = _React$useState6[1];
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    containerSize = _React$useState8[0],
+    setContainerSize = _React$useState8[1];
   var handleContainerResize = React.useCallback(function (entries) {
     if (entries[0]) {
       var _ref2 = entries[0].target,
@@ -272,7 +276,22 @@ export var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isHighlighted = React.useCallback(function (node) {
     return isTreeFocused && isNodeHighlighted(node);
   }, [isNodeHighlighted, isTreeFocused]);
+  var handleFocus = function handleFocus(e) {
+    setIsTreeFocused(true);
+    try {
+      if (typeof e.target.matches === 'function' && e.target.matches(':focus-visible')) {
+        setIsKeyboardMode(true);
+      }
+    } catch (_unused) {
+      // :focus-visible unsupported in this environment; ignore.
+    }
+  };
+  var handleBlur = function handleBlur() {
+    setIsTreeFocused(false);
+    setIsKeyboardMode(false);
+  };
   var handleAccessibility = function handleAccessibility(e) {
+    setIsKeyboardMode(true);
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     var key = e.key;
     switch (key) {
@@ -380,9 +399,10 @@ export var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isFileLimitReached: isFileLimitReached,
       selectionLimit: selectionLimit,
       isTreeFocused: isTreeFocused,
+      isKeyboardMode: isKeyboardMode,
       treeContainer: wrapperRef.current
     };
-  }, [getIcon, getLabel, getType, handleExpansion, handleSelection, highlight, isExpandable, isExpanded, isFileLimitReached, isHighlighted, isLoading, isSelectable, isSelected, isTreeFocused, nodes, rowRenderer, selectionLimit]);
+  }, [getIcon, getLabel, getType, handleExpansion, handleSelection, highlight, isExpandable, isExpanded, isFileLimitReached, isHighlighted, isKeyboardMode, isLoading, isSelectable, isSelected, isTreeFocused, nodes, rowRenderer, selectionLimit]);
   if (!rootNodes) {
     console.error('Tree must have a valid root node');
     return null;
@@ -393,13 +413,15 @@ export var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-multiselectable": multiple,
     "aria-activedescendant": highlightedNode ? getTreeItemId(highlightedNode.id) : undefined,
     tabIndex: 0,
-    onFocus: function onFocus() {
-      return setIsTreeFocused(true);
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleAccessibility,
+    onMouseDown: function onMouseDown() {
+      return setIsKeyboardMode(false);
     },
-    onBlur: function onBlur() {
-      return setIsTreeFocused(false);
-    },
-    onKeyDown: handleAccessibility
+    onMouseMove: function onMouseMove() {
+      return setIsKeyboardMode(false);
+    }
   }), /*#__PURE__*/React.createElement(FixedSizeList, {
     className: "size-list",
     ref: listRef,
@@ -425,10 +447,10 @@ var TreeNode = /*#__PURE__*/React.memo(function (_ref3) {
     style = _ref3.style;
   var node = nodes[index];
   var isHighlighted = props.isHighlighted(node);
-  var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isMouseOver = _React$useState8[0],
-    setMouseOver = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    isMouseOver = _React$useState0[0],
+    setMouseOver = _React$useState0[1];
   var timer = useTimer({});
   var _useVisibility = useVisibility({}),
     shouldShowTooltip = _useVisibility.isVisible,
@@ -527,6 +549,7 @@ var TreeRow = function TreeRow(_ref4) {
     isSelectable: isSelectable,
     isExpandable: isExpandable,
     isHighlighted: isHighlighted,
+    isKeyboardMode: props.isKeyboardMode,
     isFileLimitReached: isFileLimitReached,
     "data-qa": "core-tree-row-container"
   }, /*#__PURE__*/React.createElement(StyledTreeRowContent, {
@@ -565,7 +588,7 @@ var IconContainer = function IconContainer(_ref5) {
 };
 var StyledChevronIcon = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevronIcon",
-  componentId: "core-12_51_0__sc-f25ekl-0"
+  componentId: "core-12_53_0__sc-f25ekl-0"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref6) {
   var $isExpanded = _ref6.$isExpanded;
   return $isExpanded ? 90 : 0;
@@ -643,10 +666,10 @@ var TreeRowTooltip = function TreeRowTooltip(_ref0) {
   var isUserInteracting = isFocused || isMouseOver;
   var isTooltipVisible = isUserInteracting && shouldShowTooltip && !isSelected;
   var isFile = nodeType === 'leaf';
-  var _React$useState9 = React.useState(false),
-    _React$useState0 = _slicedToArray(_React$useState9, 2),
-    isCropped = _React$useState0[0],
-    setCropped = _React$useState0[1];
+  var _React$useState1 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState1, 2),
+    isCropped = _React$useState10[0],
+    setCropped = _React$useState10[1];
   var registerRowEl = useIntersectionObserver(function (entries) {
     entries.forEach(function (entry) {
       if (entry.rootBounds && entry.rootBounds.left - entry.boundingClientRect.left >= 0) {
@@ -679,12 +702,14 @@ var TreeRowContainer = function TreeRowContainer(_ref1) {
     isSelectable = _ref1.isSelectable,
     isExpandable = _ref1.isExpandable,
     isFileLimitReached = _ref1.isFileLimitReached,
+    isKeyboardMode = _ref1.isKeyboardMode,
     level = _ref1.level,
     props = _objectWithoutProperties(_ref1, _excluded5);
   return /*#__PURE__*/React.createElement(StyledTreeRowContainer, _extends({
     $isSelectable: isSelectable && (isFileLimitReached && isSelected || !isFileLimitReached) || isExpandable,
     $isHighlighted: isHighlighted,
     $isSelected: isSelected,
+    $isKeyboardMode: isKeyboardMode,
     style: {
       paddingLeft: getPadding(level)
     }