@procore/core-react 12.37.0 → 12.39.0

package/dist/Form/Form.styles.d.ts

@@ -30,20 +30,6 @@ export declare const StyledFormFieldHeader: import("styled-components/dist/types
 export declare const StyledFormFieldRequiredMark: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Required").RequiredProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Required").RequiredProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const dataQaFieldTooltipIcon = "form-field-tooltip-icon";
-export declare const StyledFormFieldTooltipIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<{
-    size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
-} & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, Omit<{
-    size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
-} & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}>, {
-    'data-qa'?: string | undefined;
-}>, never>> & string & Omit<import("react").ForwardRefExoticComponent<{
-    size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
-} & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFormFieldErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
     size?: import("@procore/core-icons/dist/Icon").IconSize | undefined;
 } & import("react").SVGAttributes<SVGElement> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {

package/dist/Form/Form.styles.js

@@ -1,4 +1,4 @@
-import { Error, Help } from '@procore/core-icons/dist';
+import { Error } from '@procore/core-icons/dist';
 import styled, { css } from 'styled-components';
 import { checkboxSize } from '../Checkbox/Checkbox.styles';
 import { StyledFieldHeader } from '../Field';
@@ -6,7 +6,6 @@ import { Required } from '../Required';
 import { Label } from '../Semantic';
 import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
-import { getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 var columnGutter = '24px';
 var defaultLineHeight = '20px';
@@ -24,7 +23,7 @@ function applyStylesOnlyToIE11(styles) {
 }
 export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldMain",
-  componentId: "core-12_37_0__sc-ncj3pf-0"
+  componentId: "core-12_39_0__sc-ncj3pf-0"
 })(["-ms-grid-row:2;grid-row:2;", " ", " ", ""], function (_ref) {
   var $colStart = _ref.$colStart,
     $colEnd = _ref.$colEnd,
@@ -36,15 +35,15 @@ export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
 }, applyStylesOnlyToIE11("\n      padding-left: ".concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  ")));
 export var StyledLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_37_0__sc-ncj3pf-1"
+  componentId: "core-12_39_0__sc-ncj3pf-1"
 })(["word-wrap:break-word;word-break:break-word;"]);
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDescription",
-  componentId: "core-12_37_0__sc-ncj3pf-2"
+  componentId: "core-12_39_0__sc-ncj3pf-2"
 })(["", " color:", ";word-wrap:break-word;word-break:break-word;"], getTypographyIntent('body'), colors.gray45);
 export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescription).withConfig({
   displayName: "StyledCheckboxInlineDescription",
-  componentId: "core-12_37_0__sc-ncj3pf-3"
+  componentId: "core-12_39_0__sc-ncj3pf-3"
 })(["margin-top:", "px;", ""], spacing.xs, function (_ref3) {
   var $read = _ref3.$read;
   if (!$read) {
@@ -53,7 +52,7 @@ export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescripti
 });
 export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withConfig({
   displayName: "StyledFormFieldHeader",
-  componentId: "core-12_37_0__sc-ncj3pf-4"
+  componentId: "core-12_39_0__sc-ncj3pf-4"
 })(["-ms-grid-row:1;grid-row:1;align-self:end;margin-bottom:", "px;", " ", " * + ", "{margin-top:", "px;}"], spacing.xs, function (_ref4) {
   var $colStart = _ref4.$colStart,
     $colEnd = _ref4.$colEnd,
@@ -62,29 +61,20 @@ export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withCo
 }, applyStylesOnlyToIE11("\n    padding-left: ".concat(columnGutter, ";\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ").concat(StyledFormFieldMain, " {\n      padding-left: ").concat(columnGutter, ";\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  ")), StyledDescription, spacing.xs);
 export var StyledFormFieldRequiredMark = /*#__PURE__*/styled(Required).withConfig({
   displayName: "StyledFormFieldRequiredMark",
-  componentId: "core-12_37_0__sc-ncj3pf-5"
+  componentId: "core-12_39_0__sc-ncj3pf-5"
 })(["padding-left:", "px;vertical-align:top;"], spacing.xs);
-export var dataQaFieldTooltipIcon = 'form-field-tooltip-icon';
-export var StyledFormFieldTooltipIcon = /*#__PURE__*/styled(Help).attrs(function () {
-  return {
-    'data-qa': dataQaFieldTooltipIcon
-  };
-}).withConfig({
-  displayName: "StyledFormFieldTooltipIcon",
-  componentId: "core-12_37_0__sc-ncj3pf-6"
-})(["margin-left:", "px;color:", ";vertical-align:middle;&:focus-visible{border-radius:50%;", " outline-offset:0;}"], spacing.sm, colors.gray45, getGapOutlineFocus);
 export var StyledFormFieldErrorIcon = /*#__PURE__*/styled(Error).withConfig({
   displayName: "StyledFormFieldErrorIcon",
-  componentId: "core-12_37_0__sc-ncj3pf-7"
+  componentId: "core-12_39_0__sc-ncj3pf-6"
 })(["vertical-align:sub;"]);
 export var StyledFormFieldBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldBanner",
-  componentId: "core-12_37_0__sc-ncj3pf-8"
+  componentId: "core-12_39_0__sc-ncj3pf-7"
 })(["display:flex;align-items:flex-start;min-height:22px;margin-top:", "px;margin-bottom:2px;word-break:break-word;word-wrap:break-word;color:", ";", ""], spacing.xs, colors.red50, getTypographyIntent('body'));
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTraditionalFormColumn",
-  componentId: "core-12_37_0__sc-ncj3pf-9"
+  componentId: "core-12_39_0__sc-ncj3pf-8"
 })(["padding:", ";align-self:center;height:100%;&:nth-child(1){-ms-grid-column:1;}&:nth-child(2){-ms-grid-column:2;}&:nth-child(3){-ms-grid-column:3;}&:nth-child(4){-ms-grid-column:4;}", " ", ""], traditionalPadding, function (_ref5) {
   var _ref5$$fullWidth = _ref5.$fullWidth,
     $fullWidth = _ref5$$fullWidth === void 0 ? false : _ref5$$fullWidth;
@@ -96,15 +86,15 @@ export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFormOutputTextArea = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFormOutputTextArea",
-  componentId: "core-12_37_0__sc-ncj3pf-10"
+  componentId: "core-12_39_0__sc-ncj3pf-9"
 })(["white-space:pre-wrap;"]);
 export var StyledFormOutputFiledset = /*#__PURE__*/styled.fieldset.withConfig({
   displayName: "StyledFormOutputFiledset",
-  componentId: "core-12_37_0__sc-ncj3pf-11"
+  componentId: "core-12_39_0__sc-ncj3pf-10"
 })(["border:none;padding:0;margin-top:", "px;"], spacing.xs);
 export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormRow",
-  componentId: "core-12_37_0__sc-ncj3pf-12"
+  componentId: "core-12_39_0__sc-ncj3pf-11"
 })(["", ""], function (_ref7) {
   var _ref7$$traditional = _ref7.$traditional,
     $traditional = _ref7$$traditional === void 0 ? false : _ref7$$traditional,
@@ -115,6 +105,6 @@ export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
 export var formWrapper = /*#__PURE__*/css(["display:inherit;flex-direction:inherit;height:inherit;max-height:inherit;"]);
 export var StyledForm = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledForm",
-  componentId: "core-12_37_0__sc-ncj3pf-13"
+  componentId: "core-12_39_0__sc-ncj3pf-12"
 })(["", ""], formWrapper);
 //# sourceMappingURL=Form.styles.js.map

package/dist/Form/Form.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.styles.js","names":["Error","Help","styled","css","checkboxSize","StyledFieldHeader","Required","Label","getTypographyIntent","colors","getGapOutlineFocus","spacing","columnGutter","defaultLineHeight","textEditorOutputListPadding","traditionalBorder","traditionalBgGray","traditionalPadding","traditionalFontSize","traditionalLineHeight","getGridColumns","colStart","colEnd","colIeSpan","applyStylesOnlyToIE11","styles","StyledFormFieldMain","div","withConfig","displayName","componentId","_ref","$colStart","$colEnd","$colIeSpan","_ref2","$read","gray15","concat","StyledLabel","StyledDescription","gray45","StyledCheckboxInlineDescription","xs","_ref3","md","StyledFormFieldHeader","_ref4","StyledFormFieldRequiredMark","dataQaFieldTooltipIcon","StyledFormFieldTooltipIcon","attrs","sm","StyledFormFieldErrorIcon","StyledFormFieldBanner","red50","StyledTraditionalFormColumn","_ref5","_ref5$$fullWidth","$fullWidth","_ref6","_ref6$$output","$output","StyledFormOutputTextArea","span","StyledFormOutputFiledset","fieldset","StyledFormRow","_ref7","_ref7$$traditional","$traditional","_ref7$$read","white","formWrapper","StyledForm"],"sources":["../../src/Form/Form.styles.tsx"],"sourcesContent":["import { Error, Help } from '@procore/core-icons/dist'\nimport styled, { css } from 'styled-components'\nimport { checkboxSize } from '../Checkbox/Checkbox.styles'\nimport { StyledFieldHeader } from '../Field'\nimport { Required } from '../Required'\nimport { Label } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getGapOutlineFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nconst columnGutter = '24px'\nconst defaultLineHeight = '20px'\nconst textEditorOutputListPadding = '10px 0 10px 40px'\n\nconst traditionalBorder = 'rgb(216, 216, 216)'\nconst traditionalBgGray = 'rgb(242, 242, 242)'\nconst traditionalPadding = '10px'\nconst traditionalFontSize = '13px'\nconst traditionalLineHeight = '20px'\n\nfunction getGridColumns(colStart: number, colEnd: number, colIeSpan: number) {\n  return css`\n    -ms-grid-column: ${colStart};\n    grid-column-start: ${colStart};\n    grid-column-end: ${colEnd};\n    -ms-grid-column-span: ${colIeSpan};\n  `\n}\n\nfunction applyStylesOnlyToIE11(styles: string) {\n  return css`\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      ${styles}\n    }\n  `\n}\n\nexport const StyledFormFieldMain = styled.div<{\n  $read: boolean\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 2;\n  grid-row: 2;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  ${({ $read }) =>\n    $read &&\n    css`\n      word-wrap: break-word;\n      color: ${colors.gray15};\n      ${getTypographyIntent('body')};\n    `}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  `)}\n`\n\nexport const StyledLabel = styled(Label)`\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledDescription = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray45};\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledCheckboxInlineDescription = styled(StyledDescription)<{\n  $read: boolean\n}>`\n  margin-top: ${spacing.xs}px;\n  ${({ $read }) => {\n    if (!$read) {\n      return css`\n        padding-left: ${checkboxSize + spacing.md}px;\n      `\n    }\n  }}\n`\n\nexport const StyledFormFieldHeader = styled(StyledFieldHeader)<{\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 1;\n  grid-row: 1;\n  align-self: end;\n  margin-bottom: ${spacing.xs}px;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n    padding-left: ${columnGutter};\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ${StyledFormFieldMain} {\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  `)}\n\n  * + ${StyledDescription} {\n    margin-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledFormFieldRequiredMark = styled(Required)`\n  padding-left: ${spacing.xs}px;\n  vertical-align: top;\n`\n\nexport const dataQaFieldTooltipIcon = 'form-field-tooltip-icon'\n\nexport const StyledFormFieldTooltipIcon = styled(Help).attrs<{\n  'data-qa'?: string\n}>(() => ({\n  'data-qa': dataQaFieldTooltipIcon,\n}))`\n  margin-left: ${spacing.sm}px;\n  color: ${colors.gray45};\n  vertical-align: middle;\n\n  &:focus-visible {\n    border-radius: 50%;\n    ${getGapOutlineFocus}\n    // Icon does not touch viewBox borders. Already has 1px gap\n    outline-offset: 0;\n  }\n`\n\nexport const StyledFormFieldErrorIcon = styled(Error)`\n  vertical-align: sub;\n`\n\nexport const StyledFormFieldBanner = styled.div`\n  display: flex;\n  align-items: flex-start;\n  min-height: 22px;\n  margin-top: ${spacing.xs}px;\n  margin-bottom: 2px;\n  word-break: break-word;\n  word-wrap: break-word;\n  color: ${colors.red50};\n\n  ${getTypographyIntent('body')}\n`\n/** @deprecated The traditional field layout is deprecated */\nexport const StyledTraditionalFormColumn = styled.div<{\n  $fullWidth?: boolean\n  $output?: boolean\n}>`\n  padding: ${traditionalPadding};\n  align-self: center;\n  height: 100%;\n\n  &:nth-child(1) {\n    -ms-grid-column: 1;\n  }\n  &:nth-child(2) {\n    -ms-grid-column: 2;\n  }\n  &:nth-child(3) {\n    -ms-grid-column: 3;\n  }\n  &:nth-child(4) {\n    -ms-grid-column: 4;\n  }\n\n  ${({ $fullWidth = false }) =>\n    $fullWidth &&\n    css`\n      grid-column: 2 / 5;\n      -ms-grid-column-span: 3;\n    `}\n\n  ${({ $output = false }) =>\n    $output &&\n    css`\n      font-weight: bold;\n      font-size: ${traditionalFontSize};\n      line-height: ${traditionalLineHeight};\n      word-wrap: break-word;\n    `}\n`\n\nexport const StyledFormOutputTextArea = styled.span`\n  white-space: pre-wrap;\n`\n\nexport const StyledFormOutputFiledset = styled.fieldset`\n  border: none;\n  padding: 0;\n  margin-top: ${spacing.xs}px;\n`\nexport const StyledFormRow = styled.div<{\n  /** @deprecated The traditional field layout is deprecated */\n  $traditional?: boolean\n  $read?: boolean\n}>`\n  ${({ $traditional = false, $read = false }) =>\n    $traditional\n      ? css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: 20% 30% 20% 30%;\n          grid-template-columns: 20% 30% 20% 30%;\n          -ms-grid-rows: auto;\n          grid-template-rows: auto;\n          border-top: 1px solid ${traditionalBorder};\n          background-color: ${colors.white};\n\n          &:last-of-type {\n            border-bottom: 1px solid ${traditionalBorder};\n          }\n\n          ${$read &&\n          `\n            &:nth-child(2n + 1) {\n              background-color: ${traditionalBgGray};\n            }\n            \n            & > ${StyledTraditionalFormColumn}:nth-child(2) {\n              border-right: 1px solid ${traditionalBorder};\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          `}\n        `\n      : css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr);\n          grid-template-columns: repeat(12, minmax(0, 1fr));\n          -ms-grid-rows: minmax(${defaultLineHeight}, max-content)\n            minmax(${defaultLineHeight}, max-content);\n          grid-template-rows: minmax(${defaultLineHeight}, auto) minmax(\n              ${defaultLineHeight},\n              auto\n            );\n          justify-content: space-between;\n          grid-column-gap: ${columnGutter};\n        `}\n`\n\nexport const formWrapper = css`\n  display: inherit;\n  flex-direction: inherit;\n  height: inherit;\n  max-height: inherit;\n`\n\nexport const StyledForm = styled.div`\n  ${formWrapper}\n`\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,IAAI,QAAQ,0BAA0B;AACtD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,QAAQ,mBAAmB;AACtD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,YAAY,GAAG,MAAM;AAC3B,IAAMC,iBAAiB,GAAG,MAAM;AAChC,IAAMC,2BAA2B,GAAG,kBAAkB;AAEtD,IAAMC,iBAAiB,GAAG,oBAAoB;AAC9C,IAAMC,iBAAiB,GAAG,oBAAoB;AAC9C,IAAMC,kBAAkB,GAAG,MAAM;AACjC,IAAMC,mBAAmB,GAAG,MAAM;AAClC,IAAMC,qBAAqB,GAAG,MAAM;AAEpC,SAASC,cAAcA,CAACC,QAAgB,EAAEC,MAAc,EAAEC,SAAiB,EAAE;EAC3E,OAAOpB,GAAG,kGACWkB,QAAQ,EACNA,QAAQ,EACVC,MAAM,EACDC,SAAS;AAErC;AAEA,SAASC,qBAAqBA,CAACC,MAAc,EAAE;EAC7C,OAAOtB,GAAG,kFAEJsB,MAAM;AAGd;AAEA,OAAO,IAAMC,mBAAmB,gBAAGxB,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iDASzC,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;EAAA,OACjCd,cAAc,CAACY,SAAS,EAAEC,OAAO,EAAEC,UAAU,CAAC;AAAA,GAE9C,UAAAC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACLjC,GAAG,4CAEQM,MAAM,CAAC4B,MAAM,EACpB7B,mBAAmB,CAAC,MAAM,CAAC,CAC9B;AAAA,GAKDgB,qBAAqB,0BAAAc,MAAA,CACH1B,YAAY,uEAK/B,CAAC,CACH;AAED,OAAO,IAAM2B,WAAW,gBAAGrC,MAAM,CAACK,KAAK,CAAC,CAAAqB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAGvC;AAED,OAAO,IAAMU,iBAAiB,gBAAGtC,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oEACvCtB,mBAAmB,CAAC,MAAM,CAAC,EACpBC,MAAM,CAACgC,MAAM,CAGvB;AAED,OAAO,IAAMC,+BAA+B,gBAAGxC,MAAM,CAACsC,iBAAiB,CAAC,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGxDnB,OAAO,CAACgC,EAAE,EACtB,UAAAC,KAAA,EAAe;EAAA,IAAZR,KAAK,GAAAQ,KAAA,CAALR,KAAK;EACR,IAAI,CAACA,KAAK,EAAE;IACV,OAAOjC,GAAG,2BACQC,YAAY,GAAGO,OAAO,CAACkC,EAAE;EAE7C;AACF,CAAC,CACF;AAED,OAAO,IAAMC,qBAAqB,gBAAG5C,MAAM,CAACG,iBAAiB,CAAC,CAAAuB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6GAQ3CnB,OAAO,CAACgC,EAAE,EAEzB,UAAAI,KAAA;EAAA,IAAGf,SAAS,GAAAe,KAAA,CAATf,SAAS;IAAEC,OAAO,GAAAc,KAAA,CAAPd,OAAO;IAAEC,UAAU,GAAAa,KAAA,CAAVb,UAAU;EAAA,OACjCd,cAAc,CAACY,SAAS,EAAEC,OAAO,EAAEC,UAAU,CAAC;AAAA,GAK9CV,qBAAqB,wBAAAc,MAAA,CACL1B,YAAY,qEAAA0B,MAAA,CAM1BZ,mBAAmB,8BAAAY,MAAA,CACH1B,YAAY,8EAM/B,CAAC,EAEI4B,iBAAiB,EACP7B,OAAO,CAACgC,EAAE,CAE3B;AAED,OAAO,IAAMK,2BAA2B,gBAAG9C,MAAM,CAACI,QAAQ,CAAC,CAAAsB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDACzCnB,OAAO,CAACgC,EAAE,CAE3B;AAED,OAAO,IAAMM,sBAAsB,GAAG,yBAAyB;AAE/D,OAAO,IAAMC,0BAA0B,gBAAGhD,MAAM,CAACD,IAAI,CAAC,CAACkD,KAAK,CAEzD;EAAA,OAAO;IACR,SAAS,EAAEF;EACb,CAAC;AAAA,CAAC,CAAC,CAAArB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sHACcnB,OAAO,CAACyC,EAAE,EAChB3C,MAAM,CAACgC,MAAM,EAKlB/B,kBAAkB,CAIvB;AAED,OAAO,IAAM2C,wBAAwB,gBAAGnD,MAAM,CAACF,KAAK,CAAC,CAAA4B,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEpD;AAED,OAAO,IAAMwB,qBAAqB,gBAAGpD,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2JAI/BnB,OAAO,CAACgC,EAAE,EAIflC,MAAM,CAAC8C,KAAK,EAEnB/C,mBAAmB,CAAC,MAAM,CAAC,CAC9B;AACD;AACA,OAAO,IAAMgD,2BAA2B,gBAAGtD,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qMAIxCb,kBAAkB,EAiB3B,UAAAwC,KAAA;EAAA,IAAAC,gBAAA,GAAAD,KAAA,CAAGE,UAAU;IAAVA,UAAU,GAAAD,gBAAA,cAAG,KAAK,GAAAA,gBAAA;EAAA,OACrBC,UAAU,IACVxD,GAAG,+CAGF;AAAA,GAED,UAAAyD,KAAA;EAAA,IAAAC,aAAA,GAAAD,KAAA,CAAGE,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;EAAA,OAClBC,OAAO,IACP3D,GAAG,6EAEYe,mBAAmB,EACjBC,qBAAqB,CAErC;AAAA,EACJ;AAED,OAAO,IAAM4C,wBAAwB,gBAAG7D,MAAM,CAAC8D,IAAI,CAAApC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6BAElD;AAED,OAAO,IAAMmC,wBAAwB,gBAAG/D,MAAM,CAACgE,QAAQ,CAAAtC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iDAGvCnB,OAAO,CAACgC,EAAE,CACzB;AACD,OAAO,IAAMwB,aAAa,gBAAGjE,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAKnC,UAAAsC,KAAA;EAAA,IAAAC,kBAAA,GAAAD,KAAA,CAAGE,YAAY;IAAZA,YAAY,GAAAD,kBAAA,cAAG,KAAK,GAAAA,kBAAA;IAAAE,WAAA,GAAAH,KAAA,CAAEhC,KAAK;IAALA,KAAK,GAAAmC,WAAA,cAAG,KAAK,GAAAA,WAAA;EAAA,OACtCD,YAAY,GACRnE,GAAG,wPAOuBY,iBAAiB,EACrBN,MAAM,CAAC+D,KAAK,EAGHzD,iBAAiB,EAG5CqB,KAAK,4EAAAE,MAAA,CAGiBtB,iBAAiB,sDAAAsB,MAAA,CAGjCkB,2BAA2B,6DAAAlB,MAAA,CACLvB,iBAAiB,6HAM9C,IAEHZ,GAAG,ybAQuBU,iBAAiB,EAC9BA,iBAAiB,EACCA,iBAAiB,EACxCA,iBAAiB,EAIJD,YAAY,CAChC;AAAA,EACR;AAED,OAAO,IAAM6D,WAAW,gBAAGtE,GAAG,+EAK7B;AAED,OAAO,IAAMuE,UAAU,gBAAGxE,MAAM,CAACyB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAChC2C,WAAW,CACd"}
+{"version":3,"file":"Form.styles.js","names":["Error","styled","css","checkboxSize","StyledFieldHeader","Required","Label","getTypographyIntent","colors","spacing","columnGutter","defaultLineHeight","textEditorOutputListPadding","traditionalBorder","traditionalBgGray","traditionalPadding","traditionalFontSize","traditionalLineHeight","getGridColumns","colStart","colEnd","colIeSpan","applyStylesOnlyToIE11","styles","StyledFormFieldMain","div","withConfig","displayName","componentId","_ref","$colStart","$colEnd","$colIeSpan","_ref2","$read","gray15","concat","StyledLabel","StyledDescription","gray45","StyledCheckboxInlineDescription","xs","_ref3","md","StyledFormFieldHeader","_ref4","StyledFormFieldRequiredMark","StyledFormFieldErrorIcon","StyledFormFieldBanner","red50","StyledTraditionalFormColumn","_ref5","_ref5$$fullWidth","$fullWidth","_ref6","_ref6$$output","$output","StyledFormOutputTextArea","span","StyledFormOutputFiledset","fieldset","StyledFormRow","_ref7","_ref7$$traditional","$traditional","_ref7$$read","white","formWrapper","StyledForm"],"sources":["../../src/Form/Form.styles.tsx"],"sourcesContent":["import { Error } from '@procore/core-icons/dist'\nimport styled, { css } from 'styled-components'\nimport { checkboxSize } from '../Checkbox/Checkbox.styles'\nimport { StyledFieldHeader } from '../Field'\nimport { Required } from '../Required'\nimport { Label } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst columnGutter = '24px'\nconst defaultLineHeight = '20px'\nconst textEditorOutputListPadding = '10px 0 10px 40px'\n\nconst traditionalBorder = 'rgb(216, 216, 216)'\nconst traditionalBgGray = 'rgb(242, 242, 242)'\nconst traditionalPadding = '10px'\nconst traditionalFontSize = '13px'\nconst traditionalLineHeight = '20px'\n\nfunction getGridColumns(colStart: number, colEnd: number, colIeSpan: number) {\n  return css`\n    -ms-grid-column: ${colStart};\n    grid-column-start: ${colStart};\n    grid-column-end: ${colEnd};\n    -ms-grid-column-span: ${colIeSpan};\n  `\n}\n\nfunction applyStylesOnlyToIE11(styles: string) {\n  return css`\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      ${styles}\n    }\n  `\n}\n\nexport const StyledFormFieldMain = styled.div<{\n  $read: boolean\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 2;\n  grid-row: 2;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  ${({ $read }) =>\n    $read &&\n    css`\n      word-wrap: break-word;\n      color: ${colors.gray15};\n      ${getTypographyIntent('body')};\n    `}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n  `)}\n`\n\nexport const StyledLabel = styled(Label)`\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledDescription = styled.div`\n  ${getTypographyIntent('body')}\n  color: ${colors.gray45};\n  word-wrap: break-word;\n  word-break: break-word;\n`\n\nexport const StyledCheckboxInlineDescription = styled(StyledDescription)<{\n  $read: boolean\n}>`\n  margin-top: ${spacing.xs}px;\n  ${({ $read }) => {\n    if (!$read) {\n      return css`\n        padding-left: ${checkboxSize + spacing.md}px;\n      `\n    }\n  }}\n`\n\nexport const StyledFormFieldHeader = styled(StyledFieldHeader)<{\n  $colStart: number\n  $colEnd: number\n  $colIeSpan: number\n}>`\n  -ms-grid-row: 1;\n  grid-row: 1;\n  align-self: end;\n  margin-bottom: ${spacing.xs}px;\n\n  ${({ $colStart, $colEnd, $colIeSpan }) =>\n    getGridColumns($colStart, $colEnd, $colIeSpan)}\n\n  // IE11 support grid-column-gap\n  // bug: if a field's first column isn't at 1,\n  // the field will fill the padding and be wider\n  ${applyStylesOnlyToIE11(`\n    padding-left: ${columnGutter};\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    ${StyledFormFieldMain} {\n      padding-left: ${columnGutter};\n\n      &:nth-child(2) {\n        padding-left: 0;\n      }\n    }\n  `)}\n\n  * + ${StyledDescription} {\n    margin-top: ${spacing.xs}px;\n  }\n`\n\nexport const StyledFormFieldRequiredMark = styled(Required)`\n  padding-left: ${spacing.xs}px;\n  vertical-align: top;\n`\n\nexport const StyledFormFieldErrorIcon = styled(Error)`\n  vertical-align: sub;\n`\n\nexport const StyledFormFieldBanner = styled.div`\n  display: flex;\n  align-items: flex-start;\n  min-height: 22px;\n  margin-top: ${spacing.xs}px;\n  margin-bottom: 2px;\n  word-break: break-word;\n  word-wrap: break-word;\n  color: ${colors.red50};\n\n  ${getTypographyIntent('body')}\n`\n/** @deprecated The traditional field layout is deprecated */\nexport const StyledTraditionalFormColumn = styled.div<{\n  $fullWidth?: boolean\n  $output?: boolean\n}>`\n  padding: ${traditionalPadding};\n  align-self: center;\n  height: 100%;\n\n  &:nth-child(1) {\n    -ms-grid-column: 1;\n  }\n  &:nth-child(2) {\n    -ms-grid-column: 2;\n  }\n  &:nth-child(3) {\n    -ms-grid-column: 3;\n  }\n  &:nth-child(4) {\n    -ms-grid-column: 4;\n  }\n\n  ${({ $fullWidth = false }) =>\n    $fullWidth &&\n    css`\n      grid-column: 2 / 5;\n      -ms-grid-column-span: 3;\n    `}\n\n  ${({ $output = false }) =>\n    $output &&\n    css`\n      font-weight: bold;\n      font-size: ${traditionalFontSize};\n      line-height: ${traditionalLineHeight};\n      word-wrap: break-word;\n    `}\n`\n\nexport const StyledFormOutputTextArea = styled.span`\n  white-space: pre-wrap;\n`\n\nexport const StyledFormOutputFiledset = styled.fieldset`\n  border: none;\n  padding: 0;\n  margin-top: ${spacing.xs}px;\n`\nexport const StyledFormRow = styled.div<{\n  /** @deprecated The traditional field layout is deprecated */\n  $traditional?: boolean\n  $read?: boolean\n}>`\n  ${({ $traditional = false, $read = false }) =>\n    $traditional\n      ? css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: 20% 30% 20% 30%;\n          grid-template-columns: 20% 30% 20% 30%;\n          -ms-grid-rows: auto;\n          grid-template-rows: auto;\n          border-top: 1px solid ${traditionalBorder};\n          background-color: ${colors.white};\n\n          &:last-of-type {\n            border-bottom: 1px solid ${traditionalBorder};\n          }\n\n          ${$read &&\n          `\n            &:nth-child(2n + 1) {\n              background-color: ${traditionalBgGray};\n            }\n            \n            & > ${StyledTraditionalFormColumn}:nth-child(2) {\n              border-right: 1px solid ${traditionalBorder};\n      \n              &:last-child {\n                border-right: none;\n              }\n            }\n          `}\n        `\n      : css`\n          display: -ms-grid;\n          display: grid;\n          -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)\n            minmax(0, 1fr);\n          grid-template-columns: repeat(12, minmax(0, 1fr));\n          -ms-grid-rows: minmax(${defaultLineHeight}, max-content)\n            minmax(${defaultLineHeight}, max-content);\n          grid-template-rows: minmax(${defaultLineHeight}, auto) minmax(\n              ${defaultLineHeight},\n              auto\n            );\n          justify-content: space-between;\n          grid-column-gap: ${columnGutter};\n        `}\n`\n\nexport const formWrapper = css`\n  display: inherit;\n  flex-direction: inherit;\n  height: inherit;\n  max-height: inherit;\n`\n\nexport const StyledForm = styled.div`\n  ${formWrapper}\n`\n"],"mappings":"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"}

package/dist/Form/Form.types.d.ts

@@ -473,6 +473,10 @@ export declare type FieldSelectOptionItem = FieldSelectValueType;
 export declare type FieldSelectGroupItem = any;
 export declare type FieldSelectGroupHeader = FieldSelectGroupItem & {
     isGroupHeader: boolean;
+    /**
+     * @since 12.39.0
+     */
+    options: FieldSelectOptionItem[];
 };
 export interface GroupedOptionsConfig<OptionItem, GroupItem> extends OptionList<OptionItem> {
     /**
@@ -537,8 +541,24 @@ export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionI
      * Callback for rendering header for each entry in `optgroups`
      * `(group: GroupItem) => React.ReactNode`
      * @since 10.19.0
+     * @deprecated The `groupHeaderRenderer` prop is deprecated and will be removed in a future version. Use `groupRenderer` instead to customize the entire group rendering, including the header.
+     * @deprecatedSince 12.39.0
+     */
+    groupHeaderRenderer?: (group: GroupItem, params: {
+        getId: OptionList<GroupItem>['getId'];
+        getLabel: OptionList<GroupItem>['getLabel'];
+        children?: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Callback for rendering group wrapper for each entry in `optgroups`
+     * `(group: GroupItem) => React.ReactNode`
+     * @since 12.39.0
      */
-    groupHeaderRenderer?: (group: GroupItem) => React.ReactNode;
+    groupRenderer?: (group: GroupItem, params: {
+        getId: OptionList<GroupItem>['getId'];
+        getLabel: OptionList<GroupItem>['getLabel'];
+        children?: React.ReactNode;
+    }) => React.ReactNode;
     /**
      * If nothing is selected, suggest this option. From `Select.Option suggested`.
      * `(option: OptionItem) => boolean`
@@ -577,7 +597,7 @@ export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionI
      */
     searchComparator?: (query: string, value: string) => boolean;
 }
-export interface FormSelectProps<Value = FieldSelectValueType, OptionItem = FieldSelectOptionItem, GroupItem = FieldSelectGroupItem> extends FormFieldProps<Value>, Partial<OptionList<OptionItem>>, Pick<FieldSelectComponentProps<Value, OptionItem, GroupItem>, 'getGroup' | 'groupGetId' | 'groupGetLabel' | 'groupHeaderRenderer' | 'isSuggestedOption' | 'onBlur' | 'onClear' | 'optgroups' | 'onSearch' | 'optionRenderer' | 'searchComparator'>, Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children' | 'label'> {
+export interface FormSelectProps<Value = FieldSelectValueType, OptionItem = FieldSelectOptionItem, GroupItem = FieldSelectGroupItem> extends FormFieldProps<Value>, Partial<OptionList<OptionItem>>, Pick<FieldSelectComponentProps<Value, OptionItem, GroupItem>, 'getGroup' | 'groupGetId' | 'groupGetLabel' | 'groupHeaderRenderer' | 'groupRenderer' | 'isSuggestedOption' | 'onBlur' | 'onClear' | 'optgroups' | 'onSearch' | 'optionRenderer' | 'searchComparator'>, Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children' | 'label'> {
 }
 export declare type FieldPillSelectValueType = any;
 interface PillSelectCommon extends Omit<PillSelectProps, 'children' | 'onClear' | 'error' | 'value'> {

package/dist/Form/Form.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.types.js","names":[],"sources":["../../src/Form/Form.types.ts"],"sourcesContent":["import type {\n  FieldHelperProps,\n  FieldInputProps,\n  FieldMetaProps as FormikFieldMetaProps,\n  FieldValidator,\n  FormikConfig,\n} from 'formik'\nimport type React from 'react'\nimport type { CheckboxProps } from '../Checkbox/Checkbox.types'\nimport type { DateSelectProps } from '../DateSelect'\nimport type { GroupSelectProps } from '../GroupSelect/GroupSelect.types'\nimport type { InputProps } from '../Input/Input.types'\nimport type { MultiSelectProps } from '../MultiSelect/MultiSelect.types'\nimport type {\n  CurrencyInputProps,\n  InputValue as BaseNumberInputValueType,\n  Locale,\n  NumberInputProps,\n} from '../NumberInput/NumberInput.types'\nimport type { PillSelectProps } from '../PillSelect/PillSelect.types'\nimport type {\n  SelectButtonProps,\n  SelectOptionProps,\n  SelectProps,\n} from '../Select/Select.types'\nimport type { TextAreaProps } from '../TextArea/TextArea.types'\nimport type { TextEditorProps } from '../TextEditor'\nimport type { TieredSelectProps } from '../TieredSelect/TieredSelect.types'\nimport type { TooltipProps } from '../Tooltip/Tooltip.types'\nimport type { Props } from '../_utils/types'\n\nexport type ValueInArray<V> = V[keyof V]\nexport type View = 'create' | 'read' | 'update'\nexport type Layout = 'wxp' | 'traditional'\n\nexport interface FormContextAPI {\n  /**\n   * @since 10.19.0\n   */\n  different: boolean\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  enableReinitialize?: boolean\n  /**\n   * @since 10.19.0\n   */\n  setFieldDifferent: (key: string, different: boolean) => void\n\n  /**\n   * A [Yup](https://github.com/jquense/yup) object schema to\n   * validate all values.\n   * ```\n   *  {`Yup.object().shape({\n   *    input_name: Yup.mixed().required()\n   *  })`}\n   * ```\n   * This is a great way to get error messages into the component. In\n   * addition, if using Yup for required, those fields will automatically\n   * get the required asterisk and highlight error.\n   * @since 10.19.0\n   */\n  validationSchema?: FormikConfig<unknown>['validationSchema']\n\n  /**\n   * Toggle between modern and traditional form styles. Leave blank for the\n   * modern label-above layout.\n   * @since 10.19.0\n   * @deprecated The `traditional` field layout variant is deprecated and `variant` property will be removed\n   *  in a future version. Use the default field layout (`wxp`) instead.\n   *\n   *  Note that in the default field layout, you need to explicitly specify the `colStart` property:\n   *\n   *  BEFORE\n   *\n   *  ```\n   *  <Form.Row>\n   *    <Form.Text />\n   *    <Form.Number />\n   *  </Form.Row>\n   *  ```\n   *\n   *  AFTER\n   *\n   *  ```\n   *  <Form.Row>\n   *    <Form.Text colStart={1} />\n   *    <Form.Number colStart={7} />\n   *  </Form.Row>\n   *  ```\n   *\n   *  We plan to remove this limitation in a future release.\n   *\n   * @deprecatedSince 12.18.0\n   */\n  variant: Layout\n\n  /**\n   * Determines show or edit state of form.\n   * @default 'create'\n   * @since 10.19.0\n   */\n  view: View\n}\n\ninterface FieldMetaProps<Value>\n  extends Omit<FormikFieldMetaProps<Value>, 'error'> {\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  required: boolean\n  /**\n   * @since 10.19.0\n   */\n  view: View\n}\n\nexport interface FieldConfig {\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @since 10.19.0\n   */\n  getId?: (item: any) => string | number\n  /**\n   * @since 10.19.0\n   */\n  name: string\n  /**\n   * @since 10.19.0\n   */\n  required?: boolean\n  /**\n   * @since 10.19.0\n   */\n  validate?: FieldValidator\n  /**\n   * @since 10.19.0\n   */\n  view?: View\n}\n\nexport interface FormFieldAPI<Value> {\n  /**\n   * @since 10.19.0\n   */\n  input: FieldInputProps<Value>\n  /**\n   * @since 10.19.0\n   */\n  helpers: {\n    setValue: (\n      value: Value,\n      shouldValidate?: boolean,\n      shouldMarkDifferent?: boolean\n    ) => void\n    setTouched: FieldHelperProps<Value>['setTouched']\n    setError: FieldHelperProps<Value>['setError']\n  }\n\n  /**\n   * @since 10.19.0\n   */\n  messages: {\n    error?: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  meta: FieldMetaProps<Value>\n}\n\nexport interface FormProps<Values> extends Partial<FormikConfig<Values>> {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode | (() => React.ReactNode)\n\n  /**\n   * Enable a browser confirmation about losing of unsaved data when the\n   * form values are visually different from the initial values. Uses\n   * `window.onbeforeunload` and `window.confirm` for dialogs(Modal, Tearsheet).\n   * **Requires `onSubmit` to return a promise to remove onbeforeunload.**\n   * @a11y To prevent accidental data loss, it is recommended to enable.\n   * @default false\n   */\n  enableConfirmNavigation?: boolean\n\n  /**\n   * Disable all fields at once.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Submit the form. A promise is required to notify `Form` to make state changes like toggling `isSubmitting` and resetting `enableConfirmNavigation` (removing `window.onbeforeunload`) in the component.\n\n  - Recommended: `onSubmit` returns a promise, it will wait for `onSuccess`.\n  - Ok: `onSubmit` function is `async` and it returns undefined, it will always be considered a success.\n  - Caution: `onSubmit` function is synchronous and it returns undefined, it will never reset certain states.\n\n  A `button type='submit'` inside the `Form.Form` component (`form` tag) will trigger submission. If any validations fail, the submission will not continue.\n\n  @example\n    function(values, actions) {\n      return new Promise(\n        async function(onSuccess, onError) {\n          const success = await _network(values)\n\n          if (success) {\n            return onSuccess('Successful Server Response')\n          } else {\n            actions.setFieldError('text', 'Example Error Message')\n            return onError('Failed Server Response')\n          }\n        }\n      )\n    }\n\n   */\n  // TODO breaking change found v11 24-5-13\n  // Our Partial<> usage above allows optional onSubmit,\n  // even though Formik requires onSubmit. Keep ? for backwards compat.\n  onSubmit?: FormikConfig<Values>['onSubmit']\n\n  /**\n   * Toggle between modern and traditional form styles. Leave blank for the modern label-above layout.\n   * @deprecated The `traditional` field layout variant is deprecated and `variant` property will be removed\n   *  in a future version. Use the default field layout (`wxp`) instead.\n   * @deprecatedSince 12.18.0\n   */\n  variant?: Layout\n\n  /**\n   * Determines show or edit state of form.\n   * @default 'create'\n   */\n  view?: View\n}\n\nexport type FormFieldValueComponentProps<Value = any> = {\n  field: FormFieldAPI<Value>\n}\n\nexport type ComponentWithFieldProp<\n  Value,\n  Props extends FormFieldValueComponentProps<Value>\n> =\n  | React.FunctionComponent<Props>\n  | React.ForwardRefExoticComponent<Props>\n  | ((p: Props) => React.ReactNode)\n\nexport interface BaseFieldProps<\n  Value,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> {\n  /**\n   * Customize the input component, either a single component for all views\n   * or an object with the keys of the views to render on that particular\n   * view. This input component will receive the `field` prop.\n   * If using TypeScript, these components will need to extend a specific\n   * type from Core React, read more about the [props per view](#typescript-ans-as-prop-components)\n   *\n   * One of:\n   *\n   * `ReactComponent` or\n   * `\n   * {\n   *    '{ read: ReactComponent, create: ReactComponent, update: ReactComponent }'\n   * }\n   * `\n   * @since 10.19.0\n   */\n  as?:\n    | ComponentWithFieldProp<Value, ComponentProps>\n    | { [V in View]: ComponentWithFieldProp<Value, ComponentProps> }\n\n  /**\n   * A subcomponent to render on a particular view.\n   *\n   * One or all of:\n   *\n   * `Form.X.Create, Form.X.Read, Form.X.Update`\n   * @since 10.19.0\n   */\n  children?: ((field: FormFieldAPI<Value>) => React.ReactNode) | React.ReactNode\n\n  /**\n   * Starting location of column. For traditional variant, this does not exist\n   * and is not necessary.\n   * @since 10.19.0\n   * */\n  colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\n  /**\n   * Width of column. For traditional variant, will be either 6 or 12.\n   * @default 6\n   * @since 10.19.0\n   */\n  colWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  /**\n   * @since 10.19.0\n   */\n  ['data-qa']?: string\n\n  /**\n   * Specify disabled. Field disabled replaces the overall Form disabled state.\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 11.25.0\n   */\n  description?: React.ReactNode\n  /**\n   * Key path in store. Accepts `bracket[notation]` or `dot.notation`.\n   * @since 10.19.0\n   */\n  name: string\n\n  /**\n   * The required asterisk if not using Yup `required`\n   * ```\n   * <Form\n   *  validationSchema={Yup.object().shape({\n   *    input_name: Yup.mixed().required(),\n   *  })}\n   * >\n   * ```\n   * @since 10.19.0\n   */\n  required?: boolean\n\n  /**\n   * @since 10.19.0\n   */\n  tooltip?: TooltipProps['overlay']\n\n  /**\n   * The validate function from Formik for single field validation.\n   * ```\n   * (value: Value = any) => undefined | string | Promise<Value>\n   * ```\n   * @since 10.19.0\n   */\n  validate?: FieldValidator\n\n  /**\n   * Determines show or edit state of field.\n   * @since 10.19.0\n   */\n  view?: View\n}\n\n/** @deprecated The traditional field layout is deprecated */\nexport interface TraditionalBaseFieldProps<\n  Value,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> extends Omit<BaseFieldProps<Value, ComponentProps>, 'colWidth' | 'colStart'> {\n  /**\n   * @since 10.19.0\n   */\n  colWidth?: 6 | 12\n}\n\nexport interface FormFieldProps<Value>\n  extends Omit<\n    BaseFieldProps<Value, FormFieldValueComponentProps<Value>>,\n    'children'\n  > {\n  /**\n   * @since 10.19.0\n   */\n  children?:\n    | React.ReactElement<\n        BaseFieldProps<Value, FormFieldValueComponentProps<Value>>\n      >\n    | React.ReactElement<\n        BaseFieldProps<Value, FormFieldValueComponentProps<Value>>\n      >[]\n}\n\nexport type OptionList<OptionShape = any> = {\n  /**\n   * The id of an option\n   * @since 10.19.0\n   * @default (option: OptionItem) => option.id\n   */\n  getId: (option: OptionShape) => string | number\n\n  /**\n   * The display label of an option\n   *\n   * `(option: OptionItem) => string`\n   *\n   * Default:\n   *\n   * `(option: OptionItem) => option.label || option.name`\n   *\n   * @since 10.19.0\n   */\n  getLabel: (option: OptionShape) => string\n\n  /**\n   * @since 10.19.0\n   */\n  options?: OptionShape[]\n}\n\nexport interface FormErrorBannerProps {\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.19.0\n   */\n  item: string\n}\n\n// MAKE\n\nexport type ViewFieldProps<\n  Value,\n  FieldTypeProps extends FormFieldProps<Value>,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> = Partial<Omit<FieldTypeProps, 'children'>> & {\n  /**\n   * @since 10.19.0\n   */\n  children?: BaseFieldProps<Value, ComponentProps>['children']\n}\n\n// TEXT\n\nexport type FieldTextValueType = string\n\nexport interface FieldTextComponentProps<Value = FieldTextValueType>\n  extends FormFieldValueComponentProps<Value>,\n    InputProps {}\nexport interface FormTextProps<Value = FieldTextValueType>\n  extends FormFieldProps<Value>,\n    Omit<InputProps, 'name' | 'children' | 'error'> {}\n\n// NUMBER\n\nexport type FieldNumberValueType = BaseNumberInputValueType\n\nexport interface FieldNumberComponentProps<Value = FieldNumberValueType>\n  extends FormFieldValueComponentProps<Value>,\n    NumberInputProps {\n  /**\n   * A string with a BCP 47 language tag or an array of such strings which specifies number formatting.\n   * @defaultValue en-US\n   * @since 10.19.0\n   */\n  locale?: Locale\n}\n\nexport interface FormNumberProps<Value = FieldNumberValueType>\n  extends FormFieldProps<Value>,\n    Omit<NumberInputProps, 'name' | 'children' | 'error'> {}\n\n// CURRENCY\n\nexport type FieldCurrencyValueType = BaseNumberInputValueType\n\nexport interface FieldCurrencyComponentProps<Value = FieldCurrencyValueType>\n  extends FormFieldValueComponentProps<Value>,\n    CurrencyInputProps {}\n\nexport interface FormCurrencyProps<Value = FieldCurrencyValueType>\n  extends FormFieldProps<Value>,\n    Omit<CurrencyInputProps, 'name' | 'children' | 'error'> {}\n\n// DATE\nexport type FieldDateValueType = null | string | Date\n\nexport interface FieldDateComponentProps<Value = FieldDateValueType>\n  extends FormFieldValueComponentProps<Value>,\n    DateSelectProps {}\n\nexport interface FormDateProps<Value = FieldDateValueType>\n  extends FormFieldProps<Value>,\n    Omit<DateSelectProps, 'error'> {}\n\n// CHECKBOX\n\nexport type FieldCheckboxValueType = boolean\n\nexport interface FieldCheckboxComponentProps<Value = FieldCheckboxValueType>\n  extends FormFieldValueComponentProps<Value>,\n    CheckboxProps {\n  /**\n   * Next to checkbox label\n   * @since 11.25.0\n   */\n  inlineLabel?: string\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 11.25.0\n   */\n  tooltip?: TooltipProps['overlay']\n  /**\n   * @since 11.25.0\n   */\n  hasRequiredMark?: boolean\n}\n\nexport interface FormCheckboxProps<Value = FieldCheckboxValueType>\n  extends FormFieldProps<Value>,\n    Omit<CheckboxProps, 'name' | 'error' | 'children'> {\n  /**\n   * Next to checkbox label\n   * @since 11.25.0\n   */\n  inlineLabel?: string\n  /**\n   * Below checkbox description\n   * @since 11.25.0\n   */\n  inlineDescription?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n}\n\n// TEXTAREA\n\nexport type FieldTextAreaValueType = string\n\nexport interface FieldTextAreaComponentProps<Value = FieldTextAreaValueType>\n  extends FormFieldValueComponentProps<Value>,\n    TextAreaProps {}\nexport interface FormTextAreaProps<Value = FieldTextAreaValueType>\n  extends FormFieldProps<Value>,\n    Omit<TextAreaProps, 'name' | 'error' | 'children'> {}\n\n// RICHTEXT\n\nexport type FieldRichTextValueType = string\n\nexport interface FieldRichTextComponentProps<Value = FieldRichTextValueType>\n  extends FormFieldValueComponentProps<Value>,\n    TextEditorProps {}\n\nexport interface FormRichTextProps<Value = FieldRichTextValueType>\n  extends Omit<FormFieldProps<Value>, 'error'>,\n    TextEditorProps {\n  /** Future facing prop for decoupling the editor from the form. Will be required in v13. */\n  textEditorComponent?: React.ComponentType<any>\n}\n\n// RADIO BUTTONS\n\nexport type FieldRadioButtonsValueType = any\n\nexport interface FieldRadioButtonsComponentProps<\n  Value = FieldRadioButtonsValueType\n> extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<Value>>,\n    Pick<Props, 'className' | 'style'> {\n  /**\n   * @since 10.19.0\n   */\n  isDisabledOption?: (option: Value) => boolean\n}\n\nexport interface FormRadioButtonsProps<Value = FieldRadioButtonsValueType>\n  extends FormFieldProps<Value>,\n    Partial<OptionList<Value>>,\n    Pick<Props, 'className' | 'style'>,\n    Pick<FieldRadioButtonsComponentProps, 'isDisabledOption'> {}\n\n// CHECKBOXES\n\nexport type FieldCheckboxesValueType = any[]\n\nexport interface FieldCheckboxesComponentProps<Value = FieldCheckboxesValueType>\n  extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<ValueInArray<Value>>>,\n    Pick<Props, 'className' | 'style'> {\n  /**\n   * @since 10.19.0\n   */\n  isDisabledOption?: (option: Value) => boolean\n  /**\n   * @since 10.19.0\n   */\n  isIndeterminateOption?: (option: Value) => boolean\n}\n\nexport interface FormCheckboxesProps<Value = FieldCheckboxesValueType>\n  extends FormFieldProps<Value>,\n    Partial<OptionList<ValueInArray<Value>>>,\n    Pick<Props, 'className' | 'style'>,\n    Pick<\n      FieldCheckboxesComponentProps,\n      'isDisabledOption' | 'isIndeterminateOption'\n    > {}\n\n// SELECT\n\nexport type FieldSelectValueType = any\nexport type FieldSelectOptionItem = FieldSelectValueType\nexport type FieldSelectGroupItem = any\nexport type FieldSelectGroupHeader = FieldSelectGroupItem & {\n  isGroupHeader: boolean\n}\n\nexport interface GroupedOptionsConfig<OptionItem, GroupItem>\n  extends OptionList<OptionItem> {\n  /**\n   * @since 10.19.0\n   */\n  comparator?: (query: string, value: string) => boolean\n  /**\n   * @since 10.19.0\n   */\n  getGroup: (option: OptionItem) => number | string\n  /**\n   * The id of group `(group: GroupItem) => string | number`\n   *\n   * Default:\n   *\n   * `(group) => group.id`\n   *\n   * @since 10.19.0\n   */\n  groupGetId: (group: GroupItem) => number | string\n  /**\n   * @since 10.19.0\n   */\n  optgroups?: GroupItem[]\n  /**\n   * @since 10.19.0\n   */\n  value?: OptionItem\n}\n\nexport interface SelectOptionRendererProps extends SelectOptionProps {\n  /**\n   * @since 12.13.0\n   */\n  getId: OptionList<FieldSelectOptionItem>['getId']\n\n  /**\n   * @since 12.13.0\n   */\n  getLabel: OptionList<FieldSelectOptionItem>['getLabel']\n}\n\nexport interface FieldSelectComponentProps<\n  Value = FieldSelectValueType,\n  OptionItem = FieldSelectOptionItem,\n  GroupItem = FieldSelectGroupItem\n> extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<OptionItem>>,\n    Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children'> {\n  /**\n   * Callback for each entry in `options` to define relation to\n   * group in `optgroups`\n   * `(option: OptionItem) => string | number`\n   * @since 10.19.0\n   * */\n  getGroup?: (option: OptionItem) => number | string\n  /**\n   * @since 10.19.0\n   */\n  groupGetId?: (group: GroupItem) => number | string\n\n  /**\n   * The display label of a group\n   * `(group: GroupItem) => string`\n   *\n   * Default:\n   * `(group: GroupItem) => group.label || group.name`\n   * @since 10.19.0\n   */\n  groupGetLabel?: (group: GroupItem) => string\n\n  /**\n   * Callback for rendering header for each entry in `optgroups`\n   * `(group: GroupItem) => React.ReactNode`\n   * @since 10.19.0\n   */\n  groupHeaderRenderer?: (group: GroupItem) => React.ReactNode\n\n  /**\n   * If nothing is selected, suggest this option. From `Select.Option suggested`.\n   * `(option: OptionItem) => boolean`\n   * @since 10.19.0\n   */\n  isSuggestedOption?: (option: OptionItem) => boolean\n\n  /**\n   * Array of available option groups\n   * @since 10.19.0\n   */\n  optgroups?: GroupItem[]\n\n  /**\n   * Callback for rendering each `option`\n   * `(option: OptionItem) => React.ReactNode`\n   * @since 10.19.0\n   */\n  optionRenderer?: (\n    option: OptionItem,\n    props?: SelectOptionRendererProps\n  ) => React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void\n\n  /**\n   * Callback for when cleared. Default enabled, has clear icon.\n   * @since 10.19.0\n   */\n  onClear?: false | SelectButtonProps['onClear']\n\n  /**\n   * Callback for when searching. Default enabled, has seach bar in menu.\n   * @since 10.19.0\n   */\n  onSearch?: false | SelectProps['onSearch']\n\n  /**\n   * Customize how search works\n   * `(query: string, value: string) => boolean`\n   * @since 10.19.0\n   */\n  searchComparator?: (query: string, value: string) => boolean\n}\nexport interface FormSelectProps<\n  Value = FieldSelectValueType,\n  OptionItem = FieldSelectOptionItem,\n  GroupItem = FieldSelectGroupItem\n> extends FormFieldProps<Value>,\n    Partial<OptionList<OptionItem>>,\n    Pick<\n      FieldSelectComponentProps<Value, OptionItem, GroupItem>,\n      | 'getGroup'\n      | 'groupGetId'\n      | 'groupGetLabel'\n      | 'groupHeaderRenderer'\n      | 'isSuggestedOption'\n      | 'onBlur'\n      | 'onClear'\n      | 'optgroups'\n      | 'onSearch'\n      | 'optionRenderer'\n      | 'searchComparator'\n    >,\n    Omit<\n      SelectProps,\n      'onClear' | 'onSearch' | 'error' | 'children' | 'label'\n    > {}\n\n// PILL SELECT\n\nexport type FieldPillSelectValueType = any\n\ninterface PillSelectCommon\n  extends Omit<PillSelectProps, 'children' | 'onClear' | 'error' | 'value'> {\n  /**\n   * @since 10.19.0\n   */\n  onClear?: false | PillSelectProps['onClear']\n}\n\nexport interface FieldPillSelectComponentProps<Value = FieldPillSelectValueType>\n  extends FormFieldValueComponentProps<Value>,\n    PillSelectCommon {}\n\nexport interface FormPillSelectProps<Value = FieldPillSelectValueType>\n  extends FormFieldProps<Value>,\n    PillSelectCommon {}\n\n// MULTISELECT\n\nexport type FieldMultiSelectValueType = any[]\n\ninterface MultiSelectCommon<Value>\n  extends Partial<OptionList<ValueInArray<Value>>>,\n    Omit<MultiSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {}\n\nexport interface FieldMultiSelectComponentProps<\n  Value = FieldMultiSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    MultiSelectCommon<Value> {}\n\nexport interface FormMultiSelectProps<Value = FieldMultiSelectValueType>\n  extends FormFieldProps<Value>,\n    MultiSelectCommon<Value> {}\n\n// GROUP SELECT\n\nexport type FieldGroupSelectValueType = any[]\n\ninterface GroupSelectCommon<Value>\n  extends Partial<OptionList<Value[keyof Value]>>,\n    Omit<GroupSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {}\n\nexport interface FieldGroupSelectComponentProps<\n  Value = FieldGroupSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    GroupSelectCommon<Value> {}\n\nexport interface FormGroupSelectProps<Value = FieldGroupSelectValueType>\n  extends FormFieldProps<Value>,\n    GroupSelectCommon<Value> {}\n\n// TIERED SELECT\n\nexport type FieldTieredSelectValueType = any[]\n\ninterface TieredSelectCommon<Value>\n  extends Partial<OptionList<Value[keyof Value]>>,\n    Omit<\n      TieredSelectProps,\n      'options' | 'getLabel' | 'getId' | 'error' | 'children'\n    > {}\n\nexport interface FieldTieredSelectComponentProps<\n  Value = FieldTieredSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    TieredSelectCommon<Value> {}\n\nexport interface FormTieredSelectProps<Value = FieldTieredSelectValueType>\n  extends FormFieldProps<Value>,\n    TieredSelectCommon<Value> {}\n"],"mappings":""}
+{"version":3,"file":"Form.types.js","names":[],"sources":["../../src/Form/Form.types.ts"],"sourcesContent":["import type {\n  FieldHelperProps,\n  FieldInputProps,\n  FieldMetaProps as FormikFieldMetaProps,\n  FieldValidator,\n  FormikConfig,\n} from 'formik'\nimport type React from 'react'\nimport type { CheckboxProps } from '../Checkbox/Checkbox.types'\nimport type { DateSelectProps } from '../DateSelect'\nimport type { GroupSelectProps } from '../GroupSelect/GroupSelect.types'\nimport type { InputProps } from '../Input/Input.types'\nimport type { MultiSelectProps } from '../MultiSelect/MultiSelect.types'\nimport type {\n  CurrencyInputProps,\n  InputValue as BaseNumberInputValueType,\n  Locale,\n  NumberInputProps,\n} from '../NumberInput/NumberInput.types'\nimport type { PillSelectProps } from '../PillSelect/PillSelect.types'\nimport type {\n  SelectButtonProps,\n  SelectOptionProps,\n  SelectProps,\n} from '../Select/Select.types'\nimport type { TextAreaProps } from '../TextArea/TextArea.types'\nimport type { TextEditorProps } from '../TextEditor'\nimport type { TieredSelectProps } from '../TieredSelect/TieredSelect.types'\nimport type { TooltipProps } from '../Tooltip/Tooltip.types'\nimport type { Props } from '../_utils/types'\n\nexport type ValueInArray<V> = V[keyof V]\nexport type View = 'create' | 'read' | 'update'\nexport type Layout = 'wxp' | 'traditional'\n\nexport interface FormContextAPI {\n  /**\n   * @since 10.19.0\n   */\n  different: boolean\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  enableReinitialize?: boolean\n  /**\n   * @since 10.19.0\n   */\n  setFieldDifferent: (key: string, different: boolean) => void\n\n  /**\n   * A [Yup](https://github.com/jquense/yup) object schema to\n   * validate all values.\n   * ```\n   *  {`Yup.object().shape({\n   *    input_name: Yup.mixed().required()\n   *  })`}\n   * ```\n   * This is a great way to get error messages into the component. In\n   * addition, if using Yup for required, those fields will automatically\n   * get the required asterisk and highlight error.\n   * @since 10.19.0\n   */\n  validationSchema?: FormikConfig<unknown>['validationSchema']\n\n  /**\n   * Toggle between modern and traditional form styles. Leave blank for the\n   * modern label-above layout.\n   * @since 10.19.0\n   * @deprecated The `traditional` field layout variant is deprecated and `variant` property will be removed\n   *  in a future version. Use the default field layout (`wxp`) instead.\n   *\n   *  Note that in the default field layout, you need to explicitly specify the `colStart` property:\n   *\n   *  BEFORE\n   *\n   *  ```\n   *  <Form.Row>\n   *    <Form.Text />\n   *    <Form.Number />\n   *  </Form.Row>\n   *  ```\n   *\n   *  AFTER\n   *\n   *  ```\n   *  <Form.Row>\n   *    <Form.Text colStart={1} />\n   *    <Form.Number colStart={7} />\n   *  </Form.Row>\n   *  ```\n   *\n   *  We plan to remove this limitation in a future release.\n   *\n   * @deprecatedSince 12.18.0\n   */\n  variant: Layout\n\n  /**\n   * Determines show or edit state of form.\n   * @default 'create'\n   * @since 10.19.0\n   */\n  view: View\n}\n\ninterface FieldMetaProps<Value>\n  extends Omit<FormikFieldMetaProps<Value>, 'error'> {\n  /**\n   * @since 10.19.0\n   */\n  disabled: boolean\n  /**\n   * @since 10.19.0\n   */\n  error: boolean\n  /**\n   * @since 10.19.0\n   */\n  required: boolean\n  /**\n   * @since 10.19.0\n   */\n  view: View\n}\n\nexport interface FieldConfig {\n  /**\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @since 10.19.0\n   */\n  getId?: (item: any) => string | number\n  /**\n   * @since 10.19.0\n   */\n  name: string\n  /**\n   * @since 10.19.0\n   */\n  required?: boolean\n  /**\n   * @since 10.19.0\n   */\n  validate?: FieldValidator\n  /**\n   * @since 10.19.0\n   */\n  view?: View\n}\n\nexport interface FormFieldAPI<Value> {\n  /**\n   * @since 10.19.0\n   */\n  input: FieldInputProps<Value>\n  /**\n   * @since 10.19.0\n   */\n  helpers: {\n    setValue: (\n      value: Value,\n      shouldValidate?: boolean,\n      shouldMarkDifferent?: boolean\n    ) => void\n    setTouched: FieldHelperProps<Value>['setTouched']\n    setError: FieldHelperProps<Value>['setError']\n  }\n\n  /**\n   * @since 10.19.0\n   */\n  messages: {\n    error?: string\n  }\n  /**\n   * @since 10.19.0\n   */\n  meta: FieldMetaProps<Value>\n}\n\nexport interface FormProps<Values> extends Partial<FormikConfig<Values>> {\n  /**\n   * @since 10.19.0\n   */\n  children: React.ReactNode | (() => React.ReactNode)\n\n  /**\n   * Enable a browser confirmation about losing of unsaved data when the\n   * form values are visually different from the initial values. Uses\n   * `window.onbeforeunload` and `window.confirm` for dialogs(Modal, Tearsheet).\n   * **Requires `onSubmit` to return a promise to remove onbeforeunload.**\n   * @a11y To prevent accidental data loss, it is recommended to enable.\n   * @default false\n   */\n  enableConfirmNavigation?: boolean\n\n  /**\n   * Disable all fields at once.\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Submit the form. A promise is required to notify `Form` to make state changes like toggling `isSubmitting` and resetting `enableConfirmNavigation` (removing `window.onbeforeunload`) in the component.\n\n  - Recommended: `onSubmit` returns a promise, it will wait for `onSuccess`.\n  - Ok: `onSubmit` function is `async` and it returns undefined, it will always be considered a success.\n  - Caution: `onSubmit` function is synchronous and it returns undefined, it will never reset certain states.\n\n  A `button type='submit'` inside the `Form.Form` component (`form` tag) will trigger submission. If any validations fail, the submission will not continue.\n\n  @example\n    function(values, actions) {\n      return new Promise(\n        async function(onSuccess, onError) {\n          const success = await _network(values)\n\n          if (success) {\n            return onSuccess('Successful Server Response')\n          } else {\n            actions.setFieldError('text', 'Example Error Message')\n            return onError('Failed Server Response')\n          }\n        }\n      )\n    }\n\n   */\n  // TODO breaking change found v11 24-5-13\n  // Our Partial<> usage above allows optional onSubmit,\n  // even though Formik requires onSubmit. Keep ? for backwards compat.\n  onSubmit?: FormikConfig<Values>['onSubmit']\n\n  /**\n   * Toggle between modern and traditional form styles. Leave blank for the modern label-above layout.\n   * @deprecated The `traditional` field layout variant is deprecated and `variant` property will be removed\n   *  in a future version. Use the default field layout (`wxp`) instead.\n   * @deprecatedSince 12.18.0\n   */\n  variant?: Layout\n\n  /**\n   * Determines show or edit state of form.\n   * @default 'create'\n   */\n  view?: View\n}\n\nexport type FormFieldValueComponentProps<Value = any> = {\n  field: FormFieldAPI<Value>\n}\n\nexport type ComponentWithFieldProp<\n  Value,\n  Props extends FormFieldValueComponentProps<Value>\n> =\n  | React.FunctionComponent<Props>\n  | React.ForwardRefExoticComponent<Props>\n  | ((p: Props) => React.ReactNode)\n\nexport interface BaseFieldProps<\n  Value,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> {\n  /**\n   * Customize the input component, either a single component for all views\n   * or an object with the keys of the views to render on that particular\n   * view. This input component will receive the `field` prop.\n   * If using TypeScript, these components will need to extend a specific\n   * type from Core React, read more about the [props per view](#typescript-ans-as-prop-components)\n   *\n   * One of:\n   *\n   * `ReactComponent` or\n   * `\n   * {\n   *    '{ read: ReactComponent, create: ReactComponent, update: ReactComponent }'\n   * }\n   * `\n   * @since 10.19.0\n   */\n  as?:\n    | ComponentWithFieldProp<Value, ComponentProps>\n    | { [V in View]: ComponentWithFieldProp<Value, ComponentProps> }\n\n  /**\n   * A subcomponent to render on a particular view.\n   *\n   * One or all of:\n   *\n   * `Form.X.Create, Form.X.Read, Form.X.Update`\n   * @since 10.19.0\n   */\n  children?: ((field: FormFieldAPI<Value>) => React.ReactNode) | React.ReactNode\n\n  /**\n   * Starting location of column. For traditional variant, this does not exist\n   * and is not necessary.\n   * @since 10.19.0\n   * */\n  colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n\n  /**\n   * Width of column. For traditional variant, will be either 6 or 12.\n   * @default 6\n   * @since 10.19.0\n   */\n  colWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  /**\n   * @since 10.19.0\n   */\n  ['data-qa']?: string\n\n  /**\n   * Specify disabled. Field disabled replaces the overall Form disabled state.\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @since 10.19.0\n   */\n  label?: string\n  /**\n   * @since 11.25.0\n   */\n  description?: React.ReactNode\n  /**\n   * Key path in store. Accepts `bracket[notation]` or `dot.notation`.\n   * @since 10.19.0\n   */\n  name: string\n\n  /**\n   * The required asterisk if not using Yup `required`\n   * ```\n   * <Form\n   *  validationSchema={Yup.object().shape({\n   *    input_name: Yup.mixed().required(),\n   *  })}\n   * >\n   * ```\n   * @since 10.19.0\n   */\n  required?: boolean\n\n  /**\n   * @since 10.19.0\n   */\n  tooltip?: TooltipProps['overlay']\n\n  /**\n   * The validate function from Formik for single field validation.\n   * ```\n   * (value: Value = any) => undefined | string | Promise<Value>\n   * ```\n   * @since 10.19.0\n   */\n  validate?: FieldValidator\n\n  /**\n   * Determines show or edit state of field.\n   * @since 10.19.0\n   */\n  view?: View\n}\n\n/** @deprecated The traditional field layout is deprecated */\nexport interface TraditionalBaseFieldProps<\n  Value,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> extends Omit<BaseFieldProps<Value, ComponentProps>, 'colWidth' | 'colStart'> {\n  /**\n   * @since 10.19.0\n   */\n  colWidth?: 6 | 12\n}\n\nexport interface FormFieldProps<Value>\n  extends Omit<\n    BaseFieldProps<Value, FormFieldValueComponentProps<Value>>,\n    'children'\n  > {\n  /**\n   * @since 10.19.0\n   */\n  children?:\n    | React.ReactElement<\n        BaseFieldProps<Value, FormFieldValueComponentProps<Value>>\n      >\n    | React.ReactElement<\n        BaseFieldProps<Value, FormFieldValueComponentProps<Value>>\n      >[]\n}\n\nexport type OptionList<OptionShape = any> = {\n  /**\n   * The id of an option\n   * @since 10.19.0\n   * @default (option: OptionItem) => option.id\n   */\n  getId: (option: OptionShape) => string | number\n\n  /**\n   * The display label of an option\n   *\n   * `(option: OptionItem) => string`\n   *\n   * Default:\n   *\n   * `(option: OptionItem) => option.label || option.name`\n   *\n   * @since 10.19.0\n   */\n  getLabel: (option: OptionShape) => string\n\n  /**\n   * @since 10.19.0\n   */\n  options?: OptionShape[]\n}\n\nexport interface FormErrorBannerProps {\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 10.19.0\n   */\n  item: string\n}\n\n// MAKE\n\nexport type ViewFieldProps<\n  Value,\n  FieldTypeProps extends FormFieldProps<Value>,\n  ComponentProps extends FormFieldValueComponentProps<Value>\n> = Partial<Omit<FieldTypeProps, 'children'>> & {\n  /**\n   * @since 10.19.0\n   */\n  children?: BaseFieldProps<Value, ComponentProps>['children']\n}\n\n// TEXT\n\nexport type FieldTextValueType = string\n\nexport interface FieldTextComponentProps<Value = FieldTextValueType>\n  extends FormFieldValueComponentProps<Value>,\n    InputProps {}\nexport interface FormTextProps<Value = FieldTextValueType>\n  extends FormFieldProps<Value>,\n    Omit<InputProps, 'name' | 'children' | 'error'> {}\n\n// NUMBER\n\nexport type FieldNumberValueType = BaseNumberInputValueType\n\nexport interface FieldNumberComponentProps<Value = FieldNumberValueType>\n  extends FormFieldValueComponentProps<Value>,\n    NumberInputProps {\n  /**\n   * A string with a BCP 47 language tag or an array of such strings which specifies number formatting.\n   * @defaultValue en-US\n   * @since 10.19.0\n   */\n  locale?: Locale\n}\n\nexport interface FormNumberProps<Value = FieldNumberValueType>\n  extends FormFieldProps<Value>,\n    Omit<NumberInputProps, 'name' | 'children' | 'error'> {}\n\n// CURRENCY\n\nexport type FieldCurrencyValueType = BaseNumberInputValueType\n\nexport interface FieldCurrencyComponentProps<Value = FieldCurrencyValueType>\n  extends FormFieldValueComponentProps<Value>,\n    CurrencyInputProps {}\n\nexport interface FormCurrencyProps<Value = FieldCurrencyValueType>\n  extends FormFieldProps<Value>,\n    Omit<CurrencyInputProps, 'name' | 'children' | 'error'> {}\n\n// DATE\nexport type FieldDateValueType = null | string | Date\n\nexport interface FieldDateComponentProps<Value = FieldDateValueType>\n  extends FormFieldValueComponentProps<Value>,\n    DateSelectProps {}\n\nexport interface FormDateProps<Value = FieldDateValueType>\n  extends FormFieldProps<Value>,\n    Omit<DateSelectProps, 'error'> {}\n\n// CHECKBOX\n\nexport type FieldCheckboxValueType = boolean\n\nexport interface FieldCheckboxComponentProps<Value = FieldCheckboxValueType>\n  extends FormFieldValueComponentProps<Value>,\n    CheckboxProps {\n  /**\n   * Next to checkbox label\n   * @since 11.25.0\n   */\n  inlineLabel?: string\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n  /**\n   * @since 11.25.0\n   */\n  tooltip?: TooltipProps['overlay']\n  /**\n   * @since 11.25.0\n   */\n  hasRequiredMark?: boolean\n}\n\nexport interface FormCheckboxProps<Value = FieldCheckboxValueType>\n  extends FormFieldProps<Value>,\n    Omit<CheckboxProps, 'name' | 'error' | 'children'> {\n  /**\n   * Next to checkbox label\n   * @since 11.25.0\n   */\n  inlineLabel?: string\n  /**\n   * Below checkbox description\n   * @since 11.25.0\n   */\n  inlineDescription?: React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  i18nScope?: string\n}\n\n// TEXTAREA\n\nexport type FieldTextAreaValueType = string\n\nexport interface FieldTextAreaComponentProps<Value = FieldTextAreaValueType>\n  extends FormFieldValueComponentProps<Value>,\n    TextAreaProps {}\nexport interface FormTextAreaProps<Value = FieldTextAreaValueType>\n  extends FormFieldProps<Value>,\n    Omit<TextAreaProps, 'name' | 'error' | 'children'> {}\n\n// RICHTEXT\n\nexport type FieldRichTextValueType = string\n\nexport interface FieldRichTextComponentProps<Value = FieldRichTextValueType>\n  extends FormFieldValueComponentProps<Value>,\n    TextEditorProps {}\n\nexport interface FormRichTextProps<Value = FieldRichTextValueType>\n  extends Omit<FormFieldProps<Value>, 'error'>,\n    TextEditorProps {\n  /** Future facing prop for decoupling the editor from the form. Will be required in v13. */\n  textEditorComponent?: React.ComponentType<any>\n}\n\n// RADIO BUTTONS\n\nexport type FieldRadioButtonsValueType = any\n\nexport interface FieldRadioButtonsComponentProps<\n  Value = FieldRadioButtonsValueType\n> extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<Value>>,\n    Pick<Props, 'className' | 'style'> {\n  /**\n   * @since 10.19.0\n   */\n  isDisabledOption?: (option: Value) => boolean\n}\n\nexport interface FormRadioButtonsProps<Value = FieldRadioButtonsValueType>\n  extends FormFieldProps<Value>,\n    Partial<OptionList<Value>>,\n    Pick<Props, 'className' | 'style'>,\n    Pick<FieldRadioButtonsComponentProps, 'isDisabledOption'> {}\n\n// CHECKBOXES\n\nexport type FieldCheckboxesValueType = any[]\n\nexport interface FieldCheckboxesComponentProps<Value = FieldCheckboxesValueType>\n  extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<ValueInArray<Value>>>,\n    Pick<Props, 'className' | 'style'> {\n  /**\n   * @since 10.19.0\n   */\n  isDisabledOption?: (option: Value) => boolean\n  /**\n   * @since 10.19.0\n   */\n  isIndeterminateOption?: (option: Value) => boolean\n}\n\nexport interface FormCheckboxesProps<Value = FieldCheckboxesValueType>\n  extends FormFieldProps<Value>,\n    Partial<OptionList<ValueInArray<Value>>>,\n    Pick<Props, 'className' | 'style'>,\n    Pick<\n      FieldCheckboxesComponentProps,\n      'isDisabledOption' | 'isIndeterminateOption'\n    > {}\n\n// SELECT\n\nexport type FieldSelectValueType = any\nexport type FieldSelectOptionItem = FieldSelectValueType\nexport type FieldSelectGroupItem = any\nexport type FieldSelectGroupHeader = FieldSelectGroupItem & {\n  isGroupHeader: boolean\n  /**\n   * @since 12.39.0\n   */\n  options: FieldSelectOptionItem[]\n}\n\nexport interface GroupedOptionsConfig<OptionItem, GroupItem>\n  extends OptionList<OptionItem> {\n  /**\n   * @since 10.19.0\n   */\n  comparator?: (query: string, value: string) => boolean\n  /**\n   * @since 10.19.0\n   */\n  getGroup: (option: OptionItem) => number | string\n  /**\n   * The id of group `(group: GroupItem) => string | number`\n   *\n   * Default:\n   *\n   * `(group) => group.id`\n   *\n   * @since 10.19.0\n   */\n  groupGetId: (group: GroupItem) => number | string\n  /**\n   * @since 10.19.0\n   */\n  optgroups?: GroupItem[]\n  /**\n   * @since 10.19.0\n   */\n  value?: OptionItem\n}\n\nexport interface SelectOptionRendererProps extends SelectOptionProps {\n  /**\n   * @since 12.13.0\n   */\n  getId: OptionList<FieldSelectOptionItem>['getId']\n\n  /**\n   * @since 12.13.0\n   */\n  getLabel: OptionList<FieldSelectOptionItem>['getLabel']\n}\n\nexport interface FieldSelectComponentProps<\n  Value = FieldSelectValueType,\n  OptionItem = FieldSelectOptionItem,\n  GroupItem = FieldSelectGroupItem\n> extends FormFieldValueComponentProps<Value>,\n    Partial<OptionList<OptionItem>>,\n    Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children'> {\n  /**\n   * Callback for each entry in `options` to define relation to\n   * group in `optgroups`\n   * `(option: OptionItem) => string | number`\n   * @since 10.19.0\n   * */\n  getGroup?: (option: OptionItem) => number | string\n  /**\n   * @since 10.19.0\n   */\n  groupGetId?: (group: GroupItem) => number | string\n\n  /**\n   * The display label of a group\n   * `(group: GroupItem) => string`\n   *\n   * Default:\n   * `(group: GroupItem) => group.label || group.name`\n   * @since 10.19.0\n   */\n  groupGetLabel?: (group: GroupItem) => string\n\n  /**\n   * Callback for rendering header for each entry in `optgroups`\n   * `(group: GroupItem) => React.ReactNode`\n   * @since 10.19.0\n   * @deprecated The `groupHeaderRenderer` prop is deprecated and will be removed in a future version. Use `groupRenderer` instead to customize the entire group rendering, including the header.\n   * @deprecatedSince 12.39.0\n   */\n  groupHeaderRenderer?: (\n    group: GroupItem,\n    params: {\n      getId: OptionList<GroupItem>['getId']\n      getLabel: OptionList<GroupItem>['getLabel']\n      children?: React.ReactNode\n    }\n  ) => React.ReactNode\n\n  /**\n   * Callback for rendering group wrapper for each entry in `optgroups`\n   * `(group: GroupItem) => React.ReactNode`\n   * @since 12.39.0\n   */\n  groupRenderer?: (\n    group: GroupItem,\n    params: {\n      getId: OptionList<GroupItem>['getId']\n      getLabel: OptionList<GroupItem>['getLabel']\n      children?: React.ReactNode\n    }\n  ) => React.ReactNode\n\n  /**\n   * If nothing is selected, suggest this option. From `Select.Option suggested`.\n   * `(option: OptionItem) => boolean`\n   * @since 10.19.0\n   */\n  isSuggestedOption?: (option: OptionItem) => boolean\n\n  /**\n   * Array of available option groups\n   * @since 10.19.0\n   */\n  optgroups?: GroupItem[]\n\n  /**\n   * Callback for rendering each `option`\n   * `(option: OptionItem) => React.ReactNode`\n   * @since 10.19.0\n   */\n  optionRenderer?: (\n    option: OptionItem,\n    props?: SelectOptionRendererProps\n  ) => React.ReactNode\n  /**\n   * @since 10.19.0\n   */\n  onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void\n\n  /**\n   * Callback for when cleared. Default enabled, has clear icon.\n   * @since 10.19.0\n   */\n  onClear?: false | SelectButtonProps['onClear']\n\n  /**\n   * Callback for when searching. Default enabled, has seach bar in menu.\n   * @since 10.19.0\n   */\n  onSearch?: false | SelectProps['onSearch']\n\n  /**\n   * Customize how search works\n   * `(query: string, value: string) => boolean`\n   * @since 10.19.0\n   */\n  searchComparator?: (query: string, value: string) => boolean\n}\nexport interface FormSelectProps<\n  Value = FieldSelectValueType,\n  OptionItem = FieldSelectOptionItem,\n  GroupItem = FieldSelectGroupItem\n> extends FormFieldProps<Value>,\n    Partial<OptionList<OptionItem>>,\n    Pick<\n      FieldSelectComponentProps<Value, OptionItem, GroupItem>,\n      | 'getGroup'\n      | 'groupGetId'\n      | 'groupGetLabel'\n      | 'groupHeaderRenderer'\n      | 'groupRenderer'\n      | 'isSuggestedOption'\n      | 'onBlur'\n      | 'onClear'\n      | 'optgroups'\n      | 'onSearch'\n      | 'optionRenderer'\n      | 'searchComparator'\n    >,\n    Omit<\n      SelectProps,\n      'onClear' | 'onSearch' | 'error' | 'children' | 'label'\n    > {}\n\n// PILL SELECT\n\nexport type FieldPillSelectValueType = any\n\ninterface PillSelectCommon\n  extends Omit<PillSelectProps, 'children' | 'onClear' | 'error' | 'value'> {\n  /**\n   * @since 10.19.0\n   */\n  onClear?: false | PillSelectProps['onClear']\n}\n\nexport interface FieldPillSelectComponentProps<Value = FieldPillSelectValueType>\n  extends FormFieldValueComponentProps<Value>,\n    PillSelectCommon {}\n\nexport interface FormPillSelectProps<Value = FieldPillSelectValueType>\n  extends FormFieldProps<Value>,\n    PillSelectCommon {}\n\n// MULTISELECT\n\nexport type FieldMultiSelectValueType = any[]\n\ninterface MultiSelectCommon<Value>\n  extends Partial<OptionList<ValueInArray<Value>>>,\n    Omit<MultiSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {}\n\nexport interface FieldMultiSelectComponentProps<\n  Value = FieldMultiSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    MultiSelectCommon<Value> {}\n\nexport interface FormMultiSelectProps<Value = FieldMultiSelectValueType>\n  extends FormFieldProps<Value>,\n    MultiSelectCommon<Value> {}\n\n// GROUP SELECT\n\nexport type FieldGroupSelectValueType = any[]\n\ninterface GroupSelectCommon<Value>\n  extends Partial<OptionList<Value[keyof Value]>>,\n    Omit<GroupSelectProps, 'options' | 'getLabel' | 'getId' | 'error'> {}\n\nexport interface FieldGroupSelectComponentProps<\n  Value = FieldGroupSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    GroupSelectCommon<Value> {}\n\nexport interface FormGroupSelectProps<Value = FieldGroupSelectValueType>\n  extends FormFieldProps<Value>,\n    GroupSelectCommon<Value> {}\n\n// TIERED SELECT\n\nexport type FieldTieredSelectValueType = any[]\n\ninterface TieredSelectCommon<Value>\n  extends Partial<OptionList<Value[keyof Value]>>,\n    Omit<\n      TieredSelectProps,\n      'options' | 'getLabel' | 'getId' | 'error' | 'children'\n    > {}\n\nexport interface FieldTieredSelectComponentProps<\n  Value = FieldTieredSelectValueType\n> extends FormFieldValueComponentProps<Value>,\n    TieredSelectCommon<Value> {}\n\nexport interface FormTieredSelectProps<Value = FieldTieredSelectValueType>\n  extends FormFieldProps<Value>,\n    TieredSelectCommon<Value> {}\n"],"mappings":""}

package/dist/Form/FormFieldTooltip.js

@@ -1,18 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { Tooltip } from '../Tooltip';
-import { useI18nContext } from '../_hooks/I18n';
-import { StyledFormFieldTooltipIcon } from './Form.styles';
+import { Tooltip, TooltipIconOnlyButton } from '../Tooltip/Tooltip';
 export var FormFieldTooltip = function FormFieldTooltip(props) {
-  var i18n = useI18nContext();
   return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    role: "tooltip",
-    trigger: ['hover', 'focus']
-  }, props), /*#__PURE__*/React.createElement(StyledFormFieldTooltipIcon, {
-    "aria-label": i18n.t('core.form.field.tooltipHelp'),
-    "aria-hidden": false,
-    size: "sm",
-    tabIndex: 0
+    trackAriaExpanded: true
+  }, props), /*#__PURE__*/React.createElement(TooltipIconOnlyButton, {
+    "data-qa": "form-field-tooltip-icon"
   }));
 };
 //# sourceMappingURL=FormFieldTooltip.js.map

package/dist/Form/FormFieldTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTooltip.js","names":["React","Tooltip","useI18nContext","StyledFormFieldTooltipIcon","FormFieldTooltip","props","i18n","createElement","_extends","role","trigger","t","size","tabIndex"],"sources":["../../src/Form/FormFieldTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport type { OverlayTriggerProps } from '../OverlayTrigger'\nimport type { TooltipProps } from '../Tooltip'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { StyledFormFieldTooltipIcon } from './Form.styles'\n\nexport const FormFieldTooltip: React.FC<\n  Omit<OverlayTriggerProps & TooltipProps, 'children'>\n> = (props) => {\n  const i18n = useI18nContext()\n\n  return (\n    <Tooltip role=\"tooltip\" trigger={['hover', 'focus']} {...props}>\n      <StyledFormFieldTooltipIcon\n        aria-label={i18n.t('core.form.field.tooltipHelp')}\n        aria-hidden={false}\n        size=\"sm\"\n        tabIndex={0}\n      />\n    </Tooltip>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,0BAA0B,QAAQ,eAAe;AAE1D,OAAO,IAAMC,gBAEZ,GAAG,SAFSA,gBAEZA,CAAIC,KAAK,EAAK;EACb,IAAMC,IAAI,GAAGJ,cAAc,CAAC,CAAC;EAE7B,oBACEF,KAAA,CAAAO,aAAA,CAACN,OAAO,EAAAO,QAAA;IAACC,IAAI,EAAC,SAAS;IAACC,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,GAAKL,KAAK,gBAC5DL,KAAA,CAAAO,aAAA,CAACJ,0BAA0B;IACzB,cAAYG,IAAI,CAACK,CAAC,CAAC,6BAA6B,CAAE;IAClD,eAAa,KAAM;IACnBC,IAAI,EAAC,IAAI;IACTC,QAAQ,EAAE;EAAE,CACb,CACM,CAAC;AAEd,CAAC"}
+{"version":3,"file":"FormFieldTooltip.js","names":["React","Tooltip","TooltipIconOnlyButton","FormFieldTooltip","props","createElement","_extends","trackAriaExpanded"],"sources":["../../src/Form/FormFieldTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport type { OverlayTriggerProps } from '../OverlayTrigger'\nimport type { TooltipProps } from '../Tooltip'\nimport { Tooltip, TooltipIconOnlyButton } from '../Tooltip/Tooltip'\n\nexport const FormFieldTooltip: React.FC<\n  Omit<OverlayTriggerProps & TooltipProps, 'children'>\n> = (props) => {\n  return (\n    <Tooltip trackAriaExpanded {...props}>\n      <TooltipIconOnlyButton data-qa=\"form-field-tooltip-icon\" />\n    </Tooltip>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,OAAO,EAAEC,qBAAqB,QAAQ,oBAAoB;AAEnE,OAAO,IAAMC,gBAEZ,GAAG,SAFSA,gBAEZA,CAAIC,KAAK,EAAK;EACb,oBACEJ,KAAA,CAAAK,aAAA,CAACJ,OAAO,EAAAK,QAAA;IAACC,iBAAiB;EAAA,GAAKH,KAAK,gBAClCJ,KAAA,CAAAK,aAAA,CAACH,qBAAqB;IAAC,WAAQ;EAAyB,CAAE,CACnD,CAAC;AAEd,CAAC"}

package/dist/Form/StyledFormikForm.styles.js

@@ -5,13 +5,13 @@ import { spacing } from '../_styles/spacing';
 import { formWrapper } from './Form.styles';
 export var StyledFormikForm = /*#__PURE__*/styled(FormikForm).withConfig({
   displayName: "StyledFormikForm",
-  componentId: "core-12_37_0__sc-1ks7m0l-0"
+  componentId: "core-12_39_0__sc-1ks7m0l-0"
 })(["", ""], formWrapper);
 
 /** @deprecated The traditional field layout is deprecated */
 export var StyledTraditionalFormLabel = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledTraditionalFormLabel",
-  componentId: "core-12_37_0__sc-1ks7m0l-1"
+  componentId: "core-12_39_0__sc-1ks7m0l-1"
 })(["display:inline-block;word-break:break-word;word-wrap:break-word;", ""], function (_ref) {
   var $view = _ref.$view;
   return ['create', 'update'].includes($view) && css(["padding-top:", "px;"], spacing.sm);

package/dist/Form/stories/util.js

@@ -111,17 +111,6 @@ var SingleForm = function SingleForm(_ref) {
   } : {
     description: 'Disabled Initial Description'
   }, columnTwo, props))), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
-    name: "error-empty",
-    error: true
-  }, useLabelAsInlineLabel ? {
-    inlineLabel: 'Error Boolean Empty Text'
-  } : {
-    label: 'Error Boolean Empty Text'
-  }, useDescriptionAsInlineDescription ? {
-    inlineDescription: 'Error Boolean Description'
-  } : {
-    description: 'Error Boolean Description'
-  }, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
     name: "error-value",
     error: "Some error message that should be read red"
   }, useLabelAsInlineLabel ? {
@@ -132,7 +121,7 @@ var SingleForm = function SingleForm(_ref) {
     inlineDescription: 'Error Message Initial Description'
   } : {
     description: 'Error Message Initial Description'
-  }, columnTwo, props)))));
+  }, columnOne, props)))));
 };
 export var DemoForm = function DemoForm(_ref2) {
   var _ref2$view = _ref2.view,