@atom-learning/components 9.0.0-beta.4 → 9.0.0

package/dist/index.js

@@ -17,7 +17,6 @@ import { Badge } from "./components/badge/Badge.js";
 import { Dismissible } from "./components/dismissible/index.js";
 import { BannerRegular } from "./components/banner/banner-regular/BannerRegular.js";
 import { BannerSlim } from "./components/banner/banner-slim/BannerSlim.js";
-import { Box } from "./components/box/Box.js";
 import { Carousel, useCarousel } from "./components/carousel/Carousel.js";
 import { Checkbox } from "./components/checkbox/Checkbox.js";
 import { CheckboxGroup } from "./components/checkbox-group/CheckboxGroup.js";
@@ -54,9 +53,7 @@ import { Dialog } from "./components/dialog/Dialog.js";
 import { Drawer } from "./components/drawer/Drawer.js";
 import { DropdownMenu } from "./components/dropdown-menu/DropdownMenu.js";
 import { FileInput } from "./components/file-input/FileInput.js";
-import { Flex } from "./components/flex/Flex.js";
 import { Form } from "./components/form/Form.js";
-import { Grid } from "./components/grid/Grid.js";
 import { InputField } from "./components/input-field/InputField.js";
 import { List } from "./components/list/List.js";
 import { MarkdownContent } from "./components/markdown-content/MarkdownContent.js";
@@ -100,4 +97,4 @@ import { SegmentedControl } from "./components/segmented-control/SegmentedContro
 import { FileDrop } from "./components/file-drop/FileDrop.js";
 import { useFileDrop } from "./components/file-drop/useFileDrop.js";
 import { Alert } from "./components/index.js";
-export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, ColorScheme, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Theme, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, cn, createTheme, styled, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
+export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, ColorScheme, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Form, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Theme, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, cn, createTheme, styled, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom-learning/components",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0",
   "description": "",
   "homepage": "https://github.com/Atom-Learning/components#readme",
   "bugs": {
@@ -71,6 +71,7 @@
     "validate:types": "tsgo --noEmit",
     "validate:ssr": "node ./scripts/validate-ssr.mjs",
     "validate:public-api": "node ./scripts/api-snapshot.mjs",
+    "validate:consumer-types": "tsgo --project type-tests/tsconfig.json",
     "precommit": "lint-staged"
   },
   "dependencies": {
@@ -119,6 +120,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.3.1",
+    "tailwindcss-safe-area": "^1.3.0",
     "throttle-debounce": "^3.0.1",
     "ts-morph": "^25.0.1",
     "uid": "^2.0.0",

package/src/index.css

@@ -2,6 +2,8 @@
 @import './utilities.css';
 @import './responsive-variant-classes.css';
 
+@import 'tailwindcss-safe-area';
+
 @theme {
   --default-font-family: var(--font-body);
 

package/src/responsive-variant-classes.css

@@ -12,4 +12,4 @@
  * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
  */
 
-@source inline('{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,-mt-1,[&_svg]:size-4,[&_svg]:size-5,[&_svg]:size-[22px],[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--solid-active:var(--color-grey-200)],[--solid-base:var(--color-white)],[--solid-interact:var(--color-grey-100)],[--solid-text:var(--color-grey-1200)],[--text:var(--color-grey-800)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-(--solid-base,var(--base)),bg-[unset],bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.1309],capsize-[0.2078],capsize-[0.2709],capsize-[0.3336],capsize-[0.3506],capsize-[0.3864],capsize-[0.3983],capsize-[0.4056],capsize-[0.4364],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],capsize-none,cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-nowrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-[1.28],leading-[1.40],leading-[1.42],leading-[1.52],leading-[1.53],leading-[1.6],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-[90vh],max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-[90vw],max-w-full,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:bg-(--solid-active,var(--active)),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:bg-(--solid-interact,var(--interact)),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--solid-text,white),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:bg-(--solid-interact,var(--interact)),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--solid-text,white),not-disabled:hover:text-(--text,white),p-0,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-none,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,size-auto,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],supports-svh:h-auto,supports-svh:h-svh,supports-svh:max-h-[90vh],supports-svh:max-h-svh,text-(--base),text-(--foreground-7-plus),text-(--solid-text,white),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white!,text-xl,text-xs,top-0,top-2,top-4,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset]!,w-auto,w-full,w-max,w-px,w-screen}');
+@source inline('{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,-mt-1,[&>[data-dialog-close]]:right-4,[&>[data-dialog-close]]:right-safe-offset-4,[&>[data-dialog-close]]:top-4,[&>[data-dialog-close]]:top-safe-offset-4,[&_svg]:size-4,[&_svg]:size-5,[&_svg]:size-[22px],[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--solid-active:var(--color-grey-200)],[--solid-base:var(--color-white)],[--solid-interact:var(--color-grey-100)],[--solid-text:var(--color-grey-1200)],[--text:var(--color-grey-800)],[--text:var(--color-primary-800)],absolute,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-(--solid-base,var(--base)),bg-[unset],bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.1309],capsize-[0.2078],capsize-[0.2709],capsize-[0.3336],capsize-[0.3506],capsize-[0.3864],capsize-[0.3983],capsize-[0.4056],capsize-[0.4364],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],capsize-none,cursor-not-allowed,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,disabled:cursor-not-allowed,disabled:opacity-30,flex,flex-1,flex-[unset],flex-col,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-2,gap-3,gap-4,h-1,h-10,h-12,h-16,h-2,h-8,h-full,h-px,h-safe-offset-top-16,h-safe-offset-top-24,h-screen,hidden,leading-[1.08],leading-[1.12],leading-[1.14],leading-[1.28],leading-[1.40],leading-[1.42],leading-[1.52],leading-[1.53],leading-[1.6],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-[90vh],max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-[90vw],max-w-full,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:bg-(--solid-active,var(--active)),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:bg-(--solid-interact,var(--interact)),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--solid-text,white),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:bg-(--solid-interact,var(--interact)),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--solid-text,white),not-disabled:hover:text-(--text,white),opacity-60,p-0,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pointer-events-none,pr-10,pr-8,pt-safe,px-1,px-2,px-4,px-6,px-8,py-0,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-none,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,size-auto,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],supports-svh:h-auto,supports-svh:h-svh,supports-svh:max-h-[90vh],supports-svh:max-h-svh,text-(--base),text-(--foreground-7-plus),text-(--solid-text,white),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white!,text-xl,text-xs,top-4,top-safe,top-safe-offset-2,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset]!,w-auto,w-full,w-max,w-px,w-screen}');

package/src/utilities.css

@@ -74,6 +74,12 @@
   grid-area: --value([*]);
 }
 
+@utility h-safe-offset-top-* {
+  height: --spacing(
+    --value(integer, [integer]) + var(--twsa-safe-area-inset-top)
+  );
+}
+
 @custom-variant supports-color-mix {
   @supports (background-color: color-mix(in hsl, white 50%, transparent)) {
     @slot;

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

@@ -1 +0,0 @@
-export declare const Box: import("../..").PolymorphicComponent<"div", unknown>;

package/dist/components/box/Box.js

@@ -1,8 +0,0 @@
-import { styled } from "../../styled.js";
-//#region src/components/box/Box.tsx
-var Box = styled("div", { base: [] });
-Box.displayName = "Box";
-//#endregion
-export { Box };
-
-//# sourceMappingURL=Box.js.map

package/dist/components/box/Box.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/box/Box.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Box = styled('div', {\n  base: []\n})\n\nBox.displayName = 'Box'\n"],"mappings":";;AAEA,IAAa,MAAM,OAAO,OAAO,EAC/B,MAAM,CAAC,EACT,CAAC;AAED,IAAI,cAAc"}

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

@@ -1,7 +0,0 @@
-export declare const Flex: import("../..").PolymorphicComponent<"div", {
-    direction?: ("column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "row" | "row-reverse" | "unset" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "row" | "row-reverse" | "unset">>) | undefined;
-    wrap?: ("inherit" | "initial" | "nowrap" | "revert" | "revert-layer" | "unset" | "wrap" | "wrap-reverse" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "inherit" | "initial" | "nowrap" | "revert" | "revert-layer" | "unset" | "wrap" | "wrap-reverse">>) | undefined;
-    justify?: ("center" | "end" | "flex-end" | "flex-start" | "inherit" | "initial" | "left" | "normal" | "revert" | "revert-layer" | "right" | "safe" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | "unsafe" | "unset" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "center" | "end" | "flex-end" | "flex-start" | "inherit" | "initial" | "left" | "normal" | "revert" | "revert-layer" | "right" | "safe" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | "unsafe" | "unset">>) | undefined;
-    align?: ("baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "inherit" | "initial" | "last baseline" | "normal" | "revert" | "revert-layer" | "safe" | "self-end" | "self-start" | "start" | "stretch" | "unsafe" | "unset" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "inherit" | "initial" | "last baseline" | "normal" | "revert" | "revert-layer" | "safe" | "self-end" | "self-start" | "start" | "stretch" | "unsafe" | "unset">>) | undefined;
-    gap?: ("0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24 | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24>>) | undefined;
-}>;

package/dist/components/flex/Flex.js

@@ -1,88 +0,0 @@
-import { styled } from "../../styled.js";
-//#region src/components/flex/Flex.tsx
-var Flex = styled("div", {
-	base: ["flex"],
-	variants: {
-		direction: {
-			row: ["flex-row"],
-			"row-reverse": ["flex-row-reverse"],
-			column: ["flex-col"],
-			"column-reverse": ["flex-col-reverse"],
-			inherit: ["direction-[inherit]"],
-			initial: ["direction-[initial]"],
-			revert: ["direction-[revert]"],
-			"revert-layer": ["direction-[revert-layer]"],
-			unset: ["direction-[unset]"]
-		},
-		wrap: {
-			nowrap: ["flex-nowrap"],
-			wrap: ["flex-wrap"],
-			"wrap-reverse": ["flex-wrap-reverse"],
-			inherit: ["[flex-wrap:inherit]"],
-			initial: ["[flex-wrap:initial]"],
-			revert: ["[flex-wrap:revert]"],
-			"revert-layer": ["[flex-wrap:revert-layer]"],
-			unset: ["[flex-wrap:unset]"]
-		},
-		justify: {
-			normal: ["justify-normal"],
-			unsafe: ["[justify-content:unsafe]"],
-			safe: ["[justify-content:safe]"],
-			start: ["justify-start"],
-			center: ["justify-center"],
-			end: ["justify-end"],
-			"flex-start": ["justify-start"],
-			"flex-end": ["justify-end"],
-			left: ["[justify-content:left]"],
-			right: ["[justify-content:right]"],
-			"space-between": ["justify-between"],
-			"space-around": ["justify-around"],
-			"space-evenly": ["justify-evenly"],
-			stretch: ["justify-stretch"],
-			inherit: ["[justify-content:inherit]"],
-			initial: ["[justify-content:initial]"],
-			revert: ["[justify-content:revert]"],
-			"revert-layer": ["[justify-content:revert-layer]"],
-			unset: ["[justify-content:unset]"]
-		},
-		align: {
-			normal: ["[align-items:normal]"],
-			unsafe: ["[align-items:unsafe]"],
-			safe: ["[align-items:safe]"],
-			center: ["items-center"],
-			start: ["items-start"],
-			end: ["items-end"],
-			"self-start": ["[align-items:self-start]"],
-			"self-end": ["[align-items:self-end]"],
-			"flex-start": ["items-start"],
-			"flex-end": ["items-end"],
-			baseline: ["items-baseline"],
-			"first baseline": ["[align-items:first baseline]"],
-			"last baseline": ["[align-items:last baseline]"],
-			stretch: ["items-stretch"],
-			inherit: ["[align-items:inherit]"],
-			initial: ["[align-items:initial]"],
-			revert: ["[align-items:revert]"],
-			"revert-layer": ["[align-items:revert-layer]"],
-			unset: ["[align-items:unset]"]
-		},
-		gap: {
-			0: ["gap-0.5"],
-			1: ["gap-1"],
-			2: ["gap-2"],
-			3: ["gap-3"],
-			4: ["gap-4"],
-			24: ["gap-6"],
-			5: ["gap-8"],
-			6: ["gap-10"],
-			7: ["gap-12"],
-			8: ["gap-16"],
-			9: ["gap-20"]
-		}
-	}
-}, { enableResponsiveVariants: true });
-Flex.displayName = "Flex";
-//#endregion
-export { Flex };
-
-//# sourceMappingURL=Flex.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Flex = styled(\n  'div',\n  {\n    base: ['flex'],\n    variants: {\n      direction: {\n        row: ['flex-row'],\n        'row-reverse': ['flex-row-reverse'],\n        column: ['flex-col'],\n        'column-reverse': ['flex-col-reverse'],\n        inherit: ['direction-[inherit]'],\n        initial: ['direction-[initial]'],\n        revert: ['direction-[revert]'],\n        'revert-layer': ['direction-[revert-layer]'],\n        unset: ['direction-[unset]']\n      },\n      wrap: {\n        nowrap: ['flex-nowrap'],\n        wrap: ['flex-wrap'],\n        'wrap-reverse': ['flex-wrap-reverse'],\n        inherit: ['[flex-wrap:inherit]'],\n        initial: ['[flex-wrap:initial]'],\n        revert: ['[flex-wrap:revert]'],\n        'revert-layer': ['[flex-wrap:revert-layer]'],\n        unset: ['[flex-wrap:unset]']\n      },\n      justify: {\n        normal: ['justify-normal'],\n        unsafe: ['[justify-content:unsafe]'],\n        safe: ['[justify-content:safe]'],\n        start: ['justify-start'],\n        center: ['justify-center'],\n        end: ['justify-end'],\n        'flex-start': ['justify-start'],\n        'flex-end': ['justify-end'],\n        left: ['[justify-content:left]'],\n        right: ['[justify-content:right]'],\n        'space-between': ['justify-between'],\n        'space-around': ['justify-around'],\n        'space-evenly': ['justify-evenly'],\n        stretch: ['justify-stretch'],\n        inherit: ['[justify-content:inherit]'],\n        initial: ['[justify-content:initial]'],\n        revert: ['[justify-content:revert]'],\n        'revert-layer': ['[justify-content:revert-layer]'],\n        unset: ['[justify-content:unset]']\n      },\n      align: {\n        normal: ['[align-items:normal]'],\n        unsafe: ['[align-items:unsafe]'],\n        safe: ['[align-items:safe]'],\n        center: ['items-center'],\n        start: ['items-start'],\n        end: ['items-end'],\n        'self-start': ['[align-items:self-start]'],\n        'self-end': ['[align-items:self-end]'],\n        'flex-start': ['items-start'],\n        'flex-end': ['items-end'],\n        baseline: ['items-baseline'],\n        'first baseline': ['[align-items:first baseline]'],\n        'last baseline': ['[align-items:last baseline]'],\n        stretch: ['items-stretch'],\n        inherit: ['[align-items:inherit]'],\n        initial: ['[align-items:initial]'],\n        revert: ['[align-items:revert]'],\n        'revert-layer': ['[align-items:revert-layer]'],\n        unset: ['[align-items:unset]']\n      },\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nFlex.displayName = 'Flex'\n"],"mappings":";;AAEA,IAAa,OAAO,OAClB,OACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU;EACR,WAAW;GACT,KAAK,CAAC,UAAU;GAChB,eAAe,CAAC,kBAAkB;GAClC,QAAQ,CAAC,UAAU;GACnB,kBAAkB,CAAC,kBAAkB;GACrC,SAAS,CAAC,qBAAqB;GAC/B,SAAS,CAAC,qBAAqB;GAC/B,QAAQ,CAAC,oBAAoB;GAC7B,gBAAgB,CAAC,0BAA0B;GAC3C,OAAO,CAAC,mBAAmB;EAC7B;EACA,MAAM;GACJ,QAAQ,CAAC,aAAa;GACtB,MAAM,CAAC,WAAW;GAClB,gBAAgB,CAAC,mBAAmB;GACpC,SAAS,CAAC,qBAAqB;GAC/B,SAAS,CAAC,qBAAqB;GAC/B,QAAQ,CAAC,oBAAoB;GAC7B,gBAAgB,CAAC,0BAA0B;GAC3C,OAAO,CAAC,mBAAmB;EAC7B;EACA,SAAS;GACP,QAAQ,CAAC,gBAAgB;GACzB,QAAQ,CAAC,0BAA0B;GACnC,MAAM,CAAC,wBAAwB;GAC/B,OAAO,CAAC,eAAe;GACvB,QAAQ,CAAC,gBAAgB;GACzB,KAAK,CAAC,aAAa;GACnB,cAAc,CAAC,eAAe;GAC9B,YAAY,CAAC,aAAa;GAC1B,MAAM,CAAC,wBAAwB;GAC/B,OAAO,CAAC,yBAAyB;GACjC,iBAAiB,CAAC,iBAAiB;GACnC,gBAAgB,CAAC,gBAAgB;GACjC,gBAAgB,CAAC,gBAAgB;GACjC,SAAS,CAAC,iBAAiB;GAC3B,SAAS,CAAC,2BAA2B;GACrC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,0BAA0B;GACnC,gBAAgB,CAAC,gCAAgC;GACjD,OAAO,CAAC,yBAAyB;EACnC;EACA,OAAO;GACL,QAAQ,CAAC,sBAAsB;GAC/B,QAAQ,CAAC,sBAAsB;GAC/B,MAAM,CAAC,oBAAoB;GAC3B,QAAQ,CAAC,cAAc;GACvB,OAAO,CAAC,aAAa;GACrB,KAAK,CAAC,WAAW;GACjB,cAAc,CAAC,0BAA0B;GACzC,YAAY,CAAC,wBAAwB;GACrC,cAAc,CAAC,aAAa;GAC5B,YAAY,CAAC,WAAW;GACxB,UAAU,CAAC,gBAAgB;GAC3B,kBAAkB,CAAC,8BAA8B;GACjD,iBAAiB,CAAC,6BAA6B;GAC/C,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,uBAAuB;GACjC,SAAS,CAAC,uBAAuB;GACjC,QAAQ,CAAC,sBAAsB;GAC/B,gBAAgB,CAAC,4BAA4B;GAC7C,OAAO,CAAC,qBAAqB;EAC/B;EACA,KAAK;GACH,GAAG,CAAC,SAAS;GACb,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,OAAO;GACX,IAAI,CAAC,OAAO;GACZ,GAAG,CAAC,OAAO;GACX,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;GACZ,GAAG,CAAC,QAAQ;EACd;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,KAAK,cAAc"}

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-declare const GridContainer: import("../..").PolymorphicComponent<"div", {
-    gap?: ("0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24 | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "0" | "1" | "2" | "24" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 24>>) | undefined;
-}>;
-type GridProps = React.ComponentProps<typeof GridContainer> & {
-    minItemSize?: string;
-    maxItemSize?: string;
-};
-export declare function Grid({ className, style, gap, minItemSize, maxItemSize, ...rest }: GridProps): React.JSX.Element;
-export declare namespace Grid {
-    var displayName: string;
-}
-export {};

package/dist/components/grid/Grid.js

@@ -1,35 +0,0 @@
-import { cn, styled } from "../../styled.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/grid/Grid.tsx
-var GridContainer = styled("div", {
-	base: ["grid"],
-	variants: { gap: {
-		0: ["gap-0.5"],
-		1: ["gap-1"],
-		2: ["gap-2"],
-		3: ["gap-3"],
-		4: ["gap-4"],
-		24: ["gap-6"],
-		5: ["gap-8"],
-		6: ["gap-10"],
-		7: ["gap-12"],
-		8: ["gap-16"],
-		9: ["gap-20"]
-	} }
-}, { enableResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...rest }) => /* @__PURE__ */ jsx(GridContainer, {
-	...rest,
-	style: {
-		...style,
-		...minItemSize && { "--min-item-size": minItemSize },
-		...maxItemSize && { "--max-item-size": maxItemSize }
-	},
-	gap,
-	className: cn(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
-});
-Grid.displayName = "Grid";
-//#endregion
-export { Grid };
-
-//# sourceMappingURL=Grid.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\n\nconst GridContainer = styled(\n  'div',\n  {\n    base: ['grid'],\n    variants: {\n      gap: {\n        0: ['gap-0.5'],\n        1: ['gap-1'],\n        2: ['gap-2'],\n        3: ['gap-3'],\n        4: ['gap-4'],\n        24: ['gap-6'],\n        5: ['gap-8'],\n        6: ['gap-10'],\n        7: ['gap-12'],\n        8: ['gap-16'],\n        9: ['gap-20']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype GridProps = React.ComponentProps<typeof GridContainer> & {\n  minItemSize?: string\n  maxItemSize?: string\n}\n\nexport const Grid = ({\n  className,\n  style,\n  gap = '2',\n  minItemSize,\n  maxItemSize = '1fr',\n  ...rest\n}: GridProps) => (\n  <GridContainer\n    {...rest}\n    style={{\n      ...style,\n      ...(minItemSize && { '--min-item-size': minItemSize }),\n      ...(maxItemSize && { '--max-item-size': maxItemSize })\n    }}\n    gap={gap}\n    className={cn(\n      minItemSize && [\n        'grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]'\n      ],\n      className\n    )}\n  />\n)\n\nGrid.displayName = 'Grid'\n"],"mappings":";;;;AAIA,IAAM,gBAAgB,OACpB,OACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,KAAK;EACH,GAAG,CAAC,SAAS;EACb,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,OAAO;EACX,IAAI,CAAC,OAAO;EACZ,GAAG,CAAC,OAAO;EACX,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;EACZ,GAAG,CAAC,QAAQ;CACd,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,QAAQ,EACnB,WACA,OACA,MAAM,KACN,aACA,cAAc,OACd,GAAG,WAEH,oBAAC,eAAD;CACE,GAAI;CACJ,OAAO;EACL,GAAG;EACH,GAAI,eAAe,EAAE,mBAAmB,YAAY;EACpD,GAAI,eAAe,EAAE,mBAAmB,YAAY;CACtD;CACK;CACL,WAAW,GACT,eAAe,CACb,oFACF,GACA,SACF;AACD,CAAA;AAGH,KAAK,cAAc"}