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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SelectOption, SelectOptions } from './types';
+import { DataProps } from '../../foundation/types';
 type NoOptionsMessageFunction = (input: {
     inputValue: string;
 }) => string | null;
@@ -22,7 +23,7 @@ export type Props<T> = {
     onChange?: (e: SelectOption<T>) => void;
     onBlur?: (e: SelectOption<T>) => void;
     options: SelectOptions<T>;
-    placeholder?: string;
+    placeholder?: React.ReactNode;
     /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
     prefix?: React.ReactNode;
     /** Use a suffix for things like (“%”, “Jr.”, “.00”) or icons. */
@@ -34,11 +35,12 @@ export type Props<T> = {
     /** This is used for setting the data-testid */
     testId?: string;
     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;
     /** 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;
     autoFocus?: boolean;
-};
+} & DataProps;
 /** Component to make possible choose from a predefined options. */
 declare const SelectField: <T extends unknown>(props: Props<T>) => React.JSX.Element;
 export default SelectField;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ControlProps } from 'react-select';
 export type GroupOption<T> = {
     label: string;
@@ -19,3 +20,11 @@ export type CustomOptionProps<T> = {
 export interface SelectedOptionPrefixProps<T> extends ControlProps<T, false> {
     selectedOption: SelectOption<T>;
 }
+export type CustomComponentsExtraProps = {
+    testId?: string;
+    UserCustomOption?: React.ElementType;
+    SelectedOptionPrefix?: React.ElementType;
+    creatableButton?: ReactNode;
+    onMenuInputFocus: (isFocused: boolean) => void;
+    onCreate?: (option: string, groupLabel?: string) => void;
+};

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

@@ -1,10 +1,9 @@
-/// <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, creatableButton, onCreate, isSearchable, autoFocus }: Props<T>) => {
-    selectProps: {
-        [x: string]: any;
-        [x: number]: any;
-    } & import("react-select/src/stateManager").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<import("react-select").OptionTypeBase>> & import("react-select").Props<import("react-select").OptionTypeBase, boolean, import("react-select").GroupTypeBase<import("react-select").OptionTypeBase>>;
+import { CustomComponentsExtraProps } from './types';
+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, creatableButton, onCreate, isSearchable, autoFocus, ...rest }: Props<T>) => {
+    selectProps: Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>> & {
+        componentsProps: CustomComponentsExtraProps;
+    };
     fieldProps: {
         caption: import("react").ReactNode;
         error: import("react").ReactNode;

package/dist/forms/TextField/useTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RefType } from '../../utils/types';
 import type { Props } from './TextField';
 import type { DataProps } from '../../foundation/types';
@@ -9,7 +8,7 @@ export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, dis
     inputProps: {
         'aria-describedby': string;
         'aria-invalid': boolean;
-        autoComplete: ("on" | "off") | undefined;
+        autoComplete: ("off" | "on") | undefined;
         autoFocus: boolean | undefined;
         className: string;
         'data-testid': string | undefined;

package/dist/forms/TimeField/TimeField.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
-import { StartTime, TimeInterval } from '../../utils/date';
+import { StartTime, TimeInterval, TimeRange } from '../../utils/date';
+import { TimeFormat } from './types';
 type Props = TextFieldProps & {
     onClick?: () => void;
     interval?: TimeInterval;
@@ -9,9 +10,11 @@ type Props = TextFieldProps & {
     endField?: boolean;
     duration?: string;
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
+    timeFormat?: TimeFormat;
 };
 export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
-    autoComplete?: ("on" | "off") | undefined;
+    autoComplete?: ("off" | "on") | undefined;
     autoFocus?: boolean | undefined;
     caption?: React.ReactNode;
     defaultValue?: string | undefined;
@@ -38,11 +41,13 @@ export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
     endField?: boolean | undefined;
     duration?: string | undefined;
     subtractDuration?: number | undefined;
+    calculateDuration?: ((e: TimeRange) => string) | undefined;
+    timeFormat?: TimeFormat | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 /**
  * `TimeField` are like `TextField` but it auto-format the value when the user leaves the field.
  *
  * 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 TimeField: React.ForwardRefExoticComponent<Omit<Props, "prefix" | "suffix" | "subtractDuration"> & React.RefAttributes<HTMLInputElement>>;
+declare const TimeField: React.ForwardRefExoticComponent<Omit<Props, "prefix" | "subtractDuration" | "calculateDuration" | "suffix"> & React.RefAttributes<HTMLInputElement>>;
 export default TimeField;

package/dist/forms/TimeField/TimeFieldDropdown/TimeFieldDropdown.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StartTime, TimeInterval } from '../../../utils/date';
+import { StartTime, TimeInterval, TimeRange } from '../../../utils/date';
+import { TimeFormat } from '../types';
 type TimeFieldDropdownProps = {
     trigger: React.ReactElement;
     interval: TimeInterval;
@@ -9,6 +10,8 @@ type TimeFieldDropdownProps = {
     width?: number;
     endField: boolean;
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
+    timeFormat: TimeFormat;
 };
-declare const TimeFieldDropdown: ({ trigger, interval, startTime, onOptionClick, inputValue, width, endField, subtractDuration }: TimeFieldDropdownProps) => React.JSX.Element;
+declare const TimeFieldDropdown: ({ trigger, interval, startTime, onOptionClick, inputValue, width, endField, subtractDuration, calculateDuration, timeFormat }: TimeFieldDropdownProps) => React.JSX.Element;
 export default TimeFieldDropdown;

package/dist/forms/TimeField/TimeFieldDropdownTrigger/TimeFieldDropdownTrigger.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../../TextField/TextField';
+import { TimeFormat } from '../types';
 declare const TimeFieldDropdownTrigger: React.ForwardRefExoticComponent<Omit<TextFieldProps, "suffix"> & {
     onClick?: (() => void) | undefined;
     onInputChange?: ((e: string) => void) | undefined;
     selectedTimeOption?: string | undefined;
     startTime?: string | undefined;
     duration?: string | undefined;
+    timeFormat: TimeFormat;
 } & React.RefAttributes<HTMLInputElement>>;
 export default TimeFieldDropdownTrigger;

package/dist/forms/TimeField/TimeFieldInput/TimeFieldInput.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { TimeFormat } from '../types';
 type Props = {
     inputProps: any;
     allOtherProps: any;
     onInputChange?: (e: string) => void;
     prefix?: React.ReactNode;
     duration?: string;
+    timeFormat: TimeFormat;
 };
-declare const TimeFieldInput: ({ inputProps, allOtherProps, prefix, duration }: Props) => React.JSX.Element;
+declare const TimeFieldInput: ({ inputProps, allOtherProps, prefix, duration, timeFormat }: Props) => React.JSX.Element;
 export default TimeFieldInput;

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

@@ -0,0 +1,4 @@
+export declare const TIME_FORMAT: {
+    FORMAT_24H: "24h";
+    FORMAT_AMPM: "ampm";
+};

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

@@ -1,4 +1,5 @@
 import { StartTime } from '../../utils/date';
-export declare const getTimeOptions: (interval: number, startTime?: Date, skipStartTime?: boolean) => string[];
+import { TimeFormat } from './types';
+export declare const getTimeOptions: (interval: number, startTime?: Date, skipStartTime?: boolean, timeFormat?: TimeFormat) => string[];
 export declare const getDuration: (timeOption: string, startTime: string, subtractDuration?: number) => string | undefined;
 export declare const getDateWithStartTime: (startTime: StartTime) => Date;

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

@@ -0,0 +1 @@
+export type TimeFormat = 'ampm' | '24h';

package/dist/forms/TimeRangeField/TimeRangeEnd/TimeRangeEnd.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { TimeRangeInputProps } from '../types';
-declare const TimeRangeEnd: ({ startTime, onChange, interval, placeholder, duration, disabled, testId, value, subtractDuration }: TimeRangeInputProps & {
+import { TimeRange } from '../../../utils/date';
+declare const TimeRangeEnd: ({ startTime, onChange, interval, placeholder, duration, disabled, testId, value, subtractDuration, calculateDuration, timeFormat }: TimeRangeInputProps & {
     duration?: string | undefined;
     subtractDuration?: number | undefined;
+    calculateDuration?: ((e: TimeRange) => string) | undefined;
 }) => React.JSX.Element;
 export default TimeRangeEnd;

package/dist/forms/TimeRangeField/TimeRangeField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StartTime, TimeInterval, TimeRange } from '../../utils/date';
+import { TimeFormat } from '../TimeField/types';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -17,6 +18,8 @@ type Props = {
     testId?: string;
     /** Subtract this time(in minutes) from total duration*/
     subtractDuration?: number;
+    calculateDuration?: (e: TimeRange) => string;
+    timeFormat?: TimeFormat;
 };
-declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, subtractDuration }: Props) => React.JSX.Element;
+declare const TimeRangeField: ({ name, id: inputId, value, interval, startTime, onChange, onBlur, label, caption, error, placeholder, disabled, testId, subtractDuration, calculateDuration, timeFormat }: Props) => React.JSX.Element;
 export default TimeRangeField;

package/dist/forms/TimeRangeField/TimeRangeStart/TimeRangeStart.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TimeRangeInputProps } from '../types';
-declare const TimeRangeStart: ({ startTime, onChange, interval, placeholder, id, disabled, testId, value }: TimeRangeInputProps & {
+declare const TimeRangeStart: ({ startTime, onChange, interval, placeholder, id, disabled, testId, value, timeFormat }: TimeRangeInputProps & {
     id?: string | undefined;
 }) => React.JSX.Element;
 export default TimeRangeStart;

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

@@ -1,4 +1,5 @@
 import { StartTime, TimeInterval } from '../../utils/date';
+import { TimeFormat } from '../TimeField/types';
 export type TimeRangeInputProps = {
     interval: TimeInterval;
     startTime?: StartTime;
@@ -7,4 +8,5 @@ export type TimeRangeInputProps = {
     testId?: string;
     disabled?: boolean;
     value: string;
+    timeFormat: TimeFormat;
 };

package/dist/forms/WeekField/WeekField.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/hooks/useDateFieldControllers.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
 type FieldControls = {
     id: string;
     error?: React.ReactNode;
-    value?: Date | null;
-    onChange: (e: Date | null) => void;
+    value?: Date;
+    onChange: (e: Date) => void;
     onBlur: () => void;
 };
 type Props = {
     name: string;
     id?: string;
-    value?: Date | null;
-    onChange?: (e: Date | null) => void;
+    value?: Date;
+    onChange?: (e: Date) => void;
     onBlur?: () => void;
     error?: React.ReactNode;
 };

package/dist/forms/hooks/useMultiSelectFieldControllers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SelectOption } from '../SelectField/types';
 type FieldControls<T> = {
     id: string;

package/dist/forms/hooks/usePhoneFieldControllers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CountryCode } from 'libphonenumber-js';
 type FieldControls = {
     id: string;
@@ -9,10 +8,12 @@ type FieldControls = {
     metaData: {
         country: CountryCode;
         phone: string;
+        parsingError?: string;
     };
     changeMeta: (data: {
         country: CountryCode;
         phone: string;
+        parsingError?: string;
     }) => void;
 };
 type Props = {

package/dist/forms/hooks/useRangeFieldControllers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type FieldControls<T> = {
     id: string;
     error?: React.ReactNode;

package/dist/forms/hooks/useSelectFieldControllers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SelectOption } from '../SelectField/types';
 type FieldControls<T> = {
     id: string;

package/dist/forms/index.d.ts

@@ -22,9 +22,13 @@ import FormSection from './FormSection';
 import FormFooter from './FormFooter';
 import FormFeedback from './FormFeedback';
 import PhoneField from './PhoneField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, RadioGroupBoxOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, TimeRangeField, CurrencyField, PercentageField, FormSection, FormFooter, FormFeedback, PhoneField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+import NumberField from './NumberField';
+import ColorField from './ColorField';
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, RadioGroupBoxOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, TimeRangeField, CurrencyField, PercentageField, FormSection, FormFooter, FormFeedback, PhoneField, NumberField, ColorField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions, GroupOption, CustomOptionProps, SelectedOptionPrefixProps } from './SelectField/types';
+export type { PillSelectOption } from './PillSelectField/types';
 export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';
 export type { PhoneFieldCountryCode } from './PhoneField/types';
+export { isValidPhoneNumber } from './validations';

package/dist/forms/validations.d.ts

@@ -0,0 +1 @@
+export declare const isValidPhoneNumber: (value: string | undefined) => boolean;

package/dist/foundation/domain.d.ts

@@ -1,4 +1,4 @@
 import { Color } from './tokens/color/color-types';
 import { ZIndex } from './tokens/zindex/z-index-types';
 export declare const getColor: (color?: string | Color) => string | undefined;
-export declare const getZIndex: (zIndex?: ZIndex | number) => number | undefined;
+export declare const getZIndex: (zIndex?: ZIndex | number) => number | string | undefined;

package/dist/foundation/tokens/color/color-codes.d.ts

@@ -18,25 +18,25 @@ export declare const COLOR_CODES: {
     readonly 'mint-300': " #8de4d7";
     readonly 'mint-400': " #3abda9";
     readonly 'mint-500': " #35ac9a";
-    readonly 'mint-600': " #277e71";
+    readonly 'mint-600': " #1d5e54";
     readonly 'radish-100': " #fcf0f0";
     readonly 'radish-200': " #f7d1d1";
     readonly 'radish-300': " #f0a3a3";
     readonly 'radish-400': " #e76767";
     readonly 'radish-500': " #d33434";
-    readonly 'radish-600': " #981b1e";
+    readonly 'radish-600': " #793133";
     readonly 'blueberry-100': " #f6fdff";
     readonly 'blueberry-200': " #ceecf5";
     readonly 'blueberry-300': " #9cd9eb";
     readonly 'blueberry-400': " #5bc0de";
     readonly 'blueberry-500': " #51acc7";
-    readonly 'blueberry-600': " #367385";
+    readonly 'blueberry-600': " #2c5d6b";
     readonly 'banana-100': " #fff9ed";
     readonly 'banana-200': " #ffeec9";
     readonly 'banana-300': " #ffdd92";
-    readonly 'banana-400': " #ffc74a";
-    readonly 'banana-500': " #e5b242";
-    readonly 'banana-600': " #99772c";
+    readonly 'banana-400': " #f7ba11";
+    readonly 'banana-500': " #bf9436";
+    readonly 'banana-600': " #765f2c";
     readonly 'grey-100': " #f3f3f3";
     readonly 'grey-200': " #d5d5d5";
     readonly 'grey-300': " #949494";
@@ -61,4 +61,24 @@ export declare const COLOR_CODES: {
     readonly 'blackberry-400': " #4570ff";
     readonly 'blackberry-500': " #1c5cbb";
     readonly 'blackberry-600': " #193f78";
+    readonly 'seq-1': " #00b5d8";
+    readonly 'seq-2': " #f9922b";
+    readonly 'seq-3': " #28cc6d";
+    readonly 'seq-4': " #d83f87";
+    readonly 'seq-5': " #4359ce";
+    readonly 'seq-6': " #ff6f61";
+    readonly 'seq-7': " #35e5c6";
+    readonly 'seq-8': " #a966e7";
+    readonly 'seq-9': " #905642";
+    readonly 'seq-10': " #ffb300";
+    readonly 'seq-11': " #708238";
+    readonly 'seq-12': " #4fc3f7";
+    readonly 'seq-13': " #e94057";
+    readonly 'seq-14': " #00a896";
+    readonly 'seq-15': " #6a4c93";
+    readonly 'seq-16': " #a3cb38";
+    readonly 'seq-17': " #546e7a";
+    readonly 'seq-18': " #fc9999";
+    readonly 'seq-19': " #2f80ed";
+    readonly 'seq-20': " #be3434";
 };

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -61,4 +61,132 @@ export declare const COLORS: {
     readonly 'blackberry-400': "var(--color-blackberry-400)";
     readonly 'blackberry-500': "var(--color-blackberry-500)";
     readonly 'blackberry-600': "var(--color-blackberry-600)";
+    readonly 'seq-1': "var(--color-seq-1)";
+    readonly 'seq-2': "var(--color-seq-2)";
+    readonly 'seq-3': "var(--color-seq-3)";
+    readonly 'seq-4': "var(--color-seq-4)";
+    readonly 'seq-5': "var(--color-seq-5)";
+    readonly 'seq-6': "var(--color-seq-6)";
+    readonly 'seq-7': "var(--color-seq-7)";
+    readonly 'seq-8': "var(--color-seq-8)";
+    readonly 'seq-9': "var(--color-seq-9)";
+    readonly 'seq-10': "var(--color-seq-10)";
+    readonly 'seq-11': "var(--color-seq-11)";
+    readonly 'seq-12': "var(--color-seq-12)";
+    readonly 'seq-13': "var(--color-seq-13)";
+    readonly 'seq-14': "var(--color-seq-14)";
+    readonly 'seq-15': "var(--color-seq-15)";
+    readonly 'seq-16': "var(--color-seq-16)";
+    readonly 'seq-17': "var(--color-seq-17)";
+    readonly 'seq-18': "var(--color-seq-18)";
+    readonly 'seq-19': "var(--color-seq-19)";
+    readonly 'seq-20': "var(--color-seq-20)";
+    readonly 'neutral-color': "var(--color-neutral-color)";
+    readonly 'neutral-on-color': "var(--color-neutral-on-color)";
+    readonly 'neutral-container': "var(--color-neutral-container)";
+    readonly 'neutral-on-container': "var(--color-neutral-on-container)";
+    readonly 'neutral-container-variant': "var(--color-neutral-container-variant)";
+    readonly 'neutral-on-container-variant': "var(--color-neutral-on-container-variant)";
+    readonly 'neutral-black-transparent-05': "var(--color-neutral-black-transparent-05)";
+    readonly 'neutral-black-transparent-10': "var(--color-neutral-black-transparent-10)";
+    readonly 'neutral-black-transparent-15': "var(--color-neutral-black-transparent-15)";
+    readonly 'neutral-black-transparent-20': "var(--color-neutral-black-transparent-20)";
+    readonly 'neutral-black-transparent-30': "var(--color-neutral-black-transparent-30)";
+    readonly 'neutral-black-transparent-40': "var(--color-neutral-black-transparent-40)";
+    readonly 'neutral-black-transparent-50': "var(--color-neutral-black-transparent-50)";
+    readonly 'neutral-black-transparent-60': "var(--color-neutral-black-transparent-60)";
+    readonly 'neutral-black-transparent-70': "var(--color-neutral-black-transparent-70)";
+    readonly 'neutral-black-transparent-80': "var(--color-neutral-black-transparent-80)";
+    readonly 'neutral-black-transparent-90': "var(--color-neutral-black-transparent-90)";
+    readonly 'neutral-white-transparent-05': "var(--color-neutral-white-transparent-05)";
+    readonly 'neutral-white-transparent-10': "var(--color-neutral-white-transparent-10)";
+    readonly 'neutral-white-transparent-15': "var(--color-neutral-white-transparent-15)";
+    readonly 'neutral-white-transparent-20': "var(--color-neutral-white-transparent-20)";
+    readonly 'neutral-white-transparent-30': "var(--color-neutral-white-transparent-30)";
+    readonly 'neutral-white-transparent-40': "var(--color-neutral-white-transparent-40)";
+    readonly 'neutral-white-transparent-50': "var(--color-neutral-white-transparent-50)";
+    readonly 'neutral-white-transparent-60': "var(--color-neutral-white-transparent-60)";
+    readonly 'neutral-white-transparent-70': "var(--color-neutral-white-transparent-70)";
+    readonly 'neutral-white-transparent-80': "var(--color-neutral-white-transparent-80)";
+    readonly 'neutral-white-transparent-90': "var(--color-neutral-white-transparent-90)";
+    readonly 'surface-color-overlay': "var(--color-surface-color-overlay)";
+    readonly 'surface-color-dim': "var(--color-surface-color-dim)";
+    readonly 'surface-color': "var(--color-surface-color)";
+    readonly 'surface-on-color-disabled': "var(--color-surface-on-color-disabled)";
+    readonly 'surface-on-color-subtle': "var(--color-surface-on-color-subtle)";
+    readonly 'surface-on-color': "var(--color-surface-on-color)";
+    readonly 'surface-on-color-bold': "var(--color-surface-on-color-bold)";
+    readonly 'surface-container': "var(--color-surface-container)";
+    readonly 'surface-container-high': "var(--color-surface-container-high)";
+    readonly 'surface-container-highest': "var(--color-surface-container-highest)";
+    readonly 'surface-container-disabled': "var(--color-surface-container-disabled)";
+    readonly 'surface-container-disabled-variant': "var(--color-surface-container-disabled-variant)";
+    readonly 'surface-on-container-disabled': "var(--color-surface-on-container-disabled)";
+    readonly 'surface-inverse': "var(--color-surface-inverse)";
+    readonly 'surface-on-inverse': "var(--color-surface-on-inverse)";
+    readonly 'surface-on-inverse-disabled': "var(--color-surface-on-inverse-disabled)";
+    readonly outline: "var(--color-outline)";
+    readonly 'outline-variant': "var(--color-outline-variant)";
+    readonly 'outline-inverse': "var(--color-outline-inverse)";
+    readonly 'primary-color': "var(--color-primary-color)";
+    readonly 'primary-on-color': "var(--color-primary-on-color)";
+    readonly 'primary-color-variant': "var(--color-primary-color-variant)";
+    readonly 'primary-on-color-variant': "var(--color-primary-on-color-variant)";
+    readonly 'primary-container': "var(--color-primary-container)";
+    readonly 'primary-on-container': "var(--color-primary-on-container)";
+    readonly 'primary-container-variant': "var(--color-primary-container-variant)";
+    readonly 'primary-on-container-variant': "var(--color-primary-on-container-variant)";
+    readonly 'secondary-color': "var(--color-secondary-color)";
+    readonly 'secondary-on-color': "var(--color-secondary-on-color)";
+    readonly 'secondary-container': "var(--color-secondary-container)";
+    readonly 'secondary-on-container': "var(--color-secondary-on-container)";
+    readonly 'secondary-container-variant': "var(--color-secondary-container-variant)";
+    readonly 'secondary-on-container-variant': "var(--color-secondary-on-container-variant)";
+    readonly 'tertiary-color': "var(--color-tertiary-color)";
+    readonly 'tertiary-on-color': "var(--color-tertiary-on-color)";
+    readonly 'tertiary-container': "var(--color-tertiary-container)";
+    readonly 'tertiary-on-container': "var(--color-tertiary-on-container)";
+    readonly 'tertiary-container-variant': "var(--color-tertiary-container-variant)";
+    readonly 'tertiary-on-container-variant': "var(--color-tertiary-on-container-variant)";
+    readonly 'success-color': "var(--color-success-color)";
+    readonly 'success-on-color': "var(--color-success-on-color)";
+    readonly 'success-container': "var(--color-success-container)";
+    readonly 'success-on-container': "var(--color-success-on-container)";
+    readonly 'success-container-variant': "var(--color-success-container-variant)";
+    readonly 'success-on-container-variant': "var(--color-success-on-container-variant)";
+    readonly 'danger-color': "var(--color-danger-color)";
+    readonly 'danger-on-color': "var(--color-danger-on-color)";
+    readonly 'danger-container': "var(--color-danger-container)";
+    readonly 'danger-on-container': "var(--color-danger-on-container)";
+    readonly 'danger-container-variant': "var(--color-danger-container-variant)";
+    readonly 'danger-on-container-variant': "var(--color-danger-on-container-variant)";
+    readonly 'info-color': "var(--color-info-color)";
+    readonly 'info-on-color': "var(--color-info-on-color)";
+    readonly 'info-container': "var(--color-info-container)";
+    readonly 'info-on-container': "var(--color-info-on-container)";
+    readonly 'info-container-variant': "var(--color-info-container-variant)";
+    readonly 'info-on-container-variant': "var(--color-info-on-container-variant)";
+    readonly 'upsell-color': "var(--color-upsell-color)";
+    readonly 'upsell-on-color': "var(--color-upsell-on-color)";
+    readonly 'upsell-color-variant': "var(--color-upsell-color-variant)";
+    readonly 'upsell-on-color-variant': "var(--color-upsell-on-color-variant)";
+    readonly 'upsell-container': "var(--color-upsell-container)";
+    readonly 'upsell-on-container': "var(--color-upsell-on-container)";
+    readonly 'upsell-container-variant': "var(--color-upsell-container-variant)";
+    readonly 'upsell-on-container-variant': "var(--color-upsell-on-container-variant)";
+    readonly 'warning-color': "var(--color-warning-color)";
+    readonly 'warning-on-color': "var(--color-warning-on-color)";
+    readonly 'warning-container': "var(--color-warning-container)";
+    readonly 'warning-on-container': "var(--color-warning-on-container)";
+    readonly 'warning-container-variant': "var(--color-warning-container-variant)";
+    readonly 'warning-on-container-variant': "var(--color-warning-on-container-variant)";
+    readonly 'shadow-overlay': "var(--color-shadow-overlay)";
+    readonly 'shadow-active': "var(--color-shadow-active)";
+    readonly 'hover-inverse': "var(--color-hover-inverse)";
+    readonly 'hover-lighten': "var(--color-hover-lighten)";
+    readonly 'hover-darken': "var(--color-hover-darken)";
+    readonly 'brand-neutrals-caviar-dynamic': "var(--color-brand-neutrals-caviar-dynamic)";
+    readonly 'brand-neutrals-chefscoat-dynamic': "var(--color-brand-neutrals-chefscoat-dynamic)";
+    readonly 'on-graphic-black': "var(--color-on-graphic-black)";
+    readonly 'on-graphic-white': "var(--color-on-graphic-white)";
 };

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic' | 'on-graphic-black' | 'on-graphic-white';

package/dist/foundation/types.d.ts

@@ -1,23 +1,53 @@
 export type PositionStyles = {
-    /** Shortcut for `margin`. */
+    /**
+     * @description Shortcut for `margin`.
+     * @category Positioning
+     */
     m?: string | number;
-    /** Defines the margin around of the element. */
+    /**
+     * @description Defines the margin around of the element.
+     * @category Positioning
+     */
     margin?: string | number;
-    /** Shortcut for `marginTop`. */
+    /**
+     * @description Shortcut for `marginTop`.
+     * @category Positioning
+     */
     mt?: string | number;
-    /** Defines the margin on the top of the element. */
+    /**
+     * @description Defines the margin on the top of the element.
+     * @category Positioning
+     */
     marginTop?: string | number;
-    /** Shortcut for `marginRight`. */
+    /**
+     * @description Shortcut for `marginRight`.
+     * @category Positioning
+     */
     mr?: string | number;
-    /** Defines the margin on the right side of the element. */
+    /**
+     * @description Defines the margin on the right side of the element.
+     * @category Positioning
+     */
     marginRight?: string | number;
-    /** Shortcut for `marginBottom`. */
+    /**
+     * @description Shortcut for `marginBottom`.
+     * @category Positioning
+     */
     mb?: string | number;
-    /** Defines the margin on the bottom of the element. */
+    /**
+     * @description Defines the margin on the bottom of the element.
+     * @category Positioning
+     */
     marginBottom?: string | number;
-    /** Shortcut for `marginLeft`. */
+    /**
+     * @description Shortcut for `marginLeft`.
+     * @category Positioning
+     */
     ml?: string | number;
-    /** Defines the margin on the left side of the element. */
+    /**
+     * @description Defines the margin on the left side of the element.
+     * @category Positioning
+     */
     marginLeft?: string | number;
 };
 export type DataProps = {