@7shifts/sous-chef 4.7.1 → 4.7.2

package/dist/index.js

@@ -953,6 +953,9 @@ var TooltipElement = function TooltipElement(_ref, forwardedRef) {
     ref: containerRef
   }), children, overlayElement);
 };
+/**
+ * Tooltip is a small, non-interactive label that appears on hover to provide a brief explanation. It is the lightest overlay in the system — low interruption, no interaction, disappears when the user moves away. Its job is to add micro-clarity: explaining an icon, defining an abbreviation, or surfacing supplementary detail without cluttering the UI.
+ */
 var Tooltip = React.forwardRef(TooltipElement);
 var isTooltipCompatible = function isTooltipCompatible(element) {
   return React__default["default"].isValidElement(element) && typeof element.type === 'string';
@@ -11132,6 +11135,9 @@ var TimeFieldDropdownElement = function TimeFieldDropdownElement(_ref, ref) {
 };
 var TimeFieldDropdownTrigger = React.forwardRef(TimeFieldDropdownElement);
 
+/**
+ * Dropdown is an overlay that reveals a list of actions or options when a user clicks or hovers a trigger element. It is the go-to pattern for contextual menus — things like "Edit, Duplicate, Delete" on a table row, or a set of filter options behind a button.
+ */
 var Dropdown = function Dropdown(_ref) {
   var trigger = _ref.trigger,
     _ref$triggersOn = _ref.triggersOn,
@@ -11907,6 +11913,9 @@ var useCardContext = function useCardContext() {
 };
 
 var _excluded$bl = ["children", "onClick", "onClose", "isSelected", "disabled", "actions", "testId"];
+/**
+ * Card is a versatile container that groups related content or options into a visually distinct surface. It's used to introduce visual separation between pieces of content without requiring a full page boundary. It is used to perceptually group content into a meaningful whole. Cards are simple container components that can hold whatever content the designer sees fit.
+ */
 var Card = function Card(_ref) {
   var _classnames, _classnames2, _classnames3, _classnames4;
   var children = _ref.children,
@@ -12000,6 +12009,9 @@ var CalloutCard = function CalloutCard(_ref) {
   }, React__default["default"].createElement(IconTimes, null)))));
 };
 
+/**
+ * Breadcrumbs show the user where they are in the app's hierarchy and let them navigate back up to a parent page. They appear at the top of a page when that page is reached by drilling into a deeper level of the product.
+ */
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var children = _ref.children;
   return React__default["default"].createElement(Inline, {
@@ -12068,6 +12080,9 @@ var PAGE_SIZES = {
   RESTRICTED: 'restricted'
 };
 
+/**
+ * Page component is used to control the elements within a page like breadcrumbs, title, subtitle, actions, banner, and filter bar.
+ */
 var Page = function Page(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -12155,6 +12170,9 @@ var useModalContext = function useModalContext() {
 };
 
 var _excluded$bk = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
+/**
+ * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
+ */
 var Modal = function Modal(_ref) {
   var children = _ref.children,
     header = _ref.header,
@@ -12764,7 +12782,9 @@ var StarShape = function StarShape(_ref7) {
   }));
 };
 
-/**Calendar overlay component*/
+/**
+ * Calendar is a date picker component that allows users to select a single day or a week. Used when you want to trigger it from a custom element such a button.
+ */
 var Calendar = function Calendar(_ref) {
   var _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
@@ -13026,6 +13046,9 @@ var useLocalStorage = function useLocalStorage(key, initialValue) {
 var styles$17 = {"hint-modal":"_NwD6V","hint-modal--after-open":"_4ofZb","hint-modal--before-close":"_hGoMD","hint-modal__overlay":"_iK5zl","hint-modal__image":"_V9hLa","hint-modal__body":"_oOqUg","hint-modal__close-button":"_5zcBK"};
 
 var _excluded$bi = ["header", "children", "mediaUrl", "onClose", "modalId", "primaryButton", "secondaryButton", "testId", "onSetDoNotShowAgainStatus"];
+/**
+ * Hint Modal is a lightweight modal used to surface tips, guidance, or onboarding callouts to users the first time they encounter a feature or page. Unlike a regular Modal, it is not triggered by a user action — it appears automatically when the user navigates somewhere that warrants a guided introduction. It includes a "Don't show this again" option so users can dismiss it permanently once they've absorbed the information.
+ */
 var HintModal = function HintModal(_ref) {
   var header = _ref.header,
     children = _ref.children,
@@ -13126,6 +13149,9 @@ var HintModal = function HintModal(_ref) {
   }, secondaryButtonUpdated, primaryButtonUpdated)))));
 };
 
+/**
+ * Popover is a contextual overlay "widget" that appears anchored to a trigger element and can contain rich, interactive content. It sits between a `Tooltip` and a `Modal` in terms of weight — less disruptive than a modal, but capable of real interaction unlike a tooltip. Use it when you need the user to take action in context, without pulling them away from what they were doing.
+ */
 var Popover = function Popover(props) {
   /**
    * We are using the Dropdown component to implement the Popover component because they share a lot of the same functionality and structure.
@@ -13158,6 +13184,9 @@ var BadgeElement = function BadgeElement(_ref, forwardedRef) {
     "data-testid": testId
   }, otherProps), children));
 };
+/**
+ * Badge is a small circular indicator used to draw attention to something associated with another element — a count, a status, or a quick action.
+ */
 var Badge = React.forwardRef(BadgeElement);
 
 var MenuItem = function MenuItem(_ref) {
@@ -13758,6 +13787,9 @@ var InlineBannerIcon = function InlineBannerIcon(_ref) {
 };
 
 var _excluded$bg = ["children", "theme", "icon", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
+/**
+ * InlineBanner displays a contextual message inline within a page or section.
+ */
 var InlineBanner = function InlineBanner(_ref) {
   var _classnames, _classnames2, _classnames3;
   var children = _ref.children,
@@ -13865,6 +13897,9 @@ var ButtonCTA = function ButtonCTA(_ref) {
 };
 
 var _excluded$bf = ["children", "theme", "icon", "hideIcon", "title", "primaryButton", "testId"];
+/**
+ * MicroBanner is a compact notification component for tight spaces (like top bars).
+ */
 var MicroBanner = function MicroBanner(_ref) {
   var children = _ref.children,
     _ref$theme = _ref.theme,
@@ -13915,6 +13950,9 @@ var PERSISTENT_BANNER_THEME = {
 
 var styles$$ = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn","persistent-banner--success":"_hU34n"};
 
+/**
+ * PersistentBanner displays a full-width message above the main navigation.
+ */
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
   var _ref$theme = _ref.theme,
@@ -14014,6 +14052,9 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
 
 var styles$_ = {"circular-progress":"_UI0Fo","circular-progress__label":"_6PNwZ","circular-progress__track":"_alBLB","circular-progress__indicator":"_VADa6"};
 
+/**
+ * CircularProgress displays a circular track that fills as a count advances toward a total.
+ */
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
     _ref$maxValue = _ref.maxValue,
@@ -14050,6 +14091,9 @@ var CircularProgress = function CircularProgress(_ref) {
 
 var styles$Z = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__indicator--complete":"_D9yNp","progress-bar__steps":"_8kdeO"};
 
+/**
+ * ProgressBar shows a horizontal bar that fills as a task advances.
+ */
 var ProgressBar = function ProgressBar(_ref) {
   var _classNames;
   var progress = _ref.progress,
@@ -14091,6 +14135,9 @@ var SKELETON_COMPONENT = {
 };
 
 var _excluded$be = ["as", "testId", "width", "height"];
+/**
+ * Skeleton renders an animated placeholder that mirrors the shape of content while it is loading.
+ */
 var Skeleton = function Skeleton(_ref) {
   var _classnames;
   var as = _ref.as,
@@ -14705,6 +14752,9 @@ var DataTableEmptyState = function DataTableEmptyState(_ref) {
 };
 
 var _excluded$bc = ["items", "columns", "itemComponent", "maxHeight", "hasPrevious", "hasNext", "onPreviousClick", "onNextClick", "onSort", "isLoading", "showActionMenu", "footerComponent", "hasVerticalBorders", "testId", "skeletonRowLayout", "stickyColumns", "emptyState"];
+/**
+ * DataTable displays structured data in rows and columns. Use it when data is inherently tabular — each row represents a record and each column represents an attribute of that record.
+ */
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
   var items = _ref.items,
@@ -14905,6 +14955,9 @@ var AccordionItem = function AccordionItem(props) {
 var styles$N = {"accordion":"_058SP"};
 
 var _excluded$bb = ["items", "onExpand", "defaultOpenId"];
+/**
+ * Accordion groups related content into a list of collapsible sections. Only one section can be open at a time, keeping the interface compact while still making all content accessible.
+ */
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     onExpand = _ref.onExpand,
@@ -14945,6 +14998,9 @@ var Accordion = function Accordion(_ref) {
 
 var styles$M = {"action-list":"_pWke5","action-list__title":"_p8I7K","action-list__empty-state":"_l-tFB"};
 
+/**
+ * A list of tasks or items that require user attention and can be completed with an action. Each item should have at least one clear action for the user to take.
+ */
 var ActionList = function ActionList(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
@@ -16073,6 +16129,9 @@ var styles$C = {"form--standard-size":"_8-Ykj"};
 
 var styles$B = {"form-section":"_3uYIj","form-section__title":"_2WdOf","form-section__subtitle":"_zybxx","form-section--no-margin":"_xT-U1"};
 
+/**
+ * FormSection is a component that groups related form fields together, optionally with a title and subtitle. It can also be rendered as a card for visual separation.
+ */
 var FormSection = function FormSection(_ref) {
   var _classnames;
   var children = _ref.children,
@@ -16131,6 +16190,9 @@ var FormFooterActions = function FormFooterActions(_ref) {
   }, primaryButton, secondaryButton), tertiaryButton);
 };
 
+/**
+ * FormFooter is meant to be used as the footer of a form, and it contains actions (primary, secondary, tertiary).
+ */
 var FormFooter = function FormFooter(_ref) {
   var children = _ref.children,
     actions = _ref.actions,
@@ -16363,7 +16425,9 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
     suffix: suffix
   }, React__default["default"].createElement("input", _extends({}, inputProps))));
 };
-/** A basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.  */
+/**
+ * TextField is a basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.
+ */
 var TextField = React.forwardRef(TextFieldElement);
 
 var styles$x = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
@@ -16582,6 +16646,9 @@ var styles$w = {"week-select-field":"_IYHYX","week-select-field__day":"_JnbPv","
 var toKey = function toKey(d) {
   return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate();
 };
+/**
+ * WeekSelectField is a form field that allows the user to select one or more days from a week, displayed as pill-shaped buttons.
+ */
 var WeekSelectField = function WeekSelectField(_ref) {
   var _formikState$value;
   var name = _ref.name,
@@ -18468,6 +18535,9 @@ var PercentageElement = function PercentageElement(_ref, ref) {
  */
 var PercentageField = React.forwardRef(PercentageElement);
 
+/**
+ * FormFeedback displays contextual feedback for a form field, such as an error message or validation message.
+ */
 var FormFeedback = function FormFeedback(_ref) {
   var children = _ref.children,
     fieldId = _ref.fieldId,
@@ -19449,6 +19519,9 @@ var CountrySelector = function CountrySelector(_ref) {
 };
 
 var _excluded$a_ = ["disabledCountry", "priorityCountries"];
+/**
+ * PhoneField is a text field that allows the user to input a phone number, with an optional country selector for international numbers.
+ */
 var PhoneField = function PhoneField(_ref) {
   var _classNames;
   var _ref$disabledCountry = _ref.disabledCountry,
@@ -20044,6 +20117,9 @@ var ColorFieldElement = function ColorFieldElement(props, ref) {
     allowCustomColor: props.allowCustomColor
   }));
 };
+/**
+ * ColorField is a text field that allows the user to select a color from a palette of sequential colors or a custom color picker.
+ */
 var ColorField = React.forwardRef(ColorFieldElement);
 
 /**
@@ -20260,6 +20336,9 @@ function useIsVisibleInViewPort() {
   };
 }
 
+/**
+ * Avatar represents a person or entity — such as a company, location, department, or role — with a visual identifier. It appears wherever a person or entity's identity needs to be communicated at a glance.
+ */
 var Avatar = function Avatar(_ref) {
   var _classnames;
   var children = _ref.children,
@@ -20318,6 +20397,9 @@ var CHIP_THEME = {
 
 var styles$e = {"chip":"_Cg5Nf","chip__children":"_e3zFF","chip--marketing":"_b60R5","chip--success":"_ItVyo","chip--upsell":"_iUCAH","chip--warning":"_RbXoR","chip--info":"_NiP9z","chip--danger":"_2ltep","chip--ai":"_1ZhCH"};
 
+/**
+ * Chip is a compact label used to communicate status about a nearby element — things like feature availability, product tier, or release stage. It is visually similar to Pill but serves a distinct purpose: where Pill communicates the status of data or records, Chip communicates the status of the product or interface itself.
+ */
 var Chip = function Chip(_ref) {
   var _classnames;
   var children = _ref.children,
@@ -20379,6 +20461,9 @@ var PillElement = function PillElement(_ref, forwardedRef) {
     className: styles$d['pill__children']
   }, formattedChildren));
 };
+/**
+ * Pill is a compact status label that communicates the current state of a data record or object. It appears alongside the thing it describes and gives users a quick, at-a-glance read on what state something is in — approved, pending, active, declined, and so on.
+ */
 var Pill = React.forwardRef(PillElement);
 
 var getIllustrationStyles = function getIllustrationStyles(style, theme, size) {
@@ -63523,6 +63608,9 @@ var PrimaryNavHeader = function PrimaryNavHeader(_ref) {
 
 var styles$b = {"primary-nav":"_Smo46","primary-nav--dark":"_-6GAa","primary-nav--collapsed":"_w-QAC","primary-nav__content":"_UCA59","primary-nav--expanded":"_B7Nse"};
 
+/**
+ * PrimaryNav is a vertical navigation component that provides a consistent way for users to navigate through the main sections of an application.
+ */
 var PrimaryNav = function PrimaryNav(_ref) {
   var children = _ref.children,
     isExpanded = _ref.isExpanded,
@@ -63828,6 +63916,9 @@ function TabsContextProvider(_ref) {
   }, children);
 }
 
+/**
+ * Tabs organize content into sections within a single view, letting users switch between them without leaving the page.
+ */
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     value = _ref.value,
@@ -64075,6 +64166,9 @@ var EmptyStateContainer = function EmptyStateContainer(_ref) {
 
 var styles$1 = {"paywall--as-card":"_Eod9y","paywall--as-card--centered":"_dpIXc"};
 
+/**
+ * Paywall is a specialised empty state for content that is locked behind a paid plan or add-on the user does not currently have.
+ */
 var Paywall = function Paywall(props) {
   var header = props.header,
     title = props.title,
@@ -64111,6 +64205,9 @@ var Paywall = function Paywall(props) {
 
 var styles = {"empty-state--as-card":"_KzIqD","empty-state--as-card--centered":"_3TdW7"};
 
+/**
+ * EmptyState component renders a message or illustration when there is no data to display. Most commonly seen in first time interactions with a product or page, but also when data’s been deleted or unavailable.
+ */
 var EmptyState = function EmptyState(props) {
   var header = props.header,
     title = props.title,