@7shifts/sous-chef 0.0.0-beta-20260120211922

package/README.md

@@ -0,0 +1,59 @@
+# @7shifts/sous-chef
+
+> 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)
+
+## Install
+
+```bash
+yarn add @7shifts/sous-chef
+```
+
+or
+
+```bash
+npm install --save @7shifts/sous-chef
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react';
+
+import { DataTable } from '@7shifts/sous-chef';
+import '@7shifts/sous-chef/dist/index.css';
+
+class Example extends Component {
+    items = [
+        {
+            employeeName: 'Steve Lawrence',
+            date: 'Jun 22, 2019',
+            hours: 15
+        },
+        {
+            employeeName: 'Alex Andrade',
+            date: 'Jan 15, 2020',
+            hours: <span style={{ color: 'red' }}>8</span>
+        }
+    ];
+    render() {
+        return <DataTable items={items} />;
+    }
+}
+```
+
+## Documentation
+
+You can find the components documentation in [here](https://zeroheight.com/31613d024/p/94f423-introducing-sous-chef--components).
+
+## Contributing
+
+Check out our [contributing guide](./CONTRIBUTING.md).
+
+## License
+
+MIT © [7shifts](https://github.com/7shifts)

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

@@ -0,0 +1,41 @@
+import React from 'react';
+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;
+    /** 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;
+    onMouseLeave?: React.MouseEventHandler<Element> | undefined;
+    onBlur?: React.FocusEventHandler<Element> | undefined;
+    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;
+    /**
+     * 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 | undefined;
+} & PositionStyles & DataProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export default Button;

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

@@ -0,0 +1,28 @@
+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";
+    HOLLOW_CONTRAST: "hollow-contrast";
+    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/index.d.ts

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

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

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

package/dist/actions/Link/Link.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Target, Theme } from './types';
+import { DataProps } from '../../foundation/types';
+type Props = {
+    href: string;
+    target?: Target;
+    theme?: Theme;
+    onClick?: React.MouseEventHandler;
+    children: React.ReactNode;
+} & DataProps;
+declare const Link: ({ href, target, theme, onClick, children, ...otherProps }: Props) => React.JSX.Element;
+export default Link;

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

@@ -0,0 +1,8 @@
+export declare const LINK_THEME: {
+    PRIMARY: "primary";
+    CONTRAST: "contrast";
+};
+export declare const LINK_TARGET: {
+    SELF: "_self";
+    BLANK: "_blank";
+};

package/dist/actions/Link/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export type Theme = 'primary' | 'contrast';
+export type Target = '_self' | '_blank';

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

@@ -0,0 +1,20 @@
+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;
+/**
+ * `PaginationControls` are two buttons side by side.
+ */
+declare const PaginationControls: React.FC<Props>;
+export default PaginationControls;

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

@@ -0,0 +1,4 @@
+export declare const SHORTCUTS: {
+    PREVIOUS: string;
+    NEXT: string;
+};

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

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

package/dist/actions/Toggle/Toggle.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DataProps } from '../../foundation/types';
+type Props = {
+    /** It turns the toggle ON if `true` and OFF if `false` */
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    testId?: string;
+} & DataProps;
+/**
+ * Used when you want to allow the user to turn some information ON and OFF.
+ *
+ * _The Toggle component is not intended to be used inside a Form (use a checkbox for that). It should be used when you want to act on that action immediately._
+ */
+declare const Toggle: React.FC<Props>;
+export default Toggle;

package/dist/actions/Toggle/index.d.ts

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

package/dist/actions/index.d.ts

@@ -0,0 +1,7 @@
+import Toggle from './Toggle';
+import Button from './Button';
+import { ButtonTheme, ButtonSize } from './Button/types';
+import PaginationControls from './PaginationControls';
+import Link from './Link';
+export { Toggle, Button, PaginationControls, Link };
+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/DateFilter/DateFilter.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { WeekStart } from '../../utils/date';
+import { DateFilterMode } from './types';
+type Props = {
+    mode?: DateFilterMode;
+    weekStart?: WeekStart;
+    value: Date;
+    onChange: (selected: Date) => void;
+    testId?: string;
+};
+declare const DateFilter: React.FC<Props>;
+export default DateFilter;

package/dist/controls/DateFilter/DateFilterDisplay/DateFilterDisplay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WeekStart } from '../../../utils/date';
+import { DateFilterMode } from '../types';
+type Props = {
+    mode: DateFilterMode;
+    selectedDate: Date;
+    weekStart: WeekStart;
+    onClick: () => void;
+};
+declare const DateFilterDisplay: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export default DateFilterDisplay;

package/dist/controls/DateFilter/DateFilterDisplay/DateFilterText/DateFilterText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DateFilterMode } from '../../types';
+import { WeekStart } from '../../../../utils/date';
+type Props = {
+    mode: DateFilterMode;
+    selectedDate: Date;
+    weekStart: WeekStart;
+};
+declare const DateFilterText: ({ mode, selectedDate, weekStart }: Props) => React.JSX.Element;
+export default DateFilterText;

package/dist/controls/DateFilter/DateFilterDisplay/DateFilterText/domain.d.ts

@@ -0,0 +1,2 @@
+import { DateFilterMode } from "../../types";
+export declare const getDateString: (date: Date, mode: DateFilterMode) => string;

package/dist/controls/DateFilter/DateFilterDisplay/index.d.ts

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

package/dist/controls/DateFilter/DateFilterStepper/DateFilterStepper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DateFilterMode, StepDirection } from '../types';
+type Props = {
+    children: React.ReactNode;
+    mode: DateFilterMode;
+    stepDirection: StepDirection;
+    date: Date;
+    onChange: (selected: Date) => void;
+};
+declare const DateFilterStepper: ({ children, mode, stepDirection, onChange, date }: Props) => React.JSX.Element;
+export default DateFilterStepper;

package/dist/controls/DateFilter/DateFilterStepper/domain.d.ts

@@ -0,0 +1,2 @@
+import { DateFilterMode, StepDirection } from "../types";
+export declare const handleDateStepper: (date: Date, mode: DateFilterMode, stepDirection: StepDirection, onChange: (selected: Date) => void) => void;

package/dist/controls/DateFilter/DateFilterStepper/index.d.ts

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

package/dist/controls/DateFilter/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const DATE_FILTER_MODE: {
+    DAY: "day";
+    WEEK: "week";
+    MONTH: "month";
+};
+export declare const STEP_DIRECTION: {
+    FORWARD: "forward";
+    BACKWARD: "backward";
+};

package/dist/controls/DateFilter/index.d.ts

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

package/dist/controls/DateFilter/types.d.ts

@@ -0,0 +1,3 @@
+import { CalendarMode } from "../../overlay/Calendar/types";
+export type DateFilterMode = CalendarMode | 'month';
+export type StepDirection = 'forward' | 'backward';

package/dist/controls/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    options: string[];
+    onChange: (action: string) => void;
+    value: string;
+    testId?: string;
+};
+declare const SegmentedControl: ({ options, onChange, value, testId }: Props) => React.JSX.Element;
+export default SegmentedControl;

package/dist/controls/SegmentedControl/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props } from '../../forms/SelectField/SelectField';
+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, creatableButton, onCreate, ...rest }: ToolbarSelectProps<T>) => React.JSX.Element;
+export default ToolbarSelect;

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

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

package/dist/controls/index.d.ts

@@ -0,0 +1,6 @@
+import ToolbarSelect from './ToolbarSelect';
+import DateFilter from './DateFilter';
+import SegmentedControl from './SegmentedControl';
+import { DateFilterMode } from './DateFilter/types';
+export { ToolbarSelect, DateFilter, SegmentedControl };
+export type { DateFilterMode };

package/dist/core/ComponentIdentifier/ComponentIdentifier.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { COMPONENT_NAMES } from './constants';
+type Props = {
+    componentName: keyof typeof COMPONENT_NAMES;
+    children: React.ReactNode;
+};
+/**
+ * Used so sub-components con identify if it is placed inside some component using the `useIsInsideComponent` hook
+ */
+declare const ComponentIdentifier: ({ componentName, children }: Props) => React.JSX.Element;
+export default ComponentIdentifier;

package/dist/core/ComponentIdentifier/ComponentIdentifierContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ModalContextType = {
+    componentName: string;
+};
+declare const ComponentIdentifierContext: React.Context<ModalContextType>;
+export default ComponentIdentifierContext;

package/dist/core/ComponentIdentifier/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const COMPONENT_NAMES: {
+    BUTTON: "BUTTON";
+};

package/dist/core/ComponentIdentifier/useIsInsideComponent.d.ts

@@ -0,0 +1,2 @@
+import { COMPONENT_NAMES } from './constants';
+export declare const useIsInsideComponent: (parentComponentName: keyof typeof COMPONENT_NAMES) => boolean;

package/dist/core/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+declare const Portal: React.FC<Props>;
+export default Portal;

package/dist/core/Portal/index.d.ts

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

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

@@ -0,0 +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, timeFormat }: Props) => React.JSX.Element;
+export default SousChefProvider;

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

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

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

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

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+import SousChefProvider from './SousChefProvider';
+export { SousChefProvider };

package/dist/empty_states/EmptyState/EmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const EmptyState: (props: Props) => React.JSX.Element;
+export default EmptyState;

package/dist/empty_states/EmptyState/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmptyStateProps } from './types';
+declare const EmptyStateContainer: ({ header, title, children, mediaUrl, actions, size, caption, isPaywall, testId }: EmptyStateProps) => React.JSX.Element;
+export default EmptyStateContainer;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    isPaywall: Boolean;
+    isInsideModal?: Boolean;
+    actions: {
+        primary?: React.ReactElement;
+        secondary?: React.ReactElement;
+    };
+};
+declare const EmptyStateContainerCTA: ({ isPaywall, isInsideModal, actions }: Props) => React.JSX.Element;
+export default EmptyStateContainerCTA;

package/dist/empty_states/EmptyStateContainer/EmptyStateContainerCTA/index.d.ts

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmptyStateProps } from '../types';
+declare const EmptyStateContainerInline: ({ header, title, children, mediaUrl, actions, size, caption, isPaywall, testId }: EmptyStateProps) => React.JSX.Element;
+export default EmptyStateContainerInline;

package/dist/empty_states/EmptyStateContainer/EmptyStateContainerInline/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { EmptyStateProps } from '../types';
+type Props = {
+    mediaComponent?: React.ReactNode;
+} & EmptyStateProps;
+declare const EmptyStateContainerStack: ({ header, title, children, mediaUrl, actions, caption, isPaywall, testId, mediaComponent }: Props) => React.JSX.Element;
+export default EmptyStateContainerStack;

package/dist/empty_states/EmptyStateContainer/EmptyStateContainerStack/index.d.ts

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

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

@@ -0,0 +1,5 @@
+export declare const EMPTY_STATE_SIZE: {
+    SMALL: "small";
+    MEDIUM: "medium";
+    LARGE: "large";
+};

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/index.d.ts

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

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export type EmptyStateSize = 'small' | 'medium' | 'large';
+export type EmptyStateProps = {
+    /** The name of the highlighted feature or add-on */
+    header?: ReactNode;
+    /** Sets the title element */
+    title: ReactNode;
+    /** Sets the body text */
+    children?: ReactNode;
+    /** Path to the image/gif to display */
+    mediaUrl?: string;
+    /** Caption that appears below the CTAs */
+    actions?: {
+        primary?: React.ReactElement;
+        secondary?: React.ReactElement;
+    };
+    /** Controls the size and appearance of the component */
+    size?: EmptyStateSize;
+    /** Caption that appears below the cta options */
+    caption?: ReactNode;
+    isPaywall?: Boolean;
+    /** This is used for setting a data-testid on the component*/
+    testId?: string;
+};
+export type EmptyStateAsCard = {
+    as?: 'card';
+    onClose?: () => void;
+} & EmptyStateProps;
+export type EmptyStateAsBanner = {
+    as?: 'banner';
+} & EmptyStateProps;

package/dist/empty_states/Paywall/Paywall.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const Paywall: (props: Props) => React.JSX.Element;
+export default Paywall;

package/dist/empty_states/Paywall/index.d.ts

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

package/dist/empty_states/index.d.ts

@@ -0,0 +1,3 @@
+import Paywall from './Paywall';
+import EmptyState from './EmptyState';
+export { Paywall, EmptyState };

package/dist/feedback/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    progress: number;
+    maxValue?: number;
+    children?: React.ReactNode;
+    testId?: string;
+};
+declare const CircularProgress: ({ progress, maxValue, children, testId }: Props) => React.JSX.Element;
+export default CircularProgress;

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+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;
+declare const InlineBanner: React.FC<Props>;
+export default InlineBanner;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InlineBannerTheme } from '../types';
+type Props = {
+    primaryButton: React.ReactElement;
+    secondaryButton?: React.ReactElement;
+    caption?: React.ReactNode;
+    multiLine: boolean;
+    bannerTheme: InlineBannerTheme;
+};
+declare const InlineBannerCTA: ({ primaryButton, secondaryButton, caption, multiLine, bannerTheme }: Props) => React.JSX.Element;
+export default InlineBannerCTA;

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

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