@techsio/ui-kit 0.39.0 → 0.40.1

package/dist/.storybook/manager.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=manager.d.ts.map

package/dist/.storybook/manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../.storybook/manager.tsx"],"names":[],"mappings":""}

package/dist/.storybook/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAU1D,OAAO,yBAAyB,CAAA;AA2ChC,QAAA,MAAM,OAAO,EAAE,OA0Dd,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAU1D,OAAO,yBAAyB,CAAA;AAqChC,QAAA,MAAM,OAAO,EAAE,OAyDd,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/atoms/action-icon.figma.js

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

package/dist/atoms/badge.figma.js

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

package/dist/atoms/button.figma.js

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

package/dist/atoms/checkbox.figma.js

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

package/dist/atoms/icon.figma.js

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

package/dist/atoms/image.figma.js

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

package/dist/atoms/input.figma.js

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

package/dist/atoms/label.figma.js

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

package/dist/atoms/link-button.figma.js

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

package/dist/atoms/link.figma.js

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

package/dist/atoms/numeric-input.figma.js

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

package/dist/atoms/rating.figma.js

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

package/dist/atoms/skeleton.figma.js

@@ -5,7 +5,7 @@ const placeholderBgClassByVariant = {
     primary: "bg-skeleton-bg-primary",
     secondary: "bg-skeleton-bg-secondary"
 };
-code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-101", {
+code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-101", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],
@@ -31,7 +31,7 @@ code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/12xb1pqXK
         });
     }
 });
-code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-198", {
+code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-198", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],
@@ -64,7 +64,7 @@ code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/12xb1pqXKwE2
         });
     }
 });
-code_connect.connect(Skeleton.Text, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-2143", {
+code_connect.connect(Skeleton.Text, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=565-2143", {
     imports: [
         'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
     ],

package/dist/atoms/status-text.figma.js

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

package/dist/atoms/textarea.figma.js

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

package/dist/atoms/tooltip.figma.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { Button } from "./button.js";
 import { Tooltip } from "./tooltip.js";
-code_connect.connect(Tooltip, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=340-436", {
+code_connect.connect(Tooltip, "https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System-vol.-2?node-id=340-436", {
     imports: [
         'import { Tooltip } from "@techsio/ui-kit/atoms/tooltip"',
         'import { Button } from "@techsio/ui-kit/atoms/button"'

package/dist/molecules/accordion.figma.js

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

package/dist/molecules/breadcrumb.figma.js

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

package/dist/molecules/carousel.figma.js

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

package/dist/molecules/combobox.figma.js

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

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"'
     ],