@techsio/ui-kit 0.10.1 → 0.12.0

package/dist/atoms/{figma/badge.figma.js → badge.figma.js}

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

package/dist/atoms/{figma/button.figma.js → button.figma.js}

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

package/dist/atoms/{figma/checkbox.figma.js → checkbox.figma.js}

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

package/dist/atoms/{figma/icon.figma.js → icon.figma.js}

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

package/dist/atoms/{figma/image.figma.js → image.figma.js}

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

package/dist/atoms/{figma/input.figma.js → input.figma.js}

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

package/dist/atoms/{figma/label.figma.js → label.figma.js}

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

package/dist/atoms/{figma/link-button.figma.js → link-button.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { LinkButton } from "../link-button.js";
+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", {
     imports: [
         'import { LinkButton } from "@techsio/ui-kit/atoms/link-button"'

package/dist/atoms/{figma/link.figma.js → link.figma.js}

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

package/dist/atoms/{figma/numeric-input.figma.js → numeric-input.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { NumericInput } from "../numeric-input.js";
+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", {
     imports: [
         'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"'

package/dist/atoms/{figma/rating.figma.js → rating.figma.js}

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

package/dist/atoms/{figma/skeleton.figma.js → skeleton.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Skeleton } from "../skeleton.js";
+import { Skeleton } from "./skeleton.js";
 const placeholderBgClassByVariant = {
     primary: "bg-skeleton-bg-primary",
     secondary: "bg-skeleton-bg-secondary"

package/dist/atoms/{figma/status-text.figma.js → status-text.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { StatusText } from "../status-text.js";
+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", {
     imports: [
         'import { StatusText } from "@libs/ui/atoms/status-text"'

package/dist/atoms/{figma/textarea.figma.js → textarea.figma.js}

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

package/dist/atoms/{figma/tooltip.figma.js → tooltip.figma.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Button } from "../button.js";
-import { Tooltip } from "../tooltip.js";
+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", {
     imports: [
         'import { Tooltip } from "@techsio/ui-kit/atoms/tooltip"',

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

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

package/dist/molecules/accordion.js

@@ -21,7 +21,7 @@ const accordionVariants = tv({
             "font-accordion-title",
             "bg-accordion-title-bg text-accordion-title-fg",
             "hover:bg-accordion-title-bg-hover",
-            "pr-accordion-icon",
+            "pr-accordion-icon-right",
             "data-[disabled=true]:cursor-not-allowed"
         ],
         subtitle: [
@@ -57,7 +57,7 @@ const accordionVariants = tv({
         size: {
             sm: {
                 title: "p-accordion-title-sm text-accordion-title-sm",
-                content: "px-accordion-content-sm text-accordion-content-sm",
+                content: "px-accordion-content-x-sm text-accordion-content-sm",
                 subtitle: "text-accordion-subtitle-sm"
             },
             md: {

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

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

package/dist/molecules/breadcrumb.js

@@ -13,19 +13,19 @@ const BreadcrumbVariants = tv({
             "flex flex-wrap items-center",
             "break-words",
             "list-none",
-            "text-breadcrumb-list-fg"
+            "text-breadcrumb-item"
         ],
         item: [
             "inline-flex min-w-0 items-center",
-            "text-breadcrumb-item-fg"
+            "text-breadcrumb-item"
         ],
         link: [
             "inline-flex min-w-0 items-center",
             "rounded-breadcrumb-link",
-            "text-breadcrumb-link-fg",
+            "text-breadcrumb-item",
             "no-underline",
             "cursor-pointer",
-            "hover:text-breadcrumb-link-fg-hover",
+            "hover:text-breadcrumb-item-hover",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-breadcrumb-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -34,7 +34,7 @@ const BreadcrumbVariants = tv({
         currentLink: [
             "inline-flex min-w-0 items-center",
             "rounded-breadcrumb-link",
-            "text-breadcrumb-current-link-fg",
+            "text-breadcrumb-item-current",
             "cursor-default"
         ],
         icon: [
@@ -43,7 +43,7 @@ const BreadcrumbVariants = tv({
         iconSize: "",
         separator: [
             "inline-flex shrink-0 items-center justify-center",
-            "text-breadcrumb-separator-fg",
+            "text-breadcrumb-separator",
             "rtl:rotate-180"
         ],
         separatorIcon: [
@@ -52,7 +52,7 @@ const BreadcrumbVariants = tv({
         separatorIconSize: "",
         ellipsis: [
             "inline-flex shrink-0 items-center justify-center",
-            "text-breadcrumb-ellipsis-fg"
+            "text-breadcrumb-ellipsis"
         ],
         ellipsisIcon: [
             "inline-flex items-center justify-center"
@@ -69,8 +69,8 @@ const BreadcrumbVariants = tv({
         },
         size: {
             sm: {
-                root: "p-breadcrumb-root-sm text-breadcrumb-sm",
-                list: "gap-breadcrumb-list-sm",
+                root: "p-breadcrumb-sm text-breadcrumb-sm",
+                list: "gap-breadcrumb-sm",
                 link: "gap-breadcrumb-link-sm",
                 currentLink: "gap-breadcrumb-link-sm",
                 iconSize: "text-breadcrumb-icon-sm",
@@ -79,8 +79,8 @@ const BreadcrumbVariants = tv({
                 ellipsisIconSize: "text-breadcrumb-ellipsis-icon-sm"
             },
             md: {
-                root: "p-breadcrumb-root-md text-breadcrumb-md",
-                list: "gap-breadcrumb-list-md",
+                root: "p-breadcrumb-md text-breadcrumb-md",
+                list: "gap-breadcrumb-md",
                 link: "gap-breadcrumb-link-md",
                 currentLink: "gap-breadcrumb-link-md",
                 iconSize: "text-breadcrumb-icon-md",
@@ -89,8 +89,8 @@ const BreadcrumbVariants = tv({
                 ellipsisIconSize: "text-breadcrumb-ellipsis-icon-md"
             },
             lg: {
-                root: "p-breadcrumb-root-lg text-breadcrumb-lg",
-                list: "gap-breadcrumb-list-lg",
+                root: "p-breadcrumb-lg text-breadcrumb-lg",
+                list: "gap-breadcrumb-lg",
                 link: "gap-breadcrumb-link-lg",
                 currentLink: "gap-breadcrumb-link-lg",
                 iconSize: "text-breadcrumb-icon-lg",

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

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

package/dist/molecules/carousel.js

@@ -37,10 +37,10 @@ const carouselVariants = tv({
             "flex w-full items-center justify-center gap-carousel-indicator"
         ],
         indicator: [
-            "aspect-carousel-indicator w-carousel-indicator bg-carousel-indicator-bg",
+            "aspect-carousel-indicator w-carousel-indicator bg-carousel-indicator-bg-base",
             "data-current:bg-carousel-indicator-bg-active",
             "data-current:border-carousel-indicator-border-active",
-            "rounded-carousel-indicator border border-carousel-indicator-border",
+            "rounded-carousel-indicator border border-carousel-indicator-border-base",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         autoplayIcon: [
@@ -49,7 +49,7 @@ const carouselVariants = tv({
         ],
         autoplayTrigger: [
             "absolute top-carousel-trigger-top right-carousel-trigger-right z-50",
-            "bg-carousel-trigger-bg"
+            "bg-carousel-trigger-bg-base"
         ],
         spacer: [
             "flex-1"
@@ -65,7 +65,7 @@ const carouselVariants = tv({
             ],
             class: [
                 "p-carousel-trigger",
-                "text-carousel-trigger-fg",
+                "text-carousel-trigger-fg-base",
                 "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
                 "focus-visible:outline-carousel-ring",
                 "focus-visible:outline-offset-(length:--default-ring-offset)"
@@ -77,7 +77,7 @@ const carouselVariants = tv({
                 "nextTrigger"
             ],
             class: [
-                'bg-carousel-trigger-bg hover:bg-carousel-trigger-bg-hover text-carousel-trigger-size',
+                'bg-carousel-trigger-bg-base hover:bg-carousel-trigger-bg-hover text-carousel-trigger',
                 'hover:text-carousel-trigger-fg-hover',
                 'transition-colors duration-200 motion-reduce:transition-none'
             ]

package/dist/molecules/color-select.js

@@ -16,7 +16,7 @@ const colorSelectVariants = tv({
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-color-select-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
-            "data-[selected=true]:border-color-select-selected data-[selected=true]:shadow-none"
+            "data-[selected=true]:border-color-select-border-selected data-[selected=true]:shadow-none"
         ],
         color: [
             "absolute",
@@ -56,22 +56,22 @@ const colorSelectVariants = tv({
         },
         size: {
             sm: {
-                group: "gap-color-select-group-sm",
+                group: "gap-color-select-sm",
                 atom: "h-color-select-sm",
                 icon: "text-color-select-sm"
             },
             md: {
-                group: "gap-color-select-group-md",
+                group: "gap-color-select-md",
                 atom: "h-color-select-md",
                 icon: "text-color-select-md"
             },
             lg: {
-                group: "gap-color-select-group-lg",
+                group: "gap-color-select-lg",
                 atom: "h-color-select-lg",
                 icon: "text-color-select-lg"
             },
             full: {
-                group: "h-full w-full gap-color-select-group-md",
+                group: "h-full w-full gap-color-select-md",
                 cell: "h-full w-full",
                 atom: "h-full",
                 icon: "size-color-select-icon"

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

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

package/dist/molecules/combobox.js

@@ -18,7 +18,7 @@ const comboboxVariants = tv({
         ],
         control: [
             "form-control-base relative flex w-full items-center overflow-hidden",
-            "bg-combobox-bg",
+            "bg-combobox-bg-base",
             "transition-colors duration-200 ease-in-out motion-reduce:transition-none",
             "hover:border-combobox-border-hover hover:bg-combobox-bg-hover",
             "data-focus:border-combobox-border-focus data-focus:bg-combobox-bg-focus",
@@ -27,17 +27,17 @@ const comboboxVariants = tv({
             "data-focus-visible:outline-offset-(length:--default-ring-offset)",
             "data-disabled:border-combobox-border-disabled data-disabled:bg-combobox-bg-disabled",
             "data-[validation=error]:border-(length:--border-width-validation)",
-            "data-[validation=error]:border-combobox-danger-fg",
+            "data-[validation=error]:border-combobox-border-error",
             "data-[validation=success]:border-(length:--border-width-validation)",
-            "data-[validation=success]:border-combobox-success-fg",
+            "data-[validation=success]:border-combobox-border-success",
             "data-[validation=warning]:border-(length:--border-width-validation)",
-            "data-[validation=warning]:border-combobox-warning-fg"
+            "data-[validation=warning]:border-combobox-border-warning"
         ],
         input: [
-            "relative h-full w-full border-none bg-combobox-input-bg",
+            "relative h-full w-full border-none bg-combobox-input-bg-base",
             "hover:bg-combobox-input-bg-hover focus-visible:outline-none",
-            "focus:bg-combobox-input-bg-focused",
-            "placeholder:text-combobox-placeholder",
+            "focus:bg-combobox-input-bg-focus",
+            "placeholder:text-combobox-fg-placeholder",
             "data-disabled:text-combobox-fg-disabled",
             "data-disabled:bg-combobox-bg-disabled"
         ],
@@ -56,7 +56,7 @@ const comboboxVariants = tv({
             "flex flex-col overflow-clip",
             "rounded-combobox shadow-md",
             "bg-combobox-content-bg",
-            "z-(--z-combobox-content) border border-combobox-border",
+            "z-(--z-combobox-content) border border-combobox-border-base",
             "duration-200 ease-out motion-safe:transition-[opacity,display,translate]",
             "transition-discrete",
             "starting:-translate-y-2 starting:opacity-0",
@@ -76,7 +76,12 @@ const comboboxVariants = tv({
             "data-disabled:cursor-not-allowed data-disabled:text-combobox-fg-disabled"
         ],
         emptyState: [
-            "text-combobox-placeholder"
+            "text-combobox-fg-placeholder"
+        ],
+        triggerIndicator: [
+            "text-combobox-trigger-fg-base group-hover:text-combobox-trigger-fg-hover",
+            "motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none",
+            "rotate-0 group-data-[state=open]:rotate-180"
         ],
         helper: [
             "data-[validation=success]:text-combobox-success-fg",
@@ -94,8 +99,8 @@ const comboboxVariants = tv({
                 "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
                 "focus-visible:outline-combobox-ring",
                 "focus-visible:outline-offset-(length:--default-ring-offset)",
-                "text-combobox-trigger text-combobox-trigger-size",
-                "hover:text-combobox-trigger-hover",
+                "text-combobox-trigger-fg-base text-combobox-trigger",
+                "hover:text-combobox-trigger-fg-hover",
                 "motion-safe:transition-colors motion-safe:duration-200 motion-reduce:transition-none",
                 "hover:bg-combobox-trigger-bg-hover",
                 "active:bg-combobox-trigger-bg-active"
@@ -105,28 +110,28 @@ const comboboxVariants = tv({
     variants: {
         size: {
             sm: {
-                root: "gap-combobox-root-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-content-sm"
+                content: "text-combobox-sm"
             },
             md: {
-                root: "gap-combobox-root-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-content-md"
+                content: "text-combobox-md"
             },
             lg: {
-                root: "gap-combobox-root-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-content-lg"
+                content: "text-combobox-lg"
             }
         }
     },
@@ -187,7 +192,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, clearTrigger, item: itemSlot, emptyState } = comboboxVariants({
+    const { root, label: labelStyles, control, input, trigger, positioner, content, list, clearTrigger, item: itemSlot, emptyState, triggerIndicator } = comboboxVariants({
         size
     });
     const hasOptions = api.collection.size > 0;
@@ -231,7 +236,7 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                         size: "current",
                         theme: "unstyled",
                         children: /*#__PURE__*/ jsx(Icon, {
-                            className: `text-combobox-trigger group-hover:text-combobox-trigger-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
+                            className: triggerIndicator(),
                             icon: triggerIcon,
                             size: triggerIconSize ?? resolvedChevronIconSize
                         })

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Dialog } from "../dialog.js";
+import { Dialog } from "./dialog.js";
 code_connect.connect(Dialog, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1034-67", {
     imports: [
         'import { Dialog } from "@techsio/ui-kit/molecules/dialog"'
@@ -15,9 +15,9 @@ code_connect.connect(Dialog, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3nt
         })
     },
     example: ({ placement })=>/*#__PURE__*/ jsx(Dialog, {
+            description: "Description",
             placement: placement,
             title: "Title",
-            description: "Description",
             triggerText: "Open",
             children: "Content"
         })

package/dist/molecules/dialog.js

@@ -23,44 +23,44 @@ const dialogVariants = tv({
             "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         title: [
-            "font-dialog-title text-dialog-title-fg text-dialog-title-size"
+            "font-dialog-title text-dialog-title-fg text-dialog-title"
         ],
         description: [
-            "text-dialog-description-fg text-dialog-description-size"
+            "text-dialog-description-fg text-dialog-description"
         ],
         trigger: [],
         closeTrigger: [
             "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset",
             "flex items-center justify-center",
-            "rounded-dialog-close-trigger p-dialog-close-trigger-padding",
+            "rounded-dialog-close-trigger p-dialog-close-trigger",
             "text-dialog-close-trigger-fg",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-dialog-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
-        actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions"
+        actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions-top"
     },
     variants: {
         placement: {
             center: {
                 positioner: "items-center justify-center",
-                content: "max-h-dialog-center-h-max max-w-dialog-center-w-max rounded-dialog-center"
+                content: "max-h-dialog-center-h-max max-w-dialog-center-w-max rounded-dialog-content-center"
             },
             left: {
                 positioner: "items-stretch justify-start",
-                content: "h-full rounded-dialog-left border-l-0"
+                content: "h-full rounded-dialog-content-side border-l-0"
             },
             right: {
                 positioner: "items-stretch justify-end",
-                content: "h-full rounded-dialog-right border-r-0"
+                content: "h-full rounded-dialog-content-side border-r-0"
             },
             top: {
                 positioner: "items-start justify-stretch",
-                content: "w-full rounded-dialog-top border-t-0"
+                content: "w-full rounded-dialog-content-edge border-t-0"
             },
             bottom: {
                 positioner: "items-end justify-stretch",
-                content: "w-full rounded-dialog-bottom border-b-0"
+                content: "w-full rounded-dialog-content-edge border-b-0"
             }
         },
         position: {
@@ -91,7 +91,7 @@ const dialogVariants = tv({
         },
         behavior: {
             modal: {
-                backdrop: "bg-dialog-backdrop-bg"
+                backdrop: "bg-dialog-backdrop-bg-modal"
             },
             modeless: {
                 backdrop: "bg-transparent",

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { FormCheckbox } from "../form-checkbox.js";
+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", {
     imports: [
         'import { FormCheckbox } from "@techsio/ui-kit/molecules/form-checkbox"'

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { FormInput } from "../form-input.js";
+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", {
     imports: [
         'import { FormInput } from "@techsio/ui-kit/molecules/form-input"'
@@ -28,11 +28,11 @@ code_connect.connect(FormInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN
         required: code_connect.boolean("required")
     },
     example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsx(FormInput, {
+            disabled: disabled,
             id: "field",
             label: "Label",
+            required: required,
             size: size,
-            validateStatus: validateStatus,
-            disabled: disabled,
-            required: required
+            validateStatus: validateStatus
         })
 });

package/dist/molecules/{figma/form-numeric-input.figma.js → form-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 "../../atoms/numeric-input.js";
-import { FormNumericInput } from "../form-numeric-input.js";
+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", {
     imports: [
         'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"',
@@ -43,11 +43,11 @@ code_connect.connect(FormNumericInput, "https://www.figma.com/design/12xb1pqXKwE
         })
     },
     example: ({ disabled, readOnly, required, size, validateStatus })=>/*#__PURE__*/ jsx(FormNumericInput, {
-            id: "quantity",
-            helpText: "Enter value between 0-100",
-            label: "Quantity",
             defaultValue: 42,
             disabled: disabled,
+            helpText: "Enter value between 0-100",
+            id: "quantity",
+            label: "Quantity",
             readOnly: readOnly,
             required: required,
             size: size,