@cambly/syntax-core 9.6.0 → 9.7.0

package/dist/index.d.ts

@@ -1,1250 +1,21 @@
-import * as React$1 from 'react';
-import React__default, { ReactNode, AriaRole, ReactElement, HtmlHTMLAttributes, HTMLInputTypeAttribute } from 'react';
-
-/**
- * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.
- */
-declare const Avatar: ({ src, accessibilityLabel, size, }: {
-    /**
-     * URL of the image to display as the avatar.
-     */
-    src: string;
-    /**
-     * Alt text to use for the image.
-     * This should describe the image to people using screen readers.
-     */
-    accessibilityLabel: string;
-    /**
-     * Size of the avatar.
-     *
-     * * `sm`: 24px
-     * * `md`: 40px
-     * * `lg`: 72px
-     * * `xl`: 128px
-     *
-     * @defaultValue `md`
-     */
-    size?: "sm" | "md" | "lg" | "xl" | undefined;
-}) => JSX.Element;
-
-/**
- * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.
- */
-declare const Badge: ({ icon: Icon, text, color, }: {
-    /**
-     * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)
-     */
-    icon?: React$1.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
-    /**
-     * The text to display inside the badge
-     */
-    text: string;
-    /**
-     * The color of the badge
-     *
-     * @defaultValue "primary700"
-     */
-    color?: "gray200" | "gray900" | "destructive700" | "orange700" | "yellow700" | "success700" | "primary700" | "purple700" | undefined;
-}) => JSX.Element;
-
-declare const colors: readonly ["black", "destructive100", "destructive200", "destructive300", "destructive700", "destructive800", "destructive900", "gray10", "gray100", "gray200", "gray30", "gray60", "gray300", "gray700", "gray80", "gray800", "gray900", "orange100", "orange200", "orange300", "orange700", "orange800", "orange900", "primary100", "primary200", "primary300", "primary700", "primary800", "primary900", "purple100", "purple200", "purple300", "purple700", "purple800", "purple900", "success100", "success200", "success300", "success700", "success800", "success900", "white", "yellow100", "yellow200", "yellow300", "yellow700", "yellow800", "yellow900"];
-
-type AlignItems = "baseline" | "center" | "end" | "start" | "stretch";
-type As = "article" | "aside" | "caption" | "div" | "figcaption" | "figure" | "footer" | "header" | "main" | "nav" | "section" | "summary";
-type Dimension = number | string;
-type Direction = "row" | "column";
-type Display = "none" | "flex" | "block" | "inlineBlock" | "visuallyHidden";
-type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly";
-type Margin = -12 | -11 | -10 | -9 | -8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
-type Padding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial";
-type BoxProps = {
-    /**
-     * The alignment of the box on the cross axis.
-     *
-     * Responsive props:
-     * * `smAlignItems`
-     * * `lgAlignItems`
-     */
-    alignItems?: AlignItems;
-    /**
-     * Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
-     */
-    alignSelf?: "auto" | "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * The underlying DOM element usually set for accessibility or SEO reasons.
-     *
-     * @defaultValue "div"
-     */
-    as?: As;
-    /**
-     * The background color of the box.
-     */
-    backgroundColor?: (typeof colors)[number];
-    /**
-     * The children to be rendered inside the box.
-     */
-    children?: ReactNode;
-    /**
-     * An "escape hatch" used to apply styles not otherwise available on Box.
-     *
-     * Please use this sparingly and only when you have a good reason to.
-     */
-    dangerouslySetInlineStyle?: {
-        __style: Record<string, string | number | null>;
-    };
-    /**
-     * The flex direction of the box.
-     *
-     * Responsive props:
-     * * `smDirection`
-     * * `lgDirection`
-     *
-     * @defaultValue `row`
-     */
-    direction?: Direction;
-    /**
-     * The display property specifies the display behavior (the type of rendering box) of an element.
-     *
-     * Responsive props:
-     * * `smDisplay`
-     * * `lgDisplay`
-     *
-     * @defaultValue `block`
-     */
-    display?: Display;
-    /**
-     * Sets the flex behavior of a flex item.
-     *
-     * * `none`: The item will not grow or shrink
-     * * `shrink`: The item will shrink if necessary (default browser behavior)
-     * * `grow`: The item will grow if necessary
-     *
-     * @defaultValue `shrink`
-     */
-    flex?: "none" | "shrink" | "grow";
-    /**
-     * By default, flex items will all try to fit onto one line. But if you specify `flexWrap="wrap"`, the flex items will wrap onto multiple lines.
-     *
-     * @defaultValue `nowrap`
-     */
-    flexWrap?: "wrap" | "nowrap";
-    /**
-     * The gap between the children of the box.
-     */
-    gap?: Gap;
-    /**
-     * The id of the element.
-     */
-    id?: string;
-    /**
-     * The alignment of the box on the cross axis on lg (960px) or larger viewports.
-     */
-    lgAlignItems?: AlignItems;
-    /**
-     * The flex direction on lg (960px) or larger viewports.
-     */
-    lgDirection?: Direction;
-    /**
-     * The display style on lg (960px) or larger viewports.
-     */
-    lgDisplay?: Display;
-    /**
-     * The alignment of the box on the cross axis on lg (960px) or larger viewports.
-     */
-    lgJustifyContent?: JustifyContent;
-    /**
-     * Margin on lg (960px) or larger viewports.
-     */
-    lgMargin?: Margin;
-    /**
-     * Bottom margin on lg (960px) or larger viewports.
-     */
-    lgMarginBottom?: Margin;
-    /**
-     * Margin to the right in left-to-right languages, and to the left in right-to-left languages on lg (960px) or larger viewports.
-     */
-    lgMarginEnd?: Margin;
-    /**
-     * Margin to the left in left-to-right languages, and to the right in right-to-left languages on lg (960px) or larger viewports.
-     */
-    lgMarginStart?: Margin;
-    /**
-     * Top margin on lg (960px) or larger viewports.
-     */
-    lgMarginTop?: Margin;
-    /**
-     * The padding of the box on lg (960px) or larger viewports.
-     */
-    lgPadding?: Padding;
-    /**
-     * The padding of the box on the x-axis on lg (960px) or larger viewports.
-     */
-    lgPaddingX?: Padding;
-    /**
-     * The padding of the box on the y-axis on lg (960px) or larger viewports.
-     */
-    lgPaddingY?: Padding;
-    /**
-     * The margin of the box.
-     *
-     * Responsive props:
-     * * `smMargin`
-     * * `lgMargin`
-     *
-     * @defaultValue 0
-     */
-    margin?: Margin;
-    /**
-     * Bottom margin of the box.
-     *
-     * Responsive props:
-     * * `smMarginBottom`
-     * * `lgMarginBottom`
-     *
-     */
-    marginBottom?: Margin;
-    /**
-     * Margin to the right in left-to-right languages, and to the left in right-to-left languages.
-     *
-     * Responsive props:
-     * * `smMarginEnd`
-     * * `lgMarginEnd`
-     *
-     */
-    marginEnd?: Margin;
-    /**
-     * Margin to the left in left-to-right languages, and to the right in right-to-left languages.
-     *
-     * Responsive props:
-     * * `smMarginStart`
-     * * `lgMarginStart`
-     *
-     */
-    marginStart?: Margin;
-    /**
-     * Top margin of the box.
-     *
-     * Responsive props:
-     * * `smMarginTop`
-     * * `lgMarginTop`
-     *
-     */
-    marginTop?: Margin;
-    /**
-     * The maximum height of the box.
-     */
-    maxHeight?: Dimension;
-    /**
-     * The maximum width of the box.
-     */
-    maxWidth?: Dimension;
-    /**
-     * The minimum height of the box.
-     */
-    minHeight?: Dimension;
-    /**
-     * The minimum width of the box.
-     */
-    minWidth?: Dimension;
-    /**
-     * The height of the box.
-     */
-    height?: Dimension;
-    /**
-     * The alignment of the box on the main axis.
-     *
-     * Responsive props:
-     * * `smJustifyContent`
-     * * `lgJustifyContent`
-     *
-     * @defaultValue "start"
-     */
-    justifyContent?: JustifyContent;
-    /**
-     * How box behaves when content does not fit in the box on both axes.
-     *
-     * * `visible`
-     * * `hidden`
-     * * `scroll`
-     * * `auto`
-     * * `inherit`
-     * * `initial`
-     *
-     * @defaultValue "visible"
-     */
-    overflow?: Overflow;
-    /**
-     * How box behaves when content does not fit in the box on the X axis.
-     *
-     * * `visible`
-     * * `hidden`
-     * * `scroll`
-     * * `auto`
-     * * `inherit`
-     * * `initial`
-     *
-     * @defaultValue "visible"
-     */
-    overflowX?: Overflow;
-    /**
-     * How box behaves when content does not fit in the box on the Y axis.
-     *
-     * * `visible`
-     * * `hidden`
-     * * `scroll`
-     * * `auto`
-     * * `inherit`
-     * * `initial`
-     *
-     * @defaultValue "visible"
-     */
-    overflowY?: Overflow;
-    /**
-     * The padding of the box.
-     *
-     * Responsive props:
-     * * `smPadding`
-     * * `lgPadding`
-     *
-     * @defaultValue 0
-     */
-    padding?: Padding;
-    /**
-     * The padding of the box on the x-axis.
-     *
-     * Responsive props:
-     * * `smPaddingX`
-     * * `lgPaddingX`
-     *
-     */
-    paddingX?: Padding;
-    /**
-     * The padding of the box on the y-axis.
-     *
-     * Responsive props:
-     * * `smPaddingY`
-     * * `lgPaddingY`
-     */
-    paddingY?: Padding;
-    /**
-     * The position of the box.
-     *
-     * @defaultValue "static"
-     */
-    position?: "absolute" | "fixed" | "relative" | "static" | "sticky";
-    /**
-     * The role attribute of the box.
-     *
-     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the list of valid roles.
-     */
-    role?: AriaRole;
-    /**
-     * Border radius of the box.
-     *
-     * * `none`: 0px
-     * * `sm`: 8px
-     * * `md`: 12px
-     * * `lg`: 16px
-     * * `xl`: 24px
-     * * `full`: 999px
-     *
-     * @defaultValue "none"
-     */
-    rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
-    /**
-     * The alignment of the box on the cross axis on sm (480px) or larger viewports.
-     */
-    smAlignItems?: AlignItems;
-    /**
-     * The flex direction on sm (480px) or larger viewports.
-     */
-    smDirection?: Direction;
-    /**
-     * The display style on sm (480px) or larger viewports.
-     */
-    smDisplay?: Display;
-    /**
-     * The alignment of the box on the main axis on sm (480px) or larger viewports.
-     */
-    smJustifyContent?: JustifyContent;
-    /**
-     * Margin on sm (480px) or larger viewports.
-     */
-    smMargin?: Margin;
-    /**
-     * Bottom margin on sm (480px) or larger viewports.
-     */
-    smMarginBottom?: Margin;
-    /**
-     * Margin to the right in left-to-right languages, and to the left in right-to-left languages on sm (480px) or larger viewports.
-     */
-    smMarginEnd?: Margin;
-    /**
-     * Margin to the left in left-to-right languages, and to the right in right-to-left languages on sm (480px) or larger viewports.
-     */
-    smMarginStart?: Margin;
-    /**
-     * Top margin on sm (480px) or larger viewports.
-     */
-    smMarginTop?: Margin;
-    /**
-     * The padding of the box on sm (480px) or larger viewports.
-     */
-    smPadding?: Padding;
-    /**
-     * The padding of the box on the x-axis on sm (480px) or larger viewports.
-     */
-    smPaddingX?: Padding;
-    /**
-     * The padding of the box on the y-axis on sm (480px) or larger viewports.
-     */
-    smPaddingY?: Padding;
-    /**
-     * The width of the box.
-     */
-    width?: Dimension;
-};
-/**
- * [Box](https://cambly-syntax.vercel.app/?path=/docs/components-box--docs) is primitive design component and is used by lots of other components. It keeps details like spacing, borders and colors consistent across all of Syntax.
- *
- * Passthrough props:
- *  * `aria-*`
- *  * `data-testid`
- */
-declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLDivElement>>;
-
-declare const Color: readonly ["primary", "secondary", "tertiary", "branded", "inverse", "destructive-primary", "destructive-secondary", "destructive-tertiary", "success", "gray200", "gray700", "gray800", "gray900", "white", "inherit"];
-declare const Size: readonly ["sm", "md", "lg"];
-
-type ButtonProps = {
-    /**
-     * Test id for the button
-     */
-    "data-testid"?: string;
-    /**
-     * The text to be displayed inside the button
-     */
-    text: string;
-    /**
-     * The text to be displayed inside the button when it is in a loading state
-     */
-    loadingText?: string;
-    /**
-     * The color of the button
-     *
-     * @defaultValue "primary"
-     */
-    color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inverse";
-    /**
-     * The size of the button
-     *
-     * * `sm`: 32px
-     * * `md`: 40px
-     * * `lg`: 48px
-     *
-     * @defaultValue "md"
-     */
-    size?: (typeof Size)[number];
-    /**
-     * The label to be used for accessibility
-     */
-    accessibilityLabel?: string;
-    /**
-     * If `true`, the button will be disabled
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the button will be in a loading state
-     *
-     * @defaultValue false
-     */
-    loading?: boolean;
-    /**
-     * If `true`, the button will take up the full width of its container
-     *
-     * @defaultValue false
-     */
-    fullWidth?: boolean;
-    /**
-     * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-     */
-    startIcon?: React__default.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-     */
-    endIcon?: React__default.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * The callback to be called when the button is clicked
-     */
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The tooltip to be displayed when the user hovers over the button
-     */
-    tooltip?: string;
-    /**
-     * The type you want to set for the primitive <button/>
-     */
-    type?: "button" | "submit" | "reset";
-};
-/**
- * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- */
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-/**
- * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.
- */
-declare const ButtonGroup: ({ orientation, size, children, }: {
-    /**
-     * The orientation of the button group
-     *
-     * @defaultValue "horizontal"
-     */
-    orientation?: "horizontal" | "vertical" | undefined;
-    /**
-     * The size of the button group defines the spacing between each button
-     *
-     * * `sm`: 8px
-     * * `md`: 12px
-     * * `lg`: 16px
-     *
-     * @defaultValue "md"
-     */
-    size?: "sm" | "md" | "lg" | undefined;
-    /**
-     * Buttons to be rendered inside the button group
-     */
-    children?: ReactNode;
-}) => ReactElement;
-
-declare const DeprecatedCardSizes: readonly ["sm", "lg"];
-type CardType = {
-    /**
-     * Test id for the button
-     */
-    "data-testid"?: string;
-    /**
-     * The child components to render within Card.
-     */
-    children: JSX.Element;
-    /**
-     * The size of the card
-     *
-     * `sm`: 352px
-     * `lg`: 744px
-     *
-     * @deprecated Card width should be controlled by the parent container
-     * @defaultValue `undefined`
-     */
-    size?: (typeof DeprecatedCardSizes)[number];
-};
-/**
- * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.
- */
-declare function Card({ children, size, "data-testid": dataTestId, }: CardType): JSX.Element;
-
-/**
- * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.
- */
-declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled: disabledProp, size, label, error, onChange, }: {
-    /**
-     * Whether or not the box has been clicked
-     *
-     * @defaultValue false
-     */
-    checked: boolean;
-    /**
-     * Test id for the checkbox
-     */
-    "data-testid"?: string | undefined;
-    /**
-     * The callback to be called when the checkbox value changes
-     */
-    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Whether or not the box is disabled
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean | undefined;
-    /**
-     * The size of the checkbox and icon
-     *
-     * * `sm`: 16px
-     * * `md`: 24px
-     *
-     * @defaultValue "md"
-     */
-    size?: "sm" | "md" | undefined;
-    /**
-     * The text accompanying the checkbox
-     */
-    label: string;
-    /**
-     * Whether or not there is an error with the input
-     *
-     * @defaultValue false
-     */
-    error?: boolean | undefined;
-}) => ReactElement;
-
-type ChipProps = {
-    /**
-     * Sets the initial status of this chip component.
-     * * `true` will display a grey chip.
-     * * `false` will display a premium800 color chip.
-     *
-     * @defaultValue "false"
-     */
-    selected?: boolean;
-    /**
-     * Test id for the button
-     */
-    "data-testid"?: string;
-    /**
-     * Size of the chip.
-     *
-     * * `sm`: 32px
-     * * `lg`: 48px
-     *
-     * @defaultValue sm
-     */
-    size?: "sm" | "lg";
-    /**
-     * The text to be displayed on the chip
-     */
-    text: string;
-    /**
-     * The callback to be called when the chip is clicked
-     */
-    onChange: React__default.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The icon to be displayed.
-     */
-    icon?: React__default.ComponentType<{
-        className?: string;
-    }>;
-};
-/**
- * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.
- */
-declare const Chip: React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-/**
- * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.
- */
-declare function Divider(): React.ReactElement;
-declare namespace Divider {
-    var displayName: string;
-}
-
-/**
- * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.
- */
-declare const Heading: ({ align, as, children, color, "data-testid": dataTestId, lineClamp, size, }: {
-    /**
-     * Aligns the text to the left, right, or center of the container.
-     * * `start` and `end` will align the text to the left or right of the container depending on the locale.
-     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).
-     *
-     * @defaultValue "start"
-     */
-    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
-    /**
-     * DOM element to render as.
-     *
-     * @defaultValue "h1"
-     */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-    /**
-     * The text to be rendered
-     */
-    children?: ReactNode;
-    /**
-     * The color of the text.
-     *
-     * @defaultValue "gray900"
-     */
-    color?: "gray200" | "gray900" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inverse" | "gray700" | "gray800" | "white" | "inherit" | undefined;
-    /**
-     * Test id for the text.
-     */
-    "data-testid"?: string | undefined;
-    /**
-     * The number of lines we should truncate the text at
-     */
-    lineClamp?: number | undefined;
-    /**
-     * Size of the text.
-     *
-     * * `500`: 20px
-     * * `600`: 28px
-     * * `700`: 40px
-     * * `800`: 64px
-     *
-     * @defaultValue 500
-     */
-    size?: 500 | 600 | 700 | 800 | undefined;
-}) => ReactElement;
-
-type IconButtonProps = {
-    /**
-     * The color of the button
-     *
-     * @defaultValue "primary"
-     */
-    color?: (typeof Color)[number];
-    /**
-     * Test id for the button
-     */
-    "data-testid"?: string;
-    /**
-     * The size of the button
-     *
-     * * `sm`: 32px
-     * * `md`: 40px
-     * * `lg`: 48px
-     *
-     * @defaultValue "md"
-     */
-    size?: (typeof Size)[number];
-    /**
-     * The label to be used for accessibility
-     */
-    accessibilityLabel: string;
-    /**
-     * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-     */
-    icon: React__default.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * If `true`, the button will be disabled
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * The callback to be called when the button is clicked
-     */
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The tooltip to be displayed when the user hovers over the button
-     */
-    tooltip?: string;
-};
-/**
- * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.
- */
-declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-type LinkButtonProps = {
-    /**
-     * Test id for the button
-     */
-    "data-testid"?: string;
-    /**
-     * The text to be displayed inside the button
-     */
-    text: string;
-    /**
-     * The link that the LinkButton should route to.
-     *
-     */
-    href?: string;
-    /**
-     * The target attribute specifies where to open the linked document.
-     *
-     */
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    /**
-     * The rel attribute specifies the relationship between the document and the link.
-     *
-     */
-    rel?: HtmlHTMLAttributes<HTMLAnchorElement>["rel"];
-    /**
-     * The color of the button
-     *
-     * @defaultValue "primary"
-     */
-    color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success";
-    /**
-     * The size of the button
-     *
-     * * `sm`: 32px
-     * * `md`: 40px
-     * * `lg`: 48px
-     *
-     * @defaultValue "md"
-     */
-    size?: (typeof Size)[number];
-    /**
-     * If `true`, the button will take up the full width of its container
-     *
-     * @defaultValue false
-     */
-    fullWidth?: boolean;
-    /**
-     * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-     */
-    startIcon?: React__default.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-     */
-    endIcon?: React__default.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).
-     */
-    onClick?: React__default.MouseEventHandler<HTMLAnchorElement>;
-};
-/**
- * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a "variation" of Button that should look identical to Button, but should be used to render links instead.
- */
-declare const LinkButton: React__default.ForwardRefExoticComponent<LinkButtonProps & React__default.RefAttributes<HTMLAnchorElement>>;
-
-declare const sizeWidth: {
-    readonly sm: 400;
-    readonly lg: 600;
-};
-/**
- * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.
- *
- ```
-  const [showModal, setShowModal] = useState(false)
-
-  return (
-    <>
-      {showModal && <Modal
-        header="header text"
-        onDismiss={() => setShowModal(false)}
-        footer={
-          <>
-            <Button
-              text="Cancel"
-              color="secondary"
-              onClick={() => {}}
-            />
-            <Button
-              text="Confirm"
-              onClick={() => {}}
-            />
-          </>
-        }
-      >
-        <Typography>
-          Body text goes here!
-        </Typography>
-      </Modal> }
-    </>
-  )
-  ```
- */
-declare function Modal({ header, children, image, onDismiss, footer, accessibilityCloseLabel, size, zIndex, "data-testid": dataTestId, }: {
-    /**
-     * The modal's main content. Should typically take in `Typography`'d text.
-     */
-    children: JSX.Element;
-    /**
-     * The header inside a modal as a string.
-     */
-    header: string;
-    /**
-     * What the X button (or clicking out of the modal area) does.
-     * Typically used for closing the Modal
-     */
-    onDismiss: () => void;
-    /**
-     * The optional image rendered above the Modal.
-     * Image size should be 400w x 200h.
-     * If images aren't that sized, should ask design to give another image.
-     */
-    image?: JSX.Element;
-    /**
-     * The footer for the bottom area of the Modal. Typically used for rendering buttons.
-     * * Use Syntax `Button` and pass it into footer.
-     * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)
-     * * If two(2) buttons, put primary button _second_.
-     *
-        <>
-          <Button
-            text="Cancel"
-            color="secondary"
-            onClick={() => {}}
-          />
-          <Button
-            text="Confirm"
-            onClick={() => {}}
-          />
-        </>
-     */
-    footer?: JSX.Element;
-    /**
-     * The accessibilty text on the close button.
-     * (Sets the aria-label of the button)
-     *
-     *
-     * @defaultValue close modal
-     */
-    accessibilityCloseLabel?: string;
-    /**
-     * The size of the card
-     *
-     * * `sm`: 400px
-     * * `lg`: 600px
-     *
-     *
-     * @defaultValue sm
-     */
-    size?: keyof typeof sizeWidth;
-    /**
-     * The z-index for the modal.
-     * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.
-     *
-     * @defaultValue 0
-     */
-    zIndex?: number;
-    /**
-     * Test id for the modal
-     */
-    "data-testid"?: string;
-}): ReactElement;
-declare namespace Modal {
-    var displayName: string;
-}
-
-/**
- * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text
- */
-declare const RadioButton: ({ checked, "data-testid": dataTestId, disabled: disabledProp, error, id, label, name, onChange, size, value, }: {
-    /**
-     * Whether or not the radio button is checked
-     *
-     * @defaultValue false
-     */
-    checked?: boolean | undefined;
-    /**
-     * Test id for the radio button
-     */
-    "data-testid"?: string | undefined;
-    /**
-     * Whether or not the radio button is disabled
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Whether to show error color schema
-     *
-     * @defaultValue false
-     */
-    error?: boolean | undefined;
-    /**
-     * Id for the the radio button
-     */
-    id?: string | undefined;
-    /**
-     * Value to show end user
-     */
-    label: string;
-    /**
-     * The name of the grouping the radio buttons are in
-     */
-    name: string;
-    /**
-     * The callback to be called when the radio button is clicked
-     */
-    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Size of the components
-     *
-     * * `sm`: 16px
-     * * `md`: 24px
-     *
-     * @defaultValue "md"
-     */
-    size?: "sm" | "md" | undefined;
-    /**
-     * Value of the selected radio option
-     */
-    value: string | number;
-}) => ReactElement;
-
-/**
- * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.
- */
-declare function SelectList({ children, "data-testid": dataTestId, disabled: disabledProp, errorText, helperText, id, label, onChange, onClick, placeholderText, selectedValue, size, }: {
-    /**
-     * One or more SelectList.Option components.
-     */
-    children: ReactNode;
-    /**
-     * Test id for the select element
-     */
-    "data-testid"?: string;
-    /**
-     * true if the select dropdown is disabled
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * Callback to be called when select is clicked
-     */
-    onClick?: React__default.MouseEventHandler<HTMLSelectElement>;
-    /**
-     * Text shown below select box if there is an input error.
-     */
-    errorText?: string;
-    /**
-     * Text shown below select box
-     */
-    helperText?: string;
-    /**
-     * Id of the select element
-     */
-    id?: string;
-    /**
-     * Text shown above select box
-     */
-    label: string;
-    /**
-     * The callback to be called when an option is selected
-     */
-    onChange: React__default.ChangeEventHandler<HTMLSelectElement>;
-    /**
-     * Text showing in select box if no option has been chosen.
-     * We should always have a placeholder unless there is a default option selected
-     */
-    placeholderText?: string;
-    /**
-     * Value of the currently selected option
-     */
-    selectedValue?: string;
-    /**
-     * Size of the select box
-     * * `sm`: 32px
-     * * `md`: 40px
-     * * `lg`: 48px
-     *
-     * @defaultValue "md"
-     */
-    size?: "sm" | "md" | "lg";
-}): ReactElement;
-declare namespace SelectList {
-    var Option: ({ "data-testid": dataTestId, value, label, disabled, }: {
-        "data-testid"?: string | undefined;
-        value: string;
-        label: string;
-        disabled?: boolean | undefined;
-    }) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
-}
-
-type TapAreaProps = {
-    /**
-     * The children to be rendered inside the tap area.
-     */
-    children?: ReactNode;
-    /**
-     * The label to be used for accessibility
-     */
-    accessibilityLabel?: string;
-    /**
-     * Test id for the tap area
-     */
-    "data-testid"?: string;
-    /**
-     * If `true`, the tap area will be disabled
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the tap area will be full width
-     */
-    fullWidth?: boolean;
-    /**
-     * The callback to be called when the tap area is clicked
-     */
-    onClick: (event: React__default.SyntheticEvent<HTMLDivElement>) => void;
-    /**
-     * Border radius of the tap area.
-     *
-     * * `none`: 0px
-     * * `sm`: 8px
-     * * `md`: 12px
-     * * `lg`: 16px
-     * * `xl`: 32px
-     * * `full`: 999px
-     *
-     * @defaultValue "none"
-     */
-    rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
-    /**
-     * The tab index of the tap area
-     */
-    tabIndex?: 0 | -1;
-};
-/**
- * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.
- */
-declare const TapArea: React__default.ForwardRefExoticComponent<TapAreaProps & React__default.RefAttributes<HTMLDivElement>>;
-
-/**
- * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.
- */
-declare function TextField({ autoComplete, "data-testid": dataTestId, disabled: disabledProp, errorText, helperText, id, label, onChange, placeholder, size, type, value, }: {
-    /**
-     * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
-     *
-     * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed
-     */
-    autoComplete?: "current-password" | "new-password" | "off" | "on" | "email";
-    /**
-     * A data-testid to make querying for the TextField easier.
-     */
-    "data-testid"?: string;
-    /**
-     * If true, the TextField will be disabled.
-     *
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * Text shown below TextField if there is an input error.
-     */
-    errorText?: string;
-    /**
-     * Informative helper text shown below TextField
-     */
-    helperText?: string;
-    /**
-     * TextField id, if not provided, a unique id will be generated
-     */
-    id?: string;
-    /**
-     * TextField visible label
-     */
-    label: string;
-    /**
-     * The callback to be called the input changes
-     */
-    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Optional TextField placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Size of the TextField
-     * * `sm`: 32px
-     * * `md`: 40px
-     * * `lg`: 48px
-     *
-     * @defaultValue "md"
-     */
-    size?: "sm" | "md" | "lg";
-    /**
-     * Input type of the TextField
-     *
-     * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)
-     */
-    type?: HTMLInputTypeAttribute;
-    /**
-     * Value of the TextField
-     */
-    value: string;
-}): ReactElement;
-
-/**
- * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.
- */
-declare const Typography: ({ align, as, children, color, "data-testid": dataTestId, inline, lineClamp, size, tooltip, transform, underline, weight, }: {
-    /**
-     * Aligns the text to the left, right, or center of the container.
-     * * `start` and `end` will align the text to the left or right of the container depending on the locale.
-     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).
-     *
-     * @defaultValue "start"
-     */
-    align?: "start" | "end" | "forceLeft" | "center" | "forceRight" | undefined;
-    /**
-     * DOM element to render as.
-     *
-     * @defaultValue "div"
-     */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | undefined;
-    /**
-     * The text to be rendered
-     */
-    children?: ReactNode;
-    /**
-     * The color of the text.
-     *
-     * @defaultValue "gray900"
-     */
-    color?: "gray200" | "gray900" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inverse" | "gray700" | "gray800" | "white" | "inherit" | undefined;
-    /**
-     * Test id for the text
-     */
-    "data-testid"?: string | undefined;
-    /**
-     * Whether the text should flow inline with other elements.
-     *
-     * @defaultValue false
-     */
-    inline?: boolean | undefined;
-    /**
-     * The number of lines we should truncate the text at
-     */
-    lineClamp?: number | undefined;
-    /**
-     * Size of the text.
-     *
-     * * `100`: 12px
-     * * `200`: 14px
-     * * `300`: 16px
-     * * `500`: 20px
-     * * `600`: 28px
-     * * `700`: 40px
-     * * `800`: 64px
-     *
-     * @defaultValue 200
-     */
-    size?: 500 | 600 | 700 | 800 | 100 | 200 | 300 | undefined;
-    /**
-     * The tooltip to be displayed when the user hovers the text
-     */
-    tooltip?: string | undefined;
-    /**
-     * Whether the text should be transformed to uppercase.
-     *
-     * @defaultValue "none"
-     */
-    transform?: "none" | "uppercase" | undefined;
-    /**
-     * Whether the text has an underline.
-     *
-     * @defaultValue false
-     */
-    underline?: boolean | undefined;
-    /**
-     * Indicates the boldness of the text.
-     *
-     * @defaultValue "regular"
-     */
-    weight?: "regular" | "interactive" | "semiBold" | "bold" | "heavy" | undefined;
-}) => ReactElement;
-
-export { Avatar, Badge, Box, Button, ButtonGroup, Card, Checkbox, Chip, Divider, Heading, IconButton, LinkButton, Modal, RadioButton, SelectList, TapArea, TextField, Typography };
+export { default as Avatar } from './Avatar/Avatar.js';
+export { default as Badge } from './Badge/Badge.js';
+export { default as Box } from './Box/Box.js';
+export { default as Button } from './Button/Button.js';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.js';
+export { default as Card } from './Card/Card.js';
+export { default as Checkbox } from './Checkbox/Checkbox.js';
+export { default as Chip } from './Chip/Chip.js';
+export { default as Divider } from './Divider/Divider.js';
+export { default as Heading } from './Heading/Heading.js';
+export { default as IconButton } from './IconButton/IconButton.js';
+export { default as LinkButton } from './LinkButton/LinkButton.js';
+export { default as Modal } from './Modal/Modal.js';
+export { default as RadioButton } from './RadioButton/RadioButton.js';
+export { default as SelectList } from './SelectList/SelectList.js';
+export { default as TapArea } from './TapArea/TapArea.js';
+export { default as TextField } from './TextField/TextField.js';
+export { default as Typography } from './Typography/Typography.js';
+import 'react';
+import './colors/allColors.js';
+import './constants.js';