welcome-ui 8.4.0 → 9.0.0-alpha.1

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

@@ -1,132 +0,0 @@
-import { CSSScalar, ITheme as StyledComponentDefaultTheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/styled-components';
-import { ThemeAccordions } from '../components/Accordion/theme';
-import { ThemeAlerts } from '../components/Alert/theme';
-import { ThemeAvatars } from '../components/Avatar/theme';
-import { ThemeBadges } from '../components/Badge/theme';
-import { ThemeBreadcrumbs } from '../components/Breadcrumb/theme';
-import { ThemeButtons } from '../components/Button/theme';
-import { ThemeCards } from '../components/Card/theme';
-import { ThemeCheckboxes } from '../components/Checkbox/theme';
-import { ThemeDateTimePickerCommon } from '../components/DateTimePickerCommon/theme';
-import { ThemeDrawers } from '../components/Drawer/theme';
-import { ThemeDropdownMenu } from '../components/DropdownMenu/theme';
-import { ThemeFileDrops } from '../components/FileDrop/theme';
-import { ThemeHints } from '../components/Hint/theme';
-import { ThemeIcons } from '../components/Icon/theme';
-import { ThemeLabels } from '../components/Label/theme';
-import { ThemeLinks } from '../components/Link/theme';
-import { ThemeLoaders } from '../components/Loader/theme';
-import { ThemeModals } from '../components/Modal/theme';
-import { ThemePagination } from '../components/Pagination/theme';
-import { ThemePopovers } from '../components/Popover/theme';
-import { ThemeRadios } from '../components/Radio/theme';
-import { ThemeRadioTabs } from '../components/RadioTab/theme';
-import { ThemeSliders } from '../components/Slider/theme';
-import { ThemeSwipers } from '../components/Swiper/theme';
-import { ThemeTables } from '../components/Table/theme';
-import { ThemeTabs } from '../components/Tabs/theme';
-import { ThemeTags } from '../components/Tag/theme';
-import { ThemeTextareas } from '../components/Textarea/theme';
-import { ThemeToasts } from '../components/Toast/theme';
-import { ThemeToggles } from '../components/Toggle/theme';
-import { ThemeTooltips } from '../components/Tooltip/theme';
-import { ThemeVariantIcon } from '../components/VariantIcon/theme';
-import { ThemeBorderWidths } from './borders';
-import { ThemeColors } from './colors';
-import { darkTheme } from './dark';
-import { ThemeDefaultFields } from './defaultFields';
-import { ThemeFocus } from './focus';
-import { ThemeFontFaces } from './fonts';
-import { ThemeRadii } from './radii';
-import { ThemeScreens } from './screens';
-import { ThemeSelection } from './selection';
-import { ThemeShadows } from './shadows';
-import { ThemeSpace } from './space';
-import { ThemeTimingFunction, ThemeTransitions } from './transitions';
-import { ThemeFonts, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights, ThemeTexts, ThemeTextsFontColors, ThemeTextsFontFamily, ThemeTextsFontWeights, ThemeTextsTextTransform } from './typography';
-import { ThemeUnderline } from './underline';
-export type ThemeColorTokens = keyof ThemeColors;
-export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
-export type ThemeProps = {
-    [param: string]: unknown;
-    defaultFontFamily?: string;
-    defaultFontSize?: number;
-    defaultLetterSpacing?: string;
-    defaultLineHeight?: number;
-    fontsUrl?: ThemeFontsUrl;
-    headingFontFamily?: string;
-    iconFontFamily?: string;
-};
-export interface ThemeValues extends StyledComponentsTheme, XStyledTheme {
-    accordions: ThemeAccordions;
-    alerts: ThemeAlerts;
-    avatars: ThemeAvatars;
-    badges: ThemeBadges;
-    borderWidths: ThemeBorderWidths;
-    breadcrumbs: ThemeBreadcrumbs;
-    buttons: ThemeButtons;
-    cards: ThemeCards;
-    checkboxes: ThemeCheckboxes;
-    colors: ThemeColors;
-    dateTimePickerCommon: ThemeDateTimePickerCommon;
-    defaultFields: ThemeDefaultFields;
-    defaultLetterSpacing: string;
-    defaultLineHeight: number;
-    drawers: ThemeDrawers;
-    dropdownMenu: ThemeDropdownMenu;
-    fileDrops: ThemeFileDrops;
-    focus: ThemeFocus;
-    fontFaces: ThemeFontFaces;
-    fonts: ThemeFonts;
-    fontSizes: ThemeFontSizes;
-    fontsUrl: ThemeFontsUrl;
-    fontWeights: ThemeFontWeights;
-    hints: ThemeHints;
-    icons: ThemeIcons;
-    inset: ThemeSpace;
-    labels: ThemeLabels;
-    letterSpacings: ThemeLetterSpacings;
-    lineHeights: ThemeLineHeights;
-    links: ThemeLinks;
-    loaders: ThemeLoaders;
-    modals: ThemeModals;
-    pagination: ThemePagination;
-    popovers: ThemePopovers;
-    radii: ThemeRadii;
-    radios: ThemeRadios;
-    radiosTab: ThemeRadioTabs;
-    screens: ThemeScreens;
-    selection: ThemeSelection;
-    shadows: ThemeShadows;
-    sliders: ThemeSliders;
-    space: ThemeSpace;
-    swipers: ThemeSwipers;
-    tables: ThemeTables;
-    tabs: ThemeTabs;
-    tags: ThemeTags;
-    textareas: ThemeTextareas;
-    texts: ThemeTexts;
-    textsFontColors: ThemeTextsFontColors;
-    textsFontFamily: ThemeTextsFontFamily;
-    textsFontWeights: ThemeTextsFontWeights;
-    textsTextTransform: ThemeTextsTextTransform;
-    timingFunction: ThemeTimingFunction;
-    toasts: ThemeToasts;
-    toEm: (int: number) => string;
-    toggles: ThemeToggles;
-    tooltips: ThemeTooltips;
-    toPx: (int: number) => string;
-    toRem: (int: number) => string;
-    transformers: {
-        border: (value: CSSScalar) => CSSScalar;
-        px: (value: CSSScalar) => CSSScalar;
-    };
-    transitions: ThemeTransitions;
-    underline: ThemeUnderline;
-    variantIcon: ThemeVariantIcon;
-}
-type OverrideKeys = 'borderWidths' | 'colors' | 'fonts' | 'fontSizes' | 'fontWeights' | 'letterSpacings' | 'lineHeights' | 'radii' | 'screens' | 'shadows' | 'sizes' | 'space' | 'texts';
-type StyledComponentsTheme = Omit<StyledComponentDefaultTheme, OverrideKeys>;
-type XStyledTheme = Omit<XStyledDefaultTheme, OverrideKeys>;
-export declare const createTheme: (options?: ThemeProps) => ThemeValues;
-export { darkTheme };

package/dist/types/theme/tokens.json.d.ts

@@ -0,0 +1,378 @@
+declare const _default: {
+  "border": {
+    "width": {
+      "$type": "dimension",
+      "lg": {
+        "$value": "3px"
+      },
+      "md": {
+        "$value": "2px"
+      },
+      "sm": {
+        "$value": "1px"
+      }
+    }
+  },
+  "color": {
+    "$type": "color",
+    "beige": {
+      "10": { "$value": "#fbf9f7" },
+      "20": { "$value": "#f6f3ef" },
+      "30": { "$value": "#eae4de" },
+      "40": { "$value": "#d2cbc3" },
+      "50": { "$value": "#a7a096" },
+      "60": { "$value": "#605b55" },
+      "70": { "$value": "#4d4944" },
+      "80": { "$value": "#33302d" },
+      "90": { "$value": "#1e1c1a" }
+    },
+    "blue": {
+      "10": { "$value": "#e0f5ff" },
+      "20": { "$value": "#bbeaff" },
+      "30": { "$value": "#9bdef7" },
+      "40": { "$value": "#55c3e9" },
+      "50": { "$value": "#27a5d0" },
+      "60": { "$value": "#057aa3" },
+      "70": { "$value": "#025a79" },
+      "80": { "$value": "#013c50" },
+      "90": { "$value": "#00202b" }
+    },
+    "green": {
+      "10": { "$value": "#eaffd4" },
+      "20": { "$value": "#d6f6b4" },
+      "30": { "$value": "#bade94" },
+      "40": { "$value": "#9fc873" },
+      "50": { "$value": "#83ad57" },
+      "60": { "$value": "#5a8034" },
+      "70": { "$value": "#40611f" },
+      "80": { "$value": "#2a4210" },
+      "90": { "$value": "#142603" }
+    },
+    "neutral": {
+      "10": { "$value": "#ffffff" },
+      "20": { "$value": "#f3f3f3" },
+      "30": { "$value": "#dedede" },
+      "40": { "$value": "#bdbdbd" },
+      "50": { "$value": "#989898" },
+      "60": { "$value": "#585858" },
+      "70": { "$value": "#444444" },
+      "80": { "$value": "#212121" },
+      "90": { "$value": "#000000" }
+    },
+    "orange": {
+      "10": { "$value": "#ffebce" },
+      "20": { "$value": "#ffd495" },
+      "30": { "$value": "#ffbb59" },
+      "40": { "$value": "#ff9f14" },
+      "50": { "$value": "#db860a" },
+      "60": { "$value": "#a6670a" },
+      "70": { "$value": "#824f06" },
+      "80": { "$value": "#573607" },
+      "90": { "$value": "#382303" }
+    },
+    "pink": {
+      "10": { "$value": "#ffeaf5" },
+      "20": { "$value": "#ffd5eb" },
+      "30": { "$value": "#feb7dc" },
+      "40": { "$value": "#f696c8" },
+      "50": { "$value": "#e468a8" },
+      "60": { "$value": "#c24887" },
+      "70": { "$value": "#972962" },
+      "80": { "$value": "#6d1142" },
+      "90": { "$value": "#3c0725" }
+    },
+    "red": {
+      "10": { "$value": "#fbdedc" },
+      "20": { "$value": "#fcc7c3" },
+      "30": { "$value": "#fdb3ae" },
+      "40": { "$value": "#ff9490" },
+      "50": { "$value": "#ff6165" },
+      "60": { "$value": "#e1003a" },
+      "70": { "$value": "#a80029" },
+      "80": { "$value": "#75001a" },
+      "90": { "$value": "#450101" }
+    },
+    "red-orange": {
+      "10": { "$value": "#ffded0" },
+      "20": { "$value": "#ffc9b2" },
+      "30": { "$value": "#ffb595" },
+      "40": { "$value": "#ff9868" },
+      "50": { "$value": "#e67b49" },
+      "60": { "$value": "#c45927" },
+      "70": { "$value": "#9f4217" },
+      "80": { "$value": "#6d2605" },
+      "90": { "$value": "#451701" }
+    },
+    "teal": {
+      "10": { "$value": "#d5fffa" },
+      "20": { "$value": "#aaf4eb" },
+      "30": { "$value": "#6de1d2" },
+      "40": { "$value": "#00c7ae" },
+      "50": { "$value": "#01aa95" },
+      "60": { "$value": "#008070" },
+      "70": { "$value": "#00544a" },
+      "80": { "$value": "#003d35" },
+      "90": { "$value": "#00211d" }
+    },
+    "transparent": {
+      "$value": "transparent"
+    },
+    "violet": {
+      "10": { "$value": "#f2f2ff" },
+      "20": { "$value": "#e0e0ff" },
+      "30": { "$value": "#c9c9ff" },
+      "40": { "$value": "#acacff" },
+      "50": { "$value": "#9080f0" },
+      "60": { "$value": "#7958d6" },
+      "70": { "$value": "#593cac" },
+      "80": { "$value": "#422a86" },
+      "90": { "$value": "#1f0e51" }
+    },
+    "yellow": {
+      "10": { "$value": "#fff8d9" },
+      "20": { "$value": "#fff1b2" },
+      "30": { "$value": "#ffe166" },
+      "40": { "$value": "#ffcd00" },
+      "50": { "$value": "#e5b800" },
+      "60": { "$value": "#b69200" },
+      "70": { "$value": "#846a01" },
+      "80": { "$value": "#604d00" },
+      "90": { "$value": "#423500" }
+    },
+    "brand": {
+      "10": { "$value": "{color.yellow.10}" },
+      "20": { "$value": "{color.yellow.20}" },
+      "30": { "$value": "{color.yellow.30}" },
+      "40": { "$value": "{color.yellow.40}" },
+      "50": { "$value": "{color.yellow.50}" },
+      "60": { "$value": "{color.yellow.60}" },
+      "70": { "$value": "{color.yellow.70}" },
+      "80": { "$value": "{color.yellow.80}" },
+      "90": { "$value": "{color.yellow.90}" }
+    },
+    "overlay": {
+      "$value": "color-mix(in oklab, {color.neutral.90} 55%, transparent)"
+    },
+    "secondary": {
+      "blue": { "$value": "{color.blue.40}" },
+      "green": { "$value": "{color.green.30}" },
+      "orange": { "$value": "{color.red-orange.40}" },
+      "pink": { "$value": "{color.pink.40}" },
+      "teal": { "$value": "{color.teal.40}" },
+      "violet": { "$value": "{color.violet.40}" }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "default": {
+        "$value": "'Work Sans', sans-serif"
+      },
+      "headings": {
+        "$value": "'welcome-font', sans-serif"
+      },
+      "icons": {
+        "$value": "'welcome-icon-font'"
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "11": { "$value": "0.6875rem" },
+      "12": { "$value": "0.75rem" },
+      "13": { "$value": "0.8125rem" },
+      "14": { "$value": "0.875rem" },
+      "16": { "$value": "1rem" },
+      "18": { "$value": "1.125rem" },
+      "20": { "$value": "1.25rem" },
+      "24": { "$value": "1.5rem" },
+      "26": { "$value": "1.625rem" },
+      "36": { "$value": "2.25rem" },
+      "45": { "$value": "2.8125rem" },
+      "65": { "$value": "4.0625rem" },
+      "h0": { "$value": "{font.size.65}" },
+      "h1": { "$value": "{font.size.45}" },
+      "h2": { "$value": "{font.size.36}" },
+      "h3": { "$value": "{font.size.26}" },
+      "h4": { "$value": "{font.size.20}" },
+      "h5": { "$value": "{font.size.16}" },
+      "h6": { "$value": "{font.size.14}" },
+      "lg": { "$value": "{font.size.18}" },
+      "md": { "$value": "{font.size.16}" },
+      "sm": { "$value": "{font.size.14}" },
+      "subtitle": {
+        "md": { "$value": "{font.size.13}" },
+        "sm": { "$value": "{font.size.11}" }
+      },
+      "xl": { "$value": "{font.size.24}" },
+      "xs": { "$value": "{font.size.12}" }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "400": { "$value": "400" },
+      "500": { "$value": "500" },
+      "600": { "$value": "600" },
+      "bold": { "$value": "{font.weight.600}" },
+      "medium": { "$value": "{font.weight.500}" },
+      "regular": { "$value": "{font.weight.400}" }
+    }
+  },
+  "height": {
+    "$type": "dimension",
+    "4": { "$value": "0.25rem" },
+    "8": { "$value": "0.5rem" },
+    "10": { "$value": "0.625rem" },
+    "12": { "$value": "0.75rem" },
+    "16": { "$value": "1rem" },
+    "20": { "$value": "1.25rem" },
+    "24": { "$value": "1.5rem" },
+    "30": { "$value": "1.875rem" },
+    "32": { "$value": "2rem" },
+    "40": { "$value": "2.5rem" },
+    "48": { "$value": "3rem" },
+    "50": { "$value": "3.125rem" },
+    "60": { "$value": "3.75rem" },
+    "64": { "$value": "4rem" },
+    "elements": {
+      "lg": { "$value": "{height.40}" },
+      "md": { "$value": "{height.32}" },
+      "sm": { "$value": "{height.24}" },
+      "xl": { "$value": "{height.48}" },
+      "xs": { "$value": "{height.16}" },
+      "xxl": { "$value": "{height.64}" },
+      "xxs": { "$value": "{height.12}" }
+    }
+  },
+  "letter-spacing": {
+    "$type": "dimension",
+    "h0": { "$value": "-0.10625rem" },
+    "h1": { "$value": "-0.075rem" },
+    "h2": { "$value": "-0.0625rem" },
+    "h3": { "$value": "-0.05625rem" },
+    "h4": { "$value": "-0.0375rem" },
+    "h5": { "$value": "-0.03125rem" },
+    "h6": { "$value": "-0.03125rem" },
+    "lg": { "$value": "-0.019rem" },
+    "md": { "$value": "-0.019rem" },
+    "sm": { "$value": "-0.019rem" },
+    "subtitle": {
+      "md": { "$value": "-0.0125rem" },
+      "sm": { "$value": "-0.0125rem" }
+    },
+    "xs": { "$value": "-0.0125rem" }
+  },
+  "line-height": {
+    "$type": "dimension",
+    "14": { "$value": "0.875rem" },
+    "16": { "$value": "1rem" },
+    "18": { "$value": "1.125rem" },
+    "20": { "$value": "1.25rem" },
+    "24": { "$value": "1.5rem" },
+    "32": { "$value": "2rem" },
+    "40": { "$value": "2.5rem" },
+    "48": { "$value": "3rem" },
+    "72": { "$value": "4.5rem" },
+    "iso-font-size": { "$value": "1" },
+    "h0": { "$value": "{line-height.72}" },
+    "h1": { "$value": "{line-height.48}" },
+    "h2": { "$value": "{line-height.40}" },
+    "h3": { "$value": "{line-height.32}" },
+    "h4": { "$value": "{line-height.24}" },
+    "h5": { "$value": "{line-height.20}" },
+    "h6": { "$value": "{line-height.18}" },
+    "lg": { "$value": "{line-height.24}" },
+    "md": { "$value": "{line-height.18}" },
+    "sm": { "$value": "{line-height.18}" },
+    "subtitle": {
+      "md": { "$value": "{line-height.iso-font-size}" },
+      "sm": { "$value": "{line-height.iso-font-size}" }
+    },
+    "xs": { "$value": "{line-height.14}" }
+  },
+  "radius": {
+    "$type": "dimension",
+    "2xl": { "$value": "1.5rem" },
+    "circle": { "$value": "calc(infinity * 1px)" },
+    "lg": { "$value": "0.5rem" },
+    "md": { "$value": "0.25rem" },
+    "sm": { "$value": "0.125rem" },
+    "xl": { "$value": "1rem" }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "2xl": { "$value": "1440px" },
+    "3xl": { "$value": "1620px" },
+    "4xl": { "$value": "1920px" },
+    "lg": { "$value": "980px" },
+    "md": { "$value": "736px" },
+    "sm": { "$value": "480px" },
+    "xl": { "$value": "1280px" },
+    "xs": { "$value": "0px" }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "focus": {
+      "$value": "0 0 0 2px {color.brand.40}"
+    },
+    "focus-danger": {
+      "$value": "0 0 0 2px {color.red.30}"
+    },
+    "focus-success": {
+      "$value": "0 0 0 2px {color.green.30}"
+    },
+    "focus-warning": {
+      "$value": "0 0 0 2px {color.orange.20}"
+    },
+    "md": {
+      "$value": "3px 4px 10px 0 color-mix(in oklab, {color.neutral.90} 7%, transparent)"
+    },
+    "sm": {
+      "$value": "1px 2px 4px 0 color-mix(in oklab, {color.neutral.90} 5%, transparent)"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "0": { "$value": "0" },
+    "2": { "$value": "0.125rem" },
+    "3": { "$value": "0.1875rem" },
+    "4": { "$value": "0.25rem" },
+    "8": { "$value": "0.5rem" },
+    "12": { "$value": "0.75rem" },
+    "16": { "$value": "1rem" },
+    "24": { "$value": "1.5rem" },
+    "28": { "$value": "1.75rem" },
+    "32": { "$value": "2rem" },
+    "36": { "$value": "2.25rem" },
+    "48": { "$value": "3rem" },
+    "64": { "$value": "4rem" },
+    "96": { "$value": "6rem" },
+    "128": { "$value": "8rem" },
+    "192": { "$value": "12rem" },
+    "3xl": { "$value": "{spacing.48}" },
+    "4xl": { "$value": "{spacing.64}" },
+    "5xl": { "$value": "{spacing.96}" },
+    "6xl": { "$value": "{spacing.128}" },
+    "7xl": { "$value": "{spacing.192}" },
+    "lg": { "$value": "{spacing.16}" },
+    "md": { "$value": "{spacing.12}" },
+    "sm": { "$value": "{spacing.8}" },
+    "xl": { "$value": "{spacing.24}" },
+    "xs": { "$value": "{spacing.4}" },
+    "xxl": { "$value": "{spacing.32}" },
+    "xxs": { "$value": "{spacing.2}" }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": { "$value": "100ms" },
+    "medium": { "$value": "300ms" },
+    "slow": { "$value": "500ms" }
+  },
+  "timing": {
+    "$type": "cubicBezier",
+    "primary": { "$value": "ease" },
+    "secondary": { "$value": "linear" },
+    "tertiary": { "$value": "cubic-bezier(0.41, 0.094, 0.54, 0.07)" }
+  }
+}
+;
+
+export default _default;

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

@@ -0,0 +1,3 @@
+export type PolymorphicProps<E extends React.ElementType> = React.PropsWithChildren<React.ComponentPropsWithoutRef<E> & {
+    as?: E;
+}>;

package/dist/types/theme/utils/parseTokens.d.ts

@@ -0,0 +1,15 @@
+export type FlatTokens = Record<string, string>;
+export interface TokensStructure {
+    [key: string]: TokenNode;
+}
+type TokenNode = string | TokenValue | TokenWithType | {
+    [key: string]: TokenNode;
+};
+interface TokenValue {
+    $value: string;
+}
+type TokenWithType = TokensStructure & {
+    $type: string;
+};
+export declare const parseTokens: (tokens: TokensStructure) => FlatTokens;
+export {};

package/dist/types/theme/utils/parseTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,7 @@
+export type DefaultFieldIconSize = 'xs' | 'sm';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        [name: `data-${string}`]: string;
+    }
+}

package/dist/types/utils/classNames.d.ts

@@ -0,0 +1,15 @@
+type ClassName<K extends string> = false | K | null | (string & {}) | undefined;
+type ClassNameArg<K extends string> = ClassName<K> | ClassName<K>[] | {
+    [key: string]: boolean | null | undefined;
+} | {
+    [P in K]?: boolean | null | undefined;
+};
+type CSSModule = Record<string, string>;
+/**
+ * A utility function to create a classNames function with a specific CSS module.
+ * @param module The CSS module to use for class name resolution.
+ * @returns A function that takes class names and returns the resolved class names.
+ */
+export declare function classNames(): (...args: ClassNameArg<string>[]) => string;
+export declare function classNames<C extends CSSModule>(module: C): (...args: ClassNameArg<keyof C & string>[]) => string;
+export {};

package/dist/types/utils/classNames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/forwardRefWithAs.d.ts

@@ -0,0 +1,81 @@
+import { ComponentProps, default as React } from 'react';
+/**
+ * The following source code is mainly inspired by
+ * https://github.com/pluralsight/classic-design-system/blob/08f0962dec18d99e1799a16c7b7eac86f01cbc27/packages/util/src/primatives.ts
+ */
+export type As<BaseProps = any> = React.ElementType<BaseProps>;
+/**
+ * Omit will not distribute over unions by default, this utility type will
+ * distribute it, allowing to omit keys from each member of the union.
+ *
+ * @example
+ *  type A = { a: string; b: number }
+ *  type B = { a: string; c: boolean }
+ *  type Union = A | B
+ *
+ *  // Without DistributiveOmit
+ *  type Test1 = Omit<Union, 'a'> // never  (because 'a' is in both A and B)
+ *  type Test2 = Omit<Union, 'b'> // B      (because 'b' is not in B)
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+/**
+ * Injects in given props the one of the element
+ */
+export type ForwardRefProps<Props extends EmptyProps, CompType extends React.ElementType<any>> = MergeProps<Props, ComponentProps<CompType>>;
+export interface ForwardRefWithAsRenderFunction<DefaultComponentType extends As, ComponentProps extends PropsType = Record<string, any>> {
+    (props: PropsFromAs<DefaultComponentType, ComponentProps>, ref: React.Ref<React.ElementRef<DefaultComponentType>>): null | React.ReactElement;
+    /**
+     * defaultProps are not supported on render functions
+     */
+    defaultProps?: never;
+    displayName?: string;
+    /**
+     * propTypes are not supported on render functions
+     */
+    propTypes?: never;
+}
+export interface FunctionComponentWithAs<DefaultComponentType extends As, ComponentProps extends PropsType> {
+    /**
+     * Inherited from React.FunctionComponent with modification to support `as`
+     */
+    <CompType extends As = DefaultComponentType>(props: PropsWithAs<CompType, ComponentProps>, context?: any): null | React.ReactElement<any, any>;
+    /**
+     * Inherited from React.FunctionComponent
+     */
+    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
+    displayName?: string;
+}
+/**
+ * This will merge two prop objects, giving P1 priority over P2
+ * In other words, any props in P1 that are also in P2 will override the ones in P2
+ * This is useful when combining the props of the `as` component with your own props
+ */
+export type MergeProps<P1 = EmptyProps, P2 = EmptyProps> = DistributiveOmit<P2, keyof P1> & P1;
+/**
+ * Get the props of a component with `as` support
+ * This will take care of the ref and the merging of the props
+ */
+export type PropsFromAs<CompType extends As, ComponentProps extends PropsType> = React.PropsWithoutRef<PropsWithAs<CompType, ComponentProps>>;
+/**
+ * Props of a component with `as` support
+ */
+export type PropsWithAs<CompType extends As, ComponentProps extends PropsType> = MergeProps<WithAs<CompType, ComponentProps>, React.ComponentProps<CompType>>;
+/**
+ * An empty object type
+ */
+type EmptyProps = Record<never, never>;
+/**
+ * PropsType can either be an object or null/undefined
+ */
+type PropsType = null | Record<string, any>;
+/**
+ * Adds the `as` prop to a component's props
+ */
+type WithAs<DefaultComponentType extends As, ComponentProps extends EmptyProps> = MergeProps<{
+    as?: DefaultComponentType;
+}, ComponentProps>;
+/**
+ * Wraps a component with a forwardRef and adds the `as` prop support
+ */
+export declare function forwardRefWithAs<ComponentProps extends PropsType, DefaultComponentType extends As = 'div'>(render: ForwardRefWithAsRenderFunction<DefaultComponentType, ComponentProps>): FunctionComponentWithAs<DefaultComponentType, ComponentProps>;
+export {};

package/dist/types/utils/index.d.ts

@@ -1,10 +1,4 @@
-export * from './field-styles';
-export * from './format-bytes';
-export * from './hex-to-rgba';
-export * from './overflow-ellipsis';
-export * from './throttle';
+export * from './classNames';
+export * from './forwardRefWithAs';
 export * from './ts-utils';
 export * from './use-copy-text';
-export * from './use-fork-ref';
-export * from './use-isomorphic-layout-effect';
-export * from './use-viewport';

package/dist/types/utils/use-screens.d.ts

@@ -0,0 +1,11 @@
+import { default as tokens } from '../theme/tokens.json';
+type ScreenSize = keyof Omit<typeof tokens.breakpoint, '$type'>;
+type Screens = Record<ScreenSize, number>;
+/**
+ * A custom hook to retrieve the screen sizes defined in the theme tokens.
+ * @returns An object containing the screen sizes defined in the theme tokens,
+ * with keys as screen names and absolute values.
+ * Only supports number values (e.g. no 'rem', '%', etc.).
+ */
+export declare function useScreens(): Screens;
+export {};