@procore/core-react 12.52.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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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_52_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

@@ -588,7 +588,7 @@ var IconContainer = function IconContainer(_ref5) {
 };
 var StyledChevronIcon = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevronIcon",
-  componentId: "core-12_52_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;

package/dist/Tree/Tree.styles.js

@@ -6,11 +6,11 @@ import { colors } from '../_styles/colors';
 import { focusBlue } from '../_styles/mixins';
 export var StyledFilenameCaption = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledFilenameCaption",
-  componentId: "core-12_52_0__sc-2d45b5-0"
+  componentId: "core-12_53_0__sc-2d45b5-0"
 })(["display:flex;width:100%;"]);
 export var StyledTree = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTree",
-  componentId: "core-12_52_0__sc-2d45b5-1"
+  componentId: "core-12_53_0__sc-2d45b5-1"
 })(["width:100%;height:100%;min-height:36px;outline:none;overflow:auto;"]);
 export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -18,7 +18,7 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   }
 }).withConfig({
   displayName: "StyledTreeRowContainer",
-  componentId: "core-12_52_0__sc-2d45b5-2"
+  componentId: "core-12_53_0__sc-2d45b5-2"
 })(["display:flex;align-items:center;height:36px;background:transparent;box-shadow:inset 4px 0px 0px transparent;cursor:default;outline:none;", " &:hover{background:", ";}", " ", ""], function (_ref) {
   var isSelectable = _ref.isSelectable,
     $isSelectable = _ref.$isSelectable;
@@ -38,29 +38,29 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
 });
 export var StyledTreeRowContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowContent",
-  componentId: "core-12_52_0__sc-2d45b5-3"
+  componentId: "core-12_53_0__sc-2d45b5-3"
 })(["display:flex;align-items:center;"]);
 export var StyledTreeRowWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowWrapper",
-  componentId: "core-12_52_0__sc-2d45b5-4"
+  componentId: "core-12_53_0__sc-2d45b5-4"
 })(["outline:none;"]);
 var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledIconBase",
-  componentId: "core-12_52_0__sc-2d45b5-5"
+  componentId: "core-12_53_0__sc-2d45b5-5"
 })(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;min-width:24px;min-height:24px;"]);
 
 /** @deprecated Use StyledChevronPlaceholder instead */
 export var StyledChevronContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronContainer",
-  componentId: "core-12_52_0__sc-2d45b5-6"
+  componentId: "core-12_53_0__sc-2d45b5-6"
 })([""]);
 export var StyledChevronPlaceholder = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronPlaceholder",
-  componentId: "core-12_52_0__sc-2d45b5-7"
+  componentId: "core-12_53_0__sc-2d45b5-7"
 })([""]);
 export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_52_0__sc-2d45b5-8"
+  componentId: "core-12_53_0__sc-2d45b5-8"
 })(["color:", ";"], function (_ref4) {
   var $isSelected = _ref4.$isSelected;
   return $isSelected ? colors.blue45 : colors.gray40;
@@ -69,7 +69,7 @@ export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig(
 /** @deprecated TreeRowChevron now uses Button with inline styled icon */
 export var StyledChevron = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevron",
-  componentId: "core-12_52_0__sc-2d45b5-9"
+  componentId: "core-12_53_0__sc-2d45b5-9"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
   var $isExpanded = _ref5.$isExpanded;
   return $isExpanded ? 90 : 0;

package/dist/Typeahead/Typeahead.js

@@ -77,7 +77,8 @@ export var Typeahead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: mergeRefs(innerRef, ref),
     onChange: onChange,
     disabled: disabled,
-    value: value
+    value: value,
+    $hasValue: Boolean(value)
   })), /*#__PURE__*/React.createElement(StyledSearchIcon, {
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Search, {

package/dist/Typeahead/Typeahead.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.js","names":["Clear","Search","React","Button","useLayoutEventListener","useI18nContext","mergeRefs","StyledClearIcon","StyledInput","StyledSearchIcon","StyledTypeahead","Typeahead","forwardRef","_ref","ref","className","disabled","onChange_","onChange","style","value","_ref$type","type","onKeyDown_","onKeyDown","props","_objectWithoutProperties","_excluded","useCallback","e","target","i18n","innerRef","useRef","dependencies","event","handler","key","stopPropagation","_objectSpread","scope","onClickClear","current","focus","createElement","_extends","size","t","variant","icon","onClick"],"sources":["../../src/Typeahead/Typeahead.tsx"],"sourcesContent":["import { Clear, Search } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledClearIcon,\n  StyledInput,\n  StyledSearchIcon,\n  StyledTypeahead,\n} from './Typeahead.styles'\nimport type { TypeaheadInputProps, TypeaheadProps } from './Typeahead.types'\n\n/**\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-typeahead--demo)\n\n */\nexport const Typeahead = React.forwardRef<\n  HTMLInputElement,\n  TypeaheadInputProps & TypeaheadProps\n>(function (\n  {\n    className,\n    disabled,\n    onChange: onChange_,\n    style,\n    value,\n    type = 'search',\n    onKeyDown: onKeyDown_,\n    ...props\n  },\n  ref\n) {\n  const onChange = React.useCallback(\n    function onChange(e: React.ChangeEvent<HTMLInputElement>) {\n      onChange_?.(e.target.value, e)\n    },\n    [onChange_]\n  )\n  const i18n = useI18nContext()\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n  useLayoutEventListener({\n    dependencies: [onChange_, onKeyDown_],\n    event: 'keydown',\n    handler: function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // stop propagation once to clear input\n        if ((e.target as HTMLInputElement).value) {\n          e.stopPropagation()\n        }\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n      }\n\n      onKeyDown_?.(e)\n    },\n    scope: innerRef,\n  })\n\n  const onClickClear = React.useCallback(\n    function onClickClear(e: React.MouseEvent<HTMLButtonElement>) {\n      if (!disabled) {\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n\n        if (innerRef.current) {\n          innerRef.current.focus()\n        }\n      }\n    },\n    [disabled, onChange_]\n  )\n\n  return (\n    <StyledTypeahead\n      className={className}\n      style={style}\n      data-qa={props['data-qa']}\n    >\n      <StyledInput\n        {...props}\n        type={type}\n        data-qa=\"core-typeahead-input\"\n        ref={mergeRefs(innerRef, ref)}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n      />\n      <StyledSearchIcon disabled={disabled}>\n        <Search data-qa=\"core-typeahead-search-icon\" size=\"sm\" />\n      </StyledSearchIcon>\n      {value && (\n        <StyledClearIcon disabled={disabled}>\n          <Button\n            aria-label={i18n.t('core.typeahead.clear')}\n            data-qa=\"core-typeahead-clear-icon\"\n            size=\"sm\"\n            variant=\"tertiary\"\n            icon={<Clear />}\n            disabled={disabled}\n            onClick={onClickClear}\n          />\n        </StyledClearIcon>\n      )}\n    </StyledTypeahead>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"Typeahead.js","names":["Clear","Search","React","Button","useLayoutEventListener","useI18nContext","mergeRefs","StyledClearIcon","StyledInput","StyledSearchIcon","StyledTypeahead","Typeahead","forwardRef","_ref","ref","className","disabled","onChange_","onChange","style","value","_ref$type","type","onKeyDown_","onKeyDown","props","_objectWithoutProperties","_excluded","useCallback","e","target","i18n","innerRef","useRef","dependencies","event","handler","key","stopPropagation","_objectSpread","scope","onClickClear","current","focus","createElement","_extends","$hasValue","Boolean","size","t","variant","icon","onClick"],"sources":["../../src/Typeahead/Typeahead.tsx"],"sourcesContent":["import { Clear, Search } from '@procore/core-icons/dist'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { useLayoutEventListener } from '../_hooks/EventListener'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport {\n  StyledClearIcon,\n  StyledInput,\n  StyledSearchIcon,\n  StyledTypeahead,\n} from './Typeahead.styles'\nimport type { TypeaheadInputProps, TypeaheadProps } from './Typeahead.types'\n\n/**\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-typeahead--demo)\n\n */\nexport const Typeahead = React.forwardRef<\n  HTMLInputElement,\n  TypeaheadInputProps & TypeaheadProps\n>(function (\n  {\n    className,\n    disabled,\n    onChange: onChange_,\n    style,\n    value,\n    type = 'search',\n    onKeyDown: onKeyDown_,\n    ...props\n  },\n  ref\n) {\n  const onChange = React.useCallback(\n    function onChange(e: React.ChangeEvent<HTMLInputElement>) {\n      onChange_?.(e.target.value, e)\n    },\n    [onChange_]\n  )\n  const i18n = useI18nContext()\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n  useLayoutEventListener({\n    dependencies: [onChange_, onKeyDown_],\n    event: 'keydown',\n    handler: function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        // stop propagation once to clear input\n        if ((e.target as HTMLInputElement).value) {\n          e.stopPropagation()\n        }\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n      }\n\n      onKeyDown_?.(e)\n    },\n    scope: innerRef,\n  })\n\n  const onClickClear = React.useCallback(\n    function onClickClear(e: React.MouseEvent<HTMLButtonElement>) {\n      if (!disabled) {\n        onChange_?.('', { ...e, target: { ...e.target, value: '' } })\n\n        if (innerRef.current) {\n          innerRef.current.focus()\n        }\n      }\n    },\n    [disabled, onChange_]\n  )\n\n  return (\n    <StyledTypeahead\n      className={className}\n      style={style}\n      data-qa={props['data-qa']}\n    >\n      <StyledInput\n        {...props}\n        type={type}\n        data-qa=\"core-typeahead-input\"\n        ref={mergeRefs(innerRef, ref)}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        $hasValue={Boolean(value)}\n      />\n      <StyledSearchIcon disabled={disabled}>\n        <Search data-qa=\"core-typeahead-search-icon\" size=\"sm\" />\n      </StyledSearchIcon>\n      {value && (\n        <StyledClearIcon disabled={disabled}>\n          <Button\n            aria-label={i18n.t('core.typeahead.clear')}\n            data-qa=\"core-typeahead-clear-icon\"\n            size=\"sm\"\n            variant=\"tertiary\"\n            icon={<Clear />}\n            disabled={disabled}\n            onClick={onClickClear}\n          />\n        </StyledClearIcon>\n      )}\n    </StyledTypeahead>\n  )\n})\n"],"mappings":";;;;;;;;;;AAAA,SAASA,KAAK,EAAEC,MAAM,QAAQ,0BAA0B;AACxD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SACEC,eAAe,EACfC,WAAW,EACXC,gBAAgB,EAChBC,eAAe,QACV,oBAAoB;AAG3B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,gBAAGT,KAAK,CAACU,UAAU,CAGvC,UAAAC,IAAA,EAWAC,GAAG,EACH;EAAA,IAVEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACEC,SAAS,GAAAJ,IAAA,CAAnBK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,SAAA,GAAAR,IAAA,CACLS,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,QAAQ,GAAAA,SAAA;IACJE,UAAU,GAAAV,IAAA,CAArBW,SAAS;IACNC,KAAK,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAIV,IAAMT,QAAQ,GAAGhB,KAAK,CAAC0B,WAAW,CAChC,SAASV,QAAQA,CAACW,CAAsC,EAAE;IACxDZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAGY,CAAC,CAACC,MAAM,CAACV,KAAK,EAAES,CAAC,CAAC;EAChC,CAAC,EACD,CAACZ,SAAS,CACZ,CAAC;EACD,IAAMc,IAAI,GAAG1B,cAAc,CAAC,CAAC;EAC7B,IAAM2B,QAAQ,GAAG9B,KAAK,CAAC+B,MAAM,CAA0B,IAAI,CAAC;EAE5D7B,sBAAsB,CAAC;IACrB8B,YAAY,EAAE,CAACjB,SAAS,EAAEM,UAAU,CAAC;IACrCY,KAAK,EAAE,SAAS;IAChBC,OAAO,EAAE,SAASZ,SAASA,CAACK,CAAwC,EAAE;MACpE,IAAIA,CAAC,CAACQ,GAAG,KAAK,QAAQ,IAAIR,CAAC,CAACQ,GAAG,KAAK,KAAK,EAAE;QACzC;QACA,IAAKR,CAAC,CAACC,MAAM,CAAsBV,KAAK,EAAE;UACxCS,CAAC,CAACS,eAAe,CAAC,CAAC;QACrB;QACArB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG,EAAE,EAAAsB,aAAA,CAAAA,aAAA,KAAOV,CAAC;UAAEC,MAAM,EAAAS,aAAA,CAAAA,aAAA,KAAOV,CAAC,CAACC,MAAM;YAAEV,KAAK,EAAE;UAAE;QAAE,EAAE,CAAC;MAC/D;MAEAG,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGM,CAAC,CAAC;IACjB,CAAC;IACDW,KAAK,EAAER;EACT,CAAC,CAAC;EAEF,IAAMS,YAAY,GAAGvC,KAAK,CAAC0B,WAAW,CACpC,SAASa,YAAYA,CAACZ,CAAsC,EAAE;IAC5D,IAAI,CAACb,QAAQ,EAAE;MACbC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG,EAAE,EAAAsB,aAAA,CAAAA,aAAA,KAAOV,CAAC;QAAEC,MAAM,EAAAS,aAAA,CAAAA,aAAA,KAAOV,CAAC,CAACC,MAAM;UAAEV,KAAK,EAAE;QAAE;MAAE,EAAE,CAAC;MAE7D,IAAIY,QAAQ,CAACU,OAAO,EAAE;QACpBV,QAAQ,CAACU,OAAO,CAACC,KAAK,CAAC,CAAC;MAC1B;IACF;EACF,CAAC,EACD,CAAC3B,QAAQ,EAAEC,SAAS,CACtB,CAAC;EAED,oBACEf,KAAA,CAAA0C,aAAA,CAAClC,eAAe;IACdK,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEA,KAAM;IACb,WAASM,KAAK,CAAC,SAAS;EAAE,gBAE1BvB,KAAA,CAAA0C,aAAA,CAACpC,WAAW,EAAAqC,QAAA,KACNpB,KAAK;IACTH,IAAI,EAAEA,IAAK;IACX,WAAQ,sBAAsB;IAC9BR,GAAG,EAAER,SAAS,CAAC0B,QAAQ,EAAElB,GAAG,CAAE;IAC9BI,QAAQ,EAAEA,QAAS;IACnBF,QAAQ,EAAEA,QAAS;IACnBI,KAAK,EAAEA,KAAM;IACb0B,SAAS,EAAEC,OAAO,CAAC3B,KAAK;EAAE,EAC3B,CAAC,eACFlB,KAAA,CAAA0C,aAAA,CAACnC,gBAAgB;IAACO,QAAQ,EAAEA;EAAS,gBACnCd,KAAA,CAAA0C,aAAA,CAAC3C,MAAM;IAAC,WAAQ,4BAA4B;IAAC+C,IAAI,EAAC;EAAI,CAAE,CACxC,CAAC,EAClB5B,KAAK,iBACJlB,KAAA,CAAA0C,aAAA,CAACrC,eAAe;IAACS,QAAQ,EAAEA;EAAS,gBAClCd,KAAA,CAAA0C,aAAA,CAACzC,MAAM;IACL,cAAY4B,IAAI,CAACkB,CAAC,CAAC,sBAAsB,CAAE;IAC3C,WAAQ,2BAA2B;IACnCD,IAAI,EAAC,IAAI;IACTE,OAAO,EAAC,UAAU;IAClBC,IAAI,eAAEjD,KAAA,CAAA0C,aAAA,CAAC5C,KAAK,MAAE,CAAE;IAChBgB,QAAQ,EAAEA,QAAS;IACnBoC,OAAO,EAAEX;EAAa,CACvB,CACc,CAEJ,CAAC;AAEtB,CAAC,CAAC"}

package/dist/Typeahead/Typeahead.styles.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $hasValue?: boolean | undefined;
+}>> & string;
 export declare const StyledSearchIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean | undefined;
 }>> & string;

package/dist/Typeahead/Typeahead.styles.js

@@ -5,23 +5,25 @@ import { spacing } from '../_styles/spacing';
 var inputHeight = 36;
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_52_0__sc-gpc39h-0"
-})(["", " padding-left:", "px;padding-right:", "px;"], getSearchInputStyles(), spacing.xxl, spacing.xxl);
+  componentId: "core-12_53_0__sc-gpc39h-0"
+})(["", " padding-left:", "px;padding-right:", "px;"], getSearchInputStyles(), spacing.xxl, function (p) {
+  return p.$hasValue ? spacing.xxl : spacing.md;
+});
 var iconContainerStyles = /*#__PURE__*/css(["align-items:center;color:", ";display:flex;height:", "px;justify-content:center;position:absolute;top:0;width:", "px;"], function (p) {
   return p.disabled ? colors.gray70 : colors.gray45;
 }, inputHeight, inputHeight);
 export var StyledSearchIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSearchIcon",
-  componentId: "core-12_52_0__sc-gpc39h-1"
+  componentId: "core-12_53_0__sc-gpc39h-1"
 })(["", " left:0;pointer-events:none;"], iconContainerStyles);
 export var StyledClearIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledClearIcon",
-  componentId: "core-12_52_0__sc-gpc39h-2"
+  componentId: "core-12_53_0__sc-gpc39h-2"
 })(["", " pointer-events:", ";right:0;"], iconContainerStyles, function (p) {
   return p.disabled ? 'none' : 'auto';
 });
 export var StyledTypeahead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTypeahead",
-  componentId: "core-12_52_0__sc-gpc39h-3"
+  componentId: "core-12_53_0__sc-gpc39h-3"
 })(["position:relative;width:100%;"]);
 //# sourceMappingURL=Typeahead.styles.js.map

package/dist/Typeahead/Typeahead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.styles.js","names":["styled","css","getSearchInputStyles","colors","spacing","inputHeight","StyledInput","input","withConfig","displayName","componentId","xxl","iconContainerStyles","p","disabled","gray70","gray45","StyledSearchIcon","div","StyledClearIcon","StyledTypeahead"],"sources":["../../src/Typeahead/Typeahead.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getSearchInputStyles } from '../Search/Search.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst inputHeight = 36\n\nexport const StyledInput = styled.input`\n  ${getSearchInputStyles()}\n\n  padding-left: ${spacing.xxl}px;\n  padding-right: ${spacing.xxl}px;\n`\n\nconst iconContainerStyles = css<{ disabled?: boolean }>`\n  align-items: center;\n  color: ${(p) => (p.disabled ? colors.gray70 : colors.gray45)};\n  display: flex;\n  height: ${inputHeight}px;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  width: ${inputHeight}px;\n`\n\nexport const StyledSearchIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  left: 0;\n  pointer-events: none;\n`\n\nexport const StyledClearIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  pointer-events: ${(p) => (p.disabled ? 'none' : 'auto')};\n  right: 0;\n`\n\nexport const StyledTypeahead = styled.div`\n  position: relative;\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,WAAW,GAAG,EAAE;AAEtB,OAAO,IAAMC,WAAW,gBAAGN,MAAM,CAACO,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDACnCR,oBAAoB,CAAC,CAAC,EAERE,OAAO,CAACO,GAAG,EACVP,OAAO,CAACO,GAAG,CAC7B;AAED,IAAMC,mBAAmB,gBAAGX,GAAG,4HAEpB,UAACY,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAGX,MAAM,CAACY,MAAM,GAAGZ,MAAM,CAACa,MAAM;AAAA,CAAC,EAElDX,WAAW,EAIZA,WAAW,CACrB;AAED,OAAO,IAAMY,gBAAgB,gBAAGjB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yCACtCE,mBAAmB,CAGtB;AAED,OAAO,IAAMO,eAAe,gBAAGnB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0CACrCE,mBAAmB,EACH,UAACC,CAAC;EAAA,OAAMA,CAAC,CAACC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CAExD;AAED,OAAO,IAAMM,eAAe,gBAAGpB,MAAM,CAACkB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAGxC"}
+{"version":3,"file":"Typeahead.styles.js","names":["styled","css","getSearchInputStyles","colors","spacing","inputHeight","StyledInput","input","withConfig","displayName","componentId","xxl","p","$hasValue","md","iconContainerStyles","disabled","gray70","gray45","StyledSearchIcon","div","StyledClearIcon","StyledTypeahead"],"sources":["../../src/Typeahead/Typeahead.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getSearchInputStyles } from '../Search/Search.styles'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst inputHeight = 36\n\nexport const StyledInput = styled.input<{ $hasValue?: boolean }>`\n  ${getSearchInputStyles()}\n\n  padding-left: ${spacing.xxl}px;\n  padding-right: ${(p) => (p.$hasValue ? spacing.xxl : spacing.md)}px;\n`\n\nconst iconContainerStyles = css<{ disabled?: boolean }>`\n  align-items: center;\n  color: ${(p) => (p.disabled ? colors.gray70 : colors.gray45)};\n  display: flex;\n  height: ${inputHeight}px;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  width: ${inputHeight}px;\n`\n\nexport const StyledSearchIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  left: 0;\n  pointer-events: none;\n`\n\nexport const StyledClearIcon = styled.div<{ disabled?: boolean }>`\n  ${iconContainerStyles}\n  pointer-events: ${(p) => (p.disabled ? 'none' : 'auto')};\n  right: 0;\n`\n\nexport const StyledTypeahead = styled.div`\n  position: relative;\n  width: 100%;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,WAAW,GAAG,EAAE;AAEtB,OAAO,IAAMC,WAAW,gBAAGN,MAAM,CAACO,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDACnCR,oBAAoB,CAAC,CAAC,EAERE,OAAO,CAACO,GAAG,EACV,UAACC,CAAC;EAAA,OAAMA,CAAC,CAACC,SAAS,GAAGT,OAAO,CAACO,GAAG,GAAGP,OAAO,CAACU,EAAE;AAAA,CAAC,CACjE;AAED,IAAMC,mBAAmB,gBAAGd,GAAG,4HAEpB,UAACW,CAAC;EAAA,OAAMA,CAAC,CAACI,QAAQ,GAAGb,MAAM,CAACc,MAAM,GAAGd,MAAM,CAACe,MAAM;AAAA,CAAC,EAElDb,WAAW,EAIZA,WAAW,CACrB;AAED,OAAO,IAAMc,gBAAgB,gBAAGnB,MAAM,CAACoB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yCACtCK,mBAAmB,CAGtB;AAED,OAAO,IAAMM,eAAe,gBAAGrB,MAAM,CAACoB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0CACrCK,mBAAmB,EACH,UAACH,CAAC;EAAA,OAAMA,CAAC,CAACI,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CAExD;AAED,OAAO,IAAMM,eAAe,gBAAGtB,MAAM,CAACoB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAGxC"}