@kingsoft-ai/design 0.1.18 → 0.2.6

package/dist/types/select/styled-tokens.d.ts

@@ -0,0 +1,237 @@
+/**
+ * Select Styled Tokens
+ *
+ * 将 Select 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Select 组件的 Styled Tokens
+ */
+export declare const $select: {
+    readonly smHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly smIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly mdIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly lgIconSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderDefault: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderFocus: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgDefault: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textDefault: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textPlaceholder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textError: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly borderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly gap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly transition: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly popoverBg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly popoverBorder: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly popoverBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly popoverShadow: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly popoverPadding: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionPaddingInline: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionFontSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionBorderRadius: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionBgDefault: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionBgHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionBgSelected: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionBgFocused: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionTextDefault: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionTextHover: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionTextSelected: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly optionTextDisabled: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

package/dist/types/select/tokens.d.ts

@@ -1,3 +1,3 @@
 import { TokenGenerator } from '../types/theme-utils';
-import { SelectTokens } from '../types/component-tokens.types';
+import { SelectTokens } from './tokens.types';
 export declare const getSelectTokens: TokenGenerator<SelectTokens>;

package/dist/types/select/tokens.types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Select 组件 Token 类型定义
+ */
+export interface SelectTokens {
+    size: {
+        sm: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        md: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+        lg: {
+            height: string;
+            fontSize: string;
+            paddingInline: string;
+            iconSize: string;
+        };
+    };
+    border: {
+        default: string;
+        hover: string;
+        focus: string;
+        error: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        disabled: string;
+    };
+    text: {
+        default: string;
+        placeholder: string;
+        disabled: string;
+        error: string;
+    };
+    borderRadius: string;
+    gap: string;
+    transition: string;
+    popover: {
+        background: string;
+        border: string;
+        borderRadius: string;
+        boxShadow: string;
+        padding: string;
+    };
+    option: {
+        height: string;
+        paddingInline: string;
+        fontSize: string;
+        borderRadius: string;
+        gap: string;
+        background: {
+            default: string;
+            hover: string;
+            selected: string;
+            focused: string;
+        };
+        text: {
+            default: string;
+            hover: string;
+            selected: string;
+            disabled: string;
+        };
+    };
+}

package/dist/types/skeleton/Skeleton.style.d.ts

@@ -1,18 +1,5 @@
-/**
- * Skeleton 骨架屏样式
- *
- * 基于 CSS 变量的三层 Token 体系：
- * - Tier 1 (Global): 全局基础值 --ksd-colors-*, --ksd-spacing-*, etc.
- * - Tier 2 (Semantic): 语义化映射 --ksd-brand-*, --ksd-text-*, etc.
- * - Tier 3 (Component): 组件专用 Token --ksd-skeleton-*
- *
- * 无需 ThemeProvider，直接使用 CSS 变量
- */
 export type SkeletonVariant = 'text' | 'rect' | 'block' | 'circle';
 export type SkeletonRadius = 'sm' | 'md' | 'lg' | 'pill' | 'circle';
-/**
- * Skeleton 基础元素
- */
 export declare const SkeletonRoot: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -23,18 +10,12 @@ export declare const SkeletonRoot: import("@emotion/styled").StyledComponent<{
     $radius?: SkeletonRadius;
     $animate?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Skeleton 文本容器（多行）
- */
 export declare const SkeletonStack: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     $width?: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Skeleton 文本行
- */
 export declare const SkeletonLine: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -43,11 +24,5 @@ export declare const SkeletonLine: import("@emotion/styled").StyledComponent<{
     $customWidth?: string;
     $animate?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Variant 映射（向后兼容）
- */
 export declare const skeletonVariants: Record<string, SkeletonVariant>;
-/**
- * Radius 映射（向后兼容）
- */
 export declare const skeletonRadii: Record<string, SkeletonRadius>;

package/dist/types/skeleton/styled-tokens.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Skeleton Styled Tokens
+ *
+ * 将 Skeleton 的 JS tokens 与 CSS 变量映射，实现：
+ * - 有 ThemeProvider 时：使用 JS token 值（可被用户自定义）
+ * - 无 ThemeProvider 时：fallback 到 CSS 变量（基础样式）
+ */
+/**
+ * Skeleton 组件的 Styled Tokens
+ */
+export declare const $skeleton: {
+    readonly bgBase: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly bgHighlight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly animationDuration: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly animationEasing: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radiusSm: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radiusMd: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radiusLg: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radiusPill: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly radiusCircle: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly blockHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textLineHeight: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textGap: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly textLastLineWidth: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+    readonly circleSize: (props: {
+        theme?: import("@kingsoft-ai/theme").Theme & {
+            _useCSSVariables?: boolean;
+        };
+    }) => string;
+};

package/dist/types/skeleton/tokens.d.ts

@@ -1,3 +1,3 @@
 import { TokenGenerator } from '../types/theme-utils';
-import { SkeletonTokens } from '../types/component-tokens.types';
+import { SkeletonTokens } from './tokens.types';
 export declare const getSkeletonTokens: TokenGenerator<SkeletonTokens>;

package/dist/types/skeleton/tokens.types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Skeleton 组件 Token 类型定义
+ */
+export interface SkeletonTokens {
+    background: {
+        base: string;
+        highlight: string;
+    };
+    animation: {
+        duration: string;
+        easing: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+        pill: string;
+        circle: string;
+    };
+    block: {
+        height: string;
+    };
+    text: {
+        lineHeight: string;
+        gap: string;
+        lastLineWidth: string;
+    };
+    circle: {
+        size: string;
+    };
+}

package/dist/types/slider/Slider.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import type { AriaSliderProps } from 'react-aria';
+import { type SliderSize } from './Slider.style';
+export declare const SIZES: readonly ["sm", "md", "lg"];
+export interface SliderMark {
+    /** 刻度值 */
+    value: number;
+    /** 刻度标签 */
+    label?: ReactNode;
+}
+export type SliderProps = Omit<AriaSliderProps, 'isDisabled'> & {
+    /** 滑块尺寸：小号(4px轨道)、标准(6px轨道)、大号(8px轨道) */
+    size?: SliderSize;
+    /** 是否禁用（替代 isDisabled） */
+    disabled?: boolean;
+    /** 是否占满容器宽度 */
+    fullWidth?: boolean;
+    /** 是否显示当前数值 */
+    showValue?: boolean;
+    /** 是否显示 tooltip */
+    showTooltip?: boolean | 'always' | 'hover';
+    /** 刻度标记 */
+    marks?: SliderMark[] | boolean;
+    /** 数值格式化函数 */
+    formatValue?: (value: number) => string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
+};
+/**
+ * Slider 滑动组件
+ *
+ * 基于 react-aria 实现，支持无障碍访问、键盘导航和主题定制。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <Slider label="音量" defaultValue={50} />
+ *
+ * // 带刻度标记
+ * <Slider
+ *   label="进度"
+ *   marks={[
+ *     { value: 0, label: '0%' },
+ *     { value: 50, label: '50%' },
+ *     { value: 100, label: '100%' },
+ *   ]}
+ * />
+ *
+ * // 范围选择
+ * <Slider label="价格范围" defaultValue={[20, 80]} />
+ * ```
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<Omit<AriaSliderProps<number | number[]>, "isDisabled"> & {
+    /** 滑块尺寸：小号(4px轨道)、标准(6px轨道)、大号(8px轨道) */
+    size?: SliderSize;
+    /** 是否禁用（替代 isDisabled） */
+    disabled?: boolean;
+    /** 是否占满容器宽度 */
+    fullWidth?: boolean;
+    /** 是否显示当前数值 */
+    showValue?: boolean;
+    /** 是否显示 tooltip */
+    showTooltip?: boolean | "always" | "hover";
+    /** 刻度标记 */
+    marks?: SliderMark[] | boolean;
+    /** 数值格式化函数 */
+    formatValue?: (value: number) => string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式（支持 CSS 变量定制） */
+    style?: React.CSSProperties;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/slider/Slider.style.d.ts

@@ -0,0 +1,125 @@
+export declare const sliderSizes: readonly ["sm", "md", "lg"];
+export type SliderSize = (typeof sliderSizes)[number];
+/**
+ * Slider 根容器
+ */
+export declare const SliderRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: SliderSize;
+    isDisabled: boolean;
+    fullWidth: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 标签和数值区域
+ */
+export declare const SliderHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 标签文字
+ */
+export declare const SliderLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+/**
+ * 数值显示
+ */
+export declare const SliderValue: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * 轨道容器 - 包含轨道、填充和滑块
+ */
+export declare const SliderTrackContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 轨道背景
+ */
+export declare const SliderTrack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 已填充区域
+ */
+export declare const SliderFill: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled: boolean;
+    isHovered: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 滑块（拖动按钮）
+ */
+export declare const SliderThumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isDisabled: boolean;
+    isFocusVisible: boolean;
+    isDragging: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 刻度标记容器
+ */
+export declare const SliderMarks: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 单个刻度标记
+ */
+export declare const SliderMark: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isActive: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 刻度点
+ */
+export declare const SliderMarkDot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isActive: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * 刻度标签
+ */
+export declare const SliderMarkLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isActive: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Tooltip
+ */
+export declare const SliderTooltip: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isVisible: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 输出容器 - 用于显示输入框
+ */
+export declare const SliderOutput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, {}>;