@7shifts/sous-chef 3.93.0 → 3.95.0

package/dist/index.js

@@ -317,7 +317,7 @@ var kebabize = function kebabize(str) {
   });
 };
 
-var _excluded$d$ = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
+var _excluded$e3 = ["m", "margin", "mt", "marginTop", "mr", "marginRight", "mb", "marginBottom", "ml", "marginLeft"];
 var getPositionProps = function getPositionProps(_ref) {
   var m = _ref.m,
     margin = _ref.margin,
@@ -329,7 +329,7 @@ var getPositionProps = function getPositionProps(_ref) {
     marginBottom = _ref.marginBottom,
     ml = _ref.ml,
     marginLeft = _ref.marginLeft,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$d$);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$e3);
   return {
     positionProps: {
       m: m,
@@ -363,7 +363,7 @@ var getDataProps = function getDataProps(props, config) {
   });
 };
 
-var _excluded$d_ = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
+var _excluded$e2 = ["children", "space", "flex", "alignItems", "justifyContent", "inlineFlex", "direction", "flexItems", "flexWrap", "flexGrow", "testId", "extraClass"];
 /**
  * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef
  */
@@ -388,7 +388,7 @@ var Flex = function Flex(_ref) {
     flexGrow = _ref.flexGrow,
     testId = _ref.testId,
     extraClass = _ref.extraClass,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d_);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e2);
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
@@ -419,14 +419,14 @@ var Flex = function Flex(_ref) {
   }));
 };
 
-var _excluded$dZ = ["alignItems"];
+var _excluded$e1 = ["alignItems"];
 /**
  * Layout component to easily stack elements up in a column.
  */
 var Stack = function Stack(_ref) {
   var _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$dZ);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e1);
   return React__namespace.createElement(Flex, _extends({}, props, {
     alignItems: alignItems,
     direction: "column"
@@ -435,7 +435,7 @@ var Stack = function Stack(_ref) {
 
 var styles$1s = {"caption":"_tMhXr","label":"_NfOw5","label--truncate":"_M3aFK","toggle":"_QDQZ1","toggle__label":"_52dky","toggle__caption":"_A-tgL","toggle__switch":"_kBjjH"};
 
-var _excluded$dY = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
+var _excluded$e0 = ["checked", "label", "caption", "onChange", "disabled", "id", "testId"];
 /**
  * Used when you want to allow the user to turn some information ON and OFF.
  *
@@ -450,7 +450,7 @@ var Toggle = function Toggle(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     id = _ref.id,
     testId = _ref.testId,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$dY);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$e0);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   return React__default["default"].createElement(Stack, {
@@ -979,7 +979,7 @@ var COMPONENT_NAMES = {
   BUTTON: 'BUTTON'
 };
 
-var _excluded$dX = ["children", "type", "theme", "disabled", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "id", "loading", "title", "href", "target", "testId", "size"],
+var _excluded$d$ = ["children", "type", "theme", "disabled", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "id", "loading", "title", "href", "target", "testId", "size"],
   _excluded2 = ["id", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "onFocus", "onKeyDown", "className", "type", "disabled", "href", "target", "children", "position", "dataProps"];
 var ButtonComponent = function ButtonComponent(_ref, ref) {
   var _classnames;
@@ -1004,7 +1004,7 @@ var ButtonComponent = function ButtonComponent(_ref, ref) {
     target = _ref$target === void 0 ? BUTTON_TARGETS.SELF : _ref$target,
     testId = _ref.testId,
     size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$dX);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d$);
   var _getPositionProps = getPositionProps(rest),
     positionProps = _getPositionProps.positionProps,
     otherProps = _getPositionProps.otherProps;
@@ -1128,6 +1128,118 @@ var useIsInsideComponent = function useIsInsideComponent(parentComponentName) {
   return componentName === parentComponentName;
 };
 
+var _excluded$d_ = ["testId", "size", "color", "style"];
+var IconAwardSolid = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-award-solid' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d_);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default["default"].createElement("path", {
+    fill: "currentColor",
+    d: "M9.203.22a1.493 1.493 0 0 1 1.557 0c.87.53 1.408.673 2.427.651.56-.014 1.08.289 1.35.78.489.895.884 1.29 1.779 1.779.491.267.79.79.78 1.35-.025 1.02.121 1.557.652 2.427.292.477.292 1.08 0 1.557-.53.87-.673 1.408-.652 2.427.014.559-.289 1.08-.78 1.35-.891.488-1.287.88-1.771 1.768v4.835a.857.857 0 0 1-1.237.766l-3.324-1.664-3.325 1.66a.854.854 0 0 1-1.236-.766v-4.835c-.485-.887-.88-1.283-1.771-1.767a1.504 1.504 0 0 1-.78-1.351c.024-1.02-.122-1.557-.653-2.427a1.493 1.493 0 0 1 0-1.557c.531-.87.674-1.407.652-2.426-.014-.56.289-1.08.78-1.35.895-.489 1.29-.885 1.779-1.779a1.504 1.504 0 0 1 1.35-.78C7.8.893 8.337.747 9.207.216l-.004.003Zm.78 11.184a3.422 3.422 0 1 0-.001-6.843 3.422 3.422 0 0 0 .002 6.843Z"
+  }));
+});
+IconAwardSolid.displayName = 'IconAwardSolid';
+
+var _excluded$dZ = ["testId", "size", "color", "style"];
+var IconExclaimTriangleSolid = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-exclaim-triangle-solid' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$dZ);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 19",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default["default"].createElement("path", {
+    fill: "currentColor",
+    d: "M10 0c.574 0 1.101.316 1.375.82l8.437 15.624a1.564 1.564 0 0 1-1.375 2.305H1.563c-.55 0-1.062-.29-1.343-.762a1.563 1.563 0 0 1-.032-1.543L8.625.82C8.9.316 9.425 0 10 0Zm0 13.749c-.691 0-1.25.558-1.25 1.25 0 .691.559 1.25 1.25 1.25s1.25-.559 1.25-1.25c0-.692-.559-1.25-1.25-1.25Zm0-7.5a1.23 1.23 0 0 0-1.226 1.317l.289 4.062a.935.935 0 0 0 1.867 0l.289-4.062A1.229 1.229 0 0 0 9.992 6.25H10Z"
+  }));
+});
+IconExclaimTriangleSolid.displayName = 'IconExclaimTriangleSolid';
+
+var _excluded$dY = ["testId", "size", "color", "style"];
+var IconInfoCircleSolid = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-info-circle-solid' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$dY);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 20",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default["default"].createElement("path", {
+    fill: "currentColor",
+    d: "M10 20a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm-1.562-6.875h.937v-2.5h-.937a.935.935 0 0 1-.938-.937c0-.52.418-.938.938-.938h1.874c.52 0 .938.418.938.938v3.437h.313c.519 0 .937.418.937.938 0 .519-.418.937-.937.937H8.437a.935.935 0 0 1-.937-.937c0-.52.418-.938.938-.938ZM10 5a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 10 5Z"
+  }));
+});
+IconInfoCircleSolid.displayName = 'IconInfoCircleSolid';
+
+var _excluded$dX = ["testId", "size", "color", "style"];
+var IconTimesOctagonSolid = React.forwardRef(function (_ref, ref) {
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'icon-times-octagon-solid' : _ref$testId,
+    size = _ref.size,
+    color = _ref.color,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$dX);
+  var isInsideButton = useIsInsideComponent(COMPONENT_NAMES.BUTTON);
+  var styleProps = {
+    size: !size && isInsideButton ? 'medium' : size,
+    color: color,
+    style: style
+  };
+  return React__default["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 20 19",
+    style: getIconStyles(styleProps),
+    "data-testid": testId,
+    ref: ref
+  }, props), React__default["default"].createElement("path", {
+    fill: "currentColor",
+    d: "M.39 10.496c-.52-.897-.52-2 0-2.897L3.94 1.45A2.896 2.896 0 0 1 6.451 0h7.101a2.9 2.9 0 0 1 2.51 1.448L19.612 7.6c.519.897.519 2 0 2.897l-3.553 6.15a2.896 2.896 0 0 1-2.51 1.45h-7.1a2.9 2.9 0 0 1-2.51-1.45l-3.549-6.15ZM6.74 5.789a.962.962 0 0 0 0 1.364l1.891 1.89-1.89 1.891a.965.965 0 0 0 1.364 1.364l1.89-1.89 1.89 1.89a.965.965 0 0 0 1.364-1.364l-1.89-1.89 1.89-1.891a.965.965 0 0 0-1.364-1.364l-1.89 1.89-1.89-1.89a.962.962 0 0 0-1.365 0Z"
+  }));
+});
+IconTimesOctagonSolid.displayName = 'IconTimesOctagonSolid';
+
 var _excluded$dW = ["testId", "size", "color", "style"];
 var IconInfoCircle = React.forwardRef(function (_ref, ref) {
   var _ref$testId = _ref.testId,
@@ -9457,15 +9569,15 @@ var InlineBannerIcon = function InlineBannerIcon(_ref) {
   var theme = _ref.theme;
   switch (theme) {
     case BANNER_THEME.INFO:
-      return React__default["default"].createElement(IconInfoCircle, null);
+      return React__default["default"].createElement(IconInfoCircleSolid, null);
     case BANNER_THEME.WARNING:
-      return React__default["default"].createElement(IconExclaimationTriangle, null);
+      return React__default["default"].createElement(IconExclaimTriangleSolid, null);
     case BANNER_THEME.SUCCESS:
-      return React__default["default"].createElement(IconCheck, null);
+      return React__default["default"].createElement(IconCheckCircle, null);
     case BANNER_THEME.DANGER:
-      return React__default["default"].createElement(IconTimesOctagon, null);
+      return React__default["default"].createElement(IconTimesOctagonSolid, null);
     case BANNER_THEME.UPSELL:
-      return React__default["default"].createElement(IconAward, null);
+      return React__default["default"].createElement(IconAwardSolid, null);
   }
 };
 
@@ -9537,15 +9649,15 @@ var MicroBannerIcon = function MicroBannerIcon(_ref) {
   var theme = _ref.theme;
   switch (theme) {
     case MICRO_BANNER_THEME.INFO:
-      return React__default["default"].createElement(IconInfoCircle, null);
+      return React__default["default"].createElement(IconInfoCircleSolid, null);
     case MICRO_BANNER_THEME.WARNING:
-      return React__default["default"].createElement(IconExclaimationTriangle, null);
+      return React__default["default"].createElement(IconExclaimTriangleSolid, null);
     case MICRO_BANNER_THEME.SUCCESS:
-      return React__default["default"].createElement(IconCheck, null);
+      return React__default["default"].createElement(IconCheckCircle, null);
     case MICRO_BANNER_THEME.DANGER:
-      return React__default["default"].createElement(IconTimesOctagon, null);
+      return React__default["default"].createElement(IconTimesOctagonSolid, null);
     case MICRO_BANNER_THEME.UPSELL:
-      return React__default["default"].createElement(IconAward, null);
+      return React__default["default"].createElement(IconAwardSolid, null);
   }
 };
 
@@ -9576,15 +9688,19 @@ var MicroBanner = function MicroBanner(_ref) {
     title = _ref.title,
     primaryButton = _ref.primaryButton,
     testId = _ref.testId,
-    positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$bd);
-  var positionStyles = usePositionStyles(positionProps);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$bd);
+  var _getPositionProps = getPositionProps(rest),
+    positionProps = _getPositionProps.positionProps,
+    otherProps = _getPositionProps.otherProps;
+  var _getDataProps = getDataProps(otherProps),
+    dataProps = _getDataProps.dataProps;
   var themeClass = styles$P["micro-banner--" + theme];
   var contentClass = classnames__default["default"](styles$P['micro-banner__content'], hideIcon && styles$P['micro-banner__content--no-icon'], !primaryButton && styles$P['micro-banner__content--no-button']);
-  return React__default["default"].createElement("div", {
+  return React__default["default"].createElement("div", _extends({
     "data-testid": testId,
     className: classnames__default["default"](styles$P['micro-banner'], themeClass),
-    style: positionStyles
-  }, !hideIcon && React__default["default"].createElement("div", {
+    style: positionProps
+  }, dataProps), !hideIcon && React__default["default"].createElement("div", {
     className: styles$P['micro-banner__icon'],
     "data-testid": (testId || 'micro-banner') + "-icon"
   }, icon != null ? icon : React__default["default"].createElement(MicroBannerIcon, {
@@ -9607,10 +9723,11 @@ var PERSISTENT_BANNER_THEME = {
   UPSELL: 'upsell',
   INFO: 'info',
   DANGER: 'danger',
-  WARNING: 'warning'
+  WARNING: 'warning',
+  SUCCESS: 'success'
 };
 
-var styles$O = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn"};
+var styles$O = {"persistent-banner":"_FsCJQ","persistent-banner--info":"_zt-xK","persistent-banner--danger":"_rmUys","persistent-banner--upsell":"_UGrRR","persistent-banner--warning":"_9eFhn","persistent-banner--success":"_hU34n"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -9636,19 +9753,19 @@ var PersistentBanner = function PersistentBanner(_ref) {
       justifyContent: "center",
       space: 8
     }, primaryButton && React__default["default"].cloneElement(primaryButton, _extends({
-      theme: theme === PERSISTENT_BANNER_THEME.WARNING ? BUTTON_THEMES.DEFAULT : BUTTON_THEMES.HOLLOW_CONTRAST
+      theme: BUTTON_THEMES.HOLLOW_CONTRAST
     }, primaryButton.props)), secondaryButton && React__default["default"].cloneElement(secondaryButton, _extends({
-      theme: theme === PERSISTENT_BANNER_THEME.WARNING ? BUTTON_THEMES.LINK_PRIMARY : BUTTON_THEMES.LINK_CONTRAST
+      theme: BUTTON_THEMES.LINK_CONTRAST
     }, secondaryButton.props))));
   };
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$O['persistent-banner'], (_classNames = {}, _classNames[styles$O['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$O['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$O['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$O['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames)),
+    className: classnames__default["default"](styles$O['persistent-banner'], (_classNames = {}, _classNames[styles$O['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$O['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$O['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames[styles$O['persistent-banner--warning']] = theme === PERSISTENT_BANNER_THEME.WARNING, _classNames[styles$O['persistent-banner--success']] = theme === PERSISTENT_BANNER_THEME.SUCCESS, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default["default"].createElement(Inline, {
     flex: [1],
     alignItems: "center"
   }, React__default["default"].createElement(BannerContent, null), React__default["default"].createElement(Button, {
-    theme: theme === PERSISTENT_BANNER_THEME.WARNING ? "link-primary" : "link-contrast",
+    theme: theme === PERSISTENT_BANNER_THEME.WARNING ? 'link-primary' : 'link-contrast',
     onClick: onDismiss
   }, React__default["default"].createElement(IconTimes, null))) : React__default["default"].createElement(BannerContent, null));
 };
@@ -9745,9 +9862,10 @@ var CircularProgress = function CircularProgress(_ref) {
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$M = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__steps":"_8kdeO"};
+var styles$M = {"progress-bar":"_fWvQF","progress-bar__indicator":"_vd0xc","progress-bar__indicator--complete":"_D9yNp","progress-bar__steps":"_8kdeO"};
 
 var ProgressBar = function ProgressBar(_ref) {
+  var _classNames;
   var progress = _ref.progress,
     maxValue = _ref.maxValue,
     testId = _ref.testId,
@@ -9761,7 +9879,7 @@ var ProgressBar = function ProgressBar(_ref) {
     className: styles$M['progress-bar'],
     "data-testid": testId
   }), React__default["default"].createElement("div", {
-    className: styles$M['progress-bar__indicator'],
+    className: classnames__default["default"](styles$M['progress-bar__indicator'], (_classNames = {}, _classNames[styles$M['progress-bar__indicator--complete']] = metric.percentage === 100, _classNames)),
     style: {
       width: metric.percentage + "%"
     }
@@ -58772,6 +58890,7 @@ exports.IconArrowToTop = IconArrowToTop;
 exports.IconArrowTurnDownRight = IconArrowTurnDownRight;
 exports.IconArrowUp = IconArrowUp;
 exports.IconAward = IconAward;
+exports.IconAwardSolid = IconAwardSolid;
 exports.IconAwful = IconAwful;
 exports.IconAwfulMonochromatic = IconAwfulMonochromatic;
 exports.IconBad = IconBad;
@@ -58826,6 +58945,7 @@ exports.IconEdit = IconEdit;
 exports.IconEllipsisV = IconEllipsisV;
 exports.IconEnvelope = IconEnvelope;
 exports.IconEnvelopeOpenDollar = IconEnvelopeOpenDollar;
+exports.IconExclaimTriangleSolid = IconExclaimTriangleSolid;
 exports.IconExclaimation = IconExclaimation;
 exports.IconExclaimationTriangle = IconExclaimationTriangle;
 exports.IconExpand = IconExpand;
@@ -58853,6 +58973,7 @@ exports.IconHandshake = IconHandshake;
 exports.IconHatChef = IconHatChef;
 exports.IconImage = IconImage;
 exports.IconInfoCircle = IconInfoCircle;
+exports.IconInfoCircleSolid = IconInfoCircleSolid;
 exports.IconIslandTropical = IconIslandTropical;
 exports.IconItalic = IconItalic;
 exports.IconLaptopSearch = IconLaptopSearch;
@@ -58905,6 +59026,7 @@ exports.IconThumbsDown = IconThumbsDown;
 exports.IconThumbsUp = IconThumbsUp;
 exports.IconTimes = IconTimes;
 exports.IconTimesOctagon = IconTimesOctagon;
+exports.IconTimesOctagonSolid = IconTimesOctagonSolid;
 exports.IconTrash = IconTrash;
 exports.IconUnderline = IconUnderline;
 exports.IconUndo = IconUndo;