@orfium/ictinus 5.5.0 → 5.5.1

package/dist/src/theme/tokens/semantic/variables/typography.d.ts

@@ -0,0 +1,359 @@
+declare const typography: {
+    readonly normal: {
+        readonly headline01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.10}";
+                readonly fontSize: "{fontSize.10}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Largest text on the screen, reserved for the page title. Can only appear once";
+        };
+        readonly headline02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.9}";
+                readonly fontSize: "{fontSize.9}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 2, reserved for important copy that is not a title (e.g. section titles)";
+        };
+        readonly headline03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.8}";
+                readonly fontSize: "{fontSize.8}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 3";
+        };
+        readonly headline04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.7}";
+                readonly fontSize: "{fontSize.6}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 4";
+        };
+        readonly headline05: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.6}";
+                readonly fontSize: "{fontSize.5}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 5";
+        };
+        readonly title01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant";
+        };
+        readonly title02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant";
+        };
+        readonly title03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant";
+        };
+        readonly label01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant";
+        };
+        readonly label02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant";
+        };
+        readonly label03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant";
+        };
+        readonly label04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant";
+        };
+        readonly body01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Large variant";
+        };
+        readonly body02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Medium variant";
+        };
+        readonly body03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Small variant";
+        };
+        readonly body04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for text within components. Extra small variant";
+        };
+    };
+    readonly mono: {
+        readonly headline01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.10}";
+                readonly fontSize: "{fontSize.10}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Largest text on the screen, reserved for the page title. Can only appear once";
+        };
+        readonly body04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for text within components. Extra small variant";
+        };
+        readonly headline02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.9}";
+                readonly fontSize: "{fontSize.9}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 2, reserved for important copy that is not a title (e.g. section titles)";
+        };
+        readonly headline03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.8}";
+                readonly fontSize: "{fontSize.8}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 3";
+        };
+        readonly headline04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.7}";
+                readonly fontSize: "{fontSize.6}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 4";
+        };
+        readonly headline05: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.6}";
+                readonly fontSize: "{fontSize.5}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 5";
+        };
+        readonly title01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant";
+        };
+        readonly title02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant";
+        };
+        readonly title03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant";
+        };
+        readonly label01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant";
+        };
+        readonly label02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant";
+        };
+        readonly label03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant";
+        };
+        readonly label04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant";
+        };
+        readonly body01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Large variant";
+        };
+        readonly body02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Medium variant";
+        };
+        readonly body03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Small variant";
+        };
+    };
+};
+export default typography;

package/dist/src/theme/tokens/utils/components.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from 'theme';
+import { Token, TokensObject } from './types';
+
+/**
+ * Must be used on react components in order to fetch their component tokens
+ *
+ * @param object a variable from the tokens/components/variables directory
+ * @param theme
+ * @param path path of the requested token value. e.g: 'color.red.background' for avatar
+ * @param fn callback to normalize value
+ * @returns the parsed value of the requested path
+ */
+export declare const getComponentTokens: <T extends string>(object: TokensObject | Token, theme: Theme) => (path: T, fn?: (val: string) => unknown) => any;

package/dist/src/theme/tokens/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './parsers';
+export * from './semantic';
+export * from './types';

package/dist/src/theme/tokens/utils/parsers.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from '../../types';
+import { Token, TokensObject } from './types';
+
+export declare const parseToken: (token: Token) => string;
+/**
+ *
+ * @param object a variable from the tokens/<theme_name>/variables directory
+ * @param path the object path to the composition
+ * @returns and object with:
+ *          [key]: the key of the composition
+ *          [value]: the value of the composition converted to css value
+ */
+export declare const parseCompositionToken: (object: TokensObject | Token) => (path: string) => any;
+/**
+ * Parses component/token values, who point to GLOBAL or SEMANTIC(theme) tokens.
+ *
+ * @param path value of the comp-tier token, e.g.: {sem.palette.accents.red.base} of avatar comp
+ * @param fn callback to normalize values
+ * @returns the parsed value of the requested path
+ */
+export declare const parseComponentToken: (path: string, fn?: (val: string) => unknown) => (theme: Theme) => any;

package/dist/src/theme/tokens/utils/semantic.d.ts

@@ -0,0 +1,11 @@
+import { Token, TokensObject } from './types';
+
+/**
+ * Used by themes like semantic in order to fetch all the variables defined in the `tokens/<theme_name>/variables`
+ * The returned value is usually used as inside .get of each variable like `textColor.get`
+ *
+ * @param object a variable from the tokens/<theme_name>/variables directory
+ * @param path path of the requested token value. e.g: 'systemic.tetiary.dark' for palette object
+ * @returns the parsed value of the requested path
+ */
+export declare const getTokensValue: (object: TokensObject | Token) => (path: string) => string;

package/dist/src/theme/tokens/utils/types.d.ts

@@ -0,0 +1,49 @@
+export type Token = {
+    value: string;
+    type: string;
+    description?: string;
+};
+export type TokensObject = {
+    [index: string]: string | TokensObject;
+};
+/**
+ * This generic type to convert an object to a dot notation string deeply while ignoring `value` properties at the end
+ * Key paths of figma tokens objects usually used are declared in the following directories:
+ *
+ * src/theme/globals/constants/*
+ * src/theme/tokens/<theme>/variables/*
+ * src/theme/tokens/components/variables/*
+ *
+ * This is needed for all the getToken callbacks to make sure that
+ * all the requested paths return a Token (with value/type/description)
+ *
+ * @example
+ * ```
+ * const avatar = {
+ *     color: {
+ *         red: {
+ *             backgroundColor: {
+ *                 value: 'test'
+ *             }
+ *         }
+ *     },
+ *     size: {
+ *         1: {
+ *             value: 'test'
+ *         }
+ *     }
+ * } as const;
+ *
+ * type AvatarKeys = DotKeys<typeof avatar>;
+ * ```
+ *
+ * the above produces
+ * ```
+ * type AvatarKeys = "color.red.backgroundColor" | "size.1"
+ * ```
+ */
+export type DotKeys<T> = T extends Record<string, unknown> ? {
+    [K in keyof T & string]: T[K] extends {
+        value: unknown;
+    } ? `${K}` : `${K}${DotKeys<T[K]> extends infer S ? (S extends string ? `.${S}` : '') : ''}`;
+}[keyof T & string] | (keyof T extends number ? `${keyof T}` : never) : never;

package/dist/src/theme/types.d.ts

@@ -0,0 +1,82 @@
+import { DimensionBorderRadius } from './dimension/borderRadius';
+import { DimensionBorderWidth } from './dimension/borderWidth';
+import { DimensionMinHeight } from './dimension/minHeight';
+import { DimensionOpacity } from './dimension/opacity';
+import { DimensionSizing } from './dimension/sizing';
+import { DimensionSpacing } from './dimension/spacing';
+import { DimensionState } from './dimension/state';
+import { BorderRadius } from './globals/borderRadius';
+import { BorderWidth } from './globals/borderWidth';
+import { Colors } from './globals/colors';
+import { Elevation } from './globals/elevation';
+import { Opacity } from './globals/opacity';
+import { Sizing } from './globals/sizing';
+import { Spacing } from './globals/spacing';
+import { Typography } from './globals/typography';
+import { Overrides } from './overrides';
+import { GetAAColor, GetAAColorFromSwatches, GetColor, Palette } from './palette';
+import { PaletteConfig } from './palette.config';
+import { SemanticBoxShadow } from './tokens/semantic/boxShadow';
+import { SemanticColors } from './tokens/semantic/colors';
+import { SemanticDisabledState } from './tokens/semantic/disabledState';
+import { SemanticState } from './tokens/semantic/state';
+import { SemanticTypography } from './tokens/semantic/typography';
+
+export type TextColorTypes = 'primary' | 'secondary' | 'light';
+export type ColorScheme = 'semantic' | 'dark';
+export type ThemeConfig = {
+    palette: PaletteConfig;
+    typography: Typography;
+    spacing: Spacing;
+    elevation: Elevation;
+    overrides: Overrides;
+};
+export type SemanticTheme = {
+    colors: SemanticColors;
+    disabledState: SemanticDisabledState;
+    state: SemanticState;
+    typography: SemanticTypography;
+    boxShadow: SemanticBoxShadow;
+};
+export type Dimension = {
+    borderRadius: DimensionBorderRadius;
+    borderWidth: DimensionBorderWidth;
+    minHeight: DimensionMinHeight;
+    opacity: DimensionOpacity;
+    sizing: DimensionSizing;
+    spacing: DimensionSpacing;
+    state: DimensionState;
+};
+/** Will add more themes in the future (e.g.: DarkTheme) */
+export type Tokens = SemanticTheme;
+export type Theme = {
+    globals: {
+        colors: Colors;
+        oldColors: Palette;
+        typography: Typography;
+        spacing: Spacing;
+        elevation: Elevation;
+        borderRadius: BorderRadius;
+        borderWidth: BorderWidth;
+        opacity: Opacity;
+        sizing: Sizing;
+    };
+    dimension: Dimension;
+    tokens: Tokens;
+    colorScheme: ColorScheme;
+    overrides: Overrides;
+    utils: {
+        /**
+         * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
+         */
+        getColor: GetColor;
+        /**
+         * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
+         */
+        getAAColorFromSwatches: GetAAColorFromSwatches;
+        /**
+         * @deprecated deprecated since v5.0.0. Use `theme.globals.colors.get('')` instead.
+         */
+        getAAColor: GetAAColor;
+    };
+};

package/dist/src/theme/utils.d.ts

@@ -0,0 +1,51 @@
+import { GeneratedColorShades, Palette } from './palette';
+import { PaletteConfig } from './palette.config';
+import { PropsValidationError } from '../utils/errors';
+
+export declare const convertPointsToPixels: (pt: number) => number;
+export declare const convertRemToPixels: (rem: any) => number;
+export declare const colorShadesCreator: (base: string, per?: number, shadesCount?: number) => GeneratedColorShades;
+/**
+ * Recursive function that iterates over the theme.
+ * If, upon iteration it finds an object then it goes one level depper
+ * if the value exists in the exclusion array, it returns the value as is (useful for white and black colors),
+ * otherwise,if it finds a non object value ,it runs the callback it was passed as a prop,
+ *
+ *
+ * @param obj {Object}  Object The collection to iterate over.
+ * @param func {Function} callback to create colorShades.
+ * @returns {Record<string, unknown>>} Each level will have generatedColorShades and in whole it will return
+ * a complete palette.
+ */
+export declare const iterateObject: <T extends object>(obj: T, func: (value: string, name: string) => GeneratedColorShades | string) => Record<string, unknown>;
+export declare const enhancePaletteWithShades: (obj: PaletteConfig) => Palette;
+export declare const rem: (px: number | string) => string;
+export declare const getColorErrors: {
+    condition: (endColor: string) => boolean;
+    error: PropsValidationError;
+}[];
+export type GetFigmaTokensValue<T extends string | number | symbol> = {
+    (figmaTokensObject: Record<T, Record<string, string>>, type: 'pixels'): (val: T) => string;
+    (figmaTokensObject: Record<T, Record<string, string>>, type: 'string'): (val: T) => string;
+    (figmaTokensObject: Record<T, Record<string, string>>, type: 'number'): (val: T) => number;
+};
+export declare enum FigmaTokenValueType {
+    Pixels = "pixels",
+    String = "string",
+    Number = "number",
+    BoxShadow = "boxShadow"
+}
+/** The type of the object inside the theme/constants folder  */
+export type FigmaTokensObject<T extends string | symbol> = Record<T, Record<string, string | Record<string, string>>>;
+/**
+ * @param figmaTokensObject The parsed objects from Figma Tokens in the src/theme/constants/ dir
+ * @param type 'pixels' refers to all the string values that need to be converted to rem
+ *             'string' refers to all the string values that need no conversion (e.g. opacity, font-family etc)
+ *             'number' refers to all the string values that need to be converted to numbers (e.g. font-weight)
+ */
+export declare const getFigmaTokensValue: {
+    <T extends string | symbol>(figmaTokensObject: FigmaTokensObject<T>, type: FigmaTokenValueType.Number): (val: T) => number;
+    <T extends string | symbol>(figmaTokensObject: FigmaTokensObject<T>, type: FigmaTokenValueType.String): (val: T) => string;
+    <T extends string | symbol>(figmaTokensObject: FigmaTokensObject<T>, type: FigmaTokenValueType.Pixels): (val: T) => string;
+    <T extends string | symbol>(figmaTokensObject: FigmaTokensObject<T>, type: FigmaTokenValueType.BoxShadow): (val: T) => string;
+};

package/dist/src/utils/common.d.ts

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes } from 'react';
+import type * as React from 'react';
+type FunctionProps = {
+    children: () => React.ReactNode;
+};
+export declare const Function: ({ children }: FunctionProps) => React.ReactNode;
+/** A type to turn any type optional properties to required */
+export type RequiredProperties<T> = {
+    [K in keyof T]-?: T[K];
+};
+/** A generic type for native events */
+export type EventProps = {
+    onClick?: () => void;
+    onBlur?: () => void;
+};
+export type CommonButtonProps = Partial<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'css' | 'onBlur' | 'onClick' | 'type' | 'disabled'>>;
+export type DivProps = Partial<Omit<React.HTMLProps<HTMLDivElement>, 'color' | 'size' | 'css'>>;
+export type FlexDirectionProperty = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+/** URL currently used for figma version 4.5 frozen */
+export declare const FIGMA_URL = "https://www.figma.com/file/8kMPBNYHHXz2AtkzeeDmk5/Design-System-V5.0---Working-File";
+export {};

package/dist/src/utils/date.d.ts

@@ -0,0 +1,5 @@
+import { Dayjs as DayjsType, default as dayjsLib } from 'dayjs';
+
+declare const dayjs: typeof dayjsLib;
+export type Dayjs = DayjsType;
+export default dayjs;

package/dist/src/utils/errors.d.ts

@@ -0,0 +1,6 @@
+export declare class ValidationError extends Error {
+    constructor(message: string);
+}
+export declare class PropsValidationError extends ValidationError {
+    constructor(message: string);
+}

package/dist/src/utils/helpers.d.ts

@@ -0,0 +1,20 @@
+import { TestId } from 'utils/types';
+
+/** A function that generates a unique key by making a value randomly based on time also */
+export declare const generateUniqueKey: (elementType?: string) => string;
+/** A function that generates a unique id using lodash's uniqueId util */
+export declare const generateUniqueID: (prefix?: string) => string;
+/** A function that takes two strings to generate a test data id by combining them if both exist */
+export declare const generateTestDataId: (defaultId: TestId, customId?: TestId) => string;
+/** A function that determines if the element passed is a function and a react element */
+export declare function isComponentFunctionType(element: string | number | JSX.Element | Function): element is Function;
+/**  A function that retrieves the correct date format based on system's locale */
+export declare const getLocaleFormat: (dateFormat: string | undefined) => string;
+/**
+ *  A function that takes an array of errors and the component props and throws an error
+ *  if the condition is met
+ * */
+export declare const errorHandler: <T>(errors: {
+    condition: (p: T) => boolean;
+    error: Error | ((p: T) => Error);
+}[], props: T) => void[];