flipper-ui 0.34.6 → 0.34.8

package/core/inputs/slider/index.js

@@ -8,31 +8,24 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
 var _theme = require("../../../theme");
 var _excluded = ["padding", "margin", "size", "color", "style", "defaultValue"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _theme$colors = _theme.theme.colors,
+  feedback = _theme$colors.feedback,
+  primary = _theme$colors.primary,
+  secondary = _theme$colors.secondary;
 var labels = {
-  primary: _theme.theme.colors.primary.main,
-  secondary: _theme.theme.colors.secondary.main,
-  error: _theme.theme.colors.feedback.danger,
-  info: _theme.theme.colors.feedback.info,
-  success: _theme.theme.colors.feedback.success,
-  warning: _theme.theme.colors.feedback.warning
+  primary: primary.main,
+  secondary: secondary.main,
+  error: feedback.danger,
+  info: feedback.info,
+  success: feedback.success,
+  warning: feedback.warning
 };
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return {
-    valueLabel: function valueLabel(props) {
-      return {
-        backgroundColor: labels[props.color || 'primary'],
-        borderRadius: '5px'
-      };
-    }
-  };
-});
 var Slider = function Slider(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
@@ -42,9 +35,6 @@ var Slider = function Slider(_ref) {
     style = _ref$style === void 0 ? {} : _ref$style,
     defaultValue = _ref.defaultValue,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles({
-    color: color
-  });
   return /*#__PURE__*/_react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, otherProps, {
     color: color,
     size: size || 'small',
@@ -53,8 +43,11 @@ var Slider = function Slider(_ref) {
       padding: padding,
       margin: margin
     }, style),
-    classes: {
-      valueLabel: classes.valueLabel
+    sx: {
+      '.MuiSlider-valueLabel': {
+        borderRadius: '5px',
+        backgroundColor: labels[color || 'primary']
+      }
     }
   }));
 };

package/core/inputs/slider/slider.stories.d.ts

@@ -1,11 +1,7 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Slider from '.';
-declare const _default: Meta<typeof Slider>;
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const Ranged: any;
-export declare const FixedLabel: any;
-export declare const WithMarks: any;
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const slider: Story;
+export declare const sliderWithMarks: Story;

package/core/inputs/text-field/index.js

@@ -15,7 +15,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _map2 = _interopRequireDefault(require("ramda/es/map"));
 var _split2 = _interopRequireDefault(require("ramda/es/split"));
 var _pipe2 = _interopRequireDefault(require("ramda/es/pipe"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -27,14 +26,6 @@ var _excluded = ["options", "size", "margin", "padding", "style", "error", "vari
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var primary = _theme.theme.colors.primary;
-var useStyles = (0, _makeStyles2["default"])({
-  input: {
-    fontSize: '14px'
-  },
-  outlinedLabel: {
-    fontSize: '14px'
-  }
-});
 var coerceComboOptions = function coerceComboOptions(input) {
   return (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
@@ -80,10 +71,10 @@ var renderEndAdornment = function renderEndAdornment(disabled, onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    role: "clear-button",
-    disabled: disabled || false,
     size: "small",
+    role: "clear-button",
     margin: "0 16px 0 0",
+    disabled: disabled || false,
     onClick: onClear
   }, /*#__PURE__*/_react["default"].createElement(_Clear2["default"], {
     fontSize: "inherit"
@@ -117,7 +108,6 @@ var TextField = function TextField(_ref3) {
     characters = _ref3.characters,
     children = _ref3.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
-  var classes = useStyles();
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(otherProps.disabled, onClear)
@@ -142,28 +132,30 @@ var TextField = function TextField(_ref3) {
   };
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     title: "",
+    error: error,
+    variant: variant,
     size: size || 'small',
-    select: !!(options !== null && options !== void 0 && options.length),
     fullWidth: fullWidth,
+    select: !!(options !== null && options !== void 0 && options.length),
     autoComplete: autoComplete,
-    error: error,
-    variant: variant,
+    slotProps: {
+      input: _objectSpread({
+        endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength),
+        sx: {
+          fontSize: '14px'
+        }
+      }, InputProps),
+      inputLabel: _objectSpread({
+        sx: {
+          fontSize: '14px'
+        }
+      }, InputLabelProps),
+      select: _objectSpread(_objectSpread({}, endAdornment), SelectProps)
+    },
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style),
-    InputLabelProps: _objectSpread({
-      classes: {
-        outlined: variant === 'outlined' ? classes.outlinedLabel : ''
-      }
-    }, InputLabelProps),
-    InputProps: _objectSpread({
-      classes: {
-        input: variant === 'outlined' ? classes.input : ''
-      },
-      endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength)
-    }, InputProps),
-    SelectProps: _objectSpread(_objectSpread({}, endAdornment), SelectProps),
     onChange: handleInputChange
   }, otherProps), options ? renderOptions(options) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,

package/core/inputs/text-field/styles.js

@@ -9,9 +9,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 var Helper = exports.Helper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
 var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
 var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n"])));
-var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), grays.g3);
+var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);

package/core/inputs/text-field/text-field.stories.d.ts

@@ -5,5 +5,4 @@ export default meta;
 type Story = StoryObj<typeof TextField>;
 export declare const textfield: Story;
 export declare const withSelectAndClear: Story;
-export declare const combobox: Story;
 export declare const withCharacterCount: Story;

package/core/navigation/breadcrumbs/styles.d.ts

@@ -2,5 +2,5 @@ export declare const BreadcrumbLink: import("styled-components/dist/types").ISty
 export declare const TextTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+    component?: React.ElementType;
 } & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/navigation/menu/menu.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Menu from '.';
-declare const _default: Meta<typeof Menu>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const menu: Story;

package/core/navigation/sidebar/index.d.ts

@@ -7,15 +7,13 @@ export interface SidebarProps extends DefaultProps {
     showButton?: boolean;
     anchor?: 'top' | 'left' | 'bottom' | 'right';
     variant?: 'persistent' | 'temporary' | 'permanent';
-    color?: 'default' | 'inherit';
     docked?: boolean;
     maxWidth?: number | string;
     minWidth?: number | string;
     top?: number | string;
-    paperClasses?: object;
     name?: string;
     ButtonProps?: IButtonProps;
     onToggle: () => void;
 }
-declare const Sidebar: ({ id, anchor, className, color, docked, expanded, margin, maxWidth, minWidth, top, open, padding, paperClasses, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
+declare const Sidebar: ({ id, anchor, className, docked, expanded, margin, maxWidth, minWidth, top, open, padding, showButton, style, variant, ButtonProps, onToggle, children, name, ...otherProps }: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/core/navigation/sidebar/index.js

@@ -10,34 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _KeyboardArrowRight2 = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowRight"));
 var _KeyboardArrowLeft2 = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowLeft"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _createStyles2 = _interopRequireDefault(require("@mui/styles/createStyles"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 var _styles = require("./styles");
 var _theme = require("../../../theme");
-var _excluded = ["id", "anchor", "className", "color", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "paperClasses", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
+var _excluded = ["id", "anchor", "className", "docked", "expanded", "margin", "maxWidth", "minWidth", "top", "open", "padding", "showButton", "style", "variant", "ButtonProps", "onToggle", "children", "name"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var app = _theme.theme.colors.app;
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return (0, _createStyles2["default"])({
-    "default": {
-      backgroundColor: app.background.main
-    },
-    inherit: {
-      backgroundColor: 'inherit',
-      color: 'inherit'
-    }
-  });
-});
+var neutral = _theme.theme.colors.neutral;
 var Sidebar = function Sidebar(_ref) {
   var id = _ref.id,
     _ref$anchor = _ref.anchor,
     anchor = _ref$anchor === void 0 ? 'left' : _ref$anchor,
     className = _ref.className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$docked = _ref.docked,
     docked = _ref$docked === void 0 ? false : _ref$docked,
     _ref$expanded = _ref.expanded,
@@ -51,7 +36,6 @@ var Sidebar = function Sidebar(_ref) {
     top = _ref$top === void 0 ? 64 : _ref$top,
     open = _ref.open,
     padding = _ref.padding,
-    paperClasses = _ref.paperClasses,
     _ref$showButton = _ref.showButton,
     showButton = _ref$showButton === void 0 ? true : _ref$showButton,
     style = _ref.style,
@@ -62,7 +46,6 @@ var Sidebar = function Sidebar(_ref) {
     children = _ref.children,
     name = _ref.name,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   var renderAction = function renderAction() {
     var iconToLeft = anchor === 'left' && expanded || anchor === 'right' && !expanded;
     return /*#__PURE__*/_react["default"].createElement(_styles.Action, {
@@ -94,7 +77,6 @@ var Sidebar = function Sidebar(_ref) {
       top: top
     }, style),
     PaperProps: {
-      className: "".concat(classes[color]),
       style: docked ? {
         position: 'fixed',
         left: '0px',
@@ -103,7 +85,9 @@ var Sidebar = function Sidebar(_ref) {
         width: 'inherit',
         height: 'inherit'
       } : {},
-      classes: paperClasses
+      sx: {
+        backgroundColor: neutral[100]
+      }
     }
   }), showButton && renderAction(), children);
 };

package/core/navigation/sidebar/styles.js

@@ -10,11 +10,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _button = _interopRequireDefault(require("../../inputs/button"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3;
-var grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Action = exports.Action = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: ", ";\n    display: flex;\n    padding: 4px;\n"])), function (props) {
   return props.anchor === 'left' ? 'row-reverse' : 'row';
 });
 var AnchorButton = exports.AnchorButton = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        max-width: ", "px;\n        border-radius: 4px;\n        box-shadow: none;\n        min-width: auto;\n        width: 100%;\n        background-color: transparent;\n    }\n\n    &:active {\n        box-shadow: none;\n    }\n\n    &:hover {\n        background-color: ", " !important;\n    }\n"])), function (props) {
   return props.minwidth;
-}, grays.g6);
+}, gray[300]);
 var SidebarStorie = exports.SidebarStorie = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    height: 500px;\n"])));

package/core/navigation/stepper/index.js

@@ -19,9 +19,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var isActive = function isActive(index, active) {
-  return active !== undefined ? active >= index : undefined;
-};
 var StepIcon = function StepIcon(_ref) {
   var icon = _ref.icon,
     active = _ref.active;
@@ -33,6 +30,9 @@ var StepIcon = function StepIcon(_ref) {
     color: active ? 'primary' : 'disabled'
   });
 };
+var isActive = function isActive(index, active) {
+  return active !== undefined ? active >= index : undefined;
+};
 var Stepper = function Stepper(_ref2) {
   var active = _ref2.active,
     bottomLabel = _ref2.bottomLabel,

package/core/navigation/stepper/stepper.stories.d.ts

@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Stepper from '.';
-declare const _default: Meta<typeof Stepper>;
-export default _default;
-export declare const Default: any;
-export declare const WithIcon: any;
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+export declare const stepper: Story;
+export declare const stepperWithIcon: Story;

package/core/navigation/tabs/tabs.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Tabs from '.';
-declare const _default: Meta<typeof Tabs>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const tabs: Story;

package/core/surfaces/box/box.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Box from '.';
-declare const _default: Meta<typeof Box>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const box: Story;

package/core/surfaces/card/styles.d.ts

@@ -3,6 +3,6 @@ export declare const CardWrapper: import("styled-components/dist/types").IStyled
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+    component?: React.ElementType;
 } & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/surfaces/expansion-panel/expansion-panel.stories.d.ts

@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import ExpansionPanel from '.';
-declare const _default: Meta<typeof ExpansionPanel>;
-export default _default;
-export declare const Default: any;
-export declare const Disabled: any;
-export declare const WithEditable: any;
+declare const meta: Meta<typeof ExpansionPanel>;
+export default meta;
+type Story = StoryObj<typeof ExpansionPanel>;
+export declare const expansionPanel: Story;

package/core/surfaces/header/header.stories.d.ts

@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Header from '.';
-declare const _default: Meta<typeof Header>;
-export default _default;
-export declare const Default: any;
-export declare const Primary: any;
-export declare const Secondary: any;
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const header: Story;

package/core/surfaces/header/styles.d.ts

@@ -0,0 +1 @@
+export declare const StoriesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/surfaces/header/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoriesWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = require("styled-components");
+var _templateObject;
+var StoriesWrapper = exports.StoriesWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 75px;\n"])));

package/core/surfaces/panel/styles.d.ts

@@ -3,5 +3,5 @@ export declare const Summary: import("styled-components/dist/types").IStyledComp
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+    component?: React.ElementType;
 } & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/surfaces/step-card/step-card-details.js

@@ -17,7 +17,7 @@ var _styles = require("./styles");
 var _theme = require("../../../theme");
 var _theme$colors = _theme.theme.colors,
   feedback = _theme$colors.feedback,
-  grays = _theme$colors.grays;
+  gray = _theme$colors.gray;
 var StepsList = function StepsList(_ref) {
   var steps = _ref.steps,
     onStepUrlClick = _ref.onStepUrlClick;
@@ -31,12 +31,12 @@ var StepsList = function StepsList(_ref) {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_CheckCircle2["default"], {
       style: {
-        color: step.done ? feedback.success : grays.g3
+        color: step.done ? feedback.success : gray[600]
       }
     }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
       variant: "body1",
       style: {
-        color: grays.g2,
+        color: gray[700],
         fontWeight: 600
       }
     }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {

package/core/surfaces/step-card/step-card-panel.js

@@ -11,13 +11,12 @@ var _CheckCircle2 = _interopRequireDefault(require("@mui/icons-material/CheckCir
 var _react = _interopRequireDefault(require("react"));
 var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _sprintfJs = require("sprintf-js");
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _styles = require("./styles");
 var _theme = require("../../../theme");
 var _theme$colors = _theme.theme.colors,
   feedback = _theme$colors.feedback,
-  grays = _theme$colors.grays;
+  gray = _theme$colors.gray;
 var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
   var title = props.title,
     summary = props.summary,
@@ -45,19 +44,19 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     "data-testid": "step-card-title-icon",
     style: {
       fontSize: 40,
-      color: percentage === 100 ? feedback.success : grays.g3
+      color: percentage === 100 ? feedback.success : gray[600]
     }
   }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6",
     style: {
-      color: grays.g1,
+      color: gray[800],
       fontSize: 24,
       textAlign: 'center'
     }
   }, titleProps), title), subTitle && /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6",
     style: {
-      color: grays.g3,
+      color: gray[600],
       textAlign: 'center'
     }
   }, titleProps), subTitle))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
@@ -71,7 +70,7 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     })
   }, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6"
-  }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time))) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
+  }, summaryProps), summary.replace('%i', remainingSteps.toString()).replace('%i', time.toString()))) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
     "data-testid": "normal-progress"
   }, /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContent, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6"
@@ -85,7 +84,7 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
       width: '100%',
       height: '16px',
       borderRadius: 10,
-      backgroundColor: grays.g5
+      backgroundColor: gray[400]
     }
   }, summaryLinearProgressBarProps))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
@@ -97,7 +96,7 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     style: {
       height: '16px',
       width: '100%',
-      backgroundColor: grays.g5
+      backgroundColor: gray[400]
     }
   }, linearProgressBarProps))));
 };

package/core/surfaces/step-card/step-card.stories.d.ts

@@ -1,7 +1,8 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import StepCard from '.';
-declare const _default: Meta<typeof StepCard>;
-export default _default;
-export declare const Default: any;
-export declare const WithoutExpandable: any;
-export declare const WithLoading: any;
+declare const meta: Meta<typeof StepCard>;
+export default meta;
+type Story = StoryObj<typeof StepCard>;
+export declare const stepCard: Story;
+export declare const stepCardWithoutExpandable: Story;
+export declare const stepCardWithLoading: Story;