@rovula/ui 0.0.29 → 0.0.30

package/dist/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
@@ -24,11 +24,15 @@ const Dropdown = forwardRef((_a, ref) => {
     useEffect(() => {
         if (value && !selectedOption) {
             setSelectedOption(value);
+            setTextValue(value.label);
         }
     }, [value, selectedOption]);
     const handleOnChangeText = useCallback((event) => {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
         setTextValue(event.target.value);
+        if (!event.target.value) {
+            clearMismatchValue(event);
+        }
     }, [onChangeText]);
     const handleOptionClick = useCallback((option) => {
         setSelectedOption(option);
@@ -42,19 +46,26 @@ const Dropdown = forwardRef((_a, ref) => {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
-    const renderOptions = () => (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map((option) => {
-                if (option.renderLabel) {
-                    return (_jsx(Fragment, { children: option.renderLabel({
-                            value: option.value,
-                            label: option.label,
-                            handleOnClick: () => handleOptionClick(option),
-                            className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""}`,
-                        }) }, option.value));
-                }
-                return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
-                        ? "bg-base-popup-highligh"
-                        : ""}`, children: option.label }, option.value));
-            }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    const renderOptions = () => {
+        if (customRenderOptions) {
+            return customRenderOptions(optionsFiltered);
+        }
+        return (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map((option) => {
+                    if (option.renderLabel) {
+                        return (_jsx(Fragment, { children: option.renderLabel({
+                                value: option.value,
+                                label: option.label,
+                                handleOnClick: () => handleOptionClick(option),
+                                className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                                    ? " bg-gray-200"
+                                    : ""}`,
+                            }) }, option.value));
+                    }
+                    return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                            ? "bg-base-popup-highligh"
+                            : ""}`, children: option.label }, option.value));
+                }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    };
     const handleOnFocus = useCallback((e) => {
         var _a;
         setIsFocused(true);
@@ -85,7 +96,7 @@ const Dropdown = forwardRef((_a, ref) => {
         setIsFocused(false);
         clearMismatchValue(e);
         (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props === null || props === void 0 ? void 0 : props.onBlur]);
+    }, [props === null || props === void 0 ? void 0 : props.onBlur, clearMismatchValue]);
     const handleOnKeyDown = useCallback((e) => {
         var _a;
         keyCode.current = e.code;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -25,6 +25,7 @@ export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
+        isFloatingLabel: true,
         options,
     },
     render: (args) => {

package/dist/components/InputFilter/InputFilter.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Dropdown from "../Dropdown/Dropdown";
+import Icon from "../Icon/Icon";
+import { filterIconVariant } from "./InputFilter.styles";
+const InputFilter = forwardRef((props, ref) => {
+    var _a;
+    const filterIconClassName = filterIconVariant({
+        size: props.size,
+        rounded: props.rounded,
+        error: props.error,
+        active: !!((_a = props.value) === null || _a === void 0 ? void 0 : _a.value),
+    });
+    return (_jsx(Dropdown, Object.assign({ label: "Placeholder Text", required: false }, props, { ref: ref, renderEndIcon: () => (_jsx("div", { className: filterIconClassName, children: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }) })), renderOptions: (optionsFiltered) => {
+            return "";
+        }, filterMode: true, isFloatingLabel: false })));
+});
+export { InputFilter };

package/dist/components/InputFilter/InputFilter.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { InputFilter } from "./InputFilter";
+const meta = {
+    title: "Components/InputFilter",
+    component: InputFilter,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const options = new Array(100).fill("").map((__, index) => ({
+    value: `option${index + 1}`,
+    label: `Option ${index + 1}`,
+}));
+export const Default = {
+    args: {
+        label: "Choose an option:",
+        fullwidth: true,
+        options,
+    },
+    render: (args) => {
+        const [value, setValue] = useState();
+        const handleOnSelect = (e) => {
+            setValue(e);
+        };
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(InputFilter, Object.assign({ id: "1", size: "lg", options: options, value: value, onSelect: handleOnSelect }, args)), _jsx(InputFilter, Object.assign({ id: "2", size: "md", options: options, value: value, onSelect: handleOnSelect }, args)), _jsx(InputFilter, Object.assign({ id: "3", size: "sm", options: options, value: value, onSelect: handleOnSelect }, args))] }));
+    },
+};

package/dist/components/InputFilter/InputFilter.styles.js

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+export const filterIconVariant = cva([
+    // Base styles
+    "absolute flex items-center justify-center cursor-pointer",
+    // Border styles
+    "border-l border-l-input-default-stroke",
+    "peer-hover:border-l-input-active-stroke",
+    "peer-focus:border-l-input-active-stroke",
+    "peer-disabled:border-l-input-disable-stroke",
+    // Fill styles
+    "fill-primary",
+    "peer-hover:fill-input-filled-text",
+    "peer-focus:fill-input-filled-text",
+    "peer-disabled:fill-input-disable-stroke",
+    // Stroke styles
+    "stroke-input-default-stroke",
+    "peer-hover:stroke-input-active-stroke",
+    "peer-focus:stroke-input-filled-text",
+], {
+    variants: {
+        size: {
+            sm: "p-1 size-[30px]",
+            md: "p-2 size-[38px]",
+            lg: "p-3 size-14",
+        },
+        rounded: {
+            none: "rounded-r-none",
+            normal: "rounded-r-xl",
+            full: "rounded-r-full",
+        },
+        error: {
+            true: "border-l-input-error",
+        },
+        position: {
+            start: "inset-y-0 left-0",
+            end: "inset-y-0 right-0",
+        },
+        active: {
+            false: "",
+            true: [
+                // Fill styles
+                "fill-primary-default",
+                "peer-hover:fill-primary-default", // TODO wait for refactor color after change function button colors
+                "peer-focus:fill-primary-hover", // TODO wait for refactor color after change function button colors
+                // "peer-disabled:fill-input-disable-stroke",
+                // Stroke styles
+                "stroke-primary-default",
+                "peer-hover:stroke-primary-default",
+                "peer-focus:stroke-primary-hover",
+            ],
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        rounded: "normal",
+        error: false,
+        position: "end",
+        active: false,
+    },
+});

package/dist/components/Search/Search.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Dropdown from "../Dropdown/Dropdown";
 const Search = forwardRef((props, ref) => {
-    return (_jsx(Dropdown, Object.assign({}, props, { ref: ref, hasClearIcon: true, hasSearchIcon: true, label: "Search", endIcon: null, filterMode: true })));
+    return (_jsx(Dropdown, Object.assign({ label: "Search" }, props, { ref: ref, keepCloseIconOnValue: true, hasClearIcon: true, hasSearchIcon: true, endIcon: null, filterMode: true, isFloatingLabel: false })));
 });
 export { Search };

package/dist/components/TextInput/TextInput.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef, } from "react";
 import { helperTextVariant, iconSearchWrapperVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, sectionIconWrapperVariant, } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon, MagnifyingGlassIcon, } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickEndIcon, renderEndIcon } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickEndIcon", "renderEndIcon"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon;
@@ -37,6 +37,7 @@ export const TextInput = forwardRef((_a, ref) => {
         disabled,
         error,
         hasSearchIcon,
+        isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
@@ -49,13 +50,28 @@ export const TextInput = forwardRef((_a, ref) => {
         error,
     });
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
-    const handleClearInput = () => {
+    const handleClearInput = useCallback(() => {
         if (inputRef.current) {
             inputRef.current.value = "";
+            if (props.onChange) {
+                const event = new Event("input", { bubbles: true });
+                props.onChange({ target: { value: "" } });
+            }
         }
-    };
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: endIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+    }, [props.onChange]);
+    // TODO startIcon
+    const handleOnClickRightSectionIcon = useCallback(() => {
+        if (disabled)
+            return;
+        onClickEndIcon === null || onClickEndIcon === void 0 ? void 0 : onClickEndIcon();
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [disabled, onClickEndIcon]);
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
+                            display: keepCloseIconOnValue && props.value ? "flex" : undefined,
+                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && renderEndIcon ? (renderEndIcon()) : (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
-                                }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+                                }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });
 export default TextInput;

package/dist/components/TextInput/TextInput.styles.js

@@ -134,34 +134,78 @@ export const labelVariant = cva([
 ], {
     variants: {
         size: {
-            sm: [
+            sm: [],
+            md: [],
+            lg: [],
+        },
+        disabled: {
+            true: "text-input-default-text placeholder:text-input-default-text",
+        },
+        error: {
+            true: "ring-error",
+        },
+        hasSearchIcon: {
+            false: "",
+        },
+        isFloatingLabel: {
+            false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
+        },
+    },
+    compoundVariants: [
+        // floating = true
+        {
+            isFloatingLabel: true,
+            size: "sm",
+            className: [
                 "left-3 -top-1.5 typography-label2 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label2",
             ],
-            md: [
+        },
+        {
+            isFloatingLabel: true,
+            size: "md",
+            className: [
                 "left-3 -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
-            lg: [
+        },
+        {
+            isFloatingLabel: true,
+            size: "lg",
+            className: [
                 "left-4 -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
-        disabled: {
-            true: "text-input-default-text placeholder:text-input-default-text",
+        // --------------
+        // flating = false
+        {
+            isFloatingLabel: false,
+            size: "sm",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
         },
-        error: {
-            true: "ring-error",
+        {
+            isFloatingLabel: false,
+            size: "md",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
         },
-        hasSearchIcon: {
-            false: "",
+        {
+            isFloatingLabel: false,
+            size: "lg",
+            className: [
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
         },
-    },
-    compoundVariants: [
+        // --------------
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "sm",
             className: [
@@ -171,6 +215,7 @@ export const labelVariant = cva([
             ],
         },
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "md",
             className: [
@@ -180,6 +225,7 @@ export const labelVariant = cva([
             ],
         },
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "lg",
             className: [
@@ -188,12 +234,38 @@ export const labelVariant = cva([
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
+        // floating = false and has search icon
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "sm",
+            className: [
+                "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "md",
+            className: [
+                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "lg",
+            className: [
+                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
+        },
     ],
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
         hasSearchIcon: false,
+        isFloatingLabel: true,
     },
 });
 export const helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
@@ -258,6 +330,7 @@ export const iconVariant = cva([
     },
 });
 export const sectionIconWrapperVariant = cva([
+    "cursor-pointer",
     "absolute items-center justify-center flex",
     "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
     "fill-input-default-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-disabled:fill-input-disable-stroke",

package/dist/esm/bundle.css

@@ -1391,6 +1391,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-bg2{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-base-popup{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1678,6 +1682,15 @@ body {
 .fill-primary{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.fill-primary-default{
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+.stroke-input-default-stroke{
+  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+}
+.stroke-primary-default{
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
 .p-0{
   padding: 0px;
 }
@@ -3909,6 +3922,12 @@ body {
 .peer:placeholder-shown ~ .peer-placeholder-shown\:top-4{
   top: 1rem;
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:block{
+  display: block;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:block{
+  display: block;
+}
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent{
   background-color: transparent;
 }
@@ -3952,6 +3971,15 @@ body {
 .peer:hover ~ .peer-hover\:fill-input-filled-text{
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
+.peer:hover ~ .peer-hover\:fill-primary-default{
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+.peer:hover ~ .peer-hover\:stroke-input-active-stroke{
+  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+}
+.peer:hover ~ .peer-hover\:stroke-primary-default{
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
 .peer:focus ~ .peer-focus\:-top-1{
   top: -0.25rem;
 }
@@ -3973,9 +4001,21 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
+.peer:focus ~ .peer-focus\:bg-transparent{
+  background-color: transparent;
+}
 .peer:focus ~ .peer-focus\:fill-input-filled-text{
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
+.peer:focus ~ .peer-focus\:fill-primary-hover{
+  fill: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+}
+.peer:focus ~ .peer-focus\:stroke-input-filled-text{
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+.peer:focus ~ .peer-focus\:stroke-primary-hover{
+  stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+}
 .peer:focus ~ .peer-focus\:text-input-filled-text{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);