@rovula/ui 0.0.77 → 0.0.78

package/dist/components/MaskedTextInput/MaskedTextInput.js

@@ -0,0 +1,267 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect, } from "react";
+import TextInput from "../TextInput/TextInput";
+import { cn } from "@/utils/cn";
+// Kendo UI style mask patterns
+export const MASK_PATTERNS = {
+    PHONE: "(000) 000-0000",
+    PHONE_INTL: "+000 000 000 0000",
+    CREDIT_CARD: "0000 0000 0000 0000",
+    DATE: "00/00/0000",
+    TIME: "00:00",
+    SSN: "000-00-0000",
+    ZIP_CODE: "00000",
+    ZIP_CODE_EXT: "00000-0000",
+    CURRENCY: "$000,000.00",
+    PERCENTAGE: "000%",
+    LICENSE_PLATE: "AAA-0000",
+    PRODUCT_CODE: "AA-0000-AA",
+    ALPHANUMERIC: "AAAA-0000",
+};
+// Kendo UI mask rules
+const KENDO_RULES = {
+    "0": { pattern: /[0-9]/, placeholder: "0" }, // Any digit 0-9
+    "9": { pattern: /[0-9\s]/, placeholder: "9" }, // Any digit 0-9 or space
+    "#": { pattern: /[0-9\s+\-]/, placeholder: "#" }, // Any digit, space, +, or -
+    L: { pattern: /[a-zA-Z]/, placeholder: "L" }, // Any letter
+    "?": { pattern: /[a-zA-Z\s]/, placeholder: "?" }, // Any letter or space
+    "&": { pattern: /[^\s]/, placeholder: "&" }, // Any character except space
+    C: { pattern: /./, placeholder: "C" }, // Any character including space
+    A: { pattern: /[a-zA-Z0-9]/, placeholder: "A" }, // Any alphanumeric
+    a: { pattern: /[a-zA-Z0-9\s]/, placeholder: "a" }, // Any alphanumeric or space
+};
+// Helper function to create mask pattern from string using Kendo UI rules
+const createMaskPattern = (mask, customRules) => {
+    const rules = Object.assign(Object.assign({}, KENDO_RULES), customRules);
+    const pattern = [];
+    let i = 0;
+    while (i < mask.length) {
+        const char = mask[i];
+        if (char === "\\" && i + 1 < mask.length) {
+            // Escaped character - treat as literal
+            const nextChar = mask[i + 1];
+            pattern.push({
+                pattern: new RegExp(`^${nextChar}$`),
+                placeholder: nextChar,
+                isLiteral: true,
+            });
+            i += 2;
+        }
+        else if (rules[char]) {
+            // Apply Kendo rule
+            const rule = rules[char];
+            if (typeof rule === "function") {
+                pattern.push({
+                    pattern: /./, // Accept any character, validate with function
+                    placeholder: char,
+                    validator: rule,
+                });
+            }
+            else if (rule instanceof RegExp) {
+                pattern.push({
+                    pattern: rule,
+                    placeholder: char,
+                });
+            }
+            else {
+                pattern.push({
+                    pattern: rule.pattern,
+                    placeholder: rule.placeholder,
+                });
+            }
+            i++;
+        }
+        else {
+            // Literal character
+            pattern.push({
+                pattern: new RegExp(`^${char.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+                placeholder: char,
+                isLiteral: true,
+            });
+            i++;
+        }
+    }
+    return pattern;
+};
+// Helper function to apply mask to value using Kendo UI rules
+const applyMask = (value, maskPattern, maskChar = "_", showMask = true, guide = true) => {
+    let maskedValue = "";
+    let valueIndex = 0;
+    for (let i = 0; i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        if (rule.isLiteral) {
+            // Literal character - always add
+            maskedValue += rule.placeholder;
+        }
+        else {
+            // Input character - find next valid character
+            let foundValid = false;
+            while (valueIndex < value.length) {
+                const char = value[valueIndex];
+                valueIndex++;
+                // Check with validator function first if exists
+                const isValid = rule.validator
+                    ? rule.validator(char)
+                    : rule.pattern.test(char);
+                if (isValid) {
+                    maskedValue += char;
+                    foundValid = true;
+                    break;
+                }
+                // Skip invalid characters and continue searching
+            }
+            if (!foundValid && guide && showMask) {
+                // No valid character found, fill with placeholder
+                maskedValue += maskChar;
+            }
+            else if (!foundValid) {
+                // No placeholder needed, stop building the mask
+                break;
+            }
+        }
+    }
+    return maskedValue;
+};
+// Helper function to extract raw value from masked value
+const extractRawValue = (maskedValue, maskPattern) => {
+    let rawValue = "";
+    for (let i = 0; i < maskedValue.length && i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (!rule.isLiteral) {
+            // Only include non-literal characters in raw value
+            rawValue += char;
+        }
+    }
+    return rawValue;
+};
+// Helper function to get cursor position after masking
+const getCursorPosition = (maskedValue, rawInputLength, maskPattern) => {
+    let inputCount = 0;
+    let cursorPos = 0;
+    for (let i = 0; i < maskPattern.length && i < maskedValue.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (rule.isLiteral) {
+            cursorPos = i + 1;
+        }
+        else {
+            inputCount++;
+            cursorPos = i + 1;
+            if (inputCount >= rawInputLength) {
+                break;
+            }
+        }
+    }
+    return cursorPos;
+};
+export const MaskedTextInput = forwardRef((_a, ref) => {
+    var { mask, maskChar = "_", showMask = true, guide = true, keepCharPositions = false, rules, onMaskedChange, onChange, value, defaultValue } = _a, props = __rest(_a, ["mask", "maskChar", "showMask", "guide", "keepCharPositions", "rules", "onMaskedChange", "onChange", "value", "defaultValue"]);
+    const inputRef = useRef(null);
+    const [maskedValue, setMaskedValue] = useState("");
+    const [rawValue, setRawValue] = useState("");
+    // Parse mask pattern using Kendo UI rules
+    const maskPattern = React.useMemo(() => {
+        if (!mask)
+            return null;
+        return createMaskPattern(mask, rules);
+    }, [mask, rules]);
+    // Initialize values
+    useEffect(() => {
+        const initialValue = value || defaultValue || "";
+        if (maskPattern && initialValue) {
+            const masked = applyMask(initialValue, maskPattern, maskChar, showMask, guide);
+            const raw = extractRawValue(masked, maskPattern);
+            setMaskedValue(masked);
+            setRawValue(raw);
+        }
+        else {
+            setMaskedValue(initialValue);
+            setRawValue(initialValue);
+        }
+    }, [maskPattern, maskChar, showMask, guide, value, defaultValue]);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleChange = useCallback((event) => {
+        const inputValue = event.target.value;
+        if (!maskPattern) {
+            setMaskedValue(inputValue);
+            setRawValue(inputValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(inputValue, inputValue);
+            return;
+        }
+        const newMaskedValue = applyMask(inputValue, maskPattern, maskChar, showMask, guide);
+        const newRawValue = extractRawValue(newMaskedValue, maskPattern);
+        setMaskedValue(newMaskedValue);
+        setRawValue(newRawValue);
+        // Create synthetic event with masked value
+        const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: newMaskedValue }) });
+        onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent);
+        onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(newMaskedValue, newRawValue);
+        // Set cursor position after state update
+        setTimeout(() => {
+            if (inputRef.current) {
+                const rawLength = newRawValue.replace(/[_\s]/g, "").length;
+                const newCursorPos = getCursorPosition(newMaskedValue, rawLength, maskPattern);
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+            }
+        }, 0);
+    }, [maskPattern, maskChar, showMask, guide, onChange, onMaskedChange]);
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b, _c;
+        if (!maskPattern) {
+            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            return;
+        }
+        const { key, ctrlKey, metaKey } = event;
+        const input = event.target;
+        const cursorPos = input.selectionStart || 0;
+        // Allow navigation and editing keys
+        if (key === "Backspace" ||
+            key === "Delete" ||
+            key === "ArrowLeft" ||
+            key === "ArrowRight" ||
+            key === "Home" ||
+            key === "End" ||
+            key === "Tab" ||
+            key.length > 1 || // Allow other special keys
+            ctrlKey ||
+            metaKey) {
+            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+            return;
+        }
+        // Find the next non-literal position from cursor
+        let targetPos = cursorPos;
+        while (targetPos < maskPattern.length &&
+            maskPattern[targetPos].isLiteral) {
+            targetPos++;
+        }
+        // Check if we have a valid position and the key matches
+        if (targetPos < maskPattern.length) {
+            const targetRule = maskPattern[targetPos];
+            // Check with validator function first if exists
+            const isValid = targetRule.validator
+                ? targetRule.validator(key)
+                : targetRule.pattern.test(key);
+            if (!isValid) {
+                event.preventDefault();
+                return;
+            }
+        }
+        (_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, event);
+    }, [maskPattern, props]);
+    return (_jsx(TextInput, Object.assign({}, props, { ref: inputRef, value: maskedValue, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(props.className) })));
+});
+MaskedTextInput.displayName = "MaskedTextInput";
+export default MaskedTextInput;

package/dist/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import MaskedTextInput, { MASK_PATTERNS } from "./MaskedTextInput";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+    title: "Components/MaskedTextInput",
+    component: MaskedTextInput,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(MaskedTextInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "3", size: "sm" }, args))] }));
+    },
+};
+export const PhoneNumber = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL }))] }));
+    },
+};
+export const CreditCard = {
+    args: {
+        label: "Credit Card Number",
+        mask: MASK_PATTERNS.CREDIT_CARD,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const DateAndTime = {
+    args: {
+        label: "Date",
+        mask: MASK_PATTERNS.DATE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME }))] }));
+    },
+};
+export const SocialSecurityNumber = {
+    args: {
+        label: "Social Security Number",
+        mask: MASK_PATTERNS.SSN,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const ZipCode = {
+    args: {
+        label: "ZIP Code",
+        mask: MASK_PATTERNS.ZIP_CODE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT }))] }));
+    },
+};
+export const Currency = {
+    args: {
+        label: "Amount",
+        mask: MASK_PATTERNS.CURRENCY,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const CustomMask = {
+    args: {
+        label: "Custom Pattern",
+        mask: "AAA-999-AAA",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "License Plate", mask: "999-AAA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Product Code", mask: "AA-9999-AA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: "00:00:00" }))] }));
+    },
+};
+export const MaskOptions = {
+    args: {
+        label: "Phone with Options",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "With Guide", guide: true, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Without Guide", guide: false, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Mask Char", maskChar: "*", guide: true, showMask: true }))] }));
+    },
+};
+export const WithCallbacks = {
+    args: {
+        label: "Phone with Callbacks",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        const [maskedValue, setMaskedValue] = useState("");
+        const [rawValue, setRawValue] = useState("");
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { onChange: (e) => {
+                        setMaskedValue(e.target.value);
+                        setRawValue(e.target.value);
+                    }, onMaskedChange: (masked, raw) => {
+                        setMaskedValue(masked);
+                        setRawValue(raw);
+                    } })), _jsxs("div", { className: "p-4 bg-gray-100 rounded", children: [_jsxs("p", { children: [_jsx("strong", { children: "Masked Value:" }), " ", maskedValue] }), _jsxs("p", { children: [_jsx("strong", { children: "Raw Value:" }), " ", rawValue] })] })] }));
+    },
+};
+export const AllPatterns = {
+    args: {
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-2xl", children: [_jsx("h3", { className: "text-lg font-semibold", children: "All Mask Patterns" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "Phone", mask: MASK_PATTERNS.PHONE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Credit Card", mask: MASK_PATTERNS.CREDIT_CARD })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Date", mask: MASK_PATTERNS.DATE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "SSN", mask: MASK_PATTERNS.SSN })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code", mask: MASK_PATTERNS.ZIP_CODE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Currency", mask: MASK_PATTERNS.CURRENCY })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Percentage", mask: MASK_PATTERNS.PERCENTAGE }))] })] }));
+    },
+};
+export const KendoRules = {
+    args: {
+        label: "Kendo UI Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Kendo UI Mask Rules Examples" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 0 (Digits Only)", mask: "000-000-0000", helperText: "0 = Required digit (0-9)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: L (Letters Only)", mask: "LLL-LLLL", helperText: "L = Required letter (a-z, A-Z)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: A (Alphanumeric)", mask: "AAAA-0000", helperText: "A = Letter or digit" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: # (Number with sign)", mask: "###", helperText: "# = Digit, space, + or -" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Pattern Example", mask: "(000) LLL-0000", helperText: "Format: (123) ABC-4567" }))] }));
+    },
+};
+export const OptionalRules = {
+    args: {
+        label: "Optional Rules (with space)",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Rules that accept space (optional input)" }), _jsx("p", { className: "text-xs text-gray-500", children: "Note: These rules allow space, making the position optional" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 9 (Digit or Space)", mask: "999-999-9999", helperText: "9 = Optional digit (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: ? (Letter or Space)", mask: "???-????", helperText: "? = Optional letter (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: a (Alphanumeric or Space)", mask: "aaaa-aaaa", helperText: "a = Optional alphanumeric (press space to skip)", guide: false }))] }));
+    },
+};
+export const CustomRules = {
+    args: {
+        label: "Custom Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Custom Validation Rules" }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Digits 3-9 only", mask: "~-~-~", rules: {
+                            "~": /[3-9]/,
+                        }, helperText: "Type only digits 3, 4, 5, 6, 7, 8, or 9" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Uppercase letters only", mask: "***", rules: {
+                            "*": (char) => char === char.toUpperCase() && /[A-Z]/.test(char),
+                        }, helperText: "Type only uppercase letters (A-Z)" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Custom Rules", mask: "~*-~*", rules: {
+                            "~": /[0-9]/,
+                            "*": /[A-Z]/,
+                        }, helperText: "Format: Digit-Letter-Digit-Letter" })) })] }));
+    },
+};

package/dist/components/MaskedTextInput/index.js

@@ -0,0 +1,2 @@
+export { default } from "./MaskedTextInput";
+export { MASK_PATTERNS } from "./MaskedTextInput";

package/dist/components/Toast/Toast.styles.js

@@ -18,7 +18,7 @@ export const toastVariants = cva([
         variant: "success",
     },
 });
-export const toastViewportVariants = cva(["fixed z-[100] flex w-auto flex-col-reverse px-4"], {
+export const toastViewportVariants = cva(["fixed z-[1000] flex w-auto flex-col-reverse px-4"], {
     variants: {
         position: {
             "top-center": "top-[40px] left-0 right-0 justify-self-center",

package/dist/esm/bundle.css

@@ -665,6 +665,9 @@ input[type=number] {
 .z-50{
   z-index: 50;
 }
+.z-\[1000\]{
+  z-index: 1000;
+}
 .z-\[100\]{
   z-index: 100;
 }
@@ -993,6 +996,9 @@ input[type=number] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-2xl{
+  max-width: 42rem;
+}
 .max-w-\[300px\]{
   max-width: 300px;
 }
@@ -1002,6 +1008,9 @@ input[type=number] {
 .max-w-lg{
   max-width: 32rem;
 }
+.max-w-md{
+  max-width: 28rem;
+}
 .flex-1{
   flex: 1 1 0%;
 }
@@ -1869,6 +1878,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-gray-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -3165,6 +3178,10 @@ input[type=number] {
   line-height: var(--label-label2-line-height, 10px);
   font-weight: var(--label-label2-weight, 400);
 }
+.text-lg{
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -3258,6 +3275,9 @@ input[type=number] {
 .font-medium{
   font-weight: 500;
 }
+.font-semibold{
+  font-weight: 600;
+}
 .uppercase{
   text-transform: uppercase;
 }
@@ -3458,6 +3478,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.text-gray-700{
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
 .text-green-500{
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -5826,6 +5850,10 @@ input[type=number] {
   .md\:right-\[40px\]{
     right: 40px;
   }
+
+  .md\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]){
   width: 1rem;