@pequity/squirrel 5.4.0 → 5.4.2

package/dist/cjs/p-modal.js

@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     },
     bgClass: {
       type: [String, Object, Array],
-      default: "fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20"
+      default: "fixed bottom-0 left-0 right-0 top-0 bg-black/20"
     },
     wrapperClass: {
       type: [String, Object, Array],
@@ -111,7 +111,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "4046568f": __props.maxWidth
+      "6f065855": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -368,5 +368,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7e6a0b8d"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-dd6e68e1"]]);
 module.exports = pModal;

package/dist/cjs/p-table-td.js

@@ -2,9 +2,7 @@
 const vue = require("vue");
 const pTable = require("./p-table.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-09e6d191"), n = n(), vue.popScopeId(), n);
-const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("div", { class: "dropdown-anchor" }, null, -1));
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "min-w-[80px] border-l border-p-gray-30 bg-gradient-to-r from-white via-p-gray-10 to-p-gray-10"
 };
@@ -72,14 +70,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createElementVNode("td", vue.mergeProps({ class: tdClass.value }, _ctx.$attrs), [
-          _hoisted_1,
+          _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "dropdown-anchor" }, null, -1)),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(innerDivClass.value)
           }, [
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ], 2)
         ], 16),
-        vue.unref(isColsResizable) && isLastCol.value && !vue.unref(isLastColFixed) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_2)) : vue.createCommentVNode("", true)
+        vue.unref(isColsResizable) && isLastCol.value && !vue.unref(isLastColFixed) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_1)) : vue.createCommentVNode("", true)
       ], 64);
     };
   }

package/dist/es/chunks/p-action-bar.js

@@ -2183,12 +2183,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
 const _hoisted_2 = { class: "whitespace-nowrap px-3" };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
-const _hoisted_4 = { class: "flex" };
+const _hoisted_3 = { class: "flex" };
+const _hoisted_4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
-const _hoisted_6 = { class: "flex items-center gap-2 px-1 py-0.5" };
-const _hoisted_7 = { class: "flex flex-col bg-p-purple-60" };
-const _hoisted_8 = { class: "flex items-center gap-2 px-1 py-0.5" };
+const _hoisted_6 = { class: "flex flex-col bg-p-purple-60" };
+const _hoisted_7 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "PActionBar",
@@ -2215,8 +2214,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
             }),
             createElementVNode("p", _hoisted_2, toDisplayString(_ctx.label), 1),
-            _hoisted_3,
-            createElementVNode("div", _hoisted_4, [
+            _cache[1] || (_cache[1] = createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
+            createElementVNode("div", _hoisted_3, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (actionOrMenu) => {
                 return openBlock(), createElementBlock(Fragment, {
                   key: `action-${actionOrMenu.label}`
@@ -2228,7 +2227,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_5, [
+                      createElementVNode("div", _hoisted_4, [
                         unref(isComponent)(actionOrMenu.icon) ? (openBlock(), createBlock(resolveDynamicComponent(actionOrMenu.icon), {
                           key: 0,
                           class: "h-4 w-4"
@@ -2249,7 +2248,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     strategy: "fixed"
                   }, {
                     popper: withCtx(() => [
-                      createElementVNode("div", _hoisted_7, [
+                      createElementVNode("div", _hoisted_6, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(actionOrMenu.subActions, (subaction) => {
                           return openBlock(), createElementBlock("div", {
                             key: `subaction-${subaction.name}`
@@ -2261,7 +2260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               onClick: ($event) => _ctx.$emit("click:action", subaction.name)
                             }, {
                               default: withCtx(() => [
-                                createElementVNode("div", _hoisted_8, [
+                                createElementVNode("div", _hoisted_7, [
                                   unref(isComponent)(subaction.icon) ? (openBlock(), createBlock(resolveDynamicComponent(subaction.icon), {
                                     key: 0,
                                     class: "h-4 w-4"
@@ -2287,7 +2286,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         type: "secondary-ghost-dark"
                       }, {
                         default: withCtx(() => [
-                          createElementVNode("div", _hoisted_6, [
+                          createElementVNode("div", _hoisted_5, [
                             unref(isComponent)(actionOrMenu.icon) ? (openBlock(), createBlock(resolveDynamicComponent(actionOrMenu.icon), {
                               key: 0,
                               class: "h-4 w-4"

package/dist/es/chunks/p-date-picker.js

@@ -0,0 +1,109 @@
+import { defineComponent, useAttrs, ref, computed, watch, nextTick, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, unref, toDisplayString, createCommentVNode, createVNode, withCtx, mergeProps, toHandlers, withDirectives, createElementVNode, vShow } from "vue";
+import PInput from "../p-input.js";
+import dayjs from "dayjs";
+import { DatePicker } from "v-calendar";
+import { isString, isDate } from "lodash-es";
+import { useInputClasses } from "../useInputClasses.js";
+const _hoisted_1 = ["data-has-error"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PDatePicker",
+    inheritAttrs: false
+  },
+  __name: "p-date-picker",
+  props: {
+    modelValue: { default: "" },
+    label: { default: "" },
+    errorMsg: { default: "" },
+    required: { type: Boolean, default: false },
+    minDate: { default: null },
+    maxDate: { default: null },
+    timezone: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const selectAttribute = { highlight: { class: "bg-primary", contentClass: "text-white" } };
+    const DEFAULT_MASKS = {
+      // The mask for the input
+      input: "DD-MMM-YYYY",
+      // The mask for the model value
+      data: "YYYY-MM-DD"
+    };
+    const props = __props;
+    const emit = __emit;
+    const { labelClasses, errorMsgClasses } = useInputClasses(props);
+    const attrs = useAttrs();
+    const innerValue = ref(null);
+    const stopWatch = ref(false);
+    const masks = computed(() => {
+      return Object.assign(DEFAULT_MASKS, attrs.masks);
+    });
+    const displayPlaceholder = computed(() => {
+      return isString(attrs.placeholder) ? attrs.placeholder : masks.value.input;
+    });
+    const attrsWithoutClassAndStyle = computed(() => {
+      const { class: classes, style: style2, ...rest } = attrs;
+      return rest;
+    });
+    const style = computed(() => {
+      return attrs.style;
+    });
+    watch(
+      () => props.modelValue,
+      (nV) => {
+        if (!stopWatch.value) {
+          innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
+        }
+      },
+      { immediate: true }
+    );
+    watch(innerValue, (nV) => {
+      const toEmit = isDate(nV) && nV.toString() !== "Invalid Date" ? dayjs(nV).format(masks.value.data) : null;
+      stopWatch.value = true;
+      emit("update:modelValue", toEmit);
+      nextTick(() => {
+        stopWatch.value = false;
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
+        "data-has-error": !!_ctx.errorMsg,
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "label", {
+          label: _ctx.label,
+          labelClasses: unref(labelClasses)
+        }, () => [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            class: normalizeClass(unref(labelClasses))
+          }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
+        ]),
+        createVNode(unref(DatePicker), {
+          modelValue: innerValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+          "select-attribute": selectAttribute,
+          popover: { visibility: "click", placement: "auto" },
+          "min-date": _ctx.minDate || null,
+          "max-date": _ctx.maxDate || null,
+          masks: masks.value,
+          timezone: _ctx.timezone
+        }, {
+          default: withCtx(({ inputValue, inputEvents }) => [
+            createVNode(PInput, mergeProps({ value: inputValue }, attrsWithoutClassAndStyle.value, { placeholder: displayPlaceholder.value }, toHandlers(inputEvents)), null, 16, ["value", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "min-date", "max-date", "masks", "timezone"]),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(unref(errorMsgClasses))
+        }, toDisplayString(_ctx.errorMsg), 3), [
+          [vShow, _ctx.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-dropdown-select.js

@@ -20,10 +20,9 @@ const _hoisted_4 = {
 };
 const _hoisted_5 = { class: "text-p-purple-60" };
 const _hoisted_6 = { class: "flex flex-row" };
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "px-1 leading-none" }, ".", -1);
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = ["title"];
-const _hoisted_10 = {
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = ["title"];
+const _hoisted_9 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
@@ -296,7 +295,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       onClick: _cache[2] || (_cache[2] = //@ts-ignore
                       (...args) => unref(selectAll) && unref(selectAll)(...args))
                     }, " Select all filtered ", 2)),
-                    _hoisted_7,
+                    _cache[6] || (_cache[6] = createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
                     createElementVNode("a", {
                       class: normalizeClass([unref(selectedItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
                       onClick: _cache[3] || (_cache[3] = //@ts-ignore
@@ -363,11 +362,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   class: normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_9)
+                            ], 8, _hoisted_8)
                           ]),
-                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_10)) : createCommentVNode("", true)
+                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_9)) : createCommentVNode("", true)
                         ], 2)
-                      ], 14, _hoisted_8)), [
+                      ], 14, _hoisted_7)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);

package/dist/es/chunks/p-inline-date-picker.js

@@ -0,0 +1,113 @@
+import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, unref, toDisplayString, createCommentVNode, createVNode, mergeProps, withDirectives, createElementVNode, vShow } from "vue";
+import dayjs from "dayjs";
+import { DatePicker } from "v-calendar";
+import { useInputClasses } from "../useInputClasses.js";
+const _hoisted_1 = ["data-has-error"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PInlineDatePicker",
+    inheritAttrs: false
+  },
+  __name: "p-inline-date-picker",
+  props: {
+    modelValue: { default: "" },
+    label: { default: "" },
+    errorMsg: { default: "" },
+    required: { type: Boolean, default: false },
+    minDate: { default: null },
+    maxDate: { default: null },
+    timezone: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const selectAttribute = {
+      highlight: { class: "bg-primary", contentClass: "text-white" }
+    };
+    const DEFAULT_MASKS = {
+      // The mask for the input
+      input: "DD-MMM-YYYY",
+      // The mask for the model value
+      data: "YYYY-MM-DD"
+    };
+    const props = __props;
+    const emit = __emit;
+    const { labelClasses, errorMsgClasses } = useInputClasses(props);
+    const attrs = useAttrs();
+    const innerValue = ref(null);
+    const datepickerRef = ref(null);
+    const masks = computed(() => {
+      return Object.assign(DEFAULT_MASKS, attrs.masks);
+    });
+    const listeners = computed(() => {
+      return Object.keys(attrs).reduce((acc, curr) => {
+        if (curr.startsWith("on")) {
+          return { ...acc, [curr]: attrs[curr] };
+        } else {
+          return acc;
+        }
+      }, {});
+    });
+    const style = computed(() => {
+      return attrs.style;
+    });
+    const styleDatepicker = computed(() => {
+      return props.errorMsg ? { border: "1px solid #f0453c" } : {};
+    });
+    const dayclick = (e) => {
+      emit("update:modelValue", e.id);
+    };
+    watch(
+      () => props.modelValue,
+      async (nV) => {
+        const date = dayjs(nV, masks.value.data).toDate();
+        if (nV && date.toString() === "Invalid Date") {
+          emit("update:modelValue", null);
+          return;
+        }
+        innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
+        const datepicker = datepickerRef.value;
+        if (datepicker && typeof datepicker.move === "function" && innerValue.value) {
+          await datepicker.move(innerValue.value);
+        }
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
+        "data-has-error": !!_ctx.errorMsg,
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "label", {
+          label: _ctx.label,
+          labelClasses: unref(labelClasses)
+        }, () => [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            class: normalizeClass(unref(labelClasses))
+          }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
+        ]),
+        createVNode(unref(DatePicker), mergeProps({
+          ref_key: "datepickerRef",
+          ref: datepickerRef,
+          class: { "pointer-events-none opacity-70": _ctx.$attrs.disabled },
+          "model-value": innerValue.value,
+          "select-attribute": selectAttribute,
+          "min-date": _ctx.minDate || null,
+          "max-date": _ctx.maxDate || null,
+          masks: masks.value,
+          style: styleDatepicker.value,
+          timezone: _ctx.timezone
+        }, listeners.value, { onDayclick: dayclick }), null, 16, ["class", "model-value", "min-date", "max-date", "masks", "style", "timezone"]),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(unref(errorMsgClasses))
+        }, toDisplayString(_ctx.errorMsg), 3), [
+          [vShow, _ctx.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-input-percent.js

@@ -1,10 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, normalizeClass } from "vue";
 import PInputNumber from "../p-input-number.js";
 import { isNumber } from "lodash-es";
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", null, "%", -1);
-const _hoisted_2 = [
-  _hoisted_1
-];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "PInputPercent"
@@ -42,7 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         prefix: withCtx(() => [
           createElementVNode("div", {
             class: normalizeClass(["absolute flex items-center", prefixClasses[__props.size]])
-          }, _hoisted_2, 2)
+          }, _cache[1] || (_cache[1] = [
+            createElementVNode("div", null, "%", -1)
+          ]), 2)
         ]),
         _: 1
       }, 8, ["modelValue", "size"]);

package/dist/es/chunks/p-pagination-info.js

@@ -56,7 +56,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.count ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createTextVNode("Showing " + toDisplayString(from.value) + " to " + toDisplayString(to.value) + " of " + toDisplayString(__props.count) + " results", 1)
         ], 64)) : renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
-          createTextVNode("No results found")
+          _cache[0] || (_cache[0] = createTextVNode("No results found"))
         ])
       ]));
     };

package/dist/es/chunks/p-pagination.js

@@ -7,17 +7,9 @@ const _hoisted_1 = {
   key: 1,
   class: "flex text-p-gray-40"
 };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("img", { src: _imports_0 }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "flex" };
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("img", { src: _imports_1 }, null, -1);
-const _hoisted_8 = [
-  _hoisted_7
-];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "flex" };
+const _hoisted_4 = ["aria-label"];
 const DOTS = "...";
 const BTN_CLASS = "w-6 h-6 flex justify-center items-center mx-1 font-semibold text-sm leading-none";
 const BTN_ACTIVE_CLASS = "text-p-purple-60 bg-p-gray-30 rounded-lg";
@@ -90,29 +82,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass([BTN_CLASS, Number(__props.modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
             "aria-label": "go to the previous page",
             onClick: _cache[0] || (_cache[0] = ($event) => setPage(Number(__props.modelValue) - 1))
-          }, _hoisted_3, 2),
+          }, _cache[2] || (_cache[2] = [
+            createElementVNode("img", { src: _imports_0 }, null, -1)
+          ]), 2),
           (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
               onClick: ($event) => setPage(Number(page))
             }, [
-              createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_3, [
                 page !== DOTS ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   class: normalizeClass([BTN_CLASS, page === __props.modelValue ? BTN_ACTIVE_CLASS : BTN_INACTIVE_CLASS]),
                   "aria-label": `go to page ${page}`
-                }, toDisplayString(page), 11, _hoisted_6)) : (openBlock(), createElementBlock("div", {
+                }, toDisplayString(page), 11, _hoisted_4)) : (openBlock(), createElementBlock("div", {
                   key: 1,
                   class: normalizeClass(BTN_CLASS)
                 }, toDisplayString(DOTS)))
               ])
-            ], 8, _hoisted_4);
+            ], 8, _hoisted_2);
           }), 128)),
           createElementVNode("div", {
             class: normalizeClass([BTN_CLASS, __props.modelValue === pageCount.value ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
             "aria-label": "go to the next page",
             onClick: _cache[1] || (_cache[1] = ($event) => setPage(Number(__props.modelValue) + 1))
-          }, _hoisted_8, 2)
+          }, _cache[3] || (_cache[3] = [
+            createElementVNode("img", { src: _imports_1 }, null, -1)
+          ]), 2)
         ])) : createCommentVNode("", true)
       ], 64);
     };

package/dist/es/config.js

@@ -5,71 +5,71 @@ const config = {
       transparent: "transparent",
       current: "currentColor",
       /* Design system colors */
-      white: "#fff",
-      black: "#000",
-      night: "var(--color-night)",
-      "barley-white": "var(--color-barley-white)",
-      "horses-neck": "var(--color-horses-neck)",
-      "active-blue": "var(--color-active-blue)",
+      white: "rgb(var(--color-white))",
+      black: "rgb(var(--color-black))",
+      night: "rgb(var(--color-night))",
+      "barley-white": "rgb(var(--color-barley-white))",
+      "horses-neck": "rgb(var(--color-horses-neck))",
+      "active-blue": "rgb(var(--color-active-blue))",
       /* Pequity colors */
       "p-gray": {
-        10: "var(--color-p-gray-10)",
-        20: "var(--color-p-gray-20)",
-        30: "var(--color-p-gray-30)",
-        40: "var(--color-p-gray-40)",
-        50: "var(--color-p-gray-50)",
-        60: "var(--color-p-gray-60)",
-        70: "var(--color-p-gray-70)",
-        80: "var(--color-p-gray-80)",
-        90: "var(--color-p-gray-90)",
-        100: "var(--color-p-gray-100)"
+        10: "rgb(var(--color-p-gray-10))",
+        20: "rgb(var(--color-p-gray-20))",
+        30: "rgb(var(--color-p-gray-30))",
+        40: "rgb(var(--color-p-gray-40))",
+        50: "rgb(var(--color-p-gray-50))",
+        60: "rgb(var(--color-p-gray-60))",
+        70: "rgb(var(--color-p-gray-70))",
+        80: "rgb(var(--color-p-gray-80))",
+        90: "rgb(var(--color-p-gray-90))",
+        100: "rgb(var(--color-p-gray-100))"
       },
       "p-blue": {
-        10: "var(--color-p-blue-10)",
-        15: "var(--color-p-blue-15)",
-        20: "var(--color-p-blue-20)",
-        30: "var(--color-p-blue-30)",
-        40: "var(--color-p-blue-40)",
-        50: "var(--color-p-blue-50)",
-        60: "var(--color-p-blue-60)",
-        70: "var(--color-p-blue-70)",
-        80: "var(--color-p-blue-80)"
+        10: "rgb(var(--color-p-blue-10))",
+        15: "rgb(var(--color-p-blue-15))",
+        20: "rgb(var(--color-p-blue-20))",
+        30: "rgb(var(--color-p-blue-30))",
+        40: "rgb(var(--color-p-blue-40))",
+        50: "rgb(var(--color-p-blue-50))",
+        60: "rgb(var(--color-p-blue-60))",
+        70: "rgb(var(--color-p-blue-70))",
+        80: "rgb(var(--color-p-blue-80))"
       },
       "p-purple": {
-        10: "var(--color-p-purple-10)",
-        20: "var(--color-p-purple-20)",
-        30: "var(--color-p-purple-30)",
-        40: "var(--color-p-purple-40)",
-        50: "var(--color-p-purple-50)",
-        60: "var(--color-p-purple-60)"
+        10: "rgb(var(--color-p-purple-10))",
+        20: "rgb(var(--color-p-purple-20))",
+        30: "rgb(var(--color-p-purple-30))",
+        40: "rgb(var(--color-p-purple-40))",
+        50: "rgb(var(--color-p-purple-50))",
+        60: "rgb(var(--color-p-purple-60))"
       },
       "p-green": {
-        10: "var(--color-p-green-10)",
-        20: "var(--color-p-green-20)",
-        30: "var(--color-p-green-30)",
-        40: "var(--color-p-green-40)",
-        50: "var(--color-p-green-50)"
+        10: "rgb(var(--color-p-green-10))",
+        20: "rgb(var(--color-p-green-20))",
+        30: "rgb(var(--color-p-green-30))",
+        40: "rgb(var(--color-p-green-40))",
+        50: "rgb(var(--color-p-green-50))"
       },
       "p-red": {
-        10: "var(--color-p-red-10)",
-        20: "var(--color-p-red-20)",
-        30: "var(--color-p-red-30)",
-        40: "var(--color-p-red-40)",
-        50: "var(--color-p-red-50)"
+        10: "rgb(var(--color-p-red-10))",
+        20: "rgb(var(--color-p-red-20))",
+        30: "rgb(var(--color-p-red-30))",
+        40: "rgb(var(--color-p-red-40))",
+        50: "rgb(var(--color-p-red-50))"
       },
       /* Aliases */
-      primary: "var(--color-primary)",
-      accent: "var(--color-accent)",
-      surface: "var(--color-surface)",
-      "on-surface": "var(--color-on-surface)",
-      error: "var(--color-error)",
-      "on-error": "var(--color-on-error)",
-      info: "var(--color-info)",
-      "on-info": "var(--color-on-info)",
-      success: "var(--color-success)",
-      "on-success": "var(--color-on-success)",
-      warning: "var(--color-warning)",
-      "on-warning": "var(--color-on-warning)"
+      primary: "rgb(var(--color-primary))",
+      accent: "rgb(var(--color-accent))",
+      surface: "rgb(var(--color-surface))",
+      "on-surface": "rgb(var(--color-on-surface))",
+      error: "rgb(var(--color-error))",
+      "on-error": "rgb(var(--color-on-error))",
+      info: "rgb(var(--color-info))",
+      "on-info": "rgb(var(--color-on-info))",
+      success: "rgb(var(--color-success))",
+      "on-success": "rgb(var(--color-on-success))",
+      warning: "rgb(var(--color-warning))",
+      "on-warning": "rgb(var(--color-on-warning))"
     },
     fontFamily: {
       sans: ["Inter", "Helvetica", "Arial", "sans-serif"]
@@ -88,7 +88,7 @@ const config = {
     },
     extend: {
       borderColor: {
-        DEFAULT: "var(--color-p-gray-30)"
+        DEFAULT: "rgb(var(--color-p-gray-30))"
       },
       spacing: {
         7.5: "1.875rem"