@ceed/cds 0.0.127 → 0.0.129

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,165 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = void 0;
-var react_1 = __importDefault(require("react"));
-var joy_1 = require("@mui/joy");
-var colorScheme = {
-    palette: {
-        danger: {
-            "50": "#FEF3F2",
-            "100": "#FDE6E5",
-            "200": "#FBC7C4",
-            "300": "#F89E99",
-            "400": "#F46E66",
-            "500": "#DC0D00",
-            "600": "#AB0F00",
-            "700": "#791000",
-            "800": "#430A0A",
-            "900": "#240505",
-        },
-        neutral: {
-            "50": "#FAFBFC",
-            "100": "#F3F5F7",
-            "200": "#EBECF0",
-            "300": "#D1D5DB",
-            "400": "#A2AAB8",
-            "500": "#5E6C83",
-            "600": "#505E79",
-            "700": "#253858",
-            "800": "#071B36",
-            "900": "#0B0D0E",
-        },
-        primary: {
-            "50": "#F2F7FE",
-            "100": "#E8F0FD",
-            "200": "#CCDFFC",
-            "300": "#9DC1F9",
-            "400": "#4D8EF3",
-            "500": "#015DEE",
-            "600": "#0154D6",
-            "700": "#0141A7",
-            "800": "#00255F",
-            "900": "#000F26",
-        },
-        warning: {
-            "50": "#FEF8F2",
-            "100": "#FEF1E5",
-            "200": "#FCE1C4",
-            "300": "#FABD7F",
-            "400": "#F57C00",
-            "500": "#AF5100",
-            "600": "#843600",
-            "700": "#672600",
-            "800": "#421400",
-            "900": "#1d1002",
-        },
-    },
-};
-var defaultTheme = (0, joy_1.extendTheme)({
-    cssVarPrefix: "ceed",
-    spacing: 4,
-    breakpoints: {
-        values: {
-            xs: 0,
-            sm: 360,
-            md: 600,
-            lg: 900,
-            xl: 1280,
-        },
-    },
-    fontFamily: {
-        display: '"Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")',
-    },
-    typography: {
-        "marketing-lg": {
-            color: "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
-            fontFamily: 'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
-            fontSize: "var(--ceed-fontSize-marketing-lg, 2.625rem)",
-            fontWeight: "var(--ceed-fontWeight-lg, 600)",
-            letterSpacing: "-0.025em",
-            lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
-        },
-    },
-    colorSchemes: {
-        light: colorScheme,
-        dark: colorScheme,
-    },
-    components: {
-        JoyTypography: {
-            defaultProps: {
-                levelMapping: {
-                    "marketing-lg": "div",
-                },
-            },
-        },
-        JoyTable: {
-            defaultProps: {
-                size: "sm",
-                borderAxis: "bothBetween",
-            },
-            styleOverrides: {
-                root: function (_a) {
-                    var _b;
-                    var theme = _a.theme;
-                    return (_b = {
-                            "--TableRow-stripeBackground": theme.palette.background.level1,
-                            "--TableCell-selectedBackground": theme.palette.background.level2,
-                            "--TableRow-hoverBackground": theme.palette.background.level3,
-                            "& tbody tr[aria-checked=false] th": {
-                                "--TableCell-headBackground": "transparent",
-                            },
-                            "& tbody tr[aria-checked=true]:hover th": {
-                                "--TableCell-headBackground": "var(--TableRow-hoverBackground)",
-                            }
-                        },
-                        _b["& tbody tr[aria-checked=true]:not(:hover) th"] = {
-                            "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
-                        },
-                        _b["& tbody tr[aria-checked=true]:not(:hover) td"] = {
-                            "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
-                        },
-                        _b["& .".concat(joy_1.checkboxClasses.root)] = {
-                            verticalAlign: "middle",
-                        },
-                        _b);
-                },
-            },
-        },
-        JoyTooltip: {
-            defaultProps: {
-                size: "sm",
-                placement: "top",
-            },
-        },
-    },
-});
-function ThemeProvider(props) {
-    var _a;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(joy_1.CssVarsProvider, { theme: defaultTheme },
-            react_1.default.createElement(joy_1.CssBaseline, null),
-            react_1.default.createElement(joy_1.GlobalStyles, { styles: {
-                    body: (_a = {
-                            "--ceed-fontSize-marketing-lg": "2.625rem"
-                        },
-                        _a[defaultTheme.breakpoints.down("md")] = {
-                            "--ceed-fontSize-xs": "calc(".concat(defaultTheme.fontSize.xs, " * 0.875)"),
-                            "--ceed-fontSize-sm": "calc(".concat(defaultTheme.fontSize.sm, " * 0.875)"),
-                            "--ceed-fontSize-md": "calc(".concat(defaultTheme.fontSize.md, " * 0.875)"),
-                            "--ceed-fontSize-lg": "calc(".concat(defaultTheme.fontSize.lg, " * 0.875)"),
-                            "--ceed-fontSize-xl": "calc(".concat(defaultTheme.fontSize.xl, " * 0.875)"),
-                            "--ceed-fontSize-xl2": "calc(".concat(defaultTheme.fontSize.xl2, " * 0.875)"),
-                            "--ceed-fontSize-xl3": "calc(".concat(defaultTheme.fontSize.xl3, " * 0.875)"),
-                            "--ceed-fontSize-xl4": "calc(".concat(defaultTheme.fontSize.xl4, " * 0.875)"),
-                            // Only typography fontSize
-                            "--ceed-fontSize-marketing-lg": "calc(2.625rem * 0.875)",
-                        },
-                        _a),
-                } }),
-            props.children)));
-}
-exports.ThemeProvider = ThemeProvider;
-ThemeProvider.displayName = "ThemeProvider";

package/dist/components/ThemeProvider/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ThemeProvider_1 = require("./ThemeProvider");
-__exportStar(require("./ThemeProvider"), exports);
-exports.default = ThemeProvider_1.ThemeProvider;

package/dist/components/Tooltip/Tooltip.js

@@ -1,34 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-var react_1 = __importDefault(require("react"));
-var joy_1 = require("@mui/joy");
-var framer_motion_1 = require("framer-motion");
-var MotionTooltip = (0, framer_motion_1.motion)(joy_1.Tooltip);
-var Tooltip = function (props) {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return react_1.default.createElement(MotionTooltip, __assign({}, props));
-};
-exports.Tooltip = Tooltip;
-Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var Tooltip_1 = require("./Tooltip");
-__exportStar(require("./Tooltip"), exports);
-exports.default = Tooltip_1.Tooltip;

package/dist/components/Typography/Typography.js

@@ -1,34 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = void 0;
-var react_1 = __importDefault(require("react"));
-var joy_1 = require("@mui/joy");
-var framer_motion_1 = require("framer-motion");
-var MotionTypography = (0, framer_motion_1.motion)(joy_1.Typography);
-var Typography = function (props) {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return react_1.default.createElement(MotionTypography, __assign({}, props));
-};
-exports.Typography = Typography;
-Typography.displayName = "Typography";

package/dist/components/Typography/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var Typography_1 = require("./Typography");
-__exportStar(require("./Typography"), exports);
-exports.default = Typography_1.Typography;

package/dist/components/Uploader/Uploader.js

@@ -1,378 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Uploader = void 0;
-var react_1 = __importStar(require("react"));
-var joy_1 = require("@mui/joy");
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-var CloudUploadRounded_js_1 = __importDefault(require("@mui/icons-material/esm/CloudUploadRounded.js"));
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-var UploadFileRounded_js_1 = __importDefault(require("@mui/icons-material/esm/UploadFileRounded.js"));
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-var ClearRounded_js_1 = __importDefault(require("@mui/icons-material/esm/ClearRounded.js"));
-// @ts-ignore: build된 pragmatic-drag-and-drop의 esm file에 extension이 없어서 에러가 발생함. 따라서 빌드된 js파일을 direct로 import한다.
-var combine_js_1 = require("@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/combine.js");
-var adapter_js_1 = require("@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/adapter.js");
-var file_js_1 = require("@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/file.js");
-// @ts-ignore: build된 pragmatic-drag-and-drop의 esm file에 extension이 없어서 에러가 발생함. 따라서 빌드된 js파일을 direct로 import한다.
-var prevent_unhandled_js_1 = require("@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js");
-var Typography_1 = __importDefault(require("../Typography"));
-var Card_1 = require("../Card");
-var Stack_1 = __importDefault(require("../Stack"));
-var IconButton_1 = __importDefault(require("../IconButton"));
-var FormControl_1 = __importDefault(require("../FormControl"));
-var FormHelperText_1 = __importDefault(require("../FormHelperText"));
-var Sheet_1 = __importDefault(require("../Sheet"));
-var FormLabel_1 = __importDefault(require("../FormLabel"));
-var VisuallyHiddenInput = (0, joy_1.styled)("input")({
-    width: "1px",
-    height: "1px",
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    clip: "rect(0 0 0 0)",
-    clipPath: "inset(50%)",
-    position: "absolute",
-});
-var PreviewRoot = (0, joy_1.styled)(Stack_1.default, {
-    name: "Uploader",
-    slot: "PreviewRoot",
-})({});
-var UploadCard = (0, joy_1.styled)(Card_1.Card, {
-    name: "Uploader",
-    slot: "UploadCard",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(2.5),
-        border: "1px solid ".concat(theme.palette.neutral.outlinedBorder),
-    });
-});
-var UploadFileIcon = (0, joy_1.styled)(UploadFileRounded_js_1.default, {
-    name: "Uploader",
-    slot: "UploadFileIcon",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.neutral["400"],
-        width: "32px",
-        height: "32px",
-    });
-});
-var ClearIcon = (0, joy_1.styled)(ClearRounded_js_1.default, {
-    name: "Uploader",
-    slot: "ClearIcon",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.neutral.plainColor,
-        width: "18px",
-        height: "18px",
-    });
-});
-var UNITS = [
-    "byte",
-    "kilobyte",
-    "megabyte",
-    "gigabyte",
-    "terabyte",
-    "petabyte",
-];
-var getFileSize = function (n) {
-    var i = n == 0 ? 0 : Math.floor(Math.log(n) / Math.log(1024));
-    var value = n / Math.pow(1024, i);
-    var unit = UNITS[i];
-    return Intl.NumberFormat("en-us", {
-        style: "unit",
-        unit: unit,
-        unitDisplay: "narrow",
-    }).format(value);
-};
-var Preview = function (props) {
-    // prop destruction
-    var files = props.files, uploaded = props.uploaded, onDelete = props.onDelete;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (react_1.default.createElement(PreviewRoot, { gap: 1 }, __spreadArray(__spreadArray([], uploaded, true), files, true).map(function (file) { return (react_1.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" },
-        react_1.default.createElement(Stack_1.default, { direction: "row", alignItems: "center", gap: 2 },
-            react_1.default.createElement(UploadFileIcon, null),
-            react_1.default.createElement(Stack_1.default, { flex: "1" },
-                react_1.default.createElement(Typography_1.default, { level: "body-sm", textColor: "common.black" }, file.name),
-                !!file.size && (react_1.default.createElement(Typography_1.default, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size)))),
-            react_1.default.createElement(IconButton_1.default, { onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(file); } },
-                react_1.default.createElement(ClearIcon, null))))); })));
-};
-var UploaderRoot = (0, joy_1.styled)(Stack_1.default, {
-    name: "Uploader",
-    slot: "root",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        gap: theme.spacing(2),
-    });
-});
-var FileDropZone = (0, joy_1.styled)(Sheet_1.default, {
-    name: "Uploader",
-    slot: "dropZone",
-    shouldForwardProp: function (prop) { return prop !== "error"; },
-})(function (_a) {
-    var theme = _a.theme, state = _a.state, error = _a.error;
-    return ({
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: theme.spacing(5),
-        gap: theme.spacing(4),
-        cursor: "pointer",
-        backgroundColor: theme.palette.background.surface,
-        border: error
-            ? "1px solid ".concat(theme.palette.danger.outlinedBorder)
-            : state === "idle"
-                ? "1px solid ".concat(theme.palette.neutral.outlinedBorder)
-                : "1px solid ".concat(theme.palette.primary.outlinedBorder),
-    });
-});
-var UploaderIcon = (0, joy_1.styled)(CloudUploadRounded_js_1.default, {
-    name: "Uploader",
-    slot: "iconContainer",
-    shouldForwardProp: function (prop) { return prop !== "error"; },
-})(function (_a) {
-    var theme = _a.theme, state = _a.state, error = _a.error;
-    return ({
-        color: error
-            ? "rgba(".concat(theme.vars.palette.danger.mainChannel, " / 0.6)")
-            : state === "over"
-                ? "rgba(".concat(theme.palette.primary.mainChannel, " / 0.6)")
-                : theme.palette.neutral.softActiveBg,
-        width: "32px",
-        height: "32px",
-    });
-});
-var Uploader = react_1.default.memo(function (props) {
-    // prop destruction
-    var accept = props.accept, minCount = props.minCount, maxCount = props.maxCount, name = props.name, size = props.size, maxFileSize = props.maxFileSize, maxFileTotalSize = props.maxFileTotalSize, onChange = props.onChange, label = props.label, helperText = props.helperText, disabled = props.disabled, onDelete = props.onDelete;
-    // lib hooks
-    // state, ref, querystring hooks
-    var dropZoneRef = (0, react_1.useRef)(null);
-    var inputRef = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(), errorText = _a[0], setErrorText = _a[1];
-    var _b = (0, react_1.useState)([]), files = _b[0], setFiles = _b[1];
-    var _c = (0, react_1.useState)(props.uploaded || []), uploaded = _c[0], setUploaded = _c[1];
-    var _d = (0, react_1.useState)("idle"), previewState = _d[0], setPreviewState = _d[1];
-    // form hooks
-    // query hooks
-    // calculated values
-    var error = (0, react_1.useMemo)(function () { return !!errorText || props.error; }, [props.error, errorText]);
-    var showDropZone = (0, react_1.useMemo)(function () {
-        return !maxCount || (maxCount && __spreadArray(__spreadArray([], uploaded, true), files, true).length !== maxCount);
-    }, [files, maxCount, uploaded]);
-    var addFiles = (0, react_1.useCallback)(function (uploads) {
-        try {
-            var types = (accept === null || accept === void 0 ? void 0 : accept.split(",").map(function (type) { return type.trim().replace(".", "").replace("*", ".*"); })) ||
-                [];
-            var fileExtension_1 = new RegExp("\\b(".concat(types.join("|"), ")\\b"));
-            // NOTE: for error text(ref. figma uploader guide)
-            var lastAccept = types.pop();
-            var acceptError_1 = "Please upload following file types: ".concat(types.join(", "), " and ").concat(lastAccept, ".");
-            uploads.forEach(function (file) {
-                var _a = file.name.split('.'), _ = _a[0], ext = _a[1];
-                if (!fileExtension_1.test(file.type) && !fileExtension_1.test(ext)) {
-                    throw new Error(acceptError_1);
-                }
-            });
-            if (maxFileSize) {
-                uploads.forEach(function (file) {
-                    if (file.size > maxFileSize) {
-                        throw new Error("One or more files exceed the individual file size limit. File must be less than ".concat(getFileSize(maxFileSize), "."));
-                    }
-                });
-            }
-            if (maxFileTotalSize) {
-                var totalFileSize = __spreadArray(__spreadArray([], files, true), uploads, true).reduce(function (acc, file) { return acc + file.size; }, 0);
-                if (totalFileSize > maxFileTotalSize) {
-                    throw new Error("Total file size has exceeded the maximum limit. File must be less than ".concat(getFileSize(maxFileTotalSize), "."));
-                }
-            }
-            var newFiles = __spreadArray(__spreadArray([], files, true), uploads, true);
-            if (maxCount && __spreadArray(__spreadArray([], uploaded, true), newFiles, true).length > maxCount) {
-                throw new Error("File count exceeds the limit: ".concat(maxCount));
-            }
-            onChange === null || onChange === void 0 ? void 0 : onChange({
-                target: {
-                    name: name,
-                    value: newFiles,
-                },
-            });
-            setFiles(newFiles);
-            setErrorText(undefined);
-        }
-        catch (error) {
-            // TODO: localization, internationalization해야하는 reserved 에러 메세지, 필요한가?
-            var err = error;
-            setErrorText(err.message);
-        }
-    }, [files, uploaded, maxCount, accept, maxFileSize, maxFileTotalSize, name, onChange]);
-    // effects
-    (0, react_1.useEffect)(function () {
-        var el = dropZoneRef.current;
-        if (!el) {
-            return;
-        }
-        return (0, combine_js_1.combine)((0, adapter_js_1.dropTargetForExternal)({
-            element: el,
-            canDrop: file_js_1.containsFiles,
-            onDragEnter: function () { return setPreviewState("over"); },
-            onDragLeave: function () { return setPreviewState("potential"); },
-            onDrop: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
-                var files;
-                var source = _b.source;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0: return [4 /*yield*/, (0, file_js_1.getFiles)({ source: source })];
-                        case 1:
-                            files = _c.sent();
-                            addFiles(files);
-                            return [2 /*return*/];
-                    }
-                });
-            }); },
-        }), (0, adapter_js_1.monitorForExternal)({
-            canMonitor: file_js_1.containsFiles,
-            onDragStart: function () {
-                setPreviewState("potential");
-                prevent_unhandled_js_1.preventUnhandled.start();
-            },
-            onDrop: function () {
-                setPreviewState("idle");
-                prevent_unhandled_js_1.preventUnhandled.stop();
-            },
-        }));
-    });
-    (0, react_1.useEffect)(function () {
-        if (inputRef.current && minCount) {
-            if (files.length < minCount) {
-                inputRef.current.setCustomValidity("At least ".concat(minCount, " files are required."));
-            }
-            else {
-                inputRef.current.setCustomValidity("");
-            }
-        }
-    }, [inputRef, files, minCount]);
-    // handlers
-    var handleFileChanged = (0, react_1.useCallback)(function (event) {
-        var files = Array.from(event.target.files || []);
-        addFiles(files);
-    }, [addFiles]);
-    var handleDeleteFile = (0, react_1.useCallback)(function (deletedFile) {
-        if (deletedFile instanceof File) {
-            setFiles(function (current) {
-                onChange === null || onChange === void 0 ? void 0 : onChange({
-                    target: {
-                        name: name,
-                        value: current.filter(function (file) { return file !== deletedFile; }),
-                    },
-                });
-                return current.filter(function (file) { return file !== deletedFile; });
-            });
-        }
-        else {
-            setUploaded(function (uploaded) {
-                return uploaded.filter(function (file) { return file.id !== deletedFile.id; });
-            });
-            // NOTE: 이미 업로드된 파일에 대해서만 onDeleted를 호출한다.
-            onDelete === null || onDelete === void 0 ? void 0 : onDelete(deletedFile);
-        }
-        setErrorText(undefined);
-    }, [name, onChange, onDelete]);
-    var handleUploaderButtonClick = (0, react_1.useCallback)(function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-    }, []);
-    var uploader = (react_1.default.createElement(FileDropZone, { state: previewState, error: !!(error || errorText), ref: dropZoneRef, onClick: handleUploaderButtonClick },
-        react_1.default.createElement(Stack_1.default, { alignItems: "center", gap: 1 },
-            react_1.default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText) })),
-        react_1.default.createElement(VisuallyHiddenInput, { type: "file", onChange: handleFileChanged, multiple: true, accept: accept, disabled: disabled, required: !!minCount, ref: inputRef })));
-    return (react_1.default.createElement(UploaderRoot, null,
-        showDropZone && (react_1.default.createElement(FormControl_1.default, { size: size, error: !!(error || errorText), disabled: disabled, required: !!minCount },
-            label && react_1.default.createElement(FormLabel_1.default, null, label),
-            uploader,
-            errorText ? (react_1.default.createElement(FormHelperText_1.default, null, errorText)) : (helperText && react_1.default.createElement(FormHelperText_1.default, null, helperText)))),
-        __spreadArray(__spreadArray([], uploaded, true), files, true).length > 0 && (react_1.default.createElement(Preview, { files: files, uploaded: uploaded, onDelete: handleDeleteFile }))));
-});
-exports.Uploader = Uploader;