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

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

@@ -1628,7 +1628,414 @@ export declare const BaseCalloutActions: import("@stitches/react/types/styled-co
         portalElement: number;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-export declare const BaseCalloutIconContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const BaseCalloutIconContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", import("@stitches/react/types/styled-component").StyledComponentProps<[import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
+    display: string;
+    variants: {
+        topNudge: {
+            default: {
+                marginTop: string;
+            };
+            blockCompact: {
+                marginTop: string;
+            };
+            compact: {};
+        };
+    };
+}]>, {
+    bp1: "(min-width: 48rem)";
+    bp2: "(min-width: 69rem)";
+    bp3: "(min-width: 85rem)";
+}, import("@stitches/react/types/css-util").CSS<{
+    bp1: "(min-width: 48rem)";
+    bp2: "(min-width: 69rem)";
+    bp3: "(min-width: 85rem)";
+}, {
+    colors: {
+        blue2: string;
+        cyan2: string;
+        green2: string;
+        grey2: string;
+        greyA2: string;
+        orange2: string;
+        pink2: string;
+        red2: string;
+        violet2: string;
+        yellow2: string;
+        blue1: string;
+        cyan1: string;
+        green1: string;
+        grey1: string;
+        greyA1: string;
+        orange1: string;
+        pink1: string;
+        red1: string;
+        violet1: string;
+        yellow1: string;
+        blue7: string;
+        cyan7: string;
+        green7: string;
+        grey7: string;
+        greyA7: string;
+        orange7: string;
+        pink7: string;
+        red7: string;
+        violet7: string;
+        yellow7: string;
+        blue12: string;
+        cyan12: string;
+        green12: string;
+        grey12: string;
+        greyA12: string;
+        orange12: string;
+        pink12: string;
+        red12: string;
+        violet12: string;
+        yellow12: string;
+        blue14: string;
+        cyan14: string;
+        green14: string;
+        grey14: string;
+        greyA14: string;
+        orange14: string;
+        pink14: string;
+        red14: string;
+        violet14: string;
+        yellow14: string;
+        blue3: string;
+        cyan3: string;
+        green3: string;
+        grey3: string;
+        greyA3: string;
+        orange3: string;
+        pink3: string;
+        red3: string;
+        violet3: string;
+        yellow3: string;
+        blue4: string;
+        cyan4: string;
+        green4: string;
+        grey4: string;
+        greyA4: string;
+        orange4: string;
+        pink4: string;
+        red4: string;
+        violet4: string;
+        yellow4: string;
+        blue5: string;
+        cyan5: string;
+        green5: string;
+        grey5: string;
+        greyA5: string;
+        orange5: string;
+        pink5: string;
+        red5: string;
+        violet5: string;
+        yellow5: string;
+        blue10: string;
+        cyan10: string;
+        green10: string;
+        grey10: string;
+        greyA10: string;
+        orange10: string;
+        pink10: string;
+        red10: string;
+        violet10: string;
+        yellow10: string;
+        blue9: string;
+        cyan9: string;
+        green9: string;
+        grey9: string;
+        greyA9: string;
+        orange9: string;
+        pink9: string;
+        red9: string;
+        violet9: string;
+        yellow9: string;
+        blue11: string;
+        cyan11: string;
+        green11: string;
+        grey11: string;
+        greyA11: string;
+        orange11: string;
+        pink11: string;
+        red11: string;
+        violet11: string;
+        yellow11: string;
+        blue6: string;
+        cyan6: string;
+        green6: string;
+        grey6: string;
+        greyA6: string;
+        orange6: string;
+        pink6: string;
+        red6: string;
+        violet6: string;
+        yellow6: string;
+        blue8: string;
+        cyan8: string;
+        green8: string;
+        grey8: string;
+        greyA8: string;
+        orange8: string;
+        pink8: string;
+        red8: string;
+        violet8: string;
+        yellow8: string;
+        blue13: string;
+        cyan13: string;
+        green13: string;
+        grey13: string;
+        greyA13: string;
+        orange13: string;
+        pink13: string;
+        red13: string;
+        violet13: string;
+        yellow13: string;
+        neutral2: string;
+        neutralA2: string;
+        primary2: string;
+        accent2: string;
+        success2: string;
+        info2: string;
+        warning2: string;
+        critical2: string;
+        brand2: string;
+        neutral1: string;
+        neutralA1: string;
+        primary1: string;
+        accent1: string;
+        success1: string;
+        info1: string;
+        warning1: string;
+        critical1: string;
+        brand1: string;
+        neutral7: string;
+        neutralA7: string;
+        primary7: string;
+        accent7: string;
+        success7: string;
+        info7: string;
+        warning7: string;
+        critical7: string;
+        brand7: string;
+        neutral12: string;
+        neutralA12: string;
+        primary12: string;
+        accent12: string;
+        success12: string;
+        info12: string;
+        warning12: string;
+        critical12: string;
+        brand12: string;
+        neutral14: string;
+        neutralA14: string;
+        primary14: string;
+        accent14: string;
+        success14: string;
+        info14: string;
+        warning14: string;
+        critical14: string;
+        brand14: string;
+        neutral3: string;
+        neutralA3: string;
+        primary3: string;
+        accent3: string;
+        success3: string;
+        info3: string;
+        warning3: string;
+        critical3: string;
+        brand3: string;
+        neutral4: string;
+        neutralA4: string;
+        primary4: string;
+        accent4: string;
+        success4: string;
+        info4: string;
+        warning4: string;
+        critical4: string;
+        brand4: string;
+        neutral5: string;
+        neutralA5: string;
+        primary5: string;
+        accent5: string;
+        success5: string;
+        info5: string;
+        warning5: string;
+        critical5: string;
+        brand5: string;
+        neutral10: string;
+        neutralA10: string;
+        primary10: string;
+        accent10: string;
+        success10: string;
+        info10: string;
+        warning10: string;
+        critical10: string;
+        brand10: string;
+        neutral9: string;
+        neutralA9: string;
+        primary9: string;
+        accent9: string;
+        success9: string;
+        info9: string;
+        warning9: string;
+        critical9: string;
+        brand9: string;
+        neutral11: string;
+        neutralA11: string;
+        primary11: string;
+        accent11: string;
+        success11: string;
+        info11: string;
+        warning11: string;
+        critical11: string;
+        brand11: string;
+        neutral6: string;
+        neutralA6: string;
+        primary6: string;
+        accent6: string;
+        success6: string;
+        info6: string;
+        warning6: string;
+        critical6: string;
+        brand6: string;
+        neutral8: string;
+        neutralA8: string;
+        primary8: string;
+        accent8: string;
+        success8: string;
+        info8: string;
+        warning8: string;
+        critical8: string;
+        brand8: string;
+        neutral13: string;
+        neutralA13: string;
+        primary13: string;
+        accent13: string;
+        success13: string;
+        info13: string;
+        warning13: string;
+        critical13: string;
+        brand13: string;
+    };
+    fonts: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+        default: any;
+    };
+    fontSizes: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    fontWeights: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    letterSpacings: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    lineHeights: {
+        display100: any;
+        display200: any;
+        display300: any;
+        display400: any;
+        display500: any;
+        display600: any;
+        display700: any;
+        display800: any;
+        display900: any;
+        body: any;
+        caption: any;
+        pageTitle: any;
+        sectionTitle: any;
+        sectionSubtitle: any;
+        button: any;
+        textInput: any;
+    };
+    radii: {
+        default: any;
+        large: any;
+        rounded: any;
+    };
+    shadows: {
+        sm: any;
+        md: any;
+        lg: any;
+    };
+    space: {
+        sm: any;
+        md: any;
+        lg: any;
+        xs: any;
+        xl: any;
+        xxl: any;
+    };
+    zIndices: {
+        floatingElements: number;
+        blanket: number;
+        dialog: number;
+        toast: number;
+        tooltip: number;
+        portalElement: number;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>]>, {
     bp1: "(min-width: 48rem)";
     bp2: "(min-width: 69rem)";
     bp3: "(min-width: 85rem)";

package/dist/components/src/Callout/styles/BaseCalloutIconContainer.styles.d.ts

@@ -1,4 +1,17 @@
-declare const _default: import("@stitches/react/types/styled-component").CssComponent<never, {}, {
+declare const _default: import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
+    display: string;
+    variants: {
+        topNudge: {
+            default: {
+                marginTop: string;
+            };
+            blockCompact: {
+                marginTop: string;
+            };
+            compact: {};
+        };
+    };
+}]>, {
     bp1: "(min-width: 48rem)";
     bp2: "(min-width: 69rem)";
     bp3: "(min-width: 85rem)";

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

@@ -1,5 +1,5 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
 import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
+import { LucideIcon } from "lucide-react";
 import React from "react";
 import { ButtonPrimitiveProps } from "../Button/primitives/types";
 import { ButtonProps } from "../Button/types";
@@ -19,9 +19,9 @@ export declare type SeverityKeys = valueof<RemoveBreakPointVariants<SeverityVari
 export declare type DefaultContent = {
     title: string;
     titleColor: TypographyProps["color"];
-    icon: React.ElementType<IconType>;
+    icon: LucideIcon;
     spinnerColor: ButtonPrimitiveProps["spinnerColor"];
-    iconColor: IconType["color"];
+    iconColor: string;
 };
 export declare type DefaultContentOptions = {
     [K in SeverityKeys]: DefaultContent;
@@ -32,7 +32,7 @@ export declare type CalloutContentHookType = {
     iconToDisplay: CalloutProps["icon"];
     iconColor: DefaultContent["iconColor"];
     spinnerColor: DefaultContent["spinnerColor"];
-    iconSize: "sm" | "md";
+    iconSize: "1rem";
     isCompactLayout: boolean;
 };
 export declare type CommonCalloutButtonProps = {

package/dist/components/src/Chip/components/ChipIcon/types.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
+import type { LucideIcon } from "lucide-react";
 import { TooltipProps } from "../../../Tooltip/types";
 export declare type ChipIconType = {
     /**
      * The icon to display in the Chip
      */
-    icon: React.FC<IconType>;
+    icon: LucideIcon;
     /**
      * Tooltip content to describe what the Chip's icon represents
      */

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
 import { ExcludedProps, VariantProps } from "@vitality-ds/system";
+import type { LucideIcon } from "lucide-react";
 import { TooltipProps } from "../Tooltip/types";
 import { ChipCheckboxType } from "./components/Checkbox/types";
 import { MetaLabelProps } from "./components/MetaLabel/types";
@@ -8,9 +7,9 @@ import { RemoveButtonType } from "./components/RemoveButton/types";
 import { BaseChip } from "./styled";
 declare type IconProps = {
     /**
-     * Set the icon to be displayed before the label. Generally should be a Vitality icon, but can also be custom via IconPrimtive (Read more @ /components/icons#custom-icons).
+     * Set the icon to be displayed before the label. Generally should be a Lucide icon.
      */
-    icon: React.FC<IconType>;
+    icon: LucideIcon;
     /**
      * Text to display in the icon's tooltip when hovered.
      */

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

@@ -1,12 +1,12 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
+/// <reference types="react" />
 import { ExcludedProps } from "@vitality-ds/system";
-import React from "react";
+import type { LucideIcon } from "lucide-react";
 import { ButtonProps } from "../Button/types";
 import { valueof } from "../helpers/logic/type-helpers";
 declare type AllowedVariantKeys = "custom" | "transactional" | "passive" | "warning" | "destructive" | "acknowledgement";
 declare type VariantOptionType = {
     titleIcon: boolean;
-    forcedIcon: React.FunctionComponent<IconType>;
+    forcedIcon: LucideIcon | 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?: React.FunctionComponent<IconType>;
+    icon?: LucideIcon;
     /**
      * 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/DropdownMenu/components/DropdownMenuItem/types.d.ts

@@ -1,10 +1,9 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
 import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
-import React from "react";
+import type { LucideIcon } from "lucide-react";
 import { ShortcutsProps } from "../../../Shortcuts/types";
 import { BaseDropdownMenuItem } from "./styled";
 export declare type ItemIconType = {
-    type: React.FC<IconType>;
+    type: LucideIcon;
 };
 export declare type DropdownMenuItem = VariantProps<typeof BaseDropdownMenuItem> & ExcludedProps & {
     /**

package/dist/components/src/Form/FormField/constants.d.ts

@@ -49,7 +49,7 @@ export declare const INPUT_MAPPINGS: {
             openMenuOnClick?: boolean;
             blurInputOnSelect?: boolean;
             components?: Pick<Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>>, "Control" | "ClearIndicator" | "DropdownIndicator" | "LoadingIndicator">;
-            leftAdornmentIcon?: import("../../Input/Select/types").IconPropType;
+            leftAdornmentIcon?: import("lucide-react").LucideIcon;
             controlShouldRenderValue?: boolean;
         } & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
     };
@@ -62,7 +62,7 @@ export declare const INPUT_MAPPINGS: {
             as?: never;
             asChild?: never;
         } & Omit<import("../../Input/Select/AsyncSelect/types").AsyncSelectProps, "leftAdornmentIcon"> & {
-            icon?: import("../../Input/Select/types").IconPropType;
+            icon?: import("lucide-react").LucideIcon;
         } & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
     };
     timePicker: {

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

@@ -10,9 +10,12 @@ export declare const BaseIconButton: import("@stitches/react/types/styled-compon
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        verticalAlign: string;
+        width: string;
+        height: string;
         marginTop: number;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
+        "altGlyph, circle, ellipse, line, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+            stroke: string;
         };
     };
     "&:hover": {
@@ -863,9 +866,12 @@ export declare const BaseIconButtonLink: import("@stitches/react/types/styled-co
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        verticalAlign: string;
+        width: string;
+        height: string;
         marginTop: number;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
+        "altGlyph, circle, ellipse, line, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+            stroke: string;
         };
     };
     "&:hover": {

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

@@ -10,9 +10,12 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
     alignSelf: string;
     svg: {
         pointerEvents: string;
+        verticalAlign: string;
+        width: string;
+        height: string;
         marginTop: number;
-        "altGlyph, circle, ellipse, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
-            fill: string;
+        "altGlyph, circle, ellipse, line, path, polygon, polyline, rect, text, textPath, tref, tspan,": {
+            stroke: string;
         };
     };
     "&:hover": {

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

@@ -1,6 +1,5 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
 import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
-import React from "react";
+import type React from "react";
 import { BaseIconButton, BaseIconButtonLink } from "./styled";
 declare type BaseIconButtonProps = VariantProps<typeof BaseIconButton> & ComponentProps<typeof BaseIconButton>;
 declare type BaseIconButtonLinkProps = VariantProps<typeof BaseIconButtonLink> & ComponentProps<typeof BaseIconButtonLink>;
@@ -10,9 +9,9 @@ declare type BaseIconButtonLinkProps = VariantProps<typeof BaseIconButtonLink> &
 export declare type BaseIconButtonComponentProps = React.FC<BaseIconButtonProps> | React.FC<BaseIconButtonLinkProps>;
 export declare type IconButtonProps = ExcludedProps & VariantProps<typeof BaseIconButton> & ComponentProps<typeof BaseIconButton> & ComponentProps<typeof BaseIconButtonLink> & {
     /**
-     * Pass in an appropriate Vitality icon that describes the action to be performed.
+     * Pass in icon content that describes the action to be performed.
      */
-    icon: IconType;
+    icon: React.ReactElement;
     /**
      * For toggle states. State should be handled outside the component and passed in.
      */

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

@@ -1,4 +1,5 @@
-import { IconType } from "@vitality-ds/icons/src/Icon/types";
+import { LucideProps } from "lucide-react";
+import React from "react";
 import { valueof } from "../../helpers/logic/type-helpers";
 import { TooltipProps } from "../../Tooltip/types";
 import { TextInputProps } from "../TextInput/types";
@@ -8,7 +9,7 @@ export declare type PasswordProps = Omit<TextInputProps, "adornEnd" | "type"> &
 export declare type PasswordInputProps = {
     [K in "true" | "false"]: {
         tooltipContent: valueof<Pick<TooltipProps, "content">>;
-        icon: IconType;
+        icon: React.ReactElement<LucideProps>;
         type: "text" | "password";
     };
 };

package/dist/components/src/Input/SearchInput/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 { TextInputProps } from "../TextInput/types";
 export declare type SearchInputProps = ExcludedProps & Omit<TextInputProps, "adornStart" | "adornEnd"> & {
     /**
@@ -10,5 +9,5 @@ export declare type SearchInputProps = ExcludedProps & Omit<TextInputProps, "ado
     /**
      * Replaces the default icon with another.
      */
-    icon?: React.FC<IconType>;
+    icon?: LucideIcon;
 };

package/dist/components/src/Input/Select/AsyncSelect/index.d.ts

@@ -20,7 +20,7 @@ declare const AsyncSelect: React.ForwardRefExoticComponent<{
     openMenuOnClick?: boolean;
     blurInputOnSelect?: boolean;
     components?: Pick<Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>>, "Control" | "ClearIndicator" | "DropdownIndicator" | "LoadingIndicator">;
-    leftAdornmentIcon?: import("../types").IconPropType;
+    leftAdornmentIcon?: import("lucide-react").LucideIcon;
     controlShouldRenderValue?: boolean;
 } & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
 export default AsyncSelect;

package/dist/components/src/Input/Select/SearchSelectInput/index.d.ts

@@ -7,6 +7,6 @@ declare const SearchSelectInput: React.ForwardRefExoticComponent<{
     as?: never;
     asChild?: never;
 } & Omit<import("../AsyncSelect/types").AsyncSelectProps, "leftAdornmentIcon"> & {
-    icon?: import("../types").IconPropType;
+    icon?: import("lucide-react").LucideIcon;
 } & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;
 export default SearchSelectInput;