@visitwonders/assembly 0.1.0

package/dist/form/number-field.js

@@ -0,0 +1,184 @@
+import "./number-field.css"
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { ChevronDown, ChevronUp } from 'lucide';
+import Control from './control.js';
+import Icon from '../media/icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class NumberField extends Component {
+  get step() {
+    return this.args.step ?? 1;
+  }
+  get min() {
+    return this.args.min ?? -Infinity;
+  }
+  get max() {
+    return this.args.max ?? Infinity;
+  }
+  get showStepper() {
+    return this.args.showStepper ?? true;
+  }
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  /** Auto-detect inputMode based on step if not explicitly set */
+  get inputMode() {
+    if (this.args.inputMode) {
+      return this.args.inputMode;
+    }
+    // If step is an integer, use numeric; otherwise use decimal
+    return Number.isInteger(this.step) ? 'numeric' : 'decimal';
+  }
+  /** Display value for the input */
+  get displayValue() {
+    const value = this.args.value;
+    if (value === undefined || value === null) {
+      return '';
+    }
+    return String(value);
+  }
+  /** Check if at minimum bound */
+  get isAtMin() {
+    const value = this.args.value;
+    return value !== undefined && value !== null && value <= this.min;
+  }
+  /** Check if at maximum bound */
+  get isAtMax() {
+    const value = this.args.value;
+    return value !== undefined && value !== null && value >= this.max;
+  }
+  /** Clamp value to min/max bounds */
+  clamp = value => {
+    return Math.min(Math.max(value, this.min), this.max);
+  };
+  /** Round to step precision to avoid floating point issues */
+  roundToStep = value => {
+    const step = this.step;
+    const precision = step.toString().split('.')[1]?.length ?? 0;
+    return Number(value.toFixed(precision));
+  };
+  increment = event => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    const current = this.args.value ?? 0;
+    const newValue = this.clamp(this.roundToStep(current + this.step));
+    this.args.onChange?.(newValue, event);
+  };
+  decrement = event => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    const current = this.args.value ?? 0;
+    const newValue = this.clamp(this.roundToStep(current - this.step));
+    this.args.onChange?.(newValue, event);
+  };
+  handleInput = event => {
+    const target = event.target;
+    const inputValue = target.value.trim();
+    if (inputValue === '' || inputValue === '-') {
+      this.args.onInput?.(null, event);
+      return;
+    }
+    const parsed = parseFloat(inputValue);
+    if (!isNaN(parsed)) {
+      this.args.onInput?.(parsed, event);
+    }
+  };
+  handleFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleBlur = event => {
+    // On blur, clamp value to bounds if needed
+    const value = this.args.value;
+    if (value !== undefined && value !== null) {
+      const clamped = this.clamp(value);
+      if (clamped !== value) {
+        this.args.onChange?.(clamped, event);
+      }
+    }
+    this.args.onBlur?.(event);
+  };
+  /** Build aria-describedby from the control's help text and error message IDs */
+  getAriaDescribedBy = controlId => {
+    const parts = [];
+    if (this.args.helpText) {
+      parts.push(`${controlId}-help-text`);
+    }
+    if (this.args.error) {
+      parts.push(`${controlId}-error-message`);
+    }
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  };
+  /** aria-valuemin - only show if min is not -Infinity */
+  get ariaValueMin() {
+    return this.min !== -Infinity ? this.min : undefined;
+  }
+  /** aria-valuemax - only show if max is not Infinity */
+  get ariaValueMax() {
+    return this.max !== Infinity ? this.max : undefined;
+  }
+  /** aria-valuenow - current value or undefined if empty */
+  get ariaValueNow() {
+    return this.args.value ?? undefined;
+  }
+  handleKeyDown = event => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment(event);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement(event);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        {
+          const current = this.args.value ?? 0;
+          const newValue = this.clamp(this.roundToStep(current + this.step * 10));
+          this.args.onChange?.(newValue, event);
+        }
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        {
+          const current = this.args.value ?? 0;
+          const newValue = this.clamp(this.roundToStep(current - this.step * 10));
+          this.args.onChange?.(newValue, event);
+        }
+        break;
+      case 'Home':
+        if (this.min !== -Infinity) {
+          event.preventDefault();
+          this.args.onChange?.(this.min, event);
+        }
+        break;
+      case 'End':
+        if (this.max !== Infinity) {
+          event.preventDefault();
+          this.args.onChange?.(this.max, event);
+        }
+        break;
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <div class=\"number-field-input-wrapper_e9ff3bd72\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-readonly={{if @isReadOnly \"true\" \"false\"}} data-at-min={{if this.isAtMin \"true\" \"false\"}} data-at-max={{if this.isAtMax \"true\" \"false\"}} data-has-stepper={{if this.showStepper \"true\" \"false\"}} data-test-number-field-wrapper>\n    {{#if @prefix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-prefix_e9ff3bd72\" data-test-number-field-prefix>\n        {{@prefix}}\n      </span>\n    {{/if}}\n\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input id={{ctrl.id}} class=\"number-field-input_e9ff3bd72\" type=\"text\" inputmode={{this.inputMode}} role=\"spinbutton\" name={{@name}} value={{this.displayValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} aria-invalid={{if this.isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.getAriaDescribedBy ctrl.id}} aria-valuenow={{this.ariaValueNow}} aria-valuemin={{this.ariaValueMin}} aria-valuemax={{this.ariaValueMax}} {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} {{on \"keydown\" this.handleKeyDown}} data-test-number-field-input />\n\n    {{#if @suffix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-suffix_e9ff3bd72\" data-test-number-field-suffix>\n        {{@suffix}}\n      </span>\n    {{/if}}\n\n    {{#if this.showStepper}}\n      <div class=\"number-field-stepper_e9ff3bd72\" data-test-number-field-stepper>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Increase\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMax)}} {{on \"click\" this.increment}} data-test-number-field-increment>\n          <Icon @icon={{ChevronUp}} @size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Decrease\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMin)}} {{on \"click\" this.decrement}} data-test-number-field-decrement>\n          <Icon @icon={{ChevronDown}} @size=\"xs\" />\n        </button>\n      </div>\n    {{/if}}\n  </div>\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+      strictMode: true,
+      scope: () => ({
+        Control,
+        on,
+        Icon,
+        ChevronUp,
+        ChevronDown
+      })
+    }), this);
+  }
+}
+
+export { NumberField as default };
+//# sourceMappingURL=number-field.js.map

package/dist/form/number-field.js.map

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

package/dist/form/option-group.js

@@ -0,0 +1,2 @@
+export { SelectOptionGroup as default } from './select.js';
+//# sourceMappingURL=option-group.js.map

package/dist/form/option-group.js.map

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

package/dist/form/option.js

@@ -0,0 +1,2 @@
+export { SelectOption as default } from './select.js';
+//# sourceMappingURL=option.js.map

package/dist/form/option.js.map

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

package/dist/form/radio-group.css

@@ -0,0 +1,54 @@
+/* src/form/radio-group.css */
+.fieldset_edf36a330 {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1-5);
+}
+
+.legend_edf36a330 {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-normal);
+  margin-bottom: var(--spacing-1-5);
+  padding: 0;
+}
+
+.required_edf36a330 {
+  color: var(--color-text-critical);
+  margin-left: var(--spacing-0-5);
+}
+
+.options_edf36a330 {
+  display: flex;
+  gap: var(--spacing-4);
+}
+
+.orientation-vertical_edf36a330 {
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.orientation-horizontal_edf36a330 {
+  flex-flow: row wrap;
+  gap: var(--spacing-6);
+}
+
+/* Helper and error text */
+.helper-text_edf36a330 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+.error-text_edf36a330 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-critical);
+}

package/dist/form/radio-group.js

@@ -0,0 +1,53 @@
+import "./radio-group.css"
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import Radio from './radio.js';
+import { hash } from '@ember/helper';
+import { or } from 'ember-truth-helpers';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime';
+
+;
+
+class RadioGroup extends Component {
+  get orientation() {
+    return this.args.orientation || 'vertical';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get orientationClass() {
+    return `orientation-${this.orientation}`;
+  }
+  get normalizedOptions() {
+    return this.args.options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          value: option,
+          label: option
+        };
+      }
+      return option;
+    });
+  }
+  handleChange(value) {
+    this.args.onChange?.(value);
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset class=\"fieldset_edf36a330\" ...attributes>\n  {{#if @label}}\n    <legend class=\"legend_edf36a330\">\n      {{@label}}\n      {{#if @required}}\n        <span class=\"required_edf36a330\">*</span>\n      {{/if}}\n    </legend>\n  {{/if}}\n\n  <div class=\"options_edf36a330 {{this.orientationClass}}\">\n    {{#if (has-block)}}\n      {{yield (hash Radio=Radio value=@value name=@name disabled=@disabled size=this.size onChange=this.handleChange)}}\n    {{else}}\n      {{#each this.normalizedOptions as |option|}}\n        <Radio @label={{option.label}} @value={{option.value}} @groupValue={{@value}} @name={{@name}} @isDisabled={{or option.disabled @disabled}} @size={{this.size}} @onChange={{this.handleChange}} />\n      {{/each}}\n    {{/if}}\n  </div>\n\n  {{#if @helperText}}\n    <p class=\"helper-text_edf36a330\">{{@helperText}}</p>\n  {{/if}}\n\n  {{#if @error}}\n    <p class=\"error-text_edf36a330\">{{@error}}</p>\n  {{/if}}\n</fieldset>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Radio,
+        or
+      })
+    }), this);
+  }
+}
+
+export { RadioGroup as default };
+//# sourceMappingURL=radio-group.js.map

package/dist/form/radio-group.js.map

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

package/dist/form/radio.css

@@ -0,0 +1,183 @@
+/* src/form/radio.css */
+.radio-wrapper_e6dda4f5d {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.radio-label-wrapper_e6dda4f5d {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio-wrapper_e6dda4f5d[data-disabled="true"] .radio-label-wrapper_e6dda4f5d {
+  cursor: not-allowed;
+}
+
+/* Hide native radio */
+.radio-input_e6dda4f5d {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Custom radio control */
+.radio-control_e6dda4f5d {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-round);
+  background-color: var(--color-bg-surface);
+  transition: all var(--transition-fast);
+}
+
+/* Sizes */
+.radio-wrapper_e6dda4f5d[data-size="sm"] .radio-control_e6dda4f5d {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.radio-wrapper_e6dda4f5d[data-size="md"] .radio-control_e6dda4f5d {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+.radio-wrapper_e6dda4f5d[data-size="lg"] .radio-control_e6dda4f5d {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+}
+
+/* Inner dot (checked indicator) */
+.radio-dot_e6dda4f5d {
+  width: 50%;
+  height: 50%;
+  border-radius: var(--radius-round);
+  background-color: transparent;
+  transition: background-color var(--transition-fast);
+}
+
+/* Hover */
+.radio-label-wrapper_e6dda4f5d:hover .radio-control_e6dda4f5d {
+  border-color: var(--color-border-control-hover);
+}
+
+.radio-wrapper_e6dda4f5d[data-disabled="true"] .radio-label-wrapper_e6dda4f5d:hover .radio-control_e6dda4f5d {
+  border-color: var(--color-border-control-disabled);
+}
+
+/* Focus */
+.radio-input_e6dda4f5d:focus-visible + .radio-control_e6dda4f5d {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Checked */
+.radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
+  border-color: var(--color-border-focus);
+}
+
+.radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
+  background-color: var(--color-border-focus);
+}
+
+.radio-label-wrapper_e6dda4f5d:hover .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
+  border-color: var(--color-text-link-hover);
+}
+
+.radio-label-wrapper_e6dda4f5d:hover .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
+  background-color: var(--color-text-link-hover);
+}
+
+/* Invalid */
+.radio-wrapper_e6dda4f5d[data-invalid="true"] .radio-control_e6dda4f5d {
+  border-color: var(--color-border-critical);
+}
+
+.radio-wrapper_e6dda4f5d[data-invalid="true"] .radio-input_e6dda4f5d:checked + .radio-control_e6dda4f5d {
+  border-color: var(--color-border-critical);
+}
+
+.radio-wrapper_e6dda4f5d[data-invalid="true"]
+  .radio-input_e6dda4f5d:checked
+  + .radio-control_e6dda4f5d
+  .radio-dot_e6dda4f5d {
+  background-color: var(--color-bg-fill-critical);
+}
+
+.radio-wrapper_e6dda4f5d[data-invalid="true"]
+  .radio-input_e6dda4f5d:focus-visible
+  + .radio-control_e6dda4f5d {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled */
+.radio-input_e6dda4f5d:disabled + .radio-control_e6dda4f5d {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+}
+
+.radio-input_e6dda4f5d:disabled:checked + .radio-control_e6dda4f5d .radio-dot_e6dda4f5d {
+  background-color: var(--color-text-disabled);
+}
+
+/* Label */
+.radio-label_e6dda4f5d {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text);
+  line-height: var(--spacing-5);
+}
+
+.radio-wrapper_e6dda4f5d[data-size="sm"] .radio-label_e6dda4f5d {
+  font-size: var(--font-size-sm);
+  line-height: var(--spacing-4);
+}
+
+.radio-wrapper_e6dda4f5d[data-size="lg"] .radio-label_e6dda4f5d {
+  font-size: var(--font-size-lg);
+  line-height: var(--spacing-6);
+}
+
+.radio-label_e6dda4f5d[data-visually-hidden="true"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.radio-wrapper_e6dda4f5d[data-disabled="true"] .radio-label_e6dda4f5d {
+  color: var(--color-text-disabled);
+}
+
+/* Description */
+.radio-description_e6dda4f5d {
+  margin: 0;
+  margin-left: calc(var(--spacing-5) + var(--spacing-2));
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+.radio-wrapper_e6dda4f5d[data-size="sm"] .radio-description_e6dda4f5d {
+  margin-left: calc(var(--spacing-4) + var(--spacing-2));
+}
+
+.radio-wrapper_e6dda4f5d[data-size="lg"] .radio-description_e6dda4f5d {
+  margin-left: calc(var(--spacing-6) + var(--spacing-2));
+}
+
+.radio-wrapper_e6dda4f5d[data-disabled="true"] .radio-description_e6dda4f5d {
+  color: var(--color-text-disabled);
+}

package/dist/form/radio.js

@@ -0,0 +1,65 @@
+import "./radio.css"
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime';
+
+;
+
+class Radio extends Component {
+  get inputId() {
+    return `radio-${guidFor(this)}`;
+  }
+  get descriptionId() {
+    return `radio-description-${guidFor(this)}`;
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get checkedValue() {
+    // Controlled mode takes precedence
+    if (this.args.isChecked !== undefined) {
+      return this.args.isChecked;
+    }
+    // Group value mode (from RadioGroup)
+    if (this.args.groupValue !== undefined) {
+      return this.args.value === this.args.groupValue;
+    }
+    // Uncontrolled mode
+    return this.args.defaultChecked;
+  }
+  handleChange() {
+    this.args.onChange?.(this.args.value);
+  }
+  /**
+  * Note: This only detects the @description prop, not the description block.
+  * Glimmer doesn't support detecting named blocks at runtime, so aria-describedby
+  * will only be set when using the @description prop.
+  */
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  get hasDescription() {
+    return !!this.args.description;
+  }
+  get ariaDescribedBy() {
+    if (this.hasDescription) {
+      return this.descriptionId;
+    }
+    return undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"radio-wrapper_e6dda4f5d\" data-size={{this.size}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-invalid={{if @isInvalid \"true\" \"false\"}} data-test-radio-wrapper>\n  <label class=\"radio-label-wrapper_e6dda4f5d\" data-test-radio-label-wrapper>\n    {{!-- template-lint-disable no-unsupported-role-attributes --}}\n    <input id={{this.inputId}} type=\"radio\" class=\"radio-input_e6dda4f5d\" name={{@name}} value={{@value}} checked={{this.checkedValue}} disabled={{@isDisabled}} required={{@isRequired}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.ariaDescribedBy}} data-test-radio-input {{on \"change\" this.handleChange}} ...attributes />\n    <span class=\"radio-control_e6dda4f5d\" data-test-radio-control>\n      <span class=\"radio-dot_e6dda4f5d\"></span>\n    </span>\n    {{#if (has-block)}}\n      <span class=\"radio-label_e6dda4f5d\" data-visually-hidden={{if @isLabelHidden \"true\" \"false\"}} data-test-radio-label>\n        {{yield}}\n      </span>\n    {{else if @label}}\n      <span class=\"radio-label_e6dda4f5d\" data-visually-hidden={{if @isLabelHidden \"true\" \"false\"}} data-test-radio-label>\n        {{@label}}\n      </span>\n    {{/if}}\n  </label>\n\n  {{#if (has-block \"description\")}}\n    <p id={{this.descriptionId}} class=\"radio-description_e6dda4f5d\" data-test-radio-description>\n      {{yield to=\"description\"}}\n    </p>\n  {{else if @description}}\n    <p id={{this.descriptionId}} class=\"radio-description_e6dda4f5d\" data-test-radio-description>\n      {{@description}}\n    </p>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+
+export { Radio as default };
+//# sourceMappingURL=radio.js.map

package/dist/form/radio.js.map

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

package/dist/form/search-input.css

@@ -0,0 +1,118 @@
+/* src/form/search-input.css */
+.field_e35e7cf3c {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.label_e35e7cf3c {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-tight);
+}
+
+.required_e35e7cf3c {
+  color: var(--color-border-critical);
+  margin-left: var(--spacing-1);
+}
+
+.input-wrapper_e35e7cf3c {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input_e35e7cf3c {
+  box-sizing: border-box;
+  width: 100%;
+  border: var(--border-sm) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default);
+  outline: none;
+  padding: 0 var(--spacing-2);
+  padding-left: var(--spacing-8);
+}
+
+/* Size variants */
+.input_e35e7cf3c[data-size="small"],
+.input_e35e7cf3c[data-size="medium"] {
+  height: var(--spacing-8);
+  font-size: var(--font-size-sm);
+}
+
+.input_e35e7cf3c[data-size="large"] {
+  height: var(--spacing-12);
+  font-size: var(--font-size-base);
+}
+
+/* Placeholder styling */
+.input_e35e7cf3c::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* Focus state */
+.input_e35e7cf3c:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Disabled state */
+.input_e35e7cf3c:disabled {
+  background-color: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.input_e35e7cf3c[readonly] {
+  background-color: var(--color-bg-disabled);
+  cursor: default;
+}
+
+/* Hover state */
+.input_e35e7cf3c:hover:not(:disabled, :focus) {
+  border-color: var(--color-border-control-hover);
+}
+
+/* Error state */
+.input_e35e7cf3c[data-error] {
+  border-color: var(--color-border-critical);
+}
+
+.input_e35e7cf3c[data-error]:focus {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Icons */
+.search-icon_e35e7cf3c {
+  position: absolute;
+  left: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+/* Helper and error text */
+.helper-text_e35e7cf3c {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-secondary);
+}
+
+.error-text_e35e7cf3c {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-critical);
+}