@procore/core-react 12.25.1 → 12.25.2

package/dist/Tearsheet/Tearsheet.styles.js

@@ -2,6 +2,7 @@ import styled, { css, keyframes } from 'styled-components';
 import { Card } from '../Card';
 import { StyledPageContainer } from '../PageLayout/PageLayout.styles';
 import { colors } from '../_styles/colors';
+import { getFocus } from '../_styles/mixins';
 import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 import { isIE11 } from '../_utils/isIE11';
@@ -47,7 +48,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
 };
 export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetContent",
-  componentId: "core-12_25_1__sc-ljrxoq-0"
+  componentId: "core-12_25_2__sc-ljrxoq-0"
 })(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
   var $open = _ref.$open,
     $placement = _ref.$placement;
@@ -67,8 +68,8 @@ 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_25_1__sc-ljrxoq-1"
-})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";", " ", "}"], colors.white, function (_ref5) {
+  componentId: "core-12_25_2__sc-ljrxoq-1"
+})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", " ", "}"], colors.white, getFocus(), function (_ref5) {
   var $block = _ref5.$block,
     $placement = _ref5.$placement,
     $stretch = _ref5.$stretch;
@@ -88,7 +89,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_25_1__sc-ljrxoq-2"
+  componentId: "core-12_25_2__sc-ljrxoq-2"
 })(["", ""], function (_ref7) {
   var $placement = _ref7.$placement;
   var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
@@ -96,7 +97,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledButtonContainer",
-  componentId: "core-12_25_1__sc-ljrxoq-3"
+  componentId: "core-12_25_2__sc-ljrxoq-3"
 })(["", ""], function (_ref8) {
   var $placement = _ref8.$placement;
   switch ($placement) {
@@ -111,7 +112,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledButtonCard",
-  componentId: "core-12_25_1__sc-ljrxoq-4"
+  componentId: "core-12_25_2__sc-ljrxoq-4"
 })(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref9) {
   var $open = _ref9.$open;
   return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);

package/dist/Tearsheet/Tearsheet.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tearsheet.styles.js","names":["styled","css","keyframes","Card","StyledPageContainer","colors","getShadow","spacing","isIE11","animationSpeed","disabled","tearsheet","scrim","closeButton","slideDistance","positioningProps","right","open","closed","concat","placement","shadow","top","bottom","left","getSlideInAnimation","$placement","getSlideOutAnimation","StyledTearsheetContent","div","withConfig","displayName","componentId","_ref","$open","_ref2","_ref3","$opening","_ref4","$closing","minScrimSize","xxl","StyledTearsheetBody","white","_ref5","$block","$stretch","size","includes","_ref6","zoomIn","zoomOut","StyledScrimContainer","_ref7","minSizeProp","StyledButtonContainer","_ref8","StyledButtonCard","xl","_ref9","_ref0","_ref1"],"sources":["../../src/Tearsheet/Tearsheet.styles.ts"],"sourcesContent":["import type { RuleSet } from 'styled-components'\nimport styled, { css, keyframes } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledPageContainer } from '../PageLayout/PageLayout.styles'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport type { Placement } from './Tearsheet.types'\n\nexport const animationSpeed = {\n  disabled: 0,\n  tearsheet: 800,\n  scrim: 300,\n  closeButton: 150,\n}\n\nconst slideDistance = '100%'\n\nconst positioningProps: Record<\n  Placement,\n  Record<'open' | 'closed' | 'placement' | 'shadow', string | RuleSet<object>>\n> = {\n  right: {\n    open: `translateX(0);`,\n    closed: `translateX(${slideDistance});`,\n    placement: css`\n      flex-direction: row;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'left'),\n  },\n  // @ts-ignore\n  top: {\n    open: `translateY(0);`,\n    closed: `translateY(-${slideDistance});`,\n    placement: css`\n      flex-direction: column-reverse;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'bottom'),\n  },\n  bottom: {\n    open: `translateY(0);`,\n    closed: `translateY(${slideDistance});`,\n    placement: css`\n      flex-direction: column;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'top'),\n  },\n  left: {\n    open: `translateX(0);`,\n    closed: `translateX(-${slideDistance});`,\n    placement: css`\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'right'),\n  },\n}\n\nconst getSlideInAnimation = ($placement: Placement) => keyframes`\n  from {\n    transform: ${positioningProps[$placement].closed};\n  }\n  to {\n    transform: ${positioningProps[$placement].open};\n  }\n`\n\nconst getSlideOutAnimation = ($placement: Placement) => keyframes`\n  from {\n    transform: ${positioningProps[$placement].open};\n  }\n  to {\n    transform: ${positioningProps[$placement].closed};\n  }\n`\n\nexport const StyledTearsheetContent = styled.div<{\n  $placement: Placement\n  $open: boolean\n  $opening?: boolean\n  $closing?: boolean\n}>`\n  display: flex;\n  z-index: 2;\n  width: 100%;\n\n  ${({ $open, $placement }) =>\n    $open\n      ? css`\n          transform: ${positioningProps[$placement].open};\n        `\n      : css`\n          transform: ${positioningProps[$placement].closed};\n        `}\n\n  ${({ $placement }) => positioningProps[$placement].placement}\n\n  ${({ $opening, $placement }) =>\n    $opening &&\n    css`\n      animation: ${getSlideInAnimation($placement)}\n        ${animationSpeed.tearsheet}ms ease-out;\n      transform: ${positioningProps[$placement].open};\n      pointer-events: none;\n    `}\n\n  ${({ $closing, $placement }) =>\n    $closing &&\n    css`\n      animation: ${getSlideOutAnimation($placement)}\n        ${animationSpeed.tearsheet}ms ease-out;\n      transform: ${positioningProps[$placement].closed};\n      pointer-events: none;\n    `}\n`\n\nexport const minScrimSize = spacing.xxl * 3\n\nexport const StyledTearsheetBody = styled.div<{\n  $block: boolean\n  $placement: Placement\n  $stretch: boolean\n}>`\n  display: flex;\n  overflow-y: auto;\n  flex-direction: column;\n  background-color: ${colors.white};\n\n  ${({ $block, $placement, $stretch }) => {\n    const size = ['top', 'bottom'].includes($placement) ? '100vh' : '100vw'\n\n    return (\n      ($stretch || $block) &&\n      css`\n        flex: 0 0 calc(${size} - ${minScrimSize}px);\n      `\n    )\n  }}\n\n  ${({ $placement }) => {\n    if (!isIE11()) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($placement)) {\n      return css`\n        ${StyledPageContainer} {\n          width: 100vw;\n        }\n      `\n    }\n\n    return css`\n      ${StyledPageContainer} {\n        width: 95vw;\n      }\n    `\n  }}}\n`\n\nconst zoomIn = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`\n\nconst zoomOut = keyframes`\n  from {\n    transform: scale(1);\n  }\n  to {\n    transform: scale(0);\n  }\n`\n\nexport const StyledScrimContainer = styled.div<{ $placement: Placement }>`\n  ${({ $placement }) => {\n    const minSizeProp = ['top', 'bottom'].includes($placement)\n      ? 'min-height'\n      : 'min-width'\n\n    return css`\n      ${minSizeProp}: ${minScrimSize}px;\n      flex-grow: 1;\n    `\n  }}\n`\n\nexport const StyledButtonContainer = styled.div<{ $placement: Placement }>`\n  ${({ $placement }) => {\n    switch ($placement) {\n      case 'bottom':\n        return css`\n          display: flex;\n          justify-content: flex-end;\n          flex-direction: column;\n          height: 100%;\n        `\n      case 'right':\n        return css`\n          display: flex;\n          justify-content: flex-end;\n        `\n      case 'left':\n      default:\n        return\n    }\n  }}\n`\n\nexport const StyledButtonCard = styled(Card)<{\n  $open: boolean\n  $opening?: boolean\n  $closing?: boolean\n}>`\n  display: inline-flex;\n  margin: ${spacing.xl}px;\n\n  ${({ $open }) =>\n    $open\n      ? css`\n          transform: scale(1);\n        `\n      : css`\n          transform: scale(0);\n        `}\n\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${zoomIn} ${animationSpeed.closeButton}ms;\n      transform: scale(1);\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${zoomOut} ${animationSpeed.closeButton}ms;\n      transform: scale(0);\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Tearsheet.styles.js","names":["styled","css","keyframes","Card","StyledPageContainer","colors","getFocus","getShadow","spacing","isIE11","animationSpeed","disabled","tearsheet","scrim","closeButton","slideDistance","positioningProps","right","open","closed","concat","placement","shadow","top","bottom","left","getSlideInAnimation","$placement","getSlideOutAnimation","StyledTearsheetContent","div","withConfig","displayName","componentId","_ref","$open","_ref2","_ref3","$opening","_ref4","$closing","minScrimSize","xxl","StyledTearsheetBody","white","_ref5","$block","$stretch","size","includes","_ref6","zoomIn","zoomOut","StyledScrimContainer","_ref7","minSizeProp","StyledButtonContainer","_ref8","StyledButtonCard","xl","_ref9","_ref0","_ref1"],"sources":["../../src/Tearsheet/Tearsheet.styles.ts"],"sourcesContent":["import type { RuleSet } from 'styled-components'\nimport styled, { css, keyframes } from 'styled-components'\nimport { Card } from '../Card'\nimport { StyledPageContainer } from '../PageLayout/PageLayout.styles'\nimport { colors } from '../_styles/colors'\nimport { getFocus } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport type { Placement } from './Tearsheet.types'\n\nexport const animationSpeed = {\n  disabled: 0,\n  tearsheet: 800,\n  scrim: 300,\n  closeButton: 150,\n}\n\nconst slideDistance = '100%'\n\nconst positioningProps: Record<\n  Placement,\n  Record<'open' | 'closed' | 'placement' | 'shadow', string | RuleSet<object>>\n> = {\n  right: {\n    open: `translateX(0);`,\n    closed: `translateX(${slideDistance});`,\n    placement: css`\n      flex-direction: row;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'left'),\n  },\n  // @ts-ignore\n  top: {\n    open: `translateY(0);`,\n    closed: `translateY(-${slideDistance});`,\n    placement: css`\n      flex-direction: column-reverse;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'bottom'),\n  },\n  bottom: {\n    open: `translateY(0);`,\n    closed: `translateY(${slideDistance});`,\n    placement: css`\n      flex-direction: column;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'top'),\n  },\n  left: {\n    open: `translateX(0);`,\n    closed: `translateX(-${slideDistance});`,\n    placement: css`\n      flex-direction: row-reverse;\n      justify-content: flex-end;\n    `,\n    shadow: getShadow(4, 'right'),\n  },\n}\n\nconst getSlideInAnimation = ($placement: Placement) => keyframes`\n  from {\n    transform: ${positioningProps[$placement].closed};\n  }\n  to {\n    transform: ${positioningProps[$placement].open};\n  }\n`\n\nconst getSlideOutAnimation = ($placement: Placement) => keyframes`\n  from {\n    transform: ${positioningProps[$placement].open};\n  }\n  to {\n    transform: ${positioningProps[$placement].closed};\n  }\n`\n\nexport const StyledTearsheetContent = styled.div<{\n  $placement: Placement\n  $open: boolean\n  $opening?: boolean\n  $closing?: boolean\n}>`\n  display: flex;\n  z-index: 2;\n  width: 100%;\n\n  ${({ $open, $placement }) =>\n    $open\n      ? css`\n          transform: ${positioningProps[$placement].open};\n        `\n      : css`\n          transform: ${positioningProps[$placement].closed};\n        `}\n\n  ${({ $placement }) => positioningProps[$placement].placement}\n\n  ${({ $opening, $placement }) =>\n    $opening &&\n    css`\n      animation: ${getSlideInAnimation($placement)}\n        ${animationSpeed.tearsheet}ms ease-out;\n      transform: ${positioningProps[$placement].open};\n      pointer-events: none;\n    `}\n\n  ${({ $closing, $placement }) =>\n    $closing &&\n    css`\n      animation: ${getSlideOutAnimation($placement)}\n        ${animationSpeed.tearsheet}ms ease-out;\n      transform: ${positioningProps[$placement].closed};\n      pointer-events: none;\n    `}\n`\n\nexport const minScrimSize = spacing.xxl * 3\n\nexport const StyledTearsheetBody = styled.div<{\n  $block: boolean\n  $placement: Placement\n  $stretch: boolean\n}>`\n  display: flex;\n  overflow-y: auto;\n  flex-direction: column;\n  background-color: ${colors.white};\n\n  &:focus-visible {\n    ${getFocus()}\n  }\n\n  ${({ $block, $placement, $stretch }) => {\n    const size = ['top', 'bottom'].includes($placement) ? '100vh' : '100vw'\n\n    return (\n      ($stretch || $block) &&\n      css`\n        flex: 0 0 calc(${size} - ${minScrimSize}px);\n      `\n    )\n  }}\n\n  ${({ $placement }) => {\n    if (!isIE11()) {\n      return ''\n    }\n\n    if (['top', 'bottom'].includes($placement)) {\n      return css`\n        ${StyledPageContainer} {\n          width: 100vw;\n        }\n      `\n    }\n\n    return css`\n      ${StyledPageContainer} {\n        width: 95vw;\n      }\n    `\n  }}}\n`\n\nconst zoomIn = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`\n\nconst zoomOut = keyframes`\n  from {\n    transform: scale(1);\n  }\n  to {\n    transform: scale(0);\n  }\n`\n\nexport const StyledScrimContainer = styled.div<{ $placement: Placement }>`\n  ${({ $placement }) => {\n    const minSizeProp = ['top', 'bottom'].includes($placement)\n      ? 'min-height'\n      : 'min-width'\n\n    return css`\n      ${minSizeProp}: ${minScrimSize}px;\n      flex-grow: 1;\n    `\n  }}\n`\n\nexport const StyledButtonContainer = styled.div<{ $placement: Placement }>`\n  ${({ $placement }) => {\n    switch ($placement) {\n      case 'bottom':\n        return css`\n          display: flex;\n          justify-content: flex-end;\n          flex-direction: column;\n          height: 100%;\n        `\n      case 'right':\n        return css`\n          display: flex;\n          justify-content: flex-end;\n        `\n      case 'left':\n      default:\n        return\n    }\n  }}\n`\n\nexport const StyledButtonCard = styled(Card)<{\n  $open: boolean\n  $opening?: boolean\n  $closing?: boolean\n}>`\n  display: inline-flex;\n  margin: ${spacing.xl}px;\n\n  ${({ $open }) =>\n    $open\n      ? css`\n          transform: scale(1);\n        `\n      : css`\n          transform: scale(0);\n        `}\n\n  ${({ $opening }) =>\n    $opening &&\n    css`\n      animation: ${zoomIn} ${animationSpeed.closeButton}ms;\n      transform: scale(1);\n    `}\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${zoomOut} ${animationSpeed.closeButton}ms;\n      transform: scale(0);\n    `}\n`\n"],"mappings":"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"}

package/dist/TextArea/TextArea.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { TextAreaAttributes } from '../_utils/types';
 import type { TextAreaProps } from './TextArea.types';
 /**
 
@@ -15,4 +14,4 @@ import type { TextAreaProps } from './TextArea.types';
  @see [Design Guidelines](https://design.procore.com/text-area)
 
  */
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaAttributes & TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["React","StyledTextArea","TextArea","forwardRef","_ref","ref","_ref$resize","resize","error","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","$resize","$error","$variant","displayName"],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react'\nimport type { TextAreaAttributes } from '../_utils/types'\nimport { StyledTextArea } from './TextArea.styles'\nimport type { TextAreaProps } from './TextArea.types'\n\n/**\n\n Text areas give our users space to input unformatted text. All text areas are\n manually expandable by dragging the bottom right corner to the desired size.\n\n If users need to add formatted text, see Text Editor.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-textarea--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-area)\n\n */\nexport const TextArea = React.forwardRef<\n  HTMLTextAreaElement,\n  TextAreaAttributes & TextAreaProps\n>(function TextArea({ resize = 'both', error, variant, ...props }, ref) {\n  return (\n    <StyledTextArea\n      $resize={resize}\n      $error={error}\n      $variant={variant}\n      {...props}\n      ref={ref}\n    />\n  )\n})\n\nTextArea.displayName = 'TextArea'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,QAAQ,mBAAmB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CAGtC,SAASD,QAAQA,CAAAE,IAAA,EAAgDC,GAAG,EAAE;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAAlDG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAKC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7D,oBACEZ,KAAA,CAAAa,aAAA,CAACZ,cAAc,EAAAa,QAAA;IACbC,OAAO,EAAER,MAAO;IAChBS,MAAM,EAAER,KAAM;IACdS,QAAQ,EAAER;EAAQ,GACdC,KAAK;IACTL,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CAAC,CAAC;AAEFH,QAAQ,CAACgB,WAAW,GAAG,UAAU"}
+{"version":3,"file":"TextArea.js","names":["React","StyledTextArea","TextArea","forwardRef","_ref","ref","_ref$resize","resize","error","variant","props","_objectWithoutProperties","_excluded","createElement","_extends","$resize","$error","$variant","displayName"],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledTextArea } from './TextArea.styles'\nimport type { TextAreaProps } from './TextArea.types'\n\n/**\n\n Text areas give our users space to input unformatted text. All text areas are\n manually expandable by dragging the bottom right corner to the desired size.\n\n If users need to add formatted text, see Text Editor.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-textarea--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-area)\n\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea({ resize = 'both', error, variant, ...props }, ref) {\n    return (\n      <StyledTextArea\n        $resize={resize}\n        $error={error}\n        $variant={variant}\n        {...props}\n        ref={ref}\n      />\n    )\n  }\n)\n\nTextArea.displayName = 'TextArea'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,mBAAmB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CACtC,SAASD,QAAQA,CAAAE,IAAA,EAAgDC,GAAG,EAAE;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAAlDG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,MAAM,GAAAA,WAAA;IAAEE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAKC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC3D,oBACEZ,KAAA,CAAAa,aAAA,CAACZ,cAAc,EAAAa,QAAA;IACbC,OAAO,EAAER,MAAO;IAChBS,MAAM,EAAER,KAAM;IACdS,QAAQ,EAAER;EAAQ,GACdC,KAAK;IACTL,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACgB,WAAW,GAAG,UAAU"}

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_25_1__sc-u5mow1-0"
+  componentId: "core-12_25_2__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/TextArea/TextArea.types.d.ts

@@ -1,5 +1,5 @@
-import type { TextAreaAttributes } from '../_utils/types';
-export interface TextAreaProps extends TextAreaAttributes {
+/// <reference types="react" />
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Controls the error state of the `TextArea`, changing the
      * background color and border colors to red

package/dist/TextArea/TextArea.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.types.js","names":[],"sources":["../../src/TextArea/TextArea.types.ts"],"sourcesContent":["import type { TextAreaAttributes } from '../_utils/types'\n\nexport interface TextAreaProps extends TextAreaAttributes {\n  /**\n   * Controls the error state of the `TextArea`, changing the\n   * background color and border colors to red\n   * @since 10.19.0\n   */\n  error?: boolean\n\n  /**\n   * Controls the resize rules for the `TextArea`\n   * @since 10.19.0\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/resize\n   */\n  resize?: 'both' | 'horizontal' | 'none' | 'vertical'\n\n  /**\n   * @deprecated\n   * The `variant` prop has been deprecated and will be removed in a future version.\n   * Please use the `error` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<TextArea variant=\"error\" />`\n   *\n   * **After**\n   *\n   * `<TextArea error />`\n   *\n   * @deprecatedSince 10.20.0\n   * @since 10.19.0\n   */\n  variant?: 'error' | ''\n}\n"],"mappings":""}
+{"version":3,"file":"TextArea.types.js","names":[],"sources":["../../src/TextArea/TextArea.types.ts"],"sourcesContent":["export interface TextAreaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Controls the error state of the `TextArea`, changing the\n   * background color and border colors to red\n   * @since 10.19.0\n   */\n  error?: boolean\n\n  /**\n   * Controls the resize rules for the `TextArea`\n   * @since 10.19.0\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/resize\n   */\n  resize?: 'both' | 'horizontal' | 'none' | 'vertical'\n\n  /**\n   * @deprecated\n   * The `variant` prop has been deprecated and will be removed in a future version.\n   * Please use the `error` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<TextArea variant=\"error\" />`\n   *\n   * **After**\n   *\n   * `<TextArea error />`\n   *\n   * @deprecatedSince 10.20.0\n   * @since 10.19.0\n   */\n  variant?: 'error' | ''\n}\n"],"mappings":""}

package/dist/TextEditorOutput/TextEditorOutput.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { TextEditorOutputProps } from './TextEditorOutput.types';
 /**
 
@@ -10,4 +9,4 @@ import type { TextEditorOutputProps } from './TextEditorOutput.types';
  @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditoroutput--demo)
 
  */
-export declare const TextEditorOutput: React.ForwardRefExoticComponent<TextEditorOutputProps & DivAttributes & React.RefAttributes<HTMLDivElement>>;
+export declare const TextEditorOutput: React.ForwardRefExoticComponent<TextEditorOutputProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/TextEditorOutput/TextEditorOutput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditorOutput.js","names":["Editor","React","generateExternalPlugins","tinyMCEConfig","tinyMCESource","tinyMCEVersion","StyledEditor","TextEditorOutput","forwardRef","_ref","ref","value","initOverrides","init","props","_objectWithoutProperties","_excluded","createElement","_extends","_objectSpread","external_plugins","toolbar","autoresize_overflow_padding","min_height","max_height","content_style","tinymceScriptSrc","concat","disabled","displayName"],"sources":["../../src/TextEditorOutput/TextEditorOutput.tsx"],"sourcesContent":["import { Editor } from '@tinymce/tinymce-react'\nimport React from 'react'\nimport {\n  generateExternalPlugins,\n  tinyMCEConfig,\n  tinyMCESource,\n  tinyMCEVersion,\n} from '../_utils/TinyMCE'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledEditor } from './TextEditorOutput.styles'\nimport type { TextEditorOutputProps } from './TextEditorOutput.types'\n\n/**\n\n We use TextEditorOutput to render formatted text.\n\n @since 10.24.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditoroutput--demo)\n\n */\nexport const TextEditorOutput = React.forwardRef<\n  HTMLDivElement,\n  TextEditorOutputProps & DivAttributes\n>(function TextEditorOutput({ value, init: initOverrides, ...props }, ref) {\n  return (\n    <StyledEditor {...props} ref={ref}>\n      <Editor\n        value={value}\n        init={{\n          ...tinyMCEConfig,\n          external_plugins: generateExternalPlugins(['autoresize']),\n          toolbar: false,\n          autoresize_overflow_padding: 0,\n          min_height: 0,\n          max_height: 400,\n          content_style: `body { margin: 0; padding: 0; } p { margin: 0; }`,\n          ...initOverrides,\n        }}\n        tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}\n        disabled\n      />\n    </StyledEditor>\n  )\n})\n\nTextEditorOutput.displayName = 'TextEditorOutput'\n"],"mappings":";;;;;;;;;;AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,KAAK,MAAM,OAAO;AACzB,SACEC,uBAAuB,EACvBC,aAAa,EACbC,aAAa,EACbC,cAAc,QACT,mBAAmB;AAE1B,SAASC,YAAY,QAAQ,2BAA2B;AAGxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,gBAAGN,KAAK,CAACO,UAAU,CAG9C,SAASD,gBAAgBA,CAAAE,IAAA,EAA2CC,GAAG,EAAE;EAAA,IAA7CC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAQC,aAAa,GAAAH,IAAA,CAAnBI,IAAI;IAAoBC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAChE,oBACEf,KAAA,CAAAgB,aAAA,CAACX,YAAY,EAAAY,QAAA,KAAKJ,KAAK;IAAEJ,GAAG,EAAEA;EAAI,iBAChCT,KAAA,CAAAgB,aAAA,CAACjB,MAAM;IACLW,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAAM,aAAA,CAAAA,aAAA,KACChB,aAAa;MAChBiB,gBAAgB,EAAElB,uBAAuB,CAAC,CAAC,YAAY,CAAC,CAAC;MACzDmB,OAAO,EAAE,KAAK;MACdC,2BAA2B,EAAE,CAAC;MAC9BC,UAAU,EAAE,CAAC;MACbC,UAAU,EAAE,GAAG;MACfC,aAAa;IAAoD,GAC9Db,aAAa,CAChB;IACFc,gBAAgB,KAAAC,MAAA,CAAKvB,aAAa,OAAAuB,MAAA,CAAItB,cAAc,oBAAkB;IACtEuB,QAAQ;EAAA,CACT,CACW,CAAC;AAEnB,CAAC,CAAC;AAEFrB,gBAAgB,CAACsB,WAAW,GAAG,kBAAkB"}
+{"version":3,"file":"TextEditorOutput.js","names":["Editor","React","generateExternalPlugins","tinyMCEConfig","tinyMCESource","tinyMCEVersion","StyledEditor","TextEditorOutput","forwardRef","_ref","ref","value","initOverrides","init","props","_objectWithoutProperties","_excluded","createElement","_extends","_objectSpread","external_plugins","toolbar","autoresize_overflow_padding","min_height","max_height","content_style","tinymceScriptSrc","concat","disabled","displayName"],"sources":["../../src/TextEditorOutput/TextEditorOutput.tsx"],"sourcesContent":["import { Editor } from '@tinymce/tinymce-react'\nimport React from 'react'\nimport {\n  generateExternalPlugins,\n  tinyMCEConfig,\n  tinyMCESource,\n  tinyMCEVersion,\n} from '../_utils/TinyMCE'\nimport { StyledEditor } from './TextEditorOutput.styles'\nimport type { TextEditorOutputProps } from './TextEditorOutput.types'\n\n/**\n\n We use TextEditorOutput to render formatted text.\n\n @since 10.24.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditoroutput--demo)\n\n */\nexport const TextEditorOutput = React.forwardRef<\n  HTMLDivElement,\n  TextEditorOutputProps & React.HTMLAttributes<HTMLDivElement>\n>(function TextEditorOutput({ value, init: initOverrides, ...props }, ref) {\n  return (\n    <StyledEditor {...props} ref={ref}>\n      <Editor\n        value={value}\n        init={{\n          ...tinyMCEConfig,\n          external_plugins: generateExternalPlugins(['autoresize']),\n          toolbar: false,\n          autoresize_overflow_padding: 0,\n          min_height: 0,\n          max_height: 400,\n          content_style: `body { margin: 0; padding: 0; } p { margin: 0; }`,\n          ...initOverrides,\n        }}\n        tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}\n        disabled\n      />\n    </StyledEditor>\n  )\n})\n\nTextEditorOutput.displayName = 'TextEditorOutput'\n"],"mappings":";;;;;;;;;;AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,KAAK,MAAM,OAAO;AACzB,SACEC,uBAAuB,EACvBC,aAAa,EACbC,aAAa,EACbC,cAAc,QACT,mBAAmB;AAC1B,SAASC,YAAY,QAAQ,2BAA2B;AAGxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,gBAAGN,KAAK,CAACO,UAAU,CAG9C,SAASD,gBAAgBA,CAAAE,IAAA,EAA2CC,GAAG,EAAE;EAAA,IAA7CC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAQC,aAAa,GAAAH,IAAA,CAAnBI,IAAI;IAAoBC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAChE,oBACEf,KAAA,CAAAgB,aAAA,CAACX,YAAY,EAAAY,QAAA,KAAKJ,KAAK;IAAEJ,GAAG,EAAEA;EAAI,iBAChCT,KAAA,CAAAgB,aAAA,CAACjB,MAAM;IACLW,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAAM,aAAA,CAAAA,aAAA,KACChB,aAAa;MAChBiB,gBAAgB,EAAElB,uBAAuB,CAAC,CAAC,YAAY,CAAC,CAAC;MACzDmB,OAAO,EAAE,KAAK;MACdC,2BAA2B,EAAE,CAAC;MAC9BC,UAAU,EAAE,CAAC;MACbC,UAAU,EAAE,GAAG;MACfC,aAAa;IAAoD,GAC9Db,aAAa,CAChB;IACFc,gBAAgB,KAAAC,MAAA,CAAKvB,aAAa,OAAAuB,MAAA,CAAItB,cAAc,oBAAkB;IACtEuB,QAAQ;EAAA,CACT,CACW,CAAC;AAEnB,CAAC,CAAC;AAEFrB,gBAAgB,CAACsB,WAAW,GAAG,kBAAkB"}

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_25_1__sc-1lje1b0-0"
+  componentId: "core-12_25_2__sc-1lje1b0-0"
 })(["> .tox-tinymce{border:none;}"]);
 //# sourceMappingURL=TextEditorOutput.styles.js.map

package/dist/TextInput/TextInput.d.ts

@@ -8,4 +8,4 @@
  @see [Design Guidelines](https://design.procore.com/text-input)
 
  */
-export declare const TextInput: import("react").ForwardRefExoticComponent<import("../_utils/types").InputAttributes & import("../Input").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<import("../Input").InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Thumbnail/Thumbnail.hooks.d.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { LayoutVariant, ThumbnailProps } from './Thumbnail.types';
 export declare const useThumbnail: ({ selected, disabled, clickable, focused, hasCaptionPlaceholder, src, filename: filename_, size, label, name, caption, onChange, value, ...props }: ThumbnailProps<'checkbox'> | ThumbnailProps<'figure'> | ThumbnailProps<undefined>) => {
     label: string;
@@ -24,7 +23,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
@@ -322,7 +321,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: string;
@@ -620,7 +619,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
@@ -942,7 +941,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: string;
@@ -1264,7 +1263,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
@@ -1302,7 +1301,7 @@ export declare const useThumbnail: ({ selected, disabled, clickable, focused, ha
      * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
      * > This is likely not portable. A type annotation is necessary.
      */
-    focusProps: DivAttributes;
+    focusProps: React.HTMLAttributes<HTMLDivElement>;
     isFocusVisible: boolean;
     toggleState: import("react-stately").ToggleState;
     as: string;

package/dist/Thumbnail/Thumbnail.hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.hooks.js","names":["useCheckbox","useFocusRing","useRef","useToggleState","getIsFilePreviewableAsImage","defaultSize","useThumbnail","_ref","selected","_ref$disabled","disabled","_ref$clickable","clickable","_ref$focused","focused","_ref$hasCaptionPlaceh","hasCaptionPlaceholder","src","filename_","filename","_ref$size","size","_ref$label","label","name","_ref$caption","caption","onChange","value","props","_objectWithoutProperties","_excluded","a11yProps","role","as","inputRef","toggleState","defaultSelected","layout","isFile","File","isImageURL","canPreviewFileAsImage","isFileOrNonPreviewableImage","shouldUsePlaceholder","ariaLabel","concat","_useCheckbox","isSelected","inputProps","_useFocusRing","isFocusVisible","focusProps","_objectSpread","alt"],"sources":["../../src/Thumbnail/Thumbnail.hooks.tsx"],"sourcesContent":["import { useCheckbox } from '@react-aria/checkbox'\nimport { useFocusRing } from '@react-aria/focus'\nimport type React from 'react'\nimport { useRef } from 'react'\nimport { useToggleState } from 'react-stately'\nimport type { DivAttributes } from '../_utils/types'\nimport type { LayoutVariant, ThumbnailProps } from './Thumbnail.types'\nimport { getIsFilePreviewableAsImage } from './Thumbnail.utils'\n\nconst defaultSize = 'lg'\n\nexport const useThumbnail = ({\n  selected,\n  disabled = false,\n  clickable = true,\n  focused = false,\n  hasCaptionPlaceholder = false,\n  src,\n  filename: filename_,\n  size = defaultSize,\n  label = '',\n  // @ts-ignore  Checkbox only\n  name,\n  caption = '',\n  // @ts-ignore  Checkbox only\n  onChange,\n  // @ts-ignore  Checkbox only\n  value,\n  ...props\n}:\n  | ThumbnailProps<'checkbox'>\n  | ThumbnailProps<'figure'>\n  | ThumbnailProps<undefined>) => {\n  const a11yProps =\n    props.role === 'figure'\n      ? { as: 'figure' as React.ElementType }\n      : { as: 'div' }\n  const inputRef = useRef<HTMLInputElement>(null)\n  const toggleState = useToggleState({\n    defaultSelected: selected,\n    onChange,\n  })\n  const layout: LayoutVariant = size === 'sm' ? 'row' : 'column'\n  const isFile = src instanceof File\n  const isImageURL = typeof src === 'string'\n  const canPreviewFileAsImage = getIsFilePreviewableAsImage(src)\n  const isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage\n  const shouldUsePlaceholder = isFileOrNonPreviewableImage || !src\n  const filename =\n    filename_ ?? (isFileOrNonPreviewableImage ? (src as File).name : caption)\n  const ariaLabel = label && caption ? `${label} ${caption}` : caption || label\n  const { inputProps } = useCheckbox(\n    { isSelected: selected, 'aria-label': ariaLabel, name, onChange, value },\n    toggleState,\n    inputRef\n  )\n  const { isFocusVisible, focusProps } = useFocusRing()\n\n  return {\n    alt: props.alt || props.alt === '' ? props.alt : caption || label,\n    ...props,\n    ...a11yProps,\n    label,\n    caption,\n    selected: toggleState.isSelected,\n    disabled,\n    clickable,\n    focused,\n    isImageURL,\n    hasCaptionPlaceholder,\n    shouldUsePlaceholder,\n    src,\n    filename,\n    size,\n    layout,\n    inputRef,\n    inputProps,\n    /**\n     * Appeared 23-1-18 https://github.com/procore/core/pull/12250\n     * Possible issue with types from React Aria during dependency update\n     * > The inferred type of 'useThumbnail' cannot be named without a\n     * > reference to '@react-aria/focus/node_modules/@react-types/shared'.\n     * > This is likely not portable. A type annotation is necessary.\n     */\n    focusProps: focusProps as DivAttributes,\n    isFocusVisible,\n    toggleState,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Thumbnail.hooks.js","names":["useCheckbox","useFocusRing","useRef","useToggleState","getIsFilePreviewableAsImage","defaultSize","useThumbnail","_ref","selected","_ref$disabled","disabled","_ref$clickable","clickable","_ref$focused","focused","_ref$hasCaptionPlaceh","hasCaptionPlaceholder","src","filename_","filename","_ref$size","size","_ref$label","label","name","_ref$caption","caption","onChange","value","props","_objectWithoutProperties","_excluded","a11yProps","role","as","inputRef","toggleState","defaultSelected","layout","isFile","File","isImageURL","canPreviewFileAsImage","isFileOrNonPreviewableImage","shouldUsePlaceholder","ariaLabel","concat","_useCheckbox","isSelected","inputProps","_useFocusRing","isFocusVisible","focusProps","_objectSpread","alt"],"sources":["../../src/Thumbnail/Thumbnail.hooks.tsx"],"sourcesContent":["import { useCheckbox } from '@react-aria/checkbox'\nimport { useFocusRing } from '@react-aria/focus'\nimport type React from 'react'\nimport { useRef } from 'react'\nimport { useToggleState } from 'react-stately'\nimport type { LayoutVariant, ThumbnailProps } from './Thumbnail.types'\nimport { getIsFilePreviewableAsImage } from './Thumbnail.utils'\n\nconst defaultSize = 'lg'\n\nexport const useThumbnail = ({\n  selected,\n  disabled = false,\n  clickable = true,\n  focused = false,\n  hasCaptionPlaceholder = false,\n  src,\n  filename: filename_,\n  size = defaultSize,\n  label = '',\n  // @ts-ignore  Checkbox only\n  name,\n  caption = '',\n  // @ts-ignore  Checkbox only\n  onChange,\n  // @ts-ignore  Checkbox only\n  value,\n  ...props\n}:\n  | ThumbnailProps<'checkbox'>\n  | ThumbnailProps<'figure'>\n  | ThumbnailProps<undefined>) => {\n  const a11yProps =\n    props.role === 'figure'\n      ? { as: 'figure' as React.ElementType }\n      : { as: 'div' }\n  const inputRef = useRef<HTMLInputElement>(null)\n  const toggleState = useToggleState({\n    defaultSelected: selected,\n    onChange,\n  })\n  const layout: LayoutVariant = size === 'sm' ? 'row' : 'column'\n  const isFile = src instanceof File\n  const isImageURL = typeof src === 'string'\n  const canPreviewFileAsImage = getIsFilePreviewableAsImage(src)\n  const isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage\n  const shouldUsePlaceholder = isFileOrNonPreviewableImage || !src\n  const filename =\n    filename_ ?? (isFileOrNonPreviewableImage ? (src as File).name : caption)\n  const ariaLabel = label && caption ? `${label} ${caption}` : caption || label\n  const { inputProps } = useCheckbox(\n    { isSelected: selected, 'aria-label': ariaLabel, name, onChange, value },\n    toggleState,\n    inputRef\n  )\n  const { isFocusVisible, focusProps } = useFocusRing()\n\n  return {\n    alt: props.alt || props.alt === '' ? props.alt : caption || label,\n    ...props,\n    ...a11yProps,\n    label,\n    caption,\n    selected: toggleState.isSelected,\n    disabled,\n    clickable,\n    focused,\n    isImageURL,\n    hasCaptionPlaceholder,\n    shouldUsePlaceholder,\n    src,\n    filename,\n    size,\n    layout,\n    inputRef,\n    inputProps,\n    /**\n     * Appeared 23-1-18 https://github.com/procore/core/pull/12250\n     * Possible issue with types from React Aria during dependency update\n     * > The inferred type of 'useThumbnail' cannot be named without a\n     * > reference to '@react-aria/focus/node_modules/@react-types/shared'.\n     * > This is likely not portable. A type annotation is necessary.\n     */\n    focusProps: focusProps as React.HTMLAttributes<HTMLDivElement>,\n    isFocusVisible,\n    toggleState,\n  }\n}\n"],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.styles.d.ts

@@ -24,9 +24,9 @@ export declare const StyledPlaceholderCaption: import("styled-components/dist/ty
 export declare const StyledSingleLineCaption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CaptionProps>> & string;
 export declare const StyledSinglelineCaptionBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledSinglelineCaptionEnding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledLabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("..").SpanAttributes & TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+export declare const StyledLabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").HTMLAttributes<HTMLSpanElement> & TypographyProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").SpanAttributes & TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledThumbnailFigCaption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     $color?: TypographyProps['color'];
 }>> & string;

package/dist/Thumbnail/Thumbnail.styles.js

@@ -27,35 +27,35 @@ var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;
 });
 export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMultilineCaption",
-  componentId: "core-12_25_1__sc-195f70c-0"
+  componentId: "core-12_25_2__sc-195f70c-0"
 })(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
 export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledCaptionText",
-  componentId: "core-12_25_1__sc-195f70c-1"
+  componentId: "core-12_25_2__sc-195f70c-1"
 })(["width:100%;"]);
 export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderCaption",
-  componentId: "core-12_25_1__sc-195f70c-2"
+  componentId: "core-12_25_2__sc-195f70c-2"
 })(["", ""], captionBase);
 export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSingleLineCaption",
-  componentId: "core-12_25_1__sc-195f70c-3"
+  componentId: "core-12_25_2__sc-195f70c-3"
 })(["display:flex;", ""], captionBase);
 export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionBody",
-  componentId: "core-12_25_1__sc-195f70c-4"
+  componentId: "core-12_25_2__sc-195f70c-4"
 })(["", ""], getEllipsis);
 export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledSinglelineCaptionEnding",
-  componentId: "core-12_25_1__sc-195f70c-5"
+  componentId: "core-12_25_2__sc-195f70c-5"
 })(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
 export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledLabelText",
-  componentId: "core-12_25_1__sc-195f70c-6"
+  componentId: "core-12_25_2__sc-195f70c-6"
 })(["", ""], getEllipsis());
 export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
   displayName: "StyledThumbnailFigCaption",
-  componentId: "core-12_25_1__sc-195f70c-7"
+  componentId: "core-12_25_2__sc-195f70c-7"
 })(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
   var _ref5$$color = _ref5.$color,
     $color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
@@ -63,7 +63,7 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
 }, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_25_1__sc-195f70c-8"
+  componentId: "core-12_25_2__sc-195f70c-8"
 })(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
 var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
   var $clickable = _ref6.$clickable;
@@ -85,7 +85,7 @@ var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align
 });
 export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
   displayName: "StyledTickIcon",
-  componentId: "core-12_25_1__sc-195f70c-9"
+  componentId: "core-12_25_2__sc-195f70c-9"
 })(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
   var $selected = _ref1.$selected;
   return $selected && css(["opacity:1;transform:scale(1);"]);
@@ -95,28 +95,28 @@ export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
 });
 export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
   displayName: "StyledFileIcon",
-  componentId: "core-12_25_1__sc-195f70c-10"
+  componentId: "core-12_25_2__sc-195f70c-10"
 })(["width:36.5%;height:auto;"]);
 export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailPreview",
-  componentId: "core-12_25_1__sc-195f70c-11"
+  componentId: "core-12_25_2__sc-195f70c-11"
 })(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
   var $bgImage = _ref11.$bgImage;
   return css(["background-image:url(", ");"], $bgImage);
 });
 export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnailOverlay",
-  componentId: "core-12_25_1__sc-195f70c-12"
+  componentId: "core-12_25_2__sc-195f70c-12"
 })(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
 var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
 var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
 export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
   displayName: "StyledImageThumbnailImage",
-  componentId: "core-12_25_1__sc-195f70c-13"
+  componentId: "core-12_25_2__sc-195f70c-13"
 })([""]);
 export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledImageThumbnail",
-  componentId: "core-12_25_1__sc-195f70c-14"
+  componentId: "core-12_25_2__sc-195f70c-14"
 })(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
   var $disabled = _ref12.$disabled;
   return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
@@ -145,7 +145,7 @@ export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledThumbnailWrapper",
-  componentId: "core-12_25_1__sc-195f70c-15"
+  componentId: "core-12_25_2__sc-195f70c-15"
 })(["display:flex;", " ", ""], function (_ref18) {
   var $size = _ref18.$size;
   return $size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
@@ -156,7 +156,7 @@ export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPlaceholderThumbnail",
-  componentId: "core-12_25_1__sc-195f70c-16"
+  componentId: "core-12_25_2__sc-195f70c-16"
 })(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
   var $clickable = _ref20.$clickable;
   return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);

package/dist/ThumbnailGrid/ThumbnailGrid.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { ThumbnailGridItem, ThumbnailGridProps } from './ThumbnailGrid.types';
-export declare const ThumbnailGrid: React.ForwardRefExoticComponent<Omit<DivAttributes, "onSelect"> & ThumbnailGridProps<ThumbnailGridItem> & React.RefAttributes<HTMLDivElement>>;
+export declare const ThumbnailGrid: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & ThumbnailGridProps<ThumbnailGridItem> & React.RefAttributes<HTMLDivElement>>;