@deepnoid/ui 0.1.112 → 0.1.114

package/dist/{chunk-46SXEYRN.mjs → chunk-2PZRTIRD.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-6PNKRBUT.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/chunk-2VQM2ZBF.mjs

@@ -0,0 +1,408 @@
+"use client";
+import {
+  formatDateToString,
+  formatStringToDate
+} from "./chunk-FWFEKWWD.mjs";
+import {
+  Icon_default
+} from "./chunk-FU4CDBVG.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+
+// src/components/picker/datePicker.tsx
+import React, { forwardRef, useCallback, useMemo, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DatePicker = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
+  const {
+    classNames,
+    label,
+    errorMessage,
+    value,
+    onChange,
+    size,
+    placeholder = "",
+    format = "YYYY-MM-DD",
+    highlightWeekend = true,
+    calendarColor = "primary",
+    locale = "default",
+    daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"],
+    monthYearFormat = (year, month) => new Date(year, month).toLocaleString(locale, { year: "numeric", month: "2-digit" }),
+    ...inputProps
+  } = props;
+  const [selectedDate, setSelectedDate] = useState(value || "");
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [currentDate, setCurrentDate] = useState(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const inputWrapperRef = useRef(null);
+  const panelWrapperRef = useRef(null);
+  const [panelPos, setPanelPos] = useState({ top: -9999, left: -9999 });
+  const formatDate = (dateString) => {
+    if (!dateString) return "";
+    const [year, month, day] = dateString.split("-");
+    switch (format) {
+      case "MM/DD/YYYY":
+        return `${month}/${day}/${year}`;
+      case "DD/MM/YYYY":
+        return `${day}/${month}/${year}`;
+      default:
+        return dateString;
+    }
+  };
+  const displayValue = useMemo(() => {
+    return formatDate(selectedDate);
+  }, [selectedDate, format]);
+  const calculatePosition = useCallback(() => {
+    if (inputWrapperRef.current) {
+      const rect = inputWrapperRef.current.getBoundingClientRect();
+      setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
+    }
+  }, []);
+  const handleFocusInput = () => {
+    calculatePosition();
+    setIsPanelOpen(true);
+  };
+  const handleInputBlur = () => {
+    setTimeout(() => setIsPanelOpen(false), 150);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      calculatePosition();
+      setIsPanelOpen((prev) => !prev);
+    } else if (e.key === "Escape") {
+      setIsPanelOpen(false);
+    }
+  };
+  const getCalendarDates = useCallback(() => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
+    const lastDateOfPrevMonth = new Date(year, month, 0).getDate();
+    let dates = [];
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+      dates.push({
+        date: lastDateOfPrevMonth - i,
+        currentMonth: false
+      });
+    }
+    for (let date = 1; date <= lastDateOfMonth; date++) {
+      dates.push({
+        date,
+        currentMonth: true
+      });
+    }
+    const remainingDays = 42 - dates.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      dates.push({
+        date: i,
+        currentMonth: false
+      });
+    }
+    const weeks = [];
+    for (let i = 0; i < dates.length; i += 7) {
+      weeks.push(dates.slice(i, i + 7));
+    }
+    return weeks;
+  }, [currentDate]);
+  const handlePrevMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
+  };
+  const handleNextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+  };
+  const handleDateSelect = (date, isCurrentMonth) => {
+    if (!isCurrentMonth) return;
+    const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+    const formatted = formatDateToString(selected);
+    setSelectedDate(formatted);
+    onChange == null ? void 0 : onChange(formatted);
+    setIsPanelOpen(false);
+  };
+  const handleClearDate = () => {
+    setSelectedDate("");
+    onChange == null ? void 0 : onChange("");
+  };
+  const slots = useMemo(() => datePickerStyle({ ...variantProps }), [variantProps]);
+  const getDateTitleProps = useCallback(
+    (index) => {
+      return {
+        className: clsx(
+          "text-sm font-[500]",
+          highlightWeekend && index === 6 && "text-[#1E7EEE]",
+          highlightWeekend && index === 0 && "text-[#FF4684]"
+        )
+      };
+    },
+    [highlightWeekend]
+  );
+  const getDateProps = useCallback(
+    (dateObj) => {
+      const today = /* @__PURE__ */ new Date();
+      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
+      const formatted = selectedDate ? formatStringToDate(selectedDate) : null;
+      const isSelected = formatted ? formatted.getDate() === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear() : false;
+      const dayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date).getDay();
+      return {
+        className: clsx(
+          "flex justify-center items-center h-[25px] text-sm rounded-full cursor-pointer hover:bg-neutral-light",
+          dateObj.currentMonth && isToday && "border border-foreground",
+          dateObj.currentMonth && isSelected && "!text-white border-none",
+          calendarColor === "primary" && dateObj.currentMonth && isSelected && "!border-primary-main bg-primary-main",
+          calendarColor === "secondary" && dateObj.currentMonth && isSelected && "!border-secondary-main bg-secondary-main",
+          highlightWeekend && dayOfWeek === 6 && "text-neutral-main",
+          highlightWeekend && dayOfWeek === 6 && isToday && "!border-neutral-light",
+          highlightWeekend && dayOfWeek === 0 && "text-danger-main",
+          highlightWeekend && dayOfWeek === 0 && isToday && "!border-danger-light",
+          !dateObj.currentMonth && "!text-neutral-main cursor-default hover:bg-transparent"
+        ),
+        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
+      };
+    },
+    [selectedDate, currentDate, highlightWeekend, calendarColor]
+  );
+  const calendarDates = getCalendarDates();
+  useEffect(() => {
+    if (value !== void 0) {
+      setSelectedDate(value);
+      if (value) {
+        setCurrentDate(new Date(value));
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    if (selectedDate) {
+      setCurrentDate(new Date(selectedDate));
+    }
+  }, [selectedDate]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+      label && /* @__PURE__ */ jsx("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+      /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+        /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+              type: "text",
+              value: displayValue,
+              placeholder,
+              readOnly: true,
+              onFocus: handleFocusInput,
+              onBlur: handleInputBlur,
+              onKeyDown: handleInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }), children: [
+            displayValue && /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "close",
+                className: "text-neutral-light hover:text-neutral-main mr-[5px] cursor-pointer",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClearDate();
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon_default,
+              {
+                name: "calendar",
+                className: "cursor-pointer",
+                fill: true,
+                onClick: () => {
+                  calculatePosition();
+                  setIsPanelOpen((v) => !v);
+                }
+              }
+            )
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ jsx("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
+      ] })
+    ] }),
+    isPanelOpen && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
+          style: {
+            position: "absolute",
+            top: panelPos.top,
+            left: panelPos.left,
+            zIndex: 1e3
+          },
+          onMouseDown: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "calendar-header mb-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+              /* @__PURE__ */ jsx("span", { className: "text-h6 font-semibold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
+              /* @__PURE__ */ jsx(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-7 gap-[5px] text-center", children: calendarDates.map((week, weekIndex) => {
+              const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
+              if (!hasCurrentMonthDates) return null;
+              return /* @__PURE__ */ jsx(React.Fragment, { children: week.map((dateObj, index) => {
+                return /* @__PURE__ */ jsx("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+              }) }, weekIndex);
+            }) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var datePicker_default = DatePicker;
+var datePickerStyle = tv({
+  slots: {
+    base: ["group/datepicker", "flex", "flex-col"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
+    inputWrapper: [
+      "flex",
+      "items-center",
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "group-has-[p.error]/datepicker:border-danger-main",
+      "group-has-[p.error]/datepicker:bg-danger-soft",
+      "group-has-[p.error]/datepicker:text-danger-main",
+      "group-has-[p.error]/datepicker:hover:bg-danger-soft"
+    ],
+    input: [
+      "bg-transparent",
+      "w-full",
+      "outline-none",
+      "placeholder:text-neutral-main",
+      "text-body-foreground",
+      "group-has-[p.error]/datepicker:text-danger-main",
+      "group-has-[p.error]/datepicker:placeholder:text-danger-main",
+      "cursor-pointer"
+    ],
+    icon: [
+      "flex",
+      "items-center",
+      "select-none",
+      "text-body-foreground",
+      "group-has-[p.error]/datepicker:text-danger-main"
+    ],
+    optionsWrapper: [
+      "flex",
+      "flex-col",
+      "border",
+      "rounded-md",
+      "bg-body-background",
+      "shadow-lg",
+      "overflow-auto",
+      "w-[240px]",
+      "select-none",
+      "p-[10px]"
+    ],
+    errorMessage: ["text-danger-main", "text-sm"]
+  },
+  variants: {
+    color: {
+      primary: {
+        icon: ["text-primary-main"]
+      },
+      secondary: {
+        icon: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        input: ["text-sm"],
+        icon: ["text-sm"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        input: ["text-md"],
+        icon: ["text-md"],
+        errorMessage: ["text-sm"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        input: ["text-lg"],
+        icon: ["text-lg"],
+        errorMessage: ["text-md"]
+      },
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        input: ["text-xl"],
+        icon: ["text-xl"],
+        errorMessage: ["text-md"]
+      }
+    },
+    full: {
+      true: {
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["pointer-events-none"],
+        label: ["text-neutral-light"],
+        inputWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/datepicker:text-danger-light",
+          "group-has-[p.error]/datepicker:bg-danger-soft",
+          "group-has-[p.error]/datepicker:border-danger-light",
+          "cursor-not-allowed"
+        ],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/datepicker:text-danger-light",
+          "group-has-[p.error]/datepicker:placeholder:text-danger-light",
+          "cursor-not-allowed"
+        ],
+        icon: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    full: false,
+    disabled: false
+  }
+});
+
+export {
+  datePicker_default,
+  datePickerStyle
+};

package/dist/{chunk-Q36C7WNH.mjs → chunk-4NVZMJGS.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-6PNKRBUT.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-HBEPQQOM.mjs → chunk-5AEN7QTL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";

package/dist/{chunk-3I35VMMV.mjs → chunk-7VTZLHKM.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-AF4I7ZQS.mjs";
 import {
   button_default
-} from "./chunk-Q36C7WNH.mjs";
+} from "./chunk-4NVZMJGS.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-UOP7XLYB.mjs → chunk-7YCUFFKZ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-Q364C3FI.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";

package/dist/{chunk-34DMXYCQ.mjs → chunk-AHBBUMPX.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   select_default
-} from "./chunk-YCLB7ZNK.mjs";
+} from "./chunk-QREBEXKF.mjs";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-KPNIWFLU.mjs → chunk-BFZ6OTVA.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   avatar_default
-} from "./chunk-EQWU2F5T.mjs";
+} from "./chunk-MLD6EZAE.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";

package/dist/{chunk-7K463ANW.mjs → chunk-BKYNB52Z.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-33DLD2L6.mjs";
+} from "./chunk-FU4CDBVG.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-GAZ472ZU.mjs → chunk-CF7LIQF6.mjs}

@@ -16,8 +16,8 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
   const slots = useMemo(() => barChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#C7E5FA",
-    secondary: "#DEC1FA",
-    warning: "#F9C967"
+    secondary: "#92DCB2",
+    warning: "#DEC1FA"
   };
   const [tickPositions, setTickPositions] = useState([]);
   const tickRef = useRef([]);
@@ -68,54 +68,64 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
   }, [data]);
   return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
-      /* @__PURE__ */ jsx(
-        CartesianGrid,
-        {
-          vertical: true,
-          horizontal: false,
-          strokeDasharray: "3 3",
-          className: "stroke-neutral-light",
-          verticalPoints: tickPositions
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: "name",
-          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-          tickLine: false,
-          tick: CustomTick,
-          padding: { left: 32, right: 32 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-          tickLine: false,
-          tick: {
-            fontSize: 12,
-            fontWeight: 700,
-            fill: "text-body-foreground",
-            textAnchor: "middle",
-            dx: -10
-          },
-          ticks: [0, 20, 40, 60, 80, 100],
-          domain: [-6, 110]
-        }
-      ),
-      /* @__PURE__ */ jsx(Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ jsx(Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ jsx(Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
-    ] }) })
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      BarChart,
+      {
+        data,
+        margin: { left: -30 },
+        barSize: 20,
+        barGap: 10,
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "3 3",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "name",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 32, right: 32 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: {
+                fontSize: 12,
+                fontWeight: 700,
+                fill: "text-body-foreground",
+                textAnchor: "middle",
+                dx: -10
+              },
+              ticks: [0, 20, 40, 60, 80, 100],
+              domain: [-6, 110]
+            }
+          ),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ jsx(Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+        ]
+      }
+    ) })
   ] });
 });
 BarChartComponent.displayName = "barChart";
 var barChart_default = BarChartComponent;
 var barChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "gap-[10px]"],
+    base: ["flex", "flex-col", "gap-[10px]", "select-none"],
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},