@bloomkit/react 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +25 -24
  2. package/dist/index.cjs +0 -25
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +2 -0
  5. package/dist/index.js +0 -25
  6. package/dist/index.js.map +1 -1
  7. package/package.json +4 -3
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # bloomui
1
+ # @bloomkit/react
2
2
 
3
3
  **Components that breathe.**
4
4
 
@@ -9,15 +9,16 @@ Soft shapes. Breathing motion. Living color.
9
9
  ## Install
10
10
 
11
11
  ```bash
12
- npm install bloomui
12
+ npm install @bloomkit/react
13
13
  ```
14
14
 
15
15
  ## Setup
16
16
 
17
- Import the stylesheet in your app's entry point:
17
+ Add the stylesheet to your CSS entry file:
18
18
 
19
- ```tsx
20
- import "bloomui/styles";
19
+ ```css
20
+ /* index.css or globals.css */
21
+ @import "@bloomkit/react/styles.css";
21
22
  ```
22
23
 
23
24
  Add the Google Fonts to your HTML `<head>`:
@@ -28,7 +29,7 @@ Add the Google Fonts to your HTML `<head>`:
28
29
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap" rel="stylesheet" />
29
30
  ```
30
31
 
31
- Wrap your app (or a section) with the `bloom` class to activate the base styles:
32
+ Wrap your app with the `bloom` class:
32
33
 
33
34
  ```tsx
34
35
  <div className="bloom">
@@ -41,7 +42,7 @@ Wrap your app (or a section) with the `bloom` class to activate the base styles:
41
42
  ### Button
42
43
 
43
44
  ```tsx
44
- import { Button } from "bloomui";
45
+ import { Button } from "@bloomkit/react";
45
46
 
46
47
  <Button variant="primary">Save</Button>
47
48
  <Button variant="secondary">Cancel</Button>
@@ -54,7 +55,7 @@ Variants: `primary` | `secondary` | `ghost` | `accent`
54
55
  ### Card
55
56
 
56
57
  ```tsx
57
- import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "bloomui";
58
+ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@bloomkit/react";
58
59
 
59
60
  <Card variant="interactive">
60
61
  <CardHeader>
@@ -75,7 +76,7 @@ Variants: `default` | `interactive` | `featured`
75
76
  ### Input & Textarea
76
77
 
77
78
  ```tsx
78
- import { Input, Textarea } from "bloomui";
79
+ import { Input, Textarea } from "@bloomkit/react";
79
80
 
80
81
  <Input placeholder="Your name" />
81
82
  <Input type="email" placeholder="your@email.com" />
@@ -85,7 +86,7 @@ import { Input, Textarea } from "bloomui";
85
86
  ### Toggle
86
87
 
87
88
  ```tsx
88
- import { Toggle } from "bloomui";
89
+ import { Toggle } from "@bloomkit/react";
89
90
 
90
91
  <Toggle label="Ambient motion" defaultChecked />
91
92
  <Toggle label="Dark mode" />
@@ -94,7 +95,7 @@ import { Toggle } from "bloomui";
94
95
  ### Badge
95
96
 
96
97
  ```tsx
97
- import { Badge } from "bloomui";
98
+ import { Badge } from "@bloomkit/react";
98
99
 
99
100
  <Badge variant="sage" dot>Active</Badge>
100
101
  <Badge variant="sand">Pending</Badge>
@@ -107,7 +108,7 @@ Variants: `sage` | `sand` | `lavender` | `rose`
107
108
  ### Alert
108
109
 
109
110
  ```tsx
110
- import { Alert, AlertTitle, AlertDescription } from "bloomui";
111
+ import { Alert, AlertTitle, AlertDescription } from "@bloomkit/react";
111
112
 
112
113
  <Alert variant="success">
113
114
  <AlertTitle>Saved</AlertTitle>
@@ -120,7 +121,7 @@ Variants: `info` | `success` | `warning` | `error`
120
121
  ### Avatar
121
122
 
122
123
  ```tsx
123
- import { Avatar, AvatarGroup } from "bloomui";
124
+ import { Avatar, AvatarGroup } from "@bloomkit/react";
124
125
 
125
126
  <Avatar initials="JD" size="md" />
126
127
  <Avatar src="/photo.jpg" alt="Jane Doe" />
@@ -137,7 +138,7 @@ Sizes: `sm` | `md` | `lg`
137
138
  ### Tooltip
138
139
 
139
140
  ```tsx
140
- import { Tooltip, TooltipProvider } from "bloomui";
141
+ import { Tooltip, TooltipProvider } from "@bloomkit/react";
141
142
 
142
143
  <TooltipProvider>
143
144
  <Tooltip content="Save your progress">
@@ -149,7 +150,7 @@ import { Tooltip, TooltipProvider } from "bloomui";
149
150
  ### Progress
150
151
 
151
152
  ```tsx
152
- import { Progress, ProgressCircular } from "bloomui";
153
+ import { Progress, ProgressCircular } from "@bloomkit/react";
153
154
 
154
155
  <Progress value={60} />
155
156
  <ProgressCircular value={60} size={48} />
@@ -158,7 +159,7 @@ import { Progress, ProgressCircular } from "bloomui";
158
159
  ### Slider
159
160
 
160
161
  ```tsx
161
- import { Slider } from "bloomui";
162
+ import { Slider } from "@bloomkit/react";
162
163
 
163
164
  <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" />
164
165
  ```
@@ -166,7 +167,7 @@ import { Slider } from "bloomui";
166
167
  ### Modal
167
168
 
168
169
  ```tsx
169
- import { Modal } from "bloomui";
170
+ import { Modal } from "@bloomkit/react";
170
171
 
171
172
  const [open, setOpen] = useState(false);
172
173
 
@@ -179,7 +180,7 @@ const [open, setOpen] = useState(false);
179
180
  ### Dropdown
180
181
 
181
182
  ```tsx
182
- import { Dropdown, DropdownItem, DropdownSeparator } from "bloomui";
183
+ import { Dropdown, DropdownItem, DropdownSeparator } from "@bloomkit/react";
183
184
 
184
185
  <Dropdown trigger={<Button>Options</Button>}>
185
186
  <DropdownItem>Edit</DropdownItem>
@@ -192,7 +193,7 @@ import { Dropdown, DropdownItem, DropdownSeparator } from "bloomui";
192
193
  ### Tabs
193
194
 
194
195
  ```tsx
195
- import { Tabs, TabsList, TabsTrigger, TabsContent } from "bloomui";
196
+ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@bloomkit/react";
196
197
 
197
198
  <Tabs defaultValue="overview">
198
199
  <TabsList variant="pill">
@@ -207,7 +208,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "bloomui";
207
208
  ### Date Picker
208
209
 
209
210
  ```tsx
210
- import { DatePicker } from "bloomui";
211
+ import { DatePicker } from "@bloomkit/react";
211
212
 
212
213
  const [date, setDate] = useState<Date>();
213
214
 
@@ -217,7 +218,7 @@ const [date, setDate] = useState<Date>();
217
218
  ### Toast
218
219
 
219
220
  ```tsx
220
- import { ToastProvider, useToast } from "bloomui";
221
+ import { ToastProvider, useToast } from "@bloomkit/react";
221
222
 
222
223
  // Wrap your app
223
224
  <ToastProvider>
@@ -234,7 +235,7 @@ Variants: `info` | `success` | `warning` | `error`
234
235
  ### Skeleton
235
236
 
236
237
  ```tsx
237
- import { Skeleton } from "bloomui";
238
+ import { Skeleton } from "@bloomkit/react";
238
239
 
239
240
  <Skeleton variant="text" />
240
241
  <Skeleton variant="card" />
@@ -248,7 +249,7 @@ import { Skeleton } from "bloomui";
248
249
  Detects OS-level `prefers-reduced-motion` and the `.bloom-reduced-motion` class.
249
250
 
250
251
  ```tsx
251
- import { useReducedMotion } from "bloomui";
252
+ import { useReducedMotion } from "@bloomkit/react";
252
253
 
253
254
  const reduced = useReducedMotion();
254
255
  ```
@@ -258,7 +259,7 @@ const reduced = useReducedMotion();
258
259
  Returns a CSS animation style object with a randomized delay for the breathing animation.
259
260
 
260
261
  ```tsx
261
- import { useBreathing } from "bloomui";
262
+ import { useBreathing } from "@bloomkit/react";
262
263
 
263
264
  const style = useBreathing({ duration: 6 });
264
265
  <div style={style}>Breathing element</div>
package/dist/index.cjs CHANGED
@@ -1,30 +1,5 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
2
2
 
3
- // #style-inject:#style-inject
4
- function styleInject(css, { insertAt } = {}) {
5
- if (!css || typeof document === "undefined") return;
6
- const head = document.head || document.getElementsByTagName("head")[0];
7
- const style = document.createElement("style");
8
- style.type = "text/css";
9
- if (insertAt === "top") {
10
- if (head.firstChild) {
11
- head.insertBefore(style, head.firstChild);
12
- } else {
13
- head.appendChild(style);
14
- }
15
- } else {
16
- head.appendChild(style);
17
- }
18
- if (style.styleSheet) {
19
- style.styleSheet.cssText = css;
20
- } else {
21
- style.appendChild(document.createTextNode(css));
22
- }
23
- }
24
-
25
- // src/styles/bloom.css
26
- styleInject('/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-\\[var\\(--space-lg\\)\\] {\n top: var(--space-lg);\n }\n .right-\\[var\\(--space-lg\\)\\] {\n right: var(--space-lg);\n }\n .right-\\[var\\(--space-xl\\)\\] {\n right: var(--space-xl);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-\\[var\\(--space-xl\\)\\] {\n bottom: var(--space-xl);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[100\\] {\n z-index: 100;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-\\[var\\(--space-xs\\)\\] {\n margin-block: var(--space-xs);\n }\n .mt-\\[var\\(--space-lg\\)\\] {\n margin-top: var(--space-lg);\n }\n .mt-\\[var\\(--space-sm\\)\\] {\n margin-top: var(--space-sm);\n }\n .mt-\\[var\\(--space-xs\\)\\] {\n margin-top: var(--space-xs);\n }\n .mb-\\[var\\(--space-lg\\)\\] {\n margin-bottom: var(--space-lg);\n }\n .mb-\\[var\\(--space-md\\)\\] {\n margin-bottom: var(--space-md);\n }\n .mb-\\[var\\(--space-sm\\)\\] {\n margin-bottom: var(--space-sm);\n }\n .mb-\\[var\\(--space-xs\\)\\] {\n margin-bottom: var(--space-xs);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline-flex {\n display: inline-flex;\n }\n .h-\\[2px\\] {\n height: 2px;\n }\n .h-\\[6px\\] {\n height: 6px;\n }\n .h-\\[16px\\] {\n height: 16px;\n }\n .h-\\[22px\\] {\n height: 22px;\n }\n .h-\\[24px\\] {\n height: 24px;\n }\n .h-\\[28px\\] {\n height: 28px;\n }\n .h-\\[32px\\] {\n height: 32px;\n }\n .h-\\[36px\\] {\n height: 36px;\n }\n .h-\\[40px\\] {\n height: 40px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-\\[56px\\] {\n height: 56px;\n }\n .h-\\[200px\\] {\n height: 200px;\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .min-h-\\[100px\\] {\n min-height: 100px;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-\\[6px\\] {\n width: 6px;\n }\n .w-\\[22px\\] {\n width: 22px;\n }\n .w-\\[24px\\] {\n width: 24px;\n }\n .w-\\[32px\\] {\n width: 32px;\n }\n .w-\\[36px\\] {\n width: 36px;\n }\n .w-\\[40\\%\\] {\n width: 40%;\n }\n .w-\\[40px\\] {\n width: 40px;\n }\n .w-\\[50px\\] {\n width: 50px;\n }\n .w-\\[56px\\] {\n width: 56px;\n }\n .w-\\[60\\%\\] {\n width: 60%;\n }\n .w-\\[200px\\] {\n width: 200px;\n }\n .w-\\[280px\\] {\n width: 280px;\n }\n .w-\\[300px\\] {\n width: 300px;\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[380px\\] {\n max-width: 380px;\n }\n .max-w-\\[400px\\] {\n max-width: 400px;\n }\n .max-w-\\[480px\\] {\n max-width: 480px;\n }\n .max-w-\\[800px\\] {\n max-width: 800px;\n }\n .min-w-\\[180px\\] {\n min-width: 180px;\n }\n .flex-1 {\n flex: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .grow {\n flex-grow: 1;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-\\[bloom-breathe_3s_ease-in-out_infinite\\] {\n animation: bloom-breathe 3s ease-in-out infinite;\n }\n .animate-\\[bloom-breathe_5s_ease-in-out_infinite\\] {\n animation: bloom-breathe 5s ease-in-out infinite;\n }\n .animate-\\[bloom-shimmer_3s_ease-in-out_infinite\\] {\n animation: bloom-shimmer 3s ease-in-out infinite;\n }\n .cursor-grab {\n cursor: grab;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .touch-none {\n touch-action: none;\n }\n .resize-y {\n resize: vertical;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-\\[2px\\] {\n gap: 2px;\n }\n .gap-\\[var\\(--space-3xl\\)\\] {\n gap: var(--space-3xl);\n }\n .gap-\\[var\\(--space-lg\\)\\] {\n gap: var(--space-lg);\n }\n .gap-\\[var\\(--space-md\\)\\] {\n gap: var(--space-md);\n }\n .gap-\\[var\\(--space-sm\\)\\] {\n gap: var(--space-sm);\n }\n .gap-\\[var\\(--space-xs\\)\\] {\n gap: var(--space-xs);\n }\n .-space-x-2 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded-\\[var\\(--bloom-radius\\)\\] {\n border-radius: var(--bloom-radius);\n }\n .rounded-\\[var\\(--bloom-radius-lg\\)\\] {\n border-radius: var(--bloom-radius-lg);\n }\n .rounded-\\[var\\(--bloom-radius-pill\\)\\] {\n border-radius: var(--bloom-radius-pill);\n }\n .rounded-\\[var\\(--bloom-radius-sm\\)\\] {\n border-radius: var(--bloom-radius-sm);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-\\[2px\\] {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l-\\[4px\\] {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n .border-\\[var\\(--bloom-accent1\\)\\]\\/30 {\n border-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--bloom-accent1) 30%, transparent);\n }\n }\n .border-\\[var\\(--bloom-accent1-deep\\)\\] {\n border-color: var(--bloom-accent1-deep);\n }\n .border-\\[var\\(--bloom-surface2\\)\\] {\n border-color: var(--bloom-surface2);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-l-\\[var\\(--bloom-accent1\\)\\] {\n border-left-color: var(--bloom-accent1);\n }\n .border-l-\\[var\\(--bloom-accent2\\)\\] {\n border-left-color: var(--bloom-accent2);\n }\n .border-l-\\[var\\(--bloom-accent3\\)\\] {\n border-left-color: var(--bloom-accent3);\n }\n .border-l-\\[var\\(--bloom-accent4\\)\\] {\n border-left-color: var(--bloom-accent4);\n }\n .bg-\\[var\\(--bloom-accent1\\)\\]\\/20 {\n background-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent1) 20%, transparent);\n }\n }\n .bg-\\[var\\(--bloom-accent1-deep\\)\\] {\n background-color: var(--bloom-accent1-deep);\n }\n .bg-\\[var\\(--bloom-accent1-deep\\)\\]\\/40 {\n background-color: var(--bloom-accent1-deep);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent1-deep) 40%, transparent);\n }\n }\n .bg-\\[var\\(--bloom-accent2\\)\\]\\/20 {\n background-color: var(--bloom-accent2);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent2) 20%, transparent);\n }\n }\n .bg-\\[var\\(--bloom-accent2-deep\\)\\] {\n background-color: var(--bloom-accent2-deep);\n }\n .bg-\\[var\\(--bloom-accent3\\)\\]\\/20 {\n background-color: var(--bloom-accent3);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent3) 20%, transparent);\n }\n }\n .bg-\\[var\\(--bloom-accent3-deep\\)\\] {\n background-color: var(--bloom-accent3-deep);\n }\n .bg-\\[var\\(--bloom-accent4\\)\\]\\/20 {\n background-color: var(--bloom-accent4);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent4) 20%, transparent);\n }\n }\n .bg-\\[var\\(--bloom-accent4-deep\\)\\] {\n background-color: var(--bloom-accent4-deep);\n }\n .bg-\\[var\\(--bloom-surface\\)\\] {\n background-color: var(--bloom-surface);\n }\n .bg-\\[var\\(--bloom-surface2\\)\\] {\n background-color: var(--bloom-surface2);\n }\n .bg-\\[var\\(--bloom-text\\)\\] {\n background-color: var(--bloom-text);\n }\n .bg-black\\/40 {\n background-color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-gradient-to-r {\n --tw-gradient-position: to right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-\\[var\\(--bloom-accent1-deep\\)\\] {\n --tw-gradient-from: var(--bloom-accent1-deep);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-\\[var\\(--bloom-accent1\\)\\] {\n --tw-gradient-to: var(--bloom-accent1);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .bg-\\[length\\:200\\%_100\\%\\] {\n background-size: 200% 100%;\n }\n .object-cover {\n object-fit: cover;\n }\n .p-\\[var\\(--space-3xl\\)\\] {\n padding: var(--space-3xl);\n }\n .p-\\[var\\(--space-lg\\)\\] {\n padding: var(--space-lg);\n }\n .p-\\[var\\(--space-xl\\)\\] {\n padding: var(--space-xl);\n }\n .p-\\[var\\(--space-xs\\)\\] {\n padding: var(--space-xs);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n .px-\\[28px\\] {\n padding-inline: 28px;\n }\n .px-\\[var\\(--space-lg\\)\\] {\n padding-inline: var(--space-lg);\n }\n .px-\\[var\\(--space-md\\)\\] {\n padding-inline: var(--space-md);\n }\n .py-\\[var\\(--space-md\\)\\] {\n padding-block: var(--space-md);\n }\n .py-\\[var\\(--space-sm\\)\\] {\n padding-block: var(--space-sm);\n }\n .py-\\[var\\(--space-xs\\)\\] {\n padding-block: var(--space-xs);\n }\n .pt-0 {\n padding-top: calc(var(--spacing) * 0);\n }\n .pb-0 {\n padding-bottom: calc(var(--spacing) * 0);\n }\n .text-center {\n text-align: center;\n }\n .font-\\[family-name\\:var\\(--bloom-font\\)\\] {\n font-family: var(--bloom-font);\n }\n .font-\\[family-name\\:var\\(--bloom-font-display\\)\\] {\n font-family: var(--bloom-font-display);\n }\n .text-\\[14px\\] {\n font-size: 14px;\n }\n .text-\\[18px\\] {\n font-size: 18px;\n }\n .text-\\[length\\:var\\(--bloom-text-body\\)\\] {\n font-size: var(--bloom-text-body);\n }\n .text-\\[length\\:var\\(--bloom-text-caption\\)\\] {\n font-size: var(--bloom-text-caption);\n }\n .text-\\[length\\:var\\(--bloom-text-heading\\)\\] {\n font-size: var(--bloom-text-heading);\n }\n .text-\\[length\\:var\\(--bloom-text-micro\\)\\] {\n font-size: var(--bloom-text-micro);\n }\n .text-\\[length\\:var\\(--bloom-text-subheading\\)\\] {\n font-size: var(--bloom-text-subheading);\n }\n .leading-\\[var\\(--bloom-leading-heading\\)\\] {\n --tw-leading: var(--bloom-leading-heading);\n line-height: var(--bloom-leading-heading);\n }\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .tracking-\\[var\\(--bloom-letter-tight\\)\\] {\n --tw-tracking: var(--bloom-letter-tight);\n letter-spacing: var(--bloom-letter-tight);\n }\n .tracking-\\[var\\(--bloom-letter-wide\\)\\] {\n --tw-tracking: var(--bloom-letter-wide);\n letter-spacing: var(--bloom-letter-wide);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-\\[var\\(--bloom-accent1-deep\\)\\] {\n color: var(--bloom-accent1-deep);\n }\n .text-\\[var\\(--bloom-accent2-deep\\)\\] {\n color: var(--bloom-accent2-deep);\n }\n .text-\\[var\\(--bloom-accent3-deep\\)\\] {\n color: var(--bloom-accent3-deep);\n }\n .text-\\[var\\(--bloom-accent4-deep\\)\\] {\n color: var(--bloom-accent4-deep);\n }\n .text-\\[var\\(--bloom-bg\\)\\] {\n color: var(--bloom-bg);\n }\n .text-\\[var\\(--bloom-text\\)\\] {\n color: var(--bloom-text);\n }\n .text-\\[var\\(--bloom-text-body\\)\\] {\n color: var(--bloom-text-body);\n }\n .text-\\[var\\(--bloom-text-caption\\)\\] {\n color: var(--bloom-text-caption);\n }\n .text-\\[var\\(--bloom-text-display-xl\\)\\] {\n color: var(--bloom-text-display-xl);\n }\n .text-\\[var\\(--bloom-text-heading\\)\\] {\n color: var(--bloom-text-heading);\n }\n .text-\\[var\\(--bloom-text-micro\\)\\] {\n color: var(--bloom-text-micro);\n }\n .text-\\[var\\(--bloom-text-secondary\\)\\] {\n color: var(--bloom-text-secondary);\n }\n .text-\\[var\\(--bloom-text-subheading\\)\\] {\n color: var(--bloom-text-subheading);\n }\n .text-white {\n color: var(--color-white);\n }\n .lowercase {\n text-transform: lowercase;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 0 1px 4px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[var\\(--bloom-shadow\\)\\] {\n --tw-shadow: var(--bloom-shadow);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[var\\(--bloom-shadow-hover\\)\\] {\n --tw-shadow: var(--bloom-shadow-hover);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-\\[var\\(--bloom-duration\\)\\] {\n --tw-duration: var(--bloom-duration);\n transition-duration: var(--bloom-duration);\n }\n .duration-\\[var\\(--bloom-duration-fast\\)\\] {\n --tw-duration: var(--bloom-duration-fast);\n transition-duration: var(--bloom-duration-fast);\n }\n .ease-\\[var\\(--bloom-ease\\)\\] {\n --tw-ease: var(--bloom-ease);\n transition-timing-function: var(--bloom-ease);\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .duration-\\[var\\(--bloom-duration\\)\\] {\n animation-duration: var(--bloom-duration);\n }\n .duration-\\[var\\(--bloom-duration-fast\\)\\] {\n animation-duration: var(--bloom-duration-fast);\n }\n .ease-\\[var\\(--bloom-ease\\)\\] {\n animation-timing-function: var(--bloom-ease);\n }\n .ease-in-out {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n }\n .fade-in-0 {\n --tw-enter-opacity: 0;\n }\n .zoom-in-95 {\n --tw-enter-scale: .95;\n }\n .placeholder\\:text-\\[var\\(--bloom-text-secondary\\)\\]\\/60 {\n &::placeholder {\n color: var(--bloom-text-secondary);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--bloom-text-secondary) 60%, transparent);\n }\n }\n }\n .hover\\:-translate-y-\\[2px\\] {\n &:hover {\n @media (hover: hover) {\n --tw-translate-y: calc(2px * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n }\n .hover\\:-translate-y-\\[4px\\] {\n &:hover {\n @media (hover: hover) {\n --tw-translate-y: calc(4px * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n }\n .hover\\:scale-110 {\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .hover\\:border-\\[var\\(--bloom-surface2\\)\\] {\n &:hover {\n @media (hover: hover) {\n border-color: var(--bloom-surface2);\n }\n }\n }\n .hover\\:bg-\\[var\\(--bloom-accent1\\)\\]\\/20 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--bloom-accent1) 20%, transparent);\n }\n }\n }\n }\n .hover\\:bg-\\[var\\(--bloom-surface\\)\\] {\n &:hover {\n @media (hover: hover) {\n background-color: var(--bloom-surface);\n }\n }\n }\n .hover\\:bg-\\[var\\(--bloom-surface2\\)\\] {\n &:hover {\n @media (hover: hover) {\n background-color: var(--bloom-surface2);\n }\n }\n }\n .hover\\:text-\\[var\\(--bloom-text\\)\\] {\n &:hover {\n @media (hover: hover) {\n color: var(--bloom-text);\n }\n }\n }\n .hover\\:shadow-\\[var\\(--bloom-shadow-hover\\)\\] {\n &:hover {\n @media (hover: hover) {\n --tw-shadow: var(--bloom-shadow-hover);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n }\n .focus\\:border-\\[var\\(--bloom-accent1-deep\\)\\] {\n &:focus {\n border-color: var(--bloom-accent1-deep);\n }\n }\n .focus\\:ring-\\[4px\\] {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus\\:ring-\\[var\\(--bloom-accent1\\)\\]\\/20 {\n &:focus {\n --tw-ring-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--bloom-accent1) 20%, transparent);\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-\\[4px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-\\[var\\(--bloom-accent1\\)\\]\\/20 {\n &:focus-visible {\n --tw-ring-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--bloom-accent1) 20%, transparent);\n }\n }\n }\n .focus-visible\\:ring-\\[var\\(--bloom-accent1\\)\\]\\/30 {\n &:focus-visible {\n --tw-ring-color: var(--bloom-accent1);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-ring-color: color-mix(in oklab, var(--bloom-accent1) 30%, transparent);\n }\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .active\\:translate-y-0 {\n &:active {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .active\\:scale-\\[0\\.98\\] {\n &:active {\n scale: 0.98;\n }\n }\n .active\\:cursor-grabbing {\n &:active {\n cursor: grabbing;\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .data-\\[disabled\\]\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\]\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .data-\\[highlighted\\]\\:bg-\\[var\\(--bloom-surface2\\)\\] {\n &[data-highlighted] {\n background-color: var(--bloom-surface2);\n }\n }\n .data-\\[state\\=active\\]\\:bg-\\[var\\(--bloom-surface2\\)\\] {\n &[data-state=active] {\n background-color: var(--bloom-surface2);\n }\n }\n .data-\\[state\\=active\\]\\:text-\\[var\\(--bloom-text\\)\\] {\n &[data-state=active] {\n color: var(--bloom-text);\n }\n }\n .data-\\[state\\=checked\\]\\:translate-x-\\[25px\\] {\n &[data-state=checked] {\n --tw-translate-x: 25px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .data-\\[state\\=checked\\]\\:bg-\\[var\\(--bloom-accent1-deep\\)\\] {\n &[data-state=checked] {\n background-color: var(--bloom-accent1-deep);\n }\n }\n .data-\\[state\\=closed\\]\\:animate-out {\n &[data-state=closed] {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n }\n }\n .data-\\[state\\=closed\\]\\:fade-out-0 {\n &[data-state=closed] {\n --tw-exit-opacity: 0;\n }\n }\n .data-\\[state\\=closed\\]\\:zoom-out-95 {\n &[data-state=closed] {\n --tw-exit-scale: .95;\n }\n }\n .data-\\[state\\=open\\]\\:animate-in {\n &[data-state=open] {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n }\n .data-\\[state\\=open\\]\\:fade-in-0 {\n &[data-state=open] {\n --tw-enter-opacity: 0;\n }\n }\n .data-\\[state\\=open\\]\\:zoom-in-95 {\n &[data-state=open] {\n --tw-enter-scale: .95;\n }\n }\n .data-\\[state\\=unchecked\\]\\:translate-x-\\[3px\\] {\n &[data-state=unchecked] {\n --tw-translate-x: 3px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n}\n@layer bloom.tokens {\n :root {\n --bloom-accent1: #B8D4C8;\n --bloom-accent1-deep: #6B9E8A;\n --bloom-accent2: #E8C4A0;\n --bloom-accent2-deep: #C49460;\n --bloom-accent3: #C4B5D4;\n --bloom-accent3-deep: #8E72A8;\n --bloom-accent4: #D4A0A0;\n --bloom-accent4-deep: #A06060;\n --bloom-bg: #FDFBF7;\n --bloom-surface: #F7F3EC;\n --bloom-surface2: #F0EBE1;\n --bloom-text: #2C2A25;\n --bloom-text-secondary: #7A756B;\n }\n :root.dark,\n [data-theme=dark] {\n --bloom-bg: #1A1917;\n --bloom-surface: #242320;\n --bloom-surface2: #2E2D29;\n --bloom-text: #E8E4DB;\n --bloom-text-secondary: #9A9590;\n --bloom-accent1: #8EBAA8;\n --bloom-accent1-deep: #5A8A72;\n --bloom-accent2: #D4A878;\n --bloom-accent2-deep: #B07840;\n --bloom-accent3: #A898BC;\n --bloom-accent3-deep: #7A5E98;\n --bloom-accent4: #BC8080;\n --bloom-accent4-deep: #904848;\n }\n @media (prefers-color-scheme: dark) {\n :root:not(.light):not([data-theme=light]) {\n --bloom-bg: #1A1917;\n --bloom-surface: #242320;\n --bloom-surface2: #2E2D29;\n --bloom-text: #E8E4DB;\n --bloom-text-secondary: #9A9590;\n --bloom-accent1: #8EBAA8;\n --bloom-accent1-deep: #5A8A72;\n --bloom-accent2: #D4A878;\n --bloom-accent2-deep: #B07840;\n --bloom-accent3: #A898BC;\n --bloom-accent3-deep: #7A5E98;\n --bloom-accent4: #BC8080;\n --bloom-accent4-deep: #904848;\n }\n }\n}\n@layer bloom.tokens {\n :root {\n --bloom-font: "DM Sans", sans-serif;\n --bloom-font-display: "Fraunces", serif;\n --bloom-letter-wide: 0.12em;\n --bloom-letter-tight: -0.02em;\n --bloom-text-display-xl: 42px;\n --bloom-text-display: 32px;\n --bloom-text-heading: 24px;\n --bloom-text-subheading: 18px;\n --bloom-text-body: 15px;\n --bloom-text-caption: 13px;\n --bloom-text-micro: 11px;\n --bloom-leading-display-xl: 1.1;\n --bloom-leading-display: 1.2;\n --bloom-leading-heading: 1.3;\n --bloom-leading-subheading: 1.4;\n --bloom-leading-body: 1.6;\n --bloom-leading-caption: 1.5;\n --bloom-leading-micro: 1.4;\n }\n}\n@layer bloom.tokens {\n :root {\n --space-xs: 4px;\n --space-sm: 8px;\n --space-md: 12px;\n --space-lg: 16px;\n --space-xl: 24px;\n --space-2xl: 32px;\n --space-3xl: 48px;\n --space-4xl: 64px;\n }\n}\n@layer bloom.tokens {\n :root {\n --bloom-radius-sm: 12px;\n --bloom-radius: 16px;\n --bloom-radius-lg: 24px;\n --bloom-radius-pill: 999px;\n }\n}\n@layer bloom.tokens {\n :root {\n --bloom-ease: cubic-bezier(0.4, 0, 0.2, 1);\n --bloom-duration: 500ms;\n --bloom-duration-slow: 800ms;\n --bloom-duration-fast: 300ms;\n }\n}\n@layer bloom.tokens {\n :root {\n --bloom-shadow: 0 2px 24px rgba(44, 42, 37, 0.06);\n --bloom-shadow-hover: 0 8px 40px rgba(44, 42, 37, 0.1);\n --bloom-blur-blob: blur(60px);\n --bloom-blur-card: blur(40px);\n }\n :root.dark,\n [data-theme=dark] {\n --bloom-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);\n --bloom-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.3);\n }\n @media (prefers-color-scheme: dark) {\n :root:not(.light):not([data-theme=light]) {\n --bloom-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);\n --bloom-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.3);\n }\n }\n}\n@layer bloom.animations {\n @keyframes bloom-breathe {\n 0%, 100% {\n transform: scale(1);\n opacity: 0.7;\n }\n 50% {\n transform: scale(1.08);\n opacity: 1;\n }\n }\n @keyframes bloom-float {\n 0%, 100% {\n transform: translateY(0) scale(1);\n }\n 50% {\n transform: translateY(-8px) scale(1.02);\n }\n }\n @keyframes bloom-morph {\n 0%, 100% {\n border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;\n }\n 25% {\n border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;\n }\n 50% {\n border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%;\n }\n 75% {\n border-radius: 60% 30% 50% 40% / 70% 40% 60% 30%;\n }\n }\n @keyframes bloom-shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n }\n @keyframes bloom-shrink {\n 0% {\n width: 100%;\n }\n 100% {\n width: 0%;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n .bloom-reduced-motion *,\n .bloom-reduced-motion *::before,\n .bloom-reduced-motion *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n@layer bloom.base {\n .bloom {\n font-family: var(--bloom-font);\n font-size: var(--bloom-text-body);\n line-height: var(--bloom-leading-body);\n color: var(--bloom-text);\n background-color: var(--bloom-bg);\n }\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-x-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');
27
-
28
3
  // src/utils/cn.ts
29
4
  var _clsx = require('clsx');
30
5
  var _tailwindmerge = require('tailwind-merge');