@7shifts/sous-chef 3.87.0-beta.2 → 3.87.1-beta.0

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/core/SousChefProvider/context/ProviderConfigContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CountryCode } from 'libphonenumber-js';
 import { TimeFormat } from '../../../forms/TimeField/types';
 export type ProviderConfigContextType = {

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

@@ -3,12 +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;
+    /** 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/MicroBanner/MicroBanner.d.ts

@@ -1,13 +1,19 @@
 import React from 'react';
 import { MicroBannerTheme } from './types';
+import { 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;
 declare const MicroBanner: React.FC<Props>;
 export default MicroBanner;

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 & {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Props } from './SelectField';
 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>) => {

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';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type FieldControls = {
     id: string;
     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;

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/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 = {

package/dist/hooks/usePositionStyles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PositionStyles } from '../foundation/types';
 type CSSPositionStyles = Pick<React.CSSProperties, 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
 export declare const usePositionStyles: ({ m, margin, marginTop, mt, marginRight, mr, marginBottom, mb, marginLeft, ml }: PositionStyles) => CSSPositionStyles;

package/dist/i18n/TranslationsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import en from './locales/en.json';
 export type TranslationsContextType = {
     i18n: typeof en;

package/dist/index.css

@@ -23,7 +23,7 @@
   unicode-range: U+0000-00FF; /* Basic Latin */
 }
 :root {
-  --font-family-heading: "Universal Sans Display", sans-serif;
+  --font-family-heading: "SF Pro", sans-serif;
   --font-family-body: "SF Pro", sans-serif;
   --font-size-100: 0.75rem;
   --font-size-200: 0.875rem;
@@ -4180,12 +4180,20 @@ input:disabled + ._Yfxkl::after {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+._GyYnE {
+  color: transparent;
+}
+._GyYnE:focus {
+  color: var(--color-surface-on-color);
+}
+._GyYnE:disabled {
+  color: transparent;
+}
 ._ddacu {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  background-color: var(--color-surface-container);
   position: absolute;
   height: 36px;
   margin-top: 1px;
@@ -4196,7 +4204,6 @@ input:disabled + ._Yfxkl::after {
 }
 ._o1-zA {
   color: var(--color-surface-on-container-disabled);
-  background-color: var(--color-surface-container-disabled);
 }
 ._Q0GfJ {
   flex-grow: 1;