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

package/dist/esm/AuditTrail/components/AuditItem/index.spec.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { render, screen } from "@testing-library/react";
-import { Add, Contact, GentuLogo, Link } from "@vitality-ds/icons";
+import { CircleUser, Link2, Plus } from "lucide-react";
+import { GentuLogo } from "@vitality-ds/icons";
 import React from "react";
 import { findSVGs } from "../../../helpers/test";
 import AuditItem from "./index";
@@ -23,7 +24,7 @@ describe("<AuditItem />", function () {
                 item: item
               })),
               container = _render.container;
-            expect(findSVGs(container, Add)).toHaveLength(1);
+            expect(findSVGs(container, Plus)).toHaveLength(1);
           });
           it("renders the name and preposition", function () {
             render(/*#__PURE__*/React.createElement(AuditItem, {
@@ -63,7 +64,7 @@ describe("<AuditItem />", function () {
                   item: item
                 })),
                 container = _render2.container;
-              expect(findSVGs(container, Add)).toHaveLength(1);
+              expect(findSVGs(container, Plus)).toHaveLength(1);
             });
             it("renders the name and preposition", function () {
               render(/*#__PURE__*/React.createElement(AuditItem, {
@@ -182,7 +183,7 @@ describe("<AuditItem />", function () {
             item: item
           })),
           container = _render5.container;
-        expect(findSVGs(container, Add)).toHaveLength(1);
+        expect(findSVGs(container, Plus)).toHaveLength(1);
       });
       it("does not render the name or preposition", function () {
         render(/*#__PURE__*/React.createElement(AuditItem, {
@@ -272,7 +273,7 @@ describe("<AuditItem />", function () {
     var defaultActionProps = {
       actionName: "Actioned",
       preposition: "from",
-      fallbackIcon: Contact,
+      fallbackIcon: CircleUser,
       forceIcon: false
     };
     var createItemProps = function createItemProps() {
@@ -301,14 +302,14 @@ describe("<AuditItem />", function () {
       describe("and when fallbackIcon is given", function () {
         var forceIconActionProps = _extends({}, defaultActionProps, {
           forceIcon: true,
-          fallbackIcon: Link
+          fallbackIcon: Link2
         });
         it("renders the fallbackIcon", function () {
           var _render6 = render(/*#__PURE__*/React.createElement(AuditItem, {
               item: createItemProps(forceIconActionProps)
             })),
             container = _render6.container;
-          expect(findSVGs(container, Link)).toHaveLength(1);
+          expect(findSVGs(container, Link2)).toHaveLength(1);
         });
       });
       describe("and fallbackIcon is not given", function () {
@@ -316,19 +317,19 @@ describe("<AuditItem />", function () {
           fallbackIcon: null,
           forceIcon: true
         });
-        it("renders the <Contact /> icon", function () {
+        it("renders the <CircleUser /> icon", function () {
           var _render7 = render(/*#__PURE__*/React.createElement(AuditItem, {
               item: createItemProps(forceIconActionProps)
             })),
             container = _render7.container;
-          expect(findSVGs(container, Contact)).toHaveLength(1);
+          expect(findSVGs(container, CircleUser)).toHaveLength(1);
         });
       });
     });
     describe("and forceIcon is false", function () {
       var dontForceIconActionProps = _extends({}, defaultActionProps, {
         forceIcon: false,
-        fallbackIcon: Link
+        fallbackIcon: Link2
       });
       describe("and initials can be generated", function () {
         var item = _extends({}, createItemProps(dontForceIconActionProps), {
@@ -344,7 +345,7 @@ describe("<AuditItem />", function () {
       describe("and initials cannot be generated", function () {
         describe("and fallbackIcon is given", function () {
           var item = _extends({}, createItemProps(_extends({}, dontForceIconActionProps, {
-            fallbackIcon: Link
+            fallbackIcon: Link2
           })), {
             name: "Joe shmo the third"
           });
@@ -353,7 +354,7 @@ describe("<AuditItem />", function () {
                 item: item
               })),
               container = _render8.container;
-            expect(findSVGs(container, Link)).toHaveLength(1);
+            expect(findSVGs(container, Link2)).toHaveLength(1);
           });
         });
         describe("and fallbackIcon is not given", function () {
@@ -362,12 +363,12 @@ describe("<AuditItem />", function () {
           })), {
             name: "Joe shmo the third"
           });
-          it("renders the <Contact /> icon", function () {
+          it("renders the <CircleUser /> icon", function () {
             var _render9 = render(/*#__PURE__*/React.createElement(AuditItem, {
                 item: item
               })),
               container = _render9.container;
-            expect(findSVGs(container, Contact)).toHaveLength(1);
+            expect(findSVGs(container, CircleUser)).toHaveLength(1);
           });
         });
       });

package/dist/esm/AuditTrail/components/IconAvatar/index.js

@@ -1,12 +1,11 @@
-import { Contact } from "@vitality-ds/icons";
+import { CircleUser } from "lucide-react";
 import React from "react";
 import { IconAvatarContainer } from "./styled";
 function IconAvatar(_ref) {
   var icon = _ref.icon;
-  var IconComponent = icon || Contact;
+  var IconComponent = icon || CircleUser;
   return /*#__PURE__*/React.createElement(IconAvatarContainer, null, /*#__PURE__*/React.createElement(IconComponent, {
-    color: "inherit",
-    size: "sm"
+    color: "currentColor"
   }));
 }
 export default IconAvatar;

package/dist/esm/AuditTrail/constants.js

@@ -1,4 +1,5 @@
-import { Add, Completed, Delete, Edit, GentuLogo, Link, LinkOff, Print, Restore, RestrictedOff, RestrictedOn, ResultsAndLetters, ReviewFiles, Send } from "@vitality-ds/icons";
+import { GentuLogo } from "@vitality-ds/icons";
+import { CircleCheck, File, Inbox, Link2, Link2Off, Lock, LockOpen, Pencil, Plus, Printer, SendHorizontal, Trash2, Undo2 } from "lucide-react";
 export var PREPOSITIONS = {
   by: "by",
   to: "to",
@@ -11,121 +12,121 @@ export var ACTIONS = {
   complete: {
     actionName: "Completed",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Completed,
+    fallbackIcon: CircleCheck,
     forceIcon: false
   },
   create: {
     actionName: "Created",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Add,
+    fallbackIcon: Plus,
     forceIcon: false
   },
   "delete": {
     actionName: "Deleted",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Delete,
+    fallbackIcon: Trash2,
     forceIcon: false
   },
   edit: {
     actionName: "Edited",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Edit,
+    fallbackIcon: Pencil,
     forceIcon: false
   },
   finalise: {
     actionName: "Finalised",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Completed,
+    fallbackIcon: CircleCheck,
     forceIcon: false
   },
   linkBy: {
     actionName: "Linked",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Link,
+    fallbackIcon: Link2,
     forceIcon: false
   },
   linkTo: {
     actionName: "Linked",
     preposition: PREPOSITIONS.to,
-    fallbackIcon: Link,
+    fallbackIcon: Link2,
     forceIcon: true
   },
   print: {
     actionName: "Printed",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Print,
+    fallbackIcon: Printer,
     forceIcon: true
   },
   receive: {
     actionName: "Received",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: ResultsAndLetters,
+    fallbackIcon: Inbox,
     forceIcon: false
   },
   remove: {
     actionName: "Removed",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Delete,
+    fallbackIcon: Trash2,
     forceIcon: false
   },
   restrict: {
     actionName: "Restricted",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: RestrictedOn,
+    fallbackIcon: Lock,
     forceIcon: false
   },
   restore: {
     actionName: "Restored",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Restore,
+    fallbackIcon: Undo2,
     forceIcon: false
   },
   review: {
     actionName: "Reviewed",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: ReviewFiles,
+    fallbackIcon: File,
     forceIcon: false
   },
   sendBy: {
     actionName: "Sent",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Send,
+    fallbackIcon: SendHorizontal,
     forceIcon: false
   },
   sendTo: {
     actionName: "Sent",
     preposition: PREPOSITIONS.to,
-    fallbackIcon: Send,
+    fallbackIcon: SendHorizontal,
     forceIcon: true
   },
   unlinkBy: {
     actionName: "Unlinked",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: LinkOff,
+    fallbackIcon: Link2Off,
     forceIcon: false
   },
   unlinkFrom: {
     actionName: "Unlinked",
     preposition: PREPOSITIONS.from,
-    fallbackIcon: LinkOff,
+    fallbackIcon: Link2Off,
     forceIcon: true
   },
   unrestrict: {
     actionName: "Unrestricted",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: RestrictedOff,
+    fallbackIcon: LockOpen,
     forceIcon: false
   },
   update: {
     actionName: "Updated",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Edit,
+    fallbackIcon: Pencil,
     forceIcon: false
   },
   "void": {
     actionName: "Voided",
     preposition: PREPOSITIONS.by,
-    fallbackIcon: Delete,
+    fallbackIcon: Trash2,
     forceIcon: false
   }
 };

package/dist/esm/Breadcrumbs/components/Breadcrumb/index.js

@@ -1,4 +1,4 @@
-import { ChevronRight } from "@vitality-ds/icons";
+import { ChevronRight } from "lucide-react";
 import React from "react";
 import Tooltip from "../../../Tooltip";
 import { useIsOverflowing } from "./hooks";
@@ -26,7 +26,7 @@ function Breadcrumb(_ref) {
     href: href,
     target: target
   }, text), isLastItem ? null : /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "inherit"
+    size: "1em"
   }));
 }
 export default Breadcrumb;

package/dist/esm/Button/components/ButtonIcon/styles/BaseButtonIcon.styles.js

@@ -1,34 +1,32 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { BaseIcon } from "@vitality-ds/icons";
 import { css } from "@vitality-ds/system";
-export default css(_defineProperty(_defineProperty(_defineProperty({
-  $$spacing: "$space$sm"
-}, "& > ".concat(BaseIcon), {
-  // Aligning Icons to text baseline = most Icons have 2px inner bottom spacing -> 2/24 * 2 = 0.2 rounded up
-  marginTop: "-.2em"
-}), "svg", {
-  $$size: "16px",
-  width: "$$size",
-  height: "$$size",
-  opacity: 0.8,
-  "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-    fill: "currentColor"
-  }
-}), "variants", {
-  spacing: {
-    end: {
-      marginInlineEnd: "$$spacing",
-      marginInlineStart: "-$sm"
-    },
-    start: {
-      marginInlineEnd: "-$sm",
-      marginInlineStart: "$$spacing"
+export default css({
+  $$spacing: "$space$sm",
+  svg: {
+    $$size: "1rem",
+    width: "$$size",
+    height: "$$size",
+    opacity: 0.8,
+    verticalAlign: "text-bottom",
+    "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+      stroke: "currentColor"
     }
   },
-  size: {
-    "default": {},
-    compact: {
-      $$spacing: "$space$xs"
+  variants: {
+    spacing: {
+      end: {
+        marginInlineEnd: "$$spacing",
+        marginInlineStart: "-$sm"
+      },
+      start: {
+        marginInlineEnd: "-$sm",
+        marginInlineStart: "$$spacing"
+      }
+    },
+    size: {
+      "default": {},
+      compact: {
+        $$spacing: "$space$xs"
+      }
     }
   }
-}));
+});

package/dist/esm/Button/primitives/styles/BaseContentContainer.styles.js

@@ -4,7 +4,7 @@ export default css({
   opacity: 1,
   display: "flex",
   gap: "$sm",
-  alignItems: "anchor-center",
+  alignItems: "baseline",
   variants: {
     isLoading: {
       "true": {

package/dist/esm/Callout/constants.js

@@ -1,60 +1,61 @@
-import { Alert, Completed, Error, GentuLogo, Info } from "@vitality-ds/icons";
+// import { GentuLogo } from "@vitality-ds/icons";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
 // eslint-disable-next-line import/prefer-default-export
 export var DEFAULT_CONTENT = {
   success: {
-    icon: Completed,
+    icon: CircleCheck,
     title: "Success",
     titleColor: "$colors$success10",
     spinnerColor: "success",
-    iconColor: "success"
+    iconColor: "$colors$success10"
   },
   info: {
     icon: Info,
     title: "Information",
     titleColor: "$colors$info10",
     spinnerColor: "info",
-    iconColor: "info"
+    iconColor: "$colors$info10"
   },
   warning: {
-    icon: Alert,
+    icon: TriangleAlert,
     title: "Warning",
     titleColor: "$colors$warning10",
     spinnerColor: "warning",
-    iconColor: "warning"
+    iconColor: "$colors$warning10"
   },
   critical: {
-    icon: Error,
+    icon: CircleAlert,
     title: "Critical",
     titleColor: "$colors$critical10",
     spinnerColor: "critical",
-    iconColor: "critical"
+    iconColor: "$colors$critical10"
   },
   accent: {
     icon: Info,
     title: "Information",
     titleColor: "$colors$accent10",
     spinnerColor: "accent",
-    iconColor: "accent"
+    iconColor: "$colors$accent10"
   },
   brand: {
-    icon: GentuLogo,
+    icon: Info,
     title: "Brand",
     titleColor: "$colors$brand10",
     spinnerColor: "brand",
-    iconColor: "brand"
+    iconColor: "$colors$brand10"
   },
   primary: {
     icon: Info,
     title: "Information",
     titleColor: "$colors$primary10",
     spinnerColor: "primary",
-    iconColor: "primary"
+    iconColor: "$colors$primary10"
   },
   neutral: {
     icon: Info,
     title: "Information",
     titleColor: "$colors$neutral12",
     spinnerColor: "neutral",
-    iconColor: "lowContrast"
+    iconColor: "$colors$neutral12"
   }
 };

package/dist/esm/Callout/hooks/useCalloutContent.js

@@ -11,7 +11,7 @@ var useCalloutContent = function useCalloutContent(_ref) {
     iconColor = _getDefaultContent.iconColor,
     spinnerColor = _getDefaultContent.spinnerColor;
   var isCompactLayout = size === "compact" || size === "blockCompact";
-  var iconSize = isCompactLayout ? "sm" : "md";
+  var iconSize = "1rem";
   var titleToDisplay = title || defaultTitle;
   var iconToDisplay = icon || defaultIcon;
   return {

package/dist/esm/Callout/index.js

@@ -71,25 +71,21 @@ function Callout(_ref) {
       variant: "display300"
     }, titleToDisplay);
   };
-  var getIconContent = function getIconContent() {
-    if (size === "blockCompact") {
-      return /*#__PURE__*/React.createElement(BaseCalloutIconContainer, null, /*#__PURE__*/React.createElement(IconComponent, {
-        size: iconSize,
-        color: iconColor
-      }));
-    }
-    return /*#__PURE__*/React.createElement(IconComponent, {
-      size: iconSize,
-      color: iconColor
-    });
-  };
   return /*#__PURE__*/React.createElement(BaseCallout, {
     role: "alert",
     size: size,
     severity: severity
   }, /*#__PURE__*/React.createElement(BaseCalloutTitleContainer, {
-    size: size
-  }, getIconContent(), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/React.createElement(CalloutDescription, {
+    size: size,
+    css: {
+      color: iconColor
+    }
+  }, /*#__PURE__*/React.createElement(BaseCalloutIconContainer, {
+    topNudge: size
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    size: iconSize,
+    color: "currentColor"
+  })), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/React.createElement(CalloutDescription, {
     severity: severity,
     content: description
   }), actions && size !== "compact" && /*#__PURE__*/React.createElement(BaseCalloutActions, {

package/dist/esm/Callout/styles/BaseCalloutIconContainer.styles.js

@@ -1,7 +1,17 @@
 import { css } from "@vitality-ds/system";
 
-// Adjust alignment of inline text with the icon in blockCompact mode
+// Adjust alignment of inline text with the icon
 export default css({
   display: "flex",
-  marginTop: "0.15rem"
+  variants: {
+    topNudge: {
+      "default": {
+        marginTop: ".25rem"
+      },
+      blockCompact: {
+        marginTop: "0.15rem"
+      },
+      compact: {}
+    }
+  }
 });

package/dist/esm/Chip/components/Checkbox/constants.js

@@ -1,4 +1,4 @@
-import { Done } from "@vitality-ds/icons";
+import { Check } from "lucide-react";
 import React from "react";
 import Spinner from "../../../Spinner";
 import { BaseChipCheckboxBox } from "./styled";
@@ -7,9 +7,9 @@ export var COMPONENTS = {
   LOADING: /*#__PURE__*/React.createElement(Spinner, {
     size: "xs"
   }),
-  CHECKED: /*#__PURE__*/React.createElement(Done, {
-    size: "sm",
-    color: "success"
+  CHECKED: /*#__PURE__*/React.createElement(Check, {
+    size: "1rem",
+    color: "var(--vitality-colors-success11)"
   }),
   UNCHECKED: /*#__PURE__*/React.createElement(BaseChipCheckboxBox, null)
 };

package/dist/esm/Chip/components/ChipIcon/index.js

@@ -10,7 +10,7 @@ export default function ChipIcon(_ref) {
   return /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
     tooltipContent: tooltipContent
   }, /*#__PURE__*/React.createElement(Icon, {
-    size: "sm",
-    color: "lowContrast"
+    size: "1rem",
+    color: "currentColor"
   }));
 }

package/dist/esm/Chip/components/RemoveButton/index.js

@@ -1,4 +1,4 @@
-import { Close } from "@vitality-ds/icons";
+import { X } from "lucide-react";
 import React from "react";
 import ConditionalTooltipWrapper from "../../../helpers/components/ConditionalTooltipWrapper";
 import { BaseRemoveButtonButton, BaseRemoveButtonContainer } from "./styled";
@@ -18,9 +18,9 @@ function RemoveButton(_ref2) {
   }, /*#__PURE__*/React.createElement(BaseRemoveButtonButton, {
     onClick: onClick,
     disabled: isDisabled
-  }, /*#__PURE__*/React.createElement(Close, {
-    color: "inherit",
-    size: "inherit"
+  }, /*#__PURE__*/React.createElement(X, {
+    color: "currentColor",
+    size: "1em"
   })));
 }
 export default RemoveButton;

package/dist/esm/Chip/components/RemoveButton/styles/BaseRemoveButtonButton.styles.js

@@ -1,9 +1,12 @@
 import { css } from "@vitality-ds/system";
+import { colorUseCases, getColorScaleValueByUseCase } from "@vitality-ds/tokens";
+var text = colorUseCases.text;
 export default css({
   border: 0,
   backgroundColor: "transparent",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  width: "100%"
+  width: "100%",
+  color: getColorScaleValueByUseCase("neutral", text.lowContrast)
 });

package/dist/esm/Chip/styles/BaseChip.styles.js

@@ -10,7 +10,7 @@ export default css({
   alignItems: "center",
   boxSizing: "border-box",
   gap: "$sm",
-  color: getColorScaleValueByUseCase("neutral", text.hiContrast),
+  color: getColorScaleValueByUseCase("neutral", text.lowContrast),
   backgroundColor: getColorScaleValueByUseCase("neutral", backgrounds.uiElement),
   border: "1px solid",
   borderLeftWidth: "$$indentation",

package/dist/esm/ComboButton/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Dropdown } from "@vitality-ds/icons";
+import { ChevronDown } from "lucide-react";
 import React from "react";
 import Button from "../Button";
 import DropdownMenu from "../DropdownMenu";
@@ -21,7 +21,7 @@ function ComboButton(_ref) {
       props: {
         size: size,
         "data-vitality-component": "combo-button-dropdown",
-        iconLeft: /*#__PURE__*/React.createElement(Dropdown, null),
+        iconLeft: /*#__PURE__*/React.createElement(ChevronDown, null),
         children: "",
         appearance: mainButtonProps === null || mainButtonProps === void 0 ? void 0 : mainButtonProps.appearance
       }

package/dist/esm/Dialog/components/DialogHeader/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 Stack from "../../../Stack";
@@ -15,7 +15,8 @@ function DialogHeader(_ref) {
   return /*#__PURE__*/React.createElement(BaseDialogHeader, {
     variant: variant
   }, /*#__PURE__*/React.createElement(TitleContainer, null, VARIANT_OPTIONS[variant].titleIcon && IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-    color: "inherit"
+    color: "currentColor",
+    size: "1.5rem"
   }), /*#__PURE__*/React.createElement(Stack, {
     spacing: "none"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -28,8 +29,8 @@ function DialogHeader(_ref) {
     size: "compact",
     onClick: closeButtonOnClick,
     tooltipContent: "Close Dialog",
-    icon: /*#__PURE__*/React.createElement(Close, {
-      color: "lowContrast"
+    icon: /*#__PURE__*/React.createElement(X, {
+      color: "gray"
     })
   })));
 }

package/dist/esm/Dialog/constants.js

@@ -1,4 +1,4 @@
-import { Alert, Error } from "@vitality-ds/icons";
+import { CircleAlert, TriangleAlert } from "lucide-react";
 var VARIANT_OPTIONS = {
   custom: {
     titleIcon: true,
@@ -32,7 +32,7 @@ var VARIANT_OPTIONS = {
   },
   warning: {
     titleIcon: true,
-    forcedIcon: Alert,
+    forcedIcon: TriangleAlert,
     actionsAllowed: true,
     primaryActionVariant: "warning",
     primaryActionText: "Confirm",
@@ -42,7 +42,7 @@ var VARIANT_OPTIONS = {
   },
   destructive: {
     titleIcon: true,
-    forcedIcon: Error,
+    forcedIcon: CircleAlert,
     actionsAllowed: true,
     primaryActionVariant: "destructive",
     primaryActionText: "Delete",