@x-plat/design-system 0.1.1

package/dist/components/DatePicker/index.cjs

@@ -0,0 +1,1653 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DatePicker/index.ts
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  InputDatePicker: () => InputDatePicker_default,
+  PopupDatePicker: () => PopupPicker_default,
+  RangeDatePicker: () => RangePicker_default,
+  SingleDatePicker: () => SingleDatePicker_default
+});
+module.exports = __toCommonJS(DatePicker_exports);
+
+// src/components/DatePicker/InputDatePicker/index.tsx
+var import_react4 = __toESM(require("react"), 1);
+
+// src/components/Input/Input.tsx
+var import_react = __toESM(require("react"), 1);
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/tokens/svg/validation/ErrorIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/validation/InfoIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/validation/SuccessIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/Input/InputValidations.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputValidations = (props) => {
+  const { message, status = "default" } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "icon", children: [
+      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SuccessIcon_default, {}),
+      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorIcon_default, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "message", children: message })
+  ] });
+};
+InputValidations.displayName = "InputValidations";
+var InputValidations_default = InputValidations;
+
+// src/components/Input/reg.ts
+var numberAndCommaReg = /^[0-9,]+$/;
+var phoneNumberMaxLengthReg = /^.{0,13}$/;
+var creditCardNumberReg = /^(\d{4}-){3}\d{4}$/;
+var anyReg = /^.*$/;
+var inputTypeReg = {
+  number: numberAndCommaReg,
+  tel: phoneNumberMaxLengthReg,
+  creditCard: creditCardNumberReg,
+  email: anyReg,
+  password: anyReg,
+  text: anyReg
+};
+
+// src/components/Input/utils/tel.ts
+var handleTelBackspace = (prevValue, currValue) => {
+  if (!prevValue || !currValue) return currValue;
+  if (prevValue.length <= currValue.length) return currValue;
+  const prevArr = [...prevValue];
+  const currArr = [...currValue];
+  const diffIndex = prevArr.findIndex((char, idx) => char !== currArr[idx]);
+  if (diffIndex >= 0 && prevArr[diffIndex] === "-") {
+    const chars = prevValue.split("");
+    for (let i = diffIndex - 1; i >= 0; i--) {
+      if (/\d/.test(chars[i])) {
+        chars.splice(i, 1);
+        break;
+      }
+    }
+    return chars.join("");
+  }
+  return currValue;
+};
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var formatValue = (type, value) => {
+  if (value === null || value === void 0) return "";
+  const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
+  switch (type) {
+    case "number": {
+      if (!strValue) return "";
+      const n = typeof value === "number" ? value : Number(strValue.replace(/,/g, ""));
+      return isNaN(n) ? "" : n.toLocaleString("en-US");
+    }
+    case "tel": {
+      const digits = strValue.replace(/\D/g, "");
+      if (!digits) return "";
+      if (digits.startsWith("02")) {
+        if (digits.length <= 2) return digits;
+        if (digits.length <= 6) return digits.replace(/^(02)(\d+)/, "$1-$2");
+        return digits.replace(/^(02)(\d{3,4})(\d{0,4})$/, "$1-$2-$3");
+      }
+      if (/^01[016789]/.test(digits)) {
+        if (digits.length <= 3) return digits;
+        if (digits.length <= 6)
+          return digits.replace(/^(01[016789])(\d+)/, "$1-$2");
+        if (digits.length === 10) {
+          return digits.replace(/^(01[016789])(\d{3})(\d{0,4})$/, "$1-$2-$3");
+        }
+        return digits.replace(/^(01[016789])(\d{4})(\d{0,4})$/, "$1-$2-$3");
+      }
+      if (digits.length <= 3) return digits;
+      if (digits.length <= 6) return digits.replace(/^(\d{3})(\d+)/, "$1-$2");
+      return digits.replace(/^(\d{3})(\d{3,4})(\d{0,4})$/, "$1-$2-$3");
+    }
+    default:
+      return strValue;
+  }
+};
+var parseValue = (type, value) => {
+  switch (type) {
+    case "number": {
+      if (value === "") return "";
+      const n = Number(value.replace(/,/g, ""));
+      return isNaN(n) ? 0 : n;
+    }
+    case "tel":
+      return value.replace(/\D/g, "");
+    default:
+      return value;
+  }
+};
+var Input = import_react.default.forwardRef((props, ref) => {
+  const {
+    value,
+    onChange,
+    type = "text",
+    suffix,
+    className,
+    disabled,
+    validations,
+    ...inputProps
+  } = props;
+  const localValue = formatValue(type, value);
+  const handleChange = (e) => {
+    let val = e.target.value;
+    if (val !== "" && !inputTypeReg[type].test(val)) return;
+    if (type === "tel" && localValue) {
+      val = handleTelBackspace(localValue, val);
+    }
+    if (onChange) {
+      const event = {
+        ...e,
+        target: { value: parseValue(type, val) }
+      };
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              disabled,
+              type: type === "number" ? "text" : type,
+              value: localValue,
+              onChange: handleChange
+            }
+          ),
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "suffix", children: suffix })
+        ]
+      }
+    ),
+    validations && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react2.createElement)(
+      InputValidations_default,
+      {
+        ...validation,
+        key: `${validation.message}_${idx}`
+      }
+    )) })
+  ] });
+});
+Input.displayName = "Input";
+var Input_default = Input;
+
+// src/components/Input/PasswordInput/PasswordInput.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/tokens/svg/Input/CloseEyeIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CloseEyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0.219742 0.219551C0.512654 -0.0731039 0.987475 -0.0732631 1.28029 0.219551L19.6133 18.5526C19.9059 18.8454 19.9059 19.3203 19.6133 19.6131C19.3205 19.9059 18.8457 19.9058 18.5527 19.6131L14.7813 15.8416C13.3403 16.784 11.6591 17.3045 9.92873 17.3328H9.91701C6.70085 17.3328 4.22416 15.4963 2.59865 13.7625C1.77931 12.8885 1.15357 12.0171 0.732437 11.3651C0.521591 11.0386 0.360106 10.7651 0.250992 10.5711C0.196584 10.4744 0.154657 10.3968 0.125992 10.3426C0.111712 10.3156 0.100585 10.2933 0.0927887 10.2781C0.0890167 10.2708 0.0852609 10.2649 0.083023 10.2606C0.0819635 10.2585 0.0817067 10.2561 0.0810699 10.2547L0.0800933 10.2528L0.0791168 10.2518C-0.0297164 10.034 -0.0260827 9.77692 0.0888824 9.56232C1.04113 7.78778 2.31584 6.20831 3.84572 4.90607L0.219742 1.2801C-0.0731515 0.987204 -0.0731515 0.512444 0.219742 0.219551ZM4.91115 5.9715C3.58556 7.08096 2.46618 8.41669 1.60646 9.91779C1.70047 10.0817 1.82896 10.2988 1.9922 10.5516C2.37833 11.1494 2.95068 11.9449 3.69337 12.7371C5.19121 14.3347 7.2954 15.8286 9.90822 15.8319C11.2476 15.8092 12.5514 15.4346 13.6934 14.7537L11.6348 12.6951C11.4891 12.7906 11.3365 12.8759 11.1768 12.9471C10.7784 13.1246 10.3482 13.2205 9.91212 13.2283C9.47589 13.236 9.0413 13.1554 8.63673 12.992C8.23247 12.8287 7.86504 12.5854 7.55666 12.2772C7.24809 11.9686 7.00429 11.6007 6.84084 11.1961C6.6774 10.7915 6.59683 10.358 6.60451 9.9217C6.61221 9.48532 6.70813 9.05473 6.88576 8.65607C6.95708 8.49604 7.04011 8.3419 7.13576 8.19611L4.91115 5.9715ZM8.24123 9.30158C8.15522 9.50642 8.10843 9.72574 8.10451 9.94807C8.10037 10.183 8.14345 10.4167 8.23146 10.6346C8.31948 10.8524 8.45111 11.0505 8.6172 11.2166C8.78327 11.3825 8.98157 11.5135 9.19923 11.6014C9.41683 11.6892 9.65018 11.7324 9.88478 11.7283C10.1069 11.7244 10.3257 11.6765 10.5303 11.5906L8.24123 9.30158Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d: "M9.91701 2.5008C13.1328 2.5011 15.609 4.33645 17.2344 6.07014C18.0538 6.94422 18.6805 7.81555 19.1016 8.4676C19.3125 8.79427 19.473 9.06857 19.582 9.26252C19.6366 9.35947 19.6784 9.43688 19.707 9.49103C19.7213 9.51797 19.7325 9.53938 19.7402 9.55451C19.744 9.56183 19.7478 9.5677 19.75 9.57209L19.7539 9.5799L19.7901 9.66486C19.8604 9.86248 19.8453 10.0829 19.7451 10.2703C19.2148 11.2625 18.5817 12.1966 17.8574 13.0574C17.5908 13.3743 17.1177 13.4147 16.8008 13.1483C16.4839 12.8816 16.4424 12.4085 16.709 12.0916C17.2798 11.4133 17.7876 10.6845 18.2266 9.91486C18.1327 9.75115 18.0048 9.53442 17.8418 9.28205C17.4558 8.68431 16.8833 7.88875 16.1406 7.0965C14.6413 5.49721 12.5337 4.00013 9.91701 3.99982H9.91505C9.3843 3.99858 8.85471 4.05957 8.33791 4.18049C7.93468 4.27487 7.53105 4.02408 7.43654 3.62092C7.34213 3.21761 7.5928 2.81396 7.99611 2.71955C8.62561 2.57227 9.27051 2.49939 9.91701 2.5008Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+var CloseEyeIcon_default = CloseEyeIcon;
+
+// src/tokens/svg/Input/OpenEyeIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var OpenEyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10 6.75C11.795 6.75 13.25 8.20507 13.25 10C13.25 11.7949 11.795 13.25 10 13.25C8.20514 13.25 6.75004 11.7949 6.75004 10C6.75004 8.20509 8.20514 6.75002 10 6.75ZM10 8.25C9.03356 8.25002 8.25004 9.03352 8.25004 10C8.25004 10.9665 9.03356 11.75 10 11.75C10.9665 11.75 11.75 10.9665 11.75 10C11.75 9.0335 10.9665 8.25 10 8.25Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10.001 2.58301C13.2168 2.5833 15.693 4.41963 17.3184 6.15332C18.1379 7.02746 18.7644 7.8987 19.1856 8.55078C19.3966 8.87754 19.5569 9.15172 19.6661 9.3457C19.7206 9.44274 19.7624 9.52003 19.7911 9.57422C19.8054 9.60124 19.8165 9.62253 19.8243 9.6377C19.8281 9.64511 19.8318 9.65085 19.834 9.65527L19.8379 9.66309L19.8731 9.74512C19.9423 9.93686 19.9301 10.1503 19.8379 10.335L19.834 10.3438C19.8318 10.3481 19.828 10.354 19.8243 10.3613C19.8165 10.3764 19.8053 10.3989 19.7911 10.4258C19.7624 10.4799 19.7204 10.5577 19.6661 10.6543C19.557 10.8482 19.3963 11.1219 19.1856 11.4482C18.7645 12.1003 18.1378 12.9716 17.3184 13.8457C15.693 15.5794 13.2169 17.4157 10.001 17.416C6.78478 17.416 4.30817 15.5796 2.68266 13.8457C1.86324 12.9716 1.23758 12.1003 0.816447 11.4482C0.605537 11.1217 0.444118 10.8483 0.335002 10.6543C0.280535 10.5575 0.23867 10.4799 0.210002 10.4258C0.195664 10.3987 0.184599 10.3765 0.176799 10.3613C0.172971 10.3539 0.169262 10.3481 0.167033 10.3438C0.165933 10.3416 0.165786 10.3393 0.16508 10.3379L0.164103 10.3359L0.163127 10.335C0.0576283 10.1238 0.0575788 9.87516 0.163127 9.66406L0.164103 9.66309L0.16508 9.66113C0.165655 9.65972 0.166042 9.65723 0.167033 9.65527C0.169295 9.6509 0.17306 9.64497 0.176799 9.6377C0.184576 9.62257 0.195818 9.60103 0.210002 9.57422C0.238658 9.52007 0.280573 9.44247 0.335002 9.3457C0.444118 9.15173 0.605537 8.87735 0.816447 8.55078C1.2376 7.89875 1.86341 7.02719 2.68266 6.15332C4.30818 4.41955 6.78494 2.58301 10.001 2.58301ZM10.001 4.08301C7.38417 4.08301 5.27685 5.58037 3.77738 7.17969C3.03465 7.97195 2.46234 8.7674 2.07621 9.36523C1.91278 9.6183 1.78352 9.83509 1.68949 9.99902C1.7836 10.1632 1.91229 10.3809 2.07621 10.6348C2.46234 11.2326 3.03462 12.028 3.77738 12.8203C5.27685 14.4196 7.38421 15.916 10.001 15.916C12.6177 15.9157 14.7253 14.4196 16.2246 12.8203C16.9674 12.028 17.5397 11.2326 17.9258 10.6348C18.0896 10.3812 18.2175 10.1631 18.3116 9.99902C18.2176 9.83513 18.0892 9.61828 17.9258 9.36523C17.5398 8.76747 16.9674 7.97197 16.2246 7.17969C14.7253 5.58039 12.6177 4.0833 10.001 4.08301Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+var OpenEyeIcon_default = OpenEyeIcon;
+
+// src/components/Input/PasswordInput/PasswordInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var PasswordInput = import_react3.default.forwardRef(
+  (props, ref) => {
+    const { reg: _reg, ...inputProps } = props;
+    const [isView, setIsView] = import_react3.default.useState(false);
+    const handleChangeView = () => {
+      setIsView((prev) => !prev);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Input_default,
+      {
+        ...inputProps,
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "wrapper pointer", onClick: handleChangeView, children: isView ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OpenEyeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseEyeIcon_default, {}) }),
+        type: isView ? "text" : "password",
+        ref
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// src/tokens/svg/action/CopyIcon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/CropIcon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/DeleteIcon.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/DownloadCloudIcon.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/DownloadIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/Edit2Icon.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/Edit3Icon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/EditIcon.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/ExternalLinkIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/FilterIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/Link2Icon.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/LinkIcon.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/MoveIcon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/RefreshCcwIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/RefreshCwIcon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/RotateCcwIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/RotateCwIcon.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/SaveIcon.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/ScissorsIcon.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/SearchIcon.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/SendIcon.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/Share2Icon.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/ShareIcon.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/Trash2Icon.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/TrashIcon.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/UploadCloudIcon.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/UploadIcon.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/ZoomInIcon.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// src/tokens/svg/action/ZoomOutIcon.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallActiveIcon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallForwardedIcon.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallIcon.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallIncomingIcon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallMissedIcon.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallOffIcon.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/CallOutgoingIcon.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// src/tokens/svg/call/VoicemailIcon.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/BarChart2Icon.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/BarChartIcon.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/PieChartIcon.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/TableIcon.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/TrendingDownIcon.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// src/tokens/svg/chart/TrendingUpIcon.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
+// src/tokens/svg/date/CalendarIcon.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+
+// src/tokens/svg/date/CalenderIcon.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var CalenderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.6671 0.733398C10.9983 0.73361 11.2671 1.00216 11.2671 1.3334V2.06621H12.6663C13.734 2.06621 14.5998 2.93214 14.5999 3.9998V13.3326C14.5999 14.4004 13.7341 15.2662 12.6663 15.2662H3.3335C2.26575 15.2662 1.3999 14.4004 1.3999 13.3326V3.9998C1.40001 2.93214 2.26581 2.06621 3.3335 2.06621H4.7335V1.3334C4.7335 1.00203 5.00213 0.733398 5.3335 0.733398C5.66469 0.73361 5.9335 1.00216 5.9335 1.3334V2.06621H10.0671V1.3334C10.0671 1.00203 10.3357 0.733398 10.6671 0.733398ZM2.5999 7.26621V13.3326C2.5999 13.7376 2.92849 14.0662 3.3335 14.0662H12.6663C13.0713 14.0662 13.3999 13.7376 13.3999 13.3326V7.26621H2.5999ZM3.3335 3.26621C2.92855 3.26621 2.60001 3.59489 2.5999 3.9998V6.06621H13.3999V3.9998C13.3998 3.59489 13.0713 3.26621 12.6663 3.26621H11.2671V3.9998C11.267 4.33096 10.9982 4.59959 10.6671 4.5998C10.3358 4.5998 10.0672 4.33109 10.0671 3.9998V3.26621H5.9335V3.9998C5.93339 4.33096 5.66462 4.59959 5.3335 4.5998C5.00219 4.5998 4.7336 4.33109 4.7335 3.9998V3.26621H3.3335Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var CalenderIcon_default = CalenderIcon;
+
+// src/tokens/svg/date/ClockIcon.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+
+// src/tokens/svg/date/SunriseIcon.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+
+// src/tokens/svg/date/SunsetIcon.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/BatteryChargingIcon.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/BatteryIcon.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/BluetoothIcon.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/CommandIcon.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/CpuIcon.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/DatabaseIcon.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/HardDriveIcon.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/MonitorIcon.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/PrinterIcon.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/ServerIcon.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/SmartphoneIcon.tsx
+var import_jsx_runtime67 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/TabletIcon.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/TerminalIcon.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/TvIcon.tsx
+var import_jsx_runtime70 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/WatchIcon.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/WifiIcon.tsx
+var import_jsx_runtime72 = require("react/jsx-runtime");
+
+// src/tokens/svg/device/WifiOffIcon.tsx
+var import_jsx_runtime73 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/AlignCenterIcon.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/AlignJustifyIcon.tsx
+var import_jsx_runtime75 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/AlignLeftIcon.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/AlignRightIcon.tsx
+var import_jsx_runtime77 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/BoldIcon.tsx
+var import_jsx_runtime78 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/CodeIcon.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/ItalicIcon.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/PenToolIcon.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/TypeIcon.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+
+// src/tokens/svg/edit/UnderlineIcon.tsx
+var import_jsx_runtime83 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/ArchiveIcon.tsx
+var import_jsx_runtime84 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/BookIcon.tsx
+var import_jsx_runtime85 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/BookOpenIcon.tsx
+var import_jsx_runtime86 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/BookmarkIcon.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/ClipboardIcon.tsx
+var import_jsx_runtime88 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FileIcon.tsx
+var import_jsx_runtime89 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FileMinusIcon.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FilePlusIcon.tsx
+var import_jsx_runtime91 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FileTextIcon.tsx
+var import_jsx_runtime92 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FolderIcon.tsx
+var import_jsx_runtime93 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FolderMinusIcon.tsx
+var import_jsx_runtime94 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/FolderPlusIcon.tsx
+var import_jsx_runtime95 = require("react/jsx-runtime");
+
+// src/tokens/svg/file/PackageIcon.tsx
+var import_jsx_runtime96 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/AirplayIcon.tsx
+var import_jsx_runtime97 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CameraIcon.tsx
+var import_jsx_runtime98 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CameraOffIcon.tsx
+var import_jsx_runtime99 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/CastIcon.tsx
+var import_jsx_runtime100 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/DiscIcon.tsx
+var import_jsx_runtime101 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/FastForwardIcon.tsx
+var import_jsx_runtime102 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/FilmIcon.tsx
+var import_jsx_runtime103 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/HeadphonesIcon.tsx
+var import_jsx_runtime104 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/ImageIcon.tsx
+var import_jsx_runtime105 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MicIcon.tsx
+var import_jsx_runtime106 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MicOffIcon.tsx
+var import_jsx_runtime107 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/MusicIcon.tsx
+var import_jsx_runtime108 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PauseCircleIcon.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PauseIcon.tsx
+var import_jsx_runtime110 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PlayCircleIcon.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/PlayIcon.tsx
+var import_jsx_runtime112 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/RepeatIcon.tsx
+var import_jsx_runtime113 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/RewindIcon.tsx
+var import_jsx_runtime114 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SkipBackIcon.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SkipForwardIcon.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/SpeakerIcon.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/StopCircleIcon.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VideoIcon.tsx
+var import_jsx_runtime119 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VideoOffIcon.tsx
+var import_jsx_runtime120 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/Volume1Icon.tsx
+var import_jsx_runtime121 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/Volume2Icon.tsx
+var import_jsx_runtime122 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VolumeIcon.tsx
+var import_jsx_runtime123 = require("react/jsx-runtime");
+
+// src/tokens/svg/media/VolumeXIcon.tsx
+var import_jsx_runtime124 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ActivityIcon.tsx
+var import_jsx_runtime125 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/AnchorIcon.tsx
+var import_jsx_runtime126 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ApertureIcon.tsx
+var import_jsx_runtime127 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/AwardIcon.tsx
+var import_jsx_runtime128 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/BellIcon.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/BellOffIcon.tsx
+var import_jsx_runtime130 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/BoxIcon.tsx
+var import_jsx_runtime131 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/BriefcaseIcon.tsx
+var import_jsx_runtime132 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudDrizzleIcon.tsx
+var import_jsx_runtime133 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudIcon.tsx
+var import_jsx_runtime134 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudLightningIcon.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudOffIcon.tsx
+var import_jsx_runtime136 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudRainIcon.tsx
+var import_jsx_runtime137 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CloudSnowIcon.tsx
+var import_jsx_runtime138 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CoffeeIcon.tsx
+var import_jsx_runtime139 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CreditCardIcon.tsx
+var import_jsx_runtime140 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/CrosshairIcon.tsx
+var import_jsx_runtime141 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/DollarSignIcon.tsx
+var import_jsx_runtime142 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/DropletIcon.tsx
+var import_jsx_runtime143 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/FeatherIcon.tsx
+var import_jsx_runtime144 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/FlagIcon.tsx
+var import_jsx_runtime145 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/FrownIcon.tsx
+var import_jsx_runtime146 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GiftIcon.tsx
+var import_jsx_runtime147 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GitBranchIcon.tsx
+var import_jsx_runtime148 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GitCommitIcon.tsx
+var import_jsx_runtime149 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GitMergeIcon.tsx
+var import_jsx_runtime150 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GitPullRequestIcon.tsx
+var import_jsx_runtime151 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/GlobeIcon.tsx
+var import_jsx_runtime152 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/HeartIcon.tsx
+var import_jsx_runtime153 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/HomeIcon.tsx
+var import_jsx_runtime154 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/InboxIcon.tsx
+var import_jsx_runtime155 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/LayersIcon.tsx
+var import_jsx_runtime156 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/LifeBuoyIcon.tsx
+var import_jsx_runtime157 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/MehIcon.tsx
+var import_jsx_runtime158 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/MessageCircleIcon.tsx
+var import_jsx_runtime159 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/MessageSquareIcon.tsx
+var import_jsx_runtime160 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/MoonIcon.tsx
+var import_jsx_runtime161 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/MousePointerIcon.tsx
+var import_jsx_runtime162 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/PaperclipIcon.tsx
+var import_jsx_runtime163 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/PocketIcon.tsx
+var import_jsx_runtime164 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/PowerIcon.tsx
+var import_jsx_runtime165 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/RadioIcon.tsx
+var import_jsx_runtime166 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ShieldIcon.tsx
+var import_jsx_runtime167 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ShieldOffIcon.tsx
+var import_jsx_runtime168 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ShoppingBagIcon.tsx
+var import_jsx_runtime169 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ShoppingCartIcon.tsx
+var import_jsx_runtime170 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ShuffleIcon.tsx
+var import_jsx_runtime171 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/SmileIcon.tsx
+var import_jsx_runtime172 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/StarIcon.tsx
+var import_jsx_runtime173 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/SunIcon.tsx
+var import_jsx_runtime174 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/TagIcon.tsx
+var import_jsx_runtime175 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/TargetIcon.tsx
+var import_jsx_runtime176 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ThermometerIcon.tsx
+var import_jsx_runtime177 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ThumbsDownIcon.tsx
+var import_jsx_runtime178 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ThumbsUpIcon.tsx
+var import_jsx_runtime179 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ToolIcon.tsx
+var import_jsx_runtime180 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/TruckIcon.tsx
+var import_jsx_runtime181 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/UmbrellaIcon.tsx
+var import_jsx_runtime182 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/WindIcon.tsx
+var import_jsx_runtime183 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ZapIcon.tsx
+var import_jsx_runtime184 = require("react/jsx-runtime");
+
+// src/tokens/svg/misc/ZapOffIcon.tsx
+var import_jsx_runtime185 = require("react/jsx-runtime");
+
+// src/tokens/svg/Input/EyeIcon.tsx
+var import_jsx_runtime186 = require("react/jsx-runtime");
+
+// src/tokens/svg/Input/EyeOffIcon.tsx
+var import_jsx_runtime187 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowDownCircleIcon.tsx
+var import_jsx_runtime188 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowDownIcon.tsx
+var import_jsx_runtime189 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowDownLeftIcon.tsx
+var import_jsx_runtime190 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowDownRightIcon.tsx
+var import_jsx_runtime191 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowLeftCircleIcon.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowLeftIcon.tsx
+var import_jsx_runtime193 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowRightCircleIcon.tsx
+var import_jsx_runtime194 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowRightIcon.tsx
+var import_jsx_runtime195 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowUpCircleIcon.tsx
+var import_jsx_runtime196 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowUpIcon.tsx
+var import_jsx_runtime197 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowUpLeftIcon.tsx
+var import_jsx_runtime198 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/ArrowUpRightIcon.tsx
+var import_jsx_runtime199 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CompassIcon.tsx
+var import_jsx_runtime200 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerDownLeftIcon.tsx
+var import_jsx_runtime201 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerDownRightIcon.tsx
+var import_jsx_runtime202 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerLeftDownIcon.tsx
+var import_jsx_runtime203 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerLeftUpIcon.tsx
+var import_jsx_runtime204 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerRightDownIcon.tsx
+var import_jsx_runtime205 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerRightUpIcon.tsx
+var import_jsx_runtime206 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerUpLeftIcon.tsx
+var import_jsx_runtime207 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/CornerUpRightIcon.tsx
+var import_jsx_runtime208 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/MapIcon.tsx
+var import_jsx_runtime209 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/MapPinIcon.tsx
+var import_jsx_runtime210 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/Navigation2Icon.tsx
+var import_jsx_runtime211 = require("react/jsx-runtime");
+
+// src/tokens/svg/navigation/NavigationIcon.tsx
+var import_jsx_runtime212 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/ChromeIcon.tsx
+var import_jsx_runtime213 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/CodepenIcon.tsx
+var import_jsx_runtime214 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/CodesandboxIcon.tsx
+var import_jsx_runtime215 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/DribbbleIcon.tsx
+var import_jsx_runtime216 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/FacebookIcon.tsx
+var import_jsx_runtime217 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/FigmaIcon.tsx
+var import_jsx_runtime218 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/FramerIcon.tsx
+var import_jsx_runtime219 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/GithubIcon.tsx
+var import_jsx_runtime220 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/GitlabIcon.tsx
+var import_jsx_runtime221 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/InstagramIcon.tsx
+var import_jsx_runtime222 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/LinkedinIcon.tsx
+var import_jsx_runtime223 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/RssIcon.tsx
+var import_jsx_runtime224 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/SlackIcon.tsx
+var import_jsx_runtime225 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/TrelloIcon.tsx
+var import_jsx_runtime226 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/TwitchIcon.tsx
+var import_jsx_runtime227 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/TwitterIcon.tsx
+var import_jsx_runtime228 = require("react/jsx-runtime");
+
+// src/tokens/svg/social/YoutubeIcon.tsx
+var import_jsx_runtime229 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/AtSignIcon.tsx
+var import_jsx_runtime230 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/CheckCircleIcon.tsx
+var import_jsx_runtime231 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/CheckIcon.tsx
+var import_jsx_runtime232 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/CheckSquareIcon.tsx
+var import_jsx_runtime233 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronDownIcon.tsx
+var import_jsx_runtime234 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronLeftIcon.tsx
+var import_jsx_runtime235 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronRightIcon.tsx
+var import_jsx_runtime236 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronUpIcon.tsx
+var import_jsx_runtime237 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronsDownIcon.tsx
+var import_jsx_runtime238 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronsLeftIcon.tsx
+var import_jsx_runtime239 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronsRightIcon.tsx
+var import_jsx_runtime240 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ChevronsUpIcon.tsx
+var import_jsx_runtime241 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/CircleIcon.tsx
+var import_jsx_runtime242 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ColumnsIcon.tsx
+var import_jsx_runtime243 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/DivideCircleIcon.tsx
+var import_jsx_runtime244 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/DivideIcon.tsx
+var import_jsx_runtime245 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/DivideSquareIcon.tsx
+var import_jsx_runtime246 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/GridIcon.tsx
+var import_jsx_runtime247 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/HashIcon.tsx
+var import_jsx_runtime248 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/HexagonIcon.tsx
+var import_jsx_runtime249 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/LayoutIcon.tsx
+var import_jsx_runtime250 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ListIcon.tsx
+var import_jsx_runtime251 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/LoaderIcon.tsx
+var import_jsx_runtime252 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/Maximize2Icon.tsx
+var import_jsx_runtime253 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MaximizeIcon.tsx
+var import_jsx_runtime254 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MenuIcon.tsx
+var import_jsx_runtime255 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/Minimize2Icon.tsx
+var import_jsx_runtime256 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MinimizeIcon.tsx
+var import_jsx_runtime257 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MinusCircleIcon.tsx
+var import_jsx_runtime258 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MinusIcon.tsx
+var import_jsx_runtime259 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MinusSquareIcon.tsx
+var import_jsx_runtime260 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MoreHorizontalIcon.tsx
+var import_jsx_runtime261 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/MoreVerticalIcon.tsx
+var import_jsx_runtime262 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/OctagonIcon.tsx
+var import_jsx_runtime263 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/PercentIcon.tsx
+var import_jsx_runtime264 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/PlusCircleIcon.tsx
+var import_jsx_runtime265 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/PlusIcon.tsx
+var import_jsx_runtime266 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/PlusSquareIcon.tsx
+var import_jsx_runtime267 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/SettingsIcon.tsx
+var import_jsx_runtime268 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/SidebarIcon.tsx
+var import_jsx_runtime269 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/SlashIcon.tsx
+var import_jsx_runtime270 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/SlidersIcon.tsx
+var import_jsx_runtime271 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/SquareIcon.tsx
+var import_jsx_runtime272 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ToggleLeftIcon.tsx
+var import_jsx_runtime273 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/ToggleRightIcon.tsx
+var import_jsx_runtime274 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/TriangleIcon.tsx
+var import_jsx_runtime275 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/XCircleIcon.tsx
+var import_jsx_runtime276 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/XIcon.tsx
+var import_jsx_runtime277 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/XOctagonIcon.tsx
+var import_jsx_runtime278 = require("react/jsx-runtime");
+
+// src/tokens/svg/ui/XSquareIcon.tsx
+var import_jsx_runtime279 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/GierIcon.tsx
+var import_jsx_runtime280 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/KeyIcon.tsx
+var import_jsx_runtime281 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/LockIcon.tsx
+var import_jsx_runtime282 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/LogInIcon.tsx
+var import_jsx_runtime283 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/LogOutIcon.tsx
+var import_jsx_runtime284 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/MailIcon.tsx
+var import_jsx_runtime285 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/ProfileIcon.tsx
+var import_jsx_runtime286 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UnlockIcon.tsx
+var import_jsx_runtime287 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UserCheckIcon.tsx
+var import_jsx_runtime288 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UserIcon.tsx
+var import_jsx_runtime289 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UserMinusIcon.tsx
+var import_jsx_runtime290 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UserPlusIcon.tsx
+var import_jsx_runtime291 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UserXIcon.tsx
+var import_jsx_runtime292 = require("react/jsx-runtime");
+
+// src/tokens/svg/user/UsersIcon.tsx
+var import_jsx_runtime293 = require("react/jsx-runtime");
+
+// src/tokens/svg/validation/AlertCircleIcon.tsx
+var import_jsx_runtime294 = require("react/jsx-runtime");
+
+// src/tokens/svg/validation/AlertOctagonIcon.tsx
+var import_jsx_runtime295 = require("react/jsx-runtime");
+
+// src/tokens/svg/validation/AlertTriangleIcon.tsx
+var import_jsx_runtime296 = require("react/jsx-runtime");
+
+// src/tokens/svg/validation/HelpCircleIcon.tsx
+var import_jsx_runtime297 = require("react/jsx-runtime");
+
+// src/components/DatePicker/InputDatePicker/index.tsx
+var import_react_datepicker = __toESM(require("react-datepicker"), 1);
+var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
+var import_jsx_runtime298 = require("react/jsx-runtime");
+var Suffix = () => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(CalenderIcon_default, {}) });
+var InputDatePicker = (props) => {
+  const { value, onChange, disabled, ...rest } = props;
+  const handleChange = (date) => {
+    if (Array.isArray(date)) return;
+    if (!date) return;
+    onChange?.(date);
+  };
+  const formatDate = (date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}/${m}/${d}`;
+  };
+  const CustomInput = import_react4.default.forwardRef(({ onClick }, _ref) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { onClick, children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+    Input_default,
+    {
+      value: formatDate(value),
+      suffix: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(Suffix, {}),
+      disabled
+    }
+  ) }));
+  CustomInput.displayName = "InputDatePickerCustomInput";
+  return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+    import_react_datepicker.default,
+    {
+      selected: value,
+      onChange: handleChange,
+      ...rest,
+      customInput: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(CustomInput, {}),
+      dateFormat: "YYYY/MM/dd"
+    }
+  ) });
+};
+InputDatePicker.displayName = "InputDatePicker";
+var InputDatePicker_default = InputDatePicker;
+
+// src/components/DatePicker/PopupPicker/index.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime299 = require("react/jsx-runtime");
+var Button = (props) => {
+  const {
+    children,
+    type = "primary",
+    colorNamespace = "xplat",
+    color = "black",
+    colorDepth,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+    "button",
+    {
+      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      disabled,
+      ...rest,
+      children
+    }
+  );
+};
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/components/Modal/Modal.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var import_jsx_runtime300 = require("react/jsx-runtime");
+var ANIMATION_DURATION_MS = 200;
+var Modal = (props) => {
+  const { isOpen, onClose, children } = props;
+  const [mounted, setMounted] = import_react5.default.useState(false);
+  const [visible, setVisible] = import_react5.default.useState(false);
+  import_react5.default.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  if (typeof document === "undefined") return null;
+  if (!mounted) return null;
+  const stateClass = visible ? "enter" : "exit";
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+      "div",
+      {
+        className: clsx_default("lib-xplat-modal", "dim", stateClass),
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+          "div",
+          {
+            className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            onClick: (e) => e.stopPropagation(),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+Modal.displayName = "Modal";
+var Modal_default = Modal;
+
+// src/components/DatePicker/SingleDatePicker/index.tsx
+var import_react_datepicker3 = __toESM(require("react-datepicker"), 1);
+var import_react_datepicker4 = require("react-datepicker/dist/react-datepicker.css");
+var import_jsx_runtime301 = require("react/jsx-runtime");
+var SingleDatePicker = (props) => {
+  const { value, onChange, ...rest } = props;
+  const handleChange = (date) => {
+    if (Array.isArray(date)) return;
+    onChange?.(date);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(import_react_datepicker3.default, { selected: value, onChange: handleChange, inline: true, ...rest }) });
+};
+SingleDatePicker.displayName = "SingleDatePicker";
+var SingleDatePicker_default = SingleDatePicker;
+
+// src/components/DatePicker/PopupPicker/index.tsx
+var import_jsx_runtime302 = require("react/jsx-runtime");
+var PopupPicker = (props) => {
+  const { component, type } = props;
+  const [isOpen, setIsOpen] = import_react6.default.useState(false);
+  const handleClick = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+  const handleSingleChange = (date) => {
+    if (!date) return;
+    props.onChange?.(date);
+    handleClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
+    import_react6.default.cloneElement(component, { onClick: handleClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "popup-datepicker-content", children: [
+        type === "single" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          SingleDatePicker_default,
+          {
+            value: props.value,
+            onChange: handleSingleChange,
+            minDate: props.minDate,
+            maxDate: props.maxDate
+          }
+        ),
+        type === "range" && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          RangePicker_default,
+          {
+            startDate: props.startDate,
+            endDate: props.endDate,
+            onChange: props.onChange,
+            minDate: props.minDate,
+            maxDate: props.maxDate
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "popup-datepicker-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          Button_default,
+          {
+            type: "secondary",
+            color: "neutral",
+            colorDepth: 400,
+            onClick: handleClose,
+            children: "\uCDE8\uC18C"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+      ] })
+    ] }) })
+  ] });
+};
+PopupPicker.displayName = "PopupPicker";
+var PopupPicker_default = PopupPicker;
+
+// src/components/DatePicker/RangePicker/index.tsx
+var import_jsx_runtime303 = require("react/jsx-runtime");
+var RangePicker = (props) => {
+  const { startDate, endDate, onChange, minDate, maxDate } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        SingleDatePicker_default,
+        {
+          value: startDate,
+          onChange: (date) => date != null && onChange?.({ startDate: date, endDate }),
+          minDate,
+          maxDate: endDate
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-range-datepicker-to", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC885\uB8CC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        SingleDatePicker_default,
+        {
+          value: endDate,
+          onChange: (date) => date != null && onChange?.({ startDate, endDate: date }),
+          minDate: startDate,
+          maxDate
+        }
+      )
+    ] })
+  ] });
+};
+RangePicker.displayName = "RangePicker";
+var RangePicker_default = RangePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputDatePicker,
+  PopupDatePicker,
+  RangeDatePicker,
+  SingleDatePicker
+});