@techsio/ui-kit 0.38.0 → 0.40.0

package/dist/molecules/combobox.js

@@ -48,33 +48,42 @@ const comboboxVariants = tv({
             "p-combobox-trigger"
         ],
         positioner: [
-            "z-(--z-index) w-full *:max-h-(--available-height) *:overflow-y-auto"
+            "isolate w-(--reference-width)"
         ],
         content: [
-            "flex flex-col overflow-clip",
-            "rounded-combobox shadow-md",
-            "bg-combobox-content-bg",
-            "z-(--z-combobox-content) border border-combobox-border-base",
-            "duration-200 ease-out motion-safe:transition-[opacity,display,translate]",
+            "popup-surface-base",
+            "w-full",
+            "flex flex-col",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
             "transition-discrete",
-            "starting:-translate-y-2 starting:opacity-0",
-            "data-[state=open]:starting:-translate-y-2 data-[state=open]:starting:opacity-0",
-            "data-[state=open]:translate-y-0 data-[state=open]:opacity-100",
-            "data-[state=closed]:-translate-y-2 data-[state=closed]:opacity-0"
+            "starting:scale-98 starting:opacity-0",
+            "data-[state=open]:starting:scale-98 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+            "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
         ],
         list: [
             "m-0 flex list-none flex-col"
         ],
+        itemText: [
+            "min-w-0 flex-grow truncate"
+        ],
         item: [
-            "flex items-center",
-            "text-combobox-item-fg",
-            "cursor-pointer",
-            "data-highlighted:bg-combobox-item-bg-hover",
-            "data-[state=checked]:bg-combobox-item-bg-selected",
-            "data-disabled:cursor-not-allowed data-disabled:text-combobox-fg-disabled"
+            "popup-item-base",
+            "hover:bg-popup-item-bg-hover",
+            "data-highlighted:bg-popup-item-bg-hover",
+            "data-[state=checked]:bg-popup-item-bg-selected",
+            "data-[state=checked]:text-popup-item-fg-selected",
+            "data-disabled:cursor-not-allowed data-disabled:text-popup-item-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        itemIndicator: [
+            "-translate-y-1/2 absolute end-(--popup-item-x) top-1/2",
+            "flex items-center justify-center",
+            "size-(--size-popup-indicator) text-popup-item-fg-selected"
         ],
         emptyState: [
-            "text-combobox-fg-placeholder"
+            "px-(--popup-item-x) py-(--popup-item-y)",
+            "text-popup-item-fg-muted"
         ],
         triggerIndicator: [
             "text-combobox-trigger-fg-base group-hover:text-combobox-trigger-fg-hover",
@@ -109,28 +118,22 @@ const comboboxVariants = tv({
             sm: {
                 root: "gap-combobox-sm",
                 control: "h-form-control-sm rounded-combobox-sm text-input-sm",
-                item: "p-combobox-item-sm text-combobox-item-sm",
-                emptyState: "p-combobox-item-sm text-combobox-item-sm",
                 input: "p-combobox-input-sm",
-                content: "text-combobox-sm",
+                content: "popup-size-sm text-combobox-item-sm",
                 triggerIndicator: "text-icon-control-sm"
             },
             md: {
                 root: "gap-combobox-md",
                 control: "h-form-control-md rounded-combobox-md text-input-md",
-                item: "p-combobox-item-md text-combobox-item-md",
-                emptyState: "p-combobox-item-md text-combobox-item-md",
                 input: "p-combobox-input-md",
-                content: "text-combobox-md",
+                content: "popup-size-md text-combobox-item-md",
                 triggerIndicator: "text-icon-control-md"
             },
             lg: {
                 root: "gap-combobox-lg",
                 control: "rounded-combobox text-input-lg",
-                item: "p-combobox-item-lg text-combobox-item-lg",
-                emptyState: "p-combobox-item-lg text-combobox-item-lg",
                 input: "p-combobox-input-lg",
-                content: "text-combobox-lg",
+                content: "popup-size-lg text-combobox-item-lg",
                 triggerIndicator: "text-icon-control-lg"
             }
         }
@@ -191,7 +194,7 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
     const api = connect(service, normalizeProps);
     const inputProps = api.getInputProps();
     const { ...restInputProps } = inputProps;
-    const { root, label: labelStyles, control, input, trigger, positioner, content, list, item: itemSlot, emptyState, triggerIndicator } = comboboxVariants({
+    const { root, label: labelStyles, control, input, trigger, positioner, content, list, item: itemSlot, itemText, itemIndicator, emptyState, triggerIndicator } = comboboxVariants({
         size
     });
     const hasOptions = api.collection.size > 0;
@@ -249,15 +252,27 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                             hasOptions && /*#__PURE__*/ jsx("ul", {
                                 ...api.getListProps(),
                                 className: list(),
-                                children: options.map((item)=>/*#__PURE__*/ jsx("li", {
+                                children: options.map((item)=>/*#__PURE__*/ jsxs("li", {
                                         ...api.getItemProps({
                                             item
                                         }),
                                         className: itemSlot(),
-                                        children: /*#__PURE__*/ jsx("span", {
-                                            className: "flex-1",
-                                            children: item.label
-                                        })
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: itemText(),
+                                                children: item.label
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                ...api.getItemIndicatorProps({
+                                                    item
+                                                }),
+                                                className: itemIndicator(),
+                                                children: /*#__PURE__*/ jsx(Icon, {
+                                                    icon: "token-icon-check",
+                                                    size: "current"
+                                                })
+                                            })
+                                        ]
                                     }, item.value))
                             }),
                             showEmptyState && /*#__PURE__*/ jsx("div", {

package/dist/molecules/dialog.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Dialog } from "./dialog.js";
-code_connect.connect(Dialog, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1034-67", {
+code_connect.connect(Dialog, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1034-67", {
     imports: [
         'import { Dialog } from "@techsio/ui-kit/molecules/dialog"'
     ],

package/dist/molecules/form-checkbox.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { FormCheckbox } from "./form-checkbox.js";
-code_connect.connect(FormCheckbox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=916-487", {
+code_connect.connect(FormCheckbox, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=916-487", {
     imports: [
         'import { FormCheckbox } from "@techsio/ui-kit/molecules/form-checkbox"'
     ],

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { FormInput } from "./form-input.js";
-code_connect.connect(FormInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=306-266", {
+code_connect.connect(FormInput, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=306-266", {
     imports: [
         'import { FormInput } from "@techsio/ui-kit/molecules/form-input"'
     ],

package/dist/molecules/form-numeric-input.figma.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { NumericInput } from "../atoms/numeric-input.js";
 import { FormNumericInput } from "./form-numeric-input.js";
-code_connect.connect(FormNumericInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=603-143", {
+code_connect.connect(FormNumericInput, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=603-143", {
     imports: [
         'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"',
         'import { FormNumericInput } from "@techsio/ui-kit/molecules/form-numeric-input"'

package/dist/molecules/form-textarea.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 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", {
+code_connect.connect(FormTextarea, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=929-317", {
     imports: [
         'import { FormTextarea } from "@techsio/ui-kit/molecules/form-textarea"'
     ],

package/dist/molecules/menu.figma.js

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

package/dist/molecules/menu.js

@@ -9,33 +9,28 @@ const menuVariants = tv({
     slots: {
         trigger: "",
         positioner: [
-            "w-(--reference-width)",
-            "isolate z-(--z-index)"
+            "isolate w-(--reference-width)"
         ],
         content: [
-            "border border-menu-content-border bg-menu-content-bg",
-            "rounded-menu shadow-menu-content",
-            "p-menu-content",
-            "overflow-auto",
-            "focus-visible:outline-none",
-            "data-[state=open]:animate-in",
-            "data-[state=closed]:animate-out",
-            "motion-reduce:animate-none"
+            "popup-surface-base",
+            "w-full",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
+            "transition-discrete",
+            "starting:scale-98 starting:opacity-0",
+            "data-[state=open]:starting:scale-98 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+            "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
         ],
         item: [
-            "flex items-center gap-menu-item",
-            "cursor-pointer",
-            "px-menu-item-x py-menu-item-y",
-            "text-menu-item-fg",
-            "rounded-menu-item",
-            "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-bg-hover",
+            "popup-item-base",
+            "hover:bg-popup-item-bg-hover",
+            "focus:bg-popup-item-bg-hover",
+            "data-[highlighted]:bg-popup-item-bg-hover",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-popup-item-fg-disabled",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         optionItem: [
-            "data-[state=checked]:font-semibold"
+            "data-[state=checked]:text-popup-item-fg-checked"
         ],
         separator: [
             "my-menu-separator-margin",
@@ -43,10 +38,15 @@ const menuVariants = tv({
             "bg-menu-separator-bg"
         ],
         itemText: [
-            "flex-grow"
+            "min-w-0 flex-grow truncate"
+        ],
+        itemIndicator: [
+            "-translate-y-1/2 absolute end-(--popup-item-x) top-1/2",
+            "flex items-center justify-center",
+            "size-(--size-popup-indicator) text-popup-item-fg-checked"
         ],
         itemIcon: [
-            "text-menu-item-icon-fg text-menu-item-icon"
+            "shrink-0 text-menu-item-icon text-popup-item-fg-muted"
         ],
         submenuIndicator: [
             "ms-menu-submenu-indicator text-menu-submenu-indicator-fg"
@@ -54,17 +54,17 @@ const menuVariants = tv({
     },
     variants: {
         size: {
+            xs: {
+                content: "popup-size-xs text-menu-xs"
+            },
             sm: {
-                content: "text-sm",
-                item: "text-sm"
+                content: "popup-size-sm text-menu-sm"
             },
             md: {
-                content: "text-md",
-                item: "text-md"
+                content: "popup-size-md text-menu-md"
             },
             lg: {
-                content: "text-lg",
-                item: "text-lg"
+                content: "popup-size-lg text-menu-lg"
             }
         }
     },
@@ -88,7 +88,7 @@ function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedCha
         submenuService,
         parentService
     ]);
-    const { positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, submenuIndicator } = menuVariants({
+    const { positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, itemIndicator, submenuIndicator } = menuVariants({
         size
     });
     const renderMenuItem = (menuItem)=>{
@@ -115,13 +115,16 @@ function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedCha
                 }
             }),
             children: [
-                menuItem.checked && /*#__PURE__*/ jsx(Icon, {
-                    className: itemIcon(),
-                    icon: "token-icon-check"
-                }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
                     children: menuItem.label
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemIndicator(),
+                    children: menuItem.checked && /*#__PURE__*/ jsx(Icon, {
+                        icon: "token-icon-check",
+                        size: "current"
+                    })
                 })
             ]
         }, menuItem.value);
@@ -205,7 +208,7 @@ function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocu
         "aria-label": ariaLabel
     });
     const api = connect(service, normalizeProps);
-    const { trigger, positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText } = menuVariants({
+    const { trigger, positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, itemIndicator } = menuVariants({
         size
     });
     const renderMenuItem = (item)=>{
@@ -232,13 +235,16 @@ function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocu
                 }
             }),
             children: [
-                item.checked && /*#__PURE__*/ jsx(Icon, {
-                    className: itemIcon(),
-                    icon: "token-icon-check"
-                }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
                     children: item.label
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemIndicator(),
+                    children: item.checked && /*#__PURE__*/ jsx(Icon, {
+                        icon: "token-icon-check",
+                        size: "current"
+                    })
                 })
             ]
         }, item.value);

package/dist/molecules/pagination.figma.js

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

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

@@ -1,7 +1,7 @@
 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", {
+code_connect.connect(PhoneInput, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=2541-171", {
     imports: [
         'import { PhoneInput } from "@techsio/ui-kit/molecules/phone-input"'
     ],

package/dist/molecules/popover.figma.js

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

package/dist/molecules/product-card.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 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", {
+code_connect.connect(ProductCard, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1182-51", {
     imports: [
         'import { ProductCard } from "@libs/ui/molecules/product-card"'
     ],

package/dist/molecules/radio-card.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 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", {
+code_connect.connect(RadioCard, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1151-66", {
     imports: [
         'import { RadioCard } from "@libs/ui/molecules/radio-card"'
     ],

package/dist/molecules/radio-group.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 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", {
+code_connect.connect(RadioGroup, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1149-66", {
     imports: [
         'import { RadioGroup } from "@libs/ui/molecules/radio-group"'
     ],

package/dist/molecules/search-form.figma.js

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

package/dist/molecules/select.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Select } from "./select.js";
-code_connect.connect(Select, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=761-571", {
+code_connect.connect(Select, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=761-571", {
     imports: [
         'import { Select } from "@techsio/ui-kit/molecules/select"'
     ],

package/dist/molecules/select.js

@@ -26,8 +26,7 @@ const selectVariants = tv({
             "w-full"
         ],
         positioner: [
-            "w-(--reference-width)",
-            "isolate z-(--z-index)"
+            "isolate w-(--reference-width)"
         ],
         trigger: [
             "form-control-base w-full",
@@ -64,41 +63,38 @@ const selectVariants = tv({
             "-translate-y-1/2 absolute top-1/2 right-select-right"
         ],
         content: [
-            "border border-select-content-border bg-select-content-bg",
-            "max-h-fit rounded-select shadow-select-content",
-            "h-[calc(var(--available-height)-var(--spacing-content))]",
-            "z-(--z-content) overflow-auto",
-            "duration-200 ease-out motion-safe:transition-[opacity,display,translate]",
+            "popup-surface-base",
+            "w-full",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
             "transition-discrete",
-            "starting:-translate-y-2 starting:opacity-0",
-            "data-[state=open]:starting:-translate-y-2 data-[state=open]:starting:opacity-0",
-            "data-[state=open]:translate-y-0 data-[state=open]:opacity-100",
-            "data-[state=closed]:-translate-y-2 data-[state=closed]:opacity-0"
+            "starting:scale-98 starting:opacity-0",
+            "data-[state=open]:starting:scale-98 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+            "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
         ],
         item: [
-            "flex items-center justify-between",
-            "cursor-pointer bg-select-item-bg-base",
-            "p-select-item",
-            "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-fg-selected",
-            "data-[disabled]:cursor-not-allowed data-[disabled]:text-select-fg-disabled",
+            "popup-item-base",
+            "hover:bg-popup-item-bg-hover",
+            "data-[highlighted]:bg-popup-item-bg-hover",
+            "data-[state=checked]:bg-popup-item-bg-selected",
+            "data-[state=checked]:text-popup-item-fg-selected",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-popup-item-fg-disabled",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         itemIndicator: [
-            "text-select-indicator"
+            "-translate-y-1/2 absolute end-(--popup-item-x) top-1/2",
+            "flex items-center justify-center",
+            "size-(--size-popup-indicator) text-popup-item-fg-selected"
         ],
         itemText: [
-            "flex-grow"
+            "min-w-0 flex-grow truncate"
         ],
         itemGroup: [
             ""
         ],
         itemGroupLabel: [
-            "px-select-item-x",
-            "font-medium text-select-fg-disabled"
+            "px-(--popup-item-x) py-(--popup-item-y)",
+            "font-medium text-popup-item-fg-muted"
         ],
         valueText: [
             "flex-grow truncate font-normal",
@@ -109,25 +105,25 @@ const selectVariants = tv({
         size: {
             xs: {
                 trigger: "p-select-trigger-sm text-select-trigger-xs",
-                item: "text-select-item-xs",
+                content: "popup-size-xs text-select-item-xs",
                 valueText: "text-select-value-xs",
                 itemGroupLabel: "text-select-item-group-label-xs"
             },
             sm: {
                 trigger: "h-form-control-sm rounded-select-sm p-select-trigger-sm text-select-trigger-sm",
-                item: "text-select-item-sm",
+                content: "popup-size-sm text-select-item-sm",
                 valueText: "text-select-value-sm",
                 itemGroupLabel: "text-select-item-group-label-sm"
             },
             md: {
                 trigger: "h-form-control-md rounded-select-md p-select-trigger-md text-select-trigger-md",
-                item: "text-select-item-md",
+                content: "popup-size-md text-select-item-md",
                 valueText: "text-select-value-md",
                 itemGroupLabel: "text-select-item-group-label-md"
             },
             lg: {
                 trigger: "p-select-trigger-md text-select-trigger-lg",
-                item: "text-select-item-lg",
+                content: "popup-size-lg text-select-item-lg",
                 valueText: "text-select-value-lg",
                 itemGroupLabel: "text-select-item-group-label-lg"
             }

package/dist/molecules/slider.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Slider } from "./slider.js";
-code_connect.connect(Slider, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1141-48", {
+code_connect.connect(Slider, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1141-48", {
     imports: [
         'import { Slider } from "@techsio/ui-kit/molecules/slider"'
     ],

package/dist/molecules/steps.figma.js

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

package/dist/molecules/switch.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Switch } from "./switch.js";
-code_connect.connect(Switch, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1137-22", {
+code_connect.connect(Switch, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1137-22", {
     imports: [
         'import { Switch } from "@techsio/ui-kit/molecules/switch"'
     ],

package/dist/molecules/tabs.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Tabs } from "./tabs.js";
-code_connect.connect(Tabs, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1174-74", {
+code_connect.connect(Tabs, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1174-74", {
     imports: [
         'import { Tabs } from "@libs/ui/molecules/tabs"'
     ],

package/dist/molecules/toast.figma.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Toaster, useToast } from "./toast.js";
-code_connect.connect(Toaster, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1155-33", {
+code_connect.connect(Toaster, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1155-33", {
     imports: [
         'import { Toaster, useToast } from "@libs/ui/molecules/toast"'
     ],

package/dist/molecules/tree-view.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { TreeView } from "./tree-view.js";
-code_connect.connect(TreeView, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1193-228", {
+code_connect.connect(TreeView, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1193-228", {
     imports: [
         'import { TreeView } from "@techsio/ui-kit/molecules/tree-view"'
     ],

package/dist/organisms/footer.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Footer } from "./footer.js";
-code_connect.connect(Footer, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1372-161", {
+code_connect.connect(Footer, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1372-161", {
     imports: [
         'import { Footer } from "@libs/ui/organisms/footer"'
     ],

package/dist/organisms/gallery.figma.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Gallery } from "./gallery.js";
-code_connect.connect(Gallery, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1392-68", {
+code_connect.connect(Gallery, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1392-68", {
     imports: [
         'import { Gallery } from "@libs/ui/organisms/gallery"'
     ],

package/dist/organisms/header.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Header } from "./header.js";
-code_connect.connect(Header, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1391-225", {
+code_connect.connect(Header, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=1391-225", {
     imports: [
         'import { Header } from "@libs/ui/organisms/header"'
     ],