@base-framework/ui 1.0.2014 → 1.0.2016

package/copilot.md

@@ -5,11 +5,12 @@ This repo is a UI component library for the Base Framework, organized with Atomi
 ## How things fit together
 - Runtime primitives come from external packages:
   - `@base-framework/base` supplies Component, Atom, Data, Jot, Events, router, NavLink, etc.
-  - `@base-framework/atoms` supplies DOM tag helpers (Div, Button, Input, Ul, Li, etc.) and reactive helpers (On, OnState, UseParent, OnStateOpen).
+  - `@base-framework/atoms` supplies DOM tag helpers (Div, Button, Input, Ul, Li, I, etc.) and reactive helpers (On, OnState, UseParent, OnStateOpen).
 - Local exports aggregate in `src/ui.js` and sub-entries in `vite.config.js`:
   - `@base-framework/ui` (index) exports everything from `components/*` and `utils/*`.
   - Subpath imports are enabled: `@base-framework/ui/atoms`, `.../icons`, `.../molecules`, `.../organisms`, `.../pages`, `.../templates`, `.../utils`.
 - Styling is Tailwind 4 with custom CSS vars (see `tailwind.config.js`). Use existing design tokens like `text-muted-foreground`, `bg-muted/10`, `border`, `ring`.
+- Icons are provided via the `Icons` object from `@base-framework/ui/icons` and rendered using the `Icon` atom or raw `I` element from `@base-framework/atoms`.
 
 ## Build and dev workflow
 - Install: npm i
@@ -33,6 +34,16 @@ This repo is a UI component library for the Base Framework, organized with Atomi
   - Subscriptions: `On('key', callback)` or `OnState/Open` utilities to react to state.
   - Parent context: `UseParent(({ state, ... }) => ...)` to access parent component refs.
 
+### Important: Atom argument patterns
+Atoms created with `Atom()` support flexible argument patterns:
+- **Props only**: `Div({ class: 'text' })`
+- **Text child only**: `Div('test')`
+- **Array children only**: `Div([Div('test')])`
+- **Props and text**: `Div({ class: 'text' }, 'test')`
+- **Props and array children**: `Div({ class: 'text' }, [Div('test')])`
+
+CRITICAL: When children is an array, pass it as the SECOND argument after props, NOT inside props.
+
 ## File layout to know
 - `src/components/atoms/**`: Base-level atoms and atom variants (e.g., buttons, icons, badges, tooltips, skeleton, veil).
 - `src/components/molecules/**`: Composition of atoms with light state (alerts, dropdowns, date/time pickers, theme toggle, counters, uploaders, etc.).
@@ -41,29 +52,239 @@ This repo is a UI component library for the Base Framework, organized with Atomi
 - `src/utils/**`: Utilities (formatting, image-scaler with pointer/zoom/drag helpers).
 - `src/ui.js`: Re-exports public surface used by `vite` lib entries.
 
+## Working with Icons (CRITICAL)
+
+Icons in this library come from Heroicons and are defined in `src/components/icons/icons.js`. They are stored as SVG strings in a nested object structure.
+
+### Icon Structure
+- Icons are organized hierarchically: `Icons.home`, `Icons.chat.default`, `Icons.chat.text`, `Icons.arrows.left`, etc.
+- Each icon is a raw SVG string with Heroicon styling
+
+### How to Use Icons (3 methods)
+
+#### Method 1: Using the Icon atom (RECOMMENDED)
+```javascript
+import { Icon } from '@base-framework/ui/atoms';
+import { Icons } from '@base-framework/ui/icons';
+
+// Pass icon SVG string as child
+Icon({ size: 'sm', class: 'text-blue-500' }, Icons.home)
+Icon({ size: 'md' }, Icons.chat.default)
+Icon({ size: 'lg' }, Icons.arrows.left)
+
+// Sizes: xs, sm, md, lg, xl, 2xl, 3xl (default: sm)
+```
+
+#### Method 2: Using raw I element
+```javascript
+import { I } from '@base-framework/atoms';
+import { Icons } from '@base-framework/ui/icons';
+
+// Use html prop to inject SVG
+I({ html: Icons.home, class: 'w-6 h-6' })
+I({ html: Icons.chat.dots })
+```
+
+#### Method 3: In Button with icon prop
+```javascript
+import { Button } from '@base-framework/ui/atoms';
+import { Icons } from '@base-framework/ui/icons';
+
+// Icon appears on left by default
+Button({ variant: 'withIcon', icon: Icons.plus }, 'Add Item')
+
+// Icon on right
+Button({ variant: 'withIcon', icon: Icons.arrows.right, position: 'right' }, 'Next')
+```
+
+### Common Icon Access Patterns
+```javascript
+// Simple icons (top-level)
+Icons.home, Icons.star, Icons.help, Icons.plus
+
+// Nested icons (use dot notation)
+Icons.chat.default, Icons.chat.text, Icons.chat.dots
+Icons.arrows.left, Icons.arrows.right, Icons.arrows.upDown
+Icons.adjustments.vertical, Icons.adjustments.horizontal
+
+// Icons with states
+Icons.locked, Icons.unlocked
+Icons.play, Icons.stop, Icons.playing
+```
+
+### CRITICAL MISTAKES TO AVOID
+❌ **WRONG**: `Icon(Icons.home)` - Missing props object
+❌ **WRONG**: `Icon({ icon: Icons.home })` - Don't use `icon` prop
+❌ **WRONG**: `I(Icons.home)` - Must use `html` prop
+❌ **WRONG**: `Icons['home']` - Use dot notation, not bracket
+❌ **WRONG**: `Icons.chat` - Incomplete path for nested icons
+
+✅ **CORRECT**: `Icon({ size: 'sm' }, Icons.home)`
+✅ **CORRECT**: `I({ html: Icons.home })`
+✅ **CORRECT**: `Icons.chat.default` (for nested icons)
+
 ## Tailwind and theming
 - Tailwind scans `./src/ui.js` and `./src/**/*.{js,ts,jsx,tsx}`. If you add files, keep them under `src` and referenced by exports for purge to include classes.
 - Use semantic tokens configured in `tailwind.config.js`: `primary`, `secondary`, `destructive`, `warning`, `muted`, `accent`, `popover`, `card`, `border`, `foreground`, with `DEFAULT` and `foreground` pairs.
 - Dark mode is `media`. Prefer classes already used (`data-[state=active]:...`, rounded tokens via `--radius`).
 
 ## Patterns by example
-- Functional Atom example (from `molecules/alert.js`):
-  - Compose small atoms: `Div` containers + `I` for icons + `H5/P` for text
-  - Type variants use lookup table → apply Tailwind classes from map
-- Variant pattern (from `atoms/buttons/buttons.js`):
-  - Define variant factories, then export a single `Button` Atom that dispatches by `props.variant`
-  - Icon handling via a shared `IconButton` Atom; support `position: 'right'`
-- Data-driven lists (from `molecules/dropdowns/dropdown.js`):
-  - `for: ['groups', (group) => ...]` to render nested collections
-- Stateful Component (from `organisms/panel.js`):
-  - `class Panel extends Component { declareProps() { this.class = '' } render() { return Div({ class: this.class }, this.children) } }`
-
-## Coding rules (do/don’t)
-- Do: import primitives from `@base-framework/atoms` and state tools from `@base-framework/base`; keep them as externals.
-- Do: export new public pieces from the appropriate barrel files (`components/*/atoms.js`, `.../molecules.js`, `.../organisms.js`, `pages.js`, `templates.js`, `utils.js`) so they are part of the library entry.
-- Do: keep Tailwind classes consistent with existing tokens; avoid raw hex colors.
-- Don’t: introduce React/Vue/JSX; this project uses Base’s declarative atoms/components.
-- Don’t: mutate DOM directly; use Atom/Component APIs and Data bindings.
+
+### Functional Atom (from `molecules/alert.js`)
+Compose small atoms: `Div` containers + `I` for icons + `H5/P` for text. Type variants use lookup table → apply Tailwind classes from map.
+
+```javascript
+import { Div, H5, I, P } from '@base-framework/atoms';
+import { Atom } from '@base-framework/base';
+
+const AlertIcon = (icon, iconColor) => (
+  Div({ class: `flex items-center justify-center h-6 w-6 mr-3 ${iconColor}` }, [
+    I({ html: icon })
+  ])
+);
+
+export const Alert = Atom(({ title, description, icon, type = 'default' }) => {
+  const { borderColor, bgColor, iconColor } = typeStyles[type];
+  return Div({ class: `flex items-start p-4 border rounded-lg ${bgColor} ${borderColor}` }, [
+    icon && AlertIcon(icon, iconColor),
+    Div({ class: 'flex flex-col' }, [
+      H5({ class: 'font-semibold' }, title),
+      P({ class: 'text-sm text-muted-foreground' }, description)
+    ])
+  ]);
+});
+```
+
+### Variant pattern (from `atoms/buttons/buttons.js`)
+Define variant factories, then export a single `Button` Atom that dispatches by `props.variant`. Icon handling via a shared `IconButton` Atom; support `position: 'right'`.
+
+```javascript
+import { Button as BaseButton } from '@base-framework/atoms';
+import { Atom } from '@base-framework/base';
+import { Icon } from '../icon.js';
+
+const IconButton = Atom((props, children) => (
+  BaseButton({
+    ...props,
+    class: props.class
+  }, [
+    props.icon && props.position !== 'right' ? Icon({ size: 'sm' }, props.icon) : null,
+    ...(children || []),
+    props.icon && props.position === 'right' ? Icon({ size: 'sm' }, props.icon) : null
+  ])
+));
+
+const BUTTON_VARIANTS = {
+  primary: DefaultVariant({ class: 'primary' }),
+  withIcon: WithIconVariant({ class: 'with-icon' })
+};
+
+export const Button = Atom((props, children) => {
+  const VariantButton = BUTTON_VARIANTS[props.variant] || BUTTON_VARIANTS.primary;
+  return VariantButton(props, children);
+});
+```
+
+### Data-driven lists (from `molecules/dropdowns/dropdown.js`)
+Use `for: ['collectionKey', (item) => ...]` to render nested collections from component state.
+
+```javascript
+export const Dropdown = (onSelect) => (
+  Div({ class: 'w-full z-10' }, [
+    Div({
+      class: 'max-h-60 border rounded-md',
+      for: ['groups', (group) => Group(group, onSelect)]
+    })
+  ])
+);
+```
+
+### Stateful Component (from `organisms/lists/data-table.js`)
+Use `Component` with `Data` for state management and `declareProps()` for type hints.
+
+```javascript
+import { Component, Data } from '@base-framework/base';
+
+export class DataTable extends Component {
+  declareProps() {
+    this.rows = [];
+    this.headers = [];
+  }
+
+  setData() {
+    return new Data({
+      selectedRows: [],
+      hasItems: this.rows && this.rows.length > 0
+    });
+  }
+
+  render() {
+    return Div({ class: 'w-full' }, [
+      Table([
+        TableHeader({ headers: this.headers }),
+        DataTableBody({ rows: this.rows })
+      ])
+    ]);
+  }
+}
+```
+
+## Import Patterns (CRITICAL)
+
+### External Framework Imports
+```javascript
+// DOM elements and reactive utilities
+import { Div, Button, Input, I, Ul, Li, H5, P } from '@base-framework/atoms';
+import { On, OnState, UseParent } from '@base-framework/atoms';
+
+// Core framework classes and utilities
+import { Atom, Component, Data, Jot } from '@base-framework/base';
+```
+
+### Internal Library Imports
+```javascript
+// Icons (most common mistake area)
+import { Icons } from '@base-framework/ui/icons';
+import { Icon } from '@base-framework/ui/atoms';
+
+// Components from this library
+import { Button, Alert } from '@base-framework/ui/atoms';
+import { Form, Dropdown } from '@base-framework/ui/molecules';
+import { DataTable } from '@base-framework/ui/organisms';
+```
+
+### Relative Imports (when authoring components IN this library)
+```javascript
+// From within src/components/
+import { Icons } from '../../icons/icons.js';
+import { Icon } from '../icon.js';
+import { Button as BaseButton } from '@base-framework/atoms';
+```
+
+## Coding rules (do/don't)
+
+### DO:
+- ✅ Import primitives from `@base-framework/atoms` (Div, Button, I, etc.)
+- ✅ Import framework tools from `@base-framework/base` (Atom, Component, Data)
+- ✅ Pass children array as SECOND argument: `Div({ class: 'wrapper' }, [child1, child2])`
+- ✅ Use `Icons` object from `@base-framework/ui/icons` for all icons
+- ✅ Use `Icon` atom with SVG string as child: `Icon({ size: 'sm' }, Icons.home)`
+- ✅ Use `I({ html: iconString })` for raw icon rendering
+- ✅ Export new components from appropriate barrel files
+- ✅ Use Tailwind semantic tokens (primary, muted-foreground, etc.)
+- ✅ Use `map: [array, fn]` or `for: ['key', fn]` for lists
+- ✅ Use `bind: 'path'` or `bind: [state, 'key']` for two-way binding
+
+### DON'T:
+- ❌ Pass children inside props object: `Div({ children: [...] })`
+- ❌ Use `icon` prop on Icon atom: `Icon({ icon: Icons.home })`
+- ❌ Pass icon directly without props: `Icon(Icons.home)`
+- ❌ Use React/Vue/JSX syntax
+- ❌ Mutate DOM directly (use Data bindings instead)
+- ❌ Use raw hex colors (use Tailwind tokens)
+- ❌ Import Icons from wrong path
+- ❌ Create new icon implementations (use existing Icon atom)
+- ❌ Forget to spread props: always use `{ ...defaultProps, ...props }`
 
 ## Adding a new component (checklist)
 1) Decide Atom vs Component (stateless vs stateful/interactive)
@@ -72,9 +293,131 @@ This repo is a UI component library for the Base Framework, organized with Atomi
 4) If it needs data/state, use `Data`/`Jot`, `On`, `bind`, `for` as seen in existing components
 5) Run dev server and verify render; run build to ensure types emit
 
+## Common Mistakes & Troubleshooting
+
+### Issue: Icons not rendering
+**Symptoms**: Icons appear as blank or broken
+**Causes**:
+1. Wrong import path for Icons
+2. Incorrect Icon usage syntax
+3. Missing `html` prop on I element
+
+**Solutions**:
+```javascript
+// ✅ Correct ways
+import { Icons } from '@base-framework/ui/icons';
+Icon({ size: 'sm' }, Icons.home)
+I({ html: Icons.home })
+
+// ❌ Wrong ways
+Icon(Icons.home) // Missing props object
+Icon({ icon: Icons.home }) // Wrong prop name
+I(Icons.home) // Missing html prop
+```
+
+### Issue: Children not rendering
+**Symptoms**: Child components/text not appearing
+**Cause**: Passing children in props object instead of as second argument
+
+**Solution**:
+```javascript
+// ✅ Correct
+Div({ class: 'wrapper' }, [
+  Div('child 1'),
+  Div('child 2')
+])
+
+// ❌ Wrong
+Div({
+  class: 'wrapper',
+  children: [Div('child')]
+})
+```
+
+### Issue: Component not reactive
+**Symptoms**: UI doesn't update when data changes
+**Cause**: Not using Data or proper bindings
+
+**Solution**:
+```javascript
+// ✅ Use Data in Component
+setData() {
+  return new Data({ count: 0 });
+}
+
+// ✅ Use bind for two-way binding
+Input({ bind: 'username' })
+Input({ bind: [externalState, 'email'] })
+```
+
+### Issue: List not rendering
+**Symptoms**: Array of items not displaying
+**Cause**: Using regular map instead of Base's reactive patterns
+
+**Solution**:
+```javascript
+// ✅ Use map prop
+Ul({ map: [items, (item) => Li(item.name)] })
+
+// ✅ Use for with state key
+Div({ for: ['items', (item) => ItemComponent(item)] })
+
+// ❌ Wrong - regular JS map
+Ul([items.map(item => Li(item.name))])
+```
+
 ## Commands reference
 - Dev: `npm run dev`
 - Build: `npm run build`
 - Preview: `npm run preview`
 
+## Quick Reference Card
+
+### Component Creation
+```javascript
+// Atom (stateless)
+export const MyAtom = Atom((props, children) => (
+  Div({ class: props.class }, children)
+));
+
+// Component (stateful)
+export class MyComponent extends Component {
+  declareProps() {
+    this.items = [];
+  }
+
+  setData() {
+    return new Data({ selected: null });
+  }
+
+  render() {
+    return Div([/* ... */]);
+  }
+}
+```
+
+### Icon Usage Quick Reference
+```javascript
+// In Button
+Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
+
+// Standalone
+Icon({ size: 'md', class: 'text-primary' }, Icons.home)
+
+// Raw SVG
+I({ html: Icons.check, class: 'w-5 h-5' })
+```
+
+### Event Handlers
+```javascript
+// Click
+Button({ click: (e) => console.log('clicked') }, 'Click')
+
+// Submit (in Form)
+Form({ submit: (e, parent) => handleSubmit(e) }, [...])
+
+// State-based callbacks
+Button({ onState: ['key', { key: 'value' }] }, 'State Button')
+```
+
 If anything seems unclear (e.g., preferred binding patterns or where to export), ask for confirmation before large changes.

package/dist/{empty-state-CkoAZpy0.js → empty-state-B2M6T2d1.js}

@@ -1,6 +1,6 @@
 import { Div as n, H5 as X, P as b, I as x, Li as q, Span as a, Ul as Y, Button as m, OnState as D, Label as A, H2 as S, Form as Z, Header as F, Footer as M, A as V, H3 as ee, Checkbox as te, Input as f, Img as _, Nav as se, UseParent as W, OnStateOpen as P, Time as oe, Dialog as ne } from "@base-framework/atoms";
 import { Atom as c, Component as y, Html as O, Dom as re, base as le, Data as T, Builder as G, Jot as w, Events as p, DateTime as L } from "@base-framework/base";
-import { P as I, b as ie, R as ae } from "./range-calendar-CCVC3e9d.js";
+import { P as I, b as ie, R as ae } from "./range-calendar-DqVS8ooC.js";
 import { C as ce, F as ue } from "./form-group-CJzpq9Us.js";
 import { B as h, I as g } from "./buttons-CHEs54Wl.js";
 import { Icons as u } from "./icons.es.js";

package/dist/index.es.js

@@ -4,9 +4,9 @@ import { C as T, F as b } from "./form-group-CJzpq9Us.js";
 import { C as I, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as H } from "./inputs-9udyzkHR.js";
 import { V as w, a as A } from "./veil-CqnAmj-D.js";
 import { Icons as O } from "./icons.es.js";
-import { A as V, B as j, C as q, w as J, K as z, y as K, z as Q, E as _, G as X, D as Y, m as Z, n as $, Q as aa, O as ea, v as sa, c as oa, a as ta, b as ra, R as na, l as la, g as ia, i as pa, h as da, j as ma, e as ua, k as ga, F as Ca, d as ca, f as Ta, I as ba, L as Da, x as Ia, M as Sa, o as Fa, N as Ba, P as Pa, s as ka, t as Ma, S as xa, q as fa, r as va, T as Na, H as ya, J as ha, p as Ua, u as La } from "./empty-state-CkoAZpy0.js";
-import { A as Ha, b as Ra, C as wa, D as Aa, a as Ga, F as Oa, M as Ea, P as Va, R as ja, c as qa, g as Ja, p as za } from "./range-calendar-CCVC3e9d.js";
-import { B as Qa, p as _a, C as Xa, j as Ya, D as Za, m as $a, k as ae, H as ee, I as se, N as oe, O as te, P as re, S as ne, n as le, o as ie, x as pe, s as de, q as me, r as ue, T as ge, t as Ce, w as ce, u as Te, v as be, l as De, U as Ie, W as Se, f as Fe, h as Be, i as Pe, c as ke, d as Me, b as xe, e as fe, a as ve, g as Ne } from "./signature-panel-DIFmtS0f.js";
+import { A as V, B as j, C as q, w as J, K as z, y as K, z as Q, E as _, G as X, D as Y, m as Z, n as $, Q as aa, O as ea, v as sa, c as oa, a as ta, b as ra, R as na, l as la, g as ia, i as pa, h as da, j as ma, e as ua, k as ga, F as Ca, d as ca, f as Ta, I as ba, L as Da, x as Ia, M as Sa, o as Fa, N as Ba, P as Pa, s as ka, t as Ma, S as xa, q as fa, r as va, T as Na, H as ya, J as ha, p as Ua, u as La } from "./empty-state-B2M6T2d1.js";
+import { A as Ha, b as Ra, C as wa, D as Aa, a as Ga, F as Oa, M as Ea, P as Va, R as ja, c as qa, g as Ja, p as za } from "./range-calendar-DqVS8ooC.js";
+import { B as Qa, p as _a, C as Xa, j as Ya, D as Za, m as $a, k as ae, H as ee, I as se, N as oe, O as te, P as re, S as ne, n as le, o as ie, x as pe, s as de, q as me, r as ue, T as ge, t as Ce, w as ce, u as Te, v as be, l as De, U as Ie, W as Se, f as Fe, h as Be, i as Pe, c as ke, d as Me, b as xe, e as fe, a as ve, g as Ne } from "./signature-panel-C50P9GW4.js";
 import { B as he, I as Ue, M as Le, d as We, e as He, g as Re, N as we, b as Ae, a as Ge, f as Oe, P as Ee, c as Ve, S as je, T as qe } from "./mobile-nav-wrapper-Dm9DinRD.js";
 import { B as ze, a as Ke, C as Qe, F as _e, b as Xe, c as Ye, M as Ze, P as $e, S as as } from "./sidebar-menu-page-D4WMgz5U.js";
 import { A as ss, F as os, M as ts, a as rs, T as ns } from "./aside-template-sUm-F2f0.js";

package/dist/molecules.es.js

@@ -1,5 +1,5 @@
-import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-CkoAZpy0.js";
-import { A as W, P as X, g as Y } from "./range-calendar-CCVC3e9d.js";
+import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-B2M6T2d1.js";
+import { A as W, P as X, g as Y } from "./range-calendar-DqVS8ooC.js";
 export {
   s as Alert,
   W as Avatar,

package/dist/organisms.es.js

@@ -1,5 +1,5 @@
-import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-DIFmtS0f.js";
-import { b as R, C as j, D as q, a as z, F as A, M as E, R as J, c as K, p as Q } from "./range-calendar-CCVC3e9d.js";
+import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-C50P9GW4.js";
+import { b as R, C as j, D as q, a as z, F as A, M as E, R as J, c as K, p as Q } from "./range-calendar-DqVS8ooC.js";
 import { B as X, I as Y, M as Z, d as _, e as $, g as aa, N as ea, b as sa, a as na, f as ta, P as oa, c as ra, S as la, T as ia } from "./mobile-nav-wrapper-Dm9DinRD.js";
 export {
   s as BackButton,

package/dist/{range-calendar-CCVC3e9d.js → range-calendar-DqVS8ooC.js}

@@ -1,21 +1,21 @@
 import { Div as h, Img as _, Span as H, Button as L, OnState as J, On as z } from "@base-framework/atoms";
-import { Component as Y, Data as B, Atom as j, DateTime as T } from "@base-framework/base";
+import { Component as B, Data as j, Atom as T, DateTime as O } from "@base-framework/base";
 import { B as m } from "./buttons-CHEs54Wl.js";
 import { Icons as P } from "./icons.es.js";
-const U = (n, t) => {
-  const e = n ? n.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = t.getBoundingClientRect(), s = 10, r = globalThis.scrollX, l = globalThis.scrollY;
-  let i = e.left + r, d = e.bottom + l;
-  const g = globalThis.innerHeight - e.bottom, f = e.top;
-  return i + a.width > globalThis.innerWidth && (i = globalThis.innerWidth - a.width - s), g < a.height && f > g ? d = e.top + l - a.height - s : g < a.height && (d = e.bottom + l - (a.height - g) - s), { x: i, y: d };
+const U = (e, t) => {
+  const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = t.getBoundingClientRect(), s = 10, r = globalThis.scrollX, l = globalThis.scrollY;
+  let i = n.left + r, d = n.bottom + l;
+  const g = globalThis.innerHeight - n.bottom, f = n.top;
+  return i + a.width > globalThis.innerWidth && (i = globalThis.innerWidth - a.width - s), g < a.height && f > g ? d = n.top + l - a.height - s : g < a.height && (d = n.bottom + l - (a.height - g) - s), { x: i, y: d };
 };
-class Pt extends Y {
+class Tt extends B {
   /**
    * This will set up the data.
    *
    * @returns {object}
    */
   setData() {
-    const t = this.parent.data || new B();
+    const t = this.parent.data || new j();
     return t.set({
       position: { x: 0, y: 0 }
     }), t;
@@ -59,7 +59,7 @@ class Pt extends Y {
     return h({
       class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
       popover: "manual",
-      toggle: (e, { state: a }) => e.newState === "closed" ? a.open = !1 : null,
+      toggle: (n, { state: a }) => n.newState === "closed" ? a.open = !1 : null,
       style: "top: [[position.y]]px; left: [[position.x]]px"
     }, this.children);
   }
@@ -84,7 +84,7 @@ class Pt extends Y {
    * @returns {void}
    */
   updatePosition() {
-    const t = this.button ?? null, e = this.panel, a = U(t, e);
+    const t = this.button ?? null, n = this.panel, a = U(t, n);
     this.data.position = a;
   }
   /**
@@ -136,17 +136,20 @@ class Pt extends Y {
     this.panel.hidePopover();
   }
 }
-const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[") === -1 ? null : _({
-  class: "absolute w-full h-full rounded-full object-cover fadeIn",
-  src: n,
+const q = T(({ src: e, alt: t, class: n }) => !e || (n = n || "", e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : _({
+  class: `absolute w-full h-full rounded-full object-cover fadeIn ${n}`,
+  src: e,
   alt: t,
-  load: (e) => e.target.style.visibility = "visible",
+  load: (a) => a.target.style.visibility = "visible",
   /**
    * If there's an error loading the image, hide it.
    */
-  error: (e) => e.target.style.visibility = "hidden"
-})), K = (n) => n && (Array.isArray(n) && (n = n.join(" ")), typeof n != "string" && (n = String(n)), n.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), G = (n) => !n || n.length < 2 ? n : K(n), Q = (n) => H([n, (t, e) => {
-  e.textContent = G(t);
+  error: (a) => a.target.style.visibility = "hidden"
+})), K = T(({ src: e, alt: t }) => !e || e.indexOf(".") === -1 && e.indexOf("[[") === -1 ? null : q({
+  src: e,
+  alt: t
+})), Q = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), G = (e) => !e || e.length < 2 ? e : Q(e), V = (e) => H([e, (t, n) => {
+  n.textContent = G(t);
 }]), A = {
   xs: "h-6 w-6",
   sm: "h-8 w-8",
@@ -167,8 +170,8 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
   "3xl": "text-4xl",
   "4xl": "text-5xl",
   default: "text-base"
-}, V = (n) => A[n] || A.default, Z = (n) => I[n] || I.default, tt = (n, t = null, e = "md") => {
-  const a = G(n), s = Z(e);
+}, Z = (e) => A[e] || A.default, tt = (e) => I[e] || I.default, et = (e, t = null, n = "md") => {
+  const a = G(e), s = tt(n);
   return h(
     {
       class: `
@@ -178,52 +181,52 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
 		`
     },
     [
-      t ? Q(t) : H({ class: "uppercase" }, a)
+      t ? V(t) : H({ class: "uppercase" }, a)
     ]
   );
-}, Tt = j(({ src: n, alt: t, fallbackText: e, watcherFallback: a, size: s }) => {
-  const r = V(s);
+}, Ot = T(({ src: e, alt: t, fallbackText: n, watcherFallback: a, size: s }) => {
+  const r = Z(s);
   return h(
     {
       class: `relative flex items-center justify-center ${r}`
     },
     [
-      q({ src: n, alt: t }),
-      tt(e, a, s)
+      K({ src: e, alt: t }),
+      et(n, a, s)
     ]
   );
-}), et = ({ currentMonth: n, currentYear: t, onSelect: e }) => h(
+}), nt = ({ currentMonth: e, currentYear: t, onSelect: n }) => h(
   { class: "grid grid-cols-3 gap-2" },
-  T.monthNames.map(
+  O.monthNames.map(
     (a, s) => m(
       {
         click: (r) => {
-          r.preventDefault(), r.stopPropagation(), e(s);
+          r.preventDefault(), r.stopPropagation(), n(s);
         },
-        variant: n === s ? "primary" : "ghost",
+        variant: e === s ? "primary" : "ghost",
         "aria-label": `Select ${a} ${t}`
       },
       a.substring(0, 3)
     )
   )
-), D = (n) => (n *= 1, n < 10 ? `0${n}` : String(n)), nt = (n) => (n.indexOf("T") === -1 && n.indexOf(" ") === -1 && (n += "T00:00:01"), n.replace(" ", "T"), n), w = (n, t, e) => `${n}-${D(t + 1)}-${D(e)}`, at = (n) => n ? "bg-accent text-primary" : "", st = (n) => n ? "text-muted-foreground opacity-50" : "", rt = (n, t) => n === t, ot = (n, t) => rt(n, t) ? "bg-primary text-primary-foreground" : "", it = (n, t, e, a) => {
-  const s = ot(t, a);
-  return s || (n ? at(n) : e ? st(e) : "text-foreground");
-}, N = (n) => {
+), D = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), at = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), w = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, st = (e) => e ? "bg-accent text-primary" : "", rt = (e) => e ? "text-muted-foreground opacity-50" : "", ot = (e, t) => e === t, it = (e, t) => ot(e, t) ? "bg-primary text-primary-foreground" : "", lt = (e, t, n, a) => {
+  const s = it(t, a);
+  return s || (e ? st(e) : n ? rt(n) : "text-foreground");
+}, N = (e) => {
   const {
     day: t,
-    currentDate: e,
+    currentDate: n,
     date: a,
     isToday: s,
     isOutsideMonth: r,
     select: l,
     disabled: i
-  } = n;
+  } = e;
   return L(
     {
       class: `
 				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
-				${it(s, e, r, a)}
+				${lt(s, n, r, a)}
 				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
                 disabled:pointer-events-none disabled:opacity-50
 			`,
@@ -234,10 +237,10 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
     },
     t.toString()
   );
-}, O = (n, t, e, a) => n === a.date && t === a.month && e === a.year, lt = (n, t, e, a = !1) => {
-  const { year: s, month: r } = n, l = w(s, r, n.date), i = new Date(s, r, 1).getDay(), d = new Date(s, r + 1, 0).getDate(), g = new Date(s, r, 0).getDate(), f = [], C = r === 0 ? 11 : r - 1, v = r === 0 ? s - 1 : s;
+}, Y = (e, t, n, a) => e === a.date && t === a.month && n === a.year, ct = (e, t, n, a = !1) => {
+  const { year: s, month: r } = e, l = w(s, r, e.date), i = new Date(s, r, 1).getDay(), d = new Date(s, r + 1, 0).getDate(), g = new Date(s, r, 0).getDate(), f = [], C = r === 0 ? 11 : r - 1, v = r === 0 ? s - 1 : s;
   for (let o = i - 1; o >= 0; o--) {
-    const u = g - o, p = O(u, C, v, t), y = new Date(v, C, u) < new Date(t.year, t.month, t.date), x = a && y;
+    const u = g - o, p = Y(u, C, v, t), y = new Date(v, C, u) < new Date(t.year, t.month, t.date), x = a && y;
     f.push(
       N({
         day: u,
@@ -245,13 +248,13 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
         date: w(v, C, u),
         isToday: p,
         isOutsideMonth: !0,
-        select: e,
+        select: n,
         disabled: x
       })
     );
   }
   for (let o = 1; o <= d; o++) {
-    const u = O(o, r, s, t), p = new Date(s, r, o) < new Date(t.year, t.month, t.date), y = a && p;
+    const u = Y(o, r, s, t), p = new Date(s, r, o) < new Date(t.year, t.month, t.date), y = a && p;
     f.push(
       N({
         day: o,
@@ -259,14 +262,14 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
         date: w(s, r, o),
         isToday: u,
         isOutsideMonth: !1,
-        select: e,
+        select: n,
         disabled: y
       })
     );
   }
   const b = r === 11 ? 0 : r + 1, $ = r === 11 ? s + 1 : s, c = (7 - f.length % 7) % 7;
   for (let o = 1; o <= c; o++) {
-    const u = O(o, b, $, t), p = new Date($, b, o) < new Date(t.year, t.month, t.date), y = a && p;
+    const u = Y(o, b, $, t), p = new Date($, b, o) < new Date(t.year, t.month, t.date), y = a && p;
     f.push(
       N({
         day: o,
@@ -274,59 +277,59 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
         date: w($, b, o),
         isToday: u,
         isOutsideMonth: !0,
-        select: e,
+        select: n,
         disabled: y
       })
     );
   }
   return f;
-}, R = ({ label: n, click: t }) => m(
+}, R = ({ label: e, click: t }) => m(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
 			opacity-50 hover:opacity-100 text-muted-foreground absolute
-			${n === "Previous" ? "left-1" : "right-1"}
+			${e === "Previous" ? "left-1" : "right-1"}
 			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 		  `,
     click: t,
-    "aria-label": `${n} month`,
+    "aria-label": `${e} month`,
     variant: "icon",
-    icon: n === "Previous" ? P.chevron.single.left : P.chevron.single.right
+    icon: e === "Previous" ? P.chevron.single.left : P.chevron.single.right
   }
-), ct = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
-  m({ click: n, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+), ht = ({ onMonthClick: e, onYearClick: t, next: n, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  m({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
   m({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
   R({ label: "Previous", click: a }),
-  R({ label: "Next", click: e })
-]), ht = (n) => h(
+  R({ label: "Next", click: n })
+]), ut = (e) => h(
   { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
-  n
-), ut = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ht), dt = (n) => h({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
-  ct({
-    onMonthClick: n.onMonthClick,
-    onYearClick: n.onYearClick,
-    next: n.next,
-    previous: n.previous
+  e
+), dt = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ut), gt = (e) => h({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
+  ht({
+    onMonthClick: e.onMonthClick,
+    onYearClick: e.onYearClick,
+    next: e.next,
+    previous: e.previous
   }),
   h({
     class: "flex flex-auto flex-col w-full",
     onSet: [
       "currentDate",
       () => [
-        h({ class: "grid grid-cols-7" }, ut()),
+        h({ class: "grid grid-cols-7" }, dt()),
         h(
           { class: "grid grid-cols-7" },
-          lt(
-            n.current,
-            n.today,
-            n.select,
-            n.blockPriorDates
+          ct(
+            e.current,
+            e.today,
+            e.select,
+            e.blockPriorDates
           )
         )
       ]
     ]
   })
-]), gt = ({ currentMonth: n, currentYear: t, onSelect: e }) => {
+]), ft = ({ currentMonth: e, currentYear: t, onSelect: n }) => {
   const a = t - 50, s = Array.from({ length: 101 }, (r, l) => a + l);
   return h(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
@@ -334,7 +337,7 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
       (r) => m(
         {
           click: (l) => {
-            l.preventDefault(), l.stopPropagation(), e(r);
+            l.preventDefault(), l.stopPropagation(), n(r);
           },
           variant: r === t ? "primary" : "ghost",
           "aria-label": `Select ${r}`
@@ -344,7 +347,7 @@ const q = j(({ src: n, alt: t }) => !n || n.indexOf(".") === -1 && n.indexOf("[[
     )
   );
 };
-class Nt extends Y {
+class Nt extends B {
   /**
    * This will declare the props for the compiler.
    *
@@ -360,8 +363,8 @@ class Nt extends Y {
    * @returns {Date}
    */
   getSelectedDate(t) {
-    const e = this.selectedDate ? new Date(nt(this.selectedDate)) : t;
-    return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+    const n = this.selectedDate ? new Date(at(this.selectedDate)) : t;
+    return new Date(n.getFullYear(), n.getMonth(), n.getDate());
   }
   /**
    * This will set up the data for the calendar.
@@ -369,13 +372,13 @@ class Nt extends Y {
    * @returns {Data}
    */
   setData() {
-    const t = /* @__PURE__ */ new Date(), e = this.getSelectedDate(t), a = e.getMonth();
-    return new B({
+    const t = /* @__PURE__ */ new Date(), n = this.getSelectedDate(t), a = n.getMonth();
+    return new j({
       monthName: this.getMonthName(a),
-      currentDate: `${e.getFullYear()}-${a + 1}-${e.getDate()}`,
+      currentDate: `${n.getFullYear()}-${a + 1}-${n.getDate()}`,
       current: {
-        date: e.getDate(),
-        year: e.getFullYear(),
+        date: n.getDate(),
+        year: n.getFullYear(),
         month: a
       },
       today: {
@@ -403,7 +406,7 @@ class Nt extends Y {
    * @returns {string}
    */
   getMonthName(t) {
-    return T.monthNames[t];
+    return O.monthNames[t];
   }
   /**
    * This will go to the previous month.
@@ -412,8 +415,8 @@ class Nt extends Y {
    */
   goToPreviousMonth() {
     const t = this.data;
-    let e = t.current.month, a = t.current.year;
-    e === 0 ? (e = 11, a--) : e--, this.setCurrentDate(e, a);
+    let n = t.current.month, a = t.current.year;
+    n === 0 ? (n = 11, a--) : n--, this.setCurrentDate(n, a);
   }
   /**
    * This will go to the next month.
@@ -422,8 +425,8 @@ class Nt extends Y {
    */
   goToNextMonth() {
     const t = this.data;
-    let e = t.current.month, a = t.current.year;
-    e === 11 ? (e = 0, a++) : e++, this.setCurrentDate(e, a);
+    let n = t.current.month, a = t.current.year;
+    n === 11 ? (n = 0, a++) : n++, this.setCurrentDate(n, a);
   }
   /**
    * This will set the current month and year.
@@ -433,9 +436,9 @@ class Nt extends Y {
    * @param {number} [date=null]
    * @returns {void}
    */
-  setCurrentDate(t, e, a = null) {
+  setCurrentDate(t, n, a = null) {
     const s = this.data;
-    s.current.month = t, s.current.year = e, typeof a == "number" && (s.current.date = D(a)), s.currentDate = `${e}-${D(t + 1)}-${s.current.date}`, s.monthName = this.getMonthName(t);
+    s.current.month = t, s.current.year = n, typeof a == "number" && (s.current.date = D(a)), s.currentDate = `${n}-${D(t + 1)}-${s.current.date}`, s.monthName = this.getMonthName(t);
   }
   /**
    * This will select a date.
@@ -444,8 +447,8 @@ class Nt extends Y {
    * @returns {void}
    */
   selectDate(t) {
-    const e = /* @__PURE__ */ new Date(t + "T00:00:00");
-    this.setCurrentDate(e.getMonth(), e.getFullYear(), e.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
+    const n = /* @__PURE__ */ new Date(t + "T00:00:00");
+    this.setCurrentDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
   }
   /**
    * This will render the calendar.
@@ -457,38 +460,38 @@ class Nt extends Y {
       J("view", (t) => {
         switch (t) {
           case "months":
-            return et(
+            return nt(
               {
                 currentMonth: this.data.current.month,
                 currentYear: this.data.current.year,
-                onSelect: (e) => {
-                  this.setCurrentDate(e, this.data.current.year), this.state.view = "calendar";
+                onSelect: (n) => {
+                  this.setCurrentDate(n, this.data.current.year), this.state.view = "calendar";
                 }
               }
             );
           case "years":
-            return gt(
+            return ft(
               {
                 currentMonth: this.data.current.month,
                 currentYear: this.data.current.year,
-                onSelect: (e) => {
-                  this.setCurrentDate(this.data.current.month, e), this.state.view = "calendar";
+                onSelect: (n) => {
+                  this.setCurrentDate(this.data.current.month, n), this.state.view = "calendar";
                 }
               }
             );
           default:
-            return dt({
+            return gt({
               current: this.data.current,
               today: this.data.today,
-              select: (e) => this.selectDate(e),
+              select: (n) => this.selectDate(n),
               next: () => this.goToNextMonth(),
               previous: () => this.goToPreviousMonth(),
               blockPriorDates: this.blockPriorDates || !1,
-              onMonthClick: (e) => {
-                e.preventDefault(), e.stopPropagation(), this.state.view = "months";
+              onMonthClick: (n) => {
+                n.preventDefault(), n.stopPropagation(), this.state.view = "months";
               },
-              onYearClick: (e) => {
-                e.preventDefault(), e.stopPropagation(), this.state.view = "years";
+              onYearClick: (n) => {
+                n.preventDefault(), n.stopPropagation(), this.state.view = "years";
               }
             });
         }
@@ -496,44 +499,44 @@ class Nt extends Y {
     ]);
   }
 }
-const W = ({ label: n, click: t }) => m(
+const W = ({ label: e, click: t }) => m(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
 			opacity-50 hover:opacity-100 text-muted-foreground absolute
-			${n === "Previous" ? "left-1" : "right-1"}
+			${e === "Previous" ? "left-1" : "right-1"}
 			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 		  `,
     click: t,
-    "aria-label": `${n} month`,
+    "aria-label": `${e} month`,
     variant: "icon",
-    icon: n === "Previous" ? P.chevron.single.left : P.chevron.single.right
+    icon: e === "Previous" ? P.chevron.single.left : P.chevron.single.right
   }
-), ft = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
-  m({ click: n, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+), mt = ({ onMonthClick: e, onYearClick: t, next: n, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  m({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
   m({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
   W({ label: "Previous", click: a }),
-  W({ label: "Next", click: e })
-]), mt = (n) => h({ class: "h-9 flex items-center justify-center font-medium" }, n), pt = () => h(
+  W({ label: "Next", click: n })
+]), pt = (e) => h({ class: "h-9 flex items-center justify-center font-medium" }, e), yt = () => h(
   { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
-  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(mt)
-), yt = ({ day: n, iso: t, disabled: e, isStart: a, isEnd: s, isBetween: r, isOtherMonth: l, click: i }) => {
+  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(pt)
+), Dt = ({ day: e, iso: t, disabled: n, isStart: a, isEnd: s, isBetween: r, isOtherMonth: l, click: i }) => {
   let d = "ghost", g = "";
-  return a || s ? (d = "default", g = "bg-primary text-primary-foreground hover:bg-primary/90") : r && (g = "bg-accent text-accent-foreground hover:bg-accent/80"), e && (g += " opacity-50 cursor-not-allowed"), l && (g += " text-muted-foreground opacity-50"), m(
+  return a || s ? (d = "default", g = "bg-primary text-primary-foreground hover:bg-primary/90") : r && (g = "bg-accent text-accent-foreground hover:bg-accent/80"), n && (g += " opacity-50 cursor-not-allowed"), l && (g += " text-muted-foreground opacity-50"), m(
     {
       class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${g}`,
       variant: d,
-      disabled: e,
+      disabled: n,
       click: (f) => {
-        f.preventDefault(), f.stopPropagation(), e || i();
+        f.preventDefault(), f.stopPropagation(), n || i();
       }
     },
-    n.toString()
+    e.toString()
   );
-}, Dt = ({ today: n, current: t, blockPriorDates: e, onDateClick: a }) => {
+}, xt = ({ today: e, current: t, blockPriorDates: n, onDateClick: a }) => {
   const { start: s, end: r } = t, l = new Date(t.year, t.month, 1).getDay(), i = new Date(t.year, t.month + 1, 0).getDate(), d = [], g = t.month === 0 ? 11 : t.month - 1, f = t.month === 0 ? t.year - 1 : t.year, C = new Date(f, g + 1, 0).getDate(), v = t.month === 11 ? 0 : t.month + 1, b = t.month === 11 ? t.year + 1 : t.year;
   for (let c = l - 1; c >= 0; c--) {
-    const o = C - c, u = w(f, g, o), p = new Date(f, g, o), y = new Date(n.year, n.month, n.date), x = p < y, M = e && x, S = s === u, k = r === u, X = s && r && u > s && u < r;
+    const o = C - c, u = w(f, g, o), p = new Date(f, g, o), y = new Date(e.year, e.month, e.date), x = p < y, M = n && x, S = s === u, k = r === u, X = s && r && u > s && u < r;
     d.push({
       day: o,
       iso: u,
@@ -546,7 +549,7 @@ const W = ({ label: n, click: t }) => m(
     });
   }
   for (let c = 1; c <= i; c++) {
-    const o = w(t.year, t.month, c), u = new Date(t.year, t.month, c), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
+    const o = w(t.year, t.month, c), u = new Date(t.year, t.month, c), p = new Date(e.year, e.month, e.date), y = u < p, x = n && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
     d.push({
       day: c,
       iso: o,
@@ -562,7 +565,7 @@ const W = ({ label: n, click: t }) => m(
   }
   const F = (7 - d.length % 7) % 7;
   for (let c = 1; c <= F; c++) {
-    const o = w(b, v, c), u = new Date(b, v, c), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
+    const o = w(b, v, c), u = new Date(b, v, c), p = new Date(e.year, e.month, e.date), y = u < p, x = n && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
     d.push({
       day: c,
       iso: o,
@@ -577,7 +580,7 @@ const W = ({ label: n, click: t }) => m(
   return h(
     { class: "grid grid-cols-7 gap-1" },
     d.map(
-      (c, o) => yt({
+      (c, o) => Dt({
         day: c.day,
         iso: c.iso,
         disabled: c.disabled,
@@ -589,43 +592,43 @@ const W = ({ label: n, click: t }) => m(
       })
     )
   );
-}, xt = j((n, t) => h({ class: "flex flex-auto flex-col" }, [
-  ft({
-    onMonthClick: n.onMonthClick,
-    onYearClick: n.onYearClick,
-    next: n.next,
-    previous: n.previous
+}, wt = T((e, t) => h({ class: "flex flex-auto flex-col" }, [
+  mt({
+    onMonthClick: e.onMonthClick,
+    onYearClick: e.onYearClick,
+    next: e.next,
+    previous: e.previous
   }),
   h({
     class: "flex flex-auto flex-col w-full",
     onSet: [
       "currentDate",
       () => [
-        pt(),
-        Dt({
-          today: n.today,
-          current: n.current,
-          blockPriorDates: n.blockPriorDates,
-          onDateClick: n.onDateClick
+        yt(),
+        xt({
+          today: e.today,
+          current: e.current,
+          blockPriorDates: e.blockPriorDates,
+          onDateClick: e.onDateClick
         })
       ]
     ]
   })
-])), wt = ({ currentMonth: n, currentYear: t, onSelect: e }) => h(
+])), vt = ({ currentMonth: e, currentYear: t, onSelect: n }) => h(
   { class: "grid grid-cols-3 gap-2" },
-  T.monthNames.map(
+  O.monthNames.map(
     (a, s) => m(
       {
         click: (r) => {
-          r.preventDefault(), r.stopPropagation(), e(s);
+          r.preventDefault(), r.stopPropagation(), n(s);
         },
-        variant: n === s ? "primary" : "ghost",
+        variant: e === s ? "primary" : "ghost",
         "aria-label": `Select ${a} ${t}`
       },
       a.substring(0, 3)
     )
   )
-), vt = ({ start: n, end: t, selecting: e, onSelectStart: a, onSelectEnd: s }) => h({ class: "flex gap-x-2 mb-4" }, [
+), bt = ({ start: e, end: t, selecting: n, onSelectStart: a, onSelectEnd: s }) => h({ class: "flex gap-x-2 mb-4" }, [
   z("selecting", (r) => m({
     click: a,
     variant: r === "start" ? "primary" : "outline",
@@ -640,11 +643,11 @@ const W = ({ label: n, click: t }) => m(
   }, [
     h({ class: "font-medium" }, E("current.end", "End Date"))
   ]))
-]), E = (n, t) => [`[[${n}]]`, (e) => e == null ? t : bt(e)], bt = (n) => {
-  const t = /* @__PURE__ */ new Date(n + "T00:00:00"), e = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-  return `${e[t.getDay()]}, ${t.getDate()} ${a[t.getMonth()]}`;
-}, Ct = ({ currentYear: n, onSelect: t }) => {
-  const e = n - 50, a = Array.from({ length: 101 }, (s, r) => e + r);
+]), E = (e, t) => [`[[${e}]]`, (n) => n == null ? t : Ct(n)], Ct = (e) => {
+  const t = /* @__PURE__ */ new Date(e + "T00:00:00"), n = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return `${n[t.getDay()]}, ${t.getDate()} ${a[t.getMonth()]}`;
+}, Mt = ({ currentYear: e, onSelect: t }) => {
+  const n = e - 50, a = Array.from({ length: 101 }, (s, r) => n + r);
   return h(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
     a.map(
@@ -653,7 +656,7 @@ const W = ({ label: n, click: t }) => m(
           click: (r) => {
             r.preventDefault(), r.stopPropagation(), t(s);
           },
-          variant: s === n ? "primary" : "ghost",
+          variant: s === e ? "primary" : "ghost",
           "aria-label": `Select ${s}`
         },
         s.toString()
@@ -661,7 +664,7 @@ const W = ({ label: n, click: t }) => m(
     )
   );
 };
-class Ot extends Y {
+class Yt extends B {
   /**
    * Declare compiler props.
    *
@@ -676,15 +679,15 @@ class Ot extends Y {
    * @returns {Data}
    */
   setData() {
-    const t = /* @__PURE__ */ new Date(), e = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, a = e.getMonth(), s = e.getFullYear();
-    return new B({
+    const t = /* @__PURE__ */ new Date(), n = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, a = n.getMonth(), s = n.getFullYear();
+    return new j({
       today: {
         date: t.getDate(),
         month: t.getMonth(),
         year: t.getFullYear()
       },
       monthName: this.getMonthName(a),
-      currentData: `${e.getFullYear()}-${D(e.getMonth() + 1)}-${D(e.getDate())}`,
+      currentData: `${n.getFullYear()}-${D(n.getMonth() + 1)}-${D(n.getDate())}`,
       current: {
         date: t.getDate(),
         month: a,
@@ -702,7 +705,7 @@ class Ot extends Y {
    * @returns {string}
    */
   getMonthName(t) {
-    return T.monthNames[t];
+    return O.monthNames[t];
   }
   /**
    * Initialize component state.
@@ -724,19 +727,19 @@ class Ot extends Y {
   handleClick(t) {
     if (this.data.selecting === "start") {
       this.data.current.start = t, this.data.current.end = null, this.data.selecting = "end";
-      const e = /* @__PURE__ */ new Date(t + "T00:00:00");
+      const n = /* @__PURE__ */ new Date(t + "T00:00:00");
       this.setCurrent({
-        month: e.getMonth(),
-        year: e.getFullYear(),
-        date: e.getDate()
+        month: n.getMonth(),
+        year: n.getFullYear(),
+        date: n.getDate()
       });
     } else {
       this.data.current.start && t < this.data.current.start ? (this.data.current.end = this.data.current.start, this.data.current.start = t) : this.data.current.end = t, this.data.selecting = "start";
-      const e = /* @__PURE__ */ new Date(t + "T00:00:00");
+      const n = /* @__PURE__ */ new Date(t + "T00:00:00");
       this.setCurrent({
-        month: e.getMonth(),
-        year: e.getFullYear(),
-        date: e.getDate()
+        month: n.getMonth(),
+        year: n.getFullYear(),
+        date: n.getDate()
       }), typeof this.onRangeSelect == "function" && this.onRangeSelect(this.data.current.start, this.data.current.end);
     }
   }
@@ -746,9 +749,9 @@ class Ot extends Y {
    * @param {object} obj
    * @returns {void}
    */
-  setCurrent({ month: t, year: e, date: a = null }) {
+  setCurrent({ month: t, year: n, date: a = null }) {
     const s = this.data.current;
-    s.month = (t + 12) % 12, s.year = e + (t < 0 ? -1 : t > 11 ? 1 : 0), a !== null && (s.date = a), this.data.monthName = this.getMonthName(s.month), this.data.currentDate = `${e}-${D(t + 1)}-${D(s.date)}`;
+    s.month = (t + 12) % 12, s.year = n + (t < 0 ? -1 : t > 11 ? 1 : 0), a !== null && (s.date = a), this.data.monthName = this.getMonthName(s.month), this.data.currentDate = `${n}-${D(t + 1)}-${D(s.date)}`;
   }
   /**
    * Render the range calendar.
@@ -756,9 +759,9 @@ class Ot extends Y {
    * @returns {object}
    */
   render() {
-    const { today: t, current: e, selecting: a } = this.data, { start: s, end: r } = e;
+    const { today: t, current: n, selecting: a } = this.data, { start: s, end: r } = n;
     return h({ class: "range-calendar border border-border rounded-lg shadow-md p-4 w-full max-w-sm min-w-80" }, [
-      vt({
+      bt({
         start: s,
         end: r,
         selecting: a,
@@ -772,30 +775,30 @@ class Ot extends Y {
       J("view", (l) => {
         switch (l) {
           case "months":
-            return wt(
+            return vt(
               {
-                currentMonth: e.month,
-                currentYear: e.year,
+                currentMonth: n.month,
+                currentYear: n.year,
                 onSelect: (i) => {
-                  this.setCurrent({ month: i, year: e.year }), this.state.view = "calendar";
+                  this.setCurrent({ month: i, year: n.year }), this.state.view = "calendar";
                 }
               }
             );
           case "years":
-            return Ct(
+            return Mt(
               {
-                currentYear: e.year,
+                currentYear: n.year,
                 onSelect: (i) => {
-                  this.setCurrent({ month: e.month, year: i }), this.state.view = "calendar";
+                  this.setCurrent({ month: n.month, year: i }), this.state.view = "calendar";
                 }
               }
             );
           default:
-            return xt({
+            return wt({
               monthName: this.data.monthName,
-              year: e.year,
+              year: n.year,
               today: t,
-              current: e,
+              current: n,
               blockPriorDates: this.blockPriorDates,
               onDateClick: (i) => this.handleClick(i),
               onMonthClick: (i) => {
@@ -819,16 +822,16 @@ class Ot extends Y {
   }
 }
 export {
-  Tt as A,
-  lt as C,
+  Ot as A,
+  ct as C,
   N as D,
   w as F,
-  dt as M,
-  Pt as P,
-  Ot as R,
-  ht as a,
+  gt as M,
+  Tt as P,
+  Yt as R,
+  ut as a,
   Nt as b,
-  nt as c,
+  at as c,
   U as g,
   D as p
 };

package/dist/{signature-panel-DIFmtS0f.js → signature-panel-C50P9GW4.js}

@@ -4,7 +4,7 @@ import { B as P, I as J } from "./buttons-CHEs54Wl.js";
 import { Icons as S } from "./icons.es.js";
 import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
 import { C as ie, I as ne, H as oe } from "./inputs-9udyzkHR.js";
-import { A as le, P as re } from "./range-calendar-CCVC3e9d.js";
+import { A as le, P as re } from "./range-calendar-DqVS8ooC.js";
 import { V as g } from "./veil-CqnAmj-D.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",

package/dist/types/components/atoms/image.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Image
+ *
+ * Creates an image element, hiding it on error.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const Image: Function;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.2014",
+	"version": "1.0.2016",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {