@7shifts/sous-chef 4.0.0-beta.0 → 4.0.0

package/README.md

@@ -2,6 +2,7 @@
 
 > The 7shifts component library
 
+[![codecov](https://codecov.io/gh/7shifts/sous-chef/graph/badge.svg?token=MC1ZBS4XZ0)](https://codecov.io/gh/7shifts/sous-chef)
 [![NPM](https://badgen.net/npm/v/@7shifts/sous-chef)](https://www.npmjs.com/package/@7shifts/sous-chef)
 [![BUNDLE-SIZE](https://badgen.net/bundlephobia/min/@7shifts/sous-chef)](https://www.npmjs.com/package/@7shifts/sous-chef)
 [![TREE-SHAKING](https://badgen.net/bundlephobia/tree-shaking/@7shifts/sous-chef)](https://www.npmjs.com/package/@7shifts/sous-chef)

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

@@ -3,9 +3,11 @@ import type { ButtonTheme, ButtonSize, ButtonType, ButtonTarget } from './types'
 import type { PositionStyles, DataProps } from '../../foundation/types';
 declare const Button: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
+    /** Native HTML button type. If `submit` it will trigger the form `onSubmit`. */
     type?: ButtonType | undefined;
-    /** It controls the button theme */
+    /** Button design theme */
     theme?: ButtonTheme | undefined;
+    /** It turns the disabled state of the button on. */
     disabled?: boolean | undefined;
     onClick?: React.MouseEventHandler<Element> | undefined;
     onMouseEnter?: React.MouseEventHandler<Element> | undefined;
@@ -14,10 +16,19 @@ declare const Button: React.ForwardRefExoticComponent<{
     onFocus?: React.FocusEventHandler<Element> | undefined;
     onKeyDown?: React.KeyboardEventHandler<Element> | undefined;
     id?: string | undefined;
+    /** It turns the loading state of the button on. */
     loading?: boolean | undefined;
     /** This will show a black tooltip when the user hover the button */
     title?: string | React.ReactNode;
+    /**
+     * @description It will show a black tooltip when the user hover the button.
+     * @category Acting as Link
+     */
     href?: string | undefined;
+    /**
+     * @description It will open the link in a new tab or the same tab depending on the value.
+     * @category Acting as Link
+     */
     target?: ButtonTarget | undefined;
     testId?: string | undefined;
     /**

package/dist/actions/PaginationControls/PaginationControls.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { DataProps } from '../../foundation/types';
 type Props = {
+    /** It will enable or disable the `Previous` button. */
     hasPrevious?: boolean;
+    /** It will enable or disable the `Next` button. */
     hasNext?: boolean;
+    /** It will be fired when the `Previous` button is clicked */
     onPreviousClick: () => void;
+    /** It will be fired when the `Next` button is clicked */
     onNextClick: () => void;
     testId?: string;
+    /** It is a target element that will be scrolled to the top when the buttons are clicked */
     scrollTarget?: React.RefObject<HTMLElement>;
 } & DataProps;
 /**

package/dist/actions/index.d.ts

@@ -1,7 +1,7 @@
 import Toggle from './Toggle';
 import Button from './Button';
-import { ButtonTheme } from './Button/types';
+import { ButtonTheme, ButtonSize } from './Button/types';
 import PaginationControls from './PaginationControls';
 import Link from './Link';
 export { Toggle, Button, PaginationControls, Link };
-export type { ButtonTheme };
+export type { ButtonTheme, ButtonSize };

package/dist/assets/MagnifyingGlassIllustration/MagnifyingGlassIllustration.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MagnifyingGlassIllustration: () => React.JSX.Element;
+export default MagnifyingGlassIllustration;

package/dist/assets/MagnifyingGlassIllustration/index.d.ts

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

package/dist/controls/ToolbarSelect/ToolbarSelect.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Props } from '../../forms/SelectField/SelectField';
-type ToolbarSelectProps<T> = Omit<Props<T>, 'asToolbarFilter' | 'caption' | 'error' | 'id' | 'isClearable' | 'label' | 'noOptionMessage' | 'CustomOption' | 'SelectedOptionPrefix' | 'creatableButton' | 'onCreate' | 'isSearchable'>;
+import { DataProps } from '../../foundation/types';
+type ToolbarSelectProps<T> = Omit<Props<T>, 'asToolbarFilter' | 'caption' | 'error' | 'id' | 'isClearable' | 'label' | 'noOptionMessage' | 'CustomOption' | 'SelectedOptionPrefix' | 'isSearchable'> & DataProps;
 /** Toolbar component to make a possible selection from predefined options. */
-declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, defaultValue, menuShouldScrollIntoView, disabled, prefix, testId }: ToolbarSelectProps<T>) => React.JSX.Element;
+declare const ToolbarSelect: <T extends unknown>({ name, value, options, onChange, onBlur, placeholder, defaultValue, menuShouldScrollIntoView, disabled, prefix, testId, creatableButton, onCreate, ...rest }: ToolbarSelectProps<T>) => React.JSX.Element;
 export default ToolbarSelect;

package/dist/core/SousChefProvider/SousChefProvider.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import en from '../../i18n/locales/en.json';
 import { CountryCode } from 'libphonenumber-js';
+import { TimeFormat } from '../../forms/TimeField/types';
 type Props = {
     i18n?: typeof en;
     country?: CountryCode;
     children: React.ReactNode;
+    timeFormat?: TimeFormat;
 };
-declare const SousChefProvider: ({ children, i18n, country }: Props) => React.JSX.Element;
+declare const SousChefProvider: ({ children, i18n, country, timeFormat }: Props) => React.JSX.Element;
 export default SousChefProvider;

package/dist/core/SousChefProvider/context/ProviderConfigContext.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
 import { CountryCode } from 'libphonenumber-js';
+import { TimeFormat } from '../../../forms/TimeField/types';
 export type ProviderConfigContextType = {
     country: CountryCode;
+    timeFormat: TimeFormat;
+    theme: 'light' | 'dark';
 };
 declare const ProviderConfigContext: import("react").Context<ProviderConfigContextType>;
 export declare const useProviderConfig: () => ProviderConfigContextType;

package/dist/empty_states/EmptyStateContainer/helpers/helpers.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Helper function to check if content is already a React element
+ */
+export declare const isReactElement: (content: React.ReactNode) => content is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/empty_states/EmptyStateContainer/types.d.ts

@@ -8,7 +8,7 @@ export type EmptyStateProps = {
     /** Sets the body text */
     children?: ReactNode;
     /** Path to the image/gif to display */
-    mediaUrl: string;
+    mediaUrl?: string;
     /** Caption that appears below the CTAs */
     actions?: {
         primary?: React.ReactElement;

package/dist/feedback/InlineBanner/InlineBanner.d.ts

@@ -3,11 +3,19 @@ import { InlineBannerTheme } from './types';
 import { PositionStyles } from '../../foundation/types';
 type Props = {
     children: React.ReactNode;
+    /** Banner design theme */
     theme?: InlineBannerTheme;
+    /** Overrides the default icon determined by the theme. Generally you should not use this prop in order to maintain visual consistency between banner colours and icons. It is recommended to only use icons that are already in Sous Chef. */
+    icon?: React.ReactElement;
+    /** It adds a title to the banner and changes the banner format to multi-line */
     title?: string;
+    /** It is the callback function to close the banner */
     onClose?: () => void;
-    caption?: string;
+    /** It describes the CTA options */
+    caption?: React.ReactNode;
+    /** It is the primary CTA button */
     primaryButton?: React.ReactElement;
+    /** It is the secondary CTA button */
     secondaryButton?: React.ReactElement;
     testId?: string;
 } & PositionStyles;

package/dist/feedback/InlineBanner/InlineBannerCTA/InlineBannerCTA.d.ts

@@ -3,7 +3,7 @@ import { InlineBannerTheme } from '../types';
 type Props = {
     primaryButton: React.ReactElement;
     secondaryButton?: React.ReactElement;
-    caption?: string;
+    caption?: React.ReactNode;
     multiLine: boolean;
     bannerTheme: InlineBannerTheme;
 };

package/dist/feedback/MicroBanner/ButtonCTA/ButtonCTA.d.ts

@@ -0,0 +1,9 @@
+import { MicroBannerTheme } from '../types';
+import React from 'react';
+type ButtonCTAProps = {
+    button: React.ReactElement;
+    bannerTheme: MicroBannerTheme;
+};
+/** Infers theme prop for Sous Chef Button CTAs if not passed, primaryCTA is Upsell if banner theme is Upsell, default otherwise**/
+declare const ButtonCTA: ({ button, bannerTheme }: ButtonCTAProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default ButtonCTA;

package/dist/feedback/MicroBanner/ButtonCTA/index.d.ts

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

package/dist/feedback/MicroBanner/MicroBanner.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MicroBannerTheme } from './types';
+import { DataProps, PositionStyles } from '../../foundation/types';
+type Props = {
+    children?: React.ReactNode;
+    /** Banner design theme */
+    theme?: MicroBannerTheme;
+    /** Overrides the default icon determined by the theme. Generally you should not use this prop in order to maintain visual consistency between banner colours and icons. It is recommended to only use icons that are already in Sous Chef. */
+    icon?: React.ReactElement;
+    /** Turns off the display of the icon */
+    hideIcon?: boolean;
+    /** Adds a title to the banner above the body content */
+    title?: string;
+    /** The primary CTA button */
+    primaryButton?: React.ReactElement;
+    testId?: string;
+} & PositionStyles & DataProps;
+declare const MicroBanner: React.FC<Props>;
+export default MicroBanner;

package/dist/feedback/MicroBanner/MicroBannerIcon/MicroBannerIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MicroBannerTheme } from '../types';
+type MicroBannerIconProps = {
+    theme: MicroBannerTheme;
+};
+declare const MicroBannerIcon: ({ theme }: MicroBannerIconProps) => React.JSX.Element;
+export default MicroBannerIcon;

package/dist/feedback/MicroBanner/MicroBannerIcon/index.d.ts

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

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

@@ -0,0 +1,7 @@
+export declare const MICRO_BANNER_THEME: {
+    INFO: "info";
+    WARNING: "warning";
+    SUCCESS: "success";
+    DANGER: "danger";
+    UPSELL: "upsell";
+};

package/dist/feedback/MicroBanner/index.d.ts

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

package/dist/feedback/MicroBanner/types.d.ts

@@ -0,0 +1,2 @@
+import { MICRO_BANNER_THEME } from './constants';
+export type MicroBannerTheme = (typeof MICRO_BANNER_THEME)[keyof typeof MICRO_BANNER_THEME];

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

@@ -2,4 +2,6 @@ export declare const PERSISTENT_BANNER_THEME: {
     UPSELL: "upsell";
     INFO: "info";
     DANGER: "danger";
+    WARNING: "warning";
+    SUCCESS: "success";
 };

package/dist/feedback/PersistentBanner/types.d.ts

@@ -1 +1 @@
-export type Theme = 'danger' | 'info' | 'upsell';
+export type Theme = 'danger' | 'info' | 'upsell' | 'warning' | 'success';

package/dist/feedback/Toast/Toast.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { ToastOptions } from 'react-toastify';
 import type { Theme } from './types';
 import 'react-toastify/dist/ReactToastify.css';
-export declare const toast: (text: string, theme?: Theme, options?: ToastOptions) => void;
+import type { ToastAction } from './types';
+export declare const toast: (text: string, theme?: Theme, options?: ToastOptions & ToastAction) => void;
 type Props = {
     containerId?: string;
 };

package/dist/feedback/Toast/types.d.ts

@@ -1 +1,5 @@
 export type Theme = 'default' | 'danger';
+export type ToastAction = {
+    actionText?: string;
+    onActionClick?: () => void;
+};

package/dist/feedback/index.d.ts

@@ -1,8 +1,9 @@
 import Spinner from './Spinner';
 import InlineBanner from './InlineBanner';
+import MicroBanner from './MicroBanner';
 import PersistentBanner from './PersistentBanner';
 import CircularProgress from './CircularProgress';
 import ProgressBar from './ProgressBar';
 import { toast } from './Toast';
 import Skeleton from './Skeleton';
-export { Spinner, InlineBanner, PersistentBanner, CircularProgress, ProgressBar, toast, Skeleton };
+export { Spinner, InlineBanner, MicroBanner, PersistentBanner, CircularProgress, ProgressBar, toast, Skeleton };

package/dist/forms/ColorField/ColorField.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+type Props = Omit<TextFieldProps, 'suffix' | 'prefix' | 'autoComplete' | 'defaultValue' | 'maxLength'>;
+declare const ColorField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default ColorField;

package/dist/forms/ColorField/ColorOverlay/ColorOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    onClose: () => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    selectedColor?: string;
+    onSelect: (color: string) => void;
+};
+declare const ColorsOverlay: ({ onClose, triggerRef, selectedColor, onSelect }: Props) => React.JSX.Element;
+export default ColorsOverlay;

package/dist/forms/ColorField/ColorOverlay/index.d.ts

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

package/dist/forms/ColorField/ColorOverlay/useColorKeyboardNavigation.d.ts

@@ -0,0 +1,4 @@
+export declare const useColorKeyboardNavigation: (selectedColor: string) => {
+    selectedColorIndex: number | null;
+    setSelectedColorIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+};

package/dist/forms/ColorField/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    color: string;
+};
+declare const ColorSwatch: ({ color }: Props) => React.JSX.Element;
+export default ColorSwatch;

package/dist/forms/ColorField/ColorSwatch/index.d.ts

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

package/dist/forms/ColorField/constants.d.ts

@@ -0,0 +1 @@
+export declare const SEQUENTIAL_COLORS: readonly ["seq-18", "seq-4", "seq-7", "seq-16", "seq-12", "seq-6", "seq-9", "seq-3", "seq-11", "seq-1", "seq-13", "seq-10", "seq-14", "seq-8", "seq-19", "seq-20", "seq-2", "seq-17", "seq-15", "seq-5"];

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

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

package/dist/forms/CurrencyField/CurrencyField.d.ts

@@ -6,7 +6,7 @@ import type { Props as TextFieldProps } from '../TextField/TextField';
  * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
 declare const CurrencyField: React.ForwardRefExoticComponent<{
-    autoComplete?: ("on" | "off") | undefined;
+    autoComplete?: ("off" | "on") | undefined;
     autoFocus?: boolean | undefined;
     caption?: React.ReactNode;
     defaultValue?: string | undefined;
@@ -28,5 +28,5 @@ declare const CurrencyField: React.ForwardRefExoticComponent<{
 } & import("../../foundation/types").DataProps & {
     currencySymbol: string;
     step?: number | undefined;
-} & Omit<TextFieldProps, "prefix" | "suffix"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<TextFieldProps, "prefix"> & React.RefAttributes<HTMLInputElement>>;
 export default CurrencyField;

package/dist/forms/DateField/DateField.d.ts

@@ -4,12 +4,12 @@ type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
-    value?: Date | null;
+    value?: Date;
     disabledDays?: (day: Date) => boolean;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     initialMonth?: Date;
-    onChange?: (e: Date | null) => void;
+    onChange?: (e: Date) => void;
     onBlur?: () => void;
     label?: React.ReactNode;
     caption?: React.ReactNode;

package/dist/forms/DateRangeField/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -16,7 +16,6 @@ type Props = {
     testId?: string;
     onMonthChange?: (month: Date) => void;
     mode: 'start-date' | 'end-date';
-    id: string;
 };
 /**Calendar overlay component*/
 declare const DateRangeCalendar: React.FC<Props>;

package/dist/forms/DateRangeField/FromDate/FromDate.d.ts

@@ -12,7 +12,7 @@ type Props = {
     maxDays?: number;
     disabled?: boolean;
     readOnly: boolean;
-    onChange: (e: Date | null) => void;
+    onChange: (e: Date) => void;
     onDayClick: () => void;
     testId?: string;
 };

package/dist/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -11,7 +11,7 @@ type Props = {
     maxDays?: number;
     disabled?: boolean;
     readOnly: boolean;
-    onChange: (e: Date | null) => void;
+    onChange: (e: Date) => void;
     onBlur: () => void;
     testId?: string;
 };

package/dist/forms/Field/Field.d.ts

@@ -4,6 +4,7 @@ type Props = {
     id: string;
     label?: React.ReactNode;
     caption?: React.ReactNode;
+    characterCount?: number;
     error?: React.ReactNode;
     children: React.ReactNode;
     testId?: string;

package/dist/forms/FormRow/FormRow.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Space } from '../../layout/Flex/types';
 type Size25Percent = '25%';
 export declare const SIZE_25_PERCENT: Size25Percent;
 type Size33Percent = '33.333%';
@@ -15,6 +16,7 @@ type Props = {
     columns?: number;
     sizes?: Size[];
     testId?: string;
+    space?: Space;
 };
 /** Easily add form fields side by side with equal size. */
 declare const FormRow: React.FC<Props>;

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -27,8 +27,10 @@ type Props<T> = {
     /** This is to allow disable the seach functionality. Use it just in some edge-cases, for example in touch devices when the user clicks on the field it opens a virtual keyboard to search, sometimes that virtual keyboard taks much space then passing `isSearchable={false}` prevents opening it. */
     isSearchable?: boolean;
     creatableButton?: React.ReactNode;
-    onCreate?: (option: string) => void;
+    /** Callback when creating a new option. For grouped options, the groupLabel parameter will be provided. For non-grouped options, groupLabel will be undefined. */
+    onCreate?: (option: string, groupLabel?: string) => void;
+    isClearable?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, prefix, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId, isSearchable, creatableButton, onCreate }: Props<T>) => React.JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, prefix, noOptionsMessage, disabled, closeOnSelect, menuShouldScrollIntoView, testId, isSearchable, creatableButton, onCreate, isClearable }: Props<T>) => React.JSX.Element;
 export default MultiSelectField;

package/dist/forms/NumberField/NumberField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Props as TextFieldProps } from '../TextField/TextField';
+/**
+ * `NumberField` is an extended `TextField` input with validation and formatting in place to properly display number values.
+ * In its default state it only allows whole numbers, but it can be configured to allow decimals and negative values.
+ */
+declare const NumberField: React.ForwardRefExoticComponent<{
+    max?: number | undefined;
+    min?: number | undefined;
+    precision?: number | undefined;
+    stepSize?: number | undefined;
+} & Omit<TextFieldProps, "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+export default NumberField;

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

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

package/dist/forms/PhoneField/usePhoneField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RefType } from '../../utils/types';
 import type { Props } from './PhoneField';
 type UseTextFieldProps = Props & {
@@ -34,10 +33,12 @@ export declare const usePhoneField: ({ autoFocus, disabled, error, id, maxLength
     metaData: {
         country: import("libphonenumber-js").CountryCode;
         phone: string;
+        parsingError?: string | undefined;
     };
     changeMeta: (data: {
         country: import("libphonenumber-js").CountryCode;
         phone: string;
+        parsingError?: string | undefined;
     }) => void;
 };
 export {};

package/dist/forms/PillSelectField/CreatableOption/CreatableOption.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    name: string;
+    createOptionLabel: React.ReactNode;
+    onCreate?: (optionLabel: string) => void;
+    /** This is used for setting the data-testid */
+    testId?: string;
+};
+/** CreatableOption element for PillSelectField. */
+declare const CreatableOption: ({ name, createOptionLabel, onCreate, testId }: Props) => React.JSX.Element;
+export default CreatableOption;

package/dist/forms/PillSelectField/CreatableOption/index.d.ts

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

package/dist/forms/PillSelectField/PillSelectField.d.ts

@@ -1,19 +1,22 @@
 import React from 'react';
-import type { SelectOption } from '../SelectField/types';
+import type { PillSelectOption } from './types';
 type Props<T> = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the pill select input */
     id?: string;
-    value?: SelectOption<T>[];
-    options: SelectOption<T>[];
-    onChange?: (e: SelectOption<T>[]) => void;
+    value?: PillSelectOption<T>[];
+    options: PillSelectOption<T>[];
+    onChange?: (e: PillSelectOption<T>[]) => void;
     label?: React.ReactNode;
     caption?: React.ReactNode;
     error?: React.ReactNode;
     disabled?: boolean;
     /** This is used for setting the data-testid */
     testId?: string;
+    onCreate?: (optionLabel: string) => void;
+    onRemoveOption?: (remainingOptions: PillSelectOption<T>[]) => void;
+    createOptionLabel?: React.ReactNode;
 };
 /** PillSelectField form element. */
-declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId }: Props<T>) => React.JSX.Element;
+declare const PillSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, label, caption, error, disabled, testId, onCreate, onRemoveOption, createOptionLabel }: Props<T>) => React.JSX.Element;
 export default PillSelectField;

package/dist/forms/PillSelectField/types.d.ts

@@ -0,0 +1,4 @@
+import type { SelectOption } from '../SelectField/types';
+export type PillSelectOption<T> = SelectOption<T> & {
+    isRemovable?: boolean;
+};

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

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

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import RadioGroupOption from '../RadioGroupOption';
 import RadioGroupBoxOption from '../RadioGroupBoxOption';
+import { Space } from '../../layout/Flex/types';
 type Props = {
     name: string;
     value?: string | number;
     onChange?: (e: string | number) => void;
     label?: React.ReactNode;
+    caption?: React.ReactNode;
     error?: React.ReactNode;
+    space?: Space;
     /**
      * **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
      *
@@ -21,5 +24,5 @@ type Props = {
     columns?: 2 | 3 | 4;
 };
 /** RadioGroupField form element. */
-declare const RadioGroupField: ({ name, value, onChange, label, error, inline, disabled, children, testId, columns }: Props) => React.JSX.Element;
+declare const RadioGroupField: ({ name, value, onChange, label, caption, error, space, inline, disabled, children, testId, columns }: Props) => React.JSX.Element;
 export default RadioGroupField;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import Button from '../../../actions/Button';
+type Props = {
+    creatableButton: React.ReactNode;
+    onClick: () => void;
+    inputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    alignLeft?: boolean;
+};
+/**
+ * Shared creatable button component used in CustomMenu and CustomGroupWithCreate.
+ * Handles both string labels and custom Button elements.
+ */
+declare const CreatableButton: ({ creatableButton, onClick, inputValue, onInputValueChange, alignLeft }: Props) => React.ReactElement<typeof Button>;
+export default CreatableButton;

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type Props = {
+    textFieldRef: React.RefObject<HTMLInputElement>;
+    onMenuInputFocus: (isFocused: boolean) => void;
+    onSubmit: () => void;
+    defaultValue?: string;
+    wrapperClassName?: string;
+    inputClassName?: string;
+    testId: string;
+};
+/**
+ * Shared input form component used in CustomMenu and CustomGroupWithCreate.
+ * Provides text input + submit button for creating new options.
+ */
+declare const CreateInputForm: ({ textFieldRef, onMenuInputFocus, onSubmit, defaultValue, wrapperClassName, inputClassName, testId }: Props) => React.JSX.Element;
+export default CreateInputForm;

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

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

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

@@ -1,2 +1,2 @@
-declare const _default: typeof import("react-select/src/components/containers").SelectContainer;
+declare const _default: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
 export default _default;

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

@@ -0,0 +1,7 @@
+import React, { ComponentProps } from 'react';
+import { components } from 'react-select';
+type Props = ComponentProps<typeof components.Group> & {
+    selectProps: any;
+};
+declare function CustomGroupWithCreate(props: Props): React.JSX.Element;
+export default CustomGroupWithCreate;

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

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

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

@@ -1,2 +1,2 @@
-declare const _default: typeof import("react-select/src/components/Option").default;
+declare const _default: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
 export default _default;