@uxf/ui 1.0.0-beta.99 → 1.0.1

package/tw-tokens/tw-colors.js

@@ -19,6 +19,7 @@ exports.twColors = {
         700: "#334155",
         800: "#1e293b",
         900: "#0f172a",
+        950: "#020617",
     },
     gray: {
         50: "#f9fafb",
@@ -31,6 +32,7 @@ exports.twColors = {
         700: "#374151",
         800: "#1f2937",
         900: "#111827",
+        950: "#030712",
     },
     zinc: {
         50: "#fafafa",
@@ -43,6 +45,7 @@ exports.twColors = {
         700: "#3f3f46",
         800: "#27272a",
         900: "#18181b",
+        950: "#09090b",
     },
     neutral: {
         50: "#fafafa",
@@ -55,6 +58,7 @@ exports.twColors = {
         700: "#404040",
         800: "#262626",
         900: "#171717",
+        950: "#0a0a0a",
     },
     stone: {
         50: "#fafaf9",
@@ -67,6 +71,7 @@ exports.twColors = {
         700: "#44403c",
         800: "#292524",
         900: "#1c1917",
+        950: "#0c0a09",
     },
     red: {
         50: "#fef2f2",
@@ -79,6 +84,7 @@ exports.twColors = {
         700: "#b91c1c",
         800: "#991b1b",
         900: "#7f1d1d",
+        950: "#450a0a",
     },
     orange: {
         50: "#fff7ed",
@@ -91,6 +97,7 @@ exports.twColors = {
         700: "#c2410c",
         800: "#9a3412",
         900: "#7c2d12",
+        950: "#431407",
     },
     amber: {
         50: "#fffbeb",
@@ -103,6 +110,7 @@ exports.twColors = {
         700: "#b45309",
         800: "#92400e",
         900: "#78350f",
+        950: "#451a03",
     },
     yellow: {
         50: "#fefce8",
@@ -115,6 +123,7 @@ exports.twColors = {
         700: "#a16207",
         800: "#854d0e",
         900: "#713f12",
+        950: "#422006",
     },
     lime: {
         50: "#f7fee7",
@@ -127,6 +136,7 @@ exports.twColors = {
         700: "#4d7c0f",
         800: "#3f6212",
         900: "#365314",
+        950: "#1a2e05",
     },
     green: {
         50: "#f0fdf4",
@@ -139,6 +149,7 @@ exports.twColors = {
         700: "#15803d",
         800: "#166534",
         900: "#14532d",
+        950: "#052e16",
     },
     emerald: {
         50: "#ecfdf5",
@@ -151,6 +162,7 @@ exports.twColors = {
         700: "#047857",
         800: "#065f46",
         900: "#064e3b",
+        950: "#022c22",
     },
     teal: {
         50: "#f0fdfa",
@@ -163,6 +175,7 @@ exports.twColors = {
         700: "#0f766e",
         800: "#115e59",
         900: "#134e4a",
+        950: "#042f2e",
     },
     cyan: {
         50: "#ecfeff",
@@ -175,6 +188,7 @@ exports.twColors = {
         700: "#0e7490",
         800: "#155e75",
         900: "#164e63",
+        950: "#083344",
     },
     sky: {
         50: "#f0f9ff",
@@ -187,6 +201,7 @@ exports.twColors = {
         700: "#0369a1",
         800: "#075985",
         900: "#0c4a6e",
+        950: "#082f49",
     },
     blue: {
         50: "#eff6ff",
@@ -199,6 +214,7 @@ exports.twColors = {
         700: "#1d4ed8",
         800: "#1e40af",
         900: "#1e3a8a",
+        950: "#172554",
     },
     indigo: {
         50: "#eef2ff",
@@ -211,6 +227,7 @@ exports.twColors = {
         700: "#4338ca",
         800: "#3730a3",
         900: "#312e81",
+        950: "#1e1b4b",
     },
     violet: {
         50: "#f5f3ff",
@@ -223,6 +240,7 @@ exports.twColors = {
         700: "#6d28d9",
         800: "#5b21b6",
         900: "#4c1d95",
+        950: "#2e1065",
     },
     purple: {
         50: "#faf5ff",
@@ -235,6 +253,7 @@ exports.twColors = {
         700: "#7e22ce",
         800: "#6b21a8",
         900: "#581c87",
+        950: "#3b0764",
     },
     fuchsia: {
         50: "#fdf4ff",
@@ -247,6 +266,7 @@ exports.twColors = {
         700: "#a21caf",
         800: "#86198f",
         900: "#701a75",
+        950: "#4a044e",
     },
     pink: {
         50: "#fdf2f8",
@@ -259,6 +279,7 @@ exports.twColors = {
         700: "#be185d",
         800: "#9d174d",
         900: "#831843",
+        950: "#500724",
     },
     rose: {
         50: "#fff1f2",
@@ -271,6 +292,7 @@ exports.twColors = {
         700: "#be123c",
         800: "#9f1239",
         900: "#881337",
+        950: "#4c0519",
     },
     lightHigh: "#111827",
     lightMedium: "#4b5563",
@@ -291,6 +313,7 @@ exports.twColors = {
         700: "#1d4ed8",
         800: "#1e40af",
         900: "#1e3a8a",
+        DEFAULT: "#3b82f6",
     },
     success: {
         50: "#f0fdf4",
@@ -303,6 +326,7 @@ exports.twColors = {
         700: "#15803d",
         800: "#166534",
         900: "#14532d",
+        DEFAULT: "#22c55e",
     },
     warning: {
         50: "#fff7ed",
@@ -315,6 +339,7 @@ exports.twColors = {
         700: "#c2410c",
         800: "#9a3412",
         900: "#7c2d12",
+        DEFAULT: "#f97316",
     },
     error: {
         50: "#fef2f2",
@@ -327,5 +352,6 @@ exports.twColors = {
         700: "#b91c1c",
         800: "#991b1b",
         900: "#7f1d1d",
+        DEFAULT: "#ef4444",
     },
 };

package/tw-tokens/tw-containers.d.ts

@@ -5,4 +5,4 @@ export declare const twContainers: {
     lg: string;
     xl: string;
 };
-export declare type TwContainers = typeof twContainers;
+export type TwContainers = typeof twContainers;

package/tw-tokens/tw-font-size.d.ts

@@ -52,4 +52,4 @@ export declare const twFontSize: {
     medium2: (string | number)[];
     overline: (string | number)[];
 };
-export declare type TwFontSize = typeof twFontSize;
+export type TwFontSize = typeof twFontSize;

package/tw-tokens/tw-font-weight.d.ts

@@ -9,4 +9,4 @@ export declare const twFontWeight: {
     extrabold: string;
     black: string;
 };
-export declare type TwFontWeight = typeof twFontWeight;
+export type TwFontWeight = typeof twFontWeight;

package/tw-tokens/tw-line-height.d.ts

@@ -14,4 +14,4 @@ export declare const twLineHeight: {
     relaxed: string;
     loose: string;
 };
-export declare type TwLineHeight = typeof twLineHeight;
+export type TwLineHeight = typeof twLineHeight;

package/tw-tokens/tw-screens.d.ts

@@ -5,4 +5,4 @@ export declare const twScreens: {
     lg: string;
     xl: string;
 };
-export declare type TwScreens = typeof twScreens;
+export type TwScreens = typeof twScreens;

package/tw-tokens/tw-spacing.d.ts

@@ -36,4 +36,4 @@ export declare const twSpacing: {
     3.5: string;
     inherit: string;
 };
-export declare type TwSpacing = typeof twSpacing;
+export type TwSpacing = typeof twSpacing;

package/tw-tokens/tw-z-index.d.ts

@@ -16,4 +16,4 @@ export declare const twZIndex: {
     flashMessage: string;
     tooltip: string;
 };
-export declare type TwZIndex = typeof twZIndex;
+export type TwZIndex = typeof twZIndex;

package/types/color.d.ts

@@ -1,2 +1,2 @@
-export declare type ColorScheme = "dark" | "light";
-export declare type HexColor = `#${string}`;
+export type ColorScheme = "dark" | "light";
+export type HexColor = `#${string}`;

package/types/file-response.d.ts

@@ -0,0 +1,12 @@
+export interface FileResponse {
+    extension: string;
+    id: number;
+    name: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export interface UploadOptions {
+    abortController?: AbortController;
+    onUploadProgress?: (progressEvent: UploadProgressEvent) => void;
+}
+export type UploadProgressEvent = Pick<ProgressEvent, "lengthComputable" | "loaded" | "total">;

package/types/file-response.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/form-control-props.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEventHandler } from "react";
 export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
-    value?: ValueType;
-    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    value: ValueType;
+    onChange: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
     onBlur?: FocusEventHandler<ElementType>;
     onFocus?: FocusEventHandler<ElementType>;
     name?: string;
@@ -10,6 +10,11 @@ export interface FormControlProps<ValueType, ElementType = HTMLInputElement, Res
      * The input element will be disabled.
      */
     isDisabled?: boolean;
+    /**
+     * @about
+     * Used to show forced focus indicator.
+     */
+    isFocused?: boolean;
     /**
      * @about
      * It prevents the user from changing the value of the field (not from interacting with the field).
@@ -18,7 +23,6 @@ export interface FormControlProps<ValueType, ElementType = HTMLInputElement, Res
     isInvalid?: boolean;
     isRequired?: boolean;
 }
-export declare type OptionType<ValueType = string, LabelType = string> = {
-    value: ValueType;
-    label: LabelType;
-};
+export interface Clearable {
+    isClearable?: boolean;
+}

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./color";
 export * from "./form-control-props";
+export * from "./file-response";

package/types/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color"), exports);
 __exportStar(require("./form-control-props"), exports);
+__exportStar(require("./file-response"), exports);

package/typography/typography.spec.js

@@ -5,17 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
-(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
-    react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
-    react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
-    react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
-    react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
-    react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
-    react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
-    react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
-    react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
-    react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
-    react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
-    react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
-    react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
+const typography_stories_1 = require("./typography.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(typography_stories_1.Default, null));

package/typography/typography.stories.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 declare const _default: {
     title: string;
     component: null;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/utils/component-structure-analyzer.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 interface ComponentStructureAnalyzerProps {
     children: ReactNode;
 }
-declare function ComponentStructureAnalyzer(props: ComponentStructureAnalyzerProps): JSX.Element;
+declare function ComponentStructureAnalyzer(props: ComponentStructureAnalyzerProps): React.JSX.Element;
 export default ComponentStructureAnalyzer;

package/utils/files/get-file-url.d.ts

@@ -0,0 +1,2 @@
+import { FileResponse } from "@uxf/ui/types";
+export declare function getFileUrl(domain: string, file: FileResponse): string;

package/utils/files/get-file-url.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileUrl = void 0;
+function getFileUrl(domain, file) {
+    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
+}
+exports.getFileUrl = getFileUrl;

package/utils/icons-config.js

@@ -1,5 +1,15 @@
 /** @type {import('@uxf/icons-generator/types').Config['icons']} */
 module.exports = {
+    "arrow-left": {
+        width: 448,
+        height: 512,
+        data: `<path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>`,
+    },
+    "arrow-right": {
+        width: 448,
+        height: 512,
+        data: `<path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>`,
+    },
     calendar: {
         width: 448,
         height: 512,
@@ -60,6 +70,36 @@ module.exports = {
         height: 512,
         data: `<path d="M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z" fill="currentColor"/>`,
     },
+    cloud: {
+        width: 640,
+        height: 512,
+        data: `<path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9-.1-2.7-.2-5.4-.2-8.1 0-88.4 71.6-160 160-160 59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96 0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" fill="currentColor"/>`,
+    },
+    copy: {
+        width: 512,
+        height: 512,
+        data: `<path fill="currentColor" d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />`,
+    },
+    "ellipsis-vertical": {
+        width: 128,
+        height: 512,
+        data: `<path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/>`,
+    },
+    file: {
+        width: 384,
+        height: 512,
+        data: `<path d="M0 64C0 28.65 28.65 0 64 0h165.5c17 0 33.2 6.743 45.2 18.75l90.6 90.55c12 12 18.7 28.2 18.7 45.2V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm336 384V160h-80c-17.7 0-32-14.3-32-32V48H64c-8.84 0-16 7.16-16 16v384c0 8.8 7.16 16 16 16h256c8.8 0 16-7.2 16-16z" fill="currentColor" />`,
+    },
+    imageFile: {
+        width: 384,
+        height: 512,
+        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zM215.3 292c-4.68 0-9.051 2.34-11.65 6.234L164 357.8l-11.68-17.53c-2.62-3.97-7.02-6.27-11.62-6.27-4.682 0-9.053 2.34-11.65 6.234l-46.67 70c-2.865 4.297-3.131 9.82-.6953 14.37C84.09 429.2 88.84 432 93.1 432h196c5.163 0 9.907-2.844 12.34-7.395 2.436-4.551 2.17-10.07-.6953-14.37l-74.67-112C224.4 294.3 220 292 215.3 292zm-87.3-4c17.67 0 32-14.33 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="currentColor" />`,
+    },
+    videoFile: {
+        width: 384,
+        height: 512,
+        data: `<path d="m365.3 93.38-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6c0-16.9-6.7-33.2-18.7-45.22zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160V128c0 17.67 14.33 32 32 32h79.1v288zm-96-160c0-17.67-14.33-32-32-32h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-16.52l43.84 30.2c8.46 5.82 20.16-.08 20.16-10.28V284.6c0-10.16-11.64-16.16-20.16-10.32L240 304.5V288z" fill="currentColor" />`,
+    },
     user: {
         width: 448,
         height: 512,

package/utils/mocks/uploadFIle.mock.d.ts

@@ -0,0 +1,2 @@
+import { FileResponse, UploadOptions } from "@uxf/ui/types";
+export declare function uploadFile(file: File, uploadOptions?: UploadOptions): Promise<FileResponse>;

package/utils/mocks/uploadFIle.mock.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = void 0;
+function getRandomUuid() {
+    return "00000000-0000-0000-0000-000000000000"
+        .split("-")
+        .map((el) => Array(el.length)
+        .fill(0)
+        .map(() => Math.round(Math.random() * 9).toString())
+        .join(""))
+        .join("-");
+}
+function uploadFile(file, uploadOptions) {
+    // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
+    return new Promise((resolve) => {
+        const time = file.size / 10;
+        const interval = time / 10;
+        let loaded = 0;
+        const intervalTimer = window.setInterval(() => {
+            var _a, _b;
+            if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
+                clearInterval(intervalTimer);
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                clearTimeout(timeoutTimer);
+                return;
+            }
+            loaded += (file.size / time) * interval;
+            (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
+                lengthComputable: true,
+                loaded,
+                total: file.size,
+            });
+        }, interval);
+        const timeoutTimer = window.setTimeout(() => {
+            clearInterval(intervalTimer);
+            clearTimeout(timeoutTimer);
+            resolve({
+                id: Math.round(Math.random() * 100000000),
+                uuid: getRandomUuid(),
+                name: file.name,
+                extension: file.name.split(".").slice(-1).join(""),
+            });
+        }, time);
+    });
+}
+exports.uploadFile = uploadFile;

package/utils/snap-test.js

@@ -8,7 +8,12 @@ const react_1 = __importDefault(require("react"));
 const react_test_renderer_1 = require("react-test-renderer");
 const get_provider_config_1 = require("../_private-utils/get-provider-config");
 const context_1 = require("../context");
+const dayjs_1 = __importDefault(require("dayjs"));
 const snapTest = (name, component) => {
+    beforeAll(() => {
+        jest.useFakeTimers();
+        jest.setSystemTime((0, dayjs_1.default)().year(2008).month(1).date(22).hour(22).minute(4).second(35).millisecond(0).toDate());
+    });
     it(name, () => {
         const tree = (0, react_test_renderer_1.create)(react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() }, component)).toJSON();
         expect(tree).toMatchSnapshot();

package/utils/storybook-config.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
 import { ChipColor } from "../chip/chip";
 import { InputGroupSizes } from "../input/theme";
@@ -22,5 +22,5 @@ interface StorybookContextProviderProps {
     config: StorybookConfig;
     children: ReactNode;
 }
-export declare function StorybookContextProvider(props: StorybookContextProviderProps): JSX.Element;
+export declare function StorybookContextProvider(props: StorybookContextProviderProps): React.JSX.Element;
 export {};

package/utils/storybook-config.js

@@ -32,7 +32,7 @@ exports.defaultConfig = {
         variants: ["default", "outlined", "white", "text"],
     },
     Chip: {
-        colors: ["default", "red", "yellow", "green", "blue", "indigo", "purple", "pink"],
+        colors: ["orange", "red", "yellow", "pink", "purple", "indigo", "green", "blue", "default"],
     },
     Input: {
         sizes: ["small", "default", "large"],