@hyphen/hyphen-components 7.3.1 → 7.3.3

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

@@ -1,247 +0,0 @@
-import * as CSS from 'csstype';
-import { BaseSpacing, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize, BackgroundColor, BorderColor, CssWhiteSpaceValue, CssWordBreakValue, TextWrap, TextTransform } from '../../types';
-import { CSSProperties, FC, ReactNode } from 'react';
-import { KnownKeys } from '../../types/lib.types';
-export type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
-export interface BoxProps {
-    /**
-     * The element type to be rendered.
-     */
-    as?: string;
-    /**
-     * How to align the contents along the cross axis.
-     */
-    alignItems?: CssAlignItemsValue | ResponsiveProp<CssAlignItemsValue>;
-    /**
-     * How to align the contents when there is extra space in the cross axis.
-     * This property has no effect when there is only one line of flex items.
-     */
-    alignContent?: CssAlignContentValue | ResponsiveProp<CssAlignContentValue>;
-    /**
-     * How to align along the cross axis when contained in a Box.
-     * This allows the default alignment (or the one specified by `align`) to be overridden for the individual Box.
-     */
-    alignSelf?: CssAlignItemsValue | ResponsiveProp<CssAlignItemsValue>;
-    /**
-     * Any valid background color token, or a `url()` for an image
-     */
-    background?: BackgroundColor;
-    /**
-     * Any valid border color token
-     */
-    borderColor?: BorderColor;
-    /**
-     * Width of the Box's border
-     * Can be a single [border width token](/?path=/docs/foundation-design-tokens--docs#border-width).
-     * Can also be a string of [border width tokens](/?path=/docs/foundation-design-tokens--docs#border-width)
-     * that models itself after the css shorthand property,
-     * where you can set the border width on all four sides of an element.
-     * e.g: "0 sm xs 0" --> top: 0, right: sm, bottom: xs, left: 0;
-     */
-    borderWidth?: BorderSize | string | ResponsiveProp<BorderSize | string>;
-    /**
-     * Additional class names to add
-     */
-    className?: string;
-    /**
-     * The amount of spacing (implemented as margin) between child elements.
-     * Can be a single [spacing value](/?path=/docs/foundation-design-tokens--docs#spacing).
-     * NOTE: this prop is incompatible with reverse flex direction values (row-reverse, column-reverse).
-     * For grid and flex layouts, use 'gap' instead.
-     */
-    childGap?: SpacingSize | ResponsiveProp<SpacingSize>;
-    /**
-     * The box's contents
-     */
-    children?: ReactNode;
-    /**
-     * A color token identifier to use for the text color.
-     */
-    color?: FontColor;
-    /**
-     * Sets the gaps (gutters) between columns.
-     */
-    columnGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
-    /**
-     * Cursor style. Use any standard CSS value.
-     */
-    cursor?: CSS.Property.Cursor;
-    /**
-     * Sets how flex items are placed inside the Box, defining the main axis and the direction
-     * NOTE: reverse directions are incompatible with the `childGap` prop.
-     */
-    direction?: CssFlexDirectionValue | ResponsiveProp<CssFlexDirectionValue>;
-    /**
-     * Display property. Only select values supported.
-     */
-    display?: CssDisplayValue | ResponsiveProp<CssDisplayValue>;
-    /**
-     * Can be used as shorthand for the flexbox css properties `flex-grow`, `flex-shrink`, `flex-basis`
-     */
-    flex?: CssFlexValue | ResponsiveProp<CssFlexValue>;
-    /**
-     * Pass style modifiers for focus states. The following properties can be modified on focus.
-     * `* background`
-     * `* borderColor`
-     * `* borderWidth`
-     * `* color`
-     * `* shadow`
-     */
-    focus?: {
-        background?: BoxProps['background'];
-        borderColor?: BoxProps['borderColor'];
-        borderWidth?: BoxProps['borderWidth'];
-        color?: BoxProps['color'];
-        shadow?: BoxProps['shadow'];
-    };
-    /**
-     * The [font family token](/?path=/docs/foundation-design-tokens--docs#font-family) identifier for the Box's text
-     */
-    fontFamily?: FontFamily | ResponsiveProp<FontFamily>;
-    /**
-     * The [font size token](/?path=/docs/foundation-design-tokens--docs#font-size) identifier for the Box's text
-     */
-    fontSize?: FontSize | ResponsiveProp<FontSize>;
-    /**
-     * The [font weight token](/?path=/docs/design-tokens-design-tokens--page#font-weight) identifier for the Box's text
-     */
-    fontWeight?: FontWeight | ResponsiveProp<FontWeight>;
-    /**
-     * The height of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [height token](/?path=/docs/foundation-design-tokens--docs#height)
-     */
-    height?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * Pass style modifiers for hover states. The following properties can be modified on hover:
-     * `* background`
-     * `* borderColor`
-     * `* borderWidth`
-     * `* color`
-     * `* fontSize`
-     * `* shadow`
-     */
-    hover?: {
-        background?: BoxProps['background'];
-        borderColor?: BoxProps['borderColor'];
-        borderWidth?: BoxProps['borderWidth'];
-        color?: BoxProps['color'];
-        fontSize?: BoxProps['fontSize'];
-        shadow?: BoxProps['shadow'];
-    };
-    /**
-     * Sets the gaps (gutters) between rows and columns.
-     */
-    gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
-    /**
-     * How space between and around content items is distributed along the main-axis a flex Box
-     */
-    justifyContent?: CssJustifyContentValue | ResponsiveProp<CssJustifyContentValue>;
-    /**
-     * Amount of space around the element.
-     * Can be a single [spacing value](/?path=/docs/foundation-design-tokens--docs#spacing).
-     * Can also be a string of [spacing value](/?path=/docs/foundation-design-tokens--docs#spacing)
-     * that models itself after the css shorthand property,
-     * where you can set the margin area on all four sides of an element. It is shorthand for top, right, bottom, left.
-     */
-    margin?: BaseSpacing | ResponsiveProp<BaseSpacing>;
-    /**
-     * The maximum height of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [height token](/?path=/docs/foundation-design-tokens--docs#height)
-     */
-    maxHeight?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * The minimum height of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [height token](/?path=/docs/foundation-design-tokens--docs#height)
-     */
-    minHeight?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * The maximum width of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
-     */
-    maxWidth?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * The minimum width of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
-     */
-    minWidth?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * The css overflow behavior of the Box
-     */
-    overflow?: CssOverflowValue | ResponsiveProp<CssOverflowValue>;
-    /**
-     * Amount of space within the element around the Box contents.
-     * Can be a single [spacing value](/?path=/docs/foundation-design-tokens--docs#spacing).
-     * Can also be a string of [spacing value](/?path=/docs/foundation-design-tokens--docs#spacing)
-     * that models itself after the css shorthand property,
-     * where you can set the margin area on all four sides of an element. It is shorthand for top, right, bottom, left.
-     */
-    padding?: BaseSpacing | ResponsiveProp<BaseSpacing>;
-    /**
-     * CSS position property.
-     */
-    position?: CSS.Property.Position | ResponsiveProp<CSS.Property.Position>;
-    /**
-     * Set the radius of all corners
-     */
-    radius?: BorderRadiusSize | ResponsiveProp<BorderRadiusSize>;
-    /**
-     * Sets the gaps (gutters) between rows.
-     */
-    rowGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
-    /**
-     * The size of the drop shadow applied to the Box
-     */
-    shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
-    /**
-     * CSS Style object
-     */
-    style?: CSSProperties;
-    /**
-     * the alignment of the text
-     */
-    textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
-    /**
-     * Control the text transformation of the Box
-     */
-    textTransform?: TextTransform | ResponsiveProp<TextTransform>;
-    /**
-     * Control the text wrapping behavior of the Box
-     */
-    textWrap?: TextWrap | ResponsiveProp<TextWrap>;
-    /**
-     * Control the whitespace behavior of the Box
-     */
-    whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
-    /**
-     * Control the word break behavior of the Box
-     */
-    wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
-    /**
-     * By default, a Box's items will all try to fit onto one line.
-     * Change that and allow the items to wrap as needed wrap
-     */
-    wrap?: boolean | ResponsiveProp<boolean>;
-    /**
-     * The width of the element. Can be given a standard css value (px, rem, em, %),
-     * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
-     */
-    width?: DimensionSize | ResponsiveProp<DimensionSize> | string;
-    /**
-     * Control the word break behavior of the Box
-     */
-    /**
-     * ZIndex value for the element. Can be one of the predetermined token values.
-     * Can be responsive.
-     */
-    zIndex?: ZIndexSize | ResponsiveProp<ZIndexSize>;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-/**
- * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
- * elements.
- */
-export declare const Box: FC<BoxProps>;
-export declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];

package/dist/components/Box/Box.stories.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react-vite';
-import { Box } from './Box';
-declare const meta: Meta<typeof Box>;
-export default meta;
-export declare const Overview: () => React.JSX.Element;
-export declare const Background: () => React.JSX.Element;
-export declare const Border: () => React.JSX.Element;
-export declare const Gap: () => React.JSX.Element;
-export declare const ChildGap: () => React.JSX.Element;
-export declare const FlexAuto: () => React.JSX.Element;
-export declare const FlexDirection: () => React.JSX.Element;
-export declare const FlexShrinkGrow: () => React.JSX.Element;
-export declare const FlexJustify: () => React.JSX.Element;
-export declare const FlexAlign: () => React.JSX.Element;
-export declare const FlexAlignContent: () => React.JSX.Element;
-export declare const FontColor: () => React.JSX.Element;
-export declare const FontSizes: () => React.JSX.Element;
-export declare const FontWeights: () => React.JSX.Element;
-export declare const FontFamily: () => React.JSX.Element;
-export declare const TextAlign: () => React.JSX.Element;
-export declare const Margin: () => React.JSX.Element;
-export declare const Padding: () => React.JSX.Element;
-export declare const Radius: () => React.JSX.Element;
-export declare const Shadow: () => React.JSX.Element;
-export declare const WhiteSpace: () => React.JSX.Element;
-export declare const Width: () => React.JSX.Element;
-export declare const WidthTokens: () => React.JSX.Element;
-export declare const WidthPercentages: () => React.JSX.Element;
-export declare const WidthMax: () => React.JSX.Element;
-export declare const WidthMin: () => React.JSX.Element;
-export declare const WordBreak: () => React.JSX.Element;
-export declare const Height: () => React.JSX.Element;
-export declare const HeightTokens: () => React.JSX.Element;
-export declare const HeightPercentages: () => React.JSX.Element;
-export declare const HeightMax: () => React.JSX.Element;
-export declare const HeightMin: () => React.JSX.Element;
-export declare const Overflow: () => React.JSX.Element;
-export declare const Cursor: () => React.JSX.Element;
-export declare const Position: () => React.JSX.Element;
-export declare const Hover: () => React.JSX.Element;
-export declare const Focus: () => React.JSX.Element;
-export declare const Responsive: () => React.JSX.Element;
-export declare const Omit: () => React.JSX.Element;
-export declare const TextWrap: () => React.JSX.Element;
-export declare const TextTransform: () => React.JSX.Element;

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

@@ -1,3 +0,0 @@
-import { ButtonSize, ButtonVariant } from './Button';
-export declare const BUTTON_VARIANTS: ButtonVariant[];
-export declare const BUTTON_SIZES: ButtonSize[];

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

@@ -1,53 +0,0 @@
-import { BoxShadowSize, IconName, ResponsiveProp } from '../../types';
-import React, { ButtonHTMLAttributes } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export interface BaseButtonProps {
-    /**
-     * The button element to render as. Useful for when you want to render a Link that looks like a button.
-     */
-    asChild?: boolean;
-    /**
-     * Additional ClassNames to add to button.
-     */
-    className?: string;
-    /**
-     * Button takes up the full width of its parent container.
-     */
-    fullWidth?: boolean;
-    /**
-     * Icon displayed before the button label
-     */
-    iconPrefix?: IconName;
-    /**
-     * Icon displayed after the button label
-     */
-    iconSuffix?: IconName;
-    /**
-     * Disables the button
-     */
-    isDisabled?: boolean;
-    /**
-     * Displays a loading spinner and disables the button
-     */
-    isLoading?: boolean;
-    /**
-     * Size of the drop shadow applied to the Box
-     */
-    shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
-    /**
-     * Size of the button.
-     */
-    size?: ButtonSize | ResponsiveProp<ButtonSize>;
-    /**
-     * The type of button
-     *
-     */
-    type?: 'button' | 'submit' | 'reset';
-    /**
-     * Visual variant of the button
-     */
-    variant?: ButtonVariant;
-}
-export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const Button: React.ForwardRefExoticComponent<BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,16 +0,0 @@
-import { Button } from './Button';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const Default: Story;
-export declare const AsChild: Story;
-export declare const Variants: Story;
-export declare const Sizes: Story;
-export declare const FullWidth: Story;
-export declare const Icons: Story;
-export declare const IconButton: Story;
-export declare const Loading: Story;
-export declare const Disabled: Story;
-export declare const Shadow: Story;
-export declare const InlineLink: Story;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import { DayPickerProps, Matcher } from 'react-day-picker';
-import 'react-day-picker/style.css';
-export type CalendarProps = DayPickerProps;
-declare function Calendar({ captionLayout, className, ...props }: CalendarProps): React.JSX.Element;
-export { Calendar };
-export type { Matcher };

package/dist/components/Calendar/Calendar.stories.d.ts

@@ -1,12 +0,0 @@
-import { Calendar } from './Calendar';
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: Meta<typeof Calendar>;
-export default meta;
-export declare const BasicUsage: () => React.JSX.Element;
-export declare const RangeSelection: () => React.JSX.Element;
-export declare const MultipleSelection: () => React.JSX.Element;
-export declare const Dropdown: () => React.JSX.Element;
-export declare const FooterContent: () => React.JSX.Element;
-export declare const DateInput: () => React.JSX.Element;
-export declare const DateRangeInput: () => React.JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -1,17 +0,0 @@
-import { BoxProps } from '../Box/Box';
-import { CardFooter, CardHeader, CardSection } from './components';
-import React, { ReactNode } from 'react';
-export interface CardProps extends BoxProps {
-    /**
-     * The Card's contents.
-     */
-    children?: ReactNode;
-}
-export declare const CardBaseComponent: React.FC<CardProps>;
-export interface CardStatic {
-    Header: typeof CardHeader;
-    Section: typeof CardSection;
-    Footer: typeof CardFooter;
-}
-export type CardWithStaticComponents = typeof CardBaseComponent & CardStatic;
-export declare const Card: CardWithStaticComponents;

package/dist/components/Card/Card.stories.d.ts

@@ -1,8 +0,0 @@
-import { Card } from './Card';
-import type { Meta } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: Meta<typeof Card>;
-export default meta;
-export declare const OverviewCard: () => React.JSX.Element;
-export declare const ExampleSignUpForm: () => React.JSX.Element;
-export declare const ExampleFullBleedPhotos: () => React.JSX.Element;

package/dist/components/Card/components/CardFooter/CardFooter.d.ts

@@ -1,13 +0,0 @@
-import { BoxProps } from '../../../Box/Box';
-import { FC, ReactNode } from 'react';
-export interface CardFooterProps extends BoxProps {
-    /**
-     * Contents of the Footer.
-     */
-    children?: ReactNode;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const CardFooter: FC<CardFooterProps>;

package/dist/components/Card/components/CardHeader/CardHeader.d.ts

@@ -1,13 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { BoxProps } from '../../../Box/Box';
-export interface CardHeaderProps extends BoxProps {
-    /**
-     * The title of the card
-     */
-    title?: ReactNode;
-    /**
-     * Description of the card, or element below the title
-     */
-    description?: ReactNode;
-}
-export declare const CardHeader: FC<CardHeaderProps>;

package/dist/components/Card/components/CardSection/CardSection.d.ts

@@ -1,46 +0,0 @@
-import { BoxProps } from '../../../Box/Box';
-import { FC, ReactNode } from 'react';
-export interface CardSectionProps extends BoxProps {
-    /**
-     * Any valid background color token, or a `url()` for an image
-     */
-    background?: BoxProps['background'];
-    /**
-     * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-     * Any valid border color token
-     * Or a responsive prop with borderColor for each breakpoint.
-     */
-    borderColor?: BoxProps['borderColor'];
-    /**
-     * If defined as a prop, this value will take higher precedence than the corresponding component design token value
-     * Width of the section's border
-     * Can be a single [border width token](/?path=/docs/foundation-design-tokens--docs#border-width).
-     * Can also be a string of [border width tokens](/?path=/docs/foundation-design-tokens--docs#border-width)
-     * that models itself after the css shorthand property,
-     * where you can set the border width on all four sides of an element.
-     * e.g: "0 sm xs 0" --> top: 0, right: sm, bottom: xs, left: 0;
-     */
-    borderWidth?: BoxProps['borderWidth'];
-    /**
-     * Contents of the Section.
-     */
-    children?: ReactNode;
-    /**
-     * Custom class to be applied to section container.
-     */
-    className?: string;
-    /**
-     * Visually subdued the appearance of the section.
-     */
-    subdued?: boolean;
-    /**
-     * Title for the section.
-     */
-    title?: ReactNode;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const CardSection: FC<CardSectionProps>;
-export default CardSection;

package/dist/components/Card/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CardFooter/CardFooter';
-export * from './CardHeader/CardHeader';
-export * from './CardSection/CardSection';

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,72 +0,0 @@
-import React from 'react';
-import { CheckboxSize, CheckboxProps } from './components/Checkbox';
-export interface CheckboxInputProps {
-    /**
-     * The id attribute of the input.
-     */
-    id: string;
-    /**
-     * The checkbox input "checked" attribute.
-     */
-    isChecked: boolean;
-    /**
-     * Custom content to be displayed to right of checkbox.
-     */
-    label: string;
-    /**
-     * Callback function when input is changed.
-     */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Additional classes to add.
-     */
-    className?: string;
-    /**
-     * Mark the input field as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: React.ReactNode;
-    /**
-     * Additional clarifying text to help describe the input
-     */
-    helpText?: React.ReactNode;
-    /**
-     * Determines if the label is not shown for stylistic reasons.
-     * Note the label is still a required prop and will be used as the aria-label for accessibility reasons.
-     */
-    hideLabel?: boolean;
-    /**
-     * If the input should be disabled and not focusable.
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the checkbox is rendered in an indeterminate state.
-     * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
-     */
-    isIndeterminate?: CheckboxProps['isIndeterminate'];
-    /**
-     * The required and aria-required attributes on the input
-     */
-    isRequired?: boolean;
-    /**
-     * Callback function when input is blurred.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function when input is focused.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Visual indicator that the field is required, that gets appended to the label
-     */
-    requiredIndicator?: React.ReactNode;
-    /**
-     * The size of the checkbox.
-     */
-    size?: CheckboxSize;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const CheckboxInput: React.FC<CheckboxInputProps>;

package/dist/components/CheckboxInput/CheckboxInput.stories.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react-vite';
-import { CheckboxInput } from './CheckboxInput';
-declare const meta: Meta<typeof CheckboxInput>;
-export default meta;
-export declare const Basic: () => React.JSX.Element;
-export declare const Default: () => React.JSX.Element;
-export declare const States: () => React.JSX.Element;
-export declare const IndeterminateCheckboxes: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const CustomRequiredIndicator: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const HelpText: () => React.JSX.Element;
-export declare const CheckedInitialState: () => React.JSX.Element;
-export declare const HiddenLabel: () => React.JSX.Element;
-export declare const DisabledAndUnchecked: () => React.JSX.Element;
-export declare const DisabledAndChecked: () => React.JSX.Element;
-export declare const Error: () => React.JSX.Element;

package/dist/components/CheckboxInput/components/Checkbox.d.ts

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ResponsiveProp } from '../../../types';
-import { BoxProps } from '../../Box/Box';
-type BaseSize = 'sm' | 'md' | 'lg';
-export type CheckboxSize = BaseSize | ResponsiveProp<BaseSize>;
-export interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' | 'height'> {
-    /**
-     * The id attribute of the input.
-     */
-    id: string;
-    /**
-     * The checkbox input "checked" attribute.
-     */
-    isChecked: boolean;
-    /**
-     * Custom content to be displayed to right of checkbox.
-     */
-    label: string;
-    /**
-     * Callback function when input is changed.
-     */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Custom class to apply to the checkbox container.
-     */
-    className?: string;
-    /**
-     * Mark the input field as invalid and display a validation message.
-     * Pass a string or node to render a validation message below the input.
-     */
-    error?: React.ReactNode;
-    /**
-     * id of the element that labels the Checkbox
-     */
-    labelledby?: string;
-    /**
-     * If the input should be disabled and not focusable.
-     */
-    isDisabled?: boolean;
-    /**
-     * If the radio input should be hidden to make way for a custom checkbox.
-     */
-    isHidden?: boolean;
-    /**
-     * Whether the checkbox is rendered in an indeterminate state.
-     * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
-     */
-    isIndeterminate?: boolean;
-    /**
-     * The required and aria-required attributes on the input
-     */
-    isRequired?: boolean;
-    /**
-     * Callback function when input is blurred.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function when input is focused.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * The size of the checkbox.
-     */
-    size?: CheckboxSize;
-    /**
-     * Value of the checkbox input element
-     */
-    value?: string | number;
-}
-export declare const Checkbox: React.FC<CheckboxProps>;
-export {};