@vitality-ds/components 5.7.0-alpha.2 → 5.7.0-alpha.3

package/dist/StatusBadge/logic.spec.js

@@ -2,25 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _logic = require("./logic");
 describe("getIcon", function () {
   it("returns the correct icon for the severity (warning)", function () {
-    expect((0, _logic.getIcon)("warning")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Alert, null));
+    expect((0, _logic.getIcon)("warning")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.TriangleAlert, null));
   });
   it("returns the correct icon for the severity (info)", function () {
-    expect((0, _logic.getIcon)("info")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Info, null));
+    expect((0, _logic.getIcon)("info")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null));
   });
   it("returns the correct icon for the severity (neutral)", function () {
-    expect((0, _logic.getIcon)("neutral")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Info, null));
+    expect((0, _logic.getIcon)("neutral")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null));
   });
   it("returns the correct icon for the severity (success)", function () {
-    expect((0, _logic.getIcon)("success")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Completed, null));
+    expect((0, _logic.getIcon)("success")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.CircleCheck, null));
   });
   it("returns the correct icon for the severity (critical)", function () {
-    expect((0, _logic.getIcon)("critical")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Error, null));
+    expect((0, _logic.getIcon)("critical")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.CircleAlert, null));
+  });
+  it("returns the correct icon for the severity (brand)", function () {
+    expect((0, _logic.getIcon)("brand")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.GentuLogo, null));
+  });
+  it("returns the correct icon for the severity (primary)", function () {
+    expect((0, _logic.getIcon)("primary")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null));
   });
   it("returns the correct icon when invalid severity is given", function () {
-    expect((0, _logic.getIcon)("invalid")).toEqual(/*#__PURE__*/_react["default"].createElement(_icons.Info, null));
+    expect((0, _logic.getIcon)("invalid")).toEqual(/*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null));
   });
 });

package/dist/StatusBadge/styles/BaseStatusBadge.styles.js

@@ -48,7 +48,9 @@ var _default = exports["default"] = (0, _system.css)({
       warning: {},
       critical: {},
       info: {},
-      accent: {}
+      accent: {},
+      brand: {},
+      primary: {}
     }
   },
   compoundVariants: [
@@ -83,6 +85,14 @@ var _default = exports["default"] = (0, _system.css)({
     importance: "normal",
     severity: "accent",
     css: (0, _helpers.getNormalImportanceVariant)("accent")
+  }, {
+    importance: "normal",
+    severity: "brand",
+    css: (0, _helpers.getNormalImportanceVariant)("brand")
+  }, {
+    importance: "normal",
+    severity: "primary",
+    css: (0, _helpers.getNormalImportanceVariant)("primary")
   },
   /**
    * Low Importance
@@ -115,6 +125,14 @@ var _default = exports["default"] = (0, _system.css)({
     importance: "low",
     severity: "accent",
     css: (0, _helpers.getLowImportanceVariant)("accent")
+  }, {
+    importance: "low",
+    severity: "brand",
+    css: (0, _helpers.getLowImportanceVariant)("brand")
+  }, {
+    importance: "low",
+    severity: "primary",
+    css: (0, _helpers.getLowImportanceVariant)("primary")
   },
   /**
    * High Importance
@@ -147,5 +165,13 @@ var _default = exports["default"] = (0, _system.css)({
     importance: "high",
     severity: "accent",
     css: (0, _helpers.getHighImportanceVariant)("accent")
+  }, {
+    importance: "high",
+    severity: "brand",
+    css: (0, _helpers.getHighImportanceVariant)("brand")
+  }, {
+    importance: "high",
+    severity: "primary",
+    css: (0, _helpers.getHighImportanceVariant)("primary")
   }]
 });

package/dist/Switch/index.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _labelDirections = _interopRequireDefault(require("./constants/labelDirections"));
 var _styled = require("./styled");
 var _excluded = ["defaultChecked", "required", "name", "value", "id", "checked", "onCheckedChange", "disabled", "style", "className", "as", "css", "labelPosition", "label"];
 var iconProps = {
-  color: "inherit",
-  size: "inherit"
+  color: "currentColor",
+  size: "0.875rem"
 };
 var Switch = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var defaultChecked = _ref.defaultChecked,
@@ -54,7 +54,7 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwarded
     ref: forwardedRef
   }, restProps), /*#__PURE__*/_react["default"].createElement(_styled.BaseSwitchThumb, {
     checked: checked
-  }), checked ? /*#__PURE__*/_react["default"].createElement(_icons.Done, iconProps) : /*#__PURE__*/_react["default"].createElement(_icons.Close, iconProps)));
+  }), checked ? /*#__PURE__*/_react["default"].createElement(_lucideReact.Check, iconProps) : /*#__PURE__*/_react["default"].createElement(_lucideReact.X, iconProps)));
 });
 Switch.displayName = "Switch";
 var _default = exports["default"] = Switch;

package/dist/Table/components/Cells/RowActions/constants.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var ICON_MAPPING = {
-  "delete": _icons.Delete,
-  edit: _icons.Edit,
-  print: _icons.Print,
-  download: _icons.Download
+  "delete": _lucideReact.Trash2,
+  edit: _lucideReact.Pencil,
+  print: _lucideReact.Printer,
+  download: _lucideReact.Download
 };
 var _default = exports["default"] = ICON_MAPPING;

package/dist/Table/components/Cells/SortableHeader/components/SortableIcon/index.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 function SortableIcon() {
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseSortableIconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.Sortable, {
-    color: "inherit",
-    size: "sm"
+  return /*#__PURE__*/_react["default"].createElement(_styled.BaseSortableIconContainer, null, /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronsUpDown, {
+    color: "currentColor"
   }));
 }
 var _default = exports["default"] = SortableIcon;

package/dist/Table/components/Cells/SortableHeader/components/SortableIcon/styles/BaseSortableIconContainer.styles.js

@@ -7,5 +7,7 @@ exports["default"] = void 0;
 var _system = require("@vitality-ds/system");
 var text = _system.colorUseCases.text;
 var _default = exports["default"] = (0, _system.css)({
-  color: (0, _system.getColorScaleValueByUseCase)("neutral", text.placeholder)
+  color: (0, _system.getColorScaleValueByUseCase)("neutral", text.placeholder),
+  height: "1rem",
+  width: "1rem"
 });

package/dist/Table/components/Cells/SortableHeader/components/SortedIcon/index.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 function SortedIcon(_ref) {
   var sortBy = _ref.sortBy;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseSortedIconContainer, {
     sortBy: sortBy
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Back, {
-    color: "inherit",
-    size: "sm"
+  }, /*#__PURE__*/_react["default"].createElement(_lucideReact.ArrowUp, {
+    color: "currentColor",
+    size: "1rem"
   }));
 }
 var _default = exports["default"] = SortedIcon;

package/dist/Table/components/Cells/SortableHeader/components/SortedIcon/styles/BaseSortedIconContainer.js

@@ -8,13 +8,15 @@ var _system = require("@vitality-ds/system");
 var text = _system.colorUseCases.text;
 var _default = exports["default"] = (0, _system.css)({
   color: (0, _system.getColorScaleValueByUseCase)("neutral", text.lowContrast),
+  height: "1rem",
+  width: "1rem",
   variants: {
     sortBy: {
       descending: {
-        transform: "rotate(270deg)"
+        transform: "rotate(180deg)"
       },
       ascending: {
-        transform: "rotate(90deg)"
+        transform: "rotate(0deg)"
       }
     }
   }

package/dist/Table/components/MemoizedCell/constants.js

@@ -4,11 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_EMPTY_PLACEHOLDER = exports.CELL_TYPES = void 0;
+exports.PLACEHOLDER_SAFE_CELL_TYPES = exports.DEFAULT_EMPTY_PLACEHOLDER = exports.CELL_TYPES = void 0;
 var _Cells = require("../Cells");
 var _Custom = _interopRequireDefault(require("../Cells/Custom"));
 var _SearchSelectInput = _interopRequireDefault(require("../Cells/SearchSelectInput"));
 var DEFAULT_EMPTY_PLACEHOLDER = exports.DEFAULT_EMPTY_PLACEHOLDER = "-";
+
+// Cell types that can safely render a placeholder with only `children`
+var PLACEHOLDER_SAFE_CELL_TYPES = exports.PLACEHOLDER_SAFE_CELL_TYPES = ["text", "number"];
 var errorGetCellProps = function errorGetCellProps(componentName) {
   // eslint-disable-next-line no-console
   console.error("[Vitality] You're trying to render a ".concat(componentName, " cell. But no getCellProps function was given to the column as a result nothing could be rendered. Please refer to https://vitalitydesignsystem.com/components/table for an implementation."));

package/dist/Table/components/MemoizedCell/logic.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Cells = require("../Cells");
 var _constants = require("./constants");
 function isCellContentsEmpty(rowData, colId, computedCellProps) {
   return rowData[colId] !== 0 && !rowData[colId] && !computedCellProps;
@@ -16,14 +15,16 @@ function getCellType(cellType, _ref, rowData, emptyPlaceholderText) {
     getCellProps = _ref.getCellProps;
   var computedCellProps = typeof getCellProps === "function" && getCellProps(colId, rowData);
   if (isCellContentsEmpty(rowData, colId, computedCellProps)) {
+    var _ref2 = _constants.PLACEHOLDER_SAFE_CELL_TYPES.includes(cellType) ? _constants.CELL_TYPES[cellType] : _constants.CELL_TYPES.text,
+      EmptyComponent = _ref2.component;
     return {
-      as: _Cells.TextCell,
+      as: EmptyComponent,
       children: emptyPlaceholderText || _constants.DEFAULT_EMPTY_PLACEHOLDER
     };
   }
-  var _ref2 = _constants.CELL_TYPES[cellType] || _constants.CELL_TYPES.text,
-    Component = _ref2.component,
-    defaultGetCellProps = _ref2.getCellProps;
+  var _ref3 = _constants.CELL_TYPES[cellType] || _constants.CELL_TYPES.text,
+    Component = _ref3.component,
+    defaultGetCellProps = _ref3.getCellProps;
   var getCellPropsFn = getCellProps || defaultGetCellProps;
   return (0, _extends2["default"])({}, getCellPropsFn(colId, rowData), {
     as: Component

package/dist/Table/components/MemoizedCell/logic.spec.js

@@ -71,6 +71,30 @@ describe("getCellType function", function () {
     expect(data.as).toEqual(_index.NumberCell);
     expect(data.children).toEqual("12");
   });
+  it("Should return a NumberCell with placeholder when number cell is empty", function () {
+    rowData.number = "";
+    var data = (0, _logic["default"])("number", {
+      colId: "number"
+    }, rowData, null);
+    expect(data.as).toEqual(_index.NumberCell);
+    expect(data.children).toEqual("-");
+  });
+  it("Should fall back to TextCell with placeholder when link cell is empty", function () {
+    rowData.link = "";
+    var data = (0, _logic["default"])("link", {
+      colId: "link"
+    }, rowData, null);
+    expect(data.as).toEqual(_index.TextCell);
+    expect(data.children).toEqual("-");
+  });
+  it("Should fall back to TextCell with placeholder when icon cell is empty", function () {
+    rowData.icon = "";
+    var data = (0, _logic["default"])("icon", {
+      colId: "icon"
+    }, rowData, null);
+    expect(data.as).toEqual(_index.TextCell);
+    expect(data.children).toEqual("-");
+  });
   it("Should return an statusBadge with a console error", function () {
     var logSpy = jest.spyOn(global.console, "error");
     var data = (0, _logic["default"])("statusBadge", {

package/dist/Table/components/Pagination/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _IconButton = _interopRequireDefault(require("../../../IconButton"));
 var _Select = require("../../../Input/Select");
@@ -57,14 +57,14 @@ function Pagination(_ref) {
     variant: "inherit"
   }, "".concat(start, " - ").concat(end, " of ").concat(totalRows)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
     tooltipContent: "Previous page",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.ChevronLeft, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronLeft, null),
     disabled: page === 0,
     onClick: function onClick() {
       return onSetPage(page - 1);
     }
   }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
     tooltipContent: "Next page",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.ChevronRight, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronRight, null),
     disabled: disableNavigateNext,
     onClick: function onClick() {
       return onSetPage(page + 1);

package/dist/Table/components/States/Error/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ErrorState = ErrorState;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../../../../Button"));
 var _empties = require("../../../../helpers/logic/empties");
@@ -27,9 +27,10 @@ function ErrorState(_ref) {
     align: "center",
     direction: size === "compact" ? "horizontal" : "vertical"
   }, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    direction: "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Error, {
-    color: "critical"
+    direction: "horizontal",
+    align: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_lucideReact.CircleAlert, {
+    color: "var(--vitality-colors-critical11)"
   }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     color: "critical"
   }, errorMessage)), errorButtonProps && onClick && /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/dist/Tabs/index.js

@@ -16,27 +16,37 @@ function Tabs(_ref) {
     tabAlignment = _ref.tabAlignment,
     tabsData = _ref.tabsData,
     tabListAriaLabel = _ref.tabListAriaLabel,
-    defaultValue = _ref.defaultValue;
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    orientation = _ref.orientation,
+    dir = _ref.dir,
+    activationMode = _ref.activationMode;
   return /*#__PURE__*/_react["default"].createElement(_Root["default"], {
-    defaultValue: defaultValue || ((_tabsData$ = tabsData[0]) === null || _tabsData$ === void 0 ? void 0 : _tabsData$.value)
+    defaultValue: defaultValue || ((_tabsData$ = tabsData[0]) === null || _tabsData$ === void 0 ? void 0 : _tabsData$.value),
+    value: value,
+    onValueChange: onValueChange,
+    orientation: orientation,
+    dir: dir,
+    activationMode: activationMode
   }, /*#__PURE__*/_react["default"].createElement(_TabsList.BaseTabsListContainer, null, /*#__PURE__*/_react["default"].createElement(_TabsList.BaseTabsList, {
     tabAlignment: tabAlignment,
     "aria-label": tabListAriaLabel
   }, tabsData.map(function (_ref2) {
-    var value = _ref2.value,
+    var tabValue = _ref2.value,
       label = _ref2.label,
       disabled = _ref2.disabled;
     return /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-      key: value,
-      value: value,
+      key: tabValue,
+      value: tabValue,
       disabled: disabled
     }, label);
   })), additionalActions), tabsData.map(function (_ref3) {
-    var value = _ref3.value,
+    var tabValue = _ref3.value,
       contentRenderer = _ref3.contentRenderer;
     return /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
-      key: value,
-      value: value
+      key: tabValue,
+      value: tabValue
     }, contentRenderer(tabsData));
   }));
 }

package/dist/Toaster/components/CloseIconButton/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireWildcard(require("react"));
 var _Tooltip = _interopRequireDefault(require("../../../Tooltip"));
 var _ToastProvider = require("../../ToastProvider");
@@ -20,9 +20,9 @@ function CloseIconButton(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_styled.BaseCloseIconButton, {
     type: type,
     onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(_icons.Close, {
-    size: "sm",
-    color: "inherit"
+  }, /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
+    size: "1rem",
+    color: "currentColor"
   })));
 }
 var _default = exports["default"] = CloseIconButton;

package/dist/Toaster/components/Toast/constants.js

@@ -4,22 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var TOAST_TYPES = {
   success: {
-    icon: _icons.Completed
+    icon: _lucideReact.CircleCheck
   },
   warning: {
-    icon: _icons.Error
+    icon: _lucideReact.CircleAlert
   },
   error: {
-    icon: _icons.Error
+    icon: _lucideReact.CircleAlert
   },
   info: {
-    icon: _icons.Info
+    icon: _lucideReact.Info
   },
   general: {
-    icon: _icons.Info
+    icon: _lucideReact.Info
   }
 };
 var _default = exports["default"] = TOAST_TYPES;

package/dist/Toaster/components/Toast/helpers/getVariantsByColorScale.js

@@ -12,10 +12,8 @@ function getVariantsByColorScale(colorScale) {
   return {
     backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.app),
     color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiContrast),
-    svg: {
-      path: {
-        fill: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast)
-      }
+    "svg.icon": {
+      color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast)
     },
     borderColor: "".concat((0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation), " ").concat((0, _system.getColorScaleValueByUseCase)(colorScale, borders.uiElement), " ").concat((0, _system.getColorScaleValueByUseCase)(colorScale, borders.uiElement))
   };

package/dist/Toaster/components/Toast/index.js

@@ -24,7 +24,7 @@ function Toast(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseToast, {
     type: type
   }, !hideIcon && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(IconComponent, {
-    size: "sm"
+    className: "icon"
   })), /*#__PURE__*/_react["default"].createElement(_styled.BaseContent, null, title && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: "display200"
   }, title), message && /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, message)), /*#__PURE__*/_react["default"].createElement(_CloseIconButton["default"], {

package/dist/Toaster/components/Toast/logic.spec.js

@@ -1,31 +1,31 @@
 "use strict";
 
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _logic = require("./logic");
 describe("getIconFromType", function () {
   it("should return the icon for the success toast type", function () {
     var type = "success";
     var icon = (0, _logic.getIconFromType)(type);
-    expect(icon).toEqual(_icons.Completed);
+    expect(icon).toEqual(_lucideReact.CircleCheck);
   });
   it("should return the icon for the warning toast type", function () {
     var type = "warning";
     var icon = (0, _logic.getIconFromType)(type);
-    expect(icon).toEqual(_icons.Error);
+    expect(icon).toEqual(_lucideReact.CircleAlert);
   });
   it("should return the icon for the error toast type", function () {
     var type = "error";
     var icon = (0, _logic.getIconFromType)(type);
-    expect(icon).toEqual(_icons.Error);
+    expect(icon).toEqual(_lucideReact.CircleAlert);
   });
   it("should return the icon for the info toast type", function () {
     var type = "info";
     var icon = (0, _logic.getIconFromType)(type);
-    expect(icon).toEqual(_icons.Info);
+    expect(icon).toEqual(_lucideReact.Info);
   });
   it("should return the icon for the general toast type", function () {
     var type = "general";
     var icon = (0, _logic.getIconFromType)(type);
-    expect(icon).toEqual(_icons.Info);
+    expect(icon).toEqual(_lucideReact.Info);
   });
 });

package/dist/Toaster/components/Toast/styles/BaseToast.styles.js

@@ -18,6 +18,9 @@ var _default = exports["default"] = (0, _system.css)({
   boxSizing: "border-box",
   padding: "$md",
   gap: "$sm",
+  "svg.icon": {
+    verticalAlign: "middle"
+  },
   variants: {
     type: {
       success: (0, _getVariantsByColorScale["default"])("success"),