@procore/core-react 12.14.0 → 12.16.0

package/dist/Form/Form.styles.js

@@ -24,7 +24,7 @@ function applyStylesOnlyToIE11(styles) {
 }
 export var StyledFormFieldMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldMain",
-  componentId: "core-12_14_0__sc-ncj3pf-0"
+  componentId: "core-12_16_0__sc-ncj3pf-0"
 })(["-ms-grid-row:2;grid-row:2;", " ", " ", ""], function (_ref) {
   var $colStart = _ref.$colStart,
     $colEnd = _ref.$colEnd,
@@ -36,15 +36,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_14_0__sc-ncj3pf-1"
+  componentId: "core-12_16_0__sc-ncj3pf-1"
 })(["word-wrap:break-word;word-break:break-word;"]);
 export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledDescription",
-  componentId: "core-12_14_0__sc-ncj3pf-2"
+  componentId: "core-12_16_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_14_0__sc-ncj3pf-3"
+  componentId: "core-12_16_0__sc-ncj3pf-3"
 })(["margin-top:", "px;", ""], spacing.xs, function (_ref3) {
   var $read = _ref3.$read;
   if (!$read) {
@@ -53,7 +53,7 @@ export var StyledCheckboxInlineDescription = /*#__PURE__*/styled(StyledDescripti
 });
 export var StyledFormFieldHeader = /*#__PURE__*/styled(StyledFieldHeader).withConfig({
   displayName: "StyledFormFieldHeader",
-  componentId: "core-12_14_0__sc-ncj3pf-4"
+  componentId: "core-12_16_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,7 +62,7 @@ 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_14_0__sc-ncj3pf-5"
+  componentId: "core-12_16_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 () {
@@ -71,19 +71,19 @@ export var StyledFormFieldTooltipIcon = /*#__PURE__*/styled(Help).attrs(function
   };
 }).withConfig({
   displayName: "StyledFormFieldTooltipIcon",
-  componentId: "core-12_14_0__sc-ncj3pf-6"
+  componentId: "core-12_16_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_14_0__sc-ncj3pf-7"
+  componentId: "core-12_16_0__sc-ncj3pf-7"
 })(["vertical-align:sub;"]);
 export var StyledFormFieldBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormFieldBanner",
-  componentId: "core-12_14_0__sc-ncj3pf-8"
+  componentId: "core-12_16_0__sc-ncj3pf-8"
 })(["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'));
 export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTraditionalFormColumn",
-  componentId: "core-12_14_0__sc-ncj3pf-9"
+  componentId: "core-12_16_0__sc-ncj3pf-9"
 })(["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;
@@ -95,15 +95,15 @@ export var StyledTraditionalFormColumn = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledFormOutputTextArea = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledFormOutputTextArea",
-  componentId: "core-12_14_0__sc-ncj3pf-10"
+  componentId: "core-12_16_0__sc-ncj3pf-10"
 })(["white-space:pre-wrap;"]);
 export var StyledFormOutputFiledset = /*#__PURE__*/styled.fieldset.withConfig({
   displayName: "StyledFormOutputFiledset",
-  componentId: "core-12_14_0__sc-ncj3pf-11"
+  componentId: "core-12_16_0__sc-ncj3pf-11"
 })(["border:none;padding:0;margin-top:", "px;"], spacing.xs);
 export var StyledFormRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFormRow",
-  componentId: "core-12_14_0__sc-ncj3pf-12"
+  componentId: "core-12_16_0__sc-ncj3pf-12"
 })(["", ""], function (_ref7) {
   var _ref7$$traditional = _ref7.$traditional,
     $traditional = _ref7$$traditional === void 0 ? false : _ref7$$traditional,
@@ -114,6 +114,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_14_0__sc-ncj3pf-13"
+  componentId: "core-12_16_0__sc-ncj3pf-13"
 })(["", ""], formWrapper);
 //# sourceMappingURL=Form.styles.js.map

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

@@ -34,13 +34,13 @@ export interface FormContextAPI {
      */
     setFieldDifferent: (key: string, different: boolean) => void;
     /**
-     * A <a href="https://github.com/jquense/yup">Yup</a> object schema to
+     * A [Yup](https://github.com/jquense/yup) object schema to
      * validate all values.
-     * <CodeBlock>
+     * ```
      *  {`Yup.object().shape({
      *    input_name: Yup.mixed().required()
      *  })`}
-     * </CodeBlock>
+     * ```
      * This is a great way to get error messages into the component. In
      * addition, if using Yup for required, those fields will automatically
      * get the required asterisk and highlight error.
@@ -197,20 +197,18 @@ export interface BaseFieldProps<Value, ComponentProps extends FormFieldValueComp
     /**
      * Customize the input component, either a single component for all views
      * or an object with the keys of the views to render on that particular
-     * view. This input component will receive the <Code>field</Code> prop.
+     * view. This input component will receive the `field` prop.
      * If using TypeScript, these components will need to extend a specific
-     * type from Core React, read more about the{' '}
-     * <a href="#typescript-and-as-prop-components">props per view</a>.
-     * <br />
-     * <br />
+     * type from Core React, read more about the [props per view](#typescript-ans-as-prop-components)
+     *
      * One of:
-     * <br />
-     * <Code>ReactComponent</Code>or
-     * <Code>
+     *
+     * `ReactComponent` or
+     * `
      * {
      *    '{ read: ReactComponent, create: ReactComponent, update: ReactComponent }'
      * }
-     * </Code>
+     * `
      * @since 10.19.0
      */
     as?: ComponentWithFieldProp<Value, ComponentProps> | {
@@ -218,11 +216,10 @@ export interface BaseFieldProps<Value, ComponentProps extends FormFieldValueComp
     };
     /**
      * A subcomponent to render on a particular view.
-     * <br />
-     * <br />
+     *
      * One or all of:
-     * <br />
-     * <Code>Form.X.Create, Form.X.Read, Form.X.Update</Code>
+     *
+     * `Form.X.Create, Form.X.Read, Form.X.Update`
      * @since 10.19.0
      */
     children?: ((field: FormFieldAPI<Value>) => React.ReactNode) | React.ReactNode;
@@ -260,19 +257,19 @@ export interface BaseFieldProps<Value, ComponentProps extends FormFieldValueComp
      */
     description?: React.ReactNode;
     /**
-     * Key path in store. Accepts <Code>bracket[notation]</Code> or{' '}
-     * <Code>dot.notation</Code>.
+     * Key path in store. Accepts `bracket[notation]` or `dot.notation`.
      * @since 10.19.0
      */
     name: string;
     /**
-     * The required asterisk if not using Yup <Code>required</Code>
-     * <CodeBlock>
-     * {`<Form
-     * validationSchema={Yup.object().shape({
-     *  input_name: Yup.mixed().required(),
-     * })}>`}
-     * </CodeBlock>
+     * The required asterisk if not using Yup `required`
+     * ```
+     * <Form
+     *  validationSchema={Yup.object().shape({
+     *    input_name: Yup.mixed().required(),
+     *  })}
+     * >
+     * ```
      * @since 10.19.0
      */
     required?: boolean;
@@ -282,9 +279,9 @@ export interface BaseFieldProps<Value, ComponentProps extends FormFieldValueComp
     tooltip?: TooltipProps['overlay'];
     /**
      * The validate function from Formik for single field validation.
-     * <CodeBlock>
-     *  {`(value: Value = any) => undefined | string | Promise<Value>`}
-     * </CodeBlock>
+     * ```
+     * (value: Value = any) => undefined | string | Promise<Value>
+     * ```
      * @since 10.19.0
      */
     validate?: FieldValidator;
@@ -314,15 +311,14 @@ export declare type OptionList<OptionShape = any> = {
      */
     getId: (option: OptionShape) => string | number;
     /**
-     * <div>
-     *  The display label of an option
-     *  <Code>{'(option: OptionItem) => string'}</Code>
-     * </div>
-     * <br />
-     * <div>
-     *  Default:
-     *  <Code>{'(option: OptionItem) => option.label || option.name'}</Code>
-     * </div>
+     * The display label of an option
+     *
+     * `(option: OptionItem) => string`
+     *
+     * Default:
+     *
+     * `(option: OptionItem) => option.label || option.name`
+     *
      * @since 10.19.0
      */
     getLabel: (option: OptionShape) => string;
@@ -457,15 +453,12 @@ export interface GroupedOptionsConfig<OptionItem, GroupItem> extends OptionList<
      */
     getGroup: (option: OptionItem) => number | string;
     /**
-     * <div>
-     *  The id of group{' '}
-     *  <Code>{'(group: GroupItem) => string | number'}</Code>
-     * </div>
-     * <br />
-     * <div>
-     *  Default:
-     *  <Code>{'(group) => group.id'}</Code>
-     * </div>
+     * The id of group `(group: GroupItem) => string | number`
+     *
+     * Default:
+     *
+     * `(group) => group.id`
+     *
      * @since 10.19.0
      */
     groupGetId: (group: GroupItem) => number | string;
@@ -490,9 +483,9 @@ export interface SelectOptionRendererProps extends SelectOptionProps {
 }
 export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionItem = FieldSelectOptionItem, GroupItem = FieldSelectGroupItem> extends FormFieldValueComponentProps<Value>, Partial<OptionList<OptionItem>>, Omit<SelectProps, 'onClear' | 'onSearch' | 'error' | 'children'> {
     /**
-     * Callback for each entry in <Code>options</Code> to define relation to
-     * group in <Code>optgroups</Code>
-     * <Code>{'(option: OptionItem) => string | number'}</Code>
+     * Callback for each entry in `options` to define relation to
+     * group in `optgroups`
+     * `(option: OptionItem) => string | number`
      * @since 10.19.0
      * */
     getGroup?: (option: OptionItem) => number | string;
@@ -501,28 +494,23 @@ export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionI
      */
     groupGetId?: (group: GroupItem) => number | string;
     /**
-     * <div>
-     *  The display label of a group
-     *  <Code>{'(group: GroupItem) => string'}</Code>
-     * </div>
-     * <br />
-     * <div>
-     *  Default:
-     *  <Code>{'(group: GroupItem) => group.label || group.name'}</Code>
-     * </div>
+     * The display label of a group
+     * `(group: GroupItem) => string`
+     *
+     * Default:
+     * `(group: GroupItem) => group.label || group.name`
      * @since 10.19.0
      */
     groupGetLabel?: (group: GroupItem) => string;
     /**
-     * Callback for rendering header for each entry in <Code>optgroups</Code>
-     * <Code>{'(group: GroupItem) => React.ReactNode'}</Code>
+     * Callback for rendering header for each entry in `optgroups`
+     * `(group: GroupItem) => React.ReactNode`
      * @since 10.19.0
      */
     groupHeaderRenderer?: (group: GroupItem) => React.ReactNode;
     /**
-     * If nothing is selected, suggest this option. From{' '}
-     * <Code>{'Select.Option suggested'}</Code>.
-     * <Code>{'(option: OptionItem) => boolean'}</Code>
+     * If nothing is selected, suggest this option. From `Select.Option suggested`.
+     * `(option: OptionItem) => boolean`
      * @since 10.19.0
      */
     isSuggestedOption?: (option: OptionItem) => boolean;
@@ -532,8 +520,8 @@ export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionI
      */
     optgroups?: GroupItem[];
     /**
-     * Callback for rendering each <Code>option</Code>
-     * <Code>{'(option: OptionItem) => React.ReactNode'}</Code>
+     * Callback for rendering each `option`
+     * `(option: OptionItem) => React.ReactNode`
      * @since 10.19.0
      */
     optionRenderer?: (option: OptionItem, props?: SelectOptionRendererProps) => React.ReactNode;
@@ -552,8 +540,8 @@ export interface FieldSelectComponentProps<Value = FieldSelectValueType, OptionI
      */
     onSearch?: false | SelectProps['onSearch'];
     /**
-     * <div>Customize how search works</div>
-     * <Code>{'(query: string, value: string) => boolean'}</Code>
+     * Customize how search works
+     * `(query: string, value: string) => boolean`
      * @since 10.19.0
      */
     searchComparator?: (query: string, value: string) => boolean;

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 <a href=\"https://github.com/jquense/yup\">Yup</a> object schema to\n   * validate all values.\n   * <CodeBlock>\n   *  {`Yup.object().shape({\n   *    input_name: Yup.mixed().required()\n   *  })`}\n   * </CodeBlock>\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   */\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\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   *\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 <Code>field</Code> prop.\n   * If using TypeScript, these components will need to extend a specific\n   * type from Core React, read more about the{' '}\n   * <a href=\"#typescript-and-as-prop-components\">props per view</a>.\n   * <br />\n   * <br />\n   * One of:\n   * <br />\n   * <Code>ReactComponent</Code>or\n   * <Code>\n   * {\n   *    '{ read: ReactComponent, create: ReactComponent, update: ReactComponent }'\n   * }\n   * </Code>\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   * <br />\n   * <br />\n   * One or all of:\n   * <br />\n   * <Code>Form.X.Create, Form.X.Read, Form.X.Update</Code>\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 <Code>bracket[notation]</Code> or{' '}\n   * <Code>dot.notation</Code>.\n   * @since 10.19.0\n   */\n  name: string\n\n  /**\n   * The required asterisk if not using Yup <Code>required</Code>\n   * <CodeBlock>\n   * {`<Form\n   * validationSchema={Yup.object().shape({\n   *  input_name: Yup.mixed().required(),\n   * })}>`}\n   * </CodeBlock>\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   * <CodeBlock>\n   *  {`(value: Value = any) => undefined | string | Promise<Value>`}\n   * </CodeBlock>\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\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   * <div>\n   *  The display label of an option\n   *  <Code>{'(option: OptionItem) => string'}</Code>\n   * </div>\n   * <br />\n   * <div>\n   *  Default:\n   *  <Code>{'(option: OptionItem) => option.label || option.name'}</Code>\n   * </div>\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\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   * <div>\n   *  The id of group{' '}\n   *  <Code>{'(group: GroupItem) => string | number'}</Code>\n   * </div>\n   * <br />\n   * <div>\n   *  Default:\n   *  <Code>{'(group) => group.id'}</Code>\n   * </div>\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 <Code>options</Code> to define relation to\n   * group in <Code>optgroups</Code>\n   * <Code>{'(option: OptionItem) => string | number'}</Code>\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   * <div>\n   *  The display label of a group\n   *  <Code>{'(group: GroupItem) => string'}</Code>\n   * </div>\n   * <br />\n   * <div>\n   *  Default:\n   *  <Code>{'(group: GroupItem) => group.label || group.name'}</Code>\n   * </div>\n   * @since 10.19.0\n   */\n  groupGetLabel?: (group: GroupItem) => string\n\n  /**\n   * Callback for rendering header for each entry in <Code>optgroups</Code>\n   * <Code>{'(group: GroupItem) => React.ReactNode'}</Code>\n   * @since 10.19.0\n   */\n  groupHeaderRenderer?: (group: GroupItem) => React.ReactNode\n\n  /**\n   * If nothing is selected, suggest this option. From{' '}\n   * <Code>{'Select.Option suggested'}</Code>.\n   * <Code>{'(option: OptionItem) => boolean'}</Code>\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 <Code>option</Code>\n   * <Code>{'(option: OptionItem) => React.ReactNode'}</Code>\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   * <div>Customize how search works</div>\n   * <Code>{'(query: string, value: string) => boolean'}</Code>\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   */\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\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   *\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\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\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":""}

package/dist/Form/StyledFormikForm.styles.js

@@ -5,11 +5,11 @@ import { spacing } from '../_styles/spacing';
 import { formWrapper } from './Form.styles';
 export var StyledFormikForm = /*#__PURE__*/styled(FormikForm).withConfig({
   displayName: "StyledFormikForm",
-  componentId: "core-12_14_0__sc-1ks7m0l-0"
+  componentId: "core-12_16_0__sc-1ks7m0l-0"
 })(["", ""], formWrapper);
 export var StyledTraditionalFormLabel = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledTraditionalFormLabel",
-  componentId: "core-12_14_0__sc-1ks7m0l-1"
+  componentId: "core-12_16_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/GhostPlaceholder/GhostPlaceholder.styles.js

@@ -3,7 +3,7 @@ import { spacing } from '../_styles/spacing';
 var shimmerAnimation = /*#__PURE__*/keyframes(["0%{background-position:-1000px 500px;}100%{background-position:1000px 500px;}"]);
 export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
   displayName: "PlaceholderItem",
-  componentId: "core-12_14_0__sc-1nja302-0"
+  componentId: "core-12_16_0__sc-1nja302-0"
 })(["width:100%;min-height:24px;padding:10px 0;animation:", " 3s ease-out infinite;background:radial-gradient( ellipse at center,", " 0%,", " 50% );background-size:2000px 2000px;border-radius:", "px;"], shimmerAnimation, function (props) {
   return props.$startGradientColor;
 }, function (props) {
@@ -11,7 +11,7 @@ export var PlaceholderItem = /*#__PURE__*/styled.div.withConfig({
 }, spacing.sm);
 export var RoundPlaceholderItem = /*#__PURE__*/styled(PlaceholderItem).withConfig({
   displayName: "RoundPlaceholderItem",
-  componentId: "core-12_14_0__sc-1nja302-1"
+  componentId: "core-12_16_0__sc-1nja302-1"
 })(["width:", ";height:", ";border-radius:50%;"], function (props) {
   return props.$small ? '24px' : '40px';
 }, function (props) {

package/dist/Grid/Grid.styles.js

@@ -75,7 +75,7 @@ var getRowGutterVertical = function getRowGutterVertical(gutterY, breakpoint) {
 };
 export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridRow",
-  componentId: "core-12_14_0__sc-8pinsp-0"
+  componentId: "core-12_16_0__sc-8pinsp-0"
 })(["", " display:flex;flex-wrap:wrap;"], function (_ref) {
   var $gutterX = _ref.$gutterX,
     $gutterY = _ref.$gutterY;
@@ -87,7 +87,7 @@ export var StyledGridRow = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledGridCol = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGridCol",
-  componentId: "core-12_14_0__sc-8pinsp-1"
+  componentId: "core-12_16_0__sc-8pinsp-1"
 })(["flex-shrink:0;width:100%;max-width:100%;", ""], function (_ref2) {
   var $span = _ref2.$span,
     $offset = _ref2.$offset,

package/dist/GroupSelect/GroupSelect.styles.js

@@ -3,7 +3,7 @@ import { MultiSelect } from '../MultiSelect/MultiSelect';
 import { colors } from '../_styles/colors';
 export var StyledGroupSelectOption = /*#__PURE__*/styled(MultiSelect.Option).withConfig({
   displayName: "StyledGroupSelectOption",
-  componentId: "core-12_14_0__sc-u5gu8j-0"
+  componentId: "core-12_16_0__sc-u5gu8j-0"
 })(["", ""], function (_ref) {
   var disabled = _ref.disabled;
   return disabled && css(["color:", ";cursor:not-allowed;a,a:hover{color:", ";text-decoration:none;}"], colors.gray70, colors.gray70);

package/dist/Input/Input.styles.js

@@ -16,6 +16,6 @@ export function getInputStyles(_ref) {
 }
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_14_0__sc-12sjkxg-0"
+  componentId: "core-12_16_0__sc-12sjkxg-0"
 })(["", " padding:0 ", "px;&::-ms-clear{display:none;}&[type='number']{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}}"], getInputStyles, spacing.md);
 //# sourceMappingURL=Input.styles.js.map

package/dist/Link/Link.styles.js

@@ -17,6 +17,6 @@ function getLinkColors(_ref) {
 }
 export var StyledLink = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLink",
-  componentId: "core-12_14_0__sc-jfowrl-0"
+  componentId: "core-12_16_0__sc-jfowrl-0"
 })(["text-decoration:underline;&:hover{cursor:pointer;text-decoration:underline;}", " &.focus,&:focus{", ";}", ""], focusable, getBorderRadius('md'), getLinkColors);
 //# sourceMappingURL=Link.styles.js.map

package/dist/ListPage/ListPage.styles.js

@@ -3,19 +3,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledListPageMain = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageMain",
-  componentId: "core-12_14_0__sc-1eq7fzi-0"
+  componentId: "core-12_16_0__sc-1eq7fzi-0"
 })(["display:flex;flex:1 0 auto;flex-direction:column;min-width:0;padding:", "px ", "px;width:100%;"], spacing.lg, spacing.xl);
 export var StyledListPageBanner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBanner",
-  componentId: "core-12_14_0__sc-1eq7fzi-1"
+  componentId: "core-12_16_0__sc-1eq7fzi-1"
 })(["flex:0 0 auto;"]);
 export var StyledListPageToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageToolHeader",
-  componentId: "core-12_14_0__sc-1eq7fzi-2"
+  componentId: "core-12_16_0__sc-1eq7fzi-2"
 })(["flex:0 0 auto;padding-bottom:", "px;"], spacing.lg);
 export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageControl",
-  componentId: "core-12_14_0__sc-1eq7fzi-3"
+  componentId: "core-12_16_0__sc-1eq7fzi-3"
 })(["flex:", ";", " ", ""], function (_ref) {
   var $block = _ref.$block;
   return $block ? '1 0 auto' : '0 0 auto';
@@ -32,18 +32,18 @@ export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledListPageContentControls = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageContentControls",
-  componentId: "core-12_14_0__sc-1eq7fzi-4"
+  componentId: "core-12_16_0__sc-1eq7fzi-4"
 })(["align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;padding:", "px 0;", " + ", "{margin-left:", "px;}"], spacing.md, StyledListPageControl, StyledListPageControl, spacing.lg);
 export var StyledListPageBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBody",
-  componentId: "core-12_14_0__sc-1eq7fzi-5"
+  componentId: "core-12_16_0__sc-1eq7fzi-5"
 })(["display:flex;flex:1 0 auto;padding-top:", "px;"], spacing.md);
 export var StyledListPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPageBodyContent",
-  componentId: "core-12_14_0__sc-1eq7fzi-6"
+  componentId: "core-12_16_0__sc-1eq7fzi-6"
 })(["flex:1 1 auto;"]);
 export var StyledListPage = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledListPage",
-  componentId: "core-12_14_0__sc-1eq7fzi-7"
+  componentId: "core-12_16_0__sc-1eq7fzi-7"
 })(["display:flex;flex-direction:row;height:100%;width:100%;", " + ", "{padding-top:", "px;}", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", ",", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", "{padding-top:0;}"], StyledListPageBanner, StyledListPageToolHeader, spacing.lg, StyledListPageContentControls, StyledListPageContentControls, colors.gray85, StyledListPageToolHeader, StyledListPageContentControls, StyledListPageToolHeader, StyledListPageBody, colors.gray85, StyledListPageContentControls, StyledListPageBody);
 //# sourceMappingURL=ListPage.styles.js.map

package/dist/Loader/Loader.styles.js

@@ -1,17 +1,17 @@
 import styled, { css, keyframes } from 'styled-components';
 import { colors } from '../_styles/colors';
 var backgroundSize = 8;
-var color1 = colors.blue50;
-var color2 = colors.blue40;
+var color1 = colors.blue70;
+var color2 = colors.blue60;
 export var loaderTransitionDuration = 250;
 var movingStripes = /*#__PURE__*/keyframes(["from{background-position:", "px 0;}100%{background-position:0 ", "px;}"], backgroundSize, backgroundSize);
 export var StyledLoader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLoader",
-  componentId: "core-12_14_0__sc-wgvjj9-0"
+  componentId: "core-12_16_0__sc-wgvjj9-0"
 })(["display:block;height:100%;left:0;min-width:12px;position:absolute;transition:width ", "ms ease-out;top:0;"], loaderTransitionDuration);
 export var StyledGradient = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledGradient",
-  componentId: "core-12_14_0__sc-wgvjj9-1"
+  componentId: "core-12_16_0__sc-wgvjj9-1"
 })(["height:100%;", ""], function (_ref) {
   var $animated = _ref.$animated;
   return $animated ? css(["animation:", " 0.5s linear infinite;background-image:linear-gradient( 45deg,", " 26%,", " 25%,", " 51%,", " 50%,", " 76%,", " 75%,", " );background-size:", "px ", "px;"], movingStripes, color1, color2, color2, color1, color1, color2, color2, backgroundSize, backgroundSize) : css(["background-color:", ";"], colors.blue50);

package/dist/Loader/Loader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.styles.js","names":["styled","css","keyframes","colors","backgroundSize","color1","blue50","color2","blue40","loaderTransitionDuration","movingStripes","StyledLoader","div","withConfig","displayName","componentId","StyledGradient","_ref","$animated"],"sources":["../../src/Loader/Loader.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { colors } from '../_styles/colors'\n\nconst backgroundSize = 8\n\nconst color1 = colors.blue50\n\nconst color2 = colors.blue40\n\nexport const loaderTransitionDuration = 250\n\nconst movingStripes = keyframes`\n  from {\n    background-position: ${backgroundSize}px 0;\n  }\n  100% {\n    background-position: 0 ${backgroundSize}px;\n  }\n`\n\nexport const StyledLoader = styled.div`\n  display: block;\n  height: 100%;\n  left: 0;\n  min-width: 12px; // TODO one-off value\n  position: absolute;\n  transition: width ${loaderTransitionDuration}ms ease-out; // TODO animation palette\n  top: 0;\n`\n\nexport const StyledGradient = styled.div<{ $animated: boolean }>`\n  height: 100%;\n\n  ${({ $animated }) =>\n    $animated\n      ? css`\n          animation: ${movingStripes} 0.5s linear infinite;\n          background-image: linear-gradient(\n            45deg,\n            ${color1} 26%,\n            ${color2} 25%,\n            ${color2} 51%,\n            ${color1} 50%,\n            ${color1} 76%,\n            ${color2} 75%,\n            ${color2}\n          );\n          background-size: ${backgroundSize}px ${backgroundSize}px;\n        `\n      : css`\n          background-color: ${colors.blue50};\n        `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,IAAMC,cAAc,GAAG,CAAC;AAExB,IAAMC,MAAM,GAAGF,MAAM,CAACG,MAAM;AAE5B,IAAMC,MAAM,GAAGJ,MAAM,CAACK,MAAM;AAE5B,OAAO,IAAMC,wBAAwB,GAAG,GAAG;AAE3C,IAAMC,aAAa,gBAAGR,SAAS,6EAEJE,cAAc,EAGZA,cAAc,CAE1C;AAED,OAAO,IAAMO,YAAY,gBAAGX,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kHAMhBN,wBAAwB,CAE7C;AAED,OAAO,IAAMO,cAAc,gBAAGhB,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAGpC,UAAAE,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OACZA,SAAS,GACLjB,GAAG,8KACYS,aAAa,EAGtBL,MAAM,EACNE,MAAM,EACNA,MAAM,EACNF,MAAM,EACNA,MAAM,EACNE,MAAM,EACNA,MAAM,EAESH,cAAc,EAAMA,cAAc,IAEvDH,GAAG,6BACmBE,MAAM,CAACG,MAAM,CAClC;AAAA,EACR"}
+{"version":3,"file":"Loader.styles.js","names":["styled","css","keyframes","colors","backgroundSize","color1","blue70","color2","blue60","loaderTransitionDuration","movingStripes","StyledLoader","div","withConfig","displayName","componentId","StyledGradient","_ref","$animated","blue50"],"sources":["../../src/Loader/Loader.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { colors } from '../_styles/colors'\n\nconst backgroundSize = 8\n\nconst color1 = colors.blue70\n\nconst color2 = colors.blue60\n\nexport const loaderTransitionDuration = 250\n\nconst movingStripes = keyframes`\n  from {\n    background-position: ${backgroundSize}px 0;\n  }\n  100% {\n    background-position: 0 ${backgroundSize}px;\n  }\n`\n\nexport const StyledLoader = styled.div`\n  display: block;\n  height: 100%;\n  left: 0;\n  min-width: 12px; // TODO one-off value\n  position: absolute;\n  transition: width ${loaderTransitionDuration}ms ease-out; // TODO animation palette\n  top: 0;\n`\n\nexport const StyledGradient = styled.div<{ $animated: boolean }>`\n  height: 100%;\n\n  ${({ $animated }) =>\n    $animated\n      ? css`\n          animation: ${movingStripes} 0.5s linear infinite;\n          background-image: linear-gradient(\n            45deg,\n            ${color1} 26%,\n            ${color2} 25%,\n            ${color2} 51%,\n            ${color1} 50%,\n            ${color1} 76%,\n            ${color2} 75%,\n            ${color2}\n          );\n          background-size: ${backgroundSize}px ${backgroundSize}px;\n        `\n      : css`\n          background-color: ${colors.blue50};\n        `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAC1D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,IAAMC,cAAc,GAAG,CAAC;AAExB,IAAMC,MAAM,GAAGF,MAAM,CAACG,MAAM;AAE5B,IAAMC,MAAM,GAAGJ,MAAM,CAACK,MAAM;AAE5B,OAAO,IAAMC,wBAAwB,GAAG,GAAG;AAE3C,IAAMC,aAAa,gBAAGR,SAAS,6EAEJE,cAAc,EAGZA,cAAc,CAE1C;AAED,OAAO,IAAMO,YAAY,gBAAGX,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kHAMhBN,wBAAwB,CAE7C;AAED,OAAO,IAAMO,cAAc,gBAAGhB,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAGpC,UAAAE,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OACZA,SAAS,GACLjB,GAAG,8KACYS,aAAa,EAGtBL,MAAM,EACNE,MAAM,EACNA,MAAM,EACNF,MAAM,EACNA,MAAM,EACNE,MAAM,EACNA,MAAM,EAESH,cAAc,EAAMA,cAAc,IAEvDH,GAAG,6BACmBE,MAAM,CAACgB,MAAM,CAClC;AAAA,EACR"}