@choco-vanille/ui 1.1.0 → 1.1.2

package/dist/components/layout/box/styles/Box.css.js

@@ -0,0 +1,9 @@
+/* empty css                                            */
+/* empty css                                                */
+/* empty css                       */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+var _ = { recipe: e({ defaultClassName: "_1hizew70", variantClassNames: { borderRadius: { none: "_1hizew71", xs: "_1hizew72", sm: "_1hizew73", md: "_1hizew74", lg: "_1hizew75", xl: "_1hizew76", "2xl": "_1hizew77", full: "_1hizew78" }, padding: { none: "_1hizew79", px: "_1hizew7a", xxs: "_1hizew7b", xs: "_1hizew7c", xs2: "_1hizew7d", sm: "_1hizew7e", sm2: "_1hizew7f", md: "_1hizew7g", md2: "_1hizew7h", lg: "_1hizew7i", lg2: "_1hizew7j", xl: "_1hizew7k", "2xl": "_1hizew7l", "3xl": "_1hizew7m", "4xl": "_1hizew7n", "5xl": "_1hizew7o" }, paddingX: { none: "_1hizew7p", px: "_1hizew7q", xxs: "_1hizew7r", xs: "_1hizew7s", xs2: "_1hizew7t", sm: "_1hizew7u", sm2: "_1hizew7v", md: "_1hizew7w", md2: "_1hizew7x", lg: "_1hizew7y", lg2: "_1hizew7z", xl: "_1hizew710", "2xl": "_1hizew711", "3xl": "_1hizew712", "4xl": "_1hizew713", "5xl": "_1hizew714" }, paddingY: { none: "_1hizew715", px: "_1hizew716", xxs: "_1hizew717", xs: "_1hizew718", xs2: "_1hizew719", sm: "_1hizew71a", sm2: "_1hizew71b", md: "_1hizew71c", md2: "_1hizew71d", lg: "_1hizew71e", lg2: "_1hizew71f", xl: "_1hizew71g", "2xl": "_1hizew71h", "3xl": "_1hizew71i", "4xl": "_1hizew71j", "5xl": "_1hizew71k" }, paddingTop: { none: "_1hizew71l", px: "_1hizew71m", xxs: "_1hizew71n", xs: "_1hizew71o", xs2: "_1hizew71p", sm: "_1hizew71q", sm2: "_1hizew71r", md: "_1hizew71s", md2: "_1hizew71t", lg: "_1hizew71u", lg2: "_1hizew71v", xl: "_1hizew71w", "2xl": "_1hizew71x", "3xl": "_1hizew71y", "4xl": "_1hizew71z", "5xl": "_1hizew720" }, paddingRight: { none: "_1hizew721", px: "_1hizew722", xxs: "_1hizew723", xs: "_1hizew724", xs2: "_1hizew725", sm: "_1hizew726", sm2: "_1hizew727", md: "_1hizew728", md2: "_1hizew729", lg: "_1hizew72a", lg2: "_1hizew72b", xl: "_1hizew72c", "2xl": "_1hizew72d", "3xl": "_1hizew72e", "4xl": "_1hizew72f", "5xl": "_1hizew72g" }, paddingBottom: { none: "_1hizew72h", px: "_1hizew72i", xxs: "_1hizew72j", xs: "_1hizew72k", xs2: "_1hizew72l", sm: "_1hizew72m", sm2: "_1hizew72n", md: "_1hizew72o", md2: "_1hizew72p", lg: "_1hizew72q", lg2: "_1hizew72r", xl: "_1hizew72s", "2xl": "_1hizew72t", "3xl": "_1hizew72u", "4xl": "_1hizew72v", "5xl": "_1hizew72w" }, paddingLeft: { none: "_1hizew72x", px: "_1hizew72y", xxs: "_1hizew72z", xs: "_1hizew730", xs2: "_1hizew731", sm: "_1hizew732", sm2: "_1hizew733", md: "_1hizew734", md2: "_1hizew735", lg: "_1hizew736", lg2: "_1hizew737", xl: "_1hizew738", "2xl": "_1hizew739", "3xl": "_1hizew73a", "4xl": "_1hizew73b", "5xl": "_1hizew73c" }, margin: { auto: "_1hizew73d", none: "_1hizew73e", px: "_1hizew73f", xxs: "_1hizew73g", xs: "_1hizew73h", xs2: "_1hizew73i", sm: "_1hizew73j", sm2: "_1hizew73k", md: "_1hizew73l", md2: "_1hizew73m", lg: "_1hizew73n", lg2: "_1hizew73o", xl: "_1hizew73p", "2xl": "_1hizew73q", "3xl": "_1hizew73r", "4xl": "_1hizew73s", "5xl": "_1hizew73t" }, marginX: { auto: "_1hizew73u", none: "_1hizew73v", px: "_1hizew73w", xxs: "_1hizew73x", xs: "_1hizew73y", xs2: "_1hizew73z", sm: "_1hizew740", sm2: "_1hizew741", md: "_1hizew742", md2: "_1hizew743", lg: "_1hizew744", lg2: "_1hizew745", xl: "_1hizew746", "2xl": "_1hizew747", "3xl": "_1hizew748", "4xl": "_1hizew749", "5xl": "_1hizew74a" }, marginY: { auto: "_1hizew74b", none: "_1hizew74c", px: "_1hizew74d", xxs: "_1hizew74e", xs: "_1hizew74f", xs2: "_1hizew74g", sm: "_1hizew74h", sm2: "_1hizew74i", md: "_1hizew74j", md2: "_1hizew74k", lg: "_1hizew74l", lg2: "_1hizew74m", xl: "_1hizew74n", "2xl": "_1hizew74o", "3xl": "_1hizew74p", "4xl": "_1hizew74q", "5xl": "_1hizew74r" }, marginTop: { auto: "_1hizew74s", none: "_1hizew74t", px: "_1hizew74u", xxs: "_1hizew74v", xs: "_1hizew74w", xs2: "_1hizew74x", sm: "_1hizew74y", sm2: "_1hizew74z", md: "_1hizew750", md2: "_1hizew751", lg: "_1hizew752", lg2: "_1hizew753", xl: "_1hizew754", "2xl": "_1hizew755", "3xl": "_1hizew756", "4xl": "_1hizew757", "5xl": "_1hizew758" }, marginRight: { auto: "_1hizew759", none: "_1hizew75a", px: "_1hizew75b", xxs: "_1hizew75c", xs: "_1hizew75d", xs2: "_1hizew75e", sm: "_1hizew75f", sm2: "_1hizew75g", md: "_1hizew75h", md2: "_1hizew75i", lg: "_1hizew75j", lg2: "_1hizew75k", xl: "_1hizew75l", "2xl": "_1hizew75m", "3xl": "_1hizew75n", "4xl": "_1hizew75o", "5xl": "_1hizew75p" }, marginBottom: { auto: "_1hizew75q", none: "_1hizew75r", px: "_1hizew75s", xxs: "_1hizew75t", xs: "_1hizew75u", xs2: "_1hizew75v", sm: "_1hizew75w", sm2: "_1hizew75x", md: "_1hizew75y", md2: "_1hizew75z", lg: "_1hizew760", lg2: "_1hizew761", xl: "_1hizew762", "2xl": "_1hizew763", "3xl": "_1hizew764", "4xl": "_1hizew765", "5xl": "_1hizew766" }, marginLeft: { auto: "_1hizew767", none: "_1hizew768", px: "_1hizew769", xxs: "_1hizew76a", xs: "_1hizew76b", xs2: "_1hizew76c", sm: "_1hizew76d", sm2: "_1hizew76e", md: "_1hizew76f", md2: "_1hizew76g", lg: "_1hizew76h", lg2: "_1hizew76i", xl: "_1hizew76j", "2xl": "_1hizew76k", "3xl": "_1hizew76l", "4xl": "_1hizew76m", "5xl": "_1hizew76n" }, gap: { none: "_1hizew76o", px: "_1hizew76p", xxs: "_1hizew76q", xs: "_1hizew76r", xs2: "_1hizew76s", sm: "_1hizew76t", sm2: "_1hizew76u", md: "_1hizew76v", md2: "_1hizew76w", lg: "_1hizew76x", lg2: "_1hizew76y", xl: "_1hizew76z", "2xl": "_1hizew770", "3xl": "_1hizew771", "4xl": "_1hizew772", "5xl": "_1hizew773" }, columnGap: { none: "_1hizew774", px: "_1hizew775", xxs: "_1hizew776", xs: "_1hizew777", xs2: "_1hizew778", sm: "_1hizew779", sm2: "_1hizew77a", md: "_1hizew77b", md2: "_1hizew77c", lg: "_1hizew77d", lg2: "_1hizew77e", xl: "_1hizew77f", "2xl": "_1hizew77g", "3xl": "_1hizew77h", "4xl": "_1hizew77i", "5xl": "_1hizew77j" }, rowGap: { none: "_1hizew77k", px: "_1hizew77l", xxs: "_1hizew77m", xs: "_1hizew77n", xs2: "_1hizew77o", sm: "_1hizew77p", sm2: "_1hizew77q", md: "_1hizew77r", md2: "_1hizew77s", lg: "_1hizew77t", lg2: "_1hizew77u", xl: "_1hizew77v", "2xl": "_1hizew77w", "3xl": "_1hizew77x", "4xl": "_1hizew77y", "5xl": "_1hizew77z" }, borderColor: { background: "_1hizew780", foreground: "_1hizew781", text: "_1hizew782", textSecondary: "_1hizew783", textTertiary: "_1hizew784", card: "_1hizew785", cardForeground: "_1hizew786", popover: "_1hizew787", popoverForeground: "_1hizew788", muted: "_1hizew789", mutedForeground: "_1hizew78a", overlay: "_1hizew78b", primary: "_1hizew78c", primaryHover: "_1hizew78d", primaryActive: "_1hizew78e", primaryForeground: "_1hizew78f", primarySubtle: "_1hizew78g", primarySubtleHover: "_1hizew78h", primarySubtleActive: "_1hizew78i", primarySubtleForeground: "_1hizew78j", primarySubtleBorder: "_1hizew78k", link: "_1hizew78l", linkHover: "_1hizew78m", linkActive: "_1hizew78n", secondary: "_1hizew78o", secondaryHover: "_1hizew78p", secondaryActive: "_1hizew78q", secondaryForeground: "_1hizew78r", secondarySubtle: "_1hizew78s", secondarySubtleHover: "_1hizew78t", secondarySubtleActive: "_1hizew78u", secondarySubtleForeground: "_1hizew78v", secondarySubtleBorder: "_1hizew78w", tertiary: "_1hizew78x", tertiaryHover: "_1hizew78y", tertiaryActive: "_1hizew78z", tertiaryForeground: "_1hizew790", tertiarySubtle: "_1hizew791", tertiarySubtleHover: "_1hizew792", tertiarySubtleActive: "_1hizew793", tertiarySubtleForeground: "_1hizew794", tertiarySubtleBorder: "_1hizew795", success: "_1hizew796", successHover: "_1hizew797", successActive: "_1hizew798", successForeground: "_1hizew799", successSubtle: "_1hizew79a", successSubtleHover: "_1hizew79b", successSubtleActive: "_1hizew79c", successSubtleForeground: "_1hizew79d", successSubtleBorder: "_1hizew79e", warning: "_1hizew79f", warningHover: "_1hizew79g", warningActive: "_1hizew79h", warningForeground: "_1hizew79i", warningSubtle: "_1hizew79j", warningSubtleHover: "_1hizew79k", warningSubtleActive: "_1hizew79l", warningSubtleForeground: "_1hizew79m", warningSubtleBorder: "_1hizew79n", info: "_1hizew79o", infoHover: "_1hizew79p", infoActive: "_1hizew79q", infoForeground: "_1hizew79r", infoSubtle: "_1hizew79s", infoSubtleHover: "_1hizew79t", infoSubtleActive: "_1hizew79u", infoSubtleForeground: "_1hizew79v", infoSubtleBorder: "_1hizew79w", destructive: "_1hizew79x", destructiveHover: "_1hizew79y", destructiveActive: "_1hizew79z", destructiveForeground: "_1hizew7a0", destructiveSubtle: "_1hizew7a1", destructiveSubtleHover: "_1hizew7a2", destructiveSubtleActive: "_1hizew7a3", destructiveSubtleForeground: "_1hizew7a4", destructiveSubtleBorder: "_1hizew7a5", purple: "_1hizew7a6", purpleHover: "_1hizew7a7", purpleActive: "_1hizew7a8", purpleForeground: "_1hizew7a9", purpleSubtle: "_1hizew7aa", purpleSubtleHover: "_1hizew7ab", purpleSubtleActive: "_1hizew7ac", purpleSubtleForeground: "_1hizew7ad", purpleSubtleBorder: "_1hizew7ae", pink: "_1hizew7af", pinkHover: "_1hizew7ag", pinkActive: "_1hizew7ah", pinkForeground: "_1hizew7ai", pinkSubtle: "_1hizew7aj", pinkSubtleHover: "_1hizew7ak", pinkSubtleActive: "_1hizew7al", pinkSubtleForeground: "_1hizew7am", pinkSubtleBorder: "_1hizew7an", orange: "_1hizew7ao", orangeHover: "_1hizew7ap", orangeActive: "_1hizew7aq", orangeForeground: "_1hizew7ar", orangeSubtle: "_1hizew7as", orangeSubtleHover: "_1hizew7at", orangeSubtleActive: "_1hizew7au", orangeSubtleForeground: "_1hizew7av", orangeSubtleBorder: "_1hizew7aw", teal: "_1hizew7ax", tealHover: "_1hizew7ay", tealActive: "_1hizew7az", tealForeground: "_1hizew7b0", tealSubtle: "_1hizew7b1", tealSubtleHover: "_1hizew7b2", tealSubtleActive: "_1hizew7b3", tealSubtleForeground: "_1hizew7b4", tealSubtleBorder: "_1hizew7b5", cyan: "_1hizew7b6", cyanHover: "_1hizew7b7", cyanActive: "_1hizew7b8", cyanForeground: "_1hizew7b9", cyanSubtle: "_1hizew7ba", cyanSubtleHover: "_1hizew7bb", cyanSubtleActive: "_1hizew7bc", cyanSubtleForeground: "_1hizew7bd", cyanSubtleBorder: "_1hizew7be", indigo: "_1hizew7bf", indigoHover: "_1hizew7bg", indigoActive: "_1hizew7bh", indigoForeground: "_1hizew7bi", indigoSubtle: "_1hizew7bj", indigoSubtleHover: "_1hizew7bk", indigoSubtleActive: "_1hizew7bl", indigoSubtleForeground: "_1hizew7bm", indigoSubtleBorder: "_1hizew7bn", border: "_1hizew7bo", borderStrong: "_1hizew7bp", input: "_1hizew7bq", ring: "_1hizew7br", highlight: "_1hizew7bs", highlightForeground: "_1hizew7bt", skeleton: "_1hizew7bu", skeletonForeground: "_1hizew7bv", transparent: "_1hizew7bw" }, backgroundColor: { background: "_1hizew7bx", foreground: "_1hizew7by", text: "_1hizew7bz", textSecondary: "_1hizew7c0", textTertiary: "_1hizew7c1", card: "_1hizew7c2", cardForeground: "_1hizew7c3", popover: "_1hizew7c4", popoverForeground: "_1hizew7c5", muted: "_1hizew7c6", mutedForeground: "_1hizew7c7", overlay: "_1hizew7c8", primary: "_1hizew7c9", primaryHover: "_1hizew7ca", primaryActive: "_1hizew7cb", primaryForeground: "_1hizew7cc", primarySubtle: "_1hizew7cd", primarySubtleHover: "_1hizew7ce", primarySubtleActive: "_1hizew7cf", primarySubtleForeground: "_1hizew7cg", primarySubtleBorder: "_1hizew7ch", link: "_1hizew7ci", linkHover: "_1hizew7cj", linkActive: "_1hizew7ck", secondary: "_1hizew7cl", secondaryHover: "_1hizew7cm", secondaryActive: "_1hizew7cn", secondaryForeground: "_1hizew7co", secondarySubtle: "_1hizew7cp", secondarySubtleHover: "_1hizew7cq", secondarySubtleActive: "_1hizew7cr", secondarySubtleForeground: "_1hizew7cs", secondarySubtleBorder: "_1hizew7ct", tertiary: "_1hizew7cu", tertiaryHover: "_1hizew7cv", tertiaryActive: "_1hizew7cw", tertiaryForeground: "_1hizew7cx", tertiarySubtle: "_1hizew7cy", tertiarySubtleHover: "_1hizew7cz", tertiarySubtleActive: "_1hizew7d0", tertiarySubtleForeground: "_1hizew7d1", tertiarySubtleBorder: "_1hizew7d2", success: "_1hizew7d3", successHover: "_1hizew7d4", successActive: "_1hizew7d5", successForeground: "_1hizew7d6", successSubtle: "_1hizew7d7", successSubtleHover: "_1hizew7d8", successSubtleActive: "_1hizew7d9", successSubtleForeground: "_1hizew7da", successSubtleBorder: "_1hizew7db", warning: "_1hizew7dc", warningHover: "_1hizew7dd", warningActive: "_1hizew7de", warningForeground: "_1hizew7df", warningSubtle: "_1hizew7dg", warningSubtleHover: "_1hizew7dh", warningSubtleActive: "_1hizew7di", warningSubtleForeground: "_1hizew7dj", warningSubtleBorder: "_1hizew7dk", info: "_1hizew7dl", infoHover: "_1hizew7dm", infoActive: "_1hizew7dn", infoForeground: "_1hizew7do", infoSubtle: "_1hizew7dp", infoSubtleHover: "_1hizew7dq", infoSubtleActive: "_1hizew7dr", infoSubtleForeground: "_1hizew7ds", infoSubtleBorder: "_1hizew7dt", destructive: "_1hizew7du", destructiveHover: "_1hizew7dv", destructiveActive: "_1hizew7dw", destructiveForeground: "_1hizew7dx", destructiveSubtle: "_1hizew7dy", destructiveSubtleHover: "_1hizew7dz", destructiveSubtleActive: "_1hizew7e0", destructiveSubtleForeground: "_1hizew7e1", destructiveSubtleBorder: "_1hizew7e2", purple: "_1hizew7e3", purpleHover: "_1hizew7e4", purpleActive: "_1hizew7e5", purpleForeground: "_1hizew7e6", purpleSubtle: "_1hizew7e7", purpleSubtleHover: "_1hizew7e8", purpleSubtleActive: "_1hizew7e9", purpleSubtleForeground: "_1hizew7ea", purpleSubtleBorder: "_1hizew7eb", pink: "_1hizew7ec", pinkHover: "_1hizew7ed", pinkActive: "_1hizew7ee", pinkForeground: "_1hizew7ef", pinkSubtle: "_1hizew7eg", pinkSubtleHover: "_1hizew7eh", pinkSubtleActive: "_1hizew7ei", pinkSubtleForeground: "_1hizew7ej", pinkSubtleBorder: "_1hizew7ek", orange: "_1hizew7el", orangeHover: "_1hizew7em", orangeActive: "_1hizew7en", orangeForeground: "_1hizew7eo", orangeSubtle: "_1hizew7ep", orangeSubtleHover: "_1hizew7eq", orangeSubtleActive: "_1hizew7er", orangeSubtleForeground: "_1hizew7es", orangeSubtleBorder: "_1hizew7et", teal: "_1hizew7eu", tealHover: "_1hizew7ev", tealActive: "_1hizew7ew", tealForeground: "_1hizew7ex", tealSubtle: "_1hizew7ey", tealSubtleHover: "_1hizew7ez", tealSubtleActive: "_1hizew7f0", tealSubtleForeground: "_1hizew7f1", tealSubtleBorder: "_1hizew7f2", cyan: "_1hizew7f3", cyanHover: "_1hizew7f4", cyanActive: "_1hizew7f5", cyanForeground: "_1hizew7f6", cyanSubtle: "_1hizew7f7", cyanSubtleHover: "_1hizew7f8", cyanSubtleActive: "_1hizew7f9", cyanSubtleForeground: "_1hizew7fa", cyanSubtleBorder: "_1hizew7fb", indigo: "_1hizew7fc", indigoHover: "_1hizew7fd", indigoActive: "_1hizew7fe", indigoForeground: "_1hizew7ff", indigoSubtle: "_1hizew7fg", indigoSubtleHover: "_1hizew7fh", indigoSubtleActive: "_1hizew7fi", indigoSubtleForeground: "_1hizew7fj", indigoSubtleBorder: "_1hizew7fk", border: "_1hizew7fl", borderStrong: "_1hizew7fm", input: "_1hizew7fn", ring: "_1hizew7fo", highlight: "_1hizew7fp", highlightForeground: "_1hizew7fq", skeleton: "_1hizew7fr", skeletonForeground: "_1hizew7fs", transparent: "_1hizew7ft" }, boxShadow: { none: "_1hizew7fu", xs: "_1hizew7fv", sm: "_1hizew7fw", md: "_1hizew7fx", lg: "_1hizew7fy", xl: "_1hizew7fz", "2xl": "_1hizew7g0", inner: "_1hizew7g1" } }, defaultVariants: {}, compoundVariants: [] }) };
+export {
+  _ as BOX_STYLES
+};
+//# sourceMappingURL=Box.css.js.map

package/dist/components/layout/box/styles/Box.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/layout/box/types/Box.props.d.ts

@@ -0,0 +1,98 @@
+import { CSSProperties, HTMLAttributes, RefAttributes } from 'react';
+import { BoxRecipeVariants } from '../styles/Box.css.ts';
+import { BoxVariant } from './Box.types.ts';
+import type * as React from 'react';
+export type BoxProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+    /** The HTML element to render. Defaults to `div`. */
+    as?: BoxVariant | React.ElementType;
+    /** The CSS `display` value of the element. */
+    display?: CSSProperties['display'];
+    /** The CSS `width` of the element. */
+    width?: CSSProperties['width'];
+    /** The CSS `min-width` of the element. */
+    minWidth?: CSSProperties['minWidth'];
+    /** The CSS `max-width` of the element. */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** The CSS `height` of the element. */
+    height?: CSSProperties['height'];
+    /** The CSS `min-height` of the element. */
+    minHeight?: CSSProperties['minHeight'];
+    /** The CSS `max-height` of the element. */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** The CSS `overflow` value of the element. */
+    overflow?: CSSProperties['overflow'];
+    /** The CSS `overflow-x` value of the element. */
+    overflowX?: CSSProperties['overflowX'];
+    /** The CSS `overflow-y` value of the element. */
+    overflowY?: CSSProperties['overflowY'];
+    /** The CSS `position` value of the element. */
+    position?: CSSProperties['position'];
+    /** The CSS `flex` shorthand value of the element. */
+    flex?: CSSProperties['flex'];
+    /** The CSS `flex-direction` value of the element. */
+    flexDirection?: CSSProperties['flexDirection'];
+    /** The CSS `flex-wrap` value of the element. */
+    flexWrap?: CSSProperties['flexWrap'];
+    /** The CSS `align-self` value of the element. */
+    alignSelf?: CSSProperties['alignSelf'];
+    /** The CSS `align-items` value of the element. */
+    alignItems?: CSSProperties['alignItems'];
+    /** The CSS `align-content` value of the element. */
+    alignContent?: CSSProperties['alignContent'];
+    /** The CSS `justify-content` value of the element. */
+    justifyContent?: CSSProperties['justifyContent'];
+    /** The CSS `border-width` value of the element. */
+    borderWidth?: CSSProperties['borderWidth'];
+    /** The CSS `border-top-width` value of the element. */
+    borderTopWidth?: CSSProperties['borderTopWidth'];
+    /** The CSS `border-right-width` value of the element. */
+    borderRightWidth?: CSSProperties['borderRightWidth'];
+    /** The CSS `border-bottom-width` value of the element. */
+    borderBottomWidth?: CSSProperties['borderBottomWidth'];
+    /** The CSS `border-left-width` value of the element. */
+    borderLeftWidth?: CSSProperties['borderLeftWidth'];
+    /** The CSS `border-style` value of the element. */
+    borderStyle?: CSSProperties['borderStyle'];
+    /** The border radius token applied to the element. */
+    borderRadius?: BoxRecipeVariants['borderRadius'];
+    /** The padding token applied to all sides of the element. */
+    padding?: BoxRecipeVariants['padding'];
+    /** The padding token applied to the inline (horizontal) axis of the element. */
+    paddingX?: BoxRecipeVariants['paddingX'];
+    /** The padding token applied to the block (vertical) axis of the element. */
+    paddingY?: BoxRecipeVariants['paddingY'];
+    /** The padding token applied to the top of the element. */
+    paddingTop?: BoxRecipeVariants['paddingTop'];
+    /** The padding token applied to the right of the element. */
+    paddingRight?: BoxRecipeVariants['paddingRight'];
+    /** The padding token applied to the bottom of the element. */
+    paddingBottom?: BoxRecipeVariants['paddingBottom'];
+    /** The padding token applied to the left of the element. */
+    paddingLeft?: BoxRecipeVariants['paddingLeft'];
+    /** The margin token applied to all sides of the element. Supports `auto`. */
+    margin?: BoxRecipeVariants['margin'];
+    /** The margin token applied to the inline (horizontal) axis of the element. Supports `auto`. */
+    marginX?: BoxRecipeVariants['marginX'];
+    /** The margin token applied to the block (vertical) axis of the element. Supports `auto`. */
+    marginY?: BoxRecipeVariants['marginY'];
+    /** The margin token applied to the top of the element. Supports `auto`. */
+    marginTop?: BoxRecipeVariants['marginTop'];
+    /** The margin token applied to the right of the element. Supports `auto`. */
+    marginRight?: BoxRecipeVariants['marginRight'];
+    /** The margin token applied to the bottom of the element. Supports `auto`. */
+    marginBottom?: BoxRecipeVariants['marginBottom'];
+    /** The margin token applied to the left of the element. Supports `auto`. */
+    marginLeft?: BoxRecipeVariants['marginLeft'];
+    /** The gap token between flex or grid children. */
+    gap?: BoxRecipeVariants['gap'];
+    /** The column gap token between flex or grid children. */
+    columnGap?: BoxRecipeVariants['columnGap'];
+    /** The row gap token between flex or grid children. */
+    rowGap?: BoxRecipeVariants['rowGap'];
+    /** The theme color token applied to the element's border color. */
+    borderColor?: BoxRecipeVariants['borderColor'];
+    /** The theme color token applied to the element's background color. */
+    backgroundColor?: BoxRecipeVariants['backgroundColor'];
+    /** The shadow token applied to the element. */
+    boxShadow?: BoxRecipeVariants['boxShadow'];
+};

package/dist/components/layout/box/types/Box.types.d.ts

@@ -0,0 +1,2 @@
+/** HTML container elements supported by the Box component. */
+export type BoxVariant = 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'li' | 'form' | 'fieldset' | 'figure' | 'figcaption' | 'details' | 'summary' | 'dialog' | 'address' | 'span';

package/dist/components/layout/fieldset/Fieldset.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),n=require("./styles/Fieldset.css.cjs"),a=require("../../../utils/cn.cjs"),e=require("react"),s=e.memo(e.forwardRef(({className:t,children:r,...c},i)=>o.jsx("fieldset",{ref:i,className:a.cn(n.FIELDSET_STYLES.root,t),...c,children:r})));s.displayName="Fieldset";module.exports=s;
+//# sourceMappingURL=Fieldset.cjs.map

package/dist/components/layout/fieldset/Fieldset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.cjs","sources":["../../../../src/components/layout/fieldset/Fieldset.tsx"],"sourcesContent":["import { FIELDSET_STYLES } from '@components/layout/fieldset/styles/Fieldset.css.ts'\r\nimport type { FieldsetProps } from '@components/layout/fieldset/types/Fieldset.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { forwardRef, memo } from 'react'\r\n\r\n/**\r\n * A thin wrapper around the native `<fieldset>` element.\r\n *\r\n * Fieldsets group related form controls and are required for accessible\r\n * labeling of radio groups, checkbox groups, and any other set of controls\r\n * that share a single question or purpose. Pair it with `Legend` to provide\r\n * the group label.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Fieldset>\r\n *   <Legend>Choose a plan</Legend>\r\n *   <RadioGroup>\r\n *     <RadioGroup.Item value=\"starter\" label=\"Starter\" />\r\n *     <RadioGroup.Item value=\"pro\" label=\"Pro\" />\r\n *   </RadioGroup>\r\n * </Fieldset>\r\n * ```\r\n */\r\nconst Fieldset = memo(forwardRef<HTMLFieldSetElement, FieldsetProps>(\r\n    ({ className, children, ...props }, ref) => (\r\n        <fieldset\r\n            ref={ref}\r\n            className={cn(FIELDSET_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </fieldset>\r\n    ),\r\n))\r\n\r\nFieldset.displayName = 'Fieldset'\r\n\r\nexport default Fieldset\r\n"],"names":["Fieldset","memo","forwardRef","className","children","props","ref","jsx","cn","FIELDSET_STYLES"],"mappings":"+IAwBMA,EAAWC,EAAAA,KAAKC,EAAAA,WAClB,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAChCC,EAAAA,IAAC,WAAA,CACG,IAAAD,EACA,UAAWE,EAAAA,GAAGC,kBAAgB,KAAMN,CAAS,EAC5C,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGb,CAAC,EAEDJ,EAAS,YAAc"}

package/dist/components/layout/fieldset/Fieldset.d.ts

@@ -0,0 +1,23 @@
+import { FieldsetProps } from './types/Fieldset.props.ts';
+import { NamedExoticComponent, RefAttributes } from 'react';
+/**
+ * A thin wrapper around the native `<fieldset>` element.
+ *
+ * Fieldsets group related form controls and are required for accessible
+ * labeling of radio groups, checkbox groups, and any other set of controls
+ * that share a single question or purpose. Pair it with `Legend` to provide
+ * the group label.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>Choose a plan</Legend>
+ *   <RadioGroup>
+ *     <RadioGroup.Item value="starter" label="Starter" />
+ *     <RadioGroup.Item value="pro" label="Pro" />
+ *   </RadioGroup>
+ * </Fieldset>
+ * ```
+ */
+declare const Fieldset: NamedExoticComponent<Omit<FieldsetProps, "ref"> & RefAttributes<HTMLFieldSetElement>>;
+export default Fieldset;

package/dist/components/layout/fieldset/Fieldset.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { FIELDSET_STYLES as s } from "./styles/Fieldset.css.js";
+import { cn as f } from "../../../utils/cn.js";
+import { memo as i, forwardRef as a } from "react";
+const d = i(a(
+  ({ className: o, children: e, ...m }, r) => /* @__PURE__ */ t(
+    "fieldset",
+    {
+      ref: r,
+      className: f(s.root, o),
+      ...m,
+      children: e
+    }
+  )
+));
+d.displayName = "Fieldset";
+export {
+  d as default
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/layout/fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../../src/components/layout/fieldset/Fieldset.tsx"],"sourcesContent":["import { FIELDSET_STYLES } from '@components/layout/fieldset/styles/Fieldset.css.ts'\r\nimport type { FieldsetProps } from '@components/layout/fieldset/types/Fieldset.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { forwardRef, memo } from 'react'\r\n\r\n/**\r\n * A thin wrapper around the native `<fieldset>` element.\r\n *\r\n * Fieldsets group related form controls and are required for accessible\r\n * labeling of radio groups, checkbox groups, and any other set of controls\r\n * that share a single question or purpose. Pair it with `Legend` to provide\r\n * the group label.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Fieldset>\r\n *   <Legend>Choose a plan</Legend>\r\n *   <RadioGroup>\r\n *     <RadioGroup.Item value=\"starter\" label=\"Starter\" />\r\n *     <RadioGroup.Item value=\"pro\" label=\"Pro\" />\r\n *   </RadioGroup>\r\n * </Fieldset>\r\n * ```\r\n */\r\nconst Fieldset = memo(forwardRef<HTMLFieldSetElement, FieldsetProps>(\r\n    ({ className, children, ...props }, ref) => (\r\n        <fieldset\r\n            ref={ref}\r\n            className={cn(FIELDSET_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </fieldset>\r\n    ),\r\n))\r\n\r\nFieldset.displayName = 'Fieldset'\r\n\r\nexport default Fieldset\r\n"],"names":["Fieldset","memo","forwardRef","className","children","props","ref","jsx","cn","FIELDSET_STYLES"],"mappings":";;;;AAwBA,MAAMA,IAAWC,EAAKC;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAChC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,WAAWE,EAAGC,EAAgB,MAAMN,CAAS;AAAA,MAC5C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDJ,EAAS,cAAc;"}

package/dist/components/layout/fieldset/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Fieldset } from './Fieldset.tsx';
+export { FIELDSET_STYLES } from './styles/Fieldset.css.ts';
+export type { FieldsetProps } from './types/Fieldset.props.ts';

package/dist/components/layout/fieldset/styles/Fieldset.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                              */var e={root:"_13in8qw0"};exports.FIELDSET_STYLES=e;
+//# sourceMappingURL=Fieldset.css.cjs.map

package/dist/components/layout/fieldset/styles/Fieldset.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout/fieldset/styles/Fieldset.css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Minimal reset for the fieldset element.
+ *
+ * Browsers render a visible border and non-zero padding on `<fieldset>` by
+ * default. We remove those so the component is visually neutral while keeping
+ * its semantic and accessibility behavior.
+ */
+export declare const FIELDSET_STYLES: {
+    root: string;
+};

package/dist/components/layout/fieldset/styles/Fieldset.css.js

@@ -0,0 +1,6 @@
+/* empty css                            */
+var r = { root: "_13in8qw0" };
+export {
+  r as FIELDSET_STYLES
+};
+//# sourceMappingURL=Fieldset.css.js.map

package/dist/components/layout/fieldset/styles/Fieldset.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/layout/fieldset/types/Fieldset.props.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+/** Props for the Fieldset component. Inherits all native `<fieldset>` attributes and a forwarded ref. */
+export type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement> & React.RefAttributes<HTMLFieldSetElement>;

package/dist/components/layout/flex/Flex.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("./styles/Flex.css.cjs"),o=require("../../../utils/cn.cjs"),u=require("react"),x=require("../box/Box.cjs"),e=u.memo(({inline:s,gap:r="sm",className:c,...t})=>n.jsx(x,{gap:r,className:o.cn(i.FLEX_STYLES.recipe({inline:s}),c),...t}));e.displayName="Flex";module.exports=e;
+//# sourceMappingURL=Flex.cjs.map

package/dist/components/layout/flex/Flex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.cjs","sources":["../../../../src/components/layout/flex/Flex.tsx"],"sourcesContent":["import { FLEX_STYLES } from '@components/layout/flex/styles/Flex.css.ts'\r\nimport type { FlexProps } from '@components/layout/flex/types/Flex.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport Box from '@components/layout/box/Box.tsx'\r\n\r\nconst Flex: FC<FlexProps> = memo(({\r\n    inline,\r\n    gap = 'sm',\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            gap={gap}\r\n            className={cn(FLEX_STYLES.recipe({ inline }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nFlex.displayName = 'Flex'\r\n\r\nexport default Flex\r\n"],"names":["Flex","memo","inline","gap","className","props","jsx","Box","cn","FLEX_STYLES"],"mappings":"uKAOMA,EAAsBC,EAAAA,KAAK,CAAC,CAC9B,OAAAC,EACA,IAAAC,EAAM,KACN,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GAAGC,cAAY,OAAO,CAAE,OAAAP,CAAA,CAAQ,EAAGE,CAAS,EACtD,GAAGC,CAAA,CAAA,CAGf,EAEDL,EAAK,YAAc"}

package/dist/components/layout/flex/Flex.d.ts

@@ -0,0 +1,4 @@
+import { FlexProps } from './types/Flex.props.ts';
+import { FC } from 'react';
+declare const Flex: FC<FlexProps>;
+export default Flex;

package/dist/components/layout/flex/Flex.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { FLEX_STYLES as p } from "./styles/Flex.css.js";
+import { cn as i } from "../../../utils/cn.js";
+import { memo as s } from "react";
+import a from "../box/Box.js";
+const f = s(({
+  inline: m,
+  gap: o = "sm",
+  className: r,
+  ...e
+}) => /* @__PURE__ */ t(
+  a,
+  {
+    gap: o,
+    className: i(p.recipe({ inline: m }), r),
+    ...e
+  }
+));
+f.displayName = "Flex";
+export {
+  f as default
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/layout/flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../src/components/layout/flex/Flex.tsx"],"sourcesContent":["import { FLEX_STYLES } from '@components/layout/flex/styles/Flex.css.ts'\r\nimport type { FlexProps } from '@components/layout/flex/types/Flex.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport Box from '@components/layout/box/Box.tsx'\r\n\r\nconst Flex: FC<FlexProps> = memo(({\r\n    inline,\r\n    gap = 'sm',\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            gap={gap}\r\n            className={cn(FLEX_STYLES.recipe({ inline }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nFlex.displayName = 'Flex'\r\n\r\nexport default Flex\r\n"],"names":["Flex","memo","inline","gap","className","props","jsx","Box","cn","FLEX_STYLES"],"mappings":";;;;;AAOA,MAAMA,IAAsBC,EAAK,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,KAAAJ;AAAA,IACA,WAAWK,EAAGC,EAAY,OAAO,EAAE,QAAAP,EAAA,CAAQ,GAAGE,CAAS;AAAA,IACtD,GAAGC;AAAA,EAAA;AAAA,CAGf;AAEDL,EAAK,cAAc;"}

package/dist/components/layout/flex/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Flex } from './Flex.tsx';
+export { FLEX_STYLES } from './styles/Flex.css.ts';
+export type { FlexRecipeVariants } from './styles/Flex.css.ts';
+export type { FlexProps } from './types/Flex.props.ts';
+export type { FlexDirection, FlexWrap, FlexAlign, FlexJustify } from './types/Flex.types.ts';

package/dist/components/layout/flex/styles/Flex.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                          */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1pj7eko0",variantClassNames:{inline:{true:"_1pj7eko1"}},defaultVariants:{},compoundVariants:[]})};exports.FLEX_STYLES=a;
+//# sourceMappingURL=Flex.css.cjs.map

package/dist/components/layout/flex/styles/Flex.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout/flex/styles/Flex.css.d.ts

@@ -0,0 +1,11 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+export declare const FLEX_STYLES: {
+    recipe: RuntimeFn<{
+        inline: {
+            true: {
+                display: "inline-flex";
+            };
+        };
+    }>;
+};
+export type FlexRecipeVariants = NonNullable<RecipeVariants<typeof FLEX_STYLES.recipe>>;

package/dist/components/layout/flex/styles/Flex.css.js

@@ -0,0 +1,7 @@
+/* empty css                        */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var t = { recipe: a({ defaultClassName: "_1pj7eko0", variantClassNames: { inline: { true: "_1pj7eko1" } }, defaultVariants: {}, compoundVariants: [] }) };
+export {
+  t as FLEX_STYLES
+};
+//# sourceMappingURL=Flex.css.js.map

package/dist/components/layout/flex/styles/Flex.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/layout/flex/types/Flex.props.d.ts

@@ -0,0 +1,6 @@
+import { FlexRecipeVariants } from '../styles/Flex.css.ts';
+import { BoxProps } from '../../box/types/Box.props.ts';
+export type FlexProps = Omit<BoxProps, 'display'> & {
+    /** Renders the flex container as `inline-flex` instead of `flex`. */
+    inline?: FlexRecipeVariants['inline'];
+};

package/dist/components/layout/flex/types/Flex.types.d.ts

@@ -0,0 +1,8 @@
+/** flex-direction values for the Flex component. */
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+/** flex-wrap values for the Flex component. */
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+/** align-items values for the Flex component. */
+export type FlexAlign = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+/** justify-content values for the Flex component. */
+export type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';

package/dist/components/layout/form/Form.cjs

@@ -0,0 +1,2 @@
+"use strict";const m=require("react/jsx-runtime"),n=require("./styles/Form.css.cjs"),i=require("../../../utils/cn.cjs"),r=require("react"),e=r.memo(r.forwardRef(({className:s,children:o,...c},t)=>m.jsx("form",{ref:t,className:i.cn(n.FORM_STYLES.root,s),...c,children:o})));e.displayName="Form";module.exports=e;
+//# sourceMappingURL=Form.cjs.map

package/dist/components/layout/form/Form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.cjs","sources":["../../../../src/components/layout/form/Form.tsx"],"sourcesContent":["import { FORM_STYLES } from '@components/layout/form/styles/Form.css.ts'\r\nimport type { FormProps } from '@components/layout/form/types/Form.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { forwardRef, memo } from 'react'\r\n\r\n/**\r\n * A thin, unstyled wrapper around the native `<form>` element.\r\n *\r\n * Use it as the root of any form so assistive technology can identify the\r\n * form boundary, and so you have a consistent place to handle submission\r\n * and validation behavior.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Form onSubmit={handleSubmit}>\r\n *   <TextField label=\"Email\" />\r\n *   <Button type=\"submit\" label=\"Send\" />\r\n * </Form>\r\n * ```\r\n */\r\nconst Form = memo(forwardRef<HTMLFormElement, FormProps>(\r\n    ({ className, children, ...props }, ref) => (\r\n        <form\r\n            ref={ref}\r\n            className={cn(FORM_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </form>\r\n    ),\r\n))\r\n\r\nForm.displayName = 'Form'\r\n\r\nexport default Form\r\n"],"names":["Form","memo","forwardRef","className","children","props","ref","jsx","cn","FORM_STYLES"],"mappings":"2IAoBMA,EAAOC,EAAAA,KAAKC,EAAAA,WACd,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAChCC,EAAAA,IAAC,OAAA,CACG,IAAAD,EACA,UAAWE,EAAAA,GAAGC,cAAY,KAAMN,CAAS,EACxC,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGb,CAAC,EAEDJ,EAAK,YAAc"}

package/dist/components/layout/form/Form.d.ts

@@ -0,0 +1,19 @@
+import { FormProps } from './types/Form.props.ts';
+import { NamedExoticComponent, RefAttributes } from 'react';
+/**
+ * A thin, unstyled wrapper around the native `<form>` element.
+ *
+ * Use it as the root of any form so assistive technology can identify the
+ * form boundary, and so you have a consistent place to handle submission
+ * and validation behavior.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={handleSubmit}>
+ *   <TextField label="Email" />
+ *   <Button type="submit" label="Send" />
+ * </Form>
+ * ```
+ */
+declare const Form: NamedExoticComponent<Omit<FormProps, "ref"> & RefAttributes<HTMLFormElement>>;
+export default Form;

package/dist/components/layout/form/Form.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { FORM_STYLES as a } from "./styles/Form.css.js";
+import { cn as e } from "../../../utils/cn.js";
+import { memo as p, forwardRef as s } from "react";
+const i = p(s(
+  ({ className: o, children: m, ...r }, f) => /* @__PURE__ */ t(
+    "form",
+    {
+      ref: f,
+      className: e(a.root, o),
+      ...r,
+      children: m
+    }
+  )
+));
+i.displayName = "Form";
+export {
+  i as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/layout/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../src/components/layout/form/Form.tsx"],"sourcesContent":["import { FORM_STYLES } from '@components/layout/form/styles/Form.css.ts'\r\nimport type { FormProps } from '@components/layout/form/types/Form.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { forwardRef, memo } from 'react'\r\n\r\n/**\r\n * A thin, unstyled wrapper around the native `<form>` element.\r\n *\r\n * Use it as the root of any form so assistive technology can identify the\r\n * form boundary, and so you have a consistent place to handle submission\r\n * and validation behavior.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Form onSubmit={handleSubmit}>\r\n *   <TextField label=\"Email\" />\r\n *   <Button type=\"submit\" label=\"Send\" />\r\n * </Form>\r\n * ```\r\n */\r\nconst Form = memo(forwardRef<HTMLFormElement, FormProps>(\r\n    ({ className, children, ...props }, ref) => (\r\n        <form\r\n            ref={ref}\r\n            className={cn(FORM_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </form>\r\n    ),\r\n))\r\n\r\nForm.displayName = 'Form'\r\n\r\nexport default Form\r\n"],"names":["Form","memo","forwardRef","className","children","props","ref","jsx","cn","FORM_STYLES"],"mappings":";;;;AAoBA,MAAMA,IAAOC,EAAKC;AAAA,EACd,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAChC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,WAAWE,EAAGC,EAAY,MAAMN,CAAS;AAAA,MACxC,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDJ,EAAK,cAAc;"}

package/dist/components/layout/form/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Form } from './Form.tsx';
+export { FORM_STYLES } from './styles/Form.css.ts';
+export type { FormProps } from './types/Form.props.ts';

package/dist/components/layout/form/styles/Form.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                          */var e={root:"_1dn8qpd0"};exports.FORM_STYLES=e;
+//# sourceMappingURL=Form.css.cjs.map

package/dist/components/layout/form/styles/Form.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout/form/styles/Form.css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Minimal reset for the form root.
+ *
+ * The component intentionally carries no visual opinion: it is a block-level
+ * container that fills the width of its parent, leaving layout and spacing to
+ * the consumer (e.g. `Flex` or `Stack`).
+ */
+export declare const FORM_STYLES: {
+    root: string;
+};

package/dist/components/layout/form/styles/Form.css.js

@@ -0,0 +1,6 @@
+/* empty css                        */
+var r = { root: "_1dn8qpd0" };
+export {
+  r as FORM_STYLES
+};
+//# sourceMappingURL=Form.css.js.map

package/dist/components/layout/form/styles/Form.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/layout/form/types/Form.props.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+/** Props for the Form component. Inherits all native `<form>` attributes and a forwarded ref. */
+export type FormProps = React.FormHTMLAttributes<HTMLFormElement> & React.RefAttributes<HTMLFormElement>;

package/dist/components/layout/grid/Grid.cjs

@@ -0,0 +1,2 @@
+"use strict";const q=require("react/jsx-runtime"),x=require("./styles/Grid.css.cjs"),G=require("../../../utils/cn.cjs"),p=require("react"),R=require("../box/Box.cjs"),e=p.memo(({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u,gap:m="md",className:a,...d})=>q.jsx(R,{gap:m,className:G.cn(x.GRID_STYLES.recipe({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u}),a),...d}));e.displayName="Grid";module.exports=e;
+//# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/grid/Grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/layout/grid/Grid.tsx"],"sourcesContent":["import { GRID_STYLES } from '@components/layout/grid/styles/Grid.css.ts'\r\nimport type { GridProps } from '@components/layout/grid/types/Grid.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport Box from '@components/layout/box/Box.tsx'\r\n\r\nconst Grid: FC<GridProps> = memo(({\r\n    columns,\r\n    gridAutoRows,\r\n    gridTemplateRows,\r\n    gridAutoFlow,\r\n    alignItems,\r\n    justifyItems,\r\n    alignContent,\r\n    justifyContent,\r\n    gap = 'md',\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            gap={gap}\r\n            className={cn(\r\n                GRID_STYLES.recipe({\r\n                    columns,\r\n                    gridAutoRows,\r\n                    gridTemplateRows,\r\n                    gridAutoFlow,\r\n                    alignItems,\r\n                    justifyItems,\r\n                    alignContent,\r\n                    justifyContent,\r\n                }),\r\n                className,\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nGrid.displayName = 'Grid'\r\n\r\nexport default Grid\r\n"],"names":["Grid","memo","columns","gridAutoRows","gridTemplateRows","gridAutoFlow","alignItems","justifyItems","alignContent","justifyContent","gap","className","props","jsx","Box","cn","GRID_STYLES"],"mappings":"uKAOMA,EAAsBC,EAAAA,KAAK,CAAC,CAC9B,QAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,IAAAC,EAAM,KACN,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GACPC,EAAAA,YAAY,OAAO,CACf,QAAAd,EACA,aAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CAAA,CACH,EACDE,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGf,EAEDZ,EAAK,YAAc"}

package/dist/components/layout/grid/Grid.d.ts

@@ -0,0 +1,4 @@
+import { GridProps } from './types/Grid.props.ts';
+import { FC } from 'react';
+declare const Grid: FC<GridProps>;
+export default Grid;

package/dist/components/layout/grid/Grid.js

@@ -0,0 +1,42 @@
+import { jsx as c } from "react/jsx-runtime";
+import { GRID_STYLES as l } from "./styles/Grid.css.js";
+import { cn as n } from "../../../utils/cn.js";
+import { memo as x } from "react";
+import G from "../box/Box.js";
+const u = x(({
+  columns: r,
+  gridAutoRows: m,
+  gridTemplateRows: o,
+  gridAutoFlow: i,
+  alignItems: t,
+  justifyItems: e,
+  alignContent: p,
+  justifyContent: a,
+  gap: f = "md",
+  className: s,
+  ...d
+}) => /* @__PURE__ */ c(
+  G,
+  {
+    gap: f,
+    className: n(
+      l.recipe({
+        columns: r,
+        gridAutoRows: m,
+        gridTemplateRows: o,
+        gridAutoFlow: i,
+        alignItems: t,
+        justifyItems: e,
+        alignContent: p,
+        justifyContent: a
+      }),
+      s
+    ),
+    ...d
+  }
+));
+u.displayName = "Grid";
+export {
+  u as default
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/layout/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/layout/grid/Grid.tsx"],"sourcesContent":["import { GRID_STYLES } from '@components/layout/grid/styles/Grid.css.ts'\r\nimport type { GridProps } from '@components/layout/grid/types/Grid.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport Box from '@components/layout/box/Box.tsx'\r\n\r\nconst Grid: FC<GridProps> = memo(({\r\n    columns,\r\n    gridAutoRows,\r\n    gridTemplateRows,\r\n    gridAutoFlow,\r\n    alignItems,\r\n    justifyItems,\r\n    alignContent,\r\n    justifyContent,\r\n    gap = 'md',\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            gap={gap}\r\n            className={cn(\r\n                GRID_STYLES.recipe({\r\n                    columns,\r\n                    gridAutoRows,\r\n                    gridTemplateRows,\r\n                    gridAutoFlow,\r\n                    alignItems,\r\n                    justifyItems,\r\n                    alignContent,\r\n                    justifyContent,\r\n                }),\r\n                className,\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nGrid.displayName = 'Grid'\r\n\r\nexport default Grid\r\n"],"names":["Grid","memo","columns","gridAutoRows","gridTemplateRows","gridAutoFlow","alignItems","justifyItems","alignContent","justifyContent","gap","className","props","jsx","Box","cn","GRID_STYLES"],"mappings":";;;;;AAOA,MAAMA,IAAsBC,EAAK,CAAC;AAAA,EAC9B,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,KAAAJ;AAAA,IACA,WAAWK;AAAA,MACPC,EAAY,OAAO;AAAA,QACf,SAAAd;AAAA,QACA,cAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,cAAAC;AAAA,QACA,YAAAC;AAAA,QACA,cAAAC;AAAA,QACA,cAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA,CACH;AAAA,MACDE;AAAA,IAAA;AAAA,IAEH,GAAGC;AAAA,EAAA;AAAA,CAGf;AAEDZ,EAAK,cAAc;"}

package/dist/components/layout/grid/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Grid } from './Grid.tsx';
+export { GRID_STYLES } from './styles/Grid.css.ts';
+export type { GridRecipeVariants } from './styles/Grid.css.ts';
+export type { GridProps } from './types/Grid.props.ts';
+export type { GridColumns, GridAutoRows, GridFlow, GridAlign, GridJustifyItems, GridAlignContent, GridJustifyContent } from './types/Grid.types.ts';

package/dist/components/layout/grid/styles/Grid.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                          */const d=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:d.createRuntimeFn({defaultClassName:"_2fgvjd0",variantClassNames:{columns:{1:"_2fgvjd1",2:"_2fgvjd2",3:"_2fgvjd3",4:"_2fgvjd4",5:"_2fgvjd5",6:"_2fgvjd6",7:"_2fgvjd7",8:"_2fgvjd8",9:"_2fgvjd9",10:"_2fgvjda",11:"_2fgvjdb",12:"_2fgvjdc",none:"_2fgvjdd"},gridAutoRows:{auto:"_2fgvjde",min:"_2fgvjdf",max:"_2fgvjdg",fr:"_2fgvjdh"},gridTemplateRows:{none:"_2fgvjdi",auto:"_2fgvjdj",min:"_2fgvjdk",max:"_2fgvjdl","1fr":"_2fgvjdm","0fr":"_2fgvjdn"},gridAutoFlow:{row:"_2fgvjdo",column:"_2fgvjdp",dense:"_2fgvjdq","row-dense":"_2fgvjdr","column-dense":"_2fgvjds"},alignItems:{start:"_2fgvjdt",end:"_2fgvjdu",center:"_2fgvjdv",stretch:"_2fgvjdw",baseline:"_2fgvjdx"},justifyItems:{start:"_2fgvjdy",end:"_2fgvjdz",center:"_2fgvjd10",stretch:"_2fgvjd11"},alignContent:{start:"_2fgvjd12",end:"_2fgvjd13",center:"_2fgvjd14",stretch:"_2fgvjd15",between:"_2fgvjd16",around:"_2fgvjd17",evenly:"_2fgvjd18"},justifyContent:{start:"_2fgvjd19",end:"_2fgvjd1a",center:"_2fgvjd1b",stretch:"_2fgvjd1c",between:"_2fgvjd1d",around:"_2fgvjd1e",evenly:"_2fgvjd1f"}},defaultVariants:{},compoundVariants:[]})};exports.GRID_STYLES=e;
+//# sourceMappingURL=Grid.css.cjs.map

package/dist/components/layout/grid/styles/Grid.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}