@procore/core-react 12.50.1 → 12.52.0

package/dist/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","names":["styled","css","Card","StyledItem","getTypographyIntent","colors","spacing","hiddenTab","visible","borderRadius","xs","StyledTabBase","div","withConfig","displayName","componentId","StyledTabInnerBase","StyledDropdownTabBase","getTabStyle","xl","_ref","$selected","gray15","_ref2","$dark","gray90","blue40","StyledTab","StyledTabInner","_ref3","_ref4","white","gray70","StyledDropdownTab","StyledDropdownTabInner","StyledLink","span","getHelixHeaderTabStyles","sm","blue70","_ref5","gray30","StyledGlobalNavigationTab","StyledGlobalNavigationDropdownTab","StyledGlobalNavigationDropdownTabInner","StyledGlobalNavigationLink","StyledOverlay","blue50","StyledTabList","StyledTabs","_ref6","_ref7","$index","_ref8","_ref8$$index","StyledMoreLi","li","_ref9","$helix","getStyledComponents","helixHeader","arguments","length","undefined","Tab","TabInner","Link","DropdownTab","DropdownTabInner","MoreLi"],"sources":["../../src/Tabs/Tabs.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledItem } from '../MenuImperative/MenuImperative.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\ntype TabStyleProps = {\n  $selected?: boolean\n  $dark?: boolean\n}\n\nconst hiddenTab = css`\n  pointer-events: none;\n  position: absolute;\n  visibility: hidden;\n`\n\nconst visible = css`\n  pointer-events: all;\n  position: relative;\n  visibility: visible;\n`\n\nconst borderRadius = css`\n  border-radius: ${spacing.xs}px ${spacing.xs}px 0 0;\n`\n\n//// START BASE LAYOUT COMPONENTS FOR TABS ////\n\n/**\n * Elements to handle general layout and browser resets.\n * Will be the referencable element (class) other selectors\n * that need to target general layout references.\n */\nconst StyledTabBase = styled.div<TabStyleProps>`\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n\n  // Browser button and anchor style resets\n  text-decoration: none;\n  background-color: transparent;\n  border: none;\n  font-family: inherit;\n  padding: 0;\n`\n\nconst StyledTabInnerBase = styled.div<TabStyleProps>`\n  align-self: baseline;\n  box-sizing: border-box;\n\n  &,\n  > a {\n    display: flex;\n    text-decoration: none;\n    width: 100%;\n  }\n`\n\n// This so that it can be visible/hidden via CSS down below\nconst StyledDropdownTabBase = styled(StyledTabBase)`\n  ${hiddenTab}\n`\n\n//// END BASE LAYOUT COMPONENTS FOR TABS ////\n\n//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n/**\n * Styles specific to the Design System general cases (not Global nav)\n */\nfunction getTabStyle() {\n  return css<TabStyleProps>`\n    ${borderRadius};\n    height: 26px;\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.xl}px;\n    }\n\n    a& {\n      ${borderRadius}\n    }\n\n    &,\n    a&,\n    button& {\n      ${({ $selected }) => {\n        if ($selected) {\n          return css`\n            border-bottom: 3px solid ${colors.gray15};\n          `\n        }\n      }}\n    }\n\n    &:focus-visible,\n    &:hover {\n      background: ${({ $dark }) => ($dark ? 'transparent' : colors.gray90)};\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px ${colors.blue40};\n      outline: none;\n\n      a {\n        outline: none;\n      }\n    }\n  `\n}\n\nconst StyledTab = styled(StyledTabBase)<TabStyleProps>`\n  ${getTabStyle}\n`\n\nconst StyledTabInner = styled(StyledTabInnerBase)<TabStyleProps>`\n  ${getTypographyIntent('body')}\n\n  padding: 0 ${spacing.xs}px;\n  font-weight: ${({ $selected }) => ($selected ? 600 : 400)};\n\n  &,\n  > a {\n    ${borderRadius};\n    color: ${colors.gray15};\n    height: 23px;\n  }\n\n  & a:focus-visible {\n    outline: 2px solid ${colors.blue40};\n    outline-offset: -1px;\n    border-radius: ${spacing.xs}px;\n  }\n\n  /* TODO: Dark mode was not considered for helix updates,\n  *  matching previous UX patterns - April 2nd 2024\n  */\n  ${({ $selected, $dark }) => {\n    if ($dark) {\n      return css`\n        &,\n        > a,\n        button&,\n        a& {\n          color: ${$selected ? colors.white : colors.gray70};\n\n          &:hover {\n            color: white;\n          }\n        }\n      `\n    }\n  }}\n`\n\nconst StyledDropdownTab = styled(StyledDropdownTabBase)`\n  ${getTabStyle}\n`\n\nconst StyledDropdownTabInner = styled(StyledTabInner)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledLink = styled.span`\n  align-items: center;\n  display: flex;\n  height: 23px; // TODO one-off\n  ${borderRadius};\n  box-sizing: border-box;\n`\n\n//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n//// START HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nfunction getHelixHeaderTabStyles() {\n  return css<TabStyleProps>`\n    border-radius: 4px;\n    color: ${colors.white};\n    height: 24px;\n    overflow: hidden;\n    padding: ${spacing.xs}px;\n    text-align: center;\n\n    ${getTypographyIntent('small')};\n    font-weight: 600; // Different than typograhy intent small, must be defined after\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.sm}px;\n    }\n\n    a {\n      color: ${colors.white};\n    }\n\n    &:hover {\n      background: rgba(117, 131, 138, 0.3);\n      color: ${colors.white};\n      text-decoration: none;\n    }\n\n    &:focus-visible,\n    &:has(a:focus) {\n      outline: 2px solid ${colors.blue70};\n      outline-offset: -2px;\n      background: rgba(117, 131, 138, 0.3);\n      a {\n        outline: none;\n      }\n    }\n\n    ${({ $selected }) => {\n      if ($selected) {\n        return css`\n          background: ${colors.gray30};\n        `\n      }\n    }}\n  `\n}\n\nconst StyledGlobalNavigationTab = styled(StyledTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTab = styled(StyledDropdownTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTabInner = styled(StyledTabInnerBase)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledGlobalNavigationLink = styled.span`\n  padding-left: 6px;\n  padding-right: 6px;\n`\n\n//// END HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nexport const StyledOverlay = styled(Card)`\n  max-height: 40vh;\n\n  ${StyledItem} {\n    padding: 0;\n    display: flex;\n    justify-content: center;\n\n    a {\n      color: unset;\n      margin: unset;\n      padding: unset;\n      &:focus-visible {\n        outline-offset: 1px;\n      }\n    }\n  }\n\n  ${StyledLink} {\n    padding: 0;\n    display: flex;\n  }\n\n  ${StyledTabInnerBase} {\n    // unsure why top and bottom are not uniform\n    // design docs show uniform 4px\n    padding: 2px 16px 4px 16px;\n  }\n\n  ${StyledLink},\n  ${StyledTabBase} {\n    color: ${colors.gray15};\n    border-radius: 0;\n    display: flex;\n    width: 100%;\n\n    background: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n    padding: 0;\n  }\n\n  [data-selected='true'] {\n    ${StyledLink}, ${StyledTabBase} {\n      border-bottom-color: transparent;\n      color: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledTabList = styled.div`\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n`\n\nexport const StyledTabs = styled.div<{\n  $dark?: boolean\n  $index?: number\n}>`\n  background-color: ${({ $dark }) => $dark && colors.gray15};\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n\n  ${StyledTabBase} {\n    // we want to hide all tabs after overflow index\n    &:nth-child(1n + ${({ $index }) => $index}) {\n      // but not the \"More\" dropdown tab\n      &:not(${StyledDropdownTabBase}) {\n        ${hiddenTab}\n      }\n    }\n  }\n\n  ${({ $index = -1 }) =>\n    $index >= 0 &&\n    css`\n      ${StyledDropdownTabBase} {\n        ${visible}\n      }\n    `}\n`\n\nconst StyledMoreLi = styled.li<{ $helix?: boolean }>`\n  ${({ $helix }) =>\n    $helix\n      ? css`\n          margin-left: ${spacing.sm}px;\n        `\n      : css`\n          margin-left: ${spacing.xl}px;\n        `}\n`\n\n/**\n * Switches between different Tab styles of traditional and helix header navigation.\n * Allows separate style CSS without conditionals across all the components.\n * @returns Subcomponents to render\n */\nexport function getStyledComponents(helixHeader = false) {\n  if (helixHeader) {\n    return {\n      Tab: StyledGlobalNavigationTab,\n      TabInner: StyledTabInnerBase,\n      Link: StyledGlobalNavigationLink,\n      DropdownTab: StyledGlobalNavigationDropdownTab,\n      DropdownTabInner: StyledGlobalNavigationDropdownTabInner,\n      MoreLi: StyledMoreLi,\n    }\n  }\n  return {\n    Tab: StyledTab,\n    TabInner: StyledTabInner,\n    Link: StyledLink,\n    DropdownTab: StyledDropdownTab,\n    DropdownTabInner: StyledDropdownTabInner,\n    MoreLi: StyledMoreLi,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.styles.js","names":["styled","css","Card","StyledItem","getTypographyIntent","colors","spacing","hiddenTab","visible","borderRadius","xs","StyledTabBase","div","withConfig","displayName","componentId","StyledTabInnerBase","StyledDropdownTabBase","getTabStyle","xl","_ref","$selected","gray15","_ref2","$dark","gray90","blue40","StyledTab","StyledTabInner","_ref3","_ref4","white","gray70","StyledDropdownTab","StyledDropdownTabInner","StyledLink","span","getHelixHeaderTabStyles","sm","blue70","_ref5","gray30","StyledGlobalNavigationTab","StyledGlobalNavigationDropdownTab","StyledGlobalNavigationDropdownTabInner","StyledGlobalNavigationLink","StyledOverlay","blue50","StyledTabList","StyledTabs","_ref6","_ref7","$helix","_ref8","$index","_ref9","_ref9$$index","StyledMoreLi","li","_ref0","getStyledComponents","helixHeader","arguments","length","undefined","Tab","TabInner","Link","DropdownTab","DropdownTabInner","MoreLi"],"sources":["../../src/Tabs/Tabs.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledItem } from '../MenuImperative/MenuImperative.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\ntype TabStyleProps = {\n  $selected?: boolean\n  $dark?: boolean\n}\n\nconst hiddenTab = css`\n  pointer-events: none;\n  position: absolute;\n  visibility: hidden;\n`\n\nconst visible = css`\n  pointer-events: all;\n  position: relative;\n  visibility: visible;\n`\n\nconst borderRadius = css`\n  border-radius: ${spacing.xs}px ${spacing.xs}px 0 0;\n`\n\n//// START BASE LAYOUT COMPONENTS FOR TABS ////\n\n/**\n * Elements to handle general layout and browser resets.\n * Will be the referencable element (class) other selectors\n * that need to target general layout references.\n */\nconst StyledTabBase = styled.div<TabStyleProps>`\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n\n  // Browser button and anchor style resets\n  text-decoration: none;\n  background-color: transparent;\n  border: none;\n  font-family: inherit;\n  padding: 0;\n`\n\nconst StyledTabInnerBase = styled.div<TabStyleProps>`\n  align-self: baseline;\n  box-sizing: border-box;\n\n  &,\n  > a {\n    display: flex;\n    text-decoration: none;\n    width: 100%;\n  }\n`\n\n// This so that it can be visible/hidden via CSS down below\nconst StyledDropdownTabBase = styled(StyledTabBase)`\n  ${hiddenTab}\n`\n\n//// END BASE LAYOUT COMPONENTS FOR TABS ////\n\n//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n/**\n * Styles specific to the Design System general cases (not Global nav)\n */\nfunction getTabStyle() {\n  return css<TabStyleProps>`\n    ${borderRadius};\n    height: 26px;\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.xl}px;\n    }\n\n    a& {\n      ${borderRadius}\n    }\n\n    &,\n    a&,\n    button& {\n      ${({ $selected }) => {\n        if ($selected) {\n          return css`\n            border-bottom: 3px solid ${colors.gray15};\n          `\n        }\n      }}\n    }\n\n    &:focus-visible,\n    &:hover {\n      background: ${({ $dark }) => ($dark ? 'transparent' : colors.gray90)};\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px ${colors.blue40};\n      outline: none;\n\n      a {\n        outline: none;\n      }\n    }\n  `\n}\n\nconst StyledTab = styled(StyledTabBase)<TabStyleProps>`\n  ${getTabStyle}\n`\n\nconst StyledTabInner = styled(StyledTabInnerBase)<TabStyleProps>`\n  ${getTypographyIntent('body')}\n\n  padding: 0 ${spacing.xs}px;\n  font-weight: ${({ $selected }) => ($selected ? 600 : 400)};\n\n  &,\n  > a {\n    ${borderRadius};\n    color: ${colors.gray15};\n    height: 23px;\n  }\n\n  & a:focus-visible {\n    outline: 2px solid ${colors.blue40};\n    outline-offset: -1px;\n    border-radius: ${spacing.xs}px;\n  }\n\n  /* TODO: Dark mode was not considered for helix updates,\n  *  matching previous UX patterns - April 2nd 2024\n  */\n  ${({ $selected, $dark }) => {\n    if ($dark) {\n      return css`\n        &,\n        > a,\n        button&,\n        a& {\n          color: ${$selected ? colors.white : colors.gray70};\n\n          &:hover {\n            color: white;\n          }\n        }\n      `\n    }\n  }}\n`\n\nconst StyledDropdownTab = styled(StyledDropdownTabBase)`\n  ${getTabStyle}\n`\n\nconst StyledDropdownTabInner = styled(StyledTabInner)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledLink = styled.span`\n  align-items: center;\n  display: flex;\n  height: 23px; // TODO one-off\n  ${borderRadius};\n  box-sizing: border-box;\n`\n\n//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////\n\n//// START HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nfunction getHelixHeaderTabStyles() {\n  return css<TabStyleProps>`\n    border-radius: 4px;\n    color: ${colors.white};\n    height: 24px;\n    overflow: hidden;\n    padding: ${spacing.xs}px;\n    text-align: center;\n\n    ${getTypographyIntent('small')};\n    font-weight: 600; // Different than typograhy intent small, must be defined after\n\n    & + ${StyledTabBase} {\n      margin-left: ${spacing.sm}px;\n    }\n\n    a {\n      color: ${colors.white};\n    }\n\n    &:hover {\n      background: rgba(117, 131, 138, 0.3);\n      color: ${colors.white};\n      text-decoration: none;\n    }\n\n    &:focus-visible,\n    &:has(a:focus) {\n      outline: 2px solid ${colors.blue70};\n      background: rgba(117, 131, 138, 0.3);\n      a {\n        outline: none;\n      }\n    }\n\n    ${({ $selected }) => {\n      if ($selected) {\n        return css`\n          background: ${colors.gray30};\n          border: 1px solid ${colors.white};\n        `\n      }\n    }}\n  `\n}\n\nconst StyledGlobalNavigationTab = styled(StyledTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTab = styled(StyledDropdownTabBase)`\n  ${getHelixHeaderTabStyles}\n`\n\nconst StyledGlobalNavigationDropdownTabInner = styled(StyledTabInnerBase)`\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n`\n\nconst StyledGlobalNavigationLink = styled.span`\n  padding-left: 6px;\n  padding-right: 6px;\n`\n\n//// END HELIX GLOBAL NAVIGATION TAB STYLES ////\n\nexport const StyledOverlay = styled(Card)`\n  max-height: 40vh;\n\n  ${StyledItem} {\n    padding: 0;\n    display: flex;\n    justify-content: center;\n\n    a {\n      color: unset;\n      margin: unset;\n      padding: unset;\n      &:focus-visible {\n        outline-offset: 1px;\n      }\n    }\n  }\n\n  ${StyledLink} {\n    padding: 0;\n    display: flex;\n  }\n\n  ${StyledTabInnerBase} {\n    // unsure why top and bottom are not uniform\n    // design docs show uniform 4px\n    padding: 2px 16px 4px 16px;\n  }\n\n  ${StyledLink},\n  ${StyledTabBase} {\n    color: ${colors.gray15};\n    border-radius: 0;\n    display: flex;\n    width: 100%;\n\n    background: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n    padding: 0;\n  }\n\n  [data-selected='true'] {\n    ${StyledLink}, ${StyledTabBase} {\n      border-bottom-color: transparent;\n      color: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledTabList = styled.div`\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n`\n\nexport const StyledTabs = styled.div<{\n  $dark?: boolean\n  $index?: number\n  $helix?: boolean\n}>`\n  background-color: ${({ $dark }) => $dark && colors.gray15};\n  display: flex;\n  overflow: ${({ $helix }) => ($helix ? 'visible' : 'hidden')};\n  width: 100%;\n\n  ${StyledTabBase} {\n    // we want to hide all tabs after overflow index\n    &:nth-child(1n + ${({ $index }) => $index}) {\n      // but not the \"More\" dropdown tab\n      &:not(${StyledDropdownTabBase}) {\n        ${hiddenTab}\n      }\n    }\n  }\n\n  ${({ $index = -1 }) =>\n    $index >= 0 &&\n    css`\n      ${StyledDropdownTabBase} {\n        ${visible}\n      }\n    `}\n`\n\nconst StyledMoreLi = styled.li<{ $helix?: boolean }>`\n  ${({ $helix }) =>\n    $helix\n      ? css`\n          margin-left: ${spacing.sm}px;\n        `\n      : css`\n          margin-left: ${spacing.xl}px;\n        `}\n`\n\n/**\n * Switches between different Tab styles of traditional and helix header navigation.\n * Allows separate style CSS without conditionals across all the components.\n * @returns Subcomponents to render\n */\nexport function getStyledComponents(helixHeader = false) {\n  if (helixHeader) {\n    return {\n      Tab: StyledGlobalNavigationTab,\n      TabInner: StyledTabInnerBase,\n      Link: StyledGlobalNavigationLink,\n      DropdownTab: StyledGlobalNavigationDropdownTab,\n      DropdownTabInner: StyledGlobalNavigationDropdownTabInner,\n      MoreLi: StyledMoreLi,\n    }\n  }\n  return {\n    Tab: StyledTab,\n    TabInner: StyledTabInner,\n    Link: StyledLink,\n    DropdownTab: StyledDropdownTab,\n    DropdownTabInner: StyledDropdownTabInner,\n    MoreLi: StyledMoreLi,\n  }\n}\n"],"mappings":"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"}

package/dist/Tearsheet/Tearsheet.styles.js

@@ -46,7 +46,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
 };
 export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetContent",
-  componentId: "core-12_50_1__sc-ljrxoq-0"
+  componentId: "core-12_52_0__sc-ljrxoq-0"
 })(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
   var $open = _ref.$open,
     $placement = _ref.$placement;
@@ -66,7 +66,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
 export var minScrimSize = spacing.xxl * 3;
 export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetBody",
-  componentId: "core-12_50_1__sc-ljrxoq-1"
+  componentId: "core-12_52_0__sc-ljrxoq-1"
 })(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", ""], colors.white, getGapOutlineFocus('inside'), function (_ref5) {
   var $block = _ref5.$block,
     $placement = _ref5.$placement,
@@ -78,7 +78,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
 var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
 export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledScrimContainer",
-  componentId: "core-12_50_1__sc-ljrxoq-2"
+  componentId: "core-12_52_0__sc-ljrxoq-2"
 })(["", ""], function (_ref6) {
   var $placement = _ref6.$placement;
   var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
@@ -86,7 +86,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledButtonContainer",
-  componentId: "core-12_50_1__sc-ljrxoq-3"
+  componentId: "core-12_52_0__sc-ljrxoq-3"
 })(["", ""], function (_ref7) {
   var $placement = _ref7.$placement;
   switch ($placement) {
@@ -101,7 +101,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledButtonCard",
-  componentId: "core-12_50_1__sc-ljrxoq-4"
+  componentId: "core-12_52_0__sc-ljrxoq-4"
 })(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref8) {
   var $open = _ref8.$open;
   return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);

package/dist/TextArea/TextArea.styles.js

@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
 import { spacing } from '../_styles/spacing';
 export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   displayName: "StyledTextArea",
-  componentId: "core-12_50_1__sc-u5mow1-0"
+  componentId: "core-12_52_0__sc-u5mow1-0"
 })(["", ";height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
   var _ref$$resize = _ref.$resize,
     $resize = _ref$$resize === void 0 ? 'both' : _ref$$resize;

package/dist/TextEditorOutput/TextEditorOutput.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export var StyledEditor = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledEditor",
-  componentId: "core-12_50_1__sc-1lje1b0-0"
+  componentId: "core-12_52_0__sc-1lje1b0-0"
 })(["> .tox-tinymce{border:none;}"]);
 //# sourceMappingURL=TextEditorOutput.styles.js.map

package/dist/Thumbnail/Thumbnail.js

@@ -22,9 +22,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { mergeProps } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tooltip } from '../Tooltip';
 import { useI18nContext } from '../_hooks/I18n';
+import { useOverflowObserver } from '../_hooks/OverflowObserver';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { useThumbnail } from './Thumbnail.hooks';
@@ -66,20 +67,36 @@ function TickIcon(_ref) {
 }
 function FigCaption(_ref2) {
   var label = _ref2.label,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    onLabelOverflowChange = _ref2.onLabelOverflowChange;
+  var _useOverflowObserver = useOverflowObserver(),
+    ref = _useOverflowObserver.ref,
+    isOverflowing = _useOverflowObserver.isOverflowing;
+  useEffect(function () {
+    onLabelOverflowChange === null || onLabelOverflowChange === void 0 ? void 0 : onLabelOverflowChange(isOverflowing);
+  }, [isOverflowing, onLabelOverflowChange]);
   if (!label) {
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledThumbnailFigCaption, {
+    ref: ref,
     $color: disabled ? 'gray70' : 'gray15'
   }, label);
 }
 function Label(_ref3) {
-  var label = _ref3.label;
+  var label = _ref3.label,
+    onLabelOverflowChange = _ref3.onLabelOverflowChange;
+  var _useOverflowObserver2 = useOverflowObserver(),
+    ref = _useOverflowObserver2.ref,
+    isOverflowing = _useOverflowObserver2.isOverflowing;
+  useEffect(function () {
+    onLabelOverflowChange === null || onLabelOverflowChange === void 0 ? void 0 : onLabelOverflowChange(isOverflowing);
+  }, [isOverflowing, onLabelOverflowChange]);
   if (!label) {
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(StyledLabelText, {
+    ref: ref,
     intent: "small",
     weight: "bold"
   }, label));
@@ -87,11 +104,14 @@ function Label(_ref3) {
 function ThumbnailCaptionTooltip(_ref4) {
   var caption = _ref4.caption,
     captionOverflowing = _ref4.captionOverflowing,
+    label = _ref4.label,
+    labelOverflowing = _ref4.labelOverflowing,
     children = _ref4.children;
+  var shouldShow = captionOverflowing && !!caption || labelOverflowing && !!label;
   return /*#__PURE__*/React.createElement(Tooltip, {
-    overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, caption),
+    overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, label && /*#__PURE__*/React.createElement("div", null, label), caption),
     placement: "bottom",
-    trigger: captionOverflowing && caption ? ['hover', 'focus'] : 'none'
+    trigger: shouldShow ? ['hover', 'focus'] : 'none'
   }, children);
 }
 var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(props, ref) {
@@ -102,6 +122,10 @@ var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(pro
     _useState2 = _slicedToArray(_useState, 2),
     captionOverflowing = _useState2[0],
     setCaptionOverflowing = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    labelOverflowing = _useState4[0],
+    setLabelOverflowing = _useState4[1];
   var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
     caption = props.caption,
     label = props.label,
@@ -110,7 +134,9 @@ var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(pro
   var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
     ref: ref,
     $layout: thumbnail.layout,
@@ -132,7 +158,8 @@ var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(pro
     variant: props.variant || getThumbnailVariantForFilename((_props$filename = props.filename) !== null && _props$filename !== void 0 ? _props$filename : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     error: thumbnail.error,
     qa: (_thumbnail$qa = thumbnail.qa) === null || _thumbnail$qa === void 0 ? void 0 : _thumbnail$qa.caption,
@@ -149,10 +176,14 @@ var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(pro
 var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder(props, ref) {
   var _props$filename2, _thumbnail$qa2;
   var thumbnail = useThumbnail(props);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    captionOverflowing = _useState4[0],
-    setCaptionOverflowing = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    captionOverflowing = _useState6[0],
+    setCaptionOverflowing = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    labelOverflowing = _useState8[0],
+    setLabelOverflowing = _useState8[1];
   var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
     caption = props.caption,
     label = props.label,
@@ -163,7 +194,9 @@ var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder
   var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
     ref: ref,
     $layout: thumbnail.layout,
@@ -186,7 +219,8 @@ var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder
     variant: props.variant || getThumbnailVariantForFilename((_props$filename2 = props.filename) !== null && _props$filename2 !== void 0 ? _props$filename2 : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     error: thumbnail.error,
     qa: (_thumbnail$qa2 = thumbnail.qa) === null || _thumbnail$qa2 === void 0 ? void 0 : _thumbnail$qa2.caption,
@@ -222,10 +256,14 @@ var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceho
     defaultSelected: props_.defaultChecked
   });
   var thumbnail = useThumbnail(props);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    captionOverflowing = _useState6[0],
-    setCaptionOverflowing = _useState6[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    captionOverflowing = _useState0[0],
+    setCaptionOverflowing = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    labelOverflowing = _useState10[0],
+    setLabelOverflowing = _useState10[1];
   var caption = props_.caption,
     hasCaptionPlaceholder = props_.hasCaptionPlaceholder,
     src = props_.src,
@@ -245,7 +283,9 @@ var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceho
   }, [props.focused, thumbnail.inputRef]);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
     $layout: thumbnail.layout,
     $size: thumbnail.size
@@ -271,7 +311,8 @@ var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceho
     variant: props.variant || getThumbnailVariantForFilename((_props$filename3 = props.filename) !== null && _props$filename3 !== void 0 ? _props$filename3 : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     ariaHidden: true,
     error: thumbnail.error,
@@ -317,10 +358,14 @@ var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props,
   var _thumbnail$filename, _thumbnail$qa4;
   var i18n = useI18nContext();
   var thumbnail = useThumbnail(props);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    captionOverflowing = _useState8[0],
-    setCaptionOverflowing = _useState8[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    captionOverflowing = _useState12[0],
+    setCaptionOverflowing = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    labelOverflowing = _useState14[0],
+    setLabelOverflowing = _useState14[1];
   var hasCaptionPlaceholder = props.hasCaptionPlaceholder,
     _disabled = props.disabled,
     _role = props.role,
@@ -328,7 +373,9 @@ var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props,
   var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
     ref: ref,
     $layout: thumbnail.layout,
@@ -356,7 +403,8 @@ var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props,
     variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename = thumbnail.filename) !== null && _thumbnail$filename !== void 0 ? _thumbnail$filename : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     qa: (_thumbnail$qa4 = thumbnail.qa) === null || _thumbnail$qa4 === void 0 ? void 0 : _thumbnail$qa4.caption,
     multiline: thumbnail.size === 'lg',
@@ -374,14 +422,20 @@ var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(pro
   var _thumbnail$filename2, _thumbnail$qa5;
   var i18n = useI18nContext();
   var thumbnail = useThumbnail(props);
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    captionOverflowing = _useState0[0],
-    setCaptionOverflowing = _useState0[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    captionOverflowing = _useState16[0],
+    setCaptionOverflowing = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    labelOverflowing = _useState18[0],
+    setLabelOverflowing = _useState18[1];
   var ariaLabel = getThumbnailAriaLabel(i18n, thumbnail.label, thumbnail.caption);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, {
     $layout: thumbnail.layout,
     $size: thumbnail.size,
@@ -410,7 +464,8 @@ var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(pro
     variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename2 = thumbnail.filename) !== null && _thumbnail$filename2 !== void 0 ? _thumbnail$filename2 : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     qa: (_thumbnail$qa5 = thumbnail.qa) === null || _thumbnail$qa5 === void 0 ? void 0 : _thumbnail$qa5.caption,
     multiline: thumbnail.size === 'lg',
@@ -447,10 +502,14 @@ var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail
     defaultSelected: props_.defaultChecked
   });
   var thumbnail = useThumbnail(props);
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    captionOverflowing = _useState10[0],
-    setCaptionOverflowing = _useState10[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    captionOverflowing = _useState20[0],
+    setCaptionOverflowing = _useState20[1];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    labelOverflowing = _useState22[0],
+    setLabelOverflowing = _useState22[1];
   var caption = props_.caption,
     hasCaptionPlaceholder = props_.hasCaptionPlaceholder,
     src = props_.src,
@@ -469,7 +528,9 @@ var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail
   }, [props.focused, thumbnail.inputRef]);
   return /*#__PURE__*/React.createElement(ThumbnailCaptionTooltip, {
     caption: thumbnail.caption,
-    captionOverflowing: captionOverflowing
+    captionOverflowing: captionOverflowing,
+    label: thumbnail.label,
+    labelOverflowing: labelOverflowing
   }, /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
     $layout: thumbnail.layout,
     $size: thumbnail.size
@@ -501,7 +562,8 @@ var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail
     variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename3 = thumbnail.filename) !== null && _thumbnail$filename3 !== void 0 ? _thumbnail$filename3 : '')
   }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
     label: thumbnail.label,
-    disabled: thumbnail.disabled
+    disabled: thumbnail.disabled,
+    onLabelOverflowChange: setLabelOverflowing
   }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
     ariaHidden: true,
     qa: (_thumbnail$qa6 = thumbnail.qa) === null || _thumbnail$qa6 === void 0 ? void 0 : _thumbnail$qa6.caption,