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

package/dist/Dialog/components/DialogHeader/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 _Stack = _interopRequireDefault(require("../../../Stack"));
@@ -22,7 +22,8 @@ function DialogHeader(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseDialogHeader, {
     variant: variant
   }, /*#__PURE__*/_react["default"].createElement(_styled.TitleContainer, null, _constants["default"][variant].titleIcon && IconComponent && /*#__PURE__*/_react["default"].createElement(IconComponent, {
-    color: "inherit"
+    color: "currentColor",
+    size: "1.5rem"
   }), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
     spacing: "none"
   }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
@@ -35,8 +36,8 @@ function DialogHeader(_ref) {
     size: "compact",
     onClick: closeButtonOnClick,
     tooltipContent: "Close Dialog",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.Close, {
-      color: "lowContrast"
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
+      color: "gray"
     })
   })));
 }

package/dist/Dialog/constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var VARIANT_OPTIONS = {
   custom: {
     titleIcon: true,
@@ -38,7 +38,7 @@ var VARIANT_OPTIONS = {
   },
   warning: {
     titleIcon: true,
-    forcedIcon: _icons.Alert,
+    forcedIcon: _lucideReact.TriangleAlert,
     actionsAllowed: true,
     primaryActionVariant: "warning",
     primaryActionText: "Confirm",
@@ -48,7 +48,7 @@ var VARIANT_OPTIONS = {
   },
   destructive: {
     titleIcon: true,
-    forcedIcon: _icons.Error,
+    forcedIcon: _lucideReact.CircleAlert,
     actionsAllowed: true,
     primaryActionVariant: "destructive",
     primaryActionText: "Delete",

package/dist/DropdownMenu/components/Content/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 _Shortcuts = _interopRequireDefault(require("../../../Shortcuts"));
 var _Stack = _interopRequireDefault(require("../../../Stack"));
@@ -21,15 +21,14 @@ function Content(_ref) {
     direction: "horizontal",
     spacing: "sm",
     align: "center"
-  }, checked && /*#__PURE__*/_react["default"].createElement(_styled.CheckedIndicator, null, /*#__PURE__*/_react["default"].createElement(_icons.Done, {
-    size: "sm",
-    color: "inherit"
+  }, checked && /*#__PURE__*/_react["default"].createElement(_styled.CheckedIndicator, null, /*#__PURE__*/_react["default"].createElement(_lucideReact.Check, {
+    color: "currentColor"
   })), icon && /*#__PURE__*/_react["default"].createElement(_IconContainer["default"], {
     icon: icon
   }), label), /*#__PURE__*/_react["default"].createElement(_Stack["default"], null, shortcut && /*#__PURE__*/_react["default"].createElement(_Shortcuts["default"], {
     keys: shortcut
-  }), showSubmenuIndicator && /*#__PURE__*/_react["default"].createElement(_icons.ChevronRight, {
-    color: "inherit"
+  }), showSubmenuIndicator && /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronRight, {
+    color: "currentColor"
   })));
 }
 var _default = exports["default"] = Content;

package/dist/DropdownMenu/components/IconContainer/index.js

@@ -11,7 +11,6 @@ function DropdownMenuItemIconContainer(_ref) {
   var icon = _ref.icon;
   var Component = icon && icon.type;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseDropdownMenuItemIcon, null, /*#__PURE__*/_react["default"].createElement(Component, {
-    size: "sm",
-    color: "inherit"
+    color: "currentColor"
   }));
 }

package/dist/DropdownMenu/styles/Content.styles.js

@@ -21,5 +21,8 @@ var _default = exports["default"] = (0, _system.css)({
   zIndex: "$floatingElements",
   boxSizing: "border-box",
   maxHeight: "calc(var(--radix-dropdown-menu-content-available-height) - var(--vitality-space-md))",
-  overflow: "auto"
+  overflow: "auto",
+  svg: {
+    verticalAlign: "text-bottom"
+  }
 });

package/dist/Form/FormField/index.js

@@ -7,8 +7,8 @@ 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 _system = require("@vitality-ds/system");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../../Box"));
 var _Stack = _interopRequireDefault(require("../../Stack"));
@@ -56,9 +56,9 @@ function FormField(_ref) {
     minHeight: _system.theme.fontSizes.caption.value
   }, /*#__PURE__*/_react["default"].createElement(_styled.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
     content: infoTooltipContent
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icons.Info, {
-    color: "inherit",
-    size: "sm"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, {
+    color: "currentColor",
+    size: "0.875rem"
   })))))), /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
     onChange: onChange,
     value: value,

package/dist/Form/HelperMessage/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 _Stack = _interopRequireDefault(require("../../Stack"));
 var _styled = require("./styled");
@@ -22,9 +22,9 @@ var HelperMessage = /*#__PURE__*/_react["default"].forwardRef(function (_ref, fo
     direction: "horizontal",
     spacing: "xs",
     align: "center"
-  }, hasError && /*#__PURE__*/_react["default"].createElement(_icons.Error, {
-    size: "sm",
-    color: "critical"
+  }, hasError && /*#__PURE__*/_react["default"].createElement(_lucideReact.CircleAlert, {
+    size: "0.875rem",
+    color: "var(--vitality-colors-critical11)"
   }), children) : children);
 });
 HelperMessage.displayName = "HelperMessage";

package/dist/IconButton/index.js

@@ -7,7 +7,7 @@ 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 _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _styled = require("./styled");
@@ -18,7 +18,7 @@ var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     disabled = _ref.disabled,
     isSelected = _ref.isSelected,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/_react["default"].createElement(_icons.Add, null) : _ref$icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/_react["default"].createElement(_lucideReact.Plus, null) : _ref$icon,
     size = _ref.size,
     href = _ref.href,
     tooltipContent = _ref.tooltipContent,

package/dist/IconButton/styles/BaseIconButton.styles.js

@@ -30,9 +30,12 @@ var _default = exports["default"] = (0, _system.css)({
   alignSelf: "center",
   svg: {
     pointerEvents: "none",
+    verticalAlign: "middle",
+    width: "1rem",
+    height: "1rem",
     marginTop: 0,
-    "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-      fill: "$$iconColor"
+    "altGlyph, circle, ellipse, line, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+      stroke: "$$iconColor"
     }
   },
   "&:hover": {
@@ -79,7 +82,7 @@ var _default = exports["default"] = (0, _system.css)({
       compact: {
         padding: "$xs",
         svg: {
-          $$size: "22px",
+          $$size: "0.875rem",
           width: "$$size",
           height: "$$size"
         }

package/dist/Input/DatePicker/components/Calendar/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = Calendar;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _icons = require("@vitality-ds/icons");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireWildcard(require("react"));
 var _reactCalendar = require("react-calendar");
 var _IconButton = _interopRequireDefault(require("../../../../IconButton"));
@@ -41,7 +41,7 @@ function Calendar(_ref) {
     tooltipContent: prevMonthTooltip,
     size: "compact",
     disabled: prevMonthTooltip === "End of Range",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.ChevronLeft, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronLeft, null),
     onClick: function onClick() {
       dispatch({
         type: "DECREMENT_MONTH"
@@ -75,7 +75,7 @@ function Calendar(_ref) {
     tooltipContent: nextMonthTooltip,
     disabled: nextMonthTooltip === "End of Range",
     size: "compact",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.ChevronRight, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronRight, null),
     onClick: function onClick() {
       dispatch({
         type: "INCREMENT_MONTH"

package/dist/Input/DatePicker/index.js

@@ -7,8 +7,8 @@ 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 _dayjs = _interopRequireDefault(require("dayjs"));
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _Popover = _interopRequireDefault(require("../../Popover"));
 var _TextInput = _interopRequireDefault(require("../TextInput"));
@@ -73,7 +73,7 @@ var DatePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       adornEnd: {
         type: "iconButton",
         props: {
-          icon: /*#__PURE__*/_react["default"].createElement(_icons.Date, null),
+          icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.Calendar, null),
           onClick: onIconButtonClick,
           // Let the user tab to the next field without focusing the icon button
           tabIndex: -1,

package/dist/Input/DateRangePicker/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 _DropdownMenu = _interopRequireDefault(require("../../DropdownMenu"));
 var _Flex = _interopRequireDefault(require("../../Flex"));
@@ -93,16 +93,14 @@ var DateRangePicker = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     onClick: function onClick() {
       return handleClearButtonClick();
     },
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.Close, null),
-    size: "compact"
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.X, null)
   }), showPresets && /*#__PURE__*/_react["default"].createElement(_DropdownMenu["default"], {
     disabled: disabled,
     trigger: {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/_react["default"].createElement(_icons.MenuMoreVertical, null),
-        tooltipContent: "Preset Ranges",
-        size: "compact"
+        icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.EllipsisVertical, null),
+        tooltipContent: "Preset Ranges"
       }
     },
     items: itemsArray,

package/dist/Input/DateRangePicker/styles/ExtrasContainers.js

@@ -1,10 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _system = require("@vitality-ds/system");
-var _default = exports["default"] = (0, _system.css)({
+var _styled = require("../../../IconButton/styled");
+var _default = exports["default"] = (0, _system.css)((0, _defineProperty2["default"])({
   display: "flex"
-});
+}, "".concat(_styled.BaseIconButtonLink, ", ").concat(_styled.BaseIconButton), {
+  padding: "$xs"
+}));

package/dist/Input/PasswordInput/constants.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.passwordProps = void 0;
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 // eslint-disable-next-line import/prefer-default-export
 var passwordProps = exports.passwordProps = {
   "true": {
     tooltipContent: "Hide Password",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.Visible, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.Eye, null),
     type: "text"
   },
   "false": {
     tooltipContent: "Show Password",
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.VisibleOff, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.EyeOff, null),
     type: "password"
   }
 };

package/dist/Input/SearchInput/index.js

@@ -7,7 +7,7 @@ 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 _TextInput = _interopRequireDefault(require("../TextInput"));
 var _excluded = ["isLoading", "name", "value", "onChange", "icon"];
@@ -18,7 +18,7 @@ var SearchInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forw
     value = _ref.value,
     onChange = _ref.onChange,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? _icons.Search : _ref$icon,
+    icon = _ref$icon === void 0 ? _lucideReact.Search : _ref$icon,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_TextInput["default"], (0, _extends2["default"])({
     ref: forwardedRef,

package/dist/Input/Select/SearchSelectInput/index.js

@@ -7,7 +7,7 @@ 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 _AsyncSelect = _interopRequireDefault(require("../AsyncSelect"));
 var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
@@ -18,7 +18,7 @@ var SearchSelectInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref
     name = _ref.name,
     id = _ref.id,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? _icons.Search : _ref$icon,
+    icon = _ref$icon === void 0 ? _lucideReact.Search : _ref$icon,
     _ref$hideDropdownIndi = _ref.hideDropdownIndicator,
     hideDropdownIndicator = _ref$hideDropdownIndi === void 0 ? true : _ref$hideDropdownIndi,
     _ref$openMenuOnClick = _ref.openMenuOnClick,

package/dist/Input/Select/components/Chip/MultiValueRemove/index.js

@@ -5,15 +5,15 @@ 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 _reactSelect = require("react-select");
 var _RemoveButton = require("../../../../../Chip/components/RemoveButton");
 var MultiValueRemove = _reactSelect.components.MultiValueRemove;
 function CustomMultiValueRemove(props) {
-  return /*#__PURE__*/_react["default"].createElement(_RemoveButton.RemoveButtonContainer, null, /*#__PURE__*/_react["default"].createElement(MultiValueRemove, props, /*#__PURE__*/_react["default"].createElement(_icons.Close, {
-    color: "inherit",
-    size: "inherit"
+  return /*#__PURE__*/_react["default"].createElement(_RemoveButton.RemoveButtonContainer, null, /*#__PURE__*/_react["default"].createElement(MultiValueRemove, props, /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
+    color: "currentColor",
+    size: "1em"
   })));
 }
 var _default = exports["default"] = CustomMultiValueRemove;

package/dist/Input/Select/components/ClearButton/index.js

@@ -5,13 +5,13 @@ 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 CustomClearButton(innerProps) {
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseClearButton, innerProps, /*#__PURE__*/_react["default"].createElement(_icons.Close, {
-    size: "inherit",
-    color: "inherit"
+  return /*#__PURE__*/_react["default"].createElement(_styled.BaseClearButton, innerProps, /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
+    size: "1em",
+    color: "currentColor"
   }));
 }
 var _default = exports["default"] = CustomClearButton;

package/dist/Input/Select/components/DropdownIndicator/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 function CustomDropdownIndicator(innerProps) {
@@ -15,12 +15,12 @@ function CustomDropdownIndicator(innerProps) {
     isDisabled = _innerProps$selectPro.isDisabled;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseDropdownIndicator, (0, _extends2["default"])({}, innerProps, {
     disabled: isDisabled
-  }), menuIsOpen ? /*#__PURE__*/_react["default"].createElement(_icons.Collapse, {
-    size: "inherit",
-    color: "inherit"
-  }) : /*#__PURE__*/_react["default"].createElement(_icons.Expand, {
-    size: "inherit",
-    color: "inherit"
+  }), menuIsOpen ? /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronUp, {
+    size: "1rem",
+    color: "currentColor"
+  }) : /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronDown, {
+    size: "1rem",
+    color: "currentColor"
   }));
 }
 var _default = exports["default"] = CustomDropdownIndicator;

package/dist/Input/TextInput/components/IconAdornment/index.js

@@ -12,7 +12,6 @@ function IconAdornment(_ref) {
     color = _ref.color;
   var Component = icon;
   return /*#__PURE__*/_react["default"].createElement(_styled.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(Component, {
-    size: "md",
-    color: color || "lowContrast"
+    color: color || "currentColor"
   }));
 }

package/dist/Input/TextInput/components/IconAdornment/styles/BaseIconWrapper.styles.js

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BaseIconWrapper = void 0;
 var _system = require("@vitality-ds/system");
+var _tokens = require("@vitality-ds/tokens");
+var text = _tokens.colorUseCases.text;
 // eslint-disable-next-line import/prefer-default-export
 var BaseIconWrapper = exports.BaseIconWrapper = (0, _system.css)({
   svg: {
     marginTop: "unset",
-    $$size: "22px",
+    $$size: "1rem",
     height: "$$size",
-    width: "$$size"
+    width: "$$size",
+    color: (0, _tokens.getColorScaleValueByUseCase)("neutral", text.lowContrast),
+    verticalAlign: "text-top"
   }
 });

package/dist/Input/TextInput/components/IconButtonAdornment/index.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = IconButtonAdornment;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _IconButton = _interopRequireDefault(require("../../../../IconButton"));
 var _styled = require("./styled");
 function IconButtonAdornment(props) {
-  return /*#__PURE__*/_react["default"].createElement(_styled.IconButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({
-    size: "compact"
-  }, props)));
+  return /*#__PURE__*/_react["default"].createElement(_styled.IconButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], props));
 }

package/dist/Input/TextInput/components/IconButtonAdornment/styles/BaseIconButtonWrapper.styles.js

@@ -10,12 +10,7 @@ var BaseIconButtonWrapper = exports.BaseIconButtonWrapper = (0, _system.css)({
   // @Todo When we have the primitives package, this should become an internal variant
   button: {
     padding: 0,
-    $$size: "24px",
-    height: "$$size",
-    width: "$$size"
-  },
-  svg: {
-    $$size: "22px",
+    $$size: "1.5rem",
     height: "$$size",
     width: "$$size"
   }

package/dist/Input/TextInput/components/SpinnerAdornment/index.js

@@ -10,6 +10,6 @@ var _Spinner = _interopRequireDefault(require("../../../../Spinner"));
 var _styled = require("./styled");
 function SpinnerAdornment() {
   return /*#__PURE__*/_react["default"].createElement(_styled.SpinnerWrapper, null, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
-    size: "md"
+    size: "sm"
   }));
 }

package/dist/Input/TextInput/components/SpinnerAdornment/styles/BaseSpinnerWrapper.styles.js

@@ -9,7 +9,7 @@ var _system = require("@vitality-ds/system");
 var BaseSpinnerWrapper = exports.BaseSpinnerWrapper = (0, _system.css)({
   svg: {
     marginTop: "unset",
-    $$size: "22px",
+    $$size: "1rem",
     height: "$$size",
     width: "$$size"
   }

package/dist/LucideProvider/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _lucideReact = require("lucide-react");
+var _react = _interopRequireDefault(require("react"));
+function LucideProvider(_ref) {
+  var _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {
+      size: 16
+    } : _ref$config,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_lucideReact.LucideProvider, config, children);
+}
+var _default = exports["default"] = LucideProvider;

package/dist/LucideProvider/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/Provider/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
+var _LucideProvider = _interopRequireDefault(require("../LucideProvider"));
 var _Sidebar = require("../Sidebar");
 var _ThemeProvider = require("../ThemeProvider");
 var _contexts = _interopRequireDefault(require("../Tooltip/contexts"));
@@ -18,7 +19,8 @@ function Provider(_ref) {
   var providerNameMap = {
     sidebar: _Sidebar.SidebarProvider,
     tooltip: _contexts["default"],
-    theme: _ThemeProvider.ThemeProvider
+    theme: _ThemeProvider.ThemeProvider,
+    lucide: _LucideProvider["default"]
   };
   var childrenWithProviders = children;
   Object.entries(providerNameMap).forEach(function (_ref2) {

package/dist/Sidebar/components/SidebarCloseButton/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 _styled = require("./styled");
@@ -13,7 +13,7 @@ function SidebarCloseButton(_ref) {
   var onClick = _ref.onClick,
     tooltipContent = _ref.tooltipContent;
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseSidebarCloseButton, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-    icon: /*#__PURE__*/_react["default"].createElement(_icons.Close, null),
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.X, null),
     size: "compact",
     tooltipContent: tooltipContent,
     onClick: onClick

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

@@ -12,7 +12,7 @@ var _default = exports["default"] = (0, _system.css)({
     width: "1em",
     height: "1em",
     path: {
-      fill: "currentColor"
+      stroke: "currentColor"
     },
     // Todo: find out why icons require top margin reset
     marginTop: 0

package/dist/StatusBadge/constants.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react = _interopRequireDefault(require("react"));
 var DEFAULT_ICONS = {
-  warning: /*#__PURE__*/_react["default"].createElement(_icons.Alert, null),
-  info: /*#__PURE__*/_react["default"].createElement(_icons.Info, null),
-  neutral: /*#__PURE__*/_react["default"].createElement(_icons.Info, null),
-  success: /*#__PURE__*/_react["default"].createElement(_icons.Completed, null),
-  critical: /*#__PURE__*/_react["default"].createElement(_icons.Error, null),
-  accent: /*#__PURE__*/_react["default"].createElement(_icons.Info, null)
+  warning: /*#__PURE__*/_react["default"].createElement(_lucideReact.TriangleAlert, null),
+  info: /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null),
+  neutral: /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null),
+  success: /*#__PURE__*/_react["default"].createElement(_lucideReact.CircleCheck, null),
+  critical: /*#__PURE__*/_react["default"].createElement(_lucideReact.CircleAlert, null),
+  accent: /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null),
+  brand: /*#__PURE__*/_react["default"].createElement(_icons.GentuLogo, null),
+  primary: /*#__PURE__*/_react["default"].createElement(_lucideReact.Info, null)
 };
 var _default = exports["default"] = DEFAULT_ICONS;