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

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

@@ -3,8 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@testing-library/react");
-var _lucideReact = require("lucide-react");
 var _icons = require("@vitality-ds/icons");
+var _lucideReact = require("lucide-react");
 var _react2 = _interopRequireDefault(require("react"));
 var _test = require("../../../helpers/test");
 var _index = _interopRequireDefault(require("./index"));

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

@@ -33,7 +33,7 @@ function Breadcrumb(_ref) {
     href: href,
     target: target
   }, text), isLastItem ? null : /*#__PURE__*/_react["default"].createElement(_lucideReact.ChevronRight, {
-    size: "1em"
+    size: "0.875rem"
   }));
 }
 var _default = exports["default"] = Breadcrumb;

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

@@ -13,7 +13,7 @@ var _default = exports["default"] = (0, _system.css)({
     height: "$$size",
     opacity: 0.8,
     verticalAlign: "text-bottom",
-    "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+    "altGlyph, line, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
       stroke: "currentColor"
     }
   },

package/dist/Callout/constants.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_CONTENT = void 0;
+var _icons = require("@vitality-ds/icons");
 var _lucideReact = require("lucide-react");
-// import { GentuLogo } from "@vitality-ds/icons";
-
 // eslint-disable-next-line import/prefer-default-export
 var DEFAULT_CONTENT = exports.DEFAULT_CONTENT = {
   success: {
@@ -45,7 +44,7 @@ var DEFAULT_CONTENT = exports.DEFAULT_CONTENT = {
     iconColor: "$colors$accent10"
   },
   brand: {
-    icon: _lucideReact.Info,
+    icon: _icons.GentuLogo,
     title: "Brand",
     titleColor: "$colors$brand10",
     spinnerColor: "brand",

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

@@ -11,7 +11,7 @@ var _default = exports["default"] = (0, _system.css)({
   variants: {
     topNudge: {
       "default": {
-        marginTop: ".25rem"
+        marginTop: "0.25rem"
       },
       blockCompact: {
         marginTop: "0.15rem"

package/dist/Dialog/components/DialogHeader/index.js

@@ -36,9 +36,7 @@ function DialogHeader(_ref) {
     size: "compact",
     onClick: closeButtonOnClick,
     tooltipContent: "Close Dialog",
-    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
-      color: "gray"
-    })
+    icon: /*#__PURE__*/_react["default"].createElement(_lucideReact.X, null)
   })));
 }
 var _default = exports["default"] = DialogHeader;

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

@@ -30,6 +30,7 @@ var _default = exports["default"] = (0, _system.css)({
   alignSelf: "center",
   svg: {
     pointerEvents: "none",
+    color: "$$iconColor",
     verticalAlign: "middle",
     width: "1rem",
     height: "1rem",

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 function CustomClearButton(innerProps) {
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseClearButton, innerProps, /*#__PURE__*/_react["default"].createElement(_lucideReact.X, {
-    size: "1em",
+    size: "1rem",
     color: "currentColor"
   }));
 }

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

@@ -11,9 +11,28 @@ var _default = exports["default"] = (0, _system.css)({
   svg: {
     width: "1em",
     height: "1em",
+    color: "currentColor",
+    circle: {
+      stroke: "currentColor"
+    },
+    ellipse: {
+      stroke: "currentColor"
+    },
+    line: {
+      stroke: "currentColor"
+    },
     path: {
       stroke: "currentColor"
     },
+    polygon: {
+      stroke: "currentColor"
+    },
+    polyline: {
+      stroke: "currentColor"
+    },
+    rect: {
+      stroke: "currentColor"
+    },
     // Todo: find out why icons require top margin reset
     marginTop: 0
   }

package/dist/Table/components/Cells/RowActions/styles/BaseIconButtonCell.styles.js

@@ -7,6 +7,9 @@ exports["default"] = void 0;
 var _system = require("@vitality-ds/system");
 var _default = exports["default"] = (0, _system.css)({
   opacity: 1,
+  "&:not(:last-child)": {
+    marginRight: "$sm"
+  },
   "@bp2": {
     opacity: 0
   }

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

@@ -24,6 +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: "1rem",
     className: "icon"
   })), /*#__PURE__*/_react["default"].createElement(_styled.BaseContent, null, title && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: "display200"

package/dist/components/src/AuditTrail/components/IconAvatar/types.d.ts

@@ -1,4 +1,4 @@
-import type { LucideIcon } from "lucide-react";
+/// <reference types="react" />
 export declare type IconAvatarProps = {
-    icon: LucideIcon;
+    icon: React.FunctionComponent;
 };

package/dist/components/src/AuditTrail/logic.d.ts

@@ -1,5 +1,4 @@
-import type { LucideIcon } from "lucide-react";
 import { GetTimesResponseType } from "./types";
 export declare const getTimes: (timestamp: string) => GetTimesResponseType;
-export declare const getBrand: (name: string) => LucideIcon;
+export declare const getBrand: (name: string) => React.FunctionComponent | undefined;
 export declare const getInitials: (name: string, forcedInitials: string) => string;

package/dist/components/src/AuditTrail/types.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { ExcludedProps } from "@vitality-ds/system";
-import type { LucideIcon } from "lucide-react";
 import { ACTIONS } from "./constants";
 export declare type PrepositionType = "by" | "to" | "from" | "for" | null;
 export declare type GetTimesResponseType = {
@@ -11,7 +11,7 @@ export declare type GetTimesResponseType = {
 export declare type ActionPropsType = {
     actionName: string;
     preposition: PrepositionType;
-    fallbackIcon: LucideIcon;
+    fallbackIcon: React.FunctionComponent;
     forceIcon: boolean;
 };
 declare type AuditTrailItemCommonProps = {

package/dist/components/src/Button/components/ButtonIcon/styled.d.ts

@@ -6,7 +6,7 @@ declare const ButtonIcon: import("@stitches/react/types/styled-component").Style
         height: string;
         opacity: number;
         verticalAlign: string;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+        "altGlyph, line, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
             stroke: string;
         };
     };

package/dist/components/src/Button/components/ButtonIcon/styles/BaseButtonIcon.styles.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
         height: string;
         opacity: number;
         verticalAlign: string;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+        "altGlyph, line, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
             stroke: string;
         };
     };

package/dist/components/src/Callout/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
-import { LucideIcon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import React from "react";
 import { ButtonPrimitiveProps } from "../Button/primitives/types";
 import { ButtonProps } from "../Button/types";
@@ -19,7 +19,7 @@ export declare type SeverityKeys = valueof<RemoveBreakPointVariants<SeverityVari
 export declare type DefaultContent = {
     title: string;
     titleColor: TypographyProps["color"];
-    icon: LucideIcon;
+    icon: LucideIcon | React.FunctionComponent;
     spinnerColor: ButtonPrimitiveProps["spinnerColor"];
     iconColor: string;
 };

package/dist/components/src/Dialog/types.d.ts

@@ -6,7 +6,7 @@ import { valueof } from "../helpers/logic/type-helpers";
 declare type AllowedVariantKeys = "custom" | "transactional" | "passive" | "warning" | "destructive" | "acknowledgement";
 declare type VariantOptionType = {
     titleIcon: boolean;
-    forcedIcon: LucideIcon | null;
+    forcedIcon: React.FunctionComponent | null;
     actionsAllowed: boolean;
     primaryActionVariant: valueof<Pick<ButtonProps, "appearance">>;
     primaryActionText: string | boolean;
@@ -32,7 +32,7 @@ export declare type HeaderPropsType = {
     /**
      * The icon shown to the left of the title. title and subtitle pushed against left padding if not provided.
      */
-    icon?: LucideIcon;
+    icon?: LucideIcon | React.FunctionComponent;
     /**
      * The function run when the close button is pressed. By passing this function to this prop the close button is rendered, otherwise the button is not rendered.
      */

package/dist/components/src/IconButton/styled.d.ts

@@ -10,6 +10,7 @@ export declare const BaseIconButton: import("@stitches/react/types/styled-compon
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        color: string;
         verticalAlign: string;
         width: string;
         height: string;
@@ -866,6 +867,7 @@ export declare const BaseIconButtonLink: import("@stitches/react/types/styled-co
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        color: string;
         verticalAlign: string;
         width: string;
         height: string;

package/dist/components/src/IconButton/styles/BaseIconButton.styles.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        color: string;
         verticalAlign: string;
         width: string;
         height: string;

package/dist/components/src/Input/PasswordInput/types.d.ts

@@ -1,5 +1,5 @@
-import { LucideProps } from "lucide-react";
-import React from "react";
+import type { LucideProps } from "lucide-react";
+import type React from "react";
 import { valueof } from "../../helpers/logic/type-helpers";
 import { TooltipProps } from "../../Tooltip/types";
 import { TextInputProps } from "../TextInput/types";

package/dist/components/src/helpers/test/findSVGs.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 /**
  * RTL doesn't let you search directly though a component because it only considers what is rendered. because of this we can either apply a test id 🤮
  * @param container
- * @param IconFunctionComponent
+ * @param IconComponent
  * @returns an array of all matching elements within that test container
  */
-declare const findSVGs: (container: any, IconFunctionComponent: any) => any;
+declare const findSVGs: (container: HTMLElement, IconComponent: React.ElementType) => NodeListOf<Element>;
 export default findSVGs;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { render, screen } from "@testing-library/react";
-import { CircleUser, Link2, Plus } from "lucide-react";
 import { GentuLogo } from "@vitality-ds/icons";
+import { CircleUser, Link2, Plus } from "lucide-react";
 import React from "react";
 import { findSVGs } from "../../../helpers/test";
 import AuditItem from "./index";

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

@@ -26,7 +26,7 @@ function Breadcrumb(_ref) {
     href: href,
     target: target
   }, text), isLastItem ? null : /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "1em"
+    size: "0.875rem"
   }));
 }
 export default Breadcrumb;

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

@@ -7,7 +7,7 @@ export default css({
     height: "$$size",
     opacity: 0.8,
     verticalAlign: "text-bottom",
-    "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+    "altGlyph, line, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
       stroke: "currentColor"
     }
   },

package/dist/esm/Callout/constants.js

@@ -1,4 +1,4 @@
-// import { GentuLogo } 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 = {
@@ -38,7 +38,7 @@ export var DEFAULT_CONTENT = {
     iconColor: "$colors$accent10"
   },
   brand: {
-    icon: Info,
+    icon: GentuLogo,
     title: "Brand",
     titleColor: "$colors$brand10",
     spinnerColor: "brand",

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

@@ -6,7 +6,7 @@ export default css({
   variants: {
     topNudge: {
       "default": {
-        marginTop: ".25rem"
+        marginTop: "0.25rem"
       },
       blockCompact: {
         marginTop: "0.15rem"

package/dist/esm/Dialog/components/DialogHeader/index.js

@@ -29,9 +29,7 @@ function DialogHeader(_ref) {
     size: "compact",
     onClick: closeButtonOnClick,
     tooltipContent: "Close Dialog",
-    icon: /*#__PURE__*/React.createElement(X, {
-      color: "gray"
-    })
+    icon: /*#__PURE__*/React.createElement(X, null)
   })));
 }
 export default DialogHeader;

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

@@ -24,6 +24,7 @@ export default css({
   alignSelf: "center",
   svg: {
     pointerEvents: "none",
+    color: "$$iconColor",
     verticalAlign: "middle",
     width: "1rem",
     height: "1rem",

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

@@ -3,7 +3,7 @@ import React from "react";
 import { BaseClearButton } from "./styled";
 function CustomClearButton(innerProps) {
   return /*#__PURE__*/React.createElement(BaseClearButton, innerProps, /*#__PURE__*/React.createElement(X, {
-    size: "1em",
+    size: "1rem",
     color: "currentColor"
   }));
 }

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

@@ -5,9 +5,28 @@ export default css({
   svg: {
     width: "1em",
     height: "1em",
+    color: "currentColor",
+    circle: {
+      stroke: "currentColor"
+    },
+    ellipse: {
+      stroke: "currentColor"
+    },
+    line: {
+      stroke: "currentColor"
+    },
     path: {
       stroke: "currentColor"
     },
+    polygon: {
+      stroke: "currentColor"
+    },
+    polyline: {
+      stroke: "currentColor"
+    },
+    rect: {
+      stroke: "currentColor"
+    },
     // Todo: find out why icons require top margin reset
     marginTop: 0
   }

package/dist/esm/Table/components/Cells/RowActions/styles/BaseIconButtonCell.styles.js

@@ -1,6 +1,9 @@
 import { css } from "@vitality-ds/system";
 export default css({
   opacity: 1,
+  "&:not(:last-child)": {
+    marginRight: "$sm"
+  },
   "@bp2": {
     opacity: 0
   }

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

@@ -15,6 +15,7 @@ function Toast(_ref) {
   return /*#__PURE__*/React.createElement(BaseToast, {
     type: type
   }, !hideIcon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconComponent, {
+    size: "1rem",
     className: "icon"
   })), /*#__PURE__*/React.createElement(BaseContent, null, title && /*#__PURE__*/React.createElement(Typography, {
     variant: "display200"

package/dist/esm/helpers/test/findSVGs.js

@@ -1,14 +1,24 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
 /**
  * RTL doesn't let you search directly though a component because it only considers what is rendered. because of this we can either apply a test id 🤮
  * @param container
- * @param IconFunctionComponent
+ * @param IconComponent
  * @returns an array of all matching elements within that test container
  */
-var findSVGs = function findSVGs(container, IconFunctionComponent) {
-  var pathChildren = IconFunctionComponent({}).props.children;
-  if (Array.isArray(pathChildren)) {
-    return container.querySelectorAll("path[d=\"".concat(pathChildren[0].props.d, "\"]"));
-  }
-  return container.querySelectorAll("path[d=\"".concat(pathChildren.props.d, "\"]"));
+var findSVGs = function findSVGs(container, IconComponent) {
+  var probe = document.createElement("div");
+  document.body.appendChild(probe);
+  var _render = render(/*#__PURE__*/React.createElement(IconComponent), {
+      container: probe
+    }),
+    unmount = _render.unmount;
+  var firstPath = probe.querySelector("path");
+  var d = firstPath === null || firstPath === void 0 ? void 0 : firstPath.getAttribute("d");
+  unmount();
+  probe.remove();
+  if (!d) return container.querySelectorAll("path[data-no-match]");
+  return container.querySelectorAll("path[d=\"".concat(d, "\"]"));
 };
 export default findSVGs;

package/dist/helpers/test/findSVGs.js

@@ -1,20 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 /**
  * RTL doesn't let you search directly though a component because it only considers what is rendered. because of this we can either apply a test id 🤮
  * @param container
- * @param IconFunctionComponent
+ * @param IconComponent
  * @returns an array of all matching elements within that test container
  */
-var findSVGs = function findSVGs(container, IconFunctionComponent) {
-  var pathChildren = IconFunctionComponent({}).props.children;
-  if (Array.isArray(pathChildren)) {
-    return container.querySelectorAll("path[d=\"".concat(pathChildren[0].props.d, "\"]"));
-  }
-  return container.querySelectorAll("path[d=\"".concat(pathChildren.props.d, "\"]"));
+var findSVGs = function findSVGs(container, IconComponent) {
+  var probe = document.createElement("div");
+  document.body.appendChild(probe);
+  var _render = (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(IconComponent), {
+      container: probe
+    }),
+    unmount = _render.unmount;
+  var firstPath = probe.querySelector("path");
+  var d = firstPath === null || firstPath === void 0 ? void 0 : firstPath.getAttribute("d");
+  unmount();
+  probe.remove();
+  if (!d) return container.querySelectorAll("path[data-no-match]");
+  return container.querySelectorAll("path[d=\"".concat(d, "\"]"));
 };
 var _default = exports["default"] = findSVGs;