@procore/core-react 12.25.1 → 12.26.0

package/dist/FileToken/FileToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileToken.js","names":["useId","VisuallyHidden","React","Loader","loaderTransitionDuration","Token","Tooltip","useI18nContext","parseFilename","pulseAnimationDuration","StyledExtension","StyledFilename","StyledFilenameShortcut","StyledFileToken","FileToken","forwardRef","_ref","ref","fileName","_ref$progressValue","progressValue","_ref$errorMessage","errorMessage","onLabelClick","onClose","qa","props","_objectWithoutProperties","_excluded","i18n","isError","Boolean","isProgressValueComplete","_React$useState","useState","_React$useState2","_slicedToArray","isProgressComplete","setProgressComplete","_React$useState3","_React$useState4","isFinalized","setFinalized","didMountRef","useRef","_parseFilename","filename","extension","isFilename","progressBarLabelId","name","concat","useEffect","timerId","window","setTimeout","clearTimeout","current","token","createElement","Label","onClick","Remove","closeButton","trigger","overlay","_extends","$error","$finalized","$progressComplete","value","animated","id","t","role","displayName"],"sources":["../../src/FileToken/FileToken.tsx"],"sourcesContent":["import { useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport { Loader } from '../Loader/Loader'\nimport { loaderTransitionDuration } from '../Loader/Loader.styles'\nimport { Token } from '../Token/Token'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { parseFilename } from '../_utils/filename'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  pulseAnimationDuration,\n  StyledExtension,\n  StyledFilename,\n  StyledFilenameShortcut,\n  StyledFileToken,\n} from './FileToken.styles'\nimport type { FileTokenProps } from './FileToken.types'\n\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development.\n */\nexport const FileToken = React.forwardRef<\n  HTMLDivElement,\n  FileTokenProps & DivAttributes\n>(function FileToken(\n  {\n    fileName,\n    progressValue = 0,\n    errorMessage = '',\n    onLabelClick,\n    onClose,\n    qa,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const isError = Boolean(errorMessage)\n\n  const isProgressValueComplete = !isError && progressValue >= 100\n\n  const [isProgressComplete, setProgressComplete] = React.useState(\n    isProgressValueComplete\n  )\n\n  const [isFinalized, setFinalized] = React.useState(false)\n\n  const didMountRef = React.useRef(false)\n\n  const { filename, extension, isFilename } = parseFilename(fileName)\n\n  const progressBarLabelId = useId()\n  const name = isFilename ? `${filename}.` : fileName\n\n  React.useEffect(() => {\n    const timerId: number | null = isProgressValueComplete\n      ? window.setTimeout(() => {\n          setProgressComplete(true)\n        }, loaderTransitionDuration)\n      : null\n\n    if (!isProgressValueComplete) {\n      setProgressComplete(false)\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressValueComplete])\n\n  React.useEffect(() => {\n    const isFinalized = didMountRef.current && isProgressComplete\n    const timerId: number | null = isFinalized\n      ? window.setTimeout(() => {\n          setFinalized(false)\n        }, pulseAnimationDuration)\n      : null\n\n    setFinalized(didMountRef.current && isProgressComplete)\n\n    if (!didMountRef.current) {\n      didMountRef.current = true\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressComplete])\n\n  const token = (\n    <Token>\n      <Token.Label onClick={onLabelClick}>\n        <StyledFilenameShortcut>\n          <StyledFilename>{name}</StyledFilename>\n          <StyledExtension>{extension}</StyledExtension>\n        </StyledFilenameShortcut>\n      </Token.Label>\n      <Token.Remove onClick={onClose} data-qa={qa?.closeButton} />\n    </Token>\n  )\n\n  // prevent empty tooltip blinks when navigating via the keyboard by wrapping in tooltip conditionally\n  if (isError) {\n    return (\n      <Tooltip ref={ref} trigger=\"hover\" overlay={errorMessage}>\n        <StyledFileToken\n          {...props}\n          $error={isError}\n          $finalized={isFinalized}\n          $progressComplete={isProgressComplete}\n        >\n          {token}\n          <Loader value={progressValue} animated>\n            {token}\n          </Loader>\n        </StyledFileToken>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <StyledFileToken\n      {...props}\n      $error={isError}\n      $finalized={isFinalized}\n      $progressComplete={isProgressComplete}\n      ref={ref}\n    >\n      {token}\n      <Loader value={progressValue} animated aria-hidden>\n        {token}\n      </Loader>\n      <VisuallyHidden>\n        <span id={progressBarLabelId}>\n          {i18n.t('core.fileToken.uploading')}\n        </span>\n        <div\n          aria-labelledby={progressBarLabelId}\n          role=\"progressbar\"\n          aria-valuenow={progressValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={`${progressValue}%`}\n        />\n      </VisuallyHidden>\n    </StyledFileToken>\n  )\n})\n\nFileToken.displayName = 'FileToken'\n"],"mappings":"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"}
+{"version":3,"file":"FileToken.js","names":["useId","VisuallyHidden","React","Loader","loaderTransitionDuration","Tooltip","useI18nContext","pulseAnimationDuration","StyledFileToken","FileTokenInner","FileToken","forwardRef","_ref","ref","fileName","_ref$progressValue","progressValue","_ref$errorMessage","errorMessage","onLabelClick","onClose","qa","props","_objectWithoutProperties","_excluded","i18n","isError","Boolean","isProgressValueComplete","_React$useState","useState","_React$useState2","_slicedToArray","isProgressComplete","setProgressComplete","_React$useState3","_React$useState4","isFinalized","setFinalized","didMountRef","useRef","progressBarLabelId","useEffect","timerId","window","setTimeout","clearTimeout","current","renderToken","includeInTabOrder","arguments","length","undefined","createElement","fullFilename","onClick","qaCloseBtn","closeButton","trigger","overlay","_extends","$error","$finalized","$progressComplete","value","animated","id","t","role","concat","displayName"],"sources":["../../src/FileToken/FileToken.tsx"],"sourcesContent":["import { useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport { Loader } from '../Loader/Loader'\nimport { loaderTransitionDuration } from '../Loader/Loader.styles'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { pulseAnimationDuration, StyledFileToken } from './FileToken.styles'\nimport type { FileTokenProps } from './FileToken.types'\nimport { FileTokenInner } from './FileTokenInner'\n\n/**\n * @deprecatedSince 11\n * @deprecated Intended for internal library development.\n */\nexport const FileToken = React.forwardRef<\n  HTMLDivElement,\n  FileTokenProps & React.HTMLAttributes<HTMLDivElement>\n>(function FileToken(\n  {\n    fileName,\n    progressValue = 0,\n    errorMessage = '',\n    onLabelClick,\n    onClose,\n    qa,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const isError = Boolean(errorMessage)\n\n  const isProgressValueComplete = !isError && progressValue >= 100\n\n  const [isProgressComplete, setProgressComplete] = React.useState(\n    isProgressValueComplete\n  )\n\n  const [isFinalized, setFinalized] = React.useState(false)\n\n  const didMountRef = React.useRef(false)\n\n  const progressBarLabelId = useId()\n\n  React.useEffect(() => {\n    const timerId: number | null = isProgressValueComplete\n      ? window.setTimeout(() => {\n          setProgressComplete(true)\n        }, loaderTransitionDuration)\n      : null\n\n    if (!isProgressValueComplete) {\n      setProgressComplete(false)\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressValueComplete])\n\n  React.useEffect(() => {\n    const isFinalized = didMountRef.current && isProgressComplete\n    const timerId: number | null = isFinalized\n      ? window.setTimeout(() => {\n          setFinalized(false)\n        }, pulseAnimationDuration)\n      : null\n\n    setFinalized(didMountRef.current && isProgressComplete)\n\n    if (!didMountRef.current) {\n      didMountRef.current = true\n    }\n\n    return () => {\n      timerId && clearTimeout(timerId)\n    }\n  }, [isProgressComplete])\n\n  const renderToken = (includeInTabOrder = false) => (\n    <FileTokenInner\n      fullFilename={fileName}\n      includeInTabOrder={includeInTabOrder}\n      onClick={onLabelClick}\n      onClose={onClose}\n      qaCloseBtn={qa?.closeButton}\n    />\n  )\n\n  // prevent empty tooltip blinks when navigating via the keyboard by wrapping in tooltip conditionally\n  if (isError) {\n    return (\n      <Tooltip ref={ref} trigger=\"hover\" overlay={errorMessage}>\n        <StyledFileToken\n          {...props}\n          $error={isError}\n          $finalized={isFinalized}\n          $progressComplete={isProgressComplete}\n        >\n          {renderToken(true)}\n          <Loader value={progressValue} animated>\n            {renderToken()}\n          </Loader>\n        </StyledFileToken>\n      </Tooltip>\n    )\n  }\n\n  return (\n    <StyledFileToken\n      {...props}\n      $error={isError}\n      $finalized={isFinalized}\n      $progressComplete={isProgressComplete}\n      ref={ref}\n    >\n      {renderToken(true)}\n      <Loader value={progressValue} animated aria-hidden>\n        {renderToken()}\n      </Loader>\n      <VisuallyHidden>\n        <span id={progressBarLabelId}>\n          {i18n.t('core.fileToken.uploading')}\n        </span>\n        <div\n          aria-labelledby={progressBarLabelId}\n          role=\"progressbar\"\n          aria-valuenow={progressValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuetext={`${progressValue}%`}\n        />\n      </VisuallyHidden>\n    </StyledFileToken>\n  )\n})\n\nFileToken.displayName = 'FileToken'\n"],"mappings":"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"}

package/dist/FileToken/FileToken.styles.js

@@ -1,35 +1,35 @@
 import styled, { css, keyframes } from 'styled-components';
 import { StyledLoader } from '../Loader/Loader.styles';
-import { StyledLabel, StyledToken } from '../Token/Token.styles';
+import { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles';
 import { colors } from '../_styles/colors';
 export var pulseAnimationDuration = 600;
 var focusPulse = /*#__PURE__*/keyframes(["0%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}25%{box-shadow:0 0 0 0 ", ",0 0 0 0 ", ",0 0 0 0 ", ";}50%{box-shadow:0 0 0 1px ", ",0 0 0 3px ", ",0 0 0 2px ", ";}100%{box-shadow:0 0 0 1.5px ", ",0 0 0 3px ", ",0 0 0 6px ", ";}"], colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94);
 export var StyledFilenameShortcut = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilenameShortcut",
-  componentId: "core-12_25_1__sc-13jx4bx-0"
+  componentId: "core-12_26_0__sc-13jx4bx-0"
 })(["display:flex;"]);
 export var StyledFilename = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFilename",
-  componentId: "core-12_25_1__sc-13jx4bx-1"
+  componentId: "core-12_26_0__sc-13jx4bx-1"
 })(["flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;"]);
 export var StyledExtension = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledExtension",
-  componentId: "core-12_25_1__sc-13jx4bx-2"
+  componentId: "core-12_26_0__sc-13jx4bx-2"
 })(["flex-shrink:0;"]);
 export var StyledFileToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFileToken",
-  componentId: "core-12_25_1__sc-13jx4bx-3"
-})(["background-color:", ";border-radius:200px;max-width:100%;outline:none;overflow:hidden;position:relative;&:focus,&.focus{box-shadow:0 0 0 2px ", ";outline:none;", "{border-color:transparent;", "}}", "{background:none;color:", ";display:flex;user-select:none;}", "{overflow:hidden;", "{border-radius:200px 0 0 200px;color:", ";padding-right:0;transition:color 0s linear,background-color 0s linear;user-select:none;", "{flex:0 0 auto;}}}", ""], colors.gray96, colors.blue40, StyledToken, function (_ref) {
+  componentId: "core-12_26_0__sc-13jx4bx-3"
+})(["background-color:", ";border-radius:200px;max-width:100%;outline:none;overflow:hidden;position:relative;&:focus,&.focus{box-shadow:0 0 0 2px ", ";outline:none;", "{border-color:transparent;", "}}", "{background:none;color:", ";display:flex;user-select:none;", "{color:", ";}}", "{overflow:hidden;", "{border-radius:200px 0 0 200px;color:", ";padding-right:0;transition:color 0s linear,background-color 0s linear;user-select:none;", "{flex:0 0 auto;}}}", ""], colors.gray96, colors.blue40, StyledToken, function (_ref) {
   var $progressComplete = _ref.$progressComplete;
   return $progressComplete && css(["background-color:", ";"], colors.blue45);
-}, StyledToken, colors.blue40, StyledLoader, StyledToken, colors.white, StyledLabel, function (_ref2) {
+}, StyledToken, colors.blue40, StyledRemove, colors.blue40, StyledLoader, StyledToken, colors.white, StyledLabel, function (_ref2) {
   var $error = _ref2.$error,
     $finalized = _ref2.$finalized,
     $progressComplete = _ref2.$progressComplete;
   if ($error) {
-    return css(["background-color:", ";&:focus{background-color:", ";}", "{color:", ";}", "{display:none;}"], colors.red50, colors.red50, StyledToken, colors.white, StyledLoader);
+    return css(["background-color:", ";&:focus{background-color:", ";}", "{color:", ";", "{color:", ";&.focus,&:focus,&.hover,&:hover{color:", ";}}}", "{display:none;}"], colors.red50, colors.red50, StyledToken, colors.white, StyledRemove, colors.white, colors.blue40, StyledLoader);
   } else if ($finalized || $progressComplete) {
-    return css(["", ";", "{opacity:0;pointer-events:none;}", "{background-color:", ";color:", ";&:hover,&:focus{background-color:", ";}}&.hover,&.focus{", "{background-color:", ";}}"], $finalized && css(["animation-delay:0;animation-duration:", "ms;animation-name:", ";animation-timing-function:ease-out;"], pulseAnimationDuration, focusPulse), StyledLoader, StyledToken, colors.blue50, colors.white, colors.blue45, StyledToken, colors.blue45);
+    return css(["", ";", "{opacity:0;pointer-events:none;}", "{background-color:", ";color:", ";&:hover,&:focus{background-color:", ";}", "{color:", ";&.focus,&:focus,&.hover,&:hover{color:", ";}}}&.hover,&.focus{", "{background-color:", ";}}"], $finalized && css(["animation-delay:0;animation-duration:", "ms;animation-name:", ";animation-timing-function:ease-out;"], pulseAnimationDuration, focusPulse), StyledLoader, StyledToken, colors.blue50, colors.white, colors.blue45, StyledRemove, colors.white, colors.blue40, StyledToken, colors.blue45);
   }
   return css([""]);
 });

package/dist/FileToken/FileToken.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileToken.styles.js","names":["styled","css","keyframes","StyledLoader","StyledLabel","StyledToken","colors","pulseAnimationDuration","focusPulse","blue60","blue90","blue94","StyledFilenameShortcut","div","withConfig","displayName","componentId","StyledFilename","span","StyledExtension","StyledFileToken","gray96","blue40","_ref","$progressComplete","blue45","white","_ref2","$error","$finalized","red50","blue50"],"sources":["../../src/FileToken/FileToken.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledLoader } from '../Loader/Loader.styles'\nimport { StyledLabel, StyledToken } from '../Token/Token.styles'\nimport { colors } from '../_styles/colors'\n\nexport const pulseAnimationDuration = 600\n\nconst focusPulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  25% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  50% {\n    box-shadow: 0 0 0 1px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 2px ${colors.blue94};\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 6px ${colors.blue94};\n  }\n`\n\nexport const StyledFilenameShortcut = styled.div`\n  display: flex;\n`\n\nexport const StyledFilename = styled.span`\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\nexport const StyledExtension = styled.span`\n  flex-shrink: 0;\n`\n\nexport const StyledFileToken = styled.div<{\n  $error?: boolean\n  $finalized?: boolean\n  $progressComplete?: boolean\n}>`\n  background-color: ${colors.gray96};\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ${colors.blue40};\n    outline: none;\n\n    ${StyledToken} {\n      border-color: transparent;\n\n      ${({ $progressComplete }) =>\n        $progressComplete &&\n        css`\n          background-color: ${colors.blue45};\n        `}\n    }\n  }\n\n  ${StyledToken} {\n    background: none;\n    color: ${colors.blue40};\n    display: flex;\n    user-select: none;\n  }\n\n  ${StyledLoader} {\n    overflow: hidden;\n\n    ${StyledToken} {\n      border-radius: 200px 0 0 200px;\n      color: ${colors.white};\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ${StyledLabel} {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ${({ $error, $finalized, $progressComplete }) => {\n    if ($error) {\n      return css`\n        background-color: ${colors.red50};\n\n        &:focus {\n          background-color: ${colors.red50};\n        }\n\n        ${StyledToken} {\n          color: ${colors.white};\n        }\n\n        ${StyledLoader} {\n          display: none;\n        }\n      `\n    } else if ($finalized || $progressComplete) {\n      return css`\n        ${$finalized &&\n        css`\n          animation-delay: 0;\n          animation-duration: ${pulseAnimationDuration}ms;\n          animation-name: ${focusPulse};\n          animation-timing-function: ease-out;\n        `};\n\n        ${StyledLoader} {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ${StyledToken} {\n          background-color: ${colors.blue50};\n          color: ${colors.white};\n\n          &:hover,\n          &:focus {\n            background-color: ${colors.blue45};\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ${StyledToken} {\n            background-color: ${colors.blue45};\n          }\n        }\n      `\n    }\n\n    return css``\n  }}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,WAAW,EAAEC,WAAW,QAAQ,uBAAuB;AAChE,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAO,IAAMC,sBAAsB,GAAG,GAAG;AAEzC,IAAMC,UAAU,gBAAGN,SAAS,iPAEFI,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAGjEL,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAG/DL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,EAGnEL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,CAElG;AAED,OAAO,IAAMC,sBAAsB,gBAAGZ,MAAM,CAACa,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAE/C;AAED,OAAO,IAAMC,cAAc,gBAAGjB,MAAM,CAACkB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAIxC;AAED,OAAO,IAAMG,eAAe,gBAAGnB,MAAM,CAACkB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAEzC;AAED,OAAO,IAAMI,eAAe,gBAAGpB,MAAM,CAACa,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+bAKnBV,MAAM,CAACe,MAAM,EASPf,MAAM,CAACgB,MAAM,EAGnCjB,WAAW,EAGT,UAAAkB,IAAA;EAAA,IAAGC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;EAAA,OACpBA,iBAAiB,IACjBvB,GAAG,6BACmBK,MAAM,CAACmB,MAAM,CAClC;AAAA,GAILpB,WAAW,EAEFC,MAAM,CAACgB,MAAM,EAKtBnB,YAAY,EAGVE,WAAW,EAEFC,MAAM,CAACoB,KAAK,EAKnBtB,WAAW,EAMf,UAAAuB,KAAA,EAA+C;EAAA,IAA5CC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,UAAU,GAAAF,KAAA,CAAVE,UAAU;IAAEL,iBAAiB,GAAAG,KAAA,CAAjBH,iBAAiB;EACxC,IAAII,MAAM,EAAE;IACV,OAAO3B,GAAG,gGACYK,MAAM,CAACwB,KAAK,EAGVxB,MAAM,CAACwB,KAAK,EAGhCzB,WAAW,EACFC,MAAM,CAACoB,KAAK,EAGrBvB,YAAY;EAIlB,CAAC,MAAM,IAAI0B,UAAU,IAAIL,iBAAiB,EAAE;IAC1C,OAAOvB,GAAG,2KACN4B,UAAU,IACZ5B,GAAG,0GAEqBM,sBAAsB,EAC1BC,UAAU,CAE7B,EAECL,YAAY,EAKZE,WAAW,EACSC,MAAM,CAACyB,MAAM,EACxBzB,MAAM,CAACoB,KAAK,EAICpB,MAAM,CAACmB,MAAM,EAMjCpB,WAAW,EACSC,MAAM,CAACmB,MAAM;EAIzC;EAEA,OAAOxB,GAAG;AACZ,CAAC,CACF"}
+{"version":3,"file":"FileToken.styles.js","names":["styled","css","keyframes","StyledLoader","StyledLabel","StyledRemove","StyledToken","colors","pulseAnimationDuration","focusPulse","blue60","blue90","blue94","StyledFilenameShortcut","div","withConfig","displayName","componentId","StyledFilename","span","StyledExtension","StyledFileToken","gray96","blue40","_ref","$progressComplete","blue45","white","_ref2","$error","$finalized","red50","blue50"],"sources":["../../src/FileToken/FileToken.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { StyledLoader } from '../Loader/Loader.styles'\nimport { StyledLabel, StyledRemove, StyledToken } from '../Token/Token.styles'\nimport { colors } from '../_styles/colors'\n\nexport const pulseAnimationDuration = 600\n\nconst focusPulse = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  25% {\n    box-shadow: 0 0 0 0 ${colors.blue60}, 0 0 0 0 ${colors.blue90}, 0 0 0 0 ${colors.blue94};\n  }\n  50% {\n    box-shadow: 0 0 0 1px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 2px ${colors.blue94};\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ${colors.blue60}, 0 0 0 3px ${colors.blue90}, 0 0 0 6px ${colors.blue94};\n  }\n`\n\nexport const StyledFilenameShortcut = styled.div`\n  display: flex;\n`\n\nexport const StyledFilename = styled.span`\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`\n\nexport const StyledExtension = styled.span`\n  flex-shrink: 0;\n`\n\nexport const StyledFileToken = styled.div<{\n  $error?: boolean\n  $finalized?: boolean\n  $progressComplete?: boolean\n}>`\n  background-color: ${colors.gray96};\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ${colors.blue40};\n    outline: none;\n\n    ${StyledToken} {\n      border-color: transparent;\n\n      ${({ $progressComplete }) =>\n        $progressComplete &&\n        css`\n          background-color: ${colors.blue45};\n        `}\n    }\n  }\n\n  ${StyledToken} {\n    background: none;\n    color: ${colors.blue40};\n    display: flex;\n    user-select: none;\n\n    ${StyledRemove} {\n      color: ${colors.blue40};\n    }\n  }\n\n  ${StyledLoader} {\n    overflow: hidden;\n\n    ${StyledToken} {\n      border-radius: 200px 0 0 200px;\n      color: ${colors.white};\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ${StyledLabel} {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ${({ $error, $finalized, $progressComplete }) => {\n    if ($error) {\n      return css`\n        background-color: ${colors.red50};\n\n        &:focus {\n          background-color: ${colors.red50};\n        }\n\n        ${StyledToken} {\n          color: ${colors.white};\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        ${StyledLoader} {\n          display: none;\n        }\n      `\n    } else if ($finalized || $progressComplete) {\n      return css`\n        ${$finalized &&\n        css`\n          animation-delay: 0;\n          animation-duration: ${pulseAnimationDuration}ms;\n          animation-name: ${focusPulse};\n          animation-timing-function: ease-out;\n        `};\n\n        ${StyledLoader} {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ${StyledToken} {\n          background-color: ${colors.blue50};\n          color: ${colors.white};\n\n          &:hover,\n          &:focus {\n            background-color: ${colors.blue45};\n          }\n\n          ${StyledRemove} {\n            color: ${colors.white};\n\n            &.focus,\n            &:focus,\n            &.hover,\n            &:hover {\n              color: ${colors.blue40};\n            }\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ${StyledToken} {\n            background-color: ${colors.blue45};\n          }\n        }\n      `\n    }\n\n    return css``\n  }}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,uBAAuB;AAC9E,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAO,IAAMC,sBAAsB,GAAG,GAAG;AAEzC,IAAMC,UAAU,gBAAGP,SAAS,iPAEFK,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAGjEL,MAAM,CAACG,MAAM,EAAaH,MAAM,CAACI,MAAM,EAAaJ,MAAM,CAACK,MAAM,EAG/DL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,EAGnEL,MAAM,CAACG,MAAM,EAAeH,MAAM,CAACI,MAAM,EAAeJ,MAAM,CAACK,MAAM,CAElG;AAED,OAAO,IAAMC,sBAAsB,gBAAGb,MAAM,CAACc,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qBAE/C;AAED,OAAO,IAAMC,cAAc,gBAAGlB,MAAM,CAACmB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAIxC;AAED,OAAO,IAAMG,eAAe,gBAAGpB,MAAM,CAACmB,IAAI,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAEzC;AAED,OAAO,IAAMI,eAAe,gBAAGrB,MAAM,CAACc,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gdAKnBV,MAAM,CAACe,MAAM,EASPf,MAAM,CAACgB,MAAM,EAGnCjB,WAAW,EAGT,UAAAkB,IAAA;EAAA,IAAGC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;EAAA,OACpBA,iBAAiB,IACjBxB,GAAG,6BACmBM,MAAM,CAACmB,MAAM,CAClC;AAAA,GAILpB,WAAW,EAEFC,MAAM,CAACgB,MAAM,EAIpBlB,YAAY,EACHE,MAAM,CAACgB,MAAM,EAIxBpB,YAAY,EAGVG,WAAW,EAEFC,MAAM,CAACoB,KAAK,EAKnBvB,WAAW,EAMf,UAAAwB,KAAA,EAA+C;EAAA,IAA5CC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,UAAU,GAAAF,KAAA,CAAVE,UAAU;IAAEL,iBAAiB,GAAAG,KAAA,CAAjBH,iBAAiB;EACxC,IAAII,MAAM,EAAE;IACV,OAAO5B,GAAG,6JACYM,MAAM,CAACwB,KAAK,EAGVxB,MAAM,CAACwB,KAAK,EAGhCzB,WAAW,EACFC,MAAM,CAACoB,KAAK,EAEnBtB,YAAY,EACHE,MAAM,CAACoB,KAAK,EAMVpB,MAAM,CAACgB,MAAM,EAK1BpB,YAAY;EAIlB,CAAC,MAAM,IAAI2B,UAAU,IAAIL,iBAAiB,EAAE;IAC1C,OAAOxB,GAAG,wOACN6B,UAAU,IACZ7B,GAAG,0GAEqBO,sBAAsB,EAC1BC,UAAU,CAE7B,EAECN,YAAY,EAKZG,WAAW,EACSC,MAAM,CAACyB,MAAM,EACxBzB,MAAM,CAACoB,KAAK,EAICpB,MAAM,CAACmB,MAAM,EAGjCrB,YAAY,EACHE,MAAM,CAACoB,KAAK,EAMVpB,MAAM,CAACgB,MAAM,EAOxBjB,WAAW,EACSC,MAAM,CAACmB,MAAM;EAIzC;EAEA,OAAOzB,GAAG;AACZ,CAAC,CACF"}

package/dist/FileToken/FileToken.types.d.ts

@@ -31,4 +31,26 @@ export interface FileTokenProps extends Props {
      */
     qa?: QaTags;
 }
+export interface FileTokenInnerProps {
+    /**
+     * @since 12.25.0
+     */
+    fullFilename: string;
+    /**
+     * @since 12.25.0
+     */
+    includeInTabOrder?: boolean;
+    /**
+     * @since 12.25.0
+     */
+    onClick?: () => void;
+    /**
+     * @since 12.25.0
+     */
+    onClose?: () => void;
+    /**
+     * @since 12.25.0
+     */
+    qaCloseBtn?: QaTags['closeButton'];
+}
 export {};

package/dist/FileToken/FileToken.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileToken.types.js","names":[],"sources":["../../src/FileToken/FileToken.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\ninterface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  closeButton?: string\n}\nexport interface FileTokenProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  fileName: string\n  /**\n   * @since 10.19.0\n   */\n  progressValue?: number\n  /**\n   * @since 10.19.0\n   */\n  errorMessage?: string\n  /**\n   * @since 10.19.0\n   */\n  onLabelClick?: () => void\n  /**\n   * @since 10.19.0\n   */\n  onClose?: () => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n}\n"],"mappings":""}
+{"version":3,"file":"FileToken.types.js","names":[],"sources":["../../src/FileToken/FileToken.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\ninterface QaTags {\n  /**\n   * @since 10.19.0\n   */\n  closeButton?: string\n}\nexport interface FileTokenProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  fileName: string\n  /**\n   * @since 10.19.0\n   */\n  progressValue?: number\n  /**\n   * @since 10.19.0\n   */\n  errorMessage?: string\n  /**\n   * @since 10.19.0\n   */\n  onLabelClick?: () => void\n  /**\n   * @since 10.19.0\n   */\n  onClose?: () => void\n  /**\n   * @since 10.19.0\n   */\n  qa?: QaTags\n}\n\nexport interface FileTokenInnerProps {\n  /**\n   * @since 12.25.0\n   */\n  fullFilename: string\n  /**\n   * @since 12.25.0\n   */\n  includeInTabOrder?: boolean\n  /**\n   * @since 12.25.0\n   */\n  onClick?: () => void\n  /**\n   * @since 12.25.0\n   */\n  onClose?: () => void\n  /**\n   * @since 12.25.0\n   */\n  qaCloseBtn?: QaTags['closeButton']\n}\n"],"mappings":""}

package/dist/FileToken/FileTokenInner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { FileTokenInnerProps } from './FileToken.types';
+export declare const FileTokenInner: ({ fullFilename, includeInTabOrder, onClick, onClose, qaCloseBtn, }: FileTokenInnerProps) => React.JSX.Element;

package/dist/FileToken/FileTokenInner.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Token } from '../Token';
+import { parseFilename } from '../_utils/filename';
+import { StyledExtension, StyledFilename, StyledFilenameShortcut } from './FileToken.styles';
+export var FileTokenInner = function FileTokenInner(_ref) {
+  var fullFilename = _ref.fullFilename,
+    includeInTabOrder = _ref.includeInTabOrder,
+    onClick = _ref.onClick,
+    onClose = _ref.onClose,
+    qaCloseBtn = _ref.qaCloseBtn;
+  var _parseFilename = parseFilename(fullFilename),
+    filename = _parseFilename.filename,
+    extension = _parseFilename.extension,
+    isFilename = _parseFilename.isFilename;
+  var name = isFilename ? "".concat(filename, ".") : fullFilename;
+  return /*#__PURE__*/React.createElement(Token, {
+    tabIndex: includeInTabOrder ? 0 : -1
+  }, /*#__PURE__*/React.createElement(Token.Label, {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(StyledFilenameShortcut, null, /*#__PURE__*/React.createElement(StyledFilename, null, name), /*#__PURE__*/React.createElement(StyledExtension, null, extension))), includeInTabOrder && /*#__PURE__*/React.createElement(Token.Remove, {
+    "data-qa": qaCloseBtn,
+    onClick: onClose
+  }));
+};
+//# sourceMappingURL=FileTokenInner.js.map

package/dist/FileToken/FileTokenInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTokenInner.js","names":["React","Token","parseFilename","StyledExtension","StyledFilename","StyledFilenameShortcut","FileTokenInner","_ref","fullFilename","includeInTabOrder","onClick","onClose","qaCloseBtn","_parseFilename","filename","extension","isFilename","name","concat","createElement","tabIndex","Label","Remove"],"sources":["../../src/FileToken/FileTokenInner.tsx"],"sourcesContent":["import React from 'react'\nimport { Token } from '../Token'\nimport { parseFilename } from '../_utils/filename'\nimport {\n  StyledExtension,\n  StyledFilename,\n  StyledFilenameShortcut,\n} from './FileToken.styles'\nimport type { FileTokenInnerProps } from './FileToken.types'\n\nexport const FileTokenInner = ({\n  fullFilename,\n  includeInTabOrder,\n  onClick,\n  onClose,\n  qaCloseBtn,\n}: FileTokenInnerProps) => {\n  const { filename, extension, isFilename } = parseFilename(fullFilename)\n  const name = isFilename ? `${filename}.` : fullFilename\n\n  return (\n    <Token tabIndex={includeInTabOrder ? 0 : -1}>\n      <Token.Label onClick={onClick}>\n        <StyledFilenameShortcut>\n          <StyledFilename>{name}</StyledFilename>\n          <StyledExtension>{extension}</StyledExtension>\n        </StyledFilenameShortcut>\n      </Token.Label>\n      {includeInTabOrder && (\n        <Token.Remove data-qa={qaCloseBtn} onClick={onClose} />\n      )}\n    </Token>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SACEC,eAAe,EACfC,cAAc,EACdC,sBAAsB,QACjB,oBAAoB;AAG3B,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAMA;EAAA,IALzBC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,iBAAiB,GAAAF,IAAA,CAAjBE,iBAAiB;IACjBC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,UAAU,GAAAL,IAAA,CAAVK,UAAU;EAEV,IAAAC,cAAA,GAA4CX,aAAa,CAACM,YAAY,CAAC;IAA/DM,QAAQ,GAAAD,cAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,cAAA,CAATE,SAAS;IAAEC,UAAU,GAAAH,cAAA,CAAVG,UAAU;EACvC,IAAMC,IAAI,GAAGD,UAAU,MAAAE,MAAA,CAAMJ,QAAQ,SAAMN,YAAY;EAEvD,oBACER,KAAA,CAAAmB,aAAA,CAAClB,KAAK;IAACmB,QAAQ,EAAEX,iBAAiB,GAAG,CAAC,GAAG,CAAC;EAAE,gBAC1CT,KAAA,CAAAmB,aAAA,CAAClB,KAAK,CAACoB,KAAK;IAACX,OAAO,EAAEA;EAAQ,gBAC5BV,KAAA,CAAAmB,aAAA,CAACd,sBAAsB,qBACrBL,KAAA,CAAAmB,aAAA,CAACf,cAAc,QAAEa,IAAqB,CAAC,eACvCjB,KAAA,CAAAmB,aAAA,CAAChB,eAAe,QAAEY,SAA2B,CACvB,CACb,CAAC,EACbN,iBAAiB,iBAChBT,KAAA,CAAAmB,aAAA,CAAClB,KAAK,CAACqB,MAAM;IAAC,WAASV,UAAW;IAACF,OAAO,EAAEC;EAAQ,CAAE,CAEnD,CAAC;AAEZ,CAAC"}

package/dist/FilterToken/FilterToken.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { ButtonAttributes, DivAttributes, Props, SpanAttributes } from '../_utils/types';
 import type { FilterTokenProps } from './FilterToken.types';
-export declare const FilterToken: React.ForwardRefExoticComponent<DivAttributes & FilterTokenProps & React.RefAttributes<HTMLDivElement>> & {
-    Label: React.ForwardRefExoticComponent<SpanAttributes & Props & React.RefAttributes<HTMLSpanElement>>;
-    Remove: React.ForwardRefExoticComponent<ButtonAttributes & Props & React.RefAttributes<HTMLButtonElement>>;
+export declare const FilterToken: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & FilterTokenProps & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Remove: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/FilterToken/FilterToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterToken.js","names":["Clear","React","useI18nContext","addSubcomponents","StyledContent","StyledContentLabel","StyledFilterRemoveButton","StyledFilterToken","StyledLabel","Parent","forwardRef","_ref","ref","_ref$focused","focused","props","_objectWithoutProperties","_excluded","createElement","_extends","$focused","Remove","_ref2","children","disabled","_excluded2","i18n","$disabled","t","tabIndex","type","Children","map","child","Label","displayName","FilterToken"],"sources":["../../src/FilterToken/FilterToken.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type {\n  ButtonAttributes,\n  DivAttributes,\n  Props,\n  SpanAttributes,\n} from '../_utils/types'\nimport {\n  StyledContent,\n  StyledContentLabel,\n  StyledFilterRemoveButton,\n  StyledFilterToken,\n  StyledLabel,\n} from './FilterToken.styles'\nimport type { FilterTokenProps } from './FilterToken.types'\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & FilterTokenProps\n>(({ focused = false, ...props }, ref) => (\n  <StyledFilterToken $focused={focused} ref={ref} {...props} />\n))\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonAttributes & Props>(\n  ({ children, disabled, ...props }, ref) => {\n    const i18n = useI18nContext()\n\n    return (\n      <StyledFilterRemoveButton\n        $disabled={disabled ?? false}\n        aria-label={i18n.t('core.token.remove')}\n        tabIndex={0}\n        type=\"button\"\n        ref={ref}\n        {...props}\n      >\n        <StyledContent>\n          <Clear data-icon-prop=\"true\" />\n          {React.Children.map(children, (child) => (\n            <StyledContentLabel>{child}</StyledContentLabel>\n          ))}\n        </StyledContent>\n      </StyledFilterRemoveButton>\n    )\n  }\n)\n\nconst Label = React.forwardRef<HTMLSpanElement, SpanAttributes & Props>(\n  (props, ref) => <StyledLabel ref={ref} {...props} />\n)\n\nParent.displayName = 'FilterToken'\nRemove.displayName = 'FilterToken.Remove'\nLabel.displayName = 'FilterToken.Label'\n\nexport const FilterToken = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":";;;;;AAAA,SAASA,KAAK,QAAQ,qBAAqB;AAC3C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,gBAAgB,QAAQ,4BAA4B;AAO7D,SACEC,aAAa,EACbC,kBAAkB,EAClBC,wBAAwB,EACxBC,iBAAiB,EACjBC,WAAW,QACN,sBAAsB;AAG7B,IAAMC,MAAM,gBAAGR,KAAK,CAACS,UAAU,CAG7B,UAAAC,IAAA,EAAgCC,GAAG;EAAA,IAAAC,YAAA,GAAAF,IAAA,CAAhCG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAKE,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAAA,oBAC5BhB,KAAA,CAAAiB,aAAA,CAACX,iBAAiB,EAAAY,QAAA;IAACC,QAAQ,EAAEN,OAAQ;IAACF,GAAG,EAAEA;EAAI,GAAKG,KAAK,CAAG,CAAC;AAAA,CAC9D,CAAC;AAEF,IAAMM,MAAM,gBAAGpB,KAAK,CAACS,UAAU,CAC7B,UAAAY,KAAA,EAAmCV,GAAG,EAAK;EAAA,IAAxCW,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAKT,KAAK,GAAAC,wBAAA,CAAAM,KAAA,EAAAG,UAAA;EAC7B,IAAMC,IAAI,GAAGxB,cAAc,CAAC,CAAC;EAE7B,oBACED,KAAA,CAAAiB,aAAA,CAACZ,wBAAwB,EAAAa,QAAA;IACvBQ,SAAS,EAAEH,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAM;IAC7B,cAAYE,IAAI,CAACE,CAAC,CAAC,mBAAmB,CAAE;IACxCC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,QAAQ;IACblB,GAAG,EAAEA;EAAI,GACLG,KAAK,gBAETd,KAAA,CAAAiB,aAAA,CAACd,aAAa,qBACZH,KAAA,CAAAiB,aAAA,CAAClB,KAAK;IAAC,kBAAe;EAAM,CAAE,CAAC,EAC9BC,KAAK,CAAC8B,QAAQ,CAACC,GAAG,CAACT,QAAQ,EAAE,UAACU,KAAK;IAAA,oBAClChC,KAAA,CAAAiB,aAAA,CAACb,kBAAkB,QAAE4B,KAA0B,CAAC;EAAA,CACjD,CACY,CACS,CAAC;AAE/B,CACF,CAAC;AAED,IAAMC,KAAK,gBAAGjC,KAAK,CAACS,UAAU,CAC5B,UAACK,KAAK,EAAEH,GAAG;EAAA,oBAAKX,KAAA,CAAAiB,aAAA,CAACV,WAAW,EAAAW,QAAA;IAACP,GAAG,EAAEA;EAAI,GAAKG,KAAK,CAAG,CAAC;AAAA,CACtD,CAAC;AAEDN,MAAM,CAAC0B,WAAW,GAAG,aAAa;AAClCd,MAAM,CAACc,WAAW,GAAG,oBAAoB;AACzCD,KAAK,CAACC,WAAW,GAAG,mBAAmB;AAEvC,OAAO,IAAMC,WAAW,GAAGjC,gBAAgB,CACzC;EACE+B,KAAK,EAALA,KAAK;EACLb,MAAM,EAANA;AACF,CAAC,EACDZ,MACF,CAAC"}
+{"version":3,"file":"FilterToken.js","names":["Clear","React","useI18nContext","addSubcomponents","StyledContent","StyledContentLabel","StyledFilterRemoveButton","StyledFilterToken","StyledLabel","Parent","forwardRef","_ref","ref","_ref$focused","focused","props","_objectWithoutProperties","_excluded","createElement","_extends","$focused","Remove","_ref2","children","disabled","_excluded2","i18n","$disabled","t","tabIndex","type","Children","map","child","Label","displayName","FilterToken"],"sources":["../../src/FilterToken/FilterToken.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledContent,\n  StyledContentLabel,\n  StyledFilterRemoveButton,\n  StyledFilterToken,\n  StyledLabel,\n} from './FilterToken.styles'\nimport type { FilterTokenProps } from './FilterToken.types'\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & FilterTokenProps\n>(({ focused = false, ...props }, ref) => (\n  <StyledFilterToken $focused={focused} ref={ref} {...props} />\n))\n\nconst Remove = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ children, disabled, ...props }, ref) => {\n  const i18n = useI18nContext()\n\n  return (\n    <StyledFilterRemoveButton\n      $disabled={disabled ?? false}\n      aria-label={i18n.t('core.token.remove')}\n      tabIndex={0}\n      type=\"button\"\n      ref={ref}\n      {...props}\n    >\n      <StyledContent>\n        <Clear data-icon-prop=\"true\" />\n        {React.Children.map(children, (child) => (\n          <StyledContentLabel>{child}</StyledContentLabel>\n        ))}\n      </StyledContent>\n    </StyledFilterRemoveButton>\n  )\n})\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>((props, ref) => <StyledLabel ref={ref} {...props} />)\n\nParent.displayName = 'FilterToken'\nRemove.displayName = 'FilterToken.Remove'\nLabel.displayName = 'FilterToken.Label'\n\nexport const FilterToken = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":";;;;;AAAA,SAASA,KAAK,QAAQ,qBAAqB;AAC3C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SACEC,aAAa,EACbC,kBAAkB,EAClBC,wBAAwB,EACxBC,iBAAiB,EACjBC,WAAW,QACN,sBAAsB;AAG7B,IAAMC,MAAM,gBAAGR,KAAK,CAACS,UAAU,CAG7B,UAAAC,IAAA,EAAgCC,GAAG;EAAA,IAAAC,YAAA,GAAAF,IAAA,CAAhCG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAKE,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAAA,oBAC5BhB,KAAA,CAAAiB,aAAA,CAACX,iBAAiB,EAAAY,QAAA;IAACC,QAAQ,EAAEN,OAAQ;IAACF,GAAG,EAAEA;EAAI,GAAKG,KAAK,CAAG,CAAC;AAAA,CAC9D,CAAC;AAEF,IAAMM,MAAM,gBAAGpB,KAAK,CAACS,UAAU,CAG7B,UAAAY,KAAA,EAAmCV,GAAG,EAAK;EAAA,IAAxCW,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAKT,KAAK,GAAAC,wBAAA,CAAAM,KAAA,EAAAG,UAAA;EAC/B,IAAMC,IAAI,GAAGxB,cAAc,CAAC,CAAC;EAE7B,oBACED,KAAA,CAAAiB,aAAA,CAACZ,wBAAwB,EAAAa,QAAA;IACvBQ,SAAS,EAAEH,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAM;IAC7B,cAAYE,IAAI,CAACE,CAAC,CAAC,mBAAmB,CAAE;IACxCC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,QAAQ;IACblB,GAAG,EAAEA;EAAI,GACLG,KAAK,gBAETd,KAAA,CAAAiB,aAAA,CAACd,aAAa,qBACZH,KAAA,CAAAiB,aAAA,CAAClB,KAAK;IAAC,kBAAe;EAAM,CAAE,CAAC,EAC9BC,KAAK,CAAC8B,QAAQ,CAACC,GAAG,CAACT,QAAQ,EAAE,UAACU,KAAK;IAAA,oBAClChC,KAAA,CAAAiB,aAAA,CAACb,kBAAkB,QAAE4B,KAA0B,CAAC;EAAA,CACjD,CACY,CACS,CAAC;AAE/B,CAAC,CAAC;AAEF,IAAMC,KAAK,gBAAGjC,KAAK,CAACS,UAAU,CAG5B,UAACK,KAAK,EAAEH,GAAG;EAAA,oBAAKX,KAAA,CAAAiB,aAAA,CAACV,WAAW,EAAAW,QAAA;IAACP,GAAG,EAAEA;EAAI,GAAKG,KAAK,CAAG,CAAC;AAAA,EAAC;AAEvDN,MAAM,CAAC0B,WAAW,GAAG,aAAa;AAClCd,MAAM,CAACc,WAAW,GAAG,oBAAoB;AACzCD,KAAK,CAACC,WAAW,GAAG,mBAAmB;AAEvC,OAAO,IAAMC,WAAW,GAAGjC,gBAAgB,CACzC;EACE+B,KAAK,EAALA,KAAK;EACLb,MAAM,EAANA;AACF,CAAC,EACDZ,MACF,CAAC"}

package/dist/FilterToken/FilterToken.styles.js

@@ -6,11 +6,11 @@ import { getEllipsis, getFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_25_1__sc-1l1h29r-0"
+  componentId: "core-12_26_0__sc-1l1h29r-0"
 })(["", " ", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis, semiboldRules);
 export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFilterToken",
-  componentId: "core-12_25_1__sc-1l1h29r-1"
+  componentId: "core-12_26_0__sc-1l1h29r-1"
 })(["align-items:center;background-color:", ";border-radius:4px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:36px;justify-content:space-between;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", ""], colors.blue96, colors.blue45, spacing.sm, spacing.md, colors.blue90, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused;
@@ -18,17 +18,17 @@ export var StyledFilterToken = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFilterRemoveButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledFilterRemoveButton",
-  componentId: "core-12_25_1__sc-1l1h29r-2"
+  componentId: "core-12_26_0__sc-1l1h29r-2"
 })(["", " ", ";background:transparent;color:", ";&:active,&:focus,&:hover{background:", ";color:", ";}&:disabled{pointer-events:none;user-select:none;}&:disabled,&[aria-disabled='true']{background:transparent;color:", ";}height:24px;margin:0 0 0 6px;padding:0 ", "px;[data-icon-prop='true']{pointer-events:none;height:16px;width:16px;}"], function (_ref2) {
   var $disabled = _ref2.$disabled;
   return getButtonStyles(false, $disabled, false, 'sm', 'tertiary');
 }, getTypographyIntent('small'), colors.blue45, colors.white, colors.blue45, colors.blue45, spacing.xs);
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_25_1__sc-1l1h29r-3"
+  componentId: "core-12_26_0__sc-1l1h29r-3"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledContentLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContentLabel",
-  componentId: "core-12_25_1__sc-1l1h29r-4"
+  componentId: "core-12_26_0__sc-1l1h29r-4"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 //# sourceMappingURL=FilterToken.styles.js.map

package/dist/Flex/Flex.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { FlexProps } from './Flex.types';
 /**
  * `Flex` is a wrapper around `Box` defaulting to display flex CSS
  * and providing shorter prop names (e.g. `shrink` instead of `flexShrink`).
  * `Box` can mimic anything `Flex` can.
  */
-export declare const Flex: React.ForwardRefExoticComponent<DivAttributes & FlexProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Flex: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & FlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":["React","Box","Flex","forwardRef","_ref","ref","_ref$alignItems","alignItems","basis","_ref$direction","direction","gap","grow","flex","_ref$inline","inline","_ref$justifyContent","justifyContent","shrink","wrap","props","_objectWithoutProperties","_excluded","createElement","_extends","display","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","displayName"],"sources":["../../src/Flex/Flex.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../Box/Box'\nimport type { DivAttributes } from '../_utils/types'\nimport type { FlexProps } from './Flex.types'\n\n/**\n * `Flex` is a wrapper around `Box` defaulting to display flex CSS\n * and providing shorter prop names (e.g. `shrink` instead of `flexShrink`).\n * `Box` can mimic anything `Flex` can.\n */\nexport const Flex = React.forwardRef<HTMLDivElement, DivAttributes & FlexProps>(\n  function Flex(\n    {\n      alignItems = 'flex-start',\n      basis,\n      direction = 'row',\n      gap,\n      grow,\n      flex,\n      inline = false,\n      justifyContent = 'flex-start',\n      shrink,\n      wrap,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <Box\n        {...props}\n        ref={ref}\n        display={inline ? 'inline-flex' : 'flex'}\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        flexBasis={basis}\n        flexDirection={direction}\n        flexGrow={grow}\n        flexShrink={shrink}\n        flexWrap={wrap}\n        flex={flex}\n        gap={gap}\n      />\n    )\n  }\n)\n\nFlex.displayName = 'Flex'\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG,QAAQ,YAAY;AAIhC;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,gBAAGF,KAAK,CAACG,UAAU,CAClC,SAASD,IAAIA,CAAAE,IAAA,EAcXC,GAAG,EACH;EAAA,IAAAC,eAAA,GAAAF,IAAA,CAbEG,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,YAAY,GAAAA,eAAA;IACzBE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAAC,cAAA,GAAAL,IAAA,CACLM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IACjBE,GAAG,GAAAP,IAAA,CAAHO,GAAG;IACHC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IAAAC,WAAA,GAAAV,IAAA,CACJW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,mBAAA,GAAAZ,IAAA,CACda,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,YAAY,GAAAA,mBAAA;IAC7BE,MAAM,GAAAd,IAAA,CAANc,MAAM;IACNC,IAAI,GAAAf,IAAA,CAAJe,IAAI;IACDC,KAAK,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAIV,oBACEtB,KAAA,CAAAuB,aAAA,CAACtB,GAAG,EAAAuB,QAAA,KACEJ,KAAK;IACTf,GAAG,EAAEA,GAAI;IACToB,OAAO,EAAEV,MAAM,GAAG,aAAa,GAAG,MAAO;IACzCR,UAAU,EAAEA,UAAW;IACvBU,cAAc,EAAEA,cAAe;IAC/BS,SAAS,EAAElB,KAAM;IACjBmB,aAAa,EAAEjB,SAAU;IACzBkB,QAAQ,EAAEhB,IAAK;IACfiB,UAAU,EAAEX,MAAO;IACnBY,QAAQ,EAAEX,IAAK;IACfN,IAAI,EAAEA,IAAK;IACXF,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDT,IAAI,CAAC6B,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Flex.js","names":["React","Box","Flex","forwardRef","_ref","ref","_ref$alignItems","alignItems","basis","_ref$direction","direction","gap","grow","flex","_ref$inline","inline","_ref$justifyContent","justifyContent","shrink","wrap","props","_objectWithoutProperties","_excluded","createElement","_extends","display","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","displayName"],"sources":["../../src/Flex/Flex.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../Box/Box'\nimport type { FlexProps } from './Flex.types'\n\n/**\n * `Flex` is a wrapper around `Box` defaulting to display flex CSS\n * and providing shorter prop names (e.g. `shrink` instead of `flexShrink`).\n * `Box` can mimic anything `Flex` can.\n */\nexport const Flex = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & FlexProps\n>(function Flex(\n  {\n    alignItems = 'flex-start',\n    basis,\n    direction = 'row',\n    gap,\n    grow,\n    flex,\n    inline = false,\n    justifyContent = 'flex-start',\n    shrink,\n    wrap,\n    ...props\n  },\n  ref\n) {\n  return (\n    <Box\n      {...props}\n      ref={ref}\n      display={inline ? 'inline-flex' : 'flex'}\n      alignItems={alignItems}\n      justifyContent={justifyContent}\n      flexBasis={basis}\n      flexDirection={direction}\n      flexGrow={grow}\n      flexShrink={shrink}\n      flexWrap={wrap}\n      flex={flex}\n      gap={gap}\n    />\n  )\n})\n\nFlex.displayName = 'Flex'\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG,QAAQ,YAAY;AAGhC;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,gBAAGF,KAAK,CAACG,UAAU,CAGlC,SAASD,IAAIA,CAAAE,IAAA,EAcbC,GAAG,EACH;EAAA,IAAAC,eAAA,GAAAF,IAAA,CAbEG,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,YAAY,GAAAA,eAAA;IACzBE,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAAC,cAAA,GAAAL,IAAA,CACLM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IACjBE,GAAG,GAAAP,IAAA,CAAHO,GAAG;IACHC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IAAAC,WAAA,GAAAV,IAAA,CACJW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,mBAAA,GAAAZ,IAAA,CACda,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,YAAY,GAAAA,mBAAA;IAC7BE,MAAM,GAAAd,IAAA,CAANc,MAAM;IACNC,IAAI,GAAAf,IAAA,CAAJe,IAAI;IACDC,KAAK,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAIV,oBACEtB,KAAA,CAAAuB,aAAA,CAACtB,GAAG,EAAAuB,QAAA,KACEJ,KAAK;IACTf,GAAG,EAAEA,GAAI;IACToB,OAAO,EAAEV,MAAM,GAAG,aAAa,GAAG,MAAO;IACzCR,UAAU,EAAEA,UAAW;IACvBU,cAAc,EAAEA,cAAe;IAC/BS,SAAS,EAAElB,KAAM;IACjBmB,aAAa,EAAEjB,SAAU;IACzBkB,QAAQ,EAAEhB,IAAK;IACfiB,UAAU,EAAEX,MAAO;IACnBY,QAAQ,EAAEX,IAAK;IACfN,IAAI,EAAEA,IAAK;IACXF,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CAAC,CAAC;AAEFT,IAAI,CAAC6B,WAAW,GAAG,MAAM"}

package/dist/FlexList/FlexList.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { FlexListProps } from './FlexList.types';
 /**
  * `FlexList` combines `Flex` and `Box`, **each child element is wrapped in a `Box`**
  * having a margin (leading and trailing space removed). This isolates the
  * children React components from the `display: flex` on direct children in CSS.
  */
-export declare const FlexList: React.ForwardRefExoticComponent<DivAttributes & FlexListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FlexList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & FlexListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/FlexList/FlexList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexList.js","names":["React","Box","StyledFlex","getSingleSize","size","arguments","length","undefined","split","getItemMargin","direction","includes","concat","getMargin","space","margin","marginRight","marginBottom","FlexList","forwardRef","_ref","ref","boxProps","children","_ref$direction","_ref$size","props","_objectWithoutProperties","_excluded","singleSize","useMemo","createElement","_extends","$direction","Children","toArray","filter","child","map","i","key","displayName"],"sources":["../../src/FlexList/FlexList.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../Box/Box'\nimport type { FlexDirection, MarginSize } from '../Box/Box.types'\nimport type { DivAttributes } from '../_utils/types'\nimport { StyledFlex } from './FlexList.styles'\nimport type { FlexListProps } from './FlexList.types'\n\nfunction getSingleSize(size: string = ''): MarginSize {\n  return size.split(' ')[0] as MarginSize\n}\n\nfunction getItemMargin(direction: FlexDirection, size: MarginSize): string {\n  return direction.includes('row') ? `0 ${size}` : `${size} 0`\n}\n\nfunction getMargin(\n  direction: FlexDirection,\n  space?: MarginSize,\n  size: MarginSize = 'md'\n) {\n  if (space === undefined) {\n    return { margin: getItemMargin(direction, size) }\n  }\n\n  if (space && direction.includes('row')) {\n    return { marginRight: space }\n  }\n\n  if (space && direction.includes('column')) {\n    return { marginBottom: space }\n  }\n\n  return {}\n}\n\n/**\n * `FlexList` combines `Flex` and `Box`, **each child element is wrapped in a `Box`**\n * having a margin (leading and trailing space removed). This isolates the\n * children React components from the `display: flex` on direct children in CSS.\n */\nexport const FlexList = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & FlexListProps\n>(function FlexList(\n  { boxProps, children, direction = 'row', size = 'md', space, ...props },\n  ref\n) {\n  const singleSize = React.useMemo(() => getSingleSize(size), [size])\n\n  const margin = React.useMemo(\n    () => getMargin(direction, space, singleSize),\n    [direction, space, singleSize]\n  )\n\n  return (\n    <StyledFlex\n      {...props}\n      ref={ref}\n      direction={direction}\n      $direction={direction}\n    >\n      {React.Children.toArray(children)\n        .filter((child) => child)\n        .map(\n          (child: any, i) =>\n            child && (\n              <Box {...boxProps} {...margin} key={child.key || i}>\n                {child}\n              </Box>\n            )\n        )}\n    </StyledFlex>\n  )\n})\n\nFlexList.displayName = 'FlexList'\n"],"mappings":"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"}
+{"version":3,"file":"FlexList.js","names":["React","Box","StyledFlex","getSingleSize","size","arguments","length","undefined","split","getItemMargin","direction","includes","concat","getMargin","space","margin","marginRight","marginBottom","FlexList","forwardRef","_ref","ref","boxProps","children","_ref$direction","_ref$size","props","_objectWithoutProperties","_excluded","singleSize","useMemo","createElement","_extends","$direction","Children","toArray","filter","child","map","i","key","displayName"],"sources":["../../src/FlexList/FlexList.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../Box/Box'\nimport type { FlexDirection, MarginSize } from '../Box/Box.types'\nimport { StyledFlex } from './FlexList.styles'\nimport type { FlexListProps } from './FlexList.types'\n\nfunction getSingleSize(size: string = ''): MarginSize {\n  return size.split(' ')[0] as MarginSize\n}\n\nfunction getItemMargin(direction: FlexDirection, size: MarginSize): string {\n  return direction.includes('row') ? `0 ${size}` : `${size} 0`\n}\n\nfunction getMargin(\n  direction: FlexDirection,\n  space?: MarginSize,\n  size: MarginSize = 'md'\n) {\n  if (space === undefined) {\n    return { margin: getItemMargin(direction, size) }\n  }\n\n  if (space && direction.includes('row')) {\n    return { marginRight: space }\n  }\n\n  if (space && direction.includes('column')) {\n    return { marginBottom: space }\n  }\n\n  return {}\n}\n\n/**\n * `FlexList` combines `Flex` and `Box`, **each child element is wrapped in a `Box`**\n * having a margin (leading and trailing space removed). This isolates the\n * children React components from the `display: flex` on direct children in CSS.\n */\nexport const FlexList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & FlexListProps\n>(function FlexList(\n  { boxProps, children, direction = 'row', size = 'md', space, ...props },\n  ref\n) {\n  const singleSize = React.useMemo(() => getSingleSize(size), [size])\n\n  const margin = React.useMemo(\n    () => getMargin(direction, space, singleSize),\n    [direction, space, singleSize]\n  )\n\n  return (\n    <StyledFlex\n      {...props}\n      ref={ref}\n      direction={direction}\n      $direction={direction}\n    >\n      {React.Children.toArray(children)\n        .filter((child) => child)\n        .map(\n          (child: any, i) =>\n            child && (\n              <Box {...boxProps} {...margin} key={child.key || i}>\n                {child}\n              </Box>\n            )\n        )}\n    </StyledFlex>\n  )\n})\n\nFlexList.displayName = 'FlexList'\n"],"mappings":"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"}

package/dist/FlexList/FlexList.styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FlexDirection } from '../Box/Box.types';
-export declare const StyledFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("..").DivAttributes & import("..").FlexProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").FlexProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, {
     $direction?: FlexDirection | undefined;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").DivAttributes & import("..").FlexProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").FlexProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/FlexList/FlexList.styles.js

@@ -3,7 +3,7 @@ import { StyledBox } from '../Box/Box.styles';
 import { Flex } from '../Flex/Flex';
 export var StyledFlex = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledFlex",
-  componentId: "core-12_25_1__sc-1quvv61-0"
+  componentId: "core-12_26_0__sc-1quvv61-0"
 })(["> ", "{", "}"], StyledBox, function (_ref) {
   var $direction = _ref.$direction;
   if ($direction !== null && $direction !== void 0 && $direction.includes('reverse')) {

package/dist/Form/Form.d.ts

@@ -2,7 +2,7 @@ import type { Form as FormikForm, FormikContextType } from 'formik';
 import React from 'react';
 import type { InputProps } from '../Input';
 import type { PageFooterProps } from '../PageLayout/PageLayout.types';
-import type { DivAttributes, Props } from '../_utils/types';
+import type { Props } from '../_utils/types';
 import type { BaseFieldProps, ComponentWithFieldProp, FieldCheckboxComponentProps, FieldCheckboxesComponentProps, FieldCheckboxesValueType, FieldConfig, FieldCurrencyComponentProps, FieldDateComponentProps, FieldDateValueType, FieldGroupSelectComponentProps, FieldGroupSelectValueType, FieldMultiSelectComponentProps, FieldMultiSelectValueType, FieldNumberComponentProps, FieldPillSelectComponentProps, FieldRadioButtonsComponentProps, FieldRichTextComponentProps, FieldSelectComponentProps, FieldTextAreaComponentProps, FieldTextComponentProps, FieldTieredSelectComponentProps, FieldTieredSelectValueType, FormCheckboxesProps, FormCheckboxProps, FormContextAPI, FormCurrencyProps, FormDateProps, FormErrorBannerProps, FormFieldAPI, FormFieldProps, FormFieldValueComponentProps, FormGroupSelectProps, FormMultiSelectProps, FormNumberProps, FormPillSelectProps, FormProps, FormRadioButtonsProps, FormRichTextProps, FormSelectProps, FormTextAreaProps, FormTextProps, FormTieredSelectProps, GroupedOptionsConfig, OptionList, TraditionalBaseFieldProps, ViewFieldProps } from './Form.types';
 export declare const FormContext: React.Context<FormContextAPI>;
 export declare function useFormContext<Values = any>(): FormikContextType<Values> & FormContextAPI;
@@ -11,7 +11,7 @@ export declare function useField<Value = any>({ disabled: _disabled, error: _err
 declare function Form_<Values = any>({ initialValues, onSubmit: _onSubmit, disabled, enableConfirmNavigation, variant, validationSchema, view, ...props }: FormProps<Values>): React.JSX.Element;
 declare type FormFormProps = Omit<React.ComponentPropsWithoutRef<typeof FormikForm>, 'placeholder' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'>;
 export declare function FormForm({ children, className, onKeyDown, style, ...props }: FormFormProps): React.JSX.Element;
-export declare function FormErrorBanner({ item, i18nScope, ...rest }: FormErrorBannerProps & DivAttributes): React.JSX.Element | null;
+export declare function FormErrorBanner({ item, i18nScope, ...rest }: FormErrorBannerProps & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
 export declare function isFormFieldEmpty(val: any): boolean;
 export declare function WXPField<Value, ComponentProps extends FormFieldValueComponentProps<Value>>({ as: AsComponent, children, colStart, colWidth, disabled, description, error, label, name, required, tooltip, validate, view, inlineLabel: singleCheckboxInlineLabel, inlineDescription: singleCheckboxInlineDescription, ...props }: BaseFieldProps<Value, ComponentProps> & Pick<FormCheckboxProps, 'inlineLabel' | 'inlineDescription'> & {
     getId?: OptionList<Value>['getId'];

package/dist/Form/Form.js

@@ -18,7 +18,7 @@ var _excluded = ["initialValues", "onSubmit", "disabled", "enableConfirmNavigati
   _excluded16 = ["field", "onBlur", "onChange"],
   _excluded17 = ["field"],
   _excluded18 = ["onChange", "field"],
-  _excluded19 = ["field", "onBlur", "onChange", "onClick", "onContextMenu", "onCopy", "onCompositionEnd", "onCompositionStart", "onCompositionUpdate", "onCut", "onDrag", "onDragDrop", "onDragEnd", "onDragGesture", "onDragOver", "onDrop", "onFocus", "onInput", "onKeyDown", "onKeyPress", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp", "onPaste", "onReset", "onSubmit"],
+  _excluded19 = ["field"],
   _excluded20 = ["field", "getId", "getLabel", "isDisabledOption", "options"],
   _excluded21 = ["field", "getId", "getLabel", "options"],
   _excluded22 = ["field", "getId", "getLabel", "isDisabledOption", "isIndeterminateOption", "options"],
@@ -938,35 +938,6 @@ export var RichTextInput = /*#__PURE__*/React.forwardRef(function RichTextInput(
 });
 export var RichTextOutput = /*#__PURE__*/React.forwardRef(function RichTextOutput(_ref20, ref) {
   var field = _ref20.field,
-    onBlur = _ref20.onBlur,
-    onChange = _ref20.onChange,
-    onClick = _ref20.onClick,
-    onContextMenu = _ref20.onContextMenu,
-    onCopy = _ref20.onCopy,
-    onCompositionEnd = _ref20.onCompositionEnd,
-    onCompositionStart = _ref20.onCompositionStart,
-    onCompositionUpdate = _ref20.onCompositionUpdate,
-    onCut = _ref20.onCut,
-    onDrag = _ref20.onDrag,
-    onDragDrop = _ref20.onDragDrop,
-    onDragEnd = _ref20.onDragEnd,
-    onDragGesture = _ref20.onDragGesture,
-    onDragOver = _ref20.onDragOver,
-    onDrop = _ref20.onDrop,
-    onFocus = _ref20.onFocus,
-    onInput = _ref20.onInput,
-    onKeyDown = _ref20.onKeyDown,
-    onKeyPress = _ref20.onKeyPress,
-    onMouseDown = _ref20.onMouseDown,
-    onMouseEnter = _ref20.onMouseEnter,
-    onMouseLeave = _ref20.onMouseLeave,
-    onMouseMove = _ref20.onMouseMove,
-    onMouseOut = _ref20.onMouseOut,
-    onMouseOver = _ref20.onMouseOver,
-    onMouseUp = _ref20.onMouseUp,
-    onPaste = _ref20.onPaste,
-    onReset = _ref20.onReset,
-    onSubmit = _ref20.onSubmit,
     props = _objectWithoutProperties(_ref20, _excluded19);
   return /*#__PURE__*/React.createElement(TextEditorOutput, _extends({
     value: field.input.value,