@visitwonders/assembly 0.1.0

package/dist/form/date-range-picker.js

@@ -0,0 +1,451 @@
+import "./date-range-picker.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import { guidFor } from '@ember/object/internals';
+import { startOfDay, isBefore, isAfter, isSameDay, isValid, format } from 'date-fns';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { Calendar as Calendar$1, X, ArrowRight } from 'lucide';
+import Calendar from './calendar.js';
+import { formatDate, parseDateString } from './date-picker.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+/**
+ * Format a date for form submission (ISO format)
+ */
+function formatDateForSubmission(date) {
+  if (!date || !isValid(date)) return '';
+  return format(date, 'yyyy-MM-dd');
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+let dateRangePickerIdCounter = 0;
+class DateRangePicker extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "startInputValue", [tracked], function () {
+      return '';
+    });
+  }
+  #startInputValue = (i(this, "startInputValue"), void 0);
+  static {
+    g(this.prototype, "endInputValue", [tracked], function () {
+      return '';
+    });
+  }
+  #endInputValue = (i(this, "endInputValue"), void 0);
+  static {
+    g(this.prototype, "activeInput", [tracked], function () {
+      return 'start';
+    });
+  }
+  #activeInput = (i(this, "activeInput"), void 0);
+  static {
+    g(this.prototype, "internalRangeValue", [tracked], function () {
+      return null;
+    });
+  }
+  #internalRangeValue = (i(this, "internalRangeValue"), void 0);
+  static {
+    g(this.prototype, "hasInternalValueChanged", [tracked], function () {
+      return false;
+    });
+  }
+  #hasInternalValueChanged = (i(this, "hasInternalValueChanged"), void 0);
+  calendarId = `date-range-picker-calendar-${++dateRangePickerIdCounter}`;
+  startInputElement = null;
+  endInputElement = null;
+  get componentId() {
+    return this.args.id || guidFor(this);
+  }
+  get startInputId() {
+    return `${this.componentId}-start`;
+  }
+  get endInputId() {
+    return `${this.componentId}-end`;
+  }
+  get dateFormat() {
+    return this.args.format ?? 'dd/MM/yyyy';
+  }
+  get allowTextInput() {
+    return this.args.allowTextInput ?? true;
+  }
+  get showIcon() {
+    return this.args.showIcon ?? true;
+  }
+  get clearable() {
+    return this.args.clearable ?? false;
+  }
+  get weekStartsOn() {
+    return this.args.weekStartsOn ?? 0;
+  }
+  get showOutsideDays() {
+    return this.args.showOutsideDays ?? true;
+  }
+  get showToday() {
+    return this.args.showToday ?? true;
+  }
+  get hasPresets() {
+    return !!this.args.presets && this.args.presets.length > 0;
+  }
+  /** Check if component is controlled */
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  /** Get current selected range (controlled or uncontrolled) */
+  get selectedRange() {
+    if (this.isControlled) {
+      return this.args.value ?? null;
+    }
+    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
+      return this.args.defaultValue ?? null;
+    }
+    return this.internalRangeValue;
+  }
+  /** Value for Calendar component (converts null to undefined) */
+  get calendarRangeValue() {
+    return this.selectedRange ?? undefined;
+  }
+  get startDisplayValue() {
+    return formatDate(this.selectedRange?.start ?? null, this.dateFormat);
+  }
+  get endDisplayValue() {
+    return formatDate(this.selectedRange?.end ?? null, this.dateFormat);
+  }
+  /** The value to show in the start input field */
+  get startInputDisplayValue() {
+    if (this.isOpen && this.activeInput === 'start') {
+      return this.startInputValue;
+    }
+    return this.startDisplayValue;
+  }
+  /** The value to show in the end input field */
+  get endInputDisplayValue() {
+    if (this.isOpen && this.activeInput === 'end') {
+      return this.endInputValue;
+    }
+    return this.endDisplayValue;
+  }
+  get startPlaceholder() {
+    return this.args.startPlaceholder ?? 'Start date';
+  }
+  get endPlaceholder() {
+    return this.args.endPlaceholder ?? 'End date';
+  }
+  get showClearButton() {
+    return this.clearable && this.selectedRange !== null && !this.args.isDisabled && !this.args.isReadOnly;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupStartInput = modifier(element => {
+    this.startInputElement = element;
+    return () => {
+      this.startInputElement = null;
+    };
+  });
+  setupEndInput = modifier(element => {
+    this.endInputElement = element;
+    return () => {
+      this.endInputElement = null;
+    };
+  });
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleStartInputClick = event => {
+    event.stopPropagation();
+    if (!this.args.isDisabled && !this.args.isReadOnly) {
+      this.activeInput = 'start';
+      this.openDropdown();
+    }
+  };
+  handleEndInputClick = event => {
+    event.stopPropagation();
+    if (!this.args.isDisabled && !this.args.isReadOnly) {
+      this.activeInput = 'end';
+      this.openDropdown();
+    }
+  };
+  handleInputFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleStartInputBlur = event => {
+    // Check if focus is moving to end input
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget === this.endInputElement) {
+      return;
+    }
+    // Parse and validate text input on blur
+    if (this.allowTextInput && this.startInputValue !== this.startDisplayValue) {
+      this.parseAndSubmitStartValue();
+    }
+    this.args.onBlur?.(event);
+  };
+  handleEndInputBlur = event => {
+    // Check if focus is moving to start input
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget === this.startInputElement) {
+      return;
+    }
+    // Parse and validate text input on blur
+    if (this.allowTextInput && this.endInputValue !== this.endDisplayValue) {
+      this.parseAndSubmitEndValue();
+    }
+    this.args.onBlur?.(event);
+  };
+  /** Parse and submit the start date value */
+  parseAndSubmitStartValue() {
+    if (!this.startInputValue.trim()) {
+      // Clear start date
+      if (this.selectedRange) {
+        this.setRange(null);
+      }
+      return true;
+    }
+    const parsed = parseDateString(this.startInputValue);
+    if (parsed && this.isDateValid(parsed)) {
+      const newRange = {
+        start: startOfDay(parsed),
+        end: this.selectedRange?.end ?? startOfDay(parsed)
+      };
+      // Ensure start is before end
+      if (newRange.end && isBefore(newRange.end, newRange.start)) {
+        newRange.end = newRange.start;
+      }
+      this.setRange(newRange);
+      return true;
+    }
+    // Reset input to display value on invalid input
+    this.startInputValue = this.startDisplayValue;
+    return false;
+  }
+  /** Parse and submit the end date value */
+  parseAndSubmitEndValue() {
+    if (!this.endInputValue.trim()) {
+      // If no end date but there's a start date, set end = start
+      if (this.selectedRange?.start) {
+        const newRange = {
+          start: this.selectedRange.start,
+          end: this.selectedRange.start
+        };
+        this.setRange(newRange);
+      }
+      return true;
+    }
+    const parsed = parseDateString(this.endInputValue);
+    if (parsed && this.isDateValid(parsed)) {
+      const newRange = {
+        start: this.selectedRange?.start ?? startOfDay(parsed),
+        end: startOfDay(parsed)
+      };
+      // Ensure end is after start
+      if (newRange.start && isAfter(newRange.start, newRange.end)) {
+        newRange.start = newRange.end;
+      }
+      this.setRange(newRange);
+      return true;
+    }
+    // Reset input to display value on invalid input
+    this.endInputValue = this.endDisplayValue;
+    return false;
+  }
+  isDateValid(date) {
+    if (this.args.minDate && isBefore(date, this.args.minDate)) {
+      return false;
+    }
+    if (this.args.maxDate && isAfter(date, this.args.maxDate)) {
+      return false;
+    }
+    // Check disabled dates
+    if (this.args.disabledDates) {
+      if (Array.isArray(this.args.disabledDates)) {
+        if (this.args.disabledDates.some(d => isSameDay(d, date))) {
+          return false;
+        }
+      } else if (this.args.disabledDates(date)) {
+        return false;
+      }
+    }
+    // Check disabled days of week
+    if (this.args.disabledDaysOfWeek?.includes(date.getDay())) {
+      return false;
+    }
+    return true;
+  }
+  handleStartInputChange = event => {
+    const target = event.target;
+    this.startInputValue = target.value;
+  };
+  handleEndInputChange = event => {
+    const target = event.target;
+    this.endInputValue = target.value;
+  };
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.allowTextInput) {
+          if (this.activeInput === 'start') {
+            this.parseAndSubmitStartValue();
+          } else {
+            this.parseAndSubmitEndValue();
+          }
+        }
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.closeDropdown();
+        }
+        break;
+      case 'Tab':
+        // Handle tab between inputs
+        if (this.activeInput === 'start' && !event.shiftKey) {
+          if (this.allowTextInput) {
+            this.parseAndSubmitStartValue();
+          }
+          this.activeInput = 'end';
+        } else if (this.activeInput === 'end' && event.shiftKey) {
+          if (this.allowTextInput) {
+            this.parseAndSubmitEndValue();
+          }
+          this.activeInput = 'start';
+        } else {
+          // Tab out of the component
+          if (this.allowTextInput) {
+            if (this.activeInput === 'start') {
+              this.parseAndSubmitStartValue();
+            } else {
+              this.parseAndSubmitEndValue();
+            }
+          }
+          if (this.isOpen) {
+            this.closeDropdown();
+          }
+        }
+        break;
+    }
+  };
+  handleCalendarRangeChange = range => {
+    this.setRange(range);
+  };
+  handlePresetClick = preset => {
+    const range = typeof preset.range === 'function' ? preset.range() : preset.range;
+    this.setRange(range);
+    this.closeDropdown();
+  };
+  handleClearClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.setRange(null);
+    this.startInputElement?.focus();
+  };
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  /** Set the range value (handles both controlled and uncontrolled mode) */
+  setRange(range) {
+    if (!this.isControlled) {
+      this.hasInternalValueChanged = true;
+      this.internalRangeValue = range;
+    }
+    this.args.onChange?.(range);
+    // Update input values
+    if (range) {
+      this.startInputValue = formatDate(range.start, this.dateFormat);
+      this.endInputValue = formatDate(range.end, this.dateFormat);
+    } else {
+      this.startInputValue = '';
+      this.endInputValue = '';
+    }
+  }
+  openDropdown = () => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    this.isOpen = true;
+    this.startInputValue = this.startDisplayValue;
+    this.endInputValue = this.endDisplayValue;
+    this.args.onOpenChange?.(true);
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    this.startInputValue = this.startDisplayValue;
+    this.endInputValue = this.endDisplayValue;
+    this.args.onOpenChange?.(false);
+  };
+  toggleDropdown = () => {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"click\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"date-range-picker_e973c8cc7\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-open={{if this.isOpen \"true\"}} data-has-presets={{if this.hasPresets \"true\"}} data-test-date-range-picker ...attributes as |popover|>\n  {{!-- Hidden inputs for form submission --}}\n  {{#if @name}}\n    <input type=\"hidden\" name=\"{{@name}}_start\" value={{if this.selectedRange (formatDateForSubmission this.selectedRange.start) \"\"}} data-test-date-range-picker-hidden-input-start />\n    <input type=\"hidden\" name=\"{{@name}}_end\" value={{if this.selectedRange (formatDateForSubmission this.selectedRange.end) \"\"}} data-test-date-range-picker-hidden-input-end />\n  {{/if}}\n\n  <popover.Trigger class=\"date-range-picker-trigger-wrapper_e973c8cc7\" disabled={{@isDisabled}} data-test-date-range-picker-trigger-wrapper>\n    <div class=\"date-range-picker-input-wrapper_e973c8cc7\">\n      {{!-- Start date input --}}\n      {{!-- template-lint-disable require-input-label no-redundant-role --}}\n      <input id={{this.startInputId}} type=\"text\" role=\"combobox\" class=\"date-range-picker-input_e973c8cc7 date-range-picker-input-start\" aria-label=\"Start date\" aria-haspopup=\"dialog\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.calendarId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} placeholder={{this.startPlaceholder}} value={{this.startInputDisplayValue}} disabled={{@isDisabled}} readonly={{if this.allowTextInput @isReadOnly true}} autocomplete=\"off\" data-active={{if (this.isActiveInput \"start\") \"true\"}} {{this.setupStartInput}} {{on \"click\" this.handleStartInputClick}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleStartInputBlur}} {{on \"input\" this.handleStartInputChange}} {{on \"keydown\" this.handleKeyDown}} data-test-date-range-picker-input-start />\n\n      <span class=\"date-range-picker-separator_e973c8cc7\" aria-hidden=\"true\" data-test-date-range-picker-separator>\n        <Icon @icon={{ArrowRight}} @size=\"sm\" />\n      </span>\n\n      {{!-- End date input --}}\n      {{!-- template-lint-disable require-input-label no-redundant-role --}}\n      <input id={{this.endInputId}} type=\"text\" role=\"combobox\" class=\"date-range-picker-input_e973c8cc7 date-range-picker-input-end\" aria-label=\"End date\" aria-haspopup=\"dialog\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.calendarId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} placeholder={{this.endPlaceholder}} value={{this.endInputDisplayValue}} disabled={{@isDisabled}} readonly={{if this.allowTextInput @isReadOnly true}} autocomplete=\"off\" data-active={{if (this.isActiveInput \"end\") \"true\"}} {{this.setupEndInput}} {{on \"click\" this.handleEndInputClick}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleEndInputBlur}} {{on \"input\" this.handleEndInputChange}} {{on \"keydown\" this.handleKeyDown}} data-test-date-range-picker-input-end />\n\n      {{#if this.showClearButton}}\n        <button type=\"button\" class=\"date-range-picker-clear_e973c8cc7\" aria-label=\"Clear date range\" {{on \"click\" this.handleClearClick}} data-test-date-range-picker-clear>\n          <Icon @icon={{X}} @size=\"sm\" />\n        </button>\n      {{/if}}\n\n      {{#if this.showIcon}}\n        <span class=\"date-range-picker-trigger_e973c8cc7\" aria-hidden=\"true\" data-test-date-range-picker-trigger>\n          <Icon @icon={{CalendarIcon}} @size=\"sm\" />\n        </span>\n      {{/if}}\n    </div>\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"date-range-picker-popover-content_e973c8cc7\" aria-label=\"Choose date range\">\n    <div class=\"date-range-picker-popover-inner_e973c8cc7\">\n      {{#if this.hasPresets}}\n        <div class=\"date-range-picker-presets_e973c8cc7\" data-test-date-range-picker-presets>\n          {{#each @presets as |preset|}}\n            <button type=\"button\" class=\"date-range-picker-preset_e973c8cc7\" {{on \"click\" (fn this.handlePresetClick preset)}} data-test-date-range-picker-preset>\n              {{preset.label}}\n            </button>\n          {{/each}}\n        </div>\n      {{/if}}\n\n      <div class=\"date-range-picker-calendar-container_e973c8cc7\">\n        <Calendar id={{this.calendarId}} @mode=\"range\" @rangeValue={{this.calendarRangeValue}} @onRangeChange={{this.handleCalendarRangeChange}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{this.weekStartsOn}} @showOutsideDays={{this.showOutsideDays}} @showToday={{this.showToday}} data-test-date-range-picker-calendar />\n      </div>\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        formatDateForSubmission,
+        on,
+        Icon,
+        ArrowRight,
+        X,
+        CalendarIcon: Calendar$1,
+        fn,
+        Calendar
+      })
+    }), this);
+  }
+  // Helper for template
+  isActiveInput = input => {
+    return this.isOpen && this.activeInput === input;
+  };
+}
+
+export { DateRangePicker as default };
+//# sourceMappingURL=date-range-picker.js.map

package/dist/form/date-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/error-message.css

@@ -0,0 +1,27 @@
+/* src/form/error-message.css */
+.error-message_ecac37d41 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-critical);
+  line-height: var(--line-height-normal);
+}
+
+.error-message-item_ecac37d41 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.error-message-item_ecac37d41::before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentcolor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  flex-shrink: 0;
+}

package/dist/form/error-message.js

@@ -0,0 +1,27 @@
+import "./error-message.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class ErrorMessage extends Component {
+  get shouldShow() {
+    const {
+      isInvalid,
+      forceShow
+    } = this.args;
+    return isInvalid === true || forceShow === true || this.hasErrors;
+  }
+  get hasErrors() {
+    return (this.args.errors?.length ?? 0) > 0;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.shouldShow}}\n  <span class=\"error-message_ecac37d41\" id={{@id}} role=\"alert\" aria-live=\"polite\" data-test-error-message ...attributes>\n    {{#if this.hasErrors}}\n      {{#each @errors as |error|}}\n        <span class=\"error-message-item_ecac37d41\" data-test-error-message-item>{{error}}</span>\n      {{/each}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </span>\n{{/if}}", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { ErrorMessage as default };
+//# sourceMappingURL=error-message.js.map

package/dist/form/error-message.js.map

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

package/dist/form/field.css

@@ -0,0 +1,45 @@
+/* src/form/field.css */
+.field_e77bb2bf4 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.label_e77bb2bf4 {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text);
+  line-height: 1.25rem;
+}
+
+.required_e77bb2bf4 {
+  color: var(--red-500);
+  margin-left: 0.125rem;
+}
+
+.content_e77bb2bf4 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* Helper and error text */
+.helper-text_e77bb2bf4 {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  color: var(--color-text-secondary);
+}
+
+.error-text_e77bb2bf4 {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  color: var(--red-500);
+}
+
+/* Error state */
+.has-error_e77bb2bf4 .label_e77bb2bf4 {
+  color: var(--red-500);
+}

package/dist/form/field.js

@@ -0,0 +1,28 @@
+import "./field.css"
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { hash } from '@ember/helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Field extends Component {
+  get inputId() {
+    return this.args.for || guidFor(this);
+  }
+  get hasError() {
+    return !!this.args.error;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"field_e77bb2bf4 {{if this.hasError \"has-error_e77bb2bf4\"}}\" ...attributes>\n  {{#if @label}}\n    <label for={{this.inputId}} class=\"label_e77bb2bf4\">\n      {{@label}}\n      {{#if @required}}\n        <span class=\"required_e77bb2bf4\">*</span>\n      {{/if}}\n    </label>\n  {{/if}}\n\n  <div class=\"content_e77bb2bf4\">\n    {{yield (hash inputId=this.inputId)}}\n  </div>\n\n  {{#if @helperText}}\n    <p class=\"helper-text_e77bb2bf4\">{{@helperText}}</p>\n  {{/if}}\n\n  {{#if @error}}\n    <p class=\"error-text_e77bb2bf4\">{{@error}}</p>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash
+      })
+    }), this);
+  }
+}
+
+export { Field as default };
+//# sourceMappingURL=field.js.map

package/dist/form/field.js.map

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

package/dist/form/form.css

@@ -0,0 +1,6 @@
+/* src/form/form.css */
+.assembly-form_ee0c8bf9e {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}