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

package/dist/components/Row/index.cjs

@@ -2,42 +2,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const StyledRow = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["templateColumns", "gap", "alignItems", "justifyContent", "padding"].includes(prop),
-  target: "e3f5lzv0"
-} : {
-  shouldForwardProp: (prop) => !["templateColumns", "gap", "alignItems", "justifyContent", "padding"].includes(prop),
-  target: "e3f5lzv0",
-  label: "StyledRow"
-})("display:grid;", ({
-  theme,
-  gap,
-  alignItems = "normal",
-  templateColumns,
-  justifyContent = "normal",
-  padding
-}) => `
-
-    ${typeof templateColumns === "object" ? Object.entries(templateColumns).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                  grid-template-columns: ${value};
-                }`).join(" ") : `${templateColumns ? `grid-template-columns: ${templateColumns};` : ""}`}
-
-    ${gap && typeof gap === "object" ? Object.entries(gap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                gap: ${theme.space[value.toString()]};
-              }`).join(" ") : `${gap ? `gap: ${theme.space[gap]};` : ""}`}
-    ${alignItems && typeof alignItems === "object" ? Object.entries(alignItems).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                align-items: ${value};
-              }`).join(" ") : `${alignItems ? `align-items: ${alignItems};` : ""}`}
-    ${justifyContent && typeof justifyContent === "object" ? Object.entries(justifyContent).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                justify-content: ${value};
-              }`).join(" ") : `${justifyContent ? `justify-content: ${justifyContent};` : ""}`}
-    ${padding && typeof padding === "object" ? Object.entries(padding).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                padding: ${value};
-              }`).join(" ") : `${padding ? `padding: ${padding};` : ""}`}
-  `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1Jvdy9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Sb3cvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDU1NQcm9wZXJ0aWVzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgVWx0cmF2aW9sZXRVSVRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5cbnR5cGUgU3R5bGVkUm93UHJvcHMgPSBQaWNrPFxuICBSb3dQcm9wcyxcbiAgJ2dhcCcgfCAndGVtcGxhdGVDb2x1bW5zJyB8ICdhbGlnbkl0ZW1zJyB8ICdqdXN0aWZ5Q29udGVudCcgfCAncGFkZGluZydcbj5cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvdyA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbXG4gICAgICAndGVtcGxhdGVDb2x1bW5zJyxcbiAgICAgICdnYXAnLFxuICAgICAgJ2FsaWduSXRlbXMnLFxuICAgICAgJ2p1c3RpZnlDb250ZW50JyxcbiAgICAgICdwYWRkaW5nJyxcbiAgICBdLmluY2x1ZGVzKHByb3ApLFxufSk8U3R5bGVkUm93UHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICAkeyh7XG4gICAgdGhlbWUsXG4gICAgZ2FwLFxuICAgIGFsaWduSXRlbXMgPSAnbm9ybWFsJyxcbiAgICB0ZW1wbGF0ZUNvbHVtbnMsXG4gICAganVzdGlmeUNvbnRlbnQgPSAnbm9ybWFsJyxcbiAgICBwYWRkaW5nLFxuICB9KSA9PiBgXG5cbiAgICAke1xuICAgICAgdHlwZW9mIHRlbXBsYXRlQ29sdW1ucyA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyh0ZW1wbGF0ZUNvbHVtbnMpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHt0ZW1wbGF0ZUNvbHVtbnMgPyBgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke3RlbXBsYXRlQ29sdW1uc307YCA6ICcnfWBcbiAgICB9XG5cbiAgICAke1xuICAgICAgZ2FwICYmIHR5cGVvZiBnYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoZ2FwKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBnYXA6ICR7dGhlbWUuc3BhY2VbdmFsdWUudG9TdHJpbmcoKSBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ3NwYWNlJ11dfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7Z2FwID8gYGdhcDogJHt0aGVtZS5zcGFjZVtnYXAgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydzcGFjZSddXX07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIGFsaWduSXRlbXMgJiYgdHlwZW9mIGFsaWduSXRlbXMgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoYWxpZ25JdGVtcylcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHthbGlnbkl0ZW1zID8gYGFsaWduLWl0ZW1zOiAke2FsaWduSXRlbXN9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBqdXN0aWZ5Q29udGVudCAmJiB0eXBlb2YganVzdGlmeUNvbnRlbnQgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoanVzdGlmeUNvbnRlbnQpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke2p1c3RpZnlDb250ZW50ID8gYGp1c3RpZnktY29udGVudDogJHtqdXN0aWZ5Q29udGVudH07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIHBhZGRpbmcgJiYgdHlwZW9mIHBhZGRpbmcgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMocGFkZGluZylcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgcGFkZGluZzogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke3BhZGRpbmcgPyBgcGFkZGluZzogJHtwYWRkaW5nfTtgIDogJyd9YFxuICAgIH1cbiAgYH1cbmBcblxudHlwZSBSb3dQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICB0ZW1wbGF0ZUNvbHVtbnM6XG4gICAgfCBzdHJpbmdcbiAgICB8IFBhcnRpYWw8UmVjb3JkPGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSwgc3RyaW5nPj5cbiAgZ2FwPzpcbiAgICB8IGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXVxuICAgIHwgbnVtYmVyXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXSB8IG51bWJlclxuICAgICAgICA+XG4gICAgICA+XG4gIGFsaWduSXRlbXM/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snYWxpZ25JdGVtcyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ2FsaWduSXRlbXMnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGp1c3RpZnlDb250ZW50PzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ2p1c3RpZnlDb250ZW50J11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snanVzdGlmeUNvbnRlbnQnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHBhZGRpbmc/OlxuICAgIHwgQ1NTUHJvcGVydGllc1sncGFkZGluZyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ3BhZGRpbmcnXVxuICAgICAgICA+XG4gICAgICA+XG59XG5cbi8qKlxuICogUm93IGNvbXBvbmVudCBpcyBhIHdyYXBwZXIgZm9yIGdyaWQgbGF5b3V0LlxuICovXG5leHBvcnQgY29uc3QgUm93ID0gKHtcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICBjaGlsZHJlbixcbiAgdGVtcGxhdGVDb2x1bW5zLFxuICBhbGlnbkl0ZW1zLFxuICBqdXN0aWZ5Q29udGVudCxcbiAgZ2FwLFxuICBwYWRkaW5nLFxufTogUm93UHJvcHMpID0+IChcbiAgPFN0eWxlZFJvd1xuICAgIGFsaWduSXRlbXM9e2FsaWduSXRlbXN9XG4gICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgZ2FwPXtnYXB9XG4gICAganVzdGlmeUNvbnRlbnQ9e2p1c3RpZnlDb250ZW50fVxuICAgIHBhZGRpbmc9e3BhZGRpbmd9XG4gICAgdGVtcGxhdGVDb2x1bW5zPXt0ZW1wbGF0ZUNvbHVtbnN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkUm93PlxuKVxuIl19 */"));
+const themes = require("@ultraviolet/themes");
+const dynamic = require("@vanilla-extract/dynamic");
+const styles_css = require("./styles.css.cjs");
+const variables_css = require("./variables.css.cjs");
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
+  ...acc,
+  [key]: themes.consoleLightTheme.space[object[key]]
+}), {}) : {};
 const Row = ({
   className,
   "data-testid": dataTestId,
@@ -47,6 +19,24 @@ const Row = ({
   justifyContent,
   gap,
   padding
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledRow, { alignItems, className, "data-testid": dataTestId, gap, justifyContent, padding, templateColumns, children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.row} ${styles_css.sprinkles({
+  alignItems: typeof alignItems === "object" ? alignItems : {
+    xxsmall: alignItems
+  },
+  gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
+    xxsmall: gap ? themes.consoleLightTheme.space[gap] : void 0
+  },
+  justifyContent: typeof justifyContent === "object" ? justifyContent : {
+    xxsmall: justifyContent
+  }
+})}`, "data-testid": dataTestId, style: dynamic.assignInlineVars({
+  ...Object.keys(variables_css.templateColumn).reduce((acc, column) => ({
+    ...acc,
+    [variables_css.templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
+  }), {}),
+  ...Object.keys(variables_css.paddings).reduce((acc, localPadding) => ({
+    ...acc,
+    [variables_css.paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
+  }), {})
+}), children });
 exports.Row = Row;
-exports.StyledRow = StyledRow;

package/dist/components/Row/index.d.ts

@@ -1,19 +1,17 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { UltravioletUITheme } from '../../theme';
-type StyledRowProps = Pick<RowProps, 'gap' | 'templateColumns' | 'alignItems' | 'justifyContent' | 'padding'>;
-export declare const StyledRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import type { AlignItemsType, JustifyContentType } from './styles.css';
+type ResponsiveProp<T> = T | Partial<Record<keyof UltravioletUITheme['breakpoints'], T>>;
+type ToNumber<T extends string> = T extends `${infer N extends number}` ? N : never;
 type RowProps = {
     className?: string;
     'data-testid'?: string;
     children: ReactNode;
-    templateColumns: string | Partial<Record<keyof UltravioletUITheme['breakpoints'], string>>;
-    gap?: keyof UltravioletUITheme['space'] | number | Partial<Record<keyof UltravioletUITheme['breakpoints'], keyof UltravioletUITheme['space'] | number>>;
-    alignItems?: CSSProperties['alignItems'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['alignItems']>>;
-    justifyContent?: CSSProperties['justifyContent'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['justifyContent']>>;
-    padding?: CSSProperties['padding'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['padding']>>;
+    templateColumns: ResponsiveProp<string>;
+    gap?: ResponsiveProp<keyof UltravioletUITheme['space'] | ToNumber<keyof UltravioletUITheme['space']>>;
+    alignItems?: ResponsiveProp<AlignItemsType>;
+    justifyContent?: ResponsiveProp<JustifyContentType>;
+    padding?: ResponsiveProp<CSSProperties['padding']>;
 };
 /**
  * Row component is a wrapper for grid layout.

package/dist/components/Row/index.js

@@ -1,39 +1,13 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledRow = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["templateColumns", "gap", "alignItems", "justifyContent", "padding"].includes(prop),
-  target: "e3f5lzv0"
-} : {
-  shouldForwardProp: (prop) => !["templateColumns", "gap", "alignItems", "justifyContent", "padding"].includes(prop),
-  target: "e3f5lzv0",
-  label: "StyledRow"
-})("display:grid;", ({
-  theme,
-  gap,
-  alignItems = "normal",
-  templateColumns,
-  justifyContent = "normal",
-  padding
-}) => `
-
-    ${typeof templateColumns === "object" ? Object.entries(templateColumns).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                  grid-template-columns: ${value};
-                }`).join(" ") : `${templateColumns ? `grid-template-columns: ${templateColumns};` : ""}`}
-
-    ${gap && typeof gap === "object" ? Object.entries(gap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                gap: ${theme.space[value.toString()]};
-              }`).join(" ") : `${gap ? `gap: ${theme.space[gap]};` : ""}`}
-    ${alignItems && typeof alignItems === "object" ? Object.entries(alignItems).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                align-items: ${value};
-              }`).join(" ") : `${alignItems ? `align-items: ${alignItems};` : ""}`}
-    ${justifyContent && typeof justifyContent === "object" ? Object.entries(justifyContent).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                justify-content: ${value};
-              }`).join(" ") : `${justifyContent ? `justify-content: ${justifyContent};` : ""}`}
-    ${padding && typeof padding === "object" ? Object.entries(padding).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                padding: ${value};
-              }`).join(" ") : `${padding ? `padding: ${padding};` : ""}`}
-  `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1Jvdy9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Sb3cvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDU1NQcm9wZXJ0aWVzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgVWx0cmF2aW9sZXRVSVRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5cbnR5cGUgU3R5bGVkUm93UHJvcHMgPSBQaWNrPFxuICBSb3dQcm9wcyxcbiAgJ2dhcCcgfCAndGVtcGxhdGVDb2x1bW5zJyB8ICdhbGlnbkl0ZW1zJyB8ICdqdXN0aWZ5Q29udGVudCcgfCAncGFkZGluZydcbj5cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvdyA9IHN0eWxlZCgnZGl2Jywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbXG4gICAgICAndGVtcGxhdGVDb2x1bW5zJyxcbiAgICAgICdnYXAnLFxuICAgICAgJ2FsaWduSXRlbXMnLFxuICAgICAgJ2p1c3RpZnlDb250ZW50JyxcbiAgICAgICdwYWRkaW5nJyxcbiAgICBdLmluY2x1ZGVzKHByb3ApLFxufSk8U3R5bGVkUm93UHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICAkeyh7XG4gICAgdGhlbWUsXG4gICAgZ2FwLFxuICAgIGFsaWduSXRlbXMgPSAnbm9ybWFsJyxcbiAgICB0ZW1wbGF0ZUNvbHVtbnMsXG4gICAganVzdGlmeUNvbnRlbnQgPSAnbm9ybWFsJyxcbiAgICBwYWRkaW5nLFxuICB9KSA9PiBgXG5cbiAgICAke1xuICAgICAgdHlwZW9mIHRlbXBsYXRlQ29sdW1ucyA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyh0ZW1wbGF0ZUNvbHVtbnMpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHt0ZW1wbGF0ZUNvbHVtbnMgPyBgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAke3RlbXBsYXRlQ29sdW1uc307YCA6ICcnfWBcbiAgICB9XG5cbiAgICAke1xuICAgICAgZ2FwICYmIHR5cGVvZiBnYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoZ2FwKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBnYXA6ICR7dGhlbWUuc3BhY2VbdmFsdWUudG9TdHJpbmcoKSBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ3NwYWNlJ11dfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7Z2FwID8gYGdhcDogJHt0aGVtZS5zcGFjZVtnYXAgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydzcGFjZSddXX07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIGFsaWduSXRlbXMgJiYgdHlwZW9mIGFsaWduSXRlbXMgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoYWxpZ25JdGVtcylcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHthbGlnbkl0ZW1zID8gYGFsaWduLWl0ZW1zOiAke2FsaWduSXRlbXN9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBqdXN0aWZ5Q29udGVudCAmJiB0eXBlb2YganVzdGlmeUNvbnRlbnQgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoanVzdGlmeUNvbnRlbnQpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke2p1c3RpZnlDb250ZW50ID8gYGp1c3RpZnktY29udGVudDogJHtqdXN0aWZ5Q29udGVudH07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIHBhZGRpbmcgJiYgdHlwZW9mIHBhZGRpbmcgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMocGFkZGluZylcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgcGFkZGluZzogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke3BhZGRpbmcgPyBgcGFkZGluZzogJHtwYWRkaW5nfTtgIDogJyd9YFxuICAgIH1cbiAgYH1cbmBcblxudHlwZSBSb3dQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICB0ZW1wbGF0ZUNvbHVtbnM6XG4gICAgfCBzdHJpbmdcbiAgICB8IFBhcnRpYWw8UmVjb3JkPGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSwgc3RyaW5nPj5cbiAgZ2FwPzpcbiAgICB8IGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXVxuICAgIHwgbnVtYmVyXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXSB8IG51bWJlclxuICAgICAgICA+XG4gICAgICA+XG4gIGFsaWduSXRlbXM/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snYWxpZ25JdGVtcyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ2FsaWduSXRlbXMnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGp1c3RpZnlDb250ZW50PzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ2p1c3RpZnlDb250ZW50J11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snanVzdGlmeUNvbnRlbnQnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHBhZGRpbmc/OlxuICAgIHwgQ1NTUHJvcGVydGllc1sncGFkZGluZyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ3BhZGRpbmcnXVxuICAgICAgICA+XG4gICAgICA+XG59XG5cbi8qKlxuICogUm93IGNvbXBvbmVudCBpcyBhIHdyYXBwZXIgZm9yIGdyaWQgbGF5b3V0LlxuICovXG5leHBvcnQgY29uc3QgUm93ID0gKHtcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICBjaGlsZHJlbixcbiAgdGVtcGxhdGVDb2x1bW5zLFxuICBhbGlnbkl0ZW1zLFxuICBqdXN0aWZ5Q29udGVudCxcbiAgZ2FwLFxuICBwYWRkaW5nLFxufTogUm93UHJvcHMpID0+IChcbiAgPFN0eWxlZFJvd1xuICAgIGFsaWduSXRlbXM9e2FsaWduSXRlbXN9XG4gICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgZ2FwPXtnYXB9XG4gICAganVzdGlmeUNvbnRlbnQ9e2p1c3RpZnlDb250ZW50fVxuICAgIHBhZGRpbmc9e3BhZGRpbmd9XG4gICAgdGVtcGxhdGVDb2x1bW5zPXt0ZW1wbGF0ZUNvbHVtbnN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkUm93PlxuKVxuIl19 */"));
+import { consoleLightTheme } from "@ultraviolet/themes";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { row, sprinkles } from "./styles.css.js";
+import { paddings, templateColumn } from "./variables.css.js";
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
+  ...acc,
+  [key]: consoleLightTheme.space[object[key]]
+}), {}) : {};
 const Row = ({
   className,
   "data-testid": dataTestId,
@@ -43,8 +17,26 @@ const Row = ({
   justifyContent,
   gap,
   padding
-}) => /* @__PURE__ */ jsx(StyledRow, { alignItems, className, "data-testid": dataTestId, gap, justifyContent, padding, templateColumns, children });
+}) => /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${row} ${sprinkles({
+  alignItems: typeof alignItems === "object" ? alignItems : {
+    xxsmall: alignItems
+  },
+  gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
+    xxsmall: gap ? consoleLightTheme.space[gap] : void 0
+  },
+  justifyContent: typeof justifyContent === "object" ? justifyContent : {
+    xxsmall: justifyContent
+  }
+})}`, "data-testid": dataTestId, style: assignInlineVars({
+  ...Object.keys(templateColumn).reduce((acc, column) => ({
+    ...acc,
+    [templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
+  }), {}),
+  ...Object.keys(paddings).reduce((acc, localPadding) => ({
+    ...acc,
+    [paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
+  }), {})
+}), children });
 export {
-  Row,
-  StyledRow
+  Row
 };

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                               */
+;/* empty css                            */
+const createRuntimeSprinkles = require("@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 = createRuntimeSprinkles.createSprinkles(responsiveProperties);
+exports.responsiveProperties = responsiveProperties;
+exports.row = row;
+exports.sprinkles = sprinkles;