@7shifts/sous-chef 2.16.2 → 2.17.1

package/dist/actions/Button/Button.d.ts

@@ -1,20 +1,29 @@
 import React from 'react';
-declare type ButtonTheme = 'default' | 'primary' | 'danger' | 'upsell' | 'marketing' | 'hollow' | 'link-primary' | 'link-danger' | 'link-upsell' | 'link-toolbar' | 'link-contrast' | 'link-icon';
+import type { ButtonTheme, ButtonSize, ButtonType, ButtonTarget } from './types';
 declare type Props = {
     children: React.ReactNode;
-    type?: 'button' | 'submit' | 'reset';
+    type?: ButtonType;
     /** It controls the button theme */
     theme?: ButtonTheme;
     disabled?: boolean;
     onClick?: React.MouseEventHandler;
     id?: string;
+    /**
+     * @deprecated use the `size='min-width-100'` instead
+     */
     wide?: boolean;
     loading?: boolean;
     /** This will show a black tooltip when the user hover the button */
     title?: string;
     href?: string;
-    target?: '_blank' | '_self';
+    target?: ButtonTarget;
     testId?: string;
+    /**
+     * This prop controls how the button grows having the following options:<br/>
+     * *full-width*: Will grow to fill the size of the container it is placed within.
+     * *min-width-100*: It will have a `min-width: 100` style. It is used for CTA buttons in forms and modals.
+     */
+    size?: ButtonSize;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default _default;

package/dist/actions/Button/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const BUTTON_SIZES: {
+    FULL_WIDTH: "full-width";
+    MIN_WIDTH_100: "min-width-100";
+};
+export declare const BUTTON_THEMES: {
+    DEFAULT: "default";
+    PRIMARY: "primary";
+    DANGER: "danger";
+    UPSELL: "upsell";
+    MARKETING: "marketing";
+    HOLLOW: "hollow";
+    LINK_PRIMARY: "link-primary";
+    LINK_DANGER: "link-danger";
+    LINK_UPSELL: "link-upsell";
+    LINK_TOOLBAR: "link-toolbar";
+    LINK_CONTRAST: "link-contrast";
+    LINK_ICON: "link-icon";
+};
+export declare const BUTTON_TYPES: {
+    BUTTON: "button";
+    SUBMIT: "submit";
+    RESET: "reset";
+};
+export declare const BUTTON_TARGETS: {
+    BLANK: "_blank";
+    SELF: "_self";
+};

package/dist/actions/Button/types.d.ts

@@ -0,0 +1,4 @@
+export declare type ButtonTheme = 'default' | 'primary' | 'danger' | 'upsell' | 'marketing' | 'hollow' | 'link-primary' | 'link-danger' | 'link-upsell' | 'link-toolbar' | 'link-contrast' | 'link-icon';
+export declare type ButtonSize = 'full-width' | 'min-width-100';
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonTarget = '_blank' | '_self';

package/dist/core/DataTable/types.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../../actions/Button/Button';
+import { MenuAction } from '../../overlay/Menu/types';
 export declare type Column = {
     name: string;
     label?: React.ReactNode;
@@ -22,17 +23,12 @@ export declare type CustomComponent<T> = {
     columnSizes?: number[];
     columns?: Column[];
 };
-declare type BaseAction = {
-    action?: string;
-    label: React.ReactNode;
-    onAction: (e: React.MouseEvent | React.KeyboardEvent) => void;
-};
 declare type KebabAction = {
     showInKebab?: true;
-} & BaseAction;
+} & MenuAction;
 declare type ButtonAction = {
     buttonProps?: Pick<React.ComponentPropsWithoutRef<typeof Button>, 'theme' | 'disabled' | 'loading' | 'title'>;
     showInKebab: false;
-} & BaseAction;
+} & MenuAction;
 export declare type Action = KebabAction | ButtonAction;
 export {};

package/dist/core/DataTableRow/DataTableRow.d.ts

@@ -7,5 +7,5 @@ declare type Props = {
     actions?: Action[];
     hasDefaultPadding?: boolean;
 } & Omit<React.HTMLProps<HTMLDivElement>, 'css'>;
-declare const DataTableRow: React.ForwardRefExoticComponent<Pick<Props, "children" | "type" | "default" | "disabled" | "onClick" | "id" | "title" | "href" | "target" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "key" | "size" | "color" | "className" | "height" | "lang" | "max" | "media" | "method" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contextMenu" | "list" | "start" | "wrap" | "dir" | "checked" | "value" | "placeholder" | "prefix" | "content" | "translate" | "hidden" | "open" | "multiple" | "autoFocus" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "isSelected" | "actions" | "hasDefaultPadding"> & React.RefAttributes<HTMLDivElement>>;
+declare const DataTableRow: React.ForwardRefExoticComponent<Pick<Props, "children" | "type" | "default" | "disabled" | "onClick" | "id" | "title" | "href" | "target" | "size" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "key" | "color" | "className" | "height" | "lang" | "max" | "media" | "method" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contextMenu" | "list" | "start" | "wrap" | "dir" | "checked" | "value" | "placeholder" | "prefix" | "content" | "translate" | "hidden" | "open" | "multiple" | "autoFocus" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "isSelected" | "actions" | "hasDefaultPadding"> & React.RefAttributes<HTMLDivElement>>;
 export default DataTableRow;

package/dist/core/Flex/Flex.d.ts

@@ -12,6 +12,7 @@ declare type Props = {
     flexItems?: boolean;
     flexWrap?: FlexWrap;
     testId?: string;
+    extraClass?: string;
 };
 /**
  * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef

package/dist/feedback/Spinner/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const SPINNER_THEMES: {
+    MINT: "mint";
+    DISABLED: "disabled";
+    CONTRAST: "contrast";
+    PRIDE: "pride";
+};

package/dist/forms/Label/Label.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 declare type Props = {
     htmlFor: string;
     children: React.ReactNode;
+    truncate?: boolean;
 };
 declare const Label: React.FC<Props>;
 export default Label;

package/dist/forms/Label/useLabelTooltip.d.ts

@@ -3,5 +3,5 @@ declare type UseLabelTooltip = {
     showTooltip: boolean;
     shouldTruncate: boolean;
 };
-export declare const useLabelTooltip: (labelId: string, tooltipContent: React.ReactNode) => UseLabelTooltip;
+export declare const useLabelTooltip: (labelId: string, tooltipContent: React.ReactNode, truncate: boolean) => UseLabelTooltip;
 export {};

package/dist/forms/RadioGroupBoxOption/RadioGroupBoxOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    value: string | number;
+    id?: string;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    children?: React.ReactNode;
+    testId?: string;
+};
+declare const RadioGroupBoxOption: ({ value, id: inputId, label, caption, testId, children }: Props) => JSX.Element;
+export default RadioGroupBoxOption;

package/dist/forms/RadioGroupBoxOption/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RadioGroupBoxOption';

package/dist/forms/RadioGroupField/BoxOptions/BoxOptions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    columns?: 2 | 3 | 4;
+    testId?: string;
+};
+declare const BoxOptions: ({ children, columns, testId }: Props) => JSX.Element;
+export default BoxOptions;

package/dist/forms/RadioGroupField/BoxOptions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './BoxOptions';

package/dist/forms/RadioGroupField/RadioGroupField.d.ts

@@ -1,17 +1,25 @@
 import React from 'react';
+import RadioGroupOption from '../RadioGroupOption';
+import RadioGroupBoxOption from '../RadioGroupBoxOption';
 declare type Props = {
     name: string;
     value?: string | number;
     onChange?: (e: string | number) => void;
     label?: React.ReactNode;
     error?: React.ReactNode;
-    /** When true it will place the options on the same line up to 4 options per line. */
+    /**
+     * **DEPRECATED** *Use the `columns` prop instead.*<br/><br/>When true it will place the options on the same line up to 4 options per line. It only applies when using `RadioGroupOption` as children
+     *
+     * @deprecated use the `columns` prop to tell how many inline columns you want. This will signal you want inline radio options
+     */
     inline?: boolean;
     disabled?: boolean;
-    children: React.ReactNode;
+    children: React.ReactElement<typeof RadioGroupOption> | React.ReactElement<typeof RadioGroupOption>[] | React.ReactElement<typeof RadioGroupBoxOption> | React.ReactElement<typeof RadioGroupBoxOption>[];
     /** This is used for setting the data-testid */
     testId?: string;
+    /** It states the radio options will be inline and defines how many columns it will have */
+    columns?: 2 | 3 | 4;
 };
 /** RadioGroupField form element. */
-declare const RadioGroupField: React.FC<Props>;
+declare const RadioGroupField: ({ name, value, onChange, label, error, inline, disabled, children, testId, columns }: Props) => JSX.Element;
 export default RadioGroupField;

package/dist/forms/RadioGroupField/RadioOptions/RadioOptions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    inline: boolean;
+    columns?: 2 | 3 | 4;
+    testId?: string;
+};
+declare const RadioOptions: ({ children, inline, columns, testId }: Props) => JSX.Element;
+export default RadioOptions;

package/dist/forms/RadioGroupField/RadioOptions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './RadioOptions';

package/dist/forms/RadioGroupField/domain.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const OPTION_TYPES: {
+    BOX: "BOX";
+    RADIO: "RADIO";
+};
+export declare const getOptionsType: (children: React.ReactNode) => keyof typeof OPTION_TYPES;

package/dist/forms/SelectField/CustomContainer/CustomContainer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("react-select/src/components/containers").SelectContainer;
+export default _default;

package/dist/forms/SelectField/CustomContainer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CustomContainer';

package/dist/forms/SelectField/CustomControl/CustomControl.d.ts

@@ -1,7 +1,5 @@
-import React, { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
 import { components } from 'react-select';
-declare type Props = ComponentProps<typeof components.Control> & {
-    CustomPrefixComponent: React.ElementType;
-};
-declare function CustomControl({ children, CustomPrefixComponent, ...props }: Props): JSX.Element;
+declare type Props = ComponentProps<typeof components.Control>;
+declare function CustomControl({ children, ...props }: Props): JSX.Element;
 export default CustomControl;

package/dist/forms/SelectField/CustomOption/CustomOption.d.ts

@@ -1,7 +1,2 @@
-import React, { ComponentProps } from 'react';
-import { components } from 'react-select';
-declare type Props = ComponentProps<typeof components.Option> & {
-    CustomComponent: React.ElementType;
-};
-declare function CustomOption({ children, CustomComponent, ...props }: Props): JSX.Element;
-export default CustomOption;
+declare const _default: typeof import("react-select/src/components/Option").default;
+export default _default;

package/dist/forms/SelectField/useSelectField.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
 import type { Props } from './SelectField';
 export declare const useSelectField: <T extends unknown>({ asToolbarFilter, caption, disabled, error, id, isClearable, label, menuShouldScrollIntoView, name, noOptionsMessage, options, onBlur, onChange, placeholder, value, defaultValue, CustomOption: UserCustomOption, SelectedOptionPrefix, testId }: Props<T>) => {
-    selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, React.ReactText> & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>;
+    selectProps: Pick<import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>, import("react").ReactText> & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<any>>;
     fieldProps: {
-        caption: React.ReactNode;
-        error: React.ReactNode;
+        caption: import("react").ReactNode;
+        error: import("react").ReactNode;
         id: string;
-        label: React.ReactNode;
+        label: import("react").ReactNode;
         name: string;
     };
 };

package/dist/index.css

@@ -51,10 +51,6 @@ Please ask a designer if you have questions about which colours to use.
   margin: 0;
 }
 
-._umc73 {
-  min-width: 0;
-}
-
 ._kf0KG {
   align-items: center;
 }
@@ -330,10 +326,14 @@ Please ask a designer if you have questions about which colours to use.
   margin-top: 2px;
 }
 
-._1R_gC {
+._3mZ7B {
   min-width: 100px;
 }
 
+._13ze_ {
+  min-width: 100%;
+}
+
 ._3ig9y {
   padding: 8px;
 }
@@ -1907,6 +1907,9 @@ Please ask a designer if you have questions about which colours to use.
 ._3CaV0 {
   max-width: 500px;
 }
+._2i-Ll > div {
+  min-width: 0;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2211,6 +2214,83 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
+._1Tw96 {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: #464646;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+
+._1o8rK {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+._2OGKE {
+  display: block;
+  text-align: center;
+  height: 100%;
+  color: #767676;
+}
+._2OGKE input {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+input:checked ~ ._23M9k {
+  border-color: #a7b7ea;
+  box-shadow: 0 0 8px #a7b7ea;
+  cursor: default;
+}
+._23M9k {
+  border: 1px solid #D5D5D5;
+  border-radius: 4px;
+  padding: 16px;
+  display: block;
+  cursor: pointer;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  word-break: break-word;
+}
+._23M9k:hover {
+  box-shadow: 0 0 8px #D5D5D5;
+}
+._1r-Wg {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: #464646;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
 ._1Clmp {
   position: relative;
 }
@@ -2780,8 +2860,7 @@ Please ask a designer if you have questions about which colours to use.
 ._vgLin {
   padding: 16px 12px 16px 12px;
   background: #F3F3F3;
-  margin-left: 1px;
-  margin-right: 1px;
+  margin: 1px;
   position: relative;
   border-radius: 3px;
   box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
@@ -2800,6 +2879,14 @@ Please ask a designer if you have questions about which colours to use.
   flex-grow: 1;
   color: #464646;
 }
+._3n6S7 a {
+  text-decoration: underline;
+  color: #464646;
+}
+._3n6S7 a:hover {
+  cursor: pointer;
+  color: #323232;
+}
 
 ._2pMYs {
   margin-bottom: 4px;
@@ -3086,4 +3173,72 @@ Please ask a designer if you have questions about which colours to use.
 ._2G3ML {
   background-color: #ceecf5;
   color: #367385;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+._29ZIp {
+  position: relative;
+}
+._3Q8NT {
+  box-sizing: border-box;
+  background: white;
+  border: 1px solid #D5D5D5;
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  padding: 24px 20px;
+  color: #464646;
+}
+._2Fah6 {
+  cursor: pointer;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
+  transition: all ease-in-out 150ms;
+}
+._2Fah6:not(._SGno0):hover {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
+  background-color: #F3F3F3;
+}
+._2Fah6:focus {
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._1zqRN {
+  border-color: #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+}
+._3Hwms {
+  min-height: 56px;
+}
+._TmEUS {
+  position: absolute;
+  z-index: 1;
+  right: 8px;
+  top: 8px;
+}
+
+button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: inherit;
 }

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export * from './actions';
 export * from './overlay';
 export * from './media';
 export * from './icons';
+export * from './layout';