@pisell/private-materials 6.2.26 → 6.2.28

package/es/plus/clientCard/types.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+export interface ClientData {
+    id: number;
+    shop_id: number;
+    display_name?: string;
+    nickname?: string;
+    email?: string;
+    phone?: string;
+    country_calling_code?: string;
+    channel?: string;
+    created_at: string;
+    updated_at: string;
+    waiver_form?: any;
+    avatar?: string;
+    birthday?: string;
+    address?: string;
+    tags?: string[];
+    [key: string]: any;
+}
+export declare type CardType = 'b1' | 'b2' | 'b5' | 'b9';
+export declare type Direction = 'horizontal' | 'vertical';
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string;
+export declare type AvatarShape = 'circle' | 'square';
+export interface AvatarConfig {
+    icon?: string;
+    shape?: AvatarShape;
+    borderRadius?: number | string;
+    size?: AvatarSize;
+    useTextAvatar?: boolean;
+    children?: string;
+}
+export interface StatusConfig {
+    color?: string;
+}
+export interface NameStyle {
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    color?: string;
+    textDecoration?: string;
+}
+export interface TagItem {
+    children: string;
+    color: string;
+}
+export interface TagConfig {
+    placement?: 'separate' | 'inline';
+    flexWrap?: 'nowrap' | 'wrap';
+    gap?: number | string;
+}
+export interface ExtraField {
+    label?: string;
+    value?: string;
+    isShowLabel?: boolean;
+    isShowValue?: boolean;
+    icon?: string;
+    iconSize?: number;
+    iconColor?: string;
+}
+export interface Slots {
+    top?: React.ReactNode;
+    bottom?: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+export interface StyleConfig {
+    width?: number | string;
+    border?: 'solid' | 'unset';
+    borderWidth?: number | string;
+    borderColor?: string;
+    borderRadius?: number | string;
+    padding?: number | string;
+    [key: string]: any;
+}
+export interface FieldNames {
+    id?: string | ((data: any) => any);
+    name?: string | ((data: any) => any);
+    cover?: string | ((data: any) => any);
+    phone?: string | ((data: any) => any);
+    email?: string | ((data: any) => any);
+    birthday?: string | ((data: any) => any);
+    address?: string | ((data: any) => any);
+    tags?: string | ((data: any) => any);
+    [key: string]: string | ((data: any) => any) | undefined;
+}
+export interface DisplayConfig {
+    isShowAvatar?: boolean;
+    isShowName?: boolean;
+    isShowPhone?: boolean;
+    isShowEmail?: boolean;
+    isShowBirthday?: boolean;
+    isShowAddress?: boolean;
+    isShowTag?: boolean;
+    isShowStatus?: boolean;
+}
+export interface ClientCardProps extends DisplayConfig {
+    type?: CardType;
+    direction?: Direction;
+    dataSource?: ClientData | any;
+    fieldNames?: FieldNames;
+    style?: StyleConfig;
+    horizontalGap?: number | string;
+    verticalGap?: number | string;
+    avatar?: AvatarConfig;
+    status?: StatusConfig;
+    defaultName?: string;
+    nameStyle?: NameStyle;
+    tags?: Array<TagItem | string>;
+    tag?: TagConfig;
+    extraFields?: ExtraField[];
+    slots?: Slots;
+    onAddClient?: () => void;
+    onChangeClient?: (data: ClientData) => void;
+    onRemoveClient?: (data: ClientData) => void;
+    onViewClient?: (data: ClientData) => void;
+}
+export interface ProcessedClientData {
+    id: any;
+    name: string;
+    cover?: string;
+    phone?: string;
+    email?: string;
+    birthday?: string;
+    address?: string;
+    tags?: string[];
+    [key: string]: any;
+}

package/es/plus/clientCard/utils.d.ts

@@ -0,0 +1,8 @@
+interface FieldMapping<T = any, R = any> {
+    [key: string]: string | ((data: T) => R) | undefined;
+}
+export declare function getFieldValue<T, R = any>(data: T, fieldKey: string): R | undefined;
+export declare function getFieldValue<T, R = any>(data: T, fieldKey: string, mapping: FieldMapping<T, R>): R | undefined;
+export declare const getAvatarText: (name: string) => string;
+export declare const isWalkIn: (customer_id?: number | string) => boolean;
+export {};

package/es/plus/clientName/index.d.ts

@@ -0,0 +1,4 @@
+import './index.less';
+import { IClientNameProps } from './type';
+declare const ClientName: ({ className, dataSource, style }: IClientNameProps) => JSX.Element | null;
+export default ClientName;

package/es/plus/clientName/type.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type ClientData = {
+    display_name?: string;
+    nickname?: string;
+    first_name?: string;
+    last_name?: string;
+    [key: string]: any;
+};
+export interface IClientNameProps {
+    dataSource?: string | ClientData | null;
+    className?: string;
+    style?: React.CSSProperties;
+}

package/es/plus/clientName/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClientData } from './type';
+export declare const getClientName: (dataSource: string | ClientData | null) => string | null;

package/es/plus/clinetSearch/Add/BirthdayField/index.d.ts

@@ -0,0 +1,2 @@
+declare const DateSectionCom: ({ value, onChange, showTime, className, style, useSpace, format, itemStyle, }: any) => JSX.Element;
+export default DateSectionCom;

package/es/plus/clinetSearch/Add/GenderField/index.d.ts

@@ -0,0 +1,2 @@
+declare const GenderField: (props: any) => JSX.Element;
+export default GenderField;

package/es/plus/clinetSearch/Add/PhoneField/index.d.ts

@@ -0,0 +1,2 @@
+declare const PhoneField: ({ value, onChange }: any) => JSX.Element;
+export default PhoneField;

package/es/plus/clinetSearch/Add/PhoneField/serve.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultCodes: any;
+export declare const getCountries: (params?: any) => Promise<any>;

package/es/plus/clinetSearch/Add/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.less';
+interface AddClientProps {
+    onChange: (value: any, isChecked: boolean) => void;
+    phone?: string;
+    containerProps: {
+        className?: string;
+        title?: string;
+        open?: boolean;
+        onCancel?: () => void;
+        width?: string | number;
+    };
+}
+export interface AddClientRef {
+    reset: () => void;
+}
+declare const AddClient: React.ForwardRefExoticComponent<AddClientProps & React.RefAttributes<unknown>>;
+export default AddClient;

package/es/plus/clinetSearch/InfiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { InfiniteScrollProps } from './types';
+declare const InfiniteScroll: React.FC<InfiniteScrollProps>;
+export default InfiniteScroll;
+export type { InfiniteScrollProps };

package/es/plus/clinetSearch/InfiniteScroll/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InfiniteScroll';
+export type { InfiniteScrollProps, ScrollPosition, TouchInfo, InfiniteScrollState } from './types';

package/es/plus/clinetSearch/InfiniteScroll/types.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, CSSProperties } from 'react';
+/**
+ * 无限滚动组件的属性接口
+ */
+export interface InfiniteScrollProps {
+    /** 数据长度，用于判断是否需要加载更多 */
+    dataLength: number;
+    /** 加载更多数据的函数 */
+    next: () => void;
+    /** 是否还有更多数据 */
+    hasMore: boolean;
+    /** 加载中显示的组件 */
+    loader?: ReactNode;
+    /** 没有更多数据时显示的组件 */
+    endMessage?: ReactNode;
+    /** 滚动容器的高度 */
+    height?: number | string;
+    /** 滚动阈值，0-1之间的数值或像素值 */
+    scrollThreshold?: number | string;
+    /** 滚动事件回调 */
+    onScroll?: (event: Event) => void;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 指定滚动容器的目标元素ID */
+    scrollableTarget?: string;
+    /** 子元素 */
+    children: ReactNode;
+    /** 是否反向滚动 */
+    inverse?: boolean;
+}
+/**
+ * 滚动位置信息
+ */
+export interface ScrollPosition {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+/**
+ * 组件内部状态
+ */
+export interface InfiniteScrollState {
+    isLoading: boolean;
+}

package/es/plus/clinetSearch/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableProps } from 'antd';
+import type { ComprehensiveSearchProps } from '../../pro/comprehensiveSearch/types';
+import type { ClientData } from './types';
+import './index.less';
+interface ClientSearchProps extends Omit<ComprehensiveSearchProps, 'resultDisplay' | 'onRowClick'> {
+    onRowClick?: (record: ClientData, index: number) => void;
+    onAddClient?: (record: ClientData, isChecked: boolean) => void;
+    resultProps?: TableProps<ClientData>;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+}
+export declare type ClientSearchRef = {
+    setSearchKeyword: (keyword: string) => void;
+    resetScrollPosition: () => void;
+};
+declare const ClientSearch: React.ForwardRefExoticComponent<ClientSearchProps & React.RefAttributes<ClientSearchRef>>;
+export default ClientSearch;

package/es/plus/clinetSearch/locales.d.ts

@@ -0,0 +1,102 @@
+declare const _default: {
+    en: {
+        'pisell2.text.leave-empty-for-walk-in': string;
+        'pisell2.text.date-year-text': string;
+        'pisell2.text.date-month-text': string;
+        'pisell2.text.date-day-text': string;
+        'pisell2.text.gender': string;
+        'pisell2.text.gender.male': string;
+        'pisell2.text.gender.female': string;
+        'pisell2.text.birthday': string;
+        'pisell2.text.phone': string;
+        'pisell2.text.email': string;
+        'pisell2.text.lastname': string;
+        'pisell2.text.firstname': string;
+        'pisell2.text.email-error-message': string;
+        'pisell2.text.notes': string;
+        'pisell2.text.save': string;
+        'pisell2.text.save-and-select': string;
+        'pisell2.text.no-results-found': string;
+        'pisell2.text.create-new-client': string;
+        'pisell2.text.result-found': string;
+        'pisell2.text.personnel-list': string;
+        'pisell2.text.load-more': string;
+        'pisell2.text.add-client.confirm': string;
+        'pisell2.text.search-customer-by-phone-number': string;
+        'pisell2.text.create': string;
+        'pisell2.text.loading': string;
+        'pisell2.text.no-more-data': string;
+        'pisell2.text.client-search.name': string;
+        'pisell2.text.client-search.register-time': string;
+        'pisell2.text.client-search.phone': string;
+        'pisell2.text.client-search.email': string;
+        'pisell2.text.client-search.membership': string;
+    };
+    'zh-CN': {
+        'pisell2.text.leave-empty-for-walk-in': string;
+        'pisell2.text.date-year-text': string;
+        'pisell2.text.date-month-text': string;
+        'pisell2.text.date-day-text': string;
+        'pisell2.text.gender': string;
+        'pisell2.text.gender.male': string;
+        'pisell2.text.gender.female': string;
+        'pisell2.text.birthday': string;
+        'pisell2.text.phone': string;
+        'pisell2.text.email': string;
+        'pisell2.text.lastname': string;
+        'pisell2.text.firstname': string;
+        'pisell2.text.email-error-message': string;
+        'pisell2.text.notes': string;
+        'pisell2.text.save': string;
+        'pisell2.text.save-and-select': string;
+        'pisell2.text.no-results-found': string;
+        'pisell2.text.create-new-client': string;
+        'pisell2.text.result-found': string;
+        'pisell2.text.personnel-list': string;
+        'pisell2.text.add-client.confirm': string;
+        'pisell2.text.load-more': string;
+        'pisell2.text.search-customer-by-phone-number': string;
+        'pisell2.text.create': string;
+        'pisell2.text.loading': string;
+        'pisell2.text.no-more-data': string;
+        'pisell2.text.client-search.name': string;
+        'pisell2.text.client-search.register-time': string;
+        'pisell2.text.client-search.phone': string;
+        'pisell2.text.client-search.email': string;
+        'pisell2.text.client-search.membership': string;
+    };
+    'zh-HK': {
+        'pisell2.text.leave-empty-for-walk-in': string;
+        'pisell2.text.date-year-text': string;
+        'pisell2.text.date-month-text': string;
+        'pisell2.text.date-day-text': string;
+        'pisell2.text.gender': string;
+        'pisell2.text.gender.male': string;
+        'pisell2.text.gender.female': string;
+        'pisell2.text.birthday': string;
+        'pisell2.text.phone': string;
+        'pisell2.text.email': string;
+        'pisell2.text.lastname': string;
+        'pisell2.text.firstname': string;
+        'pisell2.text.email-error-message': string;
+        'pisell2.text.notes': string;
+        'pisell2.text.save': string;
+        'pisell2.text.save-and-select': string;
+        'pisell2.text.no-results-found': string;
+        'pisell2.text.create-new-client': string;
+        'pisell2.text.result-found': string;
+        'pisell2.text.personnel-list': string;
+        'pisell2.text.add-client.confirm': string;
+        'pisell2.text.load-more': string;
+        'pisell2.text.search-customer-by-phone-number': string;
+        'pisell2.text.create': string;
+        'pisell2.text.loading': string;
+        'pisell2.text.no-more-data': string;
+        'pisell2.text.client-search.name': string;
+        'pisell2.text.client-search.register-time': string;
+        'pisell2.text.client-search.phone': string;
+        'pisell2.text.client-search.email': string;
+        'pisell2.text.client-search.membership': string;
+    };
+};
+export default _default;

package/es/plus/clinetSearch/serve.d.ts

@@ -0,0 +1 @@
+export declare const addCustomer: (params: any) => Promise<any>;

package/es/plus/clinetSearch/types.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+export interface ClientData {
+    id: number;
+    display_name: string;
+    created_at: string;
+    phone: string;
+    email: string;
+    channel: string;
+    country_calling_code: string;
+    nickname: string;
+    shop_id: number;
+    updated_at: string;
+}
+export interface ClientSearchProps {
+    dataSource?: any;
+    isShowScanner?: boolean;
+    isShowCamera?: boolean;
+    isShowNFC?: boolean;
+    isShowNewButton?: boolean;
+    newButtonAlign?: 'left' | 'center' | 'right';
+    newButtonText?: string;
+    renderType?: 'modal' | 'drawer' | 'portal' | '';
+    containerProps?: Record<string, any>;
+    isShowSearch?: boolean;
+    isShowSearchCamera?: boolean;
+    searchIcon?: string;
+    placeholder?: string;
+    isShowSearchButton?: boolean;
+    resultSort?: 'asc' | 'desc' | 'custom';
+    sortBy?: string;
+    style?: React.CSSProperties;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onAdd?: () => void;
+    onDataChange?: (data: any) => void;
+    onRowClick?: (record: ClientData, index: number) => void;
+}
+export interface ClientFormData {
+    display_name: string;
+    phone?: string;
+    email?: string;
+    nickname?: string;
+}
+export interface ClientSearchState {
+    modalVisible: boolean;
+    loading: boolean;
+    searchResults: ClientData[];
+    searchValue: string;
+}

package/es/plus/noteModal/AddTempModal.d.ts

@@ -0,0 +1,7 @@
+import './index.less';
+declare const AddTempModal: ({ open, onCancel, onConfirm, }: {
+    open: boolean;
+    onCancel: () => void;
+    onConfirm: (value: string) => void;
+}) => JSX.Element;
+export default AddTempModal;

package/es/plus/noteModal/index.d.ts

@@ -0,0 +1,4 @@
+import { NoteModalComponent } from './types';
+import './index.less';
+declare const NoteModal: NoteModalComponent;
+export default NoteModal;

package/es/plus/noteModal/locales.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    en: {
+        'pisell2.text.note': string;
+        'pisell2.text.note.modal.title': string;
+        'pisell2.text.note.modal.btn.confirm': string;
+        'pisell2.text.note.modal.btn.cancel': string;
+        'pisell2.text.note.modal.btn.delete': string;
+        'pisell2.text.note.modal.btn.add.template': string;
+        'pisell2.text.note.modal.placeholder': string;
+        'pisell2.text.note.modal.add.template.title': string;
+    };
+    'zh-CN': {
+        'pisell2.text.note': string;
+        'pisell2.text.note.modal.title': string;
+        'pisell2.text.note.modal.btn.confirm': string;
+        'pisell2.text.note.modal.btn.cancel': string;
+        'pisell2.text.note.modal.btn.delete': string;
+        'pisell2.text.note.modal.btn.add.template': string;
+        'pisell2.text.note.modal.placeholder': string;
+        'pisell2.text.note.modal.add.template.title': string;
+    };
+    'zh-HK': {
+        'pisell2.text.note': string;
+        'pisell2.text.note.modal.title': string;
+        'pisell2.text.note.modal.btn.confirm': string;
+        'pisell2.text.note.modal.btn.cancel': string;
+        'pisell2.text.note.modal.btn.delete': string;
+        'pisell2.text.note.modal.btn.add.template': string;
+        'pisell2.text.note.modal.placeholder': string;
+        'pisell2.text.note.modal.add.template.title': string;
+    };
+};
+export default _default;

package/es/plus/noteModal/types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface NoteModalProps {
+    /** 是否显示弹窗 */
+    open?: boolean;
+    /** 弹窗标题 */
+    title?: string;
+    /** 初始内容 */
+    value?: string;
+    /** 确认回调 */
+    onConfirm?: (value: string) => void;
+    /** 删除回调 */
+    onDelete?: () => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+}
+export interface NoteModalComponent extends React.FC<NoteModalProps> {
+}

package/es/pro/comprehensiveSearch/hooks/useNativeScanner.d.ts

@@ -0,0 +1,5 @@
+declare const useNativeScanner: (onChange?: ((val: string) => void) | undefined) => {
+    activeNativeScanner: () => void;
+    isTerminal: any;
+};
+export default useNativeScanner;

package/es/pro/comprehensiveSearch/hooks/useTerminalPeripherals.d.ts

@@ -0,0 +1,9 @@
+declare type Peripherals = {
+    scanner: 'none' | 'connected' | 'disconnect';
+    nfc: 'none' | 'connected' | 'disconnect';
+    camera?: 'none' | 'connected' | 'disconnect';
+};
+declare const useTerminalPeripherals: (onChange?: ((val: string) => void) | undefined) => {
+    peripheralsStatus: Peripherals;
+};
+export default useTerminalPeripherals;

package/es/pro/comprehensiveSearch/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ComprehensiveSearchProps, SearchResult } from './types';
+import './index.less';
+export declare type ComprehensiveSearchRef = {
+    setSearchKeyword: (keyword: string) => void;
+};
+declare const ComprehensiveSearch: React.ForwardRefExoticComponent<ComprehensiveSearchProps & React.RefAttributes<ComprehensiveSearchRef>>;
+export default ComprehensiveSearch;
+export type { ComprehensiveSearchProps, SearchResult };

package/es/pro/comprehensiveSearch/locales.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    en: {
+        'pisell2.text.new-client': string;
+        'pisell2.comprehensive-search.placeholder': string;
+        'pisell2.comprehensive-search.empty': string;
+    };
+    'zh-CN': {
+        'pisell2.text.new-client': string;
+        'pisell2.comprehensive-search.placeholder': string;
+        'pisell2.comprehensive-search.empty': string;
+    };
+    'zh-HK': {
+        'pisell2.text.new-client': string;
+        'pisell2.comprehensive-search.placeholder': string;
+        'pisell2.comprehensive-search.empty': string;
+    };
+};
+export default _default;

package/es/pro/comprehensiveSearch/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export interface ComprehensiveSearchProps {
+    dataSource?: any;
+    isShowScanner?: boolean;
+    isShowCamera?: boolean;
+    isShowNFC?: boolean;
+    isShowNewButton?: boolean;
+    newButtonAlign?: 'left' | 'center' | 'right';
+    newButtonText?: string;
+    newDialogDataSource?: any;
+    renderType?: 'modal' | 'drawer' | 'portal' | '';
+    containerProps?: Record<string, any>;
+    isShowSearch?: boolean;
+    isShowSearchCamera?: boolean;
+    searchIcon?: string;
+    placeholder?: string;
+    isShowSearchButton?: boolean;
+    resultDisplay?: 'list' | 'grid';
+    resultSort?: 'asc' | 'desc' | 'custom';
+    sortBy?: string;
+    style?: React.CSSProperties;
+    loading?: boolean;
+    onSearchTextChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onAdd?: () => void;
+    onDataChange?: (data: any) => void;
+    onRowClick?: (record: any, index: any) => void;
+}
+export interface SearchResult {
+    [key: string]: any;
+}

package/es/pro/numberKeyboard/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.less';
+interface NumberKeyboardProps {
+    /** 输入框的值 */
+    value?: string;
+    /** 输入框的placeholder */
+    placeholder?: string;
+    /** 输入框的最大长度 */
+    maxLength?: number;
+    /** 最大值 */
+    max?: number;
+    /** 确认按钮的文本 */
+    okText?: string;
+    /** 删除按钮的文本 */
+    deleteText?: string | React.ReactNode;
+    /** 输入框的值发生变化时回调 */
+    onChange?: (num: string) => void;
+    /** 确认按钮点击时回调 */
+    onOk?: () => void;
+    /** 删除按钮点击时回调 */
+    onDelete?: (num: string) => void;
+    /** 键盘整体样式 */
+    style?: React.CSSProperties;
+    /** 输入框的样式 */
+    inputStyle?: React.CSSProperties;
+}
+declare const NumberKeyboard: (props: NumberKeyboardProps) => JSX.Element;
+export default NumberKeyboard;

package/es/pro/numberKeyboard/locales.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    en: {
+        'pisell2.number.keyboard.ok': string;
+    };
+    'zh-CN': {
+        'pisell2.number.keyboard.ok': string;
+    };
+    'zh-HK': {
+        'pisell2.number.keyboard.ok': string;
+    };
+};
+export default _default;

package/es/pro/pisellNumberSelector/example.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Example: React.FC;
+export default Example;

package/es/pro/pisellNumberSelector/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './index.less';
+export interface PisellNumberSelectorProps {
+    /** 当前值 */
+    value?: number;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步长 */
+    step?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 值变化回调 */
+    onChange?: (value: number) => void;
+    /** 组件尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 自定义类名 */
+    className?: string;
+    /** 是否启用价格调整面板 */
+    enablePriceAdjust?: boolean;
+    /** 原始价格（用于价格调整） */
+    originValue?: number;
+}
+declare const PisellNumberSelector: React.FC<PisellNumberSelectorProps>;
+export default PisellNumberSelector;

package/es/pro/pisellNumberSelector/index.less

@@ -188,6 +188,6 @@
 
   .virtual-keyboard-input-delete-icon {
     font-size: 16px;
-    color: #666;
+    color: #000;
   }
 }