flipper-ui 0.34.5 → 0.34.7

package/core/data-display/advertise/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const AdvertiseTypography: 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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+}, "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?: 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 AdvertiseContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/surfaces/paper").IPaperProps, never>> & string & Omit<({ children, style, padding, margin, ...otherProps }: import("@/core/surfaces/paper").IPaperProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/data-display/advertise/styles.js

@@ -11,6 +11,6 @@ var _typography = _interopRequireDefault(require("../typography"));
 var _paper = _interopRequireDefault(require("../../surfaces/paper"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
-var grays = _theme.theme.colors.grays;
-var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), grays.g5);
+var gray = _theme.theme.colors.gray;
+var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
 var AdvertiseContainer = exports.AdvertiseContainer = (0, _styledComponents["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));

package/core/data-display/chapter/styles.js

@@ -9,8 +9,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
-var grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Line = exports.Line = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
-  return props.primary ? grays.g4 : grays.g6;
+  return props.primary ? gray[500] : gray[300];
 });
 var Container = exports.Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));

package/core/data-display/line/index.js

@@ -14,7 +14,7 @@ var _excluded = ["padding", "margin", "style", "primary"];
 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,
-  grays = _theme$colors.grays,
+  gray = _theme$colors.gray,
   secondary = _theme$colors.secondary;
 var Line = function Line(_ref) {
   var padding = _ref.padding,
@@ -27,7 +27,7 @@ var Line = function Line(_ref) {
       flex: 1,
       padding: padding,
       margin: margin,
-      border: "1px solid ".concat(primary ? secondary.light : grays.g6)
+      border: "1px solid ".concat(primary ? secondary.light : gray[300])
     }, style)
   }, otherProps));
 };

package/core/data-display/list/index.js

@@ -17,11 +17,11 @@ var _theme = require("../../../theme");
 var _excluded = ["title", "padding", "margin", "style", "color", "className", "children"];
 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 neutral = _theme.theme.colors.neutral;
 var useStyles = (0, _makeStyles2["default"])(function () {
   return (0, _createStyles2["default"])({
     "default": {
-      backgroundColor: app.background.main
+      backgroundColor: neutral[100]
     },
     inherit: {
       backgroundColor: 'inherit',

package/core/data-display/table/index.js

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["style", "margin", "padding", "spacing", "children"];
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Table = function Table(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -25,7 +25,7 @@ var Table = function Table(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_Table["default"], (0, _extends2["default"])({}, otherProps, {
     padding: spacing,
     style: _objectSpread({
-      border: "1px solid ".concat(grays.g6),
+      border: "1px solid ".concat(gray[300]),
       padding: padding,
       margin: margin
     }, style)

package/core/data-display/table/table-footer.js

@@ -11,7 +11,7 @@ var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
 var _theme = require("../../../theme");
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TableFooter = function TableFooter(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -19,7 +19,7 @@ var TableFooter = function TableFooter(_ref) {
     children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], {
     style: _objectSpread({
-      borderColor: grays.g7,
+      borderColor: gray[200],
       margin: margin,
       padding: padding
     }, style)

package/core/data-display/table/table-pagination.js

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "style", "padding"];
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TablePagination = function TablePagination(_ref) {
   var count = _ref.count,
     page = _ref.page,
@@ -38,11 +38,11 @@ var TablePagination = function TablePagination(_ref) {
       return "".concat(from, "-").concat(to, " de ").concat(count !== -1 ? count : "mais que ".concat(to));
     },
     style: _objectSpread({
-      borderColor: grays.g7,
+      borderColor: gray[200],
       padding: padding
     }, style),
     sx: {
-      borderBottom: "1px solid ".concat(grays.g7, " !important;")
+      borderBottom: "1px solid ".concat(gray[200], " !important;")
     },
     onPageChange: onPageChange,
     onRowsPerPageChange: onRowsPerPageChange

package/core/data-display/table/table-row.js

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["style", "margin", "padding", "children", "background"];
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TableRow = function TableRow(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -25,7 +25,7 @@ var TableRow = function TableRow(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       background: background,
-      borderColor: grays.g7,
+      borderColor: gray[200],
       margin: margin,
       padding: padding
     }, style)

package/core/feedback/nothing-found/styles.d.ts

@@ -1,3 +1,3 @@
 export declare const TextTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/Typography").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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>, keyof import("react").Component<any, {}, any>>;
+}, "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">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>, keyof import("react").Component<any, {}, any>>;

package/core/feedback/skeleton/index.js

@@ -8,14 +8,14 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
-require("react-loading-skeleton/dist/skeleton.css");
 var _theme = require("../../../theme");
-var grays = _theme.theme.colors.grays;
+require("react-loading-skeleton/dist/skeleton.css");
+var gray = _theme.theme.colors.gray;
 var Skeleton = function Skeleton(props) {
   return /*#__PURE__*/_react["default"].createElement(_reactLoadingSkeleton["default"], (0, _extends2["default"])({
     containerTestId: "skeleton-container",
-    baseColor: grays.g7,
-    highlightColor: grays.g6
+    baseColor: gray[200],
+    highlightColor: gray[300]
   }, props));
 };
 var _default = exports["default"] = Skeleton;

package/core/feedback/snackbar/index.js

@@ -14,28 +14,33 @@ var _CheckCircle2 = _interopRequireDefault(require("@mui/icons-material/CheckCir
 var _Info2 = _interopRequireDefault(require("@mui/icons-material/Info"));
 var _Error2 = _interopRequireDefault(require("@mui/icons-material/Error"));
 var _react = _interopRequireDefault(require("react"));
-var _colors = require("@mui/material/colors");
 var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
 var _SnackbarContent = _interopRequireDefault(require("@mui/material/SnackbarContent"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _theme = require("../../../theme");
 var _excluded = ["id", "action", "anchorOrigin", "autoHide", "icon", "message", "onClose", "open", "padding", "margin", "style", "variant", "className", "TransitionComponent", "TransitionProps", "onClick"];
 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,
+  blue = _theme$colors.blue,
+  green = _theme$colors.green,
+  orange = _theme$colors.orange,
+  red = _theme$colors.red;
 var variants = {
   error: {
-    color: _colors.red[700],
+    color: red[500],
     icon: _Error2["default"]
   },
   info: {
-    color: _colors.blue[500],
+    color: blue[600],
     icon: _Info2["default"]
   },
   success: {
-    color: _colors.green[700],
+    color: green[400],
     icon: _CheckCircle2["default"]
   },
   warning: {
-    color: _colors.amber[700],
+    color: orange[600],
     icon: _Warning2["default"]
   }
 };

package/core/feedback/validation-dialog/styles.d.ts

@@ -1,7 +1,7 @@
 export declare const MuiDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../dialog").IDialogProps, never>> & string & Omit<({ snippet, style, padding, margin, scroll, PaperProps, open, fullScreen, fullWidth, maxWidth, onClose, titleAction, titleWrapperStyle, titleStyle, titleActionStyle, contentStyle, contentTextStyle, actionsStyle, actions, content, text, title, snippetStyle, snippetContentStyle, "aria-title": ariaTitle, ...otherProps }: import("../dialog").IDialogProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const DialogTypography: 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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+}, "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?: 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 ValidationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/inputs/chip-field/chip-field.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SyntheticEvent } from 'react';
+import type { AutocompleteChangeReason } from '../autocomplete';
+import type { Meta } from '@storybook/react';
+import ChipField from '.';
+interface IMultiple {
+    onChange?: (_event: SyntheticEvent<Element, Event>, value: string[], reason?: AutocompleteChangeReason) => void;
+}
+declare const _default: Meta<typeof ChipField>;
+export default _default;
+export declare const MultipleField: ({ onChange }: IMultiple) => React.JSX.Element;

package/core/inputs/chip-field/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SyntheticEvent } from 'react';
+import type { AutocompleteChangeReason } from '../autocomplete';
+export interface ChipFieldProps {
+    label?: string;
+    list?: {
+        value: string;
+        label?: string;
+    }[];
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value: (string | undefined)[] | undefined;
+    onChange?: (_event: SyntheticEvent<Element, Event>, value: string[], reason?: AutocompleteChangeReason) => void;
+}
+declare const ChipField: (props: ChipFieldProps) => React.JSX.Element;
+export default ChipField;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _autocomplete = require("../autocomplete");
+var _textField = _interopRequireDefault(require("../text-field"));
+var ChipField = function ChipField(props) {
+  var label = props.label,
+    list = props.list,
+    error = props.error,
+    disabled = props.disabled,
+    value = props.value,
+    onChange = props.onChange;
+  return /*#__PURE__*/_react["default"].createElement(_autocomplete.Autocomplete, {
+    multiple: true,
+    fullWidth: true,
+    open: false,
+    options: [],
+    disabled: disabled,
+    forcePopupIcon: false,
+    value: value,
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_textField["default"], (0, _extends2["default"])({}, props, {
+        fullWidth: true,
+        label: label,
+        error: error,
+        disabled: disabled,
+        variant: "outlined",
+        onKeyDown: function onKeyDown(e) {
+          var input = e.target;
+          if (e.key === ',' || e.key === ';' || e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            var labels = list ? list.map(function (option) {
+              return option.label;
+            }).filter(function (label) {
+              return label !== undefined;
+            }) : [];
+            onChange === null || onChange === void 0 || onChange(e, [].concat((0, _toConsumableArray2["default"])(labels), [input.value]));
+            input.value = '';
+          }
+        }
+      }));
+    },
+    sx: {
+      '.MuiAutocomplete-tag': {
+        margin: '1px 3px'
+      },
+      '.MuiChip-root': {
+        height: '27px'
+      }
+    },
+    onChange: onChange
+  });
+};
+var _default = exports["default"] = ChipField;

package/core/inputs/date-time/index.js

@@ -24,7 +24,9 @@ var _excluded = ["id", "padding", "margin", "style", "value", "onChange", "error
 /* eslint-disable import/no-duplicates */
 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 _theme$colors = _theme.theme.colors,
+  neutral = _theme$colors.neutral,
+  primary = _theme$colors.primary;
 var formatter = function formatter(weekday) {
   return (0, _format["default"])(weekday, 'eee', {
     locale: _ptBR["default"]
@@ -37,10 +39,10 @@ var CustomDatePickerToolbar = function CustomDatePickerToolbar(props) {
       borderRadius: '4px 4px 0 0',
       padding: '16px',
       '.MuiTypography-root': {
-        color: "".concat(primary.contrast, "90")
+        color: "".concat(neutral[50], "90")
       },
       '.MuiDatePickerToolbar-title': {
-        color: primary.contrast
+        color: neutral[50]
       }
     }
   }));
@@ -52,13 +54,13 @@ var CustomTimePickerToolbar = function CustomTimePickerToolbar(props) {
       borderRadius: '4px 4px 0 0',
       padding: '16px',
       '.MuiTypography-root': {
-        color: "".concat(primary.contrast, "90")
+        color: "".concat(neutral[50], "90")
       },
       '.MuiPickersToolbarText-root': {
-        color: primary.contrast
+        color: neutral[50]
       },
       '.MuiPickersToolbarText-root.Mui-selected': {
-        color: "".concat(primary.contrast, "90")
+        color: "".concat(neutral[50], "90")
       }
     }
   }));
@@ -73,11 +75,11 @@ var CustomDateTimePickerToolbar = function CustomDateTimePickerToolbar(props) {
         display: 'none'
       },
       '.MuiPickersToolbarText-root': {
-        color: primary.contrast,
+        color: neutral[50],
         display: 'block'
       },
       '.MuiPickersToolbarText-root.Mui-selected': {
-        color: "".concat(primary.contrast, "90"),
+        color: "".concat(neutral[50], "90"),
         display: 'block'
       }
     }

package/core/inputs/slider/index.js

@@ -15,13 +15,17 @@ 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 {

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/navigation/breadcrumbs/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const BreadcrumbLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+}, "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?: 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/sidebar/index.js

@@ -19,11 +19,11 @@ 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"];
 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 neutral = _theme.theme.colors.neutral;
 var useStyles = (0, _makeStyles2["default"])(function () {
   return (0, _createStyles2["default"])({
     "default": {
-      backgroundColor: app.background.main
+      backgroundColor: neutral[100]
     },
     inherit: {
       backgroundColor: 'inherit',

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/surfaces/card/styles.d.ts

@@ -2,7 +2,7 @@ export declare const Header: import("styled-components/dist/types").IStyledCompo
 export declare const CardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+}, "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?: 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/panel/styles.d.ts

@@ -2,6 +2,6 @@ export declare const ExpansionPaperPanel: import("styled-components/dist/types")
 export declare const Summary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
-    component?: import("react").ElementType;
+}, "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?: 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"], {