@7shifts/sous-chef 4.7.0 → 4.7.2

package/dist/index.modern.js

@@ -646,7 +646,7 @@ const updateMisalignedOverlay = (overlayPosition, arrowPosition, tooltipRectPosi
 const calculateOverlayPosition$2 = (actualPlacement, anchorPosition, tooltipWidth = 156) => {
   // some maths to align the tooltip with whatever you just hovered over (the 'target')
   const position = {
-    width: tooltipWidth - PADDING * 2,
+    width: Math.ceil(tooltipWidth) - PADDING * 2,
     left: 0,
     top: 0
   };
@@ -919,6 +919,9 @@ const TooltipElement = ({
     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.
+ */
 const Tooltip = forwardRef(TooltipElement);
 const isTooltipCompatible = element => {
   return React__default.isValidElement(element) && typeof element.type === 'string';
@@ -11147,6 +11150,9 @@ const TimeFieldDropdownElement = (_ref, ref) => {
 };
 const TimeFieldDropdownTrigger = 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.
+ */
 const Dropdown = ({
   trigger,
   triggersOn: _triggersOn = DROPDOWN_TRIGGER.CLICK,
@@ -11906,6 +11912,9 @@ const useCardContext = () => {
 };
 
 const _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.
+ */
 const Card = _ref => {
   let {
       children,
@@ -12013,6 +12022,9 @@ const CalloutCard = ({
   }, React__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.
+ */
 const Breadcrumbs = ({
   children
 }) => {
@@ -12081,6 +12093,9 @@ const PAGE_SIZES = {
   RESTRICTED: 'restricted'
 };
 
+/**
+ * Page component is used to control the elements within a page like breadcrumbs, title, subtitle, actions, banner, and filter bar.
+ */
 const Page = ({
   children,
   breadcrumbs,
@@ -12171,6 +12186,9 @@ const useModalContext = () => {
 };
 
 const _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.
+ */
 const Modal = _ref => {
   let {
       children,
@@ -12777,7 +12795,9 @@ const StarShape = ({
   strokeWidth: "2"
 }));
 
-/**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.
+ */
 const Calendar = ({
   mode: _mode = CALENDAR_MODE.DAY,
   position: _position = CALENDAR_PLACEMENT.BOTTOM,
@@ -13030,6 +13050,9 @@ const 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"};
 
 const _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.
+ */
 const HintModal = _ref => {
   let {
       header,
@@ -13126,6 +13149,9 @@ const 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.
+ */
 const Popover = props => {
   /**
    * We are using the Dropdown component to implement the Popover component because they share a lot of the same functionality and structure.
@@ -13165,6 +13191,9 @@ const 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.
+ */
 const Badge = forwardRef(BadgeElement);
 
 const MenuItem = ({
@@ -13757,6 +13786,9 @@ const InlineBannerIcon = ({
 };
 
 const _excluded$bg = ["children", "theme", "icon", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
+/**
+ * InlineBanner displays a contextual message inline within a page or section.
+ */
 const InlineBanner = _ref => {
   let {
       children,
@@ -13877,6 +13909,9 @@ const ButtonCTA = ({
 };
 
 const _excluded$bf = ["children", "theme", "icon", "hideIcon", "title", "primaryButton", "testId"];
+/**
+ * MicroBanner is a compact notification component for tight spaces (like top bars).
+ */
 const MicroBanner = _ref => {
   let {
       children,
@@ -13930,6 +13965,9 @@ const 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.
+ */
 const PersistentBanner = ({
   theme: _theme = PERSISTENT_BANNER_THEME.INFO,
   children,
@@ -14029,6 +14067,9 @@ const useProgress = (progress, maxValue, getMetric = getProgressMetric) => {
 
 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.
+ */
 const CircularProgress = ({
   progress,
   maxValue: _maxValue = 100,
@@ -14066,6 +14107,9 @@ const CircularProgress = ({
 
 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.
+ */
 const ProgressBar = ({
   progress,
   maxValue,
@@ -14108,6 +14152,9 @@ const SKELETON_COMPONENT = {
 };
 
 const _excluded$be = ["as", "testId", "width", "height"];
+/**
+ * Skeleton renders an animated placeholder that mirrors the shape of content while it is loading.
+ */
 const Skeleton = _ref => {
   let {
       as,
@@ -14751,6 +14798,9 @@ const DataTableEmptyState = ({
 };
 
 const _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.
+ */
 const DataTable = _ref => {
   let {
       items,
@@ -14955,6 +15005,9 @@ const AccordionItem = props => {
 var styles$N = {"accordion":"_058SP"};
 
 const _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.
+ */
 const Accordion = _ref => {
   let {
       items,
@@ -14996,6 +15049,9 @@ const 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.
+ */
 const ActionList = ({
   children,
   testId,
@@ -16084,6 +16140,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.
+ */
 const FormSection = ({
   children,
   title,
@@ -16144,6 +16203,9 @@ const FormFooterActions = ({
   }, primaryButton, secondaryButton), tertiaryButton);
 };
 
+/**
+ * FormFooter is meant to be used as the footer of a form, and it contains actions (primary, secondary, tertiary).
+ */
 const FormFooter = ({
   children,
   actions,
@@ -16372,7 +16434,9 @@ const TextFieldElement = (_ref, ref) => {
     suffix: suffix
   }, React__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.
+ */
 const TextField = 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"};
@@ -16578,6 +16642,9 @@ const PillSelectField = ({
 var styles$w = {"week-select-field":"_IYHYX","week-select-field__day":"_JnbPv","week-select-field__day-pill":"_9GwLj","week-select-field__day-abbr":"_WcKdi","week-select-field__day-num":"_MQ3xL"};
 
 const toKey = d => `${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.
+ */
 const WeekSelectField = ({
   name,
   id: inputId,
@@ -16704,10 +16771,10 @@ const RadioGroupBoxOption = ({
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$u['radio-group-box-option']
+    className: styles$u['radio-group-box-option'],
+    "data-testid": testId
   }, React__default.createElement("input", {
     type: "radio",
-    "data-testid": testId,
     id: id,
     name: radioGroupContext.name,
     value: value,
@@ -18373,6 +18440,9 @@ const PercentageElement = (_ref, ref) => {
  */
 const PercentageField = forwardRef(PercentageElement);
 
+/**
+ * FormFeedback displays contextual feedback for a form field, such as an error message or validation message.
+ */
 const FormFeedback = ({
   children,
   fieldId,
@@ -19353,6 +19423,9 @@ const CountrySelector = ({
 };
 
 const _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.
+ */
 const PhoneField = _ref => {
   let {
       disabledCountry = false,
@@ -19916,6 +19989,9 @@ const 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.
+ */
 const ColorField = forwardRef(ColorFieldElement);
 
 /**
@@ -20120,6 +20196,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.
+ */
 const Avatar = ({
   children,
   color: _color = COLORS['surface-on-color-subtle'],
@@ -20175,6 +20254,9 @@ const 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.
+ */
 const Chip = ({
   children,
   theme: _theme = CHIP_THEME.MARKETING,
@@ -20251,6 +20333,9 @@ const 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.
+ */
 const Pill = forwardRef(PillElement);
 
 const getIllustrationStyles = (style = {}, theme = 'light', size = '140px') => _extends({
@@ -64772,6 +64857,9 @@ const PrimaryNavHeader = ({
 
 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.
+ */
 const PrimaryNav = ({
   children,
   isExpanded,
@@ -65090,6 +65178,9 @@ function TabsContextProvider({
   }, children);
 }
 
+/**
+ * Tabs organize content into sections within a single view, letting users switch between them without leaving the page.
+ */
 const Tabs = ({
   children,
   value,
@@ -65350,6 +65441,9 @@ const EmptyStateContainer = ({
 
 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.
+ */
 const Paywall = props => {
   const {
     header,
@@ -65388,6 +65482,9 @@ const 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.
+ */
 const EmptyState = props => {
   const {
     header,