@clickhouse/click-ui 0.0.169 → 0.0.170

package/dist/click-ui.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { keyframes, styled, useTheme, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
+import styled$1, { keyframes, styled, useTheme, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
 import * as React from "react";
 import React__default, { forwardRef, useCallback, createContext, useMemo, createElement as createElement$1, useContext, useRef, useEffect, useState, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useReducer, useId, PureComponent, Component, memo } from "react";
 import * as ReactDOM from "react-dom";
@@ -589,7 +589,7 @@ const SandGlass = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height:
   /* @__PURE__ */ jsx("path", { d: "M8 4V8C8 8.63 8.296 9.222 8.8 9.6L12 12L15.2 9.6C15.704 9.222 16 8.63 16 8V4", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsx("path", { d: "M16 20V16C16 15.37 15.704 14.778 15.2 14.4L12 12L8.8 14.4C8.296 14.778 8 15.37 8 16V20", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
-const Calendar = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+const Calendar$1 = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("rect", { x: "2.99609", y: "2.99658", width: "18.0075", height: "18.0075", rx: "3", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsx("path", { d: "M21.0036 7.99826H2.99609", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsx("path", { d: "M17.3022 11.4997C17.3022 11.5273 17.2798 11.5497 17.2522 11.5497C17.2245 11.5497 17.2021 11.5273 17.2021 11.4997C17.2021 11.4721 17.2245 11.4497 17.2522 11.4497", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -688,7 +688,7 @@ const ICONS_MAP = {
   briefcase: Briefcase,
   building: Building,
   "burger-menu": BurgerMenu,
-  calendar: Calendar,
+  calendar: Calendar$1,
   "calendar-with-time": CalendarWithTime,
   cards: Cards,
   "cell-tower": CellTower,
@@ -12454,14 +12454,14 @@ function listLanguages() {
   return high.listLanguages();
 }
 function registerAlias(name2, alias) {
-  var map = name2;
+  var map2 = name2;
   var key;
   if (alias) {
-    map = {};
-    map[name2] = alias;
+    map2 = {};
+    map2[name2] = alias;
   }
-  for (key in map) {
-    high.registerAliases(map[key], { languageName: key });
+  for (key in map2) {
+    high.registerAliases(map2[key], { languageName: key });
   }
 }
 function Emitter(options) {
@@ -13678,6 +13678,778 @@ const CodeBlock = ({
     }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
   ] });
 };
+const constructFromSymbol = Symbol.for("constructDateFrom");
+function constructFrom(date, value) {
+  if (typeof date === "function")
+    return date(value);
+  if (date && typeof date === "object" && constructFromSymbol in date)
+    return date[constructFromSymbol](value);
+  if (date instanceof Date)
+    return new date.constructor(value);
+  return new Date(value);
+}
+function toDate(argument, context) {
+  return constructFrom(context || argument, argument);
+}
+function addDays(date, amount, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  if (isNaN(amount))
+    return constructFrom(date, NaN);
+  if (!amount)
+    return _date;
+  _date.setDate(_date.getDate() + amount);
+  return _date;
+}
+function addMonths(date, amount, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  if (isNaN(amount))
+    return constructFrom(date, NaN);
+  if (!amount) {
+    return _date;
+  }
+  const dayOfMonth = _date.getDate();
+  const endOfDesiredMonth = constructFrom(date, _date.getTime());
+  endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
+  const daysInMonth = endOfDesiredMonth.getDate();
+  if (dayOfMonth >= daysInMonth) {
+    return endOfDesiredMonth;
+  } else {
+    _date.setFullYear(
+      endOfDesiredMonth.getFullYear(),
+      endOfDesiredMonth.getMonth(),
+      dayOfMonth
+    );
+    return _date;
+  }
+}
+function isWeekend(date, options) {
+  const day = toDate(date, options == null ? void 0 : options.in).getDay();
+  return day === 0 || day === 6;
+}
+let defaultOptions = {};
+function getDefaultOptions() {
+  return defaultOptions;
+}
+function startOfWeek(date, options) {
+  var _a, _b, _c, _d;
+  const defaultOptions2 = getDefaultOptions();
+  const weekStartsOn = (options == null ? void 0 : options.weekStartsOn) ?? ((_b = (_a = options == null ? void 0 : options.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  const day = _date.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  _date.setDate(_date.getDate() - diff);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function normalizeDates(context, ...dates) {
+  const normalize = constructFrom.bind(
+    null,
+    dates.find((date) => typeof date === "object")
+  );
+  return dates.map(normalize);
+}
+function addWeeks(date, amount, options) {
+  return addDays(date, amount * 7, options);
+}
+function startOfMonth(date, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  _date.setDate(1);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function getDate(date, options) {
+  return toDate(date, options == null ? void 0 : options.in).getDate();
+}
+function getDay(date, options) {
+  return toDate(date, options == null ? void 0 : options.in).getDay();
+}
+function getDaysInMonth(date, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  const year = _date.getFullYear();
+  const monthIndex = _date.getMonth();
+  const lastDayOfMonth = constructFrom(_date, 0);
+  lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
+  lastDayOfMonth.setHours(0, 0, 0, 0);
+  return lastDayOfMonth.getDate();
+}
+function isEqual$1(leftDate, rightDate) {
+  return +toDate(leftDate) === +toDate(rightDate);
+}
+function setDay(date, day, options) {
+  var _a, _b;
+  const defaultOptions2 = getDefaultOptions();
+  const weekStartsOn = defaultOptions2.weekStartsOn ?? ((_b = (_a = defaultOptions2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? 0;
+  const date_ = toDate(date, options == null ? void 0 : options.in);
+  const currentDay = date_.getDay();
+  const remainder = day % 7;
+  const dayIndex = (remainder + 7) % 7;
+  const delta = 7 - weekStartsOn;
+  const diff = day < 0 || day > 6 ? day - (currentDay + delta) % 7 : (dayIndex + delta) % 7 - (currentDay + delta) % 7;
+  return addDays(date_, diff, options);
+}
+function isSameMonth(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options == null ? void 0 : options.in,
+    laterDate,
+    earlierDate
+  );
+  return laterDate_.getFullYear() === earlierDate_.getFullYear() && laterDate_.getMonth() === earlierDate_.getMonth();
+}
+function isSameYear(laterDate, earlierDate, options) {
+  const [laterDate_, earlierDate_] = normalizeDates(
+    options == null ? void 0 : options.in,
+    laterDate,
+    earlierDate
+  );
+  return laterDate_.getFullYear() === earlierDate_.getFullYear();
+}
+function subDays(date, amount, options) {
+  return addDays(date, -amount, options);
+}
+function setHours(date, hours, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  _date.setHours(hours);
+  return _date;
+}
+function setMilliseconds(date, milliseconds, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  _date.setMilliseconds(milliseconds);
+  return _date;
+}
+function setMinutes(date, minutes, options) {
+  const date_ = toDate(date, options == null ? void 0 : options.in);
+  date_.setMinutes(minutes);
+  return date_;
+}
+function setSeconds(date, seconds, options) {
+  const _date = toDate(date, options == null ? void 0 : options.in);
+  _date.setSeconds(seconds);
+  return _date;
+}
+function subMonths(date, amount, options) {
+  return addMonths(date, -amount, options);
+}
+function subWeeks(date, amount, options) {
+  return addWeeks(date, -amount, options);
+}
+var CalendarViewtype = /* @__PURE__ */ ((CalendarViewtype2) => {
+  CalendarViewtype2["Month"] = "month";
+  CalendarViewtype2["Week"] = "week";
+  CalendarViewtype2["Day"] = "day";
+  return CalendarViewtype2;
+})(CalendarViewtype || {});
+var CalendarViewType_default = CalendarViewtype;
+function arrayOf(count) {
+  return [...new Array(count).keys()];
+}
+var randomId = 0;
+var map = /* @__PURE__ */ new Map();
+function generateID(prefix2) {
+  if (map.has(prefix2)) {
+    const id = map.get(prefix2);
+    const newId = id + 1;
+    map.set(prefix2, newId);
+    randomId = newId;
+  } else {
+    const id = 1;
+    map.set(prefix2, id);
+    randomId = id;
+  }
+  return `${prefix2}-${randomId}`;
+}
+function resetTimeOfDate(date) {
+  return setHours(setMinutes(setSeconds(setMilliseconds(date, 0), 0), 0), 0);
+}
+function isSameDate(baseDate, targetDate) {
+  const base = resetTimeOfDate(baseDate);
+  const target = resetTimeOfDate(targetDate);
+  return isEqual$1(base, target);
+}
+function isSameYearAndMonth(baseDate, targetDate) {
+  return isSameMonth(targetDate, baseDate) && isSameYear(targetDate, baseDate);
+}
+function parseDate(date) {
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    day: date.getDate()
+  };
+}
+function pipe(...fns) {
+  return (...initialParams) => fns.reduce((value, fn, index2) => {
+    const params = index2 === 0 ? value : [value];
+    return fn(...params);
+  }, initialParams);
+}
+function pipeWith(value, ...fns) {
+  return pipe(
+    ...fns
+  )(value);
+}
+function withKey(arr, keyPrefix) {
+  return arr.map((value) => {
+    return {
+      ...value,
+      key: generateID(keyPrefix)
+    };
+  });
+}
+function withDateProps(baseDate, cursorDate) {
+  return function(cell) {
+    const { value: targetDate } = cell;
+    const isCurrentMonth = isSameYearAndMonth(cursorDate, targetDate);
+    const isCurrentDate = isSameDate(baseDate, targetDate);
+    const isWeekend$1 = isWeekend(targetDate);
+    return {
+      ...cell,
+      date: getDate(targetDate),
+      isCurrentMonth,
+      isCurrentDate,
+      isWeekend: isWeekend$1
+    };
+  };
+}
+function withKeyProps(keyPrefix) {
+  return function(cell) {
+    return {
+      ...cell,
+      key: generateID(keyPrefix)
+    };
+  };
+}
+function createCalendarInfo(cursorDate, { weekStartsOn }) {
+  const { year, month, day } = parseDate(cursorDate);
+  const startWeekdayInMonth = getStartWeekdayInMonth(cursorDate, weekStartsOn);
+  const weeksInMonth = getWeeksInMonth(cursorDate, startWeekdayInMonth);
+  const weekendDays = arrayOf(7).map((index2) => ({
+    value: setDay(cursorDate, index2 + weekStartsOn)
+  }));
+  const getDateCellByIndex = (weekIndex, dayIndex) => {
+    const day2 = weekIndex * 7 + dayIndex - startWeekdayInMonth + 1;
+    return { value: new Date(year, month, day2) };
+  };
+  return {
+    cursorDate,
+    year,
+    month,
+    day,
+    weekStartsOn,
+    startWeekdayInMonth,
+    weeksInMonth,
+    weekendDays,
+    today: {
+      weekIndex: getCurrentWeekIndex(day, startWeekdayInMonth),
+      dateIndex: getDay(cursorDate)
+    },
+    getDateCellByIndex
+  };
+}
+function getStartWeekdayInMonth(date, weekStartsOn) {
+  const monthStartsAt = (startOfMonth(date).getDay() - weekStartsOn) % 7;
+  return monthStartsAt < 0 ? monthStartsAt + 7 : monthStartsAt;
+}
+function getWeeksInMonth(date, startWeekdayInMonth) {
+  const totalDaysOfMonth = getDaysInMonth(date);
+  return Math.ceil((startWeekdayInMonth + totalDaysOfMonth) / 7);
+}
+function getCurrentWeekIndex(day, startWeekdayInMonth) {
+  if ((day + startWeekdayInMonth) % 7 > 0) {
+    return Math.floor((day + startWeekdayInMonth) / 7);
+  }
+  return Math.floor((day + startWeekdayInMonth) / 7) - 1;
+}
+function useIsMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+function useCalendar({
+  defaultDate,
+  defaultWeekStart = 0,
+  defaultViewType = CalendarViewType_default.Month
+} = {}) {
+  const isMounted = useIsMounted();
+  const baseDate = useMemo(() => {
+    return defaultDate != null ? new Date(defaultDate) : /* @__PURE__ */ new Date();
+  }, [defaultDate, isMounted]);
+  const [weekStartsOn, setWeekStartsOn] = useState(defaultWeekStart);
+  const [cursorDate, setCursorDate] = useState(baseDate);
+  const [viewType, setViewType] = useState(defaultViewType);
+  const calendar = createCalendarInfo(cursorDate, { weekStartsOn });
+  const { weekendDays, weeksInMonth, today, getDateCellByIndex } = calendar;
+  const getHeaders = useCallback(
+    (viewType2) => {
+      switch (viewType2) {
+        case CalendarViewType_default.Month:
+        case CalendarViewType_default.Week:
+          return {
+            weekDays: withKey(weekendDays, "weekdays")
+          };
+        case CalendarViewType_default.Day:
+        default:
+          return {
+            weekDays: withKey([{ value: cursorDate }], "weekdays")
+          };
+      }
+    },
+    [cursorDate, weekendDays]
+  );
+  const createMatrix = useCallback(
+    (weeksInMonth2) => ({
+      value: arrayOf(weeksInMonth2).map((weekIndex) => {
+        return {
+          key: generateID("weeks"),
+          value: arrayOf(7).map((dayIndex) => {
+            return pipeWith(
+              getDateCellByIndex(weekIndex, dayIndex),
+              withDateProps(baseDate, cursorDate),
+              withKeyProps("days")
+            );
+          })
+        };
+      })
+    }),
+    [baseDate, cursorDate, getDateCellByIndex]
+  );
+  const getBody = useCallback(
+    (viewType2) => {
+      var _a;
+      const matrix2 = createMatrix(weeksInMonth);
+      const { weekIndex, dateIndex } = today;
+      return {
+        [CalendarViewType_default.Month]: matrix2,
+        [CalendarViewType_default.Week]: {
+          value: [matrix2.value[weekIndex]]
+        },
+        [CalendarViewType_default.Day]: {
+          value: [
+            {
+              key: "week-day-type",
+              value: [(_a = matrix2.value[weekIndex]) == null ? void 0 : _a.value[dateIndex]]
+            }
+          ]
+        }
+      }[viewType2];
+    },
+    [createMatrix, today, weeksInMonth]
+  );
+  const setNext = useMemo(() => {
+    switch (viewType) {
+      case CalendarViewType_default.Month:
+        return (date) => addMonths(startOfMonth(date), 1);
+      case CalendarViewType_default.Week:
+        return (date) => addWeeks(startOfWeek(date, { weekStartsOn }), 1);
+      case CalendarViewType_default.Day:
+        return (date) => addDays(date, 1);
+    }
+  }, [viewType, weekStartsOn]);
+  const setPrev = useMemo(() => {
+    switch (viewType) {
+      case CalendarViewType_default.Month:
+        return (date) => subMonths(startOfMonth(date), 1);
+      case CalendarViewType_default.Week:
+        return (date) => subWeeks(startOfWeek(date, { weekStartsOn }), 1);
+      case CalendarViewType_default.Day:
+        return (date) => subDays(date, 1);
+    }
+  }, [viewType, weekStartsOn]);
+  return useMemo(
+    () => ({
+      ...calendar,
+      headers: getHeaders(viewType),
+      body: getBody(viewType),
+      navigation: {
+        toNext: () => setCursorDate((date) => setNext(date)),
+        toPrev: () => setCursorDate((date) => setPrev(date)),
+        setToday: () => setCursorDate(/* @__PURE__ */ new Date()),
+        setDate: (date) => setCursorDate(date)
+      },
+      view: {
+        type: viewType,
+        setViewType,
+        setWeekStartsOn,
+        isMonthView: viewType === CalendarViewType_default.Month,
+        isWeekView: viewType === CalendarViewType_default.Week,
+        isDayView: viewType === CalendarViewType_default.Day,
+        showMonthView: () => setViewType(CalendarViewType_default.Month),
+        showWeekView: () => setViewType(CalendarViewType_default.Week),
+        showDayView: () => setViewType(CalendarViewType_default.Day)
+      }
+    }),
+    [calendar, getBody, getHeaders, setNext, setPrev, viewType]
+  );
+}
+const Wrapper$4 = styled.div.withConfig({
+  componentId: "sc-1pvd2nj-0"
+})(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
+  theme: theme2,
+  $error,
+  $resize
+}) => `
+    gap: ${theme2.click.field.space.gap};
+    border-radius: ${theme2.click.field.radii.all};
+    font: ${theme2.click.field.typography.fieldText.default};
+    color: ${theme2.click.field.color.text.default};
+    border: 1px solid ${theme2.click.field.color.stroke.default};
+    background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
+    &:hover {
+      border: 1px solid ${theme2.click.field.color.stroke.hover};
+      background: ${theme2.click.field.color.background.hover};
+      color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
+    }
+    ${$resize === "none" ? "" : `
+      resize: ${$resize};
+      overflow: auto;
+    `}
+    padding: 0 ${theme2.click.field.space.x};
+    ${$error ? `
+      font: ${theme2.click.field.typography.fieldText.error};
+      border: 1px solid ${theme2.click.field.color.stroke.error};
+      background: ${theme2.click.field.color.background.active};
+      color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
+      &:hover {
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
+      }
+    ` : `
+    &:focus-within,
+    &[data-state="open"] {
+      font: ${theme2.click.field.typography.fieldText.active};
+      border: 1px solid ${theme2.click.field.color.stroke.active};
+      background: ${theme2.click.field.color.background.active};
+      color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
+    }
+    `};
+    &:disabled, &.disabled {
+      font: ${theme2.click.field.typography.fieldText.disabled};
+      border: 1px solid ${theme2.click.field.color.stroke.disabled};
+      background: ${theme2.click.field.color.background.disabled};
+      color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
+    }
+  `);
+const StyledLabel = styled(Label$1).withConfig({
+  componentId: "sc-1pvd2nj-1"
+})(["", ""], ({
+  $labelColor
+}) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
+const InputWrapper = ({
+  className,
+  id,
+  label = "",
+  labelColor,
+  error: error2,
+  disabled,
+  children,
+  orientation,
+  dir,
+  resize = "none"
+}) => {
+  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
+    /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+      /* @__PURE__ */ jsx(Wrapper$4, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? `disabled ${className}` : className, children }),
+      !!error2 && error2 !== true && /* @__PURE__ */ jsx(Error$1, { children: error2 })
+    ] }),
+    label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
+  ] });
+};
+const InputElement = styled.input.withConfig({
+  componentId: "sc-1pvd2nj-2"
+})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
+  theme: theme2
+}) => `
+    padding: ${theme2.click.field.space.y} 0;
+    &::placeholder {
+      color: ${theme2.click.field.color.placeholder.default};
+    }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
+  `);
+const NumberInputElement = styled(InputElement).withConfig({
+  componentId: "sc-1pvd2nj-3"
+})(["", ""], ({
+  $hideControls
+}) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+const TextAreaElement = styled.textarea.withConfig({
+  componentId: "sc-1pvd2nj-4"
+})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
+  theme: theme2
+}) => `
+    padding: ${theme2.click.field.space.y} 0;
+    align-self: stretch;
+    &::placeholder {
+      color: ${theme2.click.field.color.placeholder.default};
+    }
+  `);
+styled(InputWrapper).withConfig({
+  componentId: "sc-1pvd2nj-5"
+})(["resize:vertical;overflow:auto;color:red;"]);
+const IconButton = styled.button.withConfig({
+  componentId: "sc-1pvd2nj-6"
+})(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
+  theme: theme2,
+  $show
+}) => `
+      padding: ${theme2.click.field.space.y} 0;
+      visibility: ${$show ? "visible" : "hidden"};
+  `);
+styled.svg.withConfig({
+  componentId: "sc-1pvd2nj-7"
+})(["", ""], ({
+  theme: theme2
+}) => `
+    &:first-of-type {
+      padding-left: ${theme2.click.field.space.gap};
+    }
+    &:last-of-type {
+      padding-right: ${theme2.click.field.space.x};
+    }
+  `);
+const locale = "en-US";
+const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+  weekday: "short"
+});
+const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+  month: "short",
+  year: "numeric"
+});
+const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
+  day: "2-digit",
+  month: "short",
+  year: "numeric"
+});
+const explicitWidth = "250px";
+const HighlightedInputWrapper = styled$1(InputWrapper).withConfig({
+  componentId: "sc-1kfphgn-0"
+})(["", " width:", ";}"], ({
+  $isActive,
+  theme: theme2
+}) => {
+  return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
+}, explicitWidth);
+const DatePickerContainer = styled$1(Container).withConfig({
+  componentId: "sc-1kfphgn-1"
+})(["background:", ";"], ({
+  theme: theme2
+}) => theme2.click.datePicker.dateOption.color.background.default);
+const UnselectableTitle = styled$1.h2.withConfig({
+  componentId: "sc-1kfphgn-2"
+})(["", " user-select:none;"], ({
+  theme: theme2
+}) => `
+    color: ${theme2.click.datePicker.color.title.default};
+    font: ${theme2.click.datePicker.typography.title.default};
+  `);
+const DateTable = styled$1.table.withConfig({
+  componentId: "sc-1kfphgn-3"
+})(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+  theme: theme2
+}) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
+  theme: theme2
+}) => theme2.click.datePicker.dateOption.size.height, ({
+  theme: theme2
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+const DateTableHeader = styled$1.th.withConfig({
+  componentId: "sc-1kfphgn-4"
+})(["", " width:14%;"], ({
+  theme: theme2
+}) => `
+    color: ${theme2.click.datePicker.color.daytitle.default};
+    font: ${theme2.click.datePicker.typography.daytitle.default};
+  `);
+const DateTableCell = styled$1.td.withConfig({
+  componentId: "sc-1kfphgn-5"
+})(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
+  theme: theme2
+}) => `
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};
+    font: ${theme2.click.datePicker.dateOption.typography.label.default};
+  `, ({
+  $isCurrentMonth,
+  $isDisabled,
+  theme: theme2
+}) => (!$isCurrentMonth || $isDisabled) && `
+    color: ${theme2.click.datePicker.dateOption.color.label.disabled};
+    font: ${theme2.click.datePicker.dateOption.typography.label.disabled};
+  `, ({
+  $isSelected,
+  theme: theme2
+}) => $isSelected && `
+      background: ${theme2.click.datePicker.dateOption.color.background.active};
+      color: ${theme2.click.datePicker.dateOption.color.label.active};
+    `, ({
+  $isToday,
+  theme: theme2
+}) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
+  $isDisabled,
+  theme: theme2
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
+const DatePickerInput = ({
+  isActive,
+  disabled,
+  id,
+  placeholder,
+  selectedDate
+}) => {
+  const defaultId = useId();
+  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
+    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+  ] });
+};
+const Calendar = ({
+  closeDatepicker,
+  futureDatesDisabled,
+  selectedDate,
+  setSelectedDate
+}) => {
+  const calendarOptions = {
+    defaultWeekStart: 1
+  };
+  if (selectedDate) {
+    calendarOptions.defaultDate = selectedDate;
+  }
+  const {
+    body,
+    headers,
+    month,
+    navigation,
+    year
+  } = useCalendar(calendarOptions);
+  const handleNextClick = () => {
+    navigation.toNext();
+  };
+  const handlePreviousClick = () => {
+    navigation.toPrev();
+  };
+  const headerDate = /* @__PURE__ */ new Date();
+  headerDate.setMonth(month);
+  headerDate.setFullYear(year);
+  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+    /* @__PURE__ */ jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
+      /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
+      /* @__PURE__ */ jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
+      /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
+    ] }),
+    /* @__PURE__ */ jsxs(DateTable, { children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: headers.weekDays.map(({
+        key,
+        value: date
+      }) => {
+        return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
+      }) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: body.value.map(({
+        key: weekKey,
+        value: week
+      }) => {
+        return /* @__PURE__ */ jsx("tr", { children: week.map(({
+          date,
+          isCurrentMonth,
+          key: dayKey,
+          value: fullDate
+        }) => {
+          const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+          const today = /* @__PURE__ */ new Date();
+          const isCurrentDate = isSameDate(today, fullDate);
+          const isDisabled = futureDatesDisabled ? fullDate > today : false;
+          return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
+            if (isDisabled) {
+              return false;
+            }
+            setSelectedDate(fullDate);
+            closeDatepicker();
+          }, children: date }, dayKey);
+        }) }, weekKey);
+      }) })
+    ] })
+  ] });
+};
+const DatePicker = ({
+  date,
+  disabled = false,
+  futureDatesDisabled = false,
+  onSelectDate,
+  placeholder
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState();
+  useEffect(() => {
+    if (date) {
+      setSelectedDate(date);
+    }
+  }, [date]);
+  const closeDatePicker = () => {
+    setIsOpen(false);
+  };
+  const handleSelectDate = (selectedDate2) => {
+    setSelectedDate(selectedDate2);
+    onSelectDate(selectedDate2);
+  };
+  return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+  ] });
+};
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
 const [$5d3850c4d0b4e6c7$var$createDialogContext, $5d3850c4d0b4e6c7$export$cc702773b8ea3e41] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($5d3850c4d0b4e6c7$var$DIALOG_NAME);
 const [$5d3850c4d0b4e6c7$var$DialogProvider, $5d3850c4d0b4e6c7$var$useDialogContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$DIALOG_NAME);
@@ -14345,9 +15117,9 @@ const GridContainer$1 = ({
   overflow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(Wrapper$4, { $alignItems: alignItems, $alignContent: alignContent, $columnGap: columnGap, $gap: gap, $gridAutoColumns: gridAutoColumns, $gridAutoFlow: gridAutoFlow, $gridAutoRows: gridAutoRows, $gridTemplateAreas: gridTemplateAreas, $gridTemplateColumns: gridTemplateColumns, $gridTemplateRows: gridTemplateRows, $gridTemplate: gridTemplate, $inline: inline, $isResponsive: isResponsive, $justifyContent: justifyContent, $justifyItems: justifyItems, $rowGap: rowGap, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $fillWidth: fillWidth, $maxWidth: maxWidth, $minWidth: minWidth, $overflow: overflow, "data-testid": "grid-container", ...props, children });
+  return /* @__PURE__ */ jsx(Wrapper$3, { $alignItems: alignItems, $alignContent: alignContent, $columnGap: columnGap, $gap: gap, $gridAutoColumns: gridAutoColumns, $gridAutoFlow: gridAutoFlow, $gridAutoRows: gridAutoRows, $gridTemplateAreas: gridTemplateAreas, $gridTemplateColumns: gridTemplateColumns, $gridTemplateRows: gridTemplateRows, $gridTemplate: gridTemplate, $inline: inline, $isResponsive: isResponsive, $justifyContent: justifyContent, $justifyItems: justifyItems, $rowGap: rowGap, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $fillWidth: fillWidth, $maxWidth: maxWidth, $minWidth: minWidth, $overflow: overflow, "data-testid": "grid-container", ...props, children });
 };
-const Wrapper$4 = styled.div.withConfig({
+const Wrapper$3 = styled.div.withConfig({
   componentId: "sc-r57kdn-0"
 })(["align-items:", ";align-content:", ";display:", ";", ";", ";", ";", ";", ";", ";", ";justify-content:", ";justify-items:", ";", " ", " ", " ", " @media (max-width:", "){grid-template-columns:", ";}"], ({
   $alignItems = "stretch"
@@ -31669,188 +32441,6 @@ const _Link = ({
   icon && /* @__PURE__ */ jsx(IconWrapper$1, { $size: size2, children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: "external-icon", "data-testid": icon }) })
 ] });
 const Link = forwardRef(_Link);
-const Wrapper$3 = styled.div.withConfig({
-  componentId: "sc-1pvd2nj-0"
-})(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
-  theme: theme2,
-  $error,
-  $resize
-}) => `
-    gap: ${theme2.click.field.space.gap};
-    border-radius: ${theme2.click.field.radii.all};
-    font: ${theme2.click.field.typography.fieldText.default};
-    color: ${theme2.click.field.color.text.default};
-    border: 1px solid ${theme2.click.field.color.stroke.default};
-    background: ${theme2.click.field.color.background.default};
-
-    *:autofill,
-    *:-webkit-autofill  {
-      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
-      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
-      caret-color: ${theme2.click.field.color.text.default};
-    }
-
-    &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.hover};
-      background: ${theme2.click.field.color.background.hover};
-      color: ${theme2.click.field.color.text.hover};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
-        caret-color: ${theme2.click.field.color.text.hover};
-      }
-    }
-    ${$resize === "none" ? "" : `
-      resize: ${$resize};
-      overflow: auto;
-    `}
-    padding: 0 ${theme2.click.field.space.x};
-    ${$error ? `
-      font: ${theme2.click.field.typography.fieldText.error};
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      background: ${theme2.click.field.color.background.active};
-      color: ${theme2.click.field.color.text.error};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
-        caret-color: ${theme2.click.field.color.text.error};
-      }
-
-      &:hover {
-        border: 1px solid ${theme2.click.field.color.stroke.error};
-        color: ${theme2.click.field.color.text.error};
-        *:autofill,
-        *:-webkit-autofill {
-          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
-          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
-          caret-color: ${theme2.click.field.color.text.error};
-        }
-      }
-    ` : `
-    &:focus-within,
-    &[data-state="open"] {
-      font: ${theme2.click.field.typography.fieldText.active};
-      border: 1px solid ${theme2.click.field.color.stroke.active};
-      background: ${theme2.click.field.color.background.active};
-      color: ${theme2.click.field.color.text.active};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
-        caret-color: ${theme2.click.field.color.text.active};
-      }
-    }
-    `};
-    &:disabled, &.disabled {
-      font: ${theme2.click.field.typography.fieldText.disabled};
-      border: 1px solid ${theme2.click.field.color.stroke.disabled};
-      background: ${theme2.click.field.color.background.disabled};
-      color: ${theme2.click.field.color.text.disabled};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
-        caret-color: ${theme2.click.field.color.text.disabled};
-      }
-    }
-  `);
-const StyledLabel = styled(Label$1).withConfig({
-  componentId: "sc-1pvd2nj-1"
-})(["", ""], ({
-  $labelColor
-}) => `
-    ${$labelColor ? `color: ${$labelColor};` : ""}
-  `);
-const InputWrapper = ({
-  id,
-  label = "",
-  labelColor,
-  error: error2,
-  disabled,
-  children,
-  orientation,
-  dir,
-  resize = "none"
-}) => {
-  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
-    /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
-      !!error2 && error2 !== true && /* @__PURE__ */ jsx(Error$1, { children: error2 })
-    ] }),
-    label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
-  ] });
-};
-const InputElement = styled.input.withConfig({
-  componentId: "sc-1pvd2nj-2"
-})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-  theme: theme2
-}) => `
-    padding: ${theme2.click.field.space.y} 0;
-    &::placeholder {
-      color: ${theme2.click.field.color.placeholder.default};
-    }
-
-    &:disabled, &.disabled {
-      &::placeholder {
-      color: ${theme2.click.field.color.placeholder.disabled};
-    }
-  `);
-const NumberInputElement = styled(InputElement).withConfig({
-  componentId: "sc-1pvd2nj-3"
-})(["", ""], ({
-  $hideControls
-}) => `
-    ${$hideControls ? `
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    -moz-appearance: textfield;
-    ` : ""}
-  `);
-const TextAreaElement = styled.textarea.withConfig({
-  componentId: "sc-1pvd2nj-4"
-})(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
-  theme: theme2
-}) => `
-    padding: ${theme2.click.field.space.y} 0;
-    align-self: stretch;
-    &::placeholder {
-      color: ${theme2.click.field.color.placeholder.default};
-    }
-  `);
-styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-5"
-})(["resize:vertical;overflow:auto;color:red;"]);
-const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-6"
-})(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-  theme: theme2,
-  $show
-}) => `
-      padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
-  `);
-styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-7"
-})(["", ""], ({
-  theme: theme2
-}) => `
-    &:first-of-type {
-      padding-left: ${theme2.click.field.space.gap};
-    }
-    &:last-of-type {
-      padding-right: ${theme2.click.field.space.x};
-    }
-  `);
 const NumberField = forwardRef(({
   disabled,
   label,
@@ -39707,8 +40297,8 @@ function isKeyable$1(value) {
 }
 var _isKeyable = isKeyable$1;
 var isKeyable = _isKeyable;
-function getMapData$4(map, key) {
-  var data = map.__data__;
+function getMapData$4(map2, key) {
+  var data = map2.__data__;
   return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
 }
 var _getMapData = getMapData$4;
@@ -41085,6 +41675,41 @@ const click$3 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(10.2 1.39 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
   global: {
     color: {
       text: {
@@ -42690,6 +43315,41 @@ const click$2 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#1F1F1C",
+          disabled: "#a0a0a0",
+          range: "#ffffff"
+        },
+        background: {
+          "default": "#1F1F1C",
+          hover: "#1F1F1C",
+          active: "#FAFF69",
+          disabled: "#1F1F1C",
+          range: "#323232"
+        },
+        stroke: {
+          "default": "#1F1F1C",
+          hover: "#FAFF69",
+          active: "#FAFF69",
+          disabled: "#1F1F1C",
+          range: "#323232"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "rgb(97.5% 97.5% 97.5%)"
+      },
+      daytitle: {
+        "default": "#b3b6bd"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -43470,8 +44130,8 @@ const click$1 = {
           },
           stroke: {
             "default": "#62de85",
-            hover: "#66FF73",
-            active: "#66FF73",
+            hover: "#62de85",
+            active: "#62de85",
             disabled: "#c0c0c0"
           },
           check: {
@@ -44330,6 +44990,41 @@ const click$1 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -45590,8 +46285,8 @@ const click = {
           },
           stroke: {
             "default": "#62de85",
-            hover: "#66FF73",
-            active: "#66FF73",
+            hover: "#62de85",
+            active: "#62de85",
             disabled: "#c0c0c0"
           },
           check: {
@@ -47142,6 +47837,10 @@ const click = {
       narrow: {
         width: "21rem",
         height: "100%"
+      },
+      widest: {
+        width: "55rem",
+        height: "100vh"
       }
     },
     typography: {
@@ -47345,6 +48044,73 @@ const click = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      space: {
+        gap: "2px"
+      },
+      radii: {
+        "default": "0.25rem",
+        range: "0"
+      },
+      stroke: "1px",
+      size: {
+        height: "2rem",
+        width: "2rem"
+      },
+      typography: {
+        label: {
+          "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          hover: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          active: `600 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          disabled: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          range: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
+      },
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    space: {
+      gap: "0.25rem"
+    },
+    typography: {
+      daytitle: {
+        "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      },
+      title: {
+        "default": `600 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -48220,6 +48986,7 @@ export {
   Container,
   ContextMenu,
   DangerAlert,
+  DatePicker,
   Dialog,
   Dropdown,
   EllipsisContent,