@rovula/ui 0.1.5 → 0.1.6

package/dist/cjs/types/components/Text/Text.d.ts

@@ -1,6 +1,30 @@
 import React from "react";
 export type TextProps = {
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "subtitle4" | "subtitle5" | "subtitle6"
+    /**
+     * @deprecated Use subtitle1 instead.
+     */
+     | "subtitile1"
+    /**
+     * @deprecated Use subtitle2 instead.
+     */
+     | "subtitile2"
+    /**
+     * @deprecated Use subtitle3 instead.
+     */
+     | "subtitile3"
+    /**
+     * @deprecated Use subtitle4 instead.
+     */
+     | "subtitile4"
+    /**
+     * @deprecated Use subtitle5 instead.
+     */
+     | "subtitile5"
+    /**
+     * @deprecated Use subtitle6 instead.
+     */
+     | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
     className?: string;

package/dist/cjs/types/components/Text/Text.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "subtitle4" | "subtitle5" | "subtitle6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error" | undefined;
         children?: React.ReactNode;
         className?: string | undefined;

package/dist/cjs/types/utils/colors.d.ts

@@ -225,7 +225,7 @@ export declare const THEME_COLOR_KEYS: {
     readonly "base-workspace-stroke": "--base-color-workspace-stroke";
     readonly "base-guideline-stroke": "--base-color-guideline-stroke";
     readonly "base-popup": "--base-color-popup";
-    readonly "base-popup-highlight": "--base-color-popup-hightlight";
+    readonly "base-popup-highlight": "--base-color-popup-highlight";
     readonly "base-popup-curtain": "--base-color-popup-curtain";
     readonly "base-popup-foreground": "--base-color-popup-foreground";
     readonly "common-white": "--common-white";

package/dist/components/Avatar/Avatar.styles.js

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 export const avatarVariants = cva([
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
 ], {
     variants: {
         size: {
-            xxs: "w-[24px] h-[24px] typography-subtitile3",
+            xxs: "w-[24px] h-[24px] typography-subtitle3",
             xs: "w-[32px] h-[32px]",
             sm: "w-[40px] h-[40px]",
             md: "w-[48px] h-[48px]",

package/dist/components/Button/Buttons.stories.js

@@ -90,7 +90,7 @@ export const ShapePreview = {
         variant: "solid",
         color: "primary",
     },
-    render: (args) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitile4", children: "Round" }), _jsx(Button, Object.assign({}, args, { shape: "round", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "sm", title: "Small" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitile4", children: "Capsule" }), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "sm", title: "Small" }))] })] })),
+    render: (args) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitle4", children: "Round" }), _jsx(Button, Object.assign({}, args, { shape: "round", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "sm", title: "Small" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitle4", children: "Capsule" }), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "sm", title: "Small" }))] })] })),
 };
 const previewColors = ["primary", "secondary", "tertiary", "info", "success", "warning", "error"];
 const previewSizes = ["lg", "md", "sm"];

package/dist/components/Calendar/Calendar.js

@@ -17,7 +17,7 @@ import { cn } from "@/utils/cn";
 function Calendar(_a) {
     var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: Object.assign(Object.assign(Object.assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9"), day: "typography-subtitile1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative", disabled: "[&_button]:rounded-full [&_button]:!text-input-disable-text" }), classNames), styles: {
+    return (_jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: Object.assign(Object.assign(Object.assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9"), day: "typography-subtitle1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative", disabled: "[&_button]:rounded-full [&_button]:!text-input-disable-text" }), classNames), styles: {
             caption_label: {
                 zIndex: 1,
                 position: "relative",

package/dist/components/Dropdown/Dropdown.js

@@ -127,8 +127,8 @@ const Dropdown = forwardRef((_a, ref) => {
                             value: option.value,
                             label: option.label,
                             handleOnClick: () => handleOptionClick(option),
-                            className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
-                                "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
+                            className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
+                                "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
                             }, optionItemClassName),
                         }) }, option.value)),
                 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
     var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
     return (_jsxs(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn(
         // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
-        "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props, { children: [children, _jsx(Icon, { type: "heroicons", name: "chevron-right", className: "ml-auto h-4 w-4" })] })));
+        "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props, { children: [children, _jsx(Icon, { type: "heroicons", name: "chevron-right", className: "ml-auto h-4 w-4" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -42,18 +42,18 @@ const DropdownMenuContent = React.forwardRef((_a, ref) => {
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {
     var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props)));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
     var { className, children, checked } = _a, props = __rest(_a, ["className", "children", "checked"]);
-    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }) }), children] })));
 });
 DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className) }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className) }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }) }), children] })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = React.forwardRef((_a, ref) => {

package/dist/components/Footer/Footer.js

@@ -6,6 +6,6 @@ const Footer = ({ children, className, variant = "default", copyright, center, l
     const defaultLeft = leftNav || copyright;
     const defaultCenter = isSimple ? copyright !== null && copyright !== void 0 ? copyright : center : center;
     const defaultRight = isSimple ? null : rightNav;
-    return (_jsxs("footer", { className: cn("relative w-full px-4 py-6 box-border overflow-hidden typography-subtitile2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]", isSimple ? "h-[var(--footer-height-simple)]" : "h-[var(--footer-height)]", { position }, className), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[var(--footer-bg-color)]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full items-center", isSimple ? "justify-center" : "justify-between", { container }, containerClassName), children: children !== null && children !== void 0 ? children : (isSimple ? (_jsx("div", { className: cn("text-center", centerClassName), children: defaultCenter })) : (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn("flex w-1/2 items-center gap-x-[var(--footer-gap)] text-xl", leftNavClassName), children: copyright && leftNav ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-shrink-0", children: copyright }), leftNav] })) : (defaultLeft) }), _jsx("div", { className: cn("flex flex-shrink-0 flex-wrap justify-center", centerClassName), children: defaultCenter }), _jsx("nav", { className: cn("flex w-1/2 justify-end gap-x-[var(--footer-gap)] text-xl", rightNavClassName), children: defaultRight })] }))) })] }));
+    return (_jsxs("footer", { className: cn("relative w-full px-4 py-6 box-border overflow-hidden typography-subtitle2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]", isSimple ? "h-[var(--footer-height-simple)]" : "h-[var(--footer-height)]", { position }, className), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[var(--footer-bg-color)]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full items-center", isSimple ? "justify-center" : "justify-between", { container }, containerClassName), children: children !== null && children !== void 0 ? children : (isSimple ? (_jsx("div", { className: cn("text-center", centerClassName), children: defaultCenter })) : (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn("flex w-1/2 items-center gap-x-[var(--footer-gap)] text-xl", leftNavClassName), children: copyright && leftNav ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-shrink-0", children: copyright }), leftNav] })) : (defaultLeft) }), _jsx("div", { className: cn("flex flex-shrink-0 flex-wrap justify-center", centerClassName), children: defaultCenter }), _jsx("nav", { className: cn("flex w-1/2 justify-end gap-x-[var(--footer-gap)] text-xl", rightNavClassName), children: defaultRight })] }))) })] }));
 };
 export default Footer;

package/dist/components/Input/Input.styles.js

@@ -7,8 +7,8 @@ export const inputVariants = cva([
     variants: {
         size: {
             sm: "p-2 px-3 typography-small1",
-            md: "py-2 px-3 typography-subtitile4",
-            lg: "p-4 typography-subtitile1",
+            md: "py-2 px-3 typography-subtitle4",
+            lg: "p-4 typography-subtitle1",
         },
         rounded: {
             none: "rounded-none",

package/dist/components/InputFilter/InputFilter.js

@@ -83,12 +83,12 @@ const InputFilter = forwardRef((_a, ref) => {
                                 value: option.value,
                                 label: option.label,
                                 handleOnClick: () => handleOptionClick(option),
-                                className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                                className: `p-4 typography-subtitle4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
                                     ? "bg-gray-200"
                                     : ""}`,
                             }) }, option.value));
                     }
-                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 typography-subtitle4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
                             ? "bg-base-popup-highlight"
                             : ""}`, children: [_jsx(Checkbox, { checked: selectedOptions.some((selected) => selected.value === option.value) }), option.label] }, option.value));
                 }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));

package/dist/components/Label/Label.styles.js

@@ -5,8 +5,8 @@ export const labelVariant = cva([
     variants: {
         size: {
             sm: "typography-small1",
-            md: "typography-subtitile2",
-            lg: "typography-subtitile1",
+            md: "typography-subtitle2",
+            lg: "typography-subtitle1",
         },
         disabled: {
             true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled peer-disabled:cursor-not-allowed",
@@ -34,7 +34,7 @@ export const labelVariant = cva([
             isFloatable: true,
             className: [
                 "left-3 -top-1.5 typography-label1 bg-input-label-background",
-                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -43,7 +43,7 @@ export const labelVariant = cva([
             isFloatable: true,
             className: [
                 "left-4 -top-1.5 typography-label1 bg-input-label-background",
-                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },

package/dist/components/Menu/Menu.js

@@ -45,8 +45,8 @@ export const MenuItem = forwardRef(({ option, visualType, isChecked, onSelect, c
         }
         return null;
     };
-    return (_jsxs("div", { ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
-            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5": isChecked,
+    return (_jsxs("div", { ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
+            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5": isChecked,
             "pointer-events-none opacity-50": option.disabled,
             "text-red-500": option.danger,
         }, className), onMouseDown: option.disabled ? undefined : onSelect, children: [renderIndicator(), option.icon && _jsx("span", { className: "flex-shrink-0", children: option.icon }), option.label] }));

package/dist/components/Navbar/Navbar.js

@@ -15,7 +15,7 @@ const Navbar = ({ children, className, variant = "default", scrollShadow = false
         return () => window.removeEventListener("scroll", handleScroll);
     }, [scrollShadow]);
     const isTransparent = variant === "transparent";
-    return (_jsxs("header", { className: cn("relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200", { position }, scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]", className), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[rgb(var(--navbar-bg-color))]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full justify-between items-center", {
+    return (_jsxs("header", { className: cn("relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200", { position }, scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]", className), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[rgb(var(--navbar-bg-color))]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full justify-between items-center", {
                     container,
                 }, containerClassName), children: children || (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn("flex w-1/2 gap-x-[var(--navbar-gap)] text-xl", leftNavClassName), children: leftNav }), _jsx("div", { className: cn("flex flex-shrink-0 flex-wrap justify-center", centerClassName), children: center }), _jsx("nav", { className: cn("flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl", rightNavClassName), children: rightNav })] })) })] }));
 };

package/dist/components/Tabs/Tabs.js

@@ -70,7 +70,7 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                 justifyContent: tabMode === "justify" ? "stretch" : tabMode,
                             }, role: "tablist", children: [tabs.map((tab, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g, _h;
-                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
+                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitle6", {
                                             "text-foreground": index === activeTab,
                                             "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
                                             // -- disabled

package/dist/components/Text/Text.js

@@ -26,11 +26,21 @@ const textVariants = cva(["text-foreground"], {
         },
     },
 });
+const deprecatedSubtitleVariantMap = {
+    subtitile1: "subtitle1",
+    subtitile2: "subtitle2",
+    subtitile3: "subtitle3",
+    subtitile4: "subtitle4",
+    subtitile5: "subtitle5",
+    subtitile6: "subtitle6",
+};
 // montserrat: ["Montserrat", "sans-serif"],
 // poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
 const Text = forwardRef((_a, ref) => {
+    var _b;
     var { variant = "body1", tag: Tag = "p", children, className = "", color, style } = _a, props = __rest(_a, ["variant", "tag", "children", "className", "color", "style"]);
-    return (_jsx(Tag, Object.assign({ ref: ref, className: cn(`typography-${variant}`, textVariants({ color }), className), style: style }, props, { children: children })));
+    const normalizedVariant = (_b = deprecatedSubtitleVariantMap[variant]) !== null && _b !== void 0 ? _b : variant;
+    return (_jsx(Tag, Object.assign({ ref: ref, className: cn(`typography-${normalizedVariant}`, textVariants({ color }), className), style: style }, props, { children: children })));
 });
 export default Text;

package/dist/components/Text/Text.stories.js

@@ -21,12 +21,12 @@ const variant = [
     "h4",
     "h5",
     "h6",
-    "subtitile1",
-    "subtitile2",
-    "subtitile3",
-    "subtitile4",
-    "subtitile5",
-    "subtitile6",
+    "subtitle1",
+    "subtitle2",
+    "subtitle3",
+    "subtitle4",
+    "subtitle5",
+    "subtitle6",
     "body1",
     "body2",
     "body3",

package/dist/components/TextArea/TextArea.styles.js

@@ -6,8 +6,8 @@ export const textareaVariant = cva([
     variants: {
         size: {
             sm: "p-2 px-3 typography-small1",
-            md: "py-2 px-3 typography-subtitile4",
-            lg: "p-4 typography-subtitile1",
+            md: "py-2 px-3 typography-subtitle4",
+            lg: "p-4 typography-subtitle1",
         },
         rounded: {
             none: "rounded-none",
@@ -112,7 +112,7 @@ export const labelVariant = cva([
             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-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -121,7 +121,7 @@ export const labelVariant = cva([
             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-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -138,14 +138,14 @@ export const labelVariant = cva([
             isFloatingLabel: false,
             size: "md",
             className: [
-                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
             isFloatingLabel: false,
             size: "lg",
             className: [
-                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
     ],

package/dist/components/TextInput/TextInput.stories.js

@@ -78,7 +78,7 @@ export const CustomIcon = {
 };
 const KeepFooterSpaceDemo = () => {
     const [hasError, setHasError] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col gap-8 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-grey-dark", children: ["Use ", _jsx("code", { children: "keepFooterSpace" }), " to always reserve space for the footer/helper area, preventing layout shift when an error or helper text is shown or hidden."] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: hasError, onChange: (e) => setHasError(e.target.checked) }), "Show error message"] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "With keepFooterSpace (layout stays stable)" }), _jsx(TextInput, { id: "with-keep", label: "Email", keepFooterSpace: true, error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "Without keepFooterSpace (layout shifts when error appears)" }), _jsx(TextInput, { id: "no-keep", label: "Email", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsx("div", {})] })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-8 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-grey-dark", children: ["Use ", _jsx("code", { children: "keepFooterSpace" }), " to always reserve space for the footer/helper area, preventing layout shift when an error or helper text is shown or hidden."] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: hasError, onChange: (e) => setHasError(e.target.checked) }), "Show error message"] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "With keepFooterSpace (layout stays stable)" }), _jsx(TextInput, { id: "with-keep", label: "Email", keepFooterSpace: true, size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "Without keepFooterSpace (layout shifts when error appears)" }), _jsx(TextInput, { id: "no-keep", label: "Email", size: "lg", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsx("div", {})] })] })] }));
 };
 export const KeepFooterSpace = {
     args: {

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

@@ -8,8 +8,8 @@ export const inputVariant = cva([
     variants: {
         size: {
             sm: "p-2 px-3 typography-small1",
-            md: "py-2 px-3 typography-subtitile4",
-            lg: "p-4 typography-subtitile1",
+            md: "py-2 px-3 typography-subtitle4",
+            lg: "p-4 typography-subtitle1",
         },
         rounded: {
             none: "rounded-none",
@@ -133,7 +133,7 @@ export const inputVariant = cva([
     },
 });
 export const labelVariant = cva([
-    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "absolute block select-none duration-450 transition-all px-[2px] text-input-default-text",
     "peer-focus:text-input-default-text peer-focus:bg-input-label-bg", // TODO bg
 ], {
     variants: {
@@ -174,7 +174,7 @@ export const labelVariant = cva([
             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-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -183,7 +183,7 @@ export const labelVariant = cva([
             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-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -200,14 +200,14 @@ export const labelVariant = cva([
             isFloatingLabel: false,
             size: "md",
             className: [
-                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
             isFloatingLabel: false,
             size: "lg",
             className: [
-                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
         // --------------
@@ -227,7 +227,7 @@ export const labelVariant = cva([
             size: "md",
             className: [
                 "left-9 -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-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -237,7 +237,7 @@ export const labelVariant = cva([
             size: "lg",
             className: [
                 "left-11 -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-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -255,7 +255,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "md",
             className: [
-                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
@@ -263,7 +263,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "lg",
             className: [
-                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
         // -------- hasLeftSectionIcon ------
@@ -283,7 +283,7 @@ export const labelVariant = cva([
             size: "md",
             className: [
                 "left-[46px] -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-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -293,7 +293,7 @@ export const labelVariant = cva([
             size: "lg",
             className: [
                 "left-[72px] -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-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
@@ -311,7 +311,7 @@ export const labelVariant = cva([
             hasLeftSectionIcon: true,
             size: "md",
             className: [
-                "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+                "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
@@ -319,7 +319,7 @@ export const labelVariant = cva([
             hasLeftSectionIcon: true,
             size: "lg",
             className: [
-                "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+                "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
     ],
@@ -336,8 +336,8 @@ export const helperTextVariant = cva(["typography-small1 flex flex-row items-cen
     variants: {
         size: {
             sm: "mt-1",
-            md: "mt-[6px]",
-            lg: "mt-[6px]",
+            md: "mt-1",
+            lg: "mt-1",
         },
         disabled: {
             true: "text-input-disable-text",
@@ -395,7 +395,7 @@ export const inlineStartIconWrapperVariant = cva([
         size: "md",
     },
 });
-export const iconActionVariant = cva(["cursor-pointer z-50"], {
+export const iconActionVariant = cva(["cursor-pointer z-50 select-none"], {
     variants: {
         size: {
             sm: "size-3",

package/dist/components/Toast/Toast.js

@@ -41,12 +41,12 @@ const ToastClose = React.forwardRef((_a, ref) => {
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 const ToastTitle = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Title, Object.assign({ ref: ref, className: cn("typography-subtitile6", className) }, props)));
+    return (_jsx(ToastPrimitives.Title, Object.assign({ ref: ref, className: cn("typography-subtitle6", className) }, props)));
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile4 text-grey-light", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitle4 text-grey-light", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };