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

package/dist/Typography/styles/BaseTypography.styles.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _icons = require("@vitality-ds/icons");
 var _system = require("@vitality-ds/system");
 var _variants = require("../constants/variants");
 var _helpers = require("./helpers");
@@ -16,137 +14,140 @@ var text = _system.colorUseCases.text;
 var overflowSharedStyles = {
   overflow: "hidden"
 };
-var _default = exports["default"] = (0, _system.css)((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+var _default = exports["default"] = (0, _system.css)({
   fontFamily: "$default",
   fontSize: "inherit",
   // Reset browser default margins added to certain semantic HTML elements
-  marginBlock: 0
-}, "& > ".concat(_icons.BaseIcon), {
-  // Aligning Icons to text baseline = most Icons have 2px inner bottom spacing -> 2/24 * 2 = 0.2 rounded up
-  marginTop: "-.2em"
-}), "variants", {
-  /**
-   * Set the text element's text alignment
-   */
-  textAlign: {
-    start: {
-      textAlign: "start"
-    },
-    end: {
-      textAlign: "end"
-    },
-    left: {
-      textAlign: "left"
-    },
-    right: {
-      textAlign: "right"
-    },
-    center: {
-      textAlign: "center"
-    },
-    justify: {
-      textAlign: "justify"
-    },
-    matchParent: {
-      textAlign: "match-parent"
-    }
-  },
-  /**
-   * Allows you to handle CSS text overflow behaviour
-   */
-  textOverflow: {
-    ellipsis: (0, _extends2["default"])({}, overflowSharedStyles, {
-      textOverflow: "ellipsis"
-    }),
-    clip: (0, _extends2["default"])({}, overflowSharedStyles, {
-      textOverflow: "clip"
-    })
-  },
-  /**
-   * Allows you to handle CSS white space behaviour
-   */
-  wrap: {
-    "true": (0, _extends2["default"])({}, overflowSharedStyles, {
-      whiteSpace: "break-spaces"
-    }),
-    "false": (0, _extends2["default"])({}, overflowSharedStyles, {
-      whiteSpace: "nowrap"
-    })
+  marginBlock: 0,
+  "& > svg.lucide": {
+    verticalAlign: "baseline"
   },
-  /**
-   * Sets the color of the text.
-   */
-  color: {
-    inherit: {
-      color: "inherit"
-    },
-    hiContrast: {
-      color: (0, _system.getColorScaleValueByUseCase)("greyA", text.hiContrast)
-    },
-    primary: {
-      color: (0, _system.getColorScaleValueByUseCase)("primary", text.hiSaturation)
-    },
-    lowContrast: {
-      color: (0, _system.getColorScaleValueByUseCase)("greyA", text.lowContrast)
-    },
-    disabled: {
-      color: (0, _system.getColorScaleValueByUseCase)("greyA", text.disabled)
-    },
-    accent: {
-      color: (0, _system.getColorScaleValueByUseCase)("accent", text.hiSaturation)
-    },
-    info: {
-      color: (0, _system.getColorScaleValueByUseCase)("info", text.hiSaturation)
-    },
-    moderate: {
-      color: (0, _system.getColorScaleValueByUseCase)("yellow", text.hiSaturation)
-    },
-    critical: {
-      color: (0, _system.getColorScaleValueByUseCase)("critical", text.hiSaturation)
+  variants: {
+    /**
+     * Set the text element's text alignment
+     */
+    textAlign: {
+      start: {
+        textAlign: "start"
+      },
+      end: {
+        textAlign: "end"
+      },
+      left: {
+        textAlign: "left"
+      },
+      right: {
+        textAlign: "right"
+      },
+      center: {
+        textAlign: "center"
+      },
+      justify: {
+        textAlign: "justify"
+      },
+      matchParent: {
+        textAlign: "match-parent"
+      }
     },
-    warning: {
-      color: (0, _system.getColorScaleValueByUseCase)("warning", text.hiSaturation)
+    /**
+     * Allows you to handle CSS text overflow behaviour
+     */
+    textOverflow: {
+      ellipsis: (0, _extends2["default"])({}, overflowSharedStyles, {
+        textOverflow: "ellipsis"
+      }),
+      clip: (0, _extends2["default"])({}, overflowSharedStyles, {
+        textOverflow: "clip"
+      })
+    },
+    /**
+     * Allows you to handle CSS white space behaviour
+     */
+    wrap: {
+      "true": (0, _extends2["default"])({}, overflowSharedStyles, {
+        whiteSpace: "break-spaces"
+      }),
+      "false": (0, _extends2["default"])({}, overflowSharedStyles, {
+        whiteSpace: "nowrap"
+      })
+    },
+    /**
+     * Sets the color of the text.
+     */
+    color: {
+      inherit: {
+        color: "inherit"
+      },
+      hiContrast: {
+        color: (0, _system.getColorScaleValueByUseCase)("greyA", text.hiContrast)
+      },
+      primary: {
+        color: (0, _system.getColorScaleValueByUseCase)("primary", text.hiSaturation)
+      },
+      lowContrast: {
+        color: (0, _system.getColorScaleValueByUseCase)("greyA", text.lowContrast)
+      },
+      disabled: {
+        color: (0, _system.getColorScaleValueByUseCase)("greyA", text.disabled)
+      },
+      accent: {
+        color: (0, _system.getColorScaleValueByUseCase)("accent", text.hiSaturation)
+      },
+      info: {
+        color: (0, _system.getColorScaleValueByUseCase)("info", text.hiSaturation)
+      },
+      moderate: {
+        color: (0, _system.getColorScaleValueByUseCase)("yellow", text.hiSaturation)
+      },
+      critical: {
+        color: (0, _system.getColorScaleValueByUseCase)("critical", text.hiSaturation)
+      },
+      warning: {
+        color: (0, _system.getColorScaleValueByUseCase)("warning", text.hiSaturation)
+      },
+      success: {
+        color: (0, _system.getColorScaleValueByUseCase)("success", text.hiSaturation)
+      }
     },
-    success: {
-      color: (0, _system.getColorScaleValueByUseCase)("success", text.hiSaturation)
+    /**
+     * Customises the font size and weight to a pre-set option.
+     */
+    variant: {
+      inherit: (0, _helpers.getVariantStyles)("inherit"),
+      caption: (0, _helpers.getVariantStyles)("$caption"),
+      button: (0, _helpers.getVariantStyles)("$button"),
+      body: (0, _helpers.getVariantStyles)("$body"),
+      paragraph: (0, _extends2["default"])({}, (0, _helpers.getVariantStyles)("$body"), {
+        "& + &": {
+          marginTop: "$md"
+        }
+      }),
+      sectionSubtitle: (0, _helpers.getVariantStyles)("$sectionSubtitle"),
+      sectionTitle: (0, _helpers.getVariantStyles)("$sectionTitle"),
+      pageTitle: (0, _helpers.getVariantStyles)("$pageTitle"),
+      display100: (0, _helpers.getVariantStyles)("$display100"),
+      display200: (0, _helpers.getVariantStyles)("$display200"),
+      display300: (0, _helpers.getVariantStyles)("$display300"),
+      display400: (0, _helpers.getVariantStyles)("$display400"),
+      display500: (0, _helpers.getVariantStyles)("$display500"),
+      display600: (0, _helpers.getVariantStyles)("$display600"),
+      display700: (0, _helpers.getVariantStyles)("$display700"),
+      display800: (0, _helpers.getVariantStyles)("$display800"),
+      display900: (0, _helpers.getVariantStyles)("$display900")
+    },
+    /**
+     * Sets a limit on the maximum number of lines to display.
+     */
+    maxLines: {
+      1: (0, _helpers.getMaxLines)(1, "$body"),
+      2: (0, _helpers.getMaxLines)(2, "$body"),
+      3: (0, _helpers.getMaxLines)(3, "$body")
     }
   },
-  /**
-   * Customises the font size and weight to a pre-set option.
-   */
-  variant: {
-    inherit: (0, _helpers.getVariantStyles)("inherit"),
-    caption: (0, _helpers.getVariantStyles)("$caption"),
-    button: (0, _helpers.getVariantStyles)("$button"),
-    body: (0, _helpers.getVariantStyles)("$body"),
-    paragraph: (0, _extends2["default"])({}, (0, _helpers.getVariantStyles)("$body"), {
-      "& + &": {
-        marginTop: "$md"
-      }
-    }),
-    sectionSubtitle: (0, _helpers.getVariantStyles)("$sectionSubtitle"),
-    sectionTitle: (0, _helpers.getVariantStyles)("$sectionTitle"),
-    pageTitle: (0, _helpers.getVariantStyles)("$pageTitle"),
-    display100: (0, _helpers.getVariantStyles)("$display100"),
-    display200: (0, _helpers.getVariantStyles)("$display200"),
-    display300: (0, _helpers.getVariantStyles)("$display300"),
-    display400: (0, _helpers.getVariantStyles)("$display400"),
-    display500: (0, _helpers.getVariantStyles)("$display500"),
-    display600: (0, _helpers.getVariantStyles)("$display600"),
-    display700: (0, _helpers.getVariantStyles)("$display700"),
-    display800: (0, _helpers.getVariantStyles)("$display800"),
-    display900: (0, _helpers.getVariantStyles)("$display900")
-  },
-  /**
-   * Sets a limit on the maximum number of lines to display.
-   */
-  maxLines: {
-    1: (0, _helpers.getMaxLines)(1, "$body"),
-    2: (0, _helpers.getMaxLines)(2, "$body"),
-    3: (0, _helpers.getMaxLines)(3, "$body")
+  compoundVariants: (0, _toConsumableArray2["default"])((0, _helpers.getMaxLinesVariants)(_variants.AVAILABLE_MAX_LINES, _variants.AVAILABLE_VARIANTS)),
+  "ul, ol": {
+    listStylePosition: "inside",
+    paddingInlineStart: 0,
+    marginBlock: "inherit"
   }
-}), "compoundVariants", (0, _toConsumableArray2["default"])((0, _helpers.getMaxLinesVariants)(_variants.AVAILABLE_MAX_LINES, _variants.AVAILABLE_VARIANTS))), "ul, ol", {
-  listStylePosition: "inside",
-  paddingInlineStart: 0,
-  marginBlock: "inherit"
-}));
+});

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

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

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

@@ -1,5 +1,5 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
+import type { LucideIcon } from "lucide-react";
 import { GetTimesResponseType } from "./types";
 export declare const getTimes: (timestamp: string) => GetTimesResponseType;
-export declare const getBrand: (name: string) => React.FC<IconType>;
+export declare const getBrand: (name: string) => LucideIcon;
 export declare const getInitials: (name: string, forcedInitials: string) => string;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
 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 = {
@@ -12,7 +11,7 @@ export declare type GetTimesResponseType = {
 export declare type ActionPropsType = {
     actionName: string;
     preposition: PrepositionType;
-    fallbackIcon: React.FunctionComponent<IconType>;
+    fallbackIcon: LucideIcon;
     forceIcon: boolean;
 };
 declare type AuditTrailItemCommonProps = {

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

@@ -1,56 +1,13 @@
 declare const ButtonIcon: import("@stitches/react/types/styled-component").StyledComponent<"span", import("@stitches/react/types/styled-component").StyledComponentProps<[import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
-    [x: string]: string | {
-        marginTop: string;
-        $$size?: undefined;
-        width?: undefined;
-        height?: undefined;
-        opacity?: undefined;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,"?: undefined;
-        spacing?: undefined;
-        size?: undefined;
-    } | {
-        $$size: string;
-        width: string;
-        height: string;
-        opacity: number;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
-        };
-        marginTop?: undefined;
-        spacing?: undefined;
-        size?: undefined;
-    } | {
-        spacing: {
-            end: {
-                marginInlineEnd: string;
-                marginInlineStart: string;
-            };
-            start: {
-                marginInlineEnd: string;
-                marginInlineStart: string;
-            };
-        };
-        size: {
-            default: {};
-            compact: {
-                $$spacing: string;
-            };
-        };
-        marginTop?: undefined;
-        $$size?: undefined;
-        width?: undefined;
-        height?: undefined;
-        opacity?: undefined;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,"?: undefined;
-    };
     $$spacing: string;
     svg: {
         $$size: string;
         width: string;
         height: string;
         opacity: number;
+        verticalAlign: string;
         "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
+            stroke: string;
         };
     };
     variants: {

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

@@ -1,56 +1,13 @@
 declare const _default: import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
-    [x: string]: string | {
-        marginTop: string;
-        $$size?: undefined;
-        width?: undefined;
-        height?: undefined;
-        opacity?: undefined;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,"?: undefined;
-        spacing?: undefined;
-        size?: undefined;
-    } | {
-        $$size: string;
-        width: string;
-        height: string;
-        opacity: number;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
-        };
-        marginTop?: undefined;
-        spacing?: undefined;
-        size?: undefined;
-    } | {
-        spacing: {
-            end: {
-                marginInlineEnd: string;
-                marginInlineStart: string;
-            };
-            start: {
-                marginInlineEnd: string;
-                marginInlineStart: string;
-            };
-        };
-        size: {
-            default: {};
-            compact: {
-                $$spacing: string;
-            };
-        };
-        marginTop?: undefined;
-        $$size?: undefined;
-        width?: undefined;
-        height?: undefined;
-        opacity?: undefined;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,"?: undefined;
-    };
     $$spacing: string;
     svg: {
         $$size: string;
         width: string;
         height: string;
         opacity: number;
+        verticalAlign: string;
         "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
+            stroke: string;
         };
     };
     variants: {