@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/SubNav/index.d.ts

@@ -0,0 +1,6 @@
+export * from './SubNav';
+export * from './SubNavHeader';
+export * from './SubNavLink';
+export * from './SubNavLinkSection';
+export * from './SubNavSection';
+export * from './SubNavSections';

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface SwitchButtonProps {
+    visibleLabels?: boolean;
+}
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, SwitchButtonProps {
+    label: string;
+    onChange: React.MouseEventHandler<HTMLButtonElement>;
+    onLabel?: string;
+    offLabel?: string;
+    selected?: boolean;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/Switch/index.d.ts

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

package/dist/Table/Cell.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { RawTdProps } from '../RawTable/RawCell';
+export interface ThProps extends RawTdProps {
+    children: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare const Th: ({ children, action, ...props }: ThProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Td: ({ children, ...props }: RawTdProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/TFooter.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { BoxProps } from '../Box';
+export interface TFooterProps extends BoxProps<'button'> {
+    children: React.ReactNode;
+    icon: React.ReactNode;
+}
+export declare const TFooter: ({ children, icon, ...props }: TFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { RawTableProps } from '../RawTable/RawTable';
+export type Overflowing = 'both' | 'left' | 'right';
+export interface TableProps extends RawTableProps {
+    footer?: React.ReactNode;
+}
+export declare const Table: ({ footer, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Tbody.d.ts

@@ -0,0 +1,2 @@
+import { RawTbodyProps } from '../RawTable/RawTbody';
+export declare const Tbody: ({ children, ...props }: RawTbodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Thead.d.ts

@@ -0,0 +1,2 @@
+import { RawTheadProps } from '../RawTable/RawThead';
+export declare const Thead: ({ children, ...props }: RawTheadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/Tr.d.ts

@@ -0,0 +1,2 @@
+import { RawTrProps } from '../RawTable/RawTr';
+export declare const Tr: (props: RawTrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './Tbody';
+export * from './Thead';
+export * from './Tr';
+export * from './Cell';
+export * from './TFooter';

package/dist/Tabs/TabGroup.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type TabsContextState } from './TabsContext';
+export interface TabGroupProps extends Omit<TabsContextState, 'id' | 'selectedTabIndex' | 'selectTabIndex'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    id?: string;
+    selectedTabIndex?: number;
+    initialSelectedTabIndex?: number;
+}
+export type SetSelectedTabIndexHandler = (tabIndex: number) => void;
+export declare const TabGroup: React.ForwardRefExoticComponent<TabGroupProps & React.RefAttributes<{
+    _handlers: {
+        setSelectedTabIndex: SetSelectedTabIndexHandler;
+    };
+}>>;

package/dist/Tabs/TabPanels.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const TabPanels: ({ children, ...props }: TabPanelsProps) => import("react/jsx-runtime").JSX.Element;
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string;
+}
+export declare const TabPanel: ({ id, ...props }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FlexProps } from '../Flex';
+export interface TabsProps extends FlexProps {
+    children: React.ReactNode;
+}
+export declare const Tabs: ({ children, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    disabled?: boolean;
+    hasError?: boolean;
+    id?: string;
+    index?: number;
+    onTabClick?: () => void;
+    selectedTabIndex?: number;
+    variant?: 'simple';
+}
+export declare const Tab: ({ disabled, id, children, variant, hasError, index, selectedTabIndex, onTabClick, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/TabsContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface TabsContextState {
+    id: string;
+    selectedTabIndex: number;
+    label: string;
+    variant?: 'simple';
+    onTabChange?: (index: number) => void;
+    selectTabIndex: (index: number) => void;
+}
+export declare const TabsContext: React.Context<TabsContextState>;
+export declare const useTabs: () => TabsContextState;

package/dist/Tabs/components.d.ts

@@ -0,0 +1,94 @@
+/** Simple variant */
+export declare const SimpleTabBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
+    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
+    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
+    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
+    borderColor?: keyof import("../themes/colors").Colors | undefined;
+    color?: keyof import("../themes/colors").Colors | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
+    grow?: import("csstype").Property.FlexGrow | undefined;
+    hasRadius?: boolean | undefined;
+    hiddenS?: boolean | undefined;
+    hiddenXS?: boolean | undefined;
+    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
+    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
+    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
+    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
+    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
+    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
+    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
+    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
+    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
+    shadow?: keyof import("../themes/colors").Shadows | undefined;
+    shrink?: import("csstype").Property.FlexShrink | undefined;
+    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
+    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
+    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
+    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
+    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
+    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
+    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
+    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
+    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
+    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
+    right?: import("../types").DefaultThemeOrCSSProp<"spaces", "right">;
+    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
+    borderStyle?: import("csstype").Property.BorderStyle | undefined;
+    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
+    children?: import("react").ReactNode;
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    selected?: boolean | undefined;
+    hasError?: boolean | undefined;
+}, never>;
+/** Default variant */
+export declare const DefaultTabBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<import("styled-components").CSSProperties, "cursor" | "display" | "overflow" | "pointerEvents" | "transform" | "position" | "textAlign" | "textTransform" | "zIndex" | "animation" | "transition"> & {
+    _hover?: ((theme: import("styled-components").DefaultTheme) => string) | undefined;
+    background?: import("../types").DefaultThemeOrCSSProp<"colors", "background">;
+    basis?: import("csstype").Property.FlexBasis<string | number> | undefined;
+    borderColor?: keyof import("../themes/colors").Colors | undefined;
+    color?: keyof import("../themes/colors").Colors | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
+    fontSize?: import("../types").DefaultThemeOrCSSProp<"fontSizes", "fontSize">;
+    grow?: import("csstype").Property.FlexGrow | undefined;
+    hasRadius?: boolean | undefined;
+    hiddenS?: boolean | undefined;
+    hiddenXS?: boolean | undefined;
+    padding?: import("../helpers/handleResponsiveValues").ResponsiveValue<"padding">;
+    paddingBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingBottom">;
+    paddingLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingLeft">;
+    paddingRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingRight">;
+    paddingTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"paddingTop">;
+    marginLeft?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginLeft">;
+    marginBottom?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginBottom">;
+    marginRight?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginRight">;
+    marginTop?: import("../helpers/handleResponsiveValues").ResponsiveValue<"marginTop">;
+    shadow?: keyof import("../themes/colors").Shadows | undefined;
+    shrink?: import("csstype").Property.FlexShrink | undefined;
+    lineHeight?: import("../types").DefaultThemeOrCSSProp<"lineHeights", "lineHeight">;
+    width?: import("../types").DefaultThemeOrCSSProp<"spaces", "width">;
+    minWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "minWidth">;
+    maxWidth?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxWidth">;
+    height?: import("../types").DefaultThemeOrCSSProp<"spaces", "height">;
+    minHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "minHeight">;
+    maxHeight?: import("../types").DefaultThemeOrCSSProp<"spaces", "maxHeight">;
+    top?: import("../types").DefaultThemeOrCSSProp<"spaces", "top">;
+    left?: import("../types").DefaultThemeOrCSSProp<"spaces", "left">;
+    bottom?: import("../types").DefaultThemeOrCSSProp<"spaces", "bottom">;
+    right?: import("../types").DefaultThemeOrCSSProp<"spaces", "right">;
+    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
+    borderStyle?: import("csstype").Property.BorderStyle | undefined;
+    borderWidth?: import("csstype").Property.BorderWidth<string | number> | undefined;
+    children?: import("react").ReactNode;
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    selected?: boolean | undefined;
+}, never>;
+export declare const DefaultTabButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    selected?: boolean | undefined;
+    showRightBorder?: boolean | undefined;
+}, never>;
+export declare const DefaultTabsRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps<"div">, never>;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * from './TabPanels';
+export * from './TabGroup';

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { FlexProps } from '../Flex';
+export interface TagProps extends FlexProps<'button'> {
+    icon: React.ReactNode;
+}
+export declare const Tag: ({ children, icon, disabled, onClick, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tag/index.d.ts

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

package/dist/TextButton/TextButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FlexProps } from '../Flex';
+export interface TextButtonProps extends FlexProps<'button'> {
+    endIcon?: React.ReactNode;
+    loading?: boolean;
+    startIcon?: React.ReactNode;
+}
+export declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/TextButton/index.d.ts

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

package/dist/TextInput/TextInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FieldInputProps, FieldProps, FieldLabelProps } from '../Field';
+export interface TextInputProps extends Omit<FieldInputProps, 'id' | 'name'>, Pick<FieldProps, 'hint' | 'error' | 'id' | 'name'> {
+    label: string;
+    labelAction?: FieldLabelProps['action'];
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<{
+    inputWrapperRef: React.MutableRefObject<HTMLDivElement>;
+    input: React.MutableRefObject<HTMLInputElement>;
+}>>;

package/dist/TextInput/index.d.ts

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

package/dist/Textarea/Textarea.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BoxProps } from '../Box';
+import { FieldProps, FieldLabelProps } from '../Field';
+export interface TextareaProps extends TextareaInputBoxProps, Pick<FieldProps, 'hint' | 'error'> {
+    /**
+     * @preserve
+     * @deprecated use `value` instead
+     */
+    children?: string;
+    label?: string;
+    labelAction?: FieldLabelProps['action'];
+    value?: string;
+}
+interface TextareaInputBoxProps extends BoxProps<'textarea'> {
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/Textarea/index.d.ts

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

package/dist/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TODO: remove this in v2 in favour of DesignSystemProvider, but this is rather convienient for now.
+ */
+import * as React from 'react';
+import { DefaultTheme } from 'styled-components';
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: DefaultTheme;
+}
+export declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ThemeProvider/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("styled-components").DefaultTheme;

package/dist/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export * from './hooks';

package/dist/TimePicker/TimePicker.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ComboboxInputProps } from '../Combobox/Combobox';
+import { FieldLabelProps, FieldProps } from '../Field';
+export interface TimePickerInputProps extends Omit<ComboboxInputProps, 'children' | 'autocomplete' | 'startIcon' | 'placeholder' | 'allowCustomValue' | 'onFilterValueChange' | 'filterValue' | 'value' | 'defaultValue' | 'defaultTextValue' | 'textValue' | 'onTextValueChange'> {
+    /**
+     * @default 15
+     */
+    step?: number;
+    /**
+     * @deprecated This is no longer used.
+     */
+    ariaLabel?: string;
+    /**
+     * @preserve
+     * @deprecated This is no longer used.
+     */
+    selectButtonTitle?: string;
+    value?: string;
+    defaultValue?: string;
+}
+export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TimePickerProps extends TimePickerInputProps, Pick<FieldProps, 'hint'> {
+    label: string;
+    labelAction?: FieldLabelProps['action'];
+}
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/TimePicker/index.d.ts

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

package/dist/ToggleInput/ToggleInput.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type FieldProps, FieldLabelProps } from '../Field';
+import type { InputSizes } from '../themes/sizes';
+interface ToggleInputInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'name' | 'children' | 'required' | 'id' | 'size' | 'checked'> {
+    onLabel: string;
+    offLabel: string;
+    checked?: boolean | null;
+    size?: InputSizes;
+}
+interface ToggleInputPropsWithoutLabel extends Pick<FieldProps, 'error' | 'hint' | 'name' | 'required' | 'id'>, ToggleInputInputProps {
+    clearLabel?: string;
+    labelAction?: FieldLabelProps['action'];
+    onClear?: () => void;
+}
+type ToggleInputProps = (ToggleInputPropsWithoutLabel & {
+    label: string;
+    'aria-label'?: never;
+}) | (ToggleInputPropsWithoutLabel & {
+    label?: never;
+    'aria-label': string;
+});
+declare const ToggleInput: React.ForwardRefExoticComponent<ToggleInputProps & React.RefAttributes<HTMLInputElement>>;
+export { ToggleInput };
+export type { ToggleInputProps };

package/dist/ToggleInput/index.d.ts

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

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TooltipPosition } from './utils/positionTooltip';
+import { BoxProps } from '../Box';
+export interface TooltipProps extends Omit<BoxProps<'div'>, 'position'> {
+    description?: string;
+    delay?: number;
+    id?: string;
+    label?: React.ReactNode;
+    position?: TooltipPosition;
+}
+export declare const Tooltip: ({ children, label, description, delay, position, id, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip/hooks/useTooltipHandlers.d.ts

@@ -0,0 +1,7 @@
+export declare const useTooltipHandlers: (delay: number) => {
+    visible: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};

package/dist/Tooltip/hooks/useTooltipLayout.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TooltipPosition } from '../utils/positionTooltip';
+export declare const useTooltipLayout: (visible: boolean, position: TooltipPosition) => {
+    tooltipWrapperRef: React.MutableRefObject<HTMLDivElement | null>;
+    toggleSourceRef: React.MutableRefObject<HTMLSpanElement | null>;
+};

package/dist/Tooltip/index.d.ts

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

package/dist/Tooltip/utils/positionTooltip.d.ts

@@ -0,0 +1,5 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export declare const positionTooltip: (tooltipNode: HTMLDivElement, toggleSourceNode: HTMLSpanElement, position?: TooltipPosition) => {
+    left: number;
+    top: number;
+};

package/dist/Typography/Typography.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSProperties, DefaultTheme } from 'styled-components';
+import { TEXT_VARIANTS } from './constants';
+import { DefaultThemeOrCSSProp } from '../types';
+export type TypographyProps<TElement extends keyof JSX.IntrinsicElements = 'span'> = React.ComponentPropsWithoutRef<TElement> & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+    children?: React.ReactNode;
+    ellipsis?: boolean;
+    fontSize?: keyof DefaultTheme['fontSizes'];
+    fontWeight?: keyof DefaultTheme['fontWeights'];
+    lineHeight?: DefaultThemeOrCSSProp<'lineHeights', 'lineHeight'>;
+    textAlign?: CSSProperties['textAlign'];
+    textColor?: keyof DefaultTheme['colors'];
+    textDecoration?: CSSProperties['textDecoration'];
+    textTransform?: CSSProperties['textTransform'];
+    variant?: (typeof TEXT_VARIANTS)[number];
+};
+export declare const Typography: import("styled-components").StyledComponent<"span", DefaultTheme, TypographyProps<"span">, never>;

package/dist/Typography/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const ALPHA = "alpha";
+export declare const BETA = "beta";
+export declare const DELTA = "delta";
+export declare const EPSILON = "epsilon";
+export declare const OMEGA = "omega";
+export declare const PI = "pi";
+export declare const SIGMA = "sigma";
+export declare const TEXT_VARIANTS: readonly ["alpha", "beta", "delta", "epsilon", "omega", "pi", "sigma"];

package/dist/Typography/index.d.ts

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

package/dist/Typography/utils.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+import { TEXT_VARIANTS } from './constants';
+export declare const ellipsisStyle: ({ ellipsis }: {
+    ellipsis?: boolean;
+}) => false | "\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
+export declare const variantStyle: ({ variant, theme, }: {
+    variant?: (typeof TEXT_VARIANTS)[number];
+    theme: DefaultTheme;
+}) => string;

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1 @@
+export declare const VisuallyHidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/VisuallyHidden/index.d.ts

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

package/dist/helpers/context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const createContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType) => readonly [{
+    (props: ContextValueType & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, (consumerName: string) => ContextValueType];

package/dist/helpers/deprecations.d.ts

@@ -0,0 +1,2 @@
+export declare const PREFIX = "[@strapi/design-system]:";
+export declare const once: <TFunc extends (...args: any) => any>(fn: TFunc) => (...args: any) => void;

package/dist/helpers/getDefaultLocale.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @preserve
+ * @deprecated This will be removed in v2.0.0, you can access the locale from `useDesignSystem` instead.
+ */
+export declare const getDefaultLocale: () => string;

package/dist/helpers/getFocusableNodes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Sometimes, we want to retrieve the elements with tabindex=-1, and sometime we don't
+ * The includeNegativeTabIndex aims to provide this capability
+ *
+ */
+export declare const getFocusableNodes: (node: HTMLElement, includeNegativeTabIndex?: boolean) => HTMLElement[];
+/**
+ * This function filters an array of HTMLElements and returns any of them that have internal keyboard navigation such as input type="text"
+ */
+export declare const getFocusableNodesWithKeyboardNav: (nodes: HTMLElement[]) => HTMLElement[];

package/dist/helpers/handleResponsiveValues.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DefaultTheme } from 'styled-components';
+import { DefaultThemeOrCSSProp } from '../types';
+interface ResponsiveValueObject {
+    desktop?: keyof DefaultTheme['spaces'];
+    tablet?: keyof DefaultTheme['spaces'];
+    mobile?: keyof DefaultTheme['spaces'];
+}
+type ResponsiveValueTuple = [
+    desktop?: keyof DefaultTheme['spaces'],
+    tablet?: keyof DefaultTheme['spaces'],
+    mobile?: keyof DefaultTheme['spaces']
+];
+type ResponsiveCSSProperties = Pick<React.CSSProperties, 'margin' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'padding' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'>;
+export type ResponsiveValue<TCSSProp extends keyof ResponsiveCSSProperties = any> = ResponsiveValueObject | DefaultThemeOrCSSProp<'spaces', TCSSProp> | ResponsiveValueTuple;
+declare const handleResponsiveValues: <TCSSProp extends "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "margin" | "padding">(property: string, value: ResponsiveValue<TCSSProp> | undefined, theme: DefaultTheme) => string | undefined;
+export default handleResponsiveValues;

package/dist/helpers/keyboardKeys.d.ts

@@ -0,0 +1,17 @@
+export declare const KeyboardKeys: {
+    DOWN: string;
+    UP: string;
+    RIGHT: string;
+    LEFT: string;
+    ESCAPE: string;
+    ENTER: string;
+    SPACE: string;
+    TAB: string;
+    END: string;
+    HOME: string;
+    DELETE: string;
+    PAGE_UP: string;
+    PAGE_DOWN: string;
+    BACKSPACE: string;
+    CLEAR: string;
+};

package/dist/helpers/objects.d.ts

@@ -0,0 +1,8 @@
+export declare function isKeyOf(o: object | [] | string, s: string | number | symbol): s is keyof typeof o;
+/**
+ * @description Simple object check.
+ * @export
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isObject(item: any): boolean;

package/dist/helpers/setOpacity.d.ts

@@ -0,0 +1 @@
+export declare const setOpacity: (hex: string, alpha: number) => string;

package/dist/helpers/setTabIndexOnFirstItem.d.ts

@@ -0,0 +1 @@
+export declare const setTabIndexOnFirstItem: (node: HTMLElement, selector: string) => void;

package/dist/helpers/strings.d.ts

@@ -0,0 +1 @@
+export declare const stripReactIdOfColon: (str: string) => string;

package/dist/helpers/theme.d.ts

@@ -0,0 +1,2 @@
+import { DefaultTheme } from 'styled-components';
+export declare function extractStyleFromTheme<TKey extends keyof DefaultTheme, TSection extends DefaultTheme[TKey]>(themeSection: TSection, key: string | number | symbol | undefined, defaultValue: any): string | number;

package/dist/hooks/useComposeRefs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+/**
+ * Takes multiple React like refs either React.Ref or a callback:
+ * (node: T) => void and returns a single function that can be
+ * passed to a React component as a ref.
+ *
+ * Example:
+ * ```tsx
+ * import { useComposedRefs } from '../hooks/useComposedRefs';
+ *
+ * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {
+ *  const ref = useComposedRefs(internalRef, forwardedRef);
+ *
+ *  React.useEffect(() => {
+ *   ref.current.focus();
+ *  }, [ref]);
+ *
+ *  return <input ref={ref} />
+ * }
+ * ```
+ */
+declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+export { composeRefs, useComposedRefs };

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,19 @@
+/**
+ * this is basically stolen from RadixUI but tweaked to allow the following:
+ * * prop can be a function
+ * * setUncontrolledProp is always called with the nextValue.
+ */
+/**
+ * @type {<T>(params: UseControllableStateParams<T>) => [T, (nextState: T | SetStateFn<T>) => void]}
+ */
+export interface UseControllableStateParams<TProp> {
+    prop?: TProp | undefined | ((state?: TProp | undefined) => TProp | undefined);
+    defaultProp?: TProp | undefined;
+    onChange?: (state?: TProp) => void;
+}
+type SetStateFn<TState> = (prevState: TState) => TState;
+declare function useControllableState<TProp>({ prop, defaultProp, onChange, }: UseControllableStateParams<TProp>): [
+    TProp | undefined,
+    (nextState: TProp | undefined | SetStateFn<TProp | undefined>) => void
+];
+export { useControllableState };