@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/Row/styles.css.d.ts

@@ -0,0 +1,460 @@
+import type { CSSProperties } from 'react';
+export declare const row: string;
+declare const alignItemsValues: CSSProperties['alignItems'][];
+export type AlignItemsType = (typeof alignItemsValues)[number];
+declare const justifyContentValues: CSSProperties['justifyContent'][];
+export type JustifyContentType = (typeof justifyContentValues)[number];
+export declare const responsiveProperties: {
+    conditions: {
+        defaultCondition: "xxsmall";
+        conditionNames: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[];
+        responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            length: 5;
+        };
+    };
+    styles: {
+        gap: {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
+                length: 5;
+            };
+            values: {
+                [x: string]: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+            };
+        };
+        alignItems: {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
+                length: 5;
+            };
+            values: {
+                [x: string & {}]: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "-moz-initial": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                inherit: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                initial: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                revert: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "revert-layer": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                unset: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                normal: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                stretch: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                center: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                end: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "flex-end": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "flex-start": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                start: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                baseline: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "self-end": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "self-start": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+            };
+        };
+        justifyContent: {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
+                length: 5;
+            };
+            values: {
+                [x: string & {}]: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "-moz-initial": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                inherit: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                initial: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                revert: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "revert-layer": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                unset: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                normal: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                left: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                right: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "space-around": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "space-between": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "space-evenly": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                stretch: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                center: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                end: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "flex-end": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                "flex-start": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+                start: {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const sprinkles: ((props: {
+    gap?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, string | null> | (string | {
+        large?: string | undefined;
+        medium?: string | undefined;
+        small?: string | undefined;
+        xlarge?: string | undefined;
+        xsmall?: string | undefined;
+        xxsmall?: string | undefined;
+    } | undefined);
+    alignItems?: ({} | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, import("csstype").Property.AlignItems | null | undefined>;
+    justifyContent?: ({} | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, import("csstype").Property.JustifyContent | null | undefined>;
+}) => string) & {
+    properties: Set<"alignItems" | "justifyContent" | "gap">;
+};
+export {};

package/dist/components/Row/styles.css.js

@@ -0,0 +1,17 @@
+/* empty css                             */
+/* empty css                          */
+import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
+var row = "uv_x6hyh50";
+var responsiveProperties = function() {
+  var x = { conditions: { defaultCondition: "xxsmall", conditionNames: ["xxsmall", "xsmall", "small", "medium", "large", "xlarge"], responsiveArray: ["xxsmall", "xsmall", "small", "medium", "large"] }, styles: { gap: { values: { "0rem": { conditions: { xxsmall: "uv_x6hyh51", xsmall: "uv_x6hyh52", small: "uv_x6hyh53", medium: "uv_x6hyh54", large: "uv_x6hyh55", xlarge: "uv_x6hyh56" }, defaultClass: "uv_x6hyh51" }, "0.5rem": { conditions: { xxsmall: "uv_x6hyh57", xsmall: "uv_x6hyh58", small: "uv_x6hyh59", medium: "uv_x6hyh5a", large: "uv_x6hyh5b", xlarge: "uv_x6hyh5c" }, defaultClass: "uv_x6hyh57" }, "1rem": { conditions: { xxsmall: "uv_x6hyh5d", xsmall: "uv_x6hyh5e", small: "uv_x6hyh5f", medium: "uv_x6hyh5g", large: "uv_x6hyh5h", xlarge: "uv_x6hyh5i" }, defaultClass: "uv_x6hyh5d" }, "1.5rem": { conditions: { xxsmall: "uv_x6hyh5j", xsmall: "uv_x6hyh5k", small: "uv_x6hyh5l", medium: "uv_x6hyh5m", large: "uv_x6hyh5n", xlarge: "uv_x6hyh5o" }, defaultClass: "uv_x6hyh5j" }, "2rem": { conditions: { xxsmall: "uv_x6hyh5p", xsmall: "uv_x6hyh5q", small: "uv_x6hyh5r", medium: "uv_x6hyh5s", large: "uv_x6hyh5t", xlarge: "uv_x6hyh5u" }, defaultClass: "uv_x6hyh5p" }, "2.5rem": { conditions: { xxsmall: "uv_x6hyh5v", xsmall: "uv_x6hyh5w", small: "uv_x6hyh5x", medium: "uv_x6hyh5y", large: "uv_x6hyh5z", xlarge: "uv_x6hyh510" }, defaultClass: "uv_x6hyh5v" }, "3rem": { conditions: { xxsmall: "uv_x6hyh511", xsmall: "uv_x6hyh512", small: "uv_x6hyh513", medium: "uv_x6hyh514", large: "uv_x6hyh515", xlarge: "uv_x6hyh516" }, defaultClass: "uv_x6hyh511" }, "3.5rem": { conditions: { xxsmall: "uv_x6hyh517", xsmall: "uv_x6hyh518", small: "uv_x6hyh519", medium: "uv_x6hyh51a", large: "uv_x6hyh51b", xlarge: "uv_x6hyh51c" }, defaultClass: "uv_x6hyh517" }, "4rem": { conditions: { xxsmall: "uv_x6hyh51d", xsmall: "uv_x6hyh51e", small: "uv_x6hyh51f", medium: "uv_x6hyh51g", large: "uv_x6hyh51h", xlarge: "uv_x6hyh51i" }, defaultClass: "uv_x6hyh51d" }, "4.5rem": { conditions: { xxsmall: "uv_x6hyh51j", xsmall: "uv_x6hyh51k", small: "uv_x6hyh51l", medium: "uv_x6hyh51m", large: "uv_x6hyh51n", xlarge: "uv_x6hyh51o" }, defaultClass: "uv_x6hyh51j" }, "5rem": { conditions: { xxsmall: "uv_x6hyh51p", xsmall: "uv_x6hyh51q", small: "uv_x6hyh51r", medium: "uv_x6hyh51s", large: "uv_x6hyh51t", xlarge: "uv_x6hyh51u" }, defaultClass: "uv_x6hyh51p" }, "0.25rem": { conditions: { xxsmall: "uv_x6hyh51v", xsmall: "uv_x6hyh51w", small: "uv_x6hyh51x", medium: "uv_x6hyh51y", large: "uv_x6hyh51z", xlarge: "uv_x6hyh520" }, defaultClass: "uv_x6hyh51v" }, "0.125rem": { conditions: { xxsmall: "uv_x6hyh521", xsmall: "uv_x6hyh522", small: "uv_x6hyh523", medium: "uv_x6hyh524", large: "uv_x6hyh525", xlarge: "uv_x6hyh526" }, defaultClass: "uv_x6hyh521" }, "0.75rem": { conditions: { xxsmall: "uv_x6hyh527", xsmall: "uv_x6hyh528", small: "uv_x6hyh529", medium: "uv_x6hyh52a", large: "uv_x6hyh52b", xlarge: "uv_x6hyh52c" }, defaultClass: "uv_x6hyh527" } }, responsiveArray: void 0 }, alignItems: { values: { normal: { conditions: { xxsmall: "uv_x6hyh52d", xsmall: "uv_x6hyh52e", small: "uv_x6hyh52f", medium: "uv_x6hyh52g", large: "uv_x6hyh52h", xlarge: "uv_x6hyh52i" }, defaultClass: "uv_x6hyh52d" }, stretch: { conditions: { xxsmall: "uv_x6hyh52j", xsmall: "uv_x6hyh52k", small: "uv_x6hyh52l", medium: "uv_x6hyh52m", large: "uv_x6hyh52n", xlarge: "uv_x6hyh52o" }, defaultClass: "uv_x6hyh52j" }, center: { conditions: { xxsmall: "uv_x6hyh52p", xsmall: "uv_x6hyh52q", small: "uv_x6hyh52r", medium: "uv_x6hyh52s", large: "uv_x6hyh52t", xlarge: "uv_x6hyh52u" }, defaultClass: "uv_x6hyh52p" }, start: { conditions: { xxsmall: "uv_x6hyh52v", xsmall: "uv_x6hyh52w", small: "uv_x6hyh52x", medium: "uv_x6hyh52y", large: "uv_x6hyh52z", xlarge: "uv_x6hyh530" }, defaultClass: "uv_x6hyh52v" }, end: { conditions: { xxsmall: "uv_x6hyh531", xsmall: "uv_x6hyh532", small: "uv_x6hyh533", medium: "uv_x6hyh534", large: "uv_x6hyh535", xlarge: "uv_x6hyh536" }, defaultClass: "uv_x6hyh531" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh537", xsmall: "uv_x6hyh538", small: "uv_x6hyh539", medium: "uv_x6hyh53a", large: "uv_x6hyh53b", xlarge: "uv_x6hyh53c" }, defaultClass: "uv_x6hyh537" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh53d", xsmall: "uv_x6hyh53e", small: "uv_x6hyh53f", medium: "uv_x6hyh53g", large: "uv_x6hyh53h", xlarge: "uv_x6hyh53i" }, defaultClass: "uv_x6hyh53d" }, "self-start": { conditions: { xxsmall: "uv_x6hyh53j", xsmall: "uv_x6hyh53k", small: "uv_x6hyh53l", medium: "uv_x6hyh53m", large: "uv_x6hyh53n", xlarge: "uv_x6hyh53o" }, defaultClass: "uv_x6hyh53j" }, "self-end": { conditions: { xxsmall: "uv_x6hyh53p", xsmall: "uv_x6hyh53q", small: "uv_x6hyh53r", medium: "uv_x6hyh53s", large: "uv_x6hyh53t", xlarge: "uv_x6hyh53u" }, defaultClass: "uv_x6hyh53p" }, baseline: { conditions: { xxsmall: "uv_x6hyh53v", xsmall: "uv_x6hyh53w", small: "uv_x6hyh53x", medium: "uv_x6hyh53y", large: "uv_x6hyh53z", xlarge: "uv_x6hyh540" }, defaultClass: "uv_x6hyh53v" }, "first baseline": { conditions: { xxsmall: "uv_x6hyh541", xsmall: "uv_x6hyh542", small: "uv_x6hyh543", medium: "uv_x6hyh544", large: "uv_x6hyh545", xlarge: "uv_x6hyh546" }, defaultClass: "uv_x6hyh541" }, "last baseline": { conditions: { xxsmall: "uv_x6hyh547", xsmall: "uv_x6hyh548", small: "uv_x6hyh549", medium: "uv_x6hyh54a", large: "uv_x6hyh54b", xlarge: "uv_x6hyh54c" }, defaultClass: "uv_x6hyh547" }, "safe center": { conditions: { xxsmall: "uv_x6hyh54d", xsmall: "uv_x6hyh54e", small: "uv_x6hyh54f", medium: "uv_x6hyh54g", large: "uv_x6hyh54h", xlarge: "uv_x6hyh54i" }, defaultClass: "uv_x6hyh54d" }, "unsafe center": { conditions: { xxsmall: "uv_x6hyh54j", xsmall: "uv_x6hyh54k", small: "uv_x6hyh54l", medium: "uv_x6hyh54m", large: "uv_x6hyh54n", xlarge: "uv_x6hyh54o" }, defaultClass: "uv_x6hyh54j" } }, responsiveArray: void 0 }, justifyContent: { values: { normal: { conditions: { xxsmall: "uv_x6hyh54p", xsmall: "uv_x6hyh54q", small: "uv_x6hyh54r", medium: "uv_x6hyh54s", large: "uv_x6hyh54t", xlarge: "uv_x6hyh54u" }, defaultClass: "uv_x6hyh54p" }, center: { conditions: { xxsmall: "uv_x6hyh54v", xsmall: "uv_x6hyh54w", small: "uv_x6hyh54x", medium: "uv_x6hyh54y", large: "uv_x6hyh54z", xlarge: "uv_x6hyh550" }, defaultClass: "uv_x6hyh54v" }, start: { conditions: { xxsmall: "uv_x6hyh551", xsmall: "uv_x6hyh552", small: "uv_x6hyh553", medium: "uv_x6hyh554", large: "uv_x6hyh555", xlarge: "uv_x6hyh556" }, defaultClass: "uv_x6hyh551" }, end: { conditions: { xxsmall: "uv_x6hyh557", xsmall: "uv_x6hyh558", small: "uv_x6hyh559", medium: "uv_x6hyh55a", large: "uv_x6hyh55b", xlarge: "uv_x6hyh55c" }, defaultClass: "uv_x6hyh557" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh55d", xsmall: "uv_x6hyh55e", small: "uv_x6hyh55f", medium: "uv_x6hyh55g", large: "uv_x6hyh55h", xlarge: "uv_x6hyh55i" }, defaultClass: "uv_x6hyh55d" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh55j", xsmall: "uv_x6hyh55k", small: "uv_x6hyh55l", medium: "uv_x6hyh55m", large: "uv_x6hyh55n", xlarge: "uv_x6hyh55o" }, defaultClass: "uv_x6hyh55j" }, left: { conditions: { xxsmall: "uv_x6hyh55p", xsmall: "uv_x6hyh55q", small: "uv_x6hyh55r", medium: "uv_x6hyh55s", large: "uv_x6hyh55t", xlarge: "uv_x6hyh55u" }, defaultClass: "uv_x6hyh55p" }, right: { conditions: { xxsmall: "uv_x6hyh55v", xsmall: "uv_x6hyh55w", small: "uv_x6hyh55x", medium: "uv_x6hyh55y", large: "uv_x6hyh55z", xlarge: "uv_x6hyh560" }, defaultClass: "uv_x6hyh55v" }, "space-between": { conditions: { xxsmall: "uv_x6hyh561", xsmall: "uv_x6hyh562", small: "uv_x6hyh563", medium: "uv_x6hyh564", large: "uv_x6hyh565", xlarge: "uv_x6hyh566" }, defaultClass: "uv_x6hyh561" }, "space-around": { conditions: { xxsmall: "uv_x6hyh567", xsmall: "uv_x6hyh568", small: "uv_x6hyh569", medium: "uv_x6hyh56a", large: "uv_x6hyh56b", xlarge: "uv_x6hyh56c" }, defaultClass: "uv_x6hyh567" }, "space-evenly": { conditions: { xxsmall: "uv_x6hyh56d", xsmall: "uv_x6hyh56e", small: "uv_x6hyh56f", medium: "uv_x6hyh56g", large: "uv_x6hyh56h", xlarge: "uv_x6hyh56i" }, defaultClass: "uv_x6hyh56d" }, stretch: { conditions: { xxsmall: "uv_x6hyh56j", xsmall: "uv_x6hyh56k", small: "uv_x6hyh56l", medium: "uv_x6hyh56m", large: "uv_x6hyh56n", xlarge: "uv_x6hyh56o" }, defaultClass: "uv_x6hyh56j" } }, responsiveArray: void 0 } } };
+  x.styles.gap.responsiveArray = x.conditions.responsiveArray;
+  x.styles.alignItems.responsiveArray = x.conditions.responsiveArray;
+  x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
+  return x;
+}();
+var sprinkles = createSprinkles(responsiveProperties);
+export {
+  responsiveProperties,
+  row,
+  sprinkles
+};

package/dist/components/Row/variables.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                               */
+var templateColumn = { large: "var(--uv_3mg8xe0)", xlarge: "var(--uv_3mg8xe1)", medium: "var(--uv_3mg8xe2)", small: "var(--uv_3mg8xe3)", xsmall: "var(--uv_3mg8xe4)", xxsmall: "var(--uv_3mg8xe5)" };
+var paddings = { large: "var(--uv_3mg8xe6)", xlarge: "var(--uv_3mg8xe7)", medium: "var(--uv_3mg8xe8)", small: "var(--uv_3mg8xe9)", xsmall: "var(--uv_3mg8xea)", xxsmall: "var(--uv_3mg8xeb)" };
+exports.paddings = paddings;
+exports.templateColumn = templateColumn;

package/dist/components/Row/variables.css.d.ts

@@ -0,0 +1,4 @@
+import { createVar } from '@vanilla-extract/css';
+import type { theme } from '@ultraviolet/themes';
+export declare const templateColumn: Record<keyof typeof theme.breakpoints, ReturnType<typeof createVar>>;
+export declare const paddings: Record<keyof typeof theme.breakpoints, ReturnType<typeof createVar>>;

package/dist/components/Row/variables.css.js

@@ -0,0 +1,7 @@
+/* empty css                             */
+var templateColumn = { large: "var(--uv_3mg8xe0)", xlarge: "var(--uv_3mg8xe1)", medium: "var(--uv_3mg8xe2)", small: "var(--uv_3mg8xe3)", xsmall: "var(--uv_3mg8xe4)", xxsmall: "var(--uv_3mg8xe5)" };
+var paddings = { large: "var(--uv_3mg8xe6)", xlarge: "var(--uv_3mg8xe7)", medium: "var(--uv_3mg8xe8)", small: "var(--uv_3mg8xe9)", xsmall: "var(--uv_3mg8xea)", xxsmall: "var(--uv_3mg8xeb)" };
+export {
+  paddings,
+  templateColumn
+};

package/dist/components/SearchInput/KeyGroup.cjs

@@ -2,30 +2,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
+const index$1 = require("../Key/index.cjs");
 const index = require("../Stack/index.cjs");
-const Key = require("./Key.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const ClickableStack = /* @__PURE__ */ _styled__default.default(index.Stack, process.env.NODE_ENV === "production" ? {
-  target: "e1anqdc20"
-} : {
-  target: "e1anqdc20",
-  label: "ClickableStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1jbm2s3",
-  styles: "cursor:text"
-} : {
-  name: "1jbm2s3",
-  styles: "cursor:text/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlYXJjaElucHV0L0tleUdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPb0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2VhcmNoSW5wdXQvS2V5R3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDb21wb25lbnRQcm9wcyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgU3RhY2sgfSBmcm9tICcuLi9TdGFjaydcbmltcG9ydCB7IEtleSB9IGZyb20gJy4vS2V5J1xuXG5jb25zdCBDbGlja2FibGVTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gIGN1cnNvcjogdGV4dDtcbmBcblxudHlwZSBLZXlHcm91cFByb3BzID0ge1xuICBrZXlzOiBDb21wb25lbnRQcm9wczx0eXBlb2YgS2V5PlsnY2hpbGRyZW4nXVtdXG4gIGRpc2FibGVkOiBDb21wb25lbnRQcm9wczx0eXBlb2YgS2V5PlsnZGlzYWJsZWQnXVxuICBvbkNsaWNrPzogKCkgPT4gdm9pZFxufVxuXG5leHBvcnQgY29uc3QgS2V5R3JvdXAgPSAoeyBrZXlzLCBkaXNhYmxlZCwgb25DbGljayB9OiBLZXlHcm91cFByb3BzKSA9PiAoXG4gIDxDbGlja2FibGVTdGFjayBkaXJlY3Rpb249XCJyb3dcIiBnYXA9ezAuNX0gb25DbGljaz17b25DbGlja30+XG4gICAge2tleXMubWFwKGtleSA9PiAoXG4gICAgICA8S2V5IGRpc2FibGVkPXtkaXNhYmxlZH0ga2V5PXtrZXl9PlxuICAgICAgICB7a2V5fVxuICAgICAgPC9LZXk+XG4gICAgKSl9XG4gIDwvQ2xpY2thYmxlU3RhY2s+XG4pXG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+const styles_css = require("./styles.css.cjs");
 const KeyGroup = ({
   keys,
   disabled,
   onClick
-}) => /* @__PURE__ */ jsxRuntime.jsx(ClickableStack, { direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(Key.Key, { disabled, children: key }, key)) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(index$1.Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
 exports.KeyGroup = KeyGroup;

package/dist/components/SearchInput/KeyGroup.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { Key } from './Key';
+import { Key } from '../Key';
 type KeyGroupProps = {
     keys: ComponentProps<typeof Key>['children'][];
     disabled: ComponentProps<typeof Key>['disabled'];

package/dist/components/SearchInput/KeyGroup.js

@@ -1,29 +1,13 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { Key } from "../Key/index.js";
 import { Stack } from "../Stack/index.js";
-import { Key } from "./Key.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const ClickableStack = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? {
-  target: "e1anqdc20"
-} : {
-  target: "e1anqdc20",
-  label: "ClickableStack"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1jbm2s3",
-  styles: "cursor:text"
-} : {
-  name: "1jbm2s3",
-  styles: "cursor:text/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlYXJjaElucHV0L0tleUdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPb0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2VhcmNoSW5wdXQvS2V5R3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDb21wb25lbnRQcm9wcyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgU3RhY2sgfSBmcm9tICcuLi9TdGFjaydcbmltcG9ydCB7IEtleSB9IGZyb20gJy4vS2V5J1xuXG5jb25zdCBDbGlja2FibGVTdGFjayA9IHN0eWxlZChTdGFjaylgXG4gIGN1cnNvcjogdGV4dDtcbmBcblxudHlwZSBLZXlHcm91cFByb3BzID0ge1xuICBrZXlzOiBDb21wb25lbnRQcm9wczx0eXBlb2YgS2V5PlsnY2hpbGRyZW4nXVtdXG4gIGRpc2FibGVkOiBDb21wb25lbnRQcm9wczx0eXBlb2YgS2V5PlsnZGlzYWJsZWQnXVxuICBvbkNsaWNrPzogKCkgPT4gdm9pZFxufVxuXG5leHBvcnQgY29uc3QgS2V5R3JvdXAgPSAoeyBrZXlzLCBkaXNhYmxlZCwgb25DbGljayB9OiBLZXlHcm91cFByb3BzKSA9PiAoXG4gIDxDbGlja2FibGVTdGFjayBkaXJlY3Rpb249XCJyb3dcIiBnYXA9ezAuNX0gb25DbGljaz17b25DbGlja30+XG4gICAge2tleXMubWFwKGtleSA9PiAoXG4gICAgICA8S2V5IGRpc2FibGVkPXtkaXNhYmxlZH0ga2V5PXtrZXl9PlxuICAgICAgICB7a2V5fVxuICAgICAgPC9LZXk+XG4gICAgKSl9XG4gIDwvQ2xpY2thYmxlU3RhY2s+XG4pXG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { clickableStack } from "./styles.css.js";
 const KeyGroup = ({
   keys,
   disabled,
   onClick
-}) => /* @__PURE__ */ jsx(ClickableStack, { direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { disabled, children: key }, key)) });
+}) => /* @__PURE__ */ jsx(Stack, { className: clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
 export {
   KeyGroup
 };