@techsio/ui-kit 0.10.0 → 0.11.0

package/dist/molecules/{figma/form-textarea.figma.js → form-textarea.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { FormTextarea } from "../form-textarea.js";
+import { FormTextarea } from "./form-textarea.js";
 code_connect.connect(FormTextarea, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=929-317", {
     imports: [
         'import { FormTextarea } from "@techsio/ui-kit/molecules/form-textarea"'
@@ -28,11 +28,11 @@ code_connect.connect(FormTextarea, "https://www.figma.com/design/12xb1pqXKwE2vbO
         required: code_connect.boolean("required")
     },
     example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsx(FormTextarea, {
+            disabled: disabled,
             id: "field",
             label: "Label",
+            required: required,
             size: size,
-            validateStatus: validateStatus,
-            disabled: disabled,
-            required: required
+            validateStatus: validateStatus
         })
 });

package/dist/molecules/{figma/menu.figma.js → menu.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Menu } from "../menu.js";
+import { Menu } from "./menu.js";
 code_connect.connect(Menu, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1183-26", {
     imports: [
         'import { Menu } from "@libs/ui/molecules/menu"'

package/dist/molecules/menu.js

@@ -14,7 +14,7 @@ const menuVariants = tv({
         ],
         content: [
             "border border-menu-content-border bg-menu-content-bg",
-            "rounded-menu shadow-menu-content-shadow",
+            "rounded-menu shadow-menu-content",
             "p-menu-content",
             "overflow-auto",
             "focus-visible:outline-none",
@@ -28,17 +28,17 @@ const menuVariants = tv({
             "px-menu-item-x py-menu-item-y",
             "text-menu-item-fg",
             "rounded-menu-item",
-            "hover:bg-menu-item-hover",
-            "focus:bg-menu-item-hover focus-visible:outline-none",
+            "hover:bg-menu-item-bg-hover",
+            "focus:bg-menu-item-bg-hover focus-visible:outline-none",
             "data-[disabled]:cursor-not-allowed data-[disabled]:text-menu-fg-disabled",
-            "data-[highlighted]:bg-menu-item-hover",
+            "data-[highlighted]:bg-menu-item-bg-hover",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         optionItem: [
             "data-[state=checked]:font-semibold"
         ],
         separator: [
-            "my-menu-separator",
+            "my-menu-separator-margin",
             "h-menu-separator",
             "bg-menu-separator-bg"
         ],
@@ -46,7 +46,7 @@ const menuVariants = tv({
             "flex-grow"
         ],
         itemIcon: [
-            "text-menu-item-icon-fg text-menu-item-icon-size"
+            "text-menu-item-icon-fg text-menu-item-icon"
         ],
         submenuIndicator: [
             "ms-menu-submenu-indicator text-menu-submenu-indicator-fg"

package/dist/molecules/{figma/pagination.figma.js → pagination.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Pagination } from "../pagination.js";
+import { Pagination } from "./pagination.js";
 code_connect.connect(Pagination, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1143-138", {
     imports: [
         'import { Pagination } from "@libs/ui/molecules/pagination"'

package/dist/molecules/pagination.js

@@ -13,14 +13,14 @@ const paginationVariants = tv({
         ],
         item: [
             "grid cursor-pointer",
-            'has-[[data-part="ellipsis"]]:bg-pagination-neutral-bg',
-            'has-[[data-part="compact-text"]]:bg-pagination-neutral-bg'
+            'has-[[data-part="ellipsis"]]:bg-pagination-bg-neutral',
+            'has-[[data-part="compact-text"]]:bg-pagination-bg-neutral'
         ],
         link: [
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-pagination-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
-            "border-(length:--border-pagination-width) rounded-pagination border-pagination-border",
+            "border-(length:--border-pagination-width) rounded-pagination border-pagination-border-base",
             "aspect-square",
             "data-disabled:text-pagination-fg-disabled data-disabled:hover:bg-pagination-bg-disabled",
             "data-disabled:bg-pagination-bg-disabled",
@@ -45,25 +45,25 @@ const paginationVariants = tv({
     variants: {
         variant: {
             filled: {
-                item: "bg-pagination-bg",
+                item: "bg-pagination-bg-base",
                 link: [
-                    "data-selected:border-pagination-border-active data-selected:bg-pagination-bg-active data-selected:text-pagination-filled-fg-active",
+                    "data-selected:border-pagination-border-active data-selected:bg-pagination-bg-active data-selected:text-pagination-fg-filled-active",
                     "hover:border-pagination-border-hover hover:bg-pagination-bg-hover",
-                    "hover:text-pagination-filled-fg-active"
+                    "hover:text-pagination-fg-filled-active"
                 ]
             },
             outlined: {
-                item: "bg-pagination-bg",
+                item: "bg-pagination-bg-base",
                 link: [
-                    "data-selected:border-pagination-border-active data-selected:text-pagination-outlined-fg-active",
-                    "hover:border-pagination-border-hover hover:text-pagination-outlined-fg-active"
+                    "data-selected:border-pagination-border-active data-selected:text-pagination-fg-outlined-active",
+                    "hover:border-pagination-border-hover hover:text-pagination-fg-outlined-active"
                 ]
             },
             minimal: {
                 link: [
                     "border-transparent",
-                    "data-selected:text-pagination-minimal-fg-active",
-                    "hover:text-pagination-minimal-fg-active"
+                    "data-selected:text-pagination-fg-minimal-active",
+                    "hover:text-pagination-fg-minimal-active"
                 ]
             }
         },

package/dist/molecules/phone-input.figma.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { PhoneInput } from "./phone-input.js";
+code_connect.connect(PhoneInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=2541-171", {
+    imports: [
+        'import { PhoneInput } from "@techsio/ui-kit/molecules/phone-input"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default",
+            readonly: "default"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true,
+            readonly: false
+        }),
+        readOnly: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: false,
+            readonly: true
+        }),
+        required: code_connect.boolean("required")
+    },
+    example: ({ size, validateStatus, disabled, readOnly, required })=>/*#__PURE__*/ jsxs(PhoneInput, {
+            defaultCountry: "SK",
+            disabled: disabled,
+            readOnly: readOnly,
+            required: required,
+            size: size,
+            validateStatus: validateStatus,
+            children: [
+                /*#__PURE__*/ jsx(PhoneInput.Label, {
+                    children: "Phone number"
+                }),
+                /*#__PURE__*/ jsxs(PhoneInput.Control, {
+                    children: [
+                        /*#__PURE__*/ jsx(PhoneInput.CountryPicker, {}),
+                        /*#__PURE__*/ jsx(PhoneInput.Input, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(PhoneInput.StatusText, {
+                    children: "Helper text"
+                })
+            ]
+        })
+});

package/dist/molecules/phone-input.js

@@ -47,7 +47,7 @@ const defaultPhoneInputCountries = [
 const phoneInputVariants = tv({
     slots: {
         root: [
-            "relative flex w-full flex-col gap-phone-input-root"
+            "relative flex w-full flex-col gap-phone-input"
         ],
         control: [
             "form-control-base",
@@ -97,13 +97,13 @@ const phoneInputVariants = tv({
             "font-medium text-phone-input-country-flag uppercase"
         ],
         countryCallingCode: [
-            "font-medium text-phone-input-country-calling-code"
+            "font-medium text-phone-input-country-calling-code-fg"
         ],
         input: [
             "min-w-0 flex-1 border-0",
             "bg-phone-input-input-bg-base",
             "text-phone-input-fg",
-            "placeholder:text-phone-input-placeholder",
+            "placeholder:text-phone-input-fg-placeholder",
             "hover:bg-phone-input-input-bg-hover",
             "focus:bg-phone-input-input-bg-focus",
             "focus-visible:outline-none",
@@ -113,7 +113,7 @@ const phoneInputVariants = tv({
             "flex min-w-0 items-center gap-phone-input-item"
         ],
         itemMeta: [
-            "shrink-0 text-phone-input-item-meta"
+            "shrink-0 text-phone-input-item-meta-fg"
         ]
     },
     variants: {

package/dist/molecules/{figma/popover.figma.js → popover.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Popover } from "../popover.js";
+import { Popover } from "./popover.js";
 code_connect.connect(Popover, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1076-666", {
     imports: [
         'import { Popover } from "@libs/ui/molecules/popover"'

package/dist/molecules/popover.js

@@ -28,10 +28,10 @@ const popoverVariants = tv({
         title: [
             "font-popover-title",
             "leading-none",
-            "mb-popover-title-mb"
+            "mb-popover-title"
         ],
         description: [
-            "text-popover-description-fg text-popover-description-size",
+            "text-popover-description-fg text-popover-description",
             "leading-normal"
         ],
         closeTrigger: [

package/dist/molecules/{figma/product-card.figma.js → product-card.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { ProductCard } from "../product-card.js";
+import { ProductCard } from "./product-card.js";
 code_connect.connect(ProductCard, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1182-51", {
     imports: [
         'import { ProductCard } from "@libs/ui/molecules/product-card"'

package/dist/molecules/product-card.js

@@ -19,21 +19,21 @@ const productCardVariants = tv({
             "data-[stock=limited-stock]:text-product-card-stock-fg-limited-stock",
             "data-[stock=out-of-stock]:text-product-card-stock-fg-out-of-stock"
         ],
-        badgesSlot: "flex flex-wrap gap-product-card-box",
+        badgesSlot: "flex flex-wrap gap-product-card-badges",
         ratingSlot: "flex items-center",
-        actionsSlot: "flex flex-wrap gap-product-card-buttons",
+        actionsSlot: "flex flex-wrap gap-product-card-actions",
         button: ""
     },
     variants: {
         buttonVariant: {
             cart: {
-                button: "w-max bg-product-card-button-cart-bg text-product-card-button-cart-fg hover:bg-product-card-button-cart-bg-hover"
+                button: "w-max bg-product-card-button-cart-bg-base text-product-card-button-cart-fg hover:bg-product-card-button-cart-bg-hover"
             },
             detail: {
-                button: "w-max bg-product-card-button-detail-bg text-product-card-button-detail-fg hover:bg-product-card-button-detail-bg-hover"
+                button: "w-max bg-product-card-button-detail-bg-base text-product-card-button-detail-fg hover:bg-product-card-button-detail-bg-hover"
             },
             wishlist: {
-                button: "w-max bg-product-card-button-wishlist-bg text-product-card-button-wishlist-fg hover:bg-product-card-button-wishlist-bg-hover"
+                button: "w-max bg-product-card-button-wishlist-bg-base text-product-card-button-wishlist-fg hover:bg-product-card-button-wishlist-bg-hover"
             },
             custom: {}
         },

package/dist/molecules/{figma/radio-card.figma.js → radio-card.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { RadioCard } from "../radio-card.js";
+import { RadioCard } from "./radio-card.js";
 code_connect.connect(RadioCard, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1151-66", {
     imports: [
         'import { RadioCard } from "@libs/ui/molecules/radio-card"'

package/dist/molecules/radio-card.js

@@ -80,16 +80,16 @@ const radioCardVariants = tv({
         ],
         itemAddon: [
             "border-t-(length:--border-width-radio-card-addon)",
-            "border-radio-card-item-addon-border",
-            "font-radio-card-item-addon",
-            "text-radio-card-item-addon-fg",
+            "border-radio-card-addon-border",
+            "font-radio-card-addon",
+            "text-radio-card-addon-fg",
             "transition-colors duration-200 motion-reduce:transition-none",
-            "data-disabled:border-radio-card-item-addon-border-disabled",
-            "data-disabled:bg-radio-card-item-addon-bg-disabled",
-            "data-disabled:text-radio-card-item-addon-fg-disabled",
-            "data-disabled:data-[state=checked]:border-radio-card-item-addon-border-disabled",
-            "data-disabled:data-[state=checked]:bg-radio-card-item-addon-bg-disabled",
-            "data-disabled:data-[state=checked]:text-radio-card-item-addon-fg-disabled"
+            "data-disabled:border-radio-card-addon-border-disabled",
+            "data-disabled:bg-radio-card-addon-bg-disabled",
+            "data-disabled:text-radio-card-addon-fg-disabled",
+            "data-disabled:data-[state=checked]:border-radio-card-addon-border-disabled",
+            "data-disabled:data-[state=checked]:bg-radio-card-addon-bg-disabled",
+            "data-disabled:data-[state=checked]:text-radio-card-addon-fg-disabled"
         ],
         hiddenInput: "sr-only"
     },
@@ -129,8 +129,8 @@ const radioCardVariants = tv({
                     "data-[state=checked]:text-radio-card-item-indicator-content-fg-subtle-checked"
                 ],
                 itemAddon: [
-                    "data-[state=checked]:border-radio-card-item-addon-border-subtle-checked",
-                    "data-[state=checked]:text-radio-card-item-addon-fg-subtle-checked"
+                    "data-[state=checked]:border-radio-card-addon-border-subtle-checked",
+                    "data-[state=checked]:text-radio-card-addon-fg-subtle-checked"
                 ]
             },
             solid: {
@@ -154,14 +154,14 @@ const radioCardVariants = tv({
                     "data-[state=checked]:text-radio-card-item-indicator-content-fg-solid-checked"
                 ],
                 itemAddon: [
-                    "data-[state=checked]:border-radio-card-item-addon-border-solid-checked",
-                    "data-[state=checked]:text-radio-card-item-addon-fg-solid-checked"
+                    "data-[state=checked]:border-radio-card-addon-border-solid-checked",
+                    "data-[state=checked]:text-radio-card-addon-fg-solid-checked"
                 ]
             }
         },
         size: {
             sm: {
-                root: "gap-radio-card-root-sm",
+                root: "gap-radio-card-stack-sm",
                 itemControl: [
                     "gap-radio-card-item-control-sm",
                     "p-radio-card-item-control-sm"
@@ -172,12 +172,12 @@ const radioCardVariants = tv({
                 itemIndicator: "size-radio-card-indicator-sm",
                 itemIndicatorMark: "size-radio-card-indicator-mark-sm",
                 itemAddon: [
-                    "p-radio-card-item-addon-sm",
-                    "text-radio-card-item-addon-sm"
+                    "p-radio-card-addon-sm",
+                    "text-radio-card-addon-sm"
                 ]
             },
             md: {
-                root: "gap-radio-card-root-md",
+                root: "gap-radio-card-stack-md",
                 itemControl: [
                     "gap-radio-card-item-control-md",
                     "p-radio-card-item-control-md"
@@ -188,12 +188,12 @@ const radioCardVariants = tv({
                 itemIndicator: "size-radio-card-indicator-md",
                 itemIndicatorMark: "size-radio-card-indicator-mark-md",
                 itemAddon: [
-                    "p-radio-card-item-addon-md",
-                    "text-radio-card-item-addon-md"
+                    "p-radio-card-addon-md",
+                    "text-radio-card-addon-md"
                 ]
             },
             lg: {
-                root: "gap-radio-card-root-lg",
+                root: "gap-radio-card-stack-lg",
                 itemControl: [
                     "gap-radio-card-item-control-lg",
                     "p-radio-card-item-control-lg"
@@ -204,8 +204,8 @@ const radioCardVariants = tv({
                 itemIndicator: "size-radio-card-indicator-lg",
                 itemIndicatorMark: "size-radio-card-indicator-mark-lg",
                 itemAddon: [
-                    "p-radio-card-item-addon-lg",
-                    "text-radio-card-item-addon-lg"
+                    "p-radio-card-addon-lg",
+                    "text-radio-card-addon-lg"
                 ]
             }
         },

package/dist/molecules/{figma/radio-group.figma.js → radio-group.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { RadioGroup } from "../radio-group.js";
+import { RadioGroup } from "./radio-group.js";
 code_connect.connect(RadioGroup, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1149-66", {
     imports: [
         'import { RadioGroup } from "@libs/ui/molecules/radio-group"'

package/dist/molecules/radio-group.js

@@ -26,18 +26,18 @@ const radioGroupVariants = tv({
             "row-start-1 self-center",
             "inline-grid shrink-0 place-items-center rounded-radio-group-control",
             "border-(length:--border-width-radio-group)",
-            "border-radio-group-item-control-border",
-            "bg-radio-group-item-control-bg",
+            "border-radio-group-item-border-base",
+            "bg-radio-group-item-bg",
             "transition-colors duration-200 motion-reduce:transition-none",
-            "data-hover:bg-radio-group-item-control-bg-hover",
-            "data-hover:border-radio-group-item-control-border-hover",
-            "data-disabled:bg-radio-group-item-control-bg-disabled",
-            "data-disabled:border-radio-group-item-control-border-disabled",
+            "data-hover:bg-radio-group-item-bg-hover",
+            "data-hover:border-radio-group-item-border-hover",
+            "data-disabled:bg-radio-group-item-bg-disabled",
+            "data-disabled:border-radio-group-item-border-disabled",
             "data-focus-visible:outline-(style:--default-ring-style)",
             "data-focus-visible:outline-(length:--default-ring-width)",
             "data-focus-visible:outline-radio-group-ring",
             "data-focus-visible:outline-offset-(length:--default-ring-offset)",
-            "data-invalid:border-radio-group-item-control-border-error",
+            "data-invalid:border-radio-group-item-border-error",
             "data-invalid:outline-offset-(length:--default-ring-offset)"
         ],
         itemContent: [
@@ -64,36 +64,36 @@ const radioGroupVariants = tv({
         variant: {
             outline: {
                 itemControl: [
-                    "data-[state=checked]:bg-radio-group-item-control-bg-outline-checked",
-                    "data-[state=checked]:border-radio-group-item-control-border-outline-checked",
-                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-outline-checked-hover",
-                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-outline-checked-hover"
+                    "data-[state=checked]:bg-radio-group-item-bg-outline-checked",
+                    "data-[state=checked]:border-radio-group-item-border-outline-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-bg-outline-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-border-outline-checked-hover"
                 ],
                 itemIndicator: "text-radio-group-item-indicator-outline"
             },
             subtle: {
                 itemControl: [
-                    "data-[state=checked]:bg-radio-group-item-control-bg-subtle-checked",
-                    "data-[state=checked]:border-radio-group-item-control-border-subtle-checked",
-                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-subtle-checked-hover",
-                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-subtle-checked-hover"
+                    "data-[state=checked]:bg-radio-group-item-bg-subtle-checked",
+                    "data-[state=checked]:border-radio-group-item-border-subtle-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-bg-subtle-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-border-subtle-checked-hover"
                 ],
                 itemIndicator: "text-radio-group-item-indicator-subtle"
             },
             solid: {
                 itemControl: [
-                    "data-[state=checked]:bg-radio-group-item-control-bg-solid-checked",
-                    "data-[state=checked]:border-radio-group-item-control-border-solid-checked",
-                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-solid-checked-hover",
-                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-solid-checked-hover"
+                    "data-[state=checked]:bg-radio-group-item-bg-solid-checked",
+                    "data-[state=checked]:border-radio-group-item-border-solid-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-bg-solid-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-border-solid-checked-hover"
                 ],
                 itemIndicator: "text-radio-group-item-indicator-solid"
             }
         },
         size: {
             sm: {
-                root: "gap-radio-group-root-sm",
-                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-sm data-[orientation=vertical]:gap-radio-group-items-vertical-sm",
+                root: "gap-radio-group-stack-sm",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-stack-horizontal-sm data-[orientation=vertical]:gap-radio-group-stack-vertical-sm",
                 item: "gap-x-radio-group-item-sm",
                 itemControl: "size-radio-group-control-sm",
                 itemContent: "gap-radio-group-item-content-sm",
@@ -102,8 +102,8 @@ const radioGroupVariants = tv({
                 itemDescription: "text-radio-group-item-description-sm"
             },
             md: {
-                root: "gap-radio-group-root-md",
-                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-md data-[orientation=vertical]:gap-radio-group-items-vertical-md",
+                root: "gap-radio-group-stack-md",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-stack-horizontal-md data-[orientation=vertical]:gap-radio-group-stack-vertical-md",
                 item: "gap-x-radio-group-item-md",
                 itemControl: "size-radio-group-control-md",
                 itemContent: "gap-radio-group-item-content-md",
@@ -112,8 +112,8 @@ const radioGroupVariants = tv({
                 itemDescription: "text-radio-group-item-description-md"
             },
             lg: {
-                root: "gap-radio-group-root-lg",
-                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-lg data-[orientation=vertical]:gap-radio-group-items-vertical-lg",
+                root: "gap-radio-group-stack-lg",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-stack-horizontal-lg data-[orientation=vertical]:gap-radio-group-stack-vertical-lg",
                 item: "gap-x-radio-group-item-lg",
                 itemControl: "size-radio-group-control-lg",
                 itemContent: "gap-radio-group-item-content-lg",

package/dist/molecules/{figma/search-form.figma.js → search-form.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { SearchForm } from "../search-form.js";
+import { SearchForm } from "./search-form.js";
 code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1146-48", {
     imports: [
         'import { SearchForm } from "@libs/ui/molecules/search-form"'

package/dist/molecules/{figma/select.figma.js → select.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Select } from "../select.js";
+import { Select } from "./select.js";
 code_connect.connect(Select, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=761-571", {
     imports: [
         'import { Select } from "@techsio/ui-kit/molecules/select"'
@@ -31,11 +31,11 @@ code_connect.connect(Select, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3nt
         required: code_connect.boolean("required")
     },
     example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsxs(Select, {
-            size: size,
-            validateStatus: validateStatus,
             disabled: disabled,
-            required: required,
             items: [],
+            required: required,
+            size: size,
+            validateStatus: validateStatus,
             children: [
                 /*#__PURE__*/ jsx(Select.Label, {
                     children: "Label"

package/dist/molecules/select.js

@@ -11,7 +11,7 @@ const selectVariants = tv({
     slots: {
         root: [
             "relative",
-            "flex flex-col gap-select-root",
+            "flex flex-col gap-select",
             "w-full"
         ],
         control: [
@@ -40,15 +40,15 @@ const selectVariants = tv({
             "data-[disabled]:text-select-fg-disabled",
             "data-[disabled]:border-select-border-disabled",
             "data-[validation=error]:border-(length:--border-width-validation)",
-            "data-[validation=error]:border-select-danger data-[validation=error]:outline-select-danger",
+            "data-[validation=error]:border-select-border-error data-[validation=error]:outline-select-border-error",
             "data-[validation=error]:outline-(style:--default-ring-style) data-[validation=error]:outline-(length:--default-ring-width)",
             "data-[validation=error]:outline-offset-(length:--default-ring-offset)",
             "data-[validation=success]:border-(length:--border-width-validation)",
-            "data-[validation=success]:border-select-success data-[validation=success]:outline-select-success",
+            "data-[validation=success]:border-select-border-success data-[validation=success]:outline-select-border-success",
             "data-[validation=success]:outline-(style:--default-ring-style) data-[validation=success]:outline-(length:--default-ring-width)",
             "data-[validation=success]:outline-offset-(length:--default-ring-offset)",
             "data-[validation=warning]:border-(length:--border-width-validation)",
-            "data-[validation=warning]:border-select-warning data-[validation=warning]:outline-select-warning",
+            "data-[validation=warning]:border-select-border-warning data-[validation=warning]:outline-select-border-warning",
             "data-[validation=warning]:outline-(style:--default-ring-style) data-[validation=warning]:outline-(length:--default-ring-width)",
             "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
@@ -78,13 +78,13 @@ const selectVariants = tv({
         ],
         item: [
             "flex items-center justify-between",
-            "cursor-pointer bg-select-item-bg",
+            "cursor-pointer bg-select-item-bg-base",
             "p-select-item",
-            "text-select-item-fg",
+            "text-select-item-fg-base",
             "hover:bg-select-item-bg-hover",
             "data-[highlighted]:bg-select-item-bg-hover",
             "data-[state=checked]:bg-select-item-bg-selected",
-            "data-[state=checked]:text-select-item-selected-fg",
+            "data-[state=checked]:text-select-item-fg-selected",
             "data-[disabled]:cursor-not-allowed data-[disabled]:text-select-fg-disabled",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
@@ -98,7 +98,7 @@ const selectVariants = tv({
             ""
         ],
         itemGroupLabel: [
-            "px-select-item",
+            "px-select-item-x",
             "font-medium text-select-fg-disabled"
         ],
         valueText: [
@@ -255,7 +255,7 @@ Select.Trigger = function({ children, className, size: sizeProp, iconSize, ref,
         children: [
             children,
             /*#__PURE__*/ jsx(Icon, {
-                className: `text-select-trigger group-hover:text-select-trigger-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
+                className: `text-select-trigger-fg-base group-hover:text-select-trigger-fg-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
                 icon: "token-icon-select-indicator",
                 size: iconSize ?? chevronIconSize
             })

package/dist/molecules/{figma/slider.figma.js → slider.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Slider } from "../slider.js";
+import { Slider } from "./slider.js";
 code_connect.connect(Slider, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1141-48", {
     imports: [
         'import { Slider } from "@techsio/ui-kit/molecules/slider"'
@@ -18,13 +18,13 @@ code_connect.connect(Slider, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3nt
         })
     },
     example: ({ size, disabled, validateStatus })=>/*#__PURE__*/ jsx(Slider, {
-            size: size,
-            disabled: disabled,
-            validateStatus: validateStatus,
-            min: 0,
-            max: 100,
             defaultValue: [
                 50
-            ]
+            ],
+            disabled: disabled,
+            max: 100,
+            min: 0,
+            size: size,
+            validateStatus: validateStatus
         })
 });