@edvisor/product-language 0.3.0 → 0.4.0

package/lib/components/select/components/value.d.ts

@@ -0,0 +1,4 @@
+import { FC } from '@helpers';
+import { IValueProps } from '../types';
+declare const _default: FC<IValueProps, {}>;
+export default _default;

package/lib/components/select/index.d.ts

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

package/lib/components/select/select.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PropsWithChildren } from '@helpers';
+import { ISelectProps } from './types';
+export declare const SelectImpl: <T>(props: ISelectProps<T>, ref: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+export declare const Select: <T>(props: ISelectProps<T> & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof SelectImpl>;

package/lib/components/select/types.d.ts

@@ -0,0 +1,124 @@
+/// <reference types="react" />
+import { FC } from '@helpers';
+export interface ISelectProps<T = any> {
+    className?: string;
+    options?: IOption<T>[];
+    value?: T | T[];
+    placeholder?: string;
+    emptyText?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    multi?: boolean;
+    invalid?: boolean;
+    errors?: {
+        message: string;
+    }[];
+    rowHeight?: number;
+    menuHeight?: number;
+    menuPosition?: 'top' | 'bottom';
+    label?: string;
+    labelPosition?: 'top' | 'side';
+    labelComponent?: FC<LabelComponentProps<T>>;
+    menuComponent?: FC<IMenuComponentProps>;
+    onChange?(value: T[] | T | undefined, option?: IOption<T>): void;
+    onSearch?(value: string): void;
+    onOpen?(): void;
+    onClose?(): void;
+}
+export interface IValueProps {
+    options: ISelectProps['options'];
+    value: ISelectProps['value'];
+    placeholder: ISelectProps['placeholder'];
+    clearable: ISelectProps['clearable'];
+    searchable: ISelectProps['searchable'];
+    labelComponent: ISelectProps['labelComponent'];
+    multi: ISelectProps['multi'];
+    disabled: ISelectProps['disabled'];
+    invalid: ISelectProps['invalid'];
+    errors: ISelectProps['errors'];
+    search?: string;
+    open: boolean;
+    focused?: boolean;
+    label: ISelectProps['label'];
+    labelPosition: ISelectProps['labelPosition'];
+    onClear(): void;
+    onClick(): void;
+    onSearch(search: string): void;
+    onSearchFocus(): void;
+    onSearchBlur(): void;
+    onOptionRemove(value: any): void;
+}
+export interface IMenuContainerProps {
+    className?: string;
+    menuTop?: number;
+    menuHeight?: RectSize;
+    menuPosition?: ISelectProps['menuPosition'];
+    invalid?: boolean;
+    labelPosition?: string;
+    label?: string;
+    children?: React.ReactNode;
+    onRef?(el: HTMLDivElement | undefined): void;
+    onClick?(el: React.MouseEvent<HTMLDivElement>): void;
+}
+declare type RectSize = number | 'auto';
+export interface IRect {
+    left: number;
+    top: number;
+    width: RectSize;
+    height: RectSize;
+}
+export interface IValueComponentMultiProps<T = any> extends IValueComponentSingleProps<T> {
+    options: IOption<T>[];
+    onRemove(value: T): void;
+}
+export declare type LabelComponentProps<T = any> = IOption<T> & {
+    active: boolean;
+    type: 'value-single' | 'value-multi' | 'option';
+};
+export interface IValueComponentSingleProps<T = any> {
+    className?: string;
+    option: IOption<T>;
+    labelComponent: ISelectProps['labelComponent'];
+}
+export interface IOptionComponentProps<T extends IOption = any> {
+    className?: string;
+    option: T;
+    active?: boolean;
+    selected?: boolean;
+    height?: number;
+    labelComponent: ISelectProps['labelComponent'];
+    search?: string;
+    onSelect(value: T['value'], option?: T): void;
+}
+export interface IOption<T = any> {
+    value: T;
+    disabled?: boolean;
+    label: string;
+    [key: string]: any;
+}
+export interface IMenuComponentProps<T = any> {
+    options: ISelectProps['options'];
+    value: ISelectProps['value'];
+    labelComponent: ISelectProps['labelComponent'];
+    menuComponent: ISelectProps['menuComponent'];
+    emptyText: ISelectProps['emptyText'];
+    multi: ISelectProps['multi'];
+    rowHeight: ISelectProps['rowHeight'];
+    menuHeight: ISelectProps['menuHeight'];
+    menuPosition: ISelectProps['menuPosition'];
+    invalid: ISelectProps['invalid'];
+    selectedIndex?: number;
+    open: boolean;
+    search?: string;
+    labelPosition?: string;
+    label?: string;
+    onSelect(value: T extends any[] ? T[] : T, option?: T): void;
+}
+export interface IPosition {
+    menuPosition?: 'top' | 'bottom';
+    menuHeight?: RectSize;
+    label?: string;
+    labelPosition?: string;
+}
+export {};

package/lib/components/select/utils.d.ts

@@ -0,0 +1,15 @@
+import { IOption, IPosition } from './types';
+export declare function getDocument(): Document | undefined;
+export declare function equal(valueA: any, valueB: any): boolean;
+export declare function getValueOptions(options: IOption[], value: any, multi: boolean | undefined): IOption<any>[];
+export declare const keys: {
+    ARROW_UP: string;
+    ARROW_DOWN: string;
+    ENTER: string;
+    TAB: string;
+    ESC: string;
+    BACKSPACE: string;
+    SPACE: string;
+};
+export declare function toKey(value: any): string | number;
+export declare const topPosition: (props: IPosition) => string;

package/lib/components/spinner/index.d.ts

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

package/lib/components/spinner/spinner-size-flags.d.ts

@@ -0,0 +1,10 @@
+import { MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers';
+declare const enum SpinnerSize {
+    small = 1,
+    medium = 2,
+    large = 4
+}
+declare type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>;
+export declare type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> & PropsWithChildren;
+export declare function getValuesBySize(props: SpinnerProps): string;
+export {};

package/lib/components/spinner/spinner.d.ts

@@ -0,0 +1,9 @@
+import { SpinnerProps } from './spinner-size-flags';
+import { FC } from '@helpers';
+declare type IProps = SpinnerProps & {
+    onPrimary?: boolean;
+    onCritical?: boolean;
+    className?: string;
+};
+export declare const Spinner: FC<IProps>;
+export {};

package/lib/components/tabs/components/index.d.ts

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

package/lib/components/tabs/components/tab.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { FC, PropsWithChildren } from '@helpers';
+export interface ITabProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+    Prefix?: FC<HTMLAttributes<HTMLElement>>;
+    selected?: boolean;
+}
+export declare const Tab: FC<ITabProps>;

package/lib/components/tabs/index.d.ts

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

package/lib/components/tabs/tabs.d.ts

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren, Slot, StylableSlot } from '@helpers';
+declare class Content extends StylableSlot {
+}
+declare class Navigation extends Slot {
+}
+declare type SubComponents = {
+    Content: typeof Content;
+    TabList: typeof Navigation;
+};
+interface ITabsProps extends PropsWithChildren {
+    selected: number;
+    onChange?: (selected: number) => void;
+}
+export declare const Tabs: FC<ITabsProps, SubComponents>;
+export { Tab } from './components';

package/lib/components/tag/components/close-button.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from '@helpers';
+import { HTMLAttributes } from 'react';
+interface IProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare const CloseButton: FC<IProps>;
+export {};

package/lib/components/tag/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './close-button';
+export * from './tag-label';

package/lib/components/tag/components/tag-label.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from '@helpers';
+import { HTMLAttributes } from 'react';
+interface IProps extends HTMLAttributes<HTMLLabelElement>, PropsWithChildren {
+    closable?: boolean;
+    disabled?: boolean;
+}
+export declare const TagLabel: FC<IProps>;
+export {};

package/lib/components/tag/index.d.ts

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

package/lib/components/tag/tag.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from '@helpers';
+import { HTMLAttributes } from 'react';
+interface IProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    closable?: boolean;
+    disabled?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const Tag: FC<IProps>;
+export {};

package/lib/components/thumbnail/index.d.ts

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

package/lib/components/thumbnail/thumbnail-size-flags.d.ts

@@ -0,0 +1,10 @@
+import { MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers';
+declare const enum ThumbnailSize {
+    small = 1,
+    medium = 2,
+    large = 4
+}
+declare type ThumbnailSizes<T> = MappedEnum<typeof ThumbnailSize, T>;
+export declare type ThumbnailSizeProps = Partial<RequireOnlyOne<ThumbnailSizes<boolean>>> & PropsWithChildren;
+export declare function getValuesBySize(props: ThumbnailSizeProps): string;
+export {};

package/lib/components/thumbnail/thumbnail.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@helpers';
+import { ThumbnailSizeProps } from './thumbnail-size-flags';
+interface IThumbnailProps {
+    imageUrl?: string;
+    imageLabel?: string;
+    className?: string;
+}
+declare type IProps = IThumbnailProps & ThumbnailSizeProps;
+export declare const Thumbnail: FC<IProps>;
+export {};

package/lib/components/typography/index.d.ts

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

package/lib/components/typography/typography.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { IBodyProps, ILabelProps } from '@foundations';
+import { FC, PropsWithChildren } from '@helpers';
+import { ITextAspectProps, ITransientTextAspectProps } from 'foundations/typography/text-aspect-flags';
+export declare type ITextComponentProps = ITextAspectProps & {
+    emphasis?: boolean;
+} & HTMLAttributes<HTMLElement> & PropsWithChildren;
+declare type ITransientTextComponentProps = ITransientTextAspectProps & {
+    $emphasis?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export declare const Display: FC<ITextComponentProps>;
+export declare const Heading1: FC<ITextComponentProps>;
+export declare const Heading2: FC<ITextComponentProps>;
+export declare const Heading3: FC<ITextComponentProps>;
+export declare const Heading4: FC<ITextComponentProps>;
+export declare const BODY_LARGE: import("styled-components").StyledComponent<"div", any, {} & (ITransientTextComponentProps & IBodyProps), never>;
+export declare const BodyLarge: FC<ITextComponentProps & IBodyProps>;
+export declare const BODY: import("styled-components").StyledComponent<"div", any, {} & (ITransientTextComponentProps & IBodyProps), never>;
+export declare const Body: FC<ITextComponentProps & IBodyProps>;
+export declare const CAPTION: import("styled-components").StyledComponent<"div", any, {} & ITransientTextComponentProps, never>;
+export declare const Caption: FC<ITextComponentProps>;
+export declare const LABEL: import("styled-components").StyledComponent<"div", any, {} & (ITransientTextComponentProps & ILabelProps), never>;
+export declare const Label: FC<ITextComponentProps & ILabelProps>;
+export {};

package/lib/foundations/color-system/base-palette/base-palette.d.ts

@@ -0,0 +1,76 @@
+import { Hex } from '@helpers';
+export declare type ColorPalette = {
+    [key in string]: Hex;
+};
+export declare const WHITE: "#FFFFFF";
+export declare const BLACK: "#000000";
+export declare const GRAY: {
+    readonly 50: "#F9FAFB";
+    readonly 100: "#F3F4F6";
+    readonly 200: "#E5E7EB";
+    readonly 300: "#D1D5DB";
+    readonly 400: "#9CA3AF";
+    readonly 500: "#6B7280";
+    readonly 600: "#46505D";
+    readonly 700: "#374151";
+    readonly 800: "#1F2937";
+    readonly 900: "#111827";
+};
+export declare const BLUE: {
+    readonly 50: "#F0F6FF";
+    readonly 100: "#DBEAFE";
+    readonly 200: "#BFDBFE";
+    readonly 300: "#93C5FD";
+    readonly 400: "#60A5FA";
+    readonly 500: "#3B82F6";
+    readonly 600: "#2563EB";
+    readonly 700: "#1D4ED8";
+    readonly 800: "#1E40AF";
+    readonly 900: "#1E3A8A";
+};
+export declare const GREEN: {
+    readonly 50: "#F1FEF8";
+    readonly 100: "#D1FAE5";
+    readonly 200: "#A7F3D0";
+    readonly 300: "#6EE7B7";
+    readonly 400: "#34D399";
+    readonly 500: "#10B981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065F46";
+    readonly 900: "#064E3B";
+};
+export declare const ORANGE: {
+    readonly 50: "#FFFAF5";
+    readonly 100: "#FFEDD5";
+    readonly 200: "#FED7AA";
+    readonly 300: "#FDBA74";
+    readonly 400: "#FB923C";
+    readonly 500: "#F97316";
+    readonly 600: "#EA580C";
+    readonly 700: "#C2410C";
+    readonly 800: "#9A3412";
+    readonly 900: "#7C2D12";
+};
+export declare const RED: {
+    readonly 50: "#FEF6F6";
+    readonly 100: "#FEE2E2";
+    readonly 200: "#FECACA";
+    readonly 300: "#FCA5A5";
+    readonly 400: "#F87171";
+    readonly 500: "#EF4444";
+    readonly 600: "#DC2626";
+    readonly 700: "#B91C1C";
+    readonly 800: "#991B1B";
+    readonly 900: "#7F1D1D";
+};
+export declare const SHADES: {
+    readonly White: "#FFFFFF";
+    readonly Black: "#000000";
+};
+export declare const BRAND: {
+    readonly Brand: "#0792D4";
+};
+declare type ValuesOf<T> = T[keyof T];
+export declare type COLOR = ValuesOf<typeof BRAND> | ValuesOf<typeof BLUE> | ValuesOf<typeof SHADES> | ValuesOf<typeof RED> | ValuesOf<typeof ORANGE> | ValuesOf<typeof GREEN> | ValuesOf<typeof GRAY>;
+export {};

package/lib/foundations/color-system/base-palette/index.d.ts

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

package/lib/foundations/color-system/color-guidelines/color-guidelines.d.ts

@@ -0,0 +1,132 @@
+export declare const Background: {
+    readonly Default: "#F3F4F6";
+};
+export declare const Surface: {
+    Default: {
+        Default: "#FFFFFF";
+        Subdued: "#F9FAFB";
+        Hover: "#F3F4F6";
+        Pressed: "#E5E7EB";
+        Depressed: "#E5E7EB";
+        Inverse: "#1F2937";
+    };
+    Selected: {
+        Default: "#F0F6FF";
+        Hover: "#DBEAFE";
+        Pressed: "#BFDBFE";
+    };
+    Critical: {
+        Default: "#FECACA";
+        Subdued: "#FEF6F6";
+        Hover: "#FEF6F6";
+        Pressed: "#FEE2E2";
+    };
+    Warning: {
+        Default: "#FED7AA";
+        Subdued: "#FFFAF5";
+    };
+    Success: {
+        Default: "#A7F3D0";
+        Subdued: "#F1FEF8";
+        Depressed: "#10B981";
+    };
+    Highlight: {
+        Default: "#BFDBFE";
+        Subdued: "#F0F6FF";
+    };
+    Neutral: {
+        Default: "#E5E7EB";
+        Subdued: "#F3F4F6";
+        Hover: "#D1D5DB";
+        Pressed: "#9CA3AF";
+    };
+};
+export declare const Borders: {
+    Default: {
+        Default: "#D1D5DB";
+        Subdued: "#E5E7EB";
+        Light: "#FFFFFF";
+        Dark: "#9CA3AF";
+    };
+    Critical: {
+        Default: "#DC2626";
+        Subdued: "#FCA5A5";
+    };
+    Warning: {
+        Subdued: "#FDBA74";
+    };
+    Success: {
+        Subdued: "#6EE7B7";
+    };
+    Highlight: {
+        Default: "#2563EB";
+        Subdued: "#93C5FD";
+    };
+};
+export declare const Focused: {
+    Default: "#60A5FA";
+};
+export declare const Text: {
+    Default: "#1F2937";
+    Subdued: "#6B7280";
+    Light: "#9CA3AF";
+    Critical: "#DC2626";
+    Success: "#059669";
+    OnPrimary: "#FFFFFF";
+    OnCritical: "#FFFFFF";
+};
+export declare const Icons: {
+    Default: "#6B7280";
+    Subdued: "#9CA3AF";
+    Hover: "#1F2937";
+    Pressed: "#46505D";
+    Disabled: "#D1D5DB";
+    Critical: "#DC2626";
+    Warning: "#F97316";
+    Success: "#059669";
+    Highlight: "#2563EB";
+    OnPrimary: "#FFFFFF";
+    OnCritical: "#FFFFFF";
+};
+export declare const Interactive: {
+    Default: {
+        Default: "#2563EB";
+        Hover: "#1E40AF";
+        Pressed: "#1E40AF";
+        Disabled: "#9CA3AF";
+    };
+    Subtle: {
+        Default: "#1F2937";
+        Hover: "#1F2937";
+        Pressed: "#1F2937";
+        Disabled: "#9CA3AF";
+    };
+};
+export declare const Actions: {
+    Primary: {
+        Default: "#2563EB";
+        Hover: "#1D4ED8";
+        Pressed: "#1E40AF";
+        Depressed: "#1E3A8A";
+        Disabled: `#${string}`;
+    };
+    Secondary: {
+        Default: "#FFFFFF";
+        Hover: `#${string}`;
+        Pressed: `#${string}`;
+        Depressed: "#6B7280";
+        Disabled: `#${string}`;
+    };
+    Critical: {
+        Default: "#DC2626";
+        Hover: "#B91C1C";
+        Pressed: "#991B1B";
+        Disabled: `#${string}`;
+    };
+    SecondaryCritical: {
+        Default: "#FFFFFF";
+        Hover: "#B91C1C";
+        Pressed: "#991B1B";
+        Disabled: `#${string}`;
+    };
+};

package/lib/foundations/color-system/color-guidelines/index.d.ts

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

package/lib/foundations/color-system/components/color-sample.d.ts

@@ -0,0 +1,17 @@
+import { FC, Hex } from '@helpers';
+interface IColorRectangleProps {
+    name: string;
+    hex: Hex;
+    border?: Hex;
+}
+export declare const ColorRectangle: FC<IColorRectangleProps>;
+interface IColorSquareProps {
+    name: string;
+    colorId: string;
+    hex: Hex;
+    /** if true the color will only show in the border
+     * rather than as a fill color */
+    border?: Hex;
+}
+export declare const ColorSquare: FC<IColorSquareProps>;
+export {};

package/lib/foundations/color-system/components/index.d.ts

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

package/lib/foundations/color-system/index.d.ts

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

package/lib/foundations/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color-system';
+export * from './typography';
+export * from './spacing';
+export * from './shadows';

package/lib/foundations/shadows/components.d.ts

@@ -0,0 +1,8 @@
+declare const ShadowSm: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Shadow: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowMd: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowLg: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowXl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Shadow2Xl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ShadowInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ShadowSm, Shadow, ShadowLg, ShadowMd, ShadowXl, Shadow2Xl, ShadowInner, };

package/lib/foundations/shadows/index.d.ts

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

package/lib/foundations/shadows/shadows.d.ts

@@ -0,0 +1,8 @@
+declare const shadowSm: import("styled-components").FlattenSimpleInterpolation;
+declare const shadow: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowMd: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowLg: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowXl: import("styled-components").FlattenSimpleInterpolation;
+declare const shadow2Xl: import("styled-components").FlattenSimpleInterpolation;
+declare const shadowInner: import("styled-components").FlattenSimpleInterpolation;
+export { shadowSm, shadow, shadowMd, shadowLg, shadowXl, shadow2Xl, shadowInner, };

package/lib/foundations/spacing/index.d.ts

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

package/lib/foundations/spacing/spacing-guidelines.d.ts

@@ -0,0 +1,22 @@
+import { SPACING } from './spacing';
+export declare const Padding: {
+    readonly none: 0;
+    readonly xxxs: SPACING.Size2;
+    readonly xxs: SPACING.Size4;
+    readonly xs: SPACING.Size8;
+    readonly s: SPACING.Size12;
+    readonly m: SPACING.Size16;
+    readonly l: SPACING.Size24;
+    readonly xl: SPACING.Size32;
+};
+export declare const Margin: {
+    readonly none: 0;
+    readonly xxxs: SPACING.Size2;
+    readonly xxs: SPACING.Size4;
+    readonly xs: SPACING.Size8;
+    readonly s: SPACING.Size12;
+    readonly m: SPACING.Size16;
+    readonly l: SPACING.Size24;
+    readonly xl: SPACING.Size32;
+    readonly xxl: SPACING.Size64;
+};

package/lib/foundations/spacing/spacing.d.ts

@@ -0,0 +1,18 @@
+export declare enum SPACING {
+    Size2 = "2px",
+    Size4 = "4px",
+    Size8 = "8px",
+    Size12 = "12px",
+    Size16 = "16px",
+    Size24 = "24px",
+    Size32 = "32px",
+    Size64 = "64px",
+    Size96 = "96px",
+    Size128 = "128px",
+    Size192 = "192px",
+    Size256 = "256px",
+    Size384 = "384px",
+    Size512 = "512px",
+    Size640 = "640px",
+    Size768 = "768px"
+}

package/lib/foundations/typography/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const enum FontWeight {
+    Regular = "400",
+    Medium = "500",
+    SemiBold = "600"
+}
+export declare const FontSize: {
+    readonly a: "13px";
+    readonly b: "14px";
+    readonly c: "16px";
+    readonly d: "18px";
+    readonly e: "20px";
+    readonly f: "28px";
+    readonly g: "36px";
+};
+export declare const LineHeight: {
+    readonly a: "16px";
+    readonly b: "20px";
+    readonly c: "24px";
+    readonly d: "28px";
+    readonly e: "32px";
+    readonly f: "44px";
+};