@eleven-labs/design-system 0.6.2 → 0.10.0

package/dist/components/Atoms/Blockquote/Blockquote.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { AsProps, ColorSystemProps, MarginSystemProps } from '../../../types';
-export type BlockquoteProps = AsProps<'blockquote'> & MarginSystemProps & Pick<ColorSystemProps, 'bg'>;
-export declare const Blockquote: React.FC<BlockquoteProps>;
+import type { BoxProps } from '../../../components';
+export interface BlockquoteProps extends BoxProps {
+}
+export declare const Blockquote: import("react-polymorphed").PolyForwardComponent<"blockquote", BlockquoteProps, React.ElementType<any>>;

package/dist/components/Atoms/Button/Button.d.ts

@@ -1,9 +1,11 @@
-import { As, AsProps, SpacingSystemProps } from '../../../types';
+import * as React from 'react';
+import type { SpacingSystemProps } from '../../../types';
 export declare const buttonVariant: readonly ["primary", "secondary"];
 export type ButtonVariantType = (typeof buttonVariant)[number];
-export type ButtonOptions = {
+export interface ButtonProps extends SpacingSystemProps {
+    className?: string;
     variant?: ButtonVariantType;
     isChoiceChip?: boolean;
-};
-export type ButtonProps<T extends As = 'button'> = AsProps<T> & SpacingSystemProps & ButtonOptions;
-export declare const Button: import('../../../types').ComponentWithAs<"button", ButtonProps<"button">>;
+    children: React.ReactNode;
+}
+export declare const Button: import("react-polymorphed").PolyForwardComponent<"button", ButtonProps, React.ElementType<any>>;

package/dist/components/Atoms/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ColorSystemProps, IconNameType, MarginSystemProps } from '../../../types';
-export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'color'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
+import type { ColorSystemProps, IconNameType, MarginSystemProps } from '../../../types';
+export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'name' | 'color'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
     name: IconNameType;
     size?: string | number;
 };

package/dist/components/Atoms/Layout/Box/Box.d.ts

@@ -1,3 +1,7 @@
-import { As, AsProps, SystemProps } from '../../../../types';
-export type BoxProps<T extends As = 'div'> = AsProps<T> & SystemProps;
-export declare const Box: import('../../../../types').ComponentWithAs<"div", BoxProps<"div">>;
+import * as React from 'react';
+import type { SystemProps } from '../../../../types';
+export interface BoxProps extends SystemProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Box: import("react-polymorphed").PolyForwardComponent<"div", BoxProps, React.ElementType<any>>;

package/dist/components/Atoms/Layout/Flex/Flex.d.ts

@@ -1,6 +1,7 @@
-import { BoxProps } from '../../../../components';
-import { As, DisplayType, TypeWithMediaQueriesType } from '../../../../types';
-export type FlexProps<T extends As = 'div'> = Omit<BoxProps<T>, 'display'> & {
+import * as React from 'react';
+import type { BoxProps } from '../../../../components';
+import type { DisplayType, FlexBoxSystemProps, TypeWithMediaQueriesType } from '../../../../types';
+export interface FlexProps extends Omit<BoxProps, 'display'>, FlexBoxSystemProps {
     display?: TypeWithMediaQueriesType<Extract<DisplayType, 'flex' | 'inline-flex'>>;
-};
-export declare const Flex: import('../../../../types').ComponentWithAs<"div", FlexProps<"div">>;
+}
+export declare const Flex: import("react-polymorphed").PolyForwardComponent<"div", FlexProps, React.ElementType<any>>;

package/dist/components/Atoms/Logo/Logo.d.ts

@@ -1,8 +1,9 @@
-import { AsProps, ColorSystemProps, MarginSystemProps } from '../../../types';
+import * as React from 'react';
+import type { FlexProps } from '../../../components';
 export declare const logoName: readonly ["website", "blog"];
 export type LogoNameType = (typeof logoName)[number];
-export type LogoProps = AsProps<'div'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
+export interface LogoProps extends FlexProps {
     name: LogoNameType;
     size?: string | number;
-};
-export declare const Logo: import('../../../types').ComponentWithAs<"div", LogoProps>;
+}
+export declare const Logo: import("react-polymorphed").PolyForwardComponent<"div", LogoProps, React.ElementType<any>>;

package/dist/components/Atoms/Skeleton/Skeleton.d.ts

@@ -1,6 +1,6 @@
-import { BoxProps } from '../../../components';
-export interface SkeletonOptions {
+import React from 'react';
+import type { BoxProps } from '../../../components';
+export interface SkeletonProps extends BoxProps {
     isLoading?: boolean;
 }
-export type SkeletonProps = BoxProps<'div'> & SkeletonOptions;
-export declare const Skeleton: import("../../..").ComponentWithAs<"div", SkeletonProps>;
+export declare const Skeleton: import("react-polymorphed").PolyForwardComponent<"div", SkeletonProps, React.ElementType<any>>;

package/dist/components/Atoms/Svgs/AccessTime.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgAccessTime: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgAccessTime;

package/dist/components/Atoms/Svgs/ArrowBack.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgArrowBack;

package/dist/components/Atoms/Svgs/Calendar.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgCalendar: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgCalendar;

package/dist/components/Atoms/Svgs/Close.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgClose: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgClose;

package/dist/components/Atoms/Svgs/Facebook.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgFacebook: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgFacebook;

package/dist/components/Atoms/Svgs/Github.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgGithub: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgGithub;

package/dist/components/Atoms/Svgs/Language.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgLanguage: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgLanguage;

package/dist/components/Atoms/Svgs/Link.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgLink: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgLink;

package/dist/components/Atoms/Svgs/Linkedin.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgLinkedin: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgLinkedin;

package/dist/components/Atoms/Svgs/Logo.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgLogo: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgLogo;

package/dist/components/Atoms/Svgs/Message.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgMessage: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgMessage;

package/dist/components/Atoms/Svgs/Person.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgPerson: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgPerson;

package/dist/components/Atoms/Svgs/Rss.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgRss: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgRss;

package/dist/components/Atoms/Svgs/Search.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgSearch: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgSearch;

package/dist/components/Atoms/Svgs/Tuto.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgTuto: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgTuto;

package/dist/components/Atoms/Svgs/Twitter.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgTwitter: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgTwitter;

package/dist/components/Atoms/Svgs/Welcometothejungle.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import type { SVGProps } from "react";
+import * as React from 'react';
+import type { SVGProps } from 'react';
 declare const SvgWelcometothejungle: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgWelcometothejungle;

package/dist/components/Atoms/Svgs/index.d.ts

@@ -1,16 +1,17 @@
-export { default as AccessTime } from "./AccessTime";
-export { default as ArrowBack } from "./ArrowBack";
-export { default as Calendar } from "./Calendar";
-export { default as Close } from "./Close";
-export { default as Facebook } from "./Facebook";
-export { default as Github } from "./Github";
-export { default as Language } from "./Language";
-export { default as Link } from "./Link";
-export { default as Linkedin } from "./Linkedin";
-export { default as Logo } from "./Logo";
-export { default as Message } from "./Message";
-export { default as Person } from "./Person";
-export { default as Rss } from "./Rss";
-export { default as Search } from "./Search";
-export { default as Twitter } from "./Twitter";
-export { default as Welcometothejungle } from "./Welcometothejungle";
+export { default as AccessTime } from './AccessTime';
+export { default as ArrowBack } from './ArrowBack';
+export { default as Calendar } from './Calendar';
+export { default as Close } from './Close';
+export { default as Facebook } from './Facebook';
+export { default as Github } from './Github';
+export { default as Language } from './Language';
+export { default as Link } from './Link';
+export { default as Linkedin } from './Linkedin';
+export { default as Logo } from './Logo';
+export { default as Message } from './Message';
+export { default as Person } from './Person';
+export { default as Rss } from './Rss';
+export { default as Search } from './Search';
+export { default as Tuto } from './Tuto';
+export { default as Twitter } from './Twitter';
+export { default as Welcometothejungle } from './Welcometothejungle';

package/dist/components/Atoms/SyntaxHighlighter/SyntaxHighlighter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SyntaxHighlighterProps as SyntaxHighlighterBaseProps } from 'react-syntax-highlighter';
-import { MarginSystemProps } from '../../../types';
+import type { SyntaxHighlighterProps as SyntaxHighlighterBaseProps } from 'react-syntax-highlighter';
+import type { MarginSystemProps } from '../../../types';
 export type SyntaxHighlighterProps = MarginSystemProps & Pick<SyntaxHighlighterBaseProps, 'language' | 'children'>;
 export declare const SyntaxHighlighter: React.FC<SyntaxHighlighterProps>;

package/dist/components/Atoms/Typography/Heading/Heading.d.ts

@@ -1,6 +1,7 @@
-import { As, AsProps, ColorSystemProps, HeadingSizeType, SpacingSystemProps, TypographySystemProps } from '../../../../types';
-export interface HeadingOptions {
+import * as React from 'react';
+import type { BoxProps } from '../../../../components';
+import type { HeadingSizeType, TypographySystemProps } from '../../../../types';
+export interface HeadingProps extends BoxProps, TypographySystemProps {
     size?: HeadingSizeType;
 }
-export type HeadingProps<T extends As = 'h1'> = AsProps<T> & HeadingOptions & Omit<TypographySystemProps, 'textSize' | 'fontWeight'> & Pick<ColorSystemProps, 'color'> & SpacingSystemProps;
-export declare const Heading: import('../../../../types').ComponentWithAs<"h1", HeadingProps<"h1">>;
+export declare const Heading: import("react-polymorphed").PolyForwardComponent<"h1", HeadingProps, React.ElementType<any>>;

package/dist/components/Atoms/Typography/Text/Text.d.ts

@@ -1,6 +1,7 @@
-import { As, AsProps, ColorSystemProps, HiddenSystemProps, SpacingSystemProps, TextSizeType, TypographySystemProps } from '../../../../types';
-export interface TextOptions {
+import * as React from 'react';
+import type { BoxProps } from '../../../../components';
+import type { TextSizeType, TypographySystemProps } from '../../../../types';
+export interface TextProps extends BoxProps, TypographySystemProps {
     size?: TextSizeType;
 }
-export type TextProps<T extends As = 'p'> = AsProps<T> & TextOptions & Omit<TypographySystemProps, 'textSize'> & Pick<ColorSystemProps, 'color'> & SpacingSystemProps & HiddenSystemProps;
-export declare const Text: import('../../../../types').ComponentWithAs<"p", TextProps<"p">>;
+export declare const Text: import("react-polymorphed").PolyForwardComponent<"p", TextProps, React.ElementType<any>>;

package/dist/components/Molecules/Link/Link.d.ts

@@ -1,7 +1,8 @@
-import { TextProps } from '../../../components';
-import { As, IconNameType } from '../../../types';
-export type LinkOptions = {
+import * as React from 'react';
+import type { IconNameType } from '../../../types';
+export interface LinkProps {
+    className?: string;
     icon?: IconNameType;
-};
-export type LinkProps<T extends As = 'a'> = Omit<TextProps<T>, 'color' | 'underline' | 'fontWeight'> & LinkOptions;
-export declare const Link: import('../../../types').ComponentWithAs<"a", LinkProps<"a">>;
+    children: React.ReactNode;
+}
+export declare const Link: import("react-polymorphed").PolyForwardComponent<"a", LinkProps, React.ElementType<any>>;

package/dist/components/Molecules/Reminder/Reminder.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { BoxProps } from '../../../components';
+import type { BoxProps } from '../../../components';
 export declare const reminderVariantList: readonly ["note", "summary", "info", "tip", "success", "question", "warning", "failure", "danger", "bug", "example", "quote"];
 export type ReminderVariantType = (typeof reminderVariantList)[number];
-export type ReminderOptions = {
+export interface ReminderProps extends BoxProps {
     variant: ReminderVariantType;
     title: React.ReactNode;
-};
-export type ReminderProps = BoxProps & ReminderOptions;
-export declare const Reminder: React.FC<ReminderProps>;
+}
+export declare const Reminder: import("react-polymorphed").PolyForwardComponent<"div", ReminderProps, React.ElementType<any>>;

package/dist/components/Molecules/SearchField/SearchField.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { BoxProps } from '../../../components';
-import { AsProps } from '../../../types';
-export type SearchFieldOptions = {
-    input: React.ComponentPropsWithRef<'input'>;
-    buttonSearch: AsProps<'button'>;
-    buttonClose?: AsProps<'button'>;
-};
-export type SearchFieldProps = BoxProps & SearchFieldOptions;
-export declare const SearchField: import('../../../types').ComponentWithAs<"div", SearchFieldProps>;
+import type { PolymorphicPropsWithoutRef } from 'react-polymorphed';
+import type { BoxProps } from '../../../components';
+export interface SearchFieldProps extends BoxProps {
+    input: Omit<PolymorphicPropsWithoutRef<'input', {}>, keyof BoxProps>;
+    buttonSearch: Omit<PolymorphicPropsWithoutRef<'button', {}>, keyof BoxProps>;
+    buttonClose?: Omit<PolymorphicPropsWithoutRef<'button', {}>, keyof BoxProps>;
+}
+export declare const SearchField: import("react-polymorphed").PolyForwardComponent<"div", SearchFieldProps, React.ElementType<any>>;

package/dist/components/Molecules/TextHighlight/TextHighlight.d.ts

@@ -1,8 +1,7 @@
-import { TextOptions } from '../../../components';
-import { As, AsProps, HiddenSystemProps, MarginSystemProps } from '../../../types';
-export type TextHighlightOptions = {
+import * as React from 'react';
+import type { TextProps } from '../../../components';
+export interface TextHighlightProps extends TextProps {
     text: string;
     textQuery?: string;
-};
-export type TextHighlightProps<T extends As = 'p'> = AsProps<T> & MarginSystemProps & HiddenSystemProps & TextOptions & TextHighlightOptions;
-export declare const TextHighlight: import('../../../types').ComponentWithAs<"p", TextHighlightProps<"p">>;
+}
+export declare const TextHighlight: import("react-polymorphed").PolyForwardComponent<"p", TextHighlightProps, React.ElementType<any>>;

package/dist/constants/systemProps/systemProps.d.ts

@@ -1,2 +1,2 @@
-import { SystemProps } from '../../types';
+import type { SystemProps } from '../../types';
 export declare const systemProps: Record<keyof SystemProps, readonly string[]>;

package/dist/constants/tokenNameList.d.ts

@@ -4,6 +4,6 @@ export declare const spacingTokenNameList: readonly ("0" | "xs" | "xxs-3" | "xxs
 export declare const widthTokenNameList: readonly ("full" | "screen")[];
 export declare const heightTokenNameList: readonly ("full" | "screen")[];
 export declare const fontWeightTokenNameList: readonly ("regular" | "medium" | "bold")[];
-export declare const iconTokenNameList: readonly ("access-time" | "arrow-back" | "calendar" | "close" | "facebook" | "language" | "link" | "linkedin" | "rss" | "message" | "person" | "search" | "twitter" | "welcometothejungle" | "github")[];
+export declare const iconTokenNameList: readonly ("access-time" | "arrow-back" | "calendar" | "close" | "facebook" | "language" | "link" | "linkedin" | "rss" | "message" | "person" | "search" | "twitter" | "welcometothejungle" | "github" | "tuto")[];
 export declare const headingSizeTokenNameList: readonly ("s" | "m" | "l" | "xl")[];
 export declare const textSizeTokenNameList: readonly ("xs" | "s" | "m")[];

package/dist/constants/tokenVariables.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 21 Jun 2023 15:24:05 GMT
+ * Generated on Sun, 29 Oct 2023 19:38:21 GMT
  */
 export declare const tokenVariables: {
     asset: {
@@ -70,6 +70,9 @@ export declare const tokenVariables: {
             github: {
                 value: string;
             };
+            tuto: {
+                value: string;
+            };
         };
     };
     breakpoint: {

package/dist/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './polyRef';

package/dist/helpers/polyRef.d.ts

@@ -0,0 +1,2 @@
+import type { PolyRefFunction } from 'react-polymorphed';
+export declare const polyRef: PolyRefFunction;

package/dist/helpers/stringHelper.d.ts

@@ -1,3 +1,3 @@
-export declare const kebabCase: (str: string) => string;
-export declare const pascalCase: (str: string) => string;
-export declare const capitalize: (str: string) => string;
+export declare const kebabCase: (string_: string) => string;
+export declare const pascalCase: (string_: string) => string;
+export declare const capitalize: (string_: string) => string;

package/dist/helpers/systemPropsHelper/classNamesWithModifiers.d.ts

@@ -1,4 +1,4 @@
-import { TypeWithModifierType } from '../../types';
+import type { TypeWithModifierType } from '../../types';
 export declare const classNamesWithModifiers: <TModifierType extends string, TPropValue extends string | number | boolean>(options: {
     className: string;
     defaultModifier?: string | undefined;

package/dist/helpers/systemPropsHelper/hiddenSystemClassName.d.ts

@@ -1,2 +1,2 @@
-import { HiddenSystemProps } from '../../types';
+import type { HiddenSystemProps } from '../../types';
 export declare const hiddenSystemClassName: <TProps extends HiddenSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/index.d.ts

@@ -8,4 +8,3 @@ export * from './typographySystemClassName';
 export * from './hiddenSystemClassName';
 export * from './omitSystemProps';
 export * from './systemClassName';
-export * from './forwardRef';

package/dist/helpers/systemPropsHelper/systemClassName.d.ts

@@ -1,2 +1,2 @@
-import { SystemProps } from '../../types';
+import type { SystemProps } from '../../types';
 export declare const systemClassName: <TProps extends SystemProps = SystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/typographySystemClassName.d.ts

@@ -1,2 +1,2 @@
-import { TypographySystemProps } from '../../types';
+import type { TypographySystemProps } from '../../types';
 export declare const typographySystemClassName: <TProps extends TypographySystemProps>({ textAlign, ...props }: TProps) => string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export * from './hooks';
+export * from './helpers';
 export * from './types';
-export * from './helpers/systemPropsHelper/forwardRef';