autocasting-ui-library-padimasso 1.0.13 → 1.0.15

package/dist/components/Form/Fields/FormInputField/FormInputField.d.ts

@@ -2,7 +2,8 @@ type FormInputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     id: string;
     label?: string;
     error?: string;
+    labelClassName?: string;
     type?: 'text' | 'password' | 'email';
 };
-declare const FormInputField: ({ id, label, error, type, className, ...props }: FormInputFieldProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormInputField: ({ id, label, error, labelClassName, type, className, ...props }: FormInputFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default FormInputField;

package/dist/components/Form/Fields/FormInputField/FormInputField.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Input from '../../primitive/Input/Input.js';
+import '../../primitive/Select/Select.js';
 import Label from '../../primitive/Label/Label.js';
 
-const FormInputField = ({ id, label, error, type, className, ...props }) => {
-    return (jsxs("div", { className: "w-full flex flex-col", children: [label && jsx(Label, { htmlFor: id, children: label }), jsx(Input, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, ...props }), error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.5 pl-0.5", children: error }))] }));
+const FormInputField = ({ id, label, error, labelClassName, type, className, ...props }) => {
+    return (jsxs("div", { className: "w-full flex flex-col gap-2", children: [label && (jsx(Label, { htmlFor: id, className: labelClassName, children: label })), jsx(Input, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, ...props }), error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.5 pl-0.5", children: error }))] }));
 };
 
 export { FormInputField as default };

package/dist/components/Form/Fields/FormSelectField/FormSelectField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectOption } from '../../primitive/Select/Select';
+type Props = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    id: string;
+    label?: string;
+    error?: string;
+    labelClassName?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+};
+declare const FormSelectField: ({ id, label, labelClassName, error, placeholder, options, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default FormSelectField;

package/dist/components/Form/Fields/FormSelectField/FormSelectField.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Select from '../../primitive/Select/Select.js';
+import '../../primitive/Input/Input.js';
+import Label from '../../primitive/Label/Label.js';
+
+const FormSelectField = ({ id, label, labelClassName, error, placeholder, options, className, ...props }) => {
+    return (jsxs("div", { className: "w-full flex flex-col gap-2", children: [label && (jsx(Label, { htmlFor: id, className: labelClassName, children: label })), jsx(Select, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, placeholder: placeholder, options: options, ...props }), error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.5 pl-0.5", children: error }))] }));
+};
+
+export { FormSelectField as default };

package/dist/components/Form/Fields/FormSelectField/index.d.ts

@@ -0,0 +1,2 @@
+import FormSelectField from './FormSelectField';
+export default FormSelectField;

package/dist/components/Form/Fields/FormSelectField/index.js

@@ -0,0 +1,5 @@
+import FormSelectField from './FormSelectField.js';
+
+
+
+export { FormSelectField as default };

package/dist/components/Form/Fields/index.d.ts

@@ -1 +1,2 @@
 export { default as FormInputField } from './FormInputField';
+export { default as FormSelectField } from './FormSelectField';

package/dist/components/Form/primitive/Input/Input.js

@@ -3,7 +3,9 @@ import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 
 const Input = forwardRef(({ className, type = 'text', ...props }, ref) => {
-    return (jsx("input", { type: type, ref: ref, className: clsx('input-w-full h-14 px-6 py-3 rounded-xl text-base', 'bg-[var(--color-secondary-offwhite)]', className), ...props }));
+    return (jsx("input", { type: type, ref: ref, className: clsx('w-full h-14 px-6 py-3 rounded-xl text-sm', 'placeholder:text-[var(--color-secondary-grey)] placeholder:font-light', 'border border-[var(--color-secondary-outline)]', 
+        // disabled
+        'disabled:bg-[var(--color-secondary-disabled-grey)] disabled:cursor-not-allowed', className), ...props }));
 });
 Input.displayName = 'Input';
 

package/dist/components/Form/primitive/Select/Select.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | "size"> & {
+    options?: SelectOption[];
+    placeholder?: string;
+} & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/components/Form/primitive/Select/Select.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+
+const Select = forwardRef(({ className, options, placeholder, children, ...props }, ref) => {
+    return (jsxs("div", { className: "relative", children: [jsxs("select", { ref: ref, className: clsx('w-full h-14 px-6 py-3 rounded-xl text-sm', 'placeholder:text-[var(--color-secondary-grey)] placeholder:font-light', 'border border-[var(--color-secondary-outline)]', 'focus:outline-none focus:ring-2 focus:ring-black/10', 'appearance-none', className), ...props, children: [placeholder && (jsx("option", { value: "", disabled: true, hidden: true, children: placeholder })), options
+                        ? options.map((o) => (jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)))
+                        : children] }), jsx("svg", { className: "pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }) })] }));
+});
+Select.displayName = 'Select';
+
+export { Select as default };

package/dist/components/Form/primitive/Select/index.d.ts

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;

package/dist/components/Form/primitive/Select/index.js

@@ -0,0 +1,5 @@
+import Select from './Select.js';
+
+
+
+export { Select as default };

package/dist/components/Form/primitive/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Input } from './Input';
+export { default as Select } from './Select';
 export { default as Label } from './Label';

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,9 @@
+type LogoProps = {
+    horizontal?: boolean;
+    text: string;
+    imageSrc?: string;
+    imageSize?: number;
+    className?: string;
+};
+declare const Logo: ({ horizontal, text, imageSrc, imageSize, className }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

package/dist/components/Logo/Logo.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+const Logo = ({ horizontal, text, imageSrc, imageSize = 40, className }) => {
+    return (jsxs("div", { className: clsx(`flex ${horizontal ? 'flex-row' : 'flex-col'} gap-[6px] items-center justify-center cursor-pointer`, className), children: [imageSrc && (jsx("img", { src: imageSrc, alt: text, width: `${horizontal ? 47 : imageSize}`, height: imageSize, className: "object-contain" })), jsx("span", { className: `${horizontal ? 'text-sm' : 'text-base'} font-bold`, children: text })] }));
+};
+
+export { Logo as default };

package/dist/components/Logo/index.d.ts

@@ -0,0 +1,2 @@
+import Logo from './Logo';
+export { Logo };

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,4 @@
+declare const Separator: ({ className }: {
+    className: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/components/Separator/Separator.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+const Separator = ({ className }) => {
+    return jsx("hr", { className: className });
+};
+
+export { Separator as default };

package/dist/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+import Separator from './Separator';
+export { Separator };

package/dist/index.d.ts

@@ -1,12 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode } from 'react';
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: 'primary' | 'outline' | 'danger' | 'disabled';
 };
 declare const Button: ({ className, variant, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+declare const Separator: ({ className }: {
+    className: string;
+}) => react_jsx_runtime.JSX.Element;
+
+type LogoProps = {
+    horizontal?: boolean;
+    text: string;
+    imageSrc?: string;
+    imageSize?: number;
+    className?: string;
+};
+declare const Logo: ({ horizontal, text, imageSrc, imageSize, className }: LogoProps) => react_jsx_runtime.JSX.Element;
+
 type GoogleButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 declare const GoogleButton: ({ className, children, ...props }: GoogleButtonProps) => react_jsx_runtime.JSX.Element;
 
@@ -14,7 +27,17 @@ type AllowedTypes = 'text' | 'password' | 'email';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     type?: AllowedTypes;
 }
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+declare const Select: React__default.ForwardRefExoticComponent<Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, "multiple" | "size"> & {
+    options?: SelectOption[];
+    placeholder?: string;
+} & React__default.RefAttributes<HTMLSelectElement>>;
 
 type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
     variant?: 'default' | 'error' | 'warning';
@@ -25,9 +48,20 @@ type FormInputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     id: string;
     label?: string;
     error?: string;
+    labelClassName?: string;
     type?: 'text' | 'password' | 'email';
 };
-declare const FormInputField: ({ id, label, error, type, className, ...props }: FormInputFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormInputField: ({ id, label, error, labelClassName, type, className, ...props }: FormInputFieldProps) => react_jsx_runtime.JSX.Element;
+
+type Props = React__default.SelectHTMLAttributes<HTMLSelectElement> & {
+    id: string;
+    label?: string;
+    error?: string;
+    labelClassName?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+};
+declare const FormSelectField: ({ id, label, labelClassName, error, placeholder, options, className, ...props }: Props) => react_jsx_runtime.JSX.Element;
 
 type ModalSize = 'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'xl' | 'xl_2' | 'xl_3';
 type ModalProps = {
@@ -39,4 +73,4 @@ type ModalProps = {
 };
 declare function Modal({ isOpen, onClose, title, children, size }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
-export { Button, FormInputField, GoogleButton, Input, Label, Modal };
+export { Button, FormInputField, FormSelectField, GoogleButton, Input, Label, Logo, Modal, Select, Separator };

package/dist/index.js

@@ -1,6 +1,10 @@
 export { default as Button } from './components/Button/Button.js';
+export { default as Separator } from './components/Separator/Separator.js';
+export { default as Logo } from './components/Logo/Logo.js';
 export { default as GoogleButton } from './components/GoogleButton/GoogleButton.js';
 export { default as Input } from './components/Form/primitive/Input/Input.js';
+export { default as Select } from './components/Form/primitive/Select/Select.js';
 export { default as Label } from './components/Form/primitive/Label/Label.js';
 export { default as FormInputField } from './components/Form/Fields/FormInputField/FormInputField.js';
+export { default as FormSelectField } from './components/Form/Fields/FormSelectField/FormSelectField.js';
 export { default as Modal } from './components/Modals/Modal.js';

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-50:oklch(96.2% .018 272.314);--color-purple-50:oklch(97.7% .014 308.299);--color-pink-50:oklch(97.1% .014 343.198);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-light:300;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-sm:0 1px 2px #00000026;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-primary-white:#fff;--color-primary-black:#070707;--color-primary-greenyellow:#aeff00;--color-secondary-offwhite:#f4f5ff;--color-secondary-offblack:#17171a;--color-secondary-outline:#e7e7e7;---color-secondary-grey:#b1b3c5;--color-alert-error:#ef0c0c;--font-inter:"Inter",sans-serif;--font-serif:"Source Serif 4",serif}body{font-family:var(--font-inter)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.right-7{right:calc(var(--spacing)*7)}.z-50{z-index:50}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.flex{display:flex}.h-8{height:calc(var(--spacing)*8)}.h-14{height:calc(var(--spacing)*14)}.min-h-screen{min-height:100vh}.w-8{width:calc(var(--spacing)*8)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-\[var\(--color-secondary-outline\)\]{border-color:var(--color-secondary-outline)}.border-gray-200{border-color:var(--color-gray-200)}.bg-\[var\(---color-secondary-grey\)\]{background-color:var(---color-secondary-grey)}.bg-\[var\(--color-primary-black\)\]{background-color:var(--color-primary-black)}.bg-\[var\(--color-primary-white\)\]{background-color:var(--color-primary-white)}.bg-\[var\(--color-secondary-offblack\)\]{background-color:var(--color-secondary-offblack)}.bg-\[var\(--color-secondary-offwhite\)\]{background-color:var(--color-secondary-offwhite)}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black)60%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-indigo-50{--tw-gradient-from:var(--color-indigo-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-purple-50{--tw-gradient-via:var(--color-purple-50);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-pink-50{--tw-gradient-to:var(--color-pink-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-10{padding:calc(var(--spacing)*10)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pl-0\.5{padding-left:calc(var(--spacing)*.5)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\[var\(--color-alert-error\)\]{color:var(--color-alert-error)}.text-\[var\(--color-primary-black\)\]{color:var(--color-primary-black)}.text-\[var\(--color-primary-white\)\]{color:var(--color-primary-white)}.text-black{color:var(--color-black)}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-white{color:var(--color-white)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.hover\:bg-\[var\(--color-secondary-offblack\)\]:hover{background-color:var(--color-secondary-offblack)}}@media (min-width:40rem){.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-50:oklch(96.2% .018 272.314);--color-purple-50:oklch(97.7% .014 308.299);--color-pink-50:oklch(97.1% .014 343.198);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-light:300;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-sm:0 1px 2px #00000026;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-primary-white:#fff;--color-primary-black:#070707;--color-primary-light-grey:#f3f4f9;--color-primary-greenyellow:#aeff00;--color-secondary-offwhite:#ebedfd;--color-secondary-outline:#e0e0e0;--color-secondary-disabled-grey:#a1a3b2;--color-secondary-grey:#767680;--color-secondary-grey-fonts:#6c6e7c;--color-alert-error:#ef0c0c;--font-inter:"Inter",sans-serif;--font-serif:"Source Serif 4",serif}body{font-family:var(--font-inter)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing)*4)}.right-4{right:calc(var(--spacing)*4)}.right-7{right:calc(var(--spacing)*7)}.z-50{z-index:50}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.flex{display:flex}.h-5{height:calc(var(--spacing)*5)}.h-8{height:calc(var(--spacing)*8)}.h-14{height:calc(var(--spacing)*14)}.min-h-screen{min-height:100vh}.w-5{width:calc(var(--spacing)*5)}.w-8{width:calc(var(--spacing)*8)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-\[6px\]{gap:6px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-\[var\(--color-secondary-outline\)\]{border-color:var(--color-secondary-outline)}.border-gray-200{border-color:var(--color-gray-200)}.bg-\[var\(---color-secondary-grey\)\]{background-color:var(---color-secondary-grey)}.bg-\[var\(--color-primary-black\)\]{background-color:var(--color-primary-black)}.bg-\[var\(--color-primary-white\)\]{background-color:var(--color-primary-white)}.bg-\[var\(--color-secondary-offblack\)\]{background-color:var(--color-secondary-offblack)}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black)60%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-indigo-50{--tw-gradient-from:var(--color-indigo-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-purple-50{--tw-gradient-via:var(--color-purple-50);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-pink-50{--tw-gradient-to:var(--color-pink-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-10{padding:calc(var(--spacing)*10)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pl-0\.5{padding-left:calc(var(--spacing)*.5)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\[var\(--color-alert-error\)\]{color:var(--color-alert-error)}.text-\[var\(--color-primary-black\)\]{color:var(--color-primary-black)}.text-\[var\(--color-primary-white\)\]{color:var(--color-primary-white)}.text-black{color:var(--color-black)}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-white{color:var(--color-white)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.placeholder\:font-light::placeholder{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.placeholder\:text-\[var\(--color-secondary-grey\)\]::placeholder{color:var(--color-secondary-grey)}@media (hover:hover){.hover\:bg-\[var\(--color-secondary-offblack\)\]:hover{background-color:var(--color-secondary-offblack)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-black\/10:focus{--tw-ring-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.focus\:ring-black\/10:focus{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[var\(--color-secondary-disabled-grey\)\]:disabled{background-color:var(--color-secondary-disabled-grey)}@media (min-width:40rem){.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autocasting-ui-library-padimasso",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "UI Library para el ecosistema de Auto Casting by Padimasso",
   "type": "module",
   "main": "dist/index.js",

package/src/components/Form/Fields/FormInputField/FormInputField.tsx

@@ -1,16 +1,22 @@
+// FormInputField.tsx
 import { Input, Label } from '../../primitive';
 
 type FormInputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
   id: string;
   label?: string;
   error?: string;
+  labelClassName?: string;
   type?: 'text' | 'password' | 'email';
 };
 
-const FormInputField = ({ id, label, error, type, className, ...props }: FormInputFieldProps) => {
+const FormInputField = ({ id, label, error, labelClassName, type, className, ...props }: FormInputFieldProps) => {
   return (
-    <div className="w-full flex flex-col">
-      {label && <Label htmlFor={id}>{label}</Label>}
+    <div className="w-full flex flex-col gap-2">
+      {label && (
+        <Label htmlFor={id} className={labelClassName}>
+          {label}
+        </Label>
+      )}
       <Input
         id={id}
         aria-invalid={!!error}
@@ -27,5 +33,4 @@ const FormInputField = ({ id, label, error, type, className, ...props }: FormInp
     </div>
   );
 };
-
 export default FormInputField;

package/src/components/Form/Fields/FormSelectField/FormSelectField.tsx

@@ -0,0 +1,40 @@
+// FormSelectField.tsx
+import React from 'react';
+import Select, { SelectOption } from '../../primitive/Select/Select';
+import { Label } from '../../primitive';
+
+type Props = React.SelectHTMLAttributes<HTMLSelectElement> & {
+  id: string;
+  label?: string;
+  error?: string;
+  labelClassName?: string;
+  placeholder?: string;
+  options?: SelectOption[];
+};
+
+const FormSelectField = ({ id, label, labelClassName, error, placeholder, options, className, ...props }: Props) => {
+  return (
+    <div className="w-full flex flex-col gap-2">
+      {label && (
+        <Label htmlFor={id} className={labelClassName}>
+          {label}
+        </Label>
+      )}
+      <Select
+        id={id}
+        aria-invalid={!!error}
+        aria-describedby={error ? `${id}-error` : undefined}
+        className={className}
+        placeholder={placeholder}
+        options={options}
+        {...props}
+      />
+      {error && (
+        <Label id={`${id}-error`} variant="error" className="mt-0.5 pl-0.5">
+          {error}
+        </Label>
+      )}
+    </div>
+  );
+};
+export default FormSelectField;

package/src/components/Form/Fields/FormSelectField/index.ts

@@ -0,0 +1,2 @@
+import FormSelectField from './FormSelectField';
+export default FormSelectField;

package/src/components/Form/Fields/index.ts

@@ -1 +1,2 @@
 export { default as FormInputField } from './FormInputField';
+export { default as FormSelectField } from './FormSelectField';

package/src/components/Form/primitive/Input/Input.tsx

@@ -2,7 +2,6 @@ import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 
 type AllowedTypes = 'text' | 'password' | 'email';
-
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   type?: AllowedTypes;
 }
@@ -13,8 +12,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type = 'tex
       type={type}
       ref={ref}
       className={clsx(
-        'input-w-full h-14 px-6 py-3 rounded-xl text-base',
-        'bg-[var(--color-secondary-offwhite)]',
+        'w-full h-14 px-6 py-3 rounded-xl text-sm',
+        'placeholder:text-[var(--color-secondary-grey)] placeholder:font-light',
+        'border border-[var(--color-secondary-outline)]',
+        // disabled
+        'disabled:bg-[var(--color-secondary-disabled-grey)] disabled:cursor-not-allowed',
         className
       )}
       {...props}

package/src/components/Form/primitive/Select/Select.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+import { clsx } from 'clsx';
+
+export type SelectOption = { value: string; label: string; disabled?: boolean };
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'size'> & {
+  options?: SelectOption[];
+  placeholder?: string;
+};
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, options, placeholder, children, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          ref={ref}
+          className={clsx(
+            'w-full h-14 px-6 py-3 rounded-xl text-sm',
+            'placeholder:text-[var(--color-secondary-grey)] placeholder:font-light',
+            'border border-[var(--color-secondary-outline)]',
+            'focus:outline-none focus:ring-2 focus:ring-black/10',
+            'appearance-none',
+            className
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options
+            ? options.map((o) => (
+                <option key={o.value} value={o.value} disabled={o.disabled}>
+                  {o.label}
+                </option>
+              ))
+            : children}
+        </select>
+
+        <svg
+          className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth={2} strokeLinecap="round" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+export default Select;

package/src/components/Form/primitive/Select/index.ts

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;

package/src/components/Form/primitive/index.ts

@@ -1,2 +1,3 @@
 export { default as Input } from './Input';
+export { default as Select } from './Select';
 export { default as Label } from './Label';

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Logo from './Logo';
+
+const meta: Meta<typeof Logo> = {
+  title: 'Components/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  args: {
+    text: 'Logo Text',
+    imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg', // Ejemplo
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Logo>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+  },
+};
+
+export const WithoutImage: Story = {
+  args: {
+    imageSrc: undefined,
+  },
+};
+
+export const CustomImageSize: Story = {
+  args: {
+    imageSize: 80,
+  },
+};

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,33 @@
+import { clsx } from 'clsx';
+
+type LogoProps = {
+  horizontal?: boolean;
+  text: string;
+  imageSrc?: string;
+  imageSize?: number;
+  className?: string;
+};
+
+const Logo = ({ horizontal, text, imageSrc, imageSize = 40, className }: LogoProps) => {
+  return (
+    <div
+      className={clsx(
+        `flex ${horizontal ? 'flex-row' : 'flex-col'} gap-[6px] items-center justify-center cursor-pointer`,
+        className
+      )}
+    >
+      {imageSrc && (
+        <img
+          src={imageSrc}
+          alt={text}
+          width={`${horizontal ? 47 : imageSize}`}
+          height={imageSize}
+          className="object-contain"
+        />
+      )}
+      <span className={`${horizontal ? 'text-sm' : 'text-base'} font-bold`}>{text}</span>
+    </div>
+  );
+};
+
+export default Logo;

package/src/components/Logo/index.ts

@@ -0,0 +1,2 @@
+import Logo from './Logo';
+export { Logo };

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,5 @@
+const Separator = ({ className }: { className: string }) => {
+  return <hr className={className} />;
+};
+
+export default Separator;

package/src/components/Separator/index.ts

@@ -0,0 +1,2 @@
+import Separator from './Separator';
+export { Separator };

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './components/Button';
+export * from './components/Separator';
+export * from './components/Logo';
 export * from './components/GoogleButton';
 export * from './components/Form';
 export * from './components/Modals';

package/src/styles/tailwind.css

@@ -21,12 +21,14 @@
     /* Primary Colors */
     --color-primary-white: #ffffff;
     --color-primary-black: #070707;
+    --color-primary-light-grey: #f3f4f9;
     --color-primary-greenyellow: #aeff00;
     /* Secondary Colors */
-    --color-secondary-offwhite: #f4f5ff;
-    --color-secondary-offblack: #17171a;
-    --color-secondary-outline: #e7e7e7;
-    ---color-secondary-grey: #b1b3c5;
+    --color-secondary-offwhite: #ebedfd;
+    --color-secondary-outline: #e0e0e0;
+    --color-secondary-disabled-grey: #a1a3b2;
+    --color-secondary-grey: #767680;
+    --color-secondary-grey-fonts: #6c6e7c;
     /* Alert Colors */
     --color-alert-error: #ef0c0c;
     /* Fonts */