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

package/dist/esm/DropdownMenu/components/Content/index.js

@@ -1,4 +1,4 @@
-import { ChevronRight, Done } from "@vitality-ds/icons";
+import { Check, ChevronRight } from "lucide-react";
 import React from "react";
 import Shortcuts from "../../../Shortcuts";
 import Stack from "../../../Stack";
@@ -14,15 +14,14 @@ function Content(_ref) {
     direction: "horizontal",
     spacing: "sm",
     align: "center"
-  }, checked && /*#__PURE__*/React.createElement(CheckedIndicator, null, /*#__PURE__*/React.createElement(Done, {
-    size: "sm",
-    color: "inherit"
+  }, checked && /*#__PURE__*/React.createElement(CheckedIndicator, null, /*#__PURE__*/React.createElement(Check, {
+    color: "currentColor"
   })), icon && /*#__PURE__*/React.createElement(DropdownMenuItemIconContainer, {
     icon: icon
   }), label), /*#__PURE__*/React.createElement(Stack, null, shortcut && /*#__PURE__*/React.createElement(Shortcuts, {
     keys: shortcut
   }), showSubmenuIndicator && /*#__PURE__*/React.createElement(ChevronRight, {
-    color: "inherit"
+    color: "currentColor"
   })));
 }
 export default Content;

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

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

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

@@ -15,5 +15,8 @@ export default 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/esm/Form/FormField/index.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "helperMessage", "hasError", "inputProps", "onChange", "value", "id", "type", "required", "infoTooltipContent"];
-import { Info } from "@vitality-ds/icons";
 import { theme } from "@vitality-ds/system";
+import { Info } from "lucide-react";
 import React from "react";
 import Box from "../../Box";
 import Stack from "../../Stack";
@@ -50,8 +50,8 @@ function FormField(_ref) {
   }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: infoTooltipContent
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Info, {
-    color: "inherit",
-    size: "sm"
+    color: "currentColor",
+    size: "0.875rem"
   })))))), /*#__PURE__*/React.createElement(Component, _extends({
     onChange: onChange,
     value: value,

package/dist/esm/Form/HelperMessage/index.js

@@ -1,4 +1,4 @@
-import { Error } from "@vitality-ds/icons";
+import { CircleAlert } from "lucide-react";
 import React from "react";
 import Stack from "../../Stack";
 import { BaseHelperMessage } from "./styled";
@@ -15,9 +15,9 @@ var HelperMessage = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef)
     direction: "horizontal",
     spacing: "xs",
     align: "center"
-  }, hasError && /*#__PURE__*/React.createElement(Error, {
-    size: "sm",
-    color: "critical"
+  }, hasError && /*#__PURE__*/React.createElement(CircleAlert, {
+    size: "0.875rem",
+    color: "var(--vitality-colors-critical11)"
   }), children) : children);
 });
 HelperMessage.displayName = "HelperMessage";

package/dist/esm/IconButton/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onClick", "children", "disabled", "isSelected", "icon", "size", "href", "tooltipContent"];
-import { Add } from "@vitality-ds/icons";
+import { Plus } from "lucide-react";
 import React from "react";
 import Tooltip from "../Tooltip";
 import { BaseIconButton, BaseIconButtonLink } from "./styled";
@@ -11,7 +11,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     disabled = _ref.disabled,
     isSelected = _ref.isSelected,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Add, null) : _ref$icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(Plus, null) : _ref$icon,
     size = _ref.size,
     href = _ref.href,
     tooltipContent = _ref.tooltipContent,

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

@@ -24,9 +24,12 @@ export default 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": {
@@ -73,7 +76,7 @@ export default css({
       compact: {
         padding: "$xs",
         svg: {
-          $$size: "22px",
+          $$size: "0.875rem",
           width: "$$size",
           height: "$$size"
         }

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { ChevronLeft, ChevronRight } from "@vitality-ds/icons";
 import dayjs from "dayjs";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import React, { useReducer } from "react";
 import { MonthView } from "react-calendar";
 import IconButton from "../../../../IconButton";

package/dist/esm/Input/DatePicker/index.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "value", "onChange", "minYear", "maxYear", "id", "disabled", "css", "style", "className", "as", "asChild", "calendarValue", "openCalendarOnFocus", "onSelectedDateChange", "showFirstDateInRangeOnOpen", "onKeyDown"];
-import { Date } from "@vitality-ds/icons";
 import dayjs from "dayjs";
+import { Calendar as CalendarIcon } from "lucide-react";
 import React from "react";
 import Popover from "../../Popover";
 import TextInput from "../TextInput";
@@ -66,7 +66,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       adornEnd: {
         type: "iconButton",
         props: {
-          icon: /*#__PURE__*/React.createElement(Date, null),
+          icon: /*#__PURE__*/React.createElement(CalendarIcon, null),
           onClick: onIconButtonClick,
           // Let the user tab to the next field without focusing the icon button
           tabIndex: -1,

package/dist/esm/Input/DateRangePicker/index.js

@@ -1,4 +1,4 @@
-import { Close, MenuMoreVertical } from "@vitality-ds/icons";
+import { EllipsisVertical, X } from "lucide-react";
 import React from "react";
 import Dropdown from "../../DropdownMenu";
 import Flex from "../../Flex";
@@ -86,16 +86,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     onClick: function onClick() {
       return handleClearButtonClick();
     },
-    icon: /*#__PURE__*/React.createElement(Close, null),
-    size: "compact"
+    icon: /*#__PURE__*/React.createElement(X, null)
   }), showPresets && /*#__PURE__*/React.createElement(Dropdown, {
     disabled: disabled,
     trigger: {
       type: "iconButton",
       props: {
-        icon: /*#__PURE__*/React.createElement(MenuMoreVertical, null),
-        tooltipContent: "Preset Ranges",
-        size: "compact"
+        icon: /*#__PURE__*/React.createElement(EllipsisVertical, null),
+        tooltipContent: "Preset Ranges"
       }
     },
     items: itemsArray,

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

@@ -1,4 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from "@vitality-ds/system";
-export default css({
+import { BaseIconButton, BaseIconButtonLink } from "../../../IconButton/styled";
+export default css(_defineProperty({
   display: "flex"
-});
+}, "".concat(BaseIconButtonLink, ", ").concat(BaseIconButton), {
+  padding: "$xs"
+}));

package/dist/esm/Input/PasswordInput/constants.js

@@ -1,15 +1,15 @@
-import { Visible, VisibleOff } from "@vitality-ds/icons";
+import { Eye, EyeOff } from "lucide-react";
 import React from "react";
 // eslint-disable-next-line import/prefer-default-export
 export var passwordProps = {
   "true": {
     tooltipContent: "Hide Password",
-    icon: /*#__PURE__*/React.createElement(Visible, null),
+    icon: /*#__PURE__*/React.createElement(Eye, null),
     type: "text"
   },
   "false": {
     tooltipContent: "Show Password",
-    icon: /*#__PURE__*/React.createElement(VisibleOff, null),
+    icon: /*#__PURE__*/React.createElement(EyeOff, null),
     type: "password"
   }
 };

package/dist/esm/Input/SearchInput/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isLoading", "name", "value", "onChange", "icon"];
-import { Search } from "@vitality-ds/icons";
+import { Search } from "lucide-react";
 import React from "react";
 import TextInput from "../TextInput";
 var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onSearch", "onChange", "name", "id", "icon", "hideDropdownIndicator", "openMenuOnClick", "isMulti", "valueRenderType"];
-import { Search } from "@vitality-ds/icons";
+import { Search } from "lucide-react";
 import React from "react";
 import AsyncSelect from "../AsyncSelect";
 import useGetCustomComponents from "../hooks/useGetCustomComponents";

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

@@ -1,12 +1,12 @@
-import { Close } from "@vitality-ds/icons";
+import { X } from "lucide-react";
 import React from "react";
 import { components } from "react-select";
 import { RemoveButtonContainer } from "../../../../../Chip/components/RemoveButton";
 var MultiValueRemove = components.MultiValueRemove;
 function CustomMultiValueRemove(props) {
-  return /*#__PURE__*/React.createElement(RemoveButtonContainer, null, /*#__PURE__*/React.createElement(MultiValueRemove, props, /*#__PURE__*/React.createElement(Close, {
-    color: "inherit",
-    size: "inherit"
+  return /*#__PURE__*/React.createElement(RemoveButtonContainer, null, /*#__PURE__*/React.createElement(MultiValueRemove, props, /*#__PURE__*/React.createElement(X, {
+    color: "currentColor",
+    size: "1em"
   })));
 }
 export default CustomMultiValueRemove;

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

@@ -1,10 +1,10 @@
-import { Close } from "@vitality-ds/icons";
+import { X } from "lucide-react";
 import React from "react";
 import { BaseClearButton } from "./styled";
 function CustomClearButton(innerProps) {
-  return /*#__PURE__*/React.createElement(BaseClearButton, innerProps, /*#__PURE__*/React.createElement(Close, {
-    size: "inherit",
-    color: "inherit"
+  return /*#__PURE__*/React.createElement(BaseClearButton, innerProps, /*#__PURE__*/React.createElement(X, {
+    size: "1em",
+    color: "currentColor"
   }));
 }
 export default CustomClearButton;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Collapse, Expand } from "@vitality-ds/icons";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import React from "react";
 import { BaseDropdownIndicator } from "./styled";
 function CustomDropdownIndicator(innerProps) {
@@ -8,12 +8,12 @@ function CustomDropdownIndicator(innerProps) {
     isDisabled = _innerProps$selectPro.isDisabled;
   return /*#__PURE__*/React.createElement(BaseDropdownIndicator, _extends({}, innerProps, {
     disabled: isDisabled
-  }), menuIsOpen ? /*#__PURE__*/React.createElement(Collapse, {
-    size: "inherit",
-    color: "inherit"
-  }) : /*#__PURE__*/React.createElement(Expand, {
-    size: "inherit",
-    color: "inherit"
+  }), menuIsOpen ? /*#__PURE__*/React.createElement(ChevronUp, {
+    size: "1rem",
+    color: "currentColor"
+  }) : /*#__PURE__*/React.createElement(ChevronDown, {
+    size: "1rem",
+    color: "currentColor"
   }));
 }
 export default CustomDropdownIndicator;

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

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

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

@@ -1,11 +1,14 @@
 import { css } from "@vitality-ds/system";
-
+import { colorUseCases, getColorScaleValueByUseCase } from "@vitality-ds/tokens";
+var text = colorUseCases.text;
 // eslint-disable-next-line import/prefer-default-export
 export var BaseIconWrapper = css({
   svg: {
     marginTop: "unset",
-    $$size: "22px",
+    $$size: "1rem",
     height: "$$size",
-    width: "$$size"
+    width: "$$size",
+    color: getColorScaleValueByUseCase("neutral", text.lowContrast),
+    verticalAlign: "text-top"
   }
 });

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

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import IconButton from "../../../../IconButton";
 import { IconButtonWrapper } from "./styled";
 export default function IconButtonAdornment(props) {
-  return /*#__PURE__*/React.createElement(IconButtonWrapper, null, /*#__PURE__*/React.createElement(IconButton, _extends({
-    size: "compact"
-  }, props)));
+  return /*#__PURE__*/React.createElement(IconButtonWrapper, null, /*#__PURE__*/React.createElement(IconButton, props));
 }

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

@@ -5,12 +5,7 @@ export var BaseIconButtonWrapper = 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/esm/Input/TextInput/components/SpinnerAdornment/index.js

@@ -3,6 +3,6 @@ import Spinner from "../../../../Spinner";
 import { SpinnerWrapper } from "./styled";
 export default function SpinnerAdornment() {
   return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
-    size: "md"
+    size: "sm"
   }));
 }

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

@@ -4,7 +4,7 @@ import { css } from "@vitality-ds/system";
 export var BaseSpinnerWrapper = css({
   svg: {
     marginTop: "unset",
-    $$size: "22px",
+    $$size: "1rem",
     height: "$$size",
     width: "$$size"
   }

package/dist/esm/LucideProvider/index.js

@@ -0,0 +1,11 @@
+import { LucideProvider as BaseLucideProvider } from "lucide-react";
+import React from "react";
+function LucideProvider(_ref) {
+  var _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {
+      size: 16
+    } : _ref$config,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(BaseLucideProvider, config, children);
+}
+export default LucideProvider;

package/dist/esm/LucideProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Provider/index.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from "react";
+import LucideProvider from "../LucideProvider";
 import { SidebarProvider } from "../Sidebar";
 import { ThemeProvider } from "../ThemeProvider";
 import TooltipProvider from "../Tooltip/contexts";
@@ -11,7 +12,8 @@ function Provider(_ref) {
   var providerNameMap = {
     sidebar: SidebarProvider,
     tooltip: TooltipProvider,
-    theme: ThemeProvider
+    theme: ThemeProvider,
+    lucide: LucideProvider
   };
   var childrenWithProviders = children;
   Object.entries(providerNameMap).forEach(function (_ref2) {

package/dist/esm/Sidebar/components/SidebarCloseButton/index.js

@@ -1,4 +1,4 @@
-import { Close } from "@vitality-ds/icons";
+import { X } from "lucide-react";
 import React from "react";
 import IconButton from "../../../IconButton";
 import { BaseSidebarCloseButton } from "./styled";
@@ -6,7 +6,7 @@ function SidebarCloseButton(_ref) {
   var onClick = _ref.onClick,
     tooltipContent = _ref.tooltipContent;
   return /*#__PURE__*/React.createElement(BaseSidebarCloseButton, null, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Close, null),
+    icon: /*#__PURE__*/React.createElement(X, null),
     size: "compact",
     tooltipContent: tooltipContent,
     onClick: onClick

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

@@ -6,7 +6,7 @@ export default css({
     width: "1em",
     height: "1em",
     path: {
-      fill: "currentColor"
+      stroke: "currentColor"
     },
     // Todo: find out why icons require top margin reset
     marginTop: 0

package/dist/esm/StatusBadge/constants.js

@@ -1,11 +1,14 @@
-import { Alert, Completed, Error, Info } from "@vitality-ds/icons";
+import { GentuLogo } from "@vitality-ds/icons";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
 import React from "react";
 var DEFAULT_ICONS = {
-  warning: /*#__PURE__*/React.createElement(Alert, null),
+  warning: /*#__PURE__*/React.createElement(TriangleAlert, null),
   info: /*#__PURE__*/React.createElement(Info, null),
   neutral: /*#__PURE__*/React.createElement(Info, null),
-  success: /*#__PURE__*/React.createElement(Completed, null),
-  critical: /*#__PURE__*/React.createElement(Error, null),
-  accent: /*#__PURE__*/React.createElement(Info, null)
+  success: /*#__PURE__*/React.createElement(CircleCheck, null),
+  critical: /*#__PURE__*/React.createElement(CircleAlert, null),
+  accent: /*#__PURE__*/React.createElement(Info, null),
+  brand: /*#__PURE__*/React.createElement(GentuLogo, null),
+  primary: /*#__PURE__*/React.createElement(Info, null)
 };
 export default DEFAULT_ICONS;

package/dist/esm/StatusBadge/logic.spec.js

@@ -1,9 +1,10 @@
-import { Alert, Completed, Error, Info } from "@vitality-ds/icons";
+import { GentuLogo } from "@vitality-ds/icons";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
 import React from "react";
 import { getIcon } from "./logic";
 describe("getIcon", function () {
   it("returns the correct icon for the severity (warning)", function () {
-    expect(getIcon("warning")).toEqual(/*#__PURE__*/React.createElement(Alert, null));
+    expect(getIcon("warning")).toEqual(/*#__PURE__*/React.createElement(TriangleAlert, null));
   });
   it("returns the correct icon for the severity (info)", function () {
     expect(getIcon("info")).toEqual(/*#__PURE__*/React.createElement(Info, null));
@@ -12,10 +13,16 @@ describe("getIcon", function () {
     expect(getIcon("neutral")).toEqual(/*#__PURE__*/React.createElement(Info, null));
   });
   it("returns the correct icon for the severity (success)", function () {
-    expect(getIcon("success")).toEqual(/*#__PURE__*/React.createElement(Completed, null));
+    expect(getIcon("success")).toEqual(/*#__PURE__*/React.createElement(CircleCheck, null));
   });
   it("returns the correct icon for the severity (critical)", function () {
-    expect(getIcon("critical")).toEqual(/*#__PURE__*/React.createElement(Error, null));
+    expect(getIcon("critical")).toEqual(/*#__PURE__*/React.createElement(CircleAlert, null));
+  });
+  it("returns the correct icon for the severity (brand)", function () {
+    expect(getIcon("brand")).toEqual(/*#__PURE__*/React.createElement(GentuLogo, null));
+  });
+  it("returns the correct icon for the severity (primary)", function () {
+    expect(getIcon("primary")).toEqual(/*#__PURE__*/React.createElement(Info, null));
   });
   it("returns the correct icon when invalid severity is given", function () {
     expect(getIcon("invalid")).toEqual(/*#__PURE__*/React.createElement(Info, null));

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

@@ -42,7 +42,9 @@ export default css({
       warning: {},
       critical: {},
       info: {},
-      accent: {}
+      accent: {},
+      brand: {},
+      primary: {}
     }
   },
   compoundVariants: [
@@ -77,6 +79,14 @@ export default css({
     importance: "normal",
     severity: "accent",
     css: getNormalImportanceVariant("accent")
+  }, {
+    importance: "normal",
+    severity: "brand",
+    css: getNormalImportanceVariant("brand")
+  }, {
+    importance: "normal",
+    severity: "primary",
+    css: getNormalImportanceVariant("primary")
   },
   /**
    * Low Importance
@@ -109,6 +119,14 @@ export default css({
     importance: "low",
     severity: "accent",
     css: getLowImportanceVariant("accent")
+  }, {
+    importance: "low",
+    severity: "brand",
+    css: getLowImportanceVariant("brand")
+  }, {
+    importance: "low",
+    severity: "primary",
+    css: getLowImportanceVariant("primary")
   },
   /**
    * High Importance
@@ -141,5 +159,13 @@ export default css({
     importance: "high",
     severity: "accent",
     css: getHighImportanceVariant("accent")
+  }, {
+    importance: "high",
+    severity: "brand",
+    css: getHighImportanceVariant("brand")
+  }, {
+    importance: "high",
+    severity: "primary",
+    css: getHighImportanceVariant("primary")
   }]
 });

package/dist/esm/Switch/index.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["defaultChecked", "required", "name", "value", "id", "checked", "onCheckedChange", "disabled", "style", "className", "as", "css", "labelPosition", "label"];
-import { Close, Done } from "@vitality-ds/icons";
+import { Check, X } from "lucide-react";
 import React from "react";
 import Stack from "../Stack";
 import LABEL_DIRECTIONS from "./constants/labelDirections";
 import { BaseSwitch, BaseSwitchLabel, BaseSwitchThumb } from "./styled";
 var iconProps = {
-  color: "inherit",
-  size: "inherit"
+  color: "currentColor",
+  size: "0.875rem"
 };
 var Switch = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var defaultChecked = _ref.defaultChecked,
@@ -47,7 +47,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     ref: forwardedRef
   }, restProps), /*#__PURE__*/React.createElement(BaseSwitchThumb, {
     checked: checked
-  }), checked ? /*#__PURE__*/React.createElement(Done, iconProps) : /*#__PURE__*/React.createElement(Close, iconProps)));
+  }), checked ? /*#__PURE__*/React.createElement(Check, iconProps) : /*#__PURE__*/React.createElement(X, iconProps)));
 });
 Switch.displayName = "Switch";
 export default Switch;

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

@@ -1,8 +1,8 @@
-import { Delete, Download, Edit, Print } from "@vitality-ds/icons";
+import { Download, Pencil, Printer, Trash2 } from "lucide-react";
 var ICON_MAPPING = {
-  "delete": Delete,
-  edit: Edit,
-  print: Print,
+  "delete": Trash2,
+  edit: Pencil,
+  print: Printer,
   download: Download
 };
 export default ICON_MAPPING;

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

@@ -1,10 +1,9 @@
-import { Sortable } from "@vitality-ds/icons";
+import { ChevronsUpDown } from "lucide-react";
 import React from "react";
 import { BaseSortableIconContainer } from "./styled";
 function SortableIcon() {
-  return /*#__PURE__*/React.createElement(BaseSortableIconContainer, null, /*#__PURE__*/React.createElement(Sortable, {
-    color: "inherit",
-    size: "sm"
+  return /*#__PURE__*/React.createElement(BaseSortableIconContainer, null, /*#__PURE__*/React.createElement(ChevronsUpDown, {
+    color: "currentColor"
   }));
 }
 export default SortableIcon;

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

@@ -1,5 +1,7 @@
 import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
 var text = colorUseCases.text;
 export default css({
-  color: getColorScaleValueByUseCase("neutral", text.placeholder)
+  color: getColorScaleValueByUseCase("neutral", text.placeholder),
+  height: "1rem",
+  width: "1rem"
 });

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

@@ -1,13 +1,13 @@
-import { Back } from "@vitality-ds/icons";
+import { ArrowUp } from "lucide-react";
 import React from "react";
 import { BaseSortedIconContainer } from "./styled";
 function SortedIcon(_ref) {
   var sortBy = _ref.sortBy;
   return /*#__PURE__*/React.createElement(BaseSortedIconContainer, {
     sortBy: sortBy
-  }, /*#__PURE__*/React.createElement(Back, {
-    color: "inherit",
-    size: "sm"
+  }, /*#__PURE__*/React.createElement(ArrowUp, {
+    color: "currentColor",
+    size: "1rem"
   }));
 }
 export default SortedIcon;