@visitwonders/assembly 0.1.0 → 0.2.0

package/dist/form/checkbox.css

@@ -147,17 +147,17 @@
 .label_eed179744 {
   font-size: var(--font-size-md);
   color: var(--color-text);
-  line-height: var(--spacing-5);
+  line-height: var(--line-height-20);
 }
 
 .wrapper_eed179744[data-size="sm"] .label_eed179744 {
   font-size: var(--font-size-sm);
-  line-height: var(--spacing-4);
+  line-height: var(--line-height-16);
 }
 
 .wrapper_eed179744[data-size="lg"] .label_eed179744 {
   font-size: var(--font-size-lg);
-  line-height: var(--spacing-6);
+  line-height: var(--line-height-24);
 }
 
 .label_eed179744[data-visually-hidden="true"] {

package/dist/form/control-css-02e93d930aecac651d5c69dc10a83504.css

@@ -0,0 +1,36 @@
+/* <inline>/src/form/control-css-02e93d930aecac651d5c69dc10a83504.css */
+
+  .assembly-control_e529e8199 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-6);
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] .label {
+    flex-shrink: 0;
+    min-width: 120px;
+    padding-top: var(--spacing-2);
+  }
+
+  .assembly-control_e529e8199[data-max-width="xs"] {
+    max-width: 120px;
+  }
+  .assembly-control_e529e8199[data-max-width="sm"] {
+    max-width: 200px;
+  }
+  .assembly-control_e529e8199[data-max-width="md"] {
+    max-width: 320px;
+  }
+  .assembly-control_e529e8199[data-max-width="lg"] {
+    max-width: 480px;
+  }
+  .assembly-control_e529e8199[data-max-width="xl"] {
+    max-width: 640px;
+  }

package/dist/form/control.js

@@ -1,4 +1,4 @@
-import "./control-css-6c81caf37fd813b36033091d5340bc70.css"
+import "./control-css-02e93d930aecac651d5c69dc10a83504.css"
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { hash } from '@ember/helper';
@@ -39,7 +39,7 @@ class Control extends Component {
     return this.args.isReadOnly ?? false;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n<div class=\"assembly-control_e529e8199\" data-orientation={{this.orientation}} data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-required={{if this.isRequired \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-test-form-control ...attributes>\n  {{yield (hash Label=(component Label for=this.id isRequired=this.isRequired isDisabled=this.isDisabled) Input=(component Input id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) Textarea=(component Textarea id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) HelpText=(component HelpText id=this.helpTextId) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=this.isInvalid) id=this.id isInvalid=this.isInvalid isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly)}}\n</div>", {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"assembly-control_e529e8199\" data-orientation={{this.orientation}} data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-required={{if this.isRequired \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-test-form-control ...attributes>\n  {{yield (hash Label=(component Label for=this.id isRequired=this.isRequired isDisabled=this.isDisabled info=@labelInfo) Input=(component Input id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) Textarea=(component Textarea id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) HelpText=(component HelpText id=this.helpTextId) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=this.isInvalid) id=this.id isInvalid=this.isInvalid isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly)}}\n</div>", {
       strictMode: true,
       scope: () => ({
         hash,

package/dist/form/country-select-field.js

@@ -23,7 +23,7 @@ class CountrySelectField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <CountrySelect @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @showFlag={{@showFlag}} @showDialCode={{@showDialCode}} @displayDialCode={{@displayDialCode}} @suggestedCountries={{@suggestedCountries}} @prioritizeByLocale={{@prioritizeByLocale}} @includeOnly={{@includeOnly}} @exclude={{@exclude}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-country-select-field />\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <CountrySelect @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @showFlag={{@showFlag}} @showDialCode={{@showDialCode}} @displayDialCode={{@displayDialCode}} @suggestedCountries={{@suggestedCountries}} @prioritizeByLocale={{@prioritizeByLocale}} @includeOnly={{@includeOnly}} @exclude={{@exclude}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-country-select-field />\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,

package/dist/form/country-select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"country-select-field.js","sources":["../../src/form/country-select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport CountrySelect from './country-select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface CountrySelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value (ISO country code) */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Show flag emoji in options and trigger (default: true) */\n    showFlag?: boolean;\n\n    /** Show dial code in options */\n    showDialCode?: boolean;\n\n    /** Show dial code in the selected value display */\n    displayDialCode?: boolean;\n\n    /** ISO codes to show at top as suggested */\n    suggestedCountries?: string[];\n\n    /** Auto-suggest based on browser locale (default: false) */\n    prioritizeByLocale?: boolean;\n\n    /** Only show these countries (ISO codes) */\n    includeOnly?: string[];\n\n    /** Hide these countries (ISO codes) */\n    exclude?: string[];\n\n    /** Change event handler */\n    onChange?: (countryCode: string | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n}\n\nexport default class CountrySelectField extends Component<CountrySelectFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <CountrySelect\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @showFlag={{@showFlag}}\n        @showDialCode={{@showDialCode}}\n        @displayDialCode={{@displayDialCode}}\n        @suggestedCountries={{@suggestedCountries}}\n        @prioritizeByLocale={{@prioritizeByLocale}}\n        @includeOnly={{@includeOnly}}\n        @exclude={{@exclude}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-country-select-field\n      />\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>\n  </template>\n}\n"],"names":["CountrySelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","CountrySelect"],"mappings":";;;;;;AAqEe,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,u8BAAA,EA0CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"country-select-field.js","sources":["../../src/form/country-select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport CountrySelect from './country-select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface CountrySelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value (ISO country code) */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Show flag emoji in options and trigger (default: true) */\n    showFlag?: boolean;\n\n    /** Show dial code in options */\n    showDialCode?: boolean;\n\n    /** Show dial code in the selected value display */\n    displayDialCode?: boolean;\n\n    /** ISO codes to show at top as suggested */\n    suggestedCountries?: string[];\n\n    /** Auto-suggest based on browser locale (default: false) */\n    prioritizeByLocale?: boolean;\n\n    /** Only show these countries (ISO codes) */\n    includeOnly?: string[];\n\n    /** Hide these countries (ISO codes) */\n    exclude?: string[];\n\n    /** Change event handler */\n    onChange?: (countryCode: string | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class CountrySelectField extends Component<CountrySelectFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <CountrySelect\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @showFlag={{@showFlag}}\n        @showDialCode={{@showDialCode}}\n        @displayDialCode={{@displayDialCode}}\n        @suggestedCountries={{@suggestedCountries}}\n        @prioritizeByLocale={{@prioritizeByLocale}}\n        @includeOnly={{@includeOnly}}\n        @exclude={{@exclude}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-country-select-field\n      />\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>\n  </template>\n}\n"],"names":["CountrySelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","CountrySelect"],"mappings":";;;;;;AA4Ee,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,+rCAAA,EAkDA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/country-select.css

@@ -229,7 +229,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

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

@@ -23,7 +23,7 @@ class DatePickerField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   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  <DatePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @placeholder={{@placeholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-picker-field />\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <DatePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @placeholder={{@placeholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-picker-field />\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,

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker-field.js","sources":["../../src/form/date-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DatePicker, { type DateFormat } from './date-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DatePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date value */\n    value?: Date | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: Date | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a date is selected */\n    closeOnSelect?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: Date | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n}\n\nexport default class DatePickerField extends Component<DatePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <DatePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @placeholder={{@placeholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-picker-field\n      />\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>\n  </template>\n}\n"],"names":["DatePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DatePicker"],"mappings":";;;;;;AA6Fe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,qrCAAA,EAmDA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"date-picker-field.js","sources":["../../src/form/date-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DatePicker, { type DateFormat } from './date-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DatePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date value */\n    value?: Date | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: Date | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a date is selected */\n    closeOnSelect?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: Date | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DatePickerField extends Component<DatePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DatePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @placeholder={{@placeholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-picker-field\n      />\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>\n  </template>\n}\n"],"names":["DatePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DatePicker"],"mappings":";;;;;;AAoGe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,66CAAA,EA2DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

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

@@ -23,7 +23,7 @@ class DateRangePickerField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   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  <DateRangePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @startPlaceholder={{@startPlaceholder}} @endPlaceholder={{@endPlaceholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @presets={{@presets}} @allowTextInput={{@allowTextInput}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-range-picker-field />\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <DateRangePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @startPlaceholder={{@startPlaceholder}} @endPlaceholder={{@endPlaceholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @presets={{@presets}} @allowTextInput={{@allowTextInput}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-range-picker-field />\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,

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

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker-field.js","sources":["../../src/form/date-range-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DateRangePicker, {\n  type DateFormat,\n  type DateRangePreset,\n  type DateRange,\n} from './date-range-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DateRangePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date range value */\n    value?: DateRange | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: DateRange | null;\n\n    /** Placeholder text for start date */\n    startPlaceholder?: string;\n\n    /** Placeholder text for end date */\n    endPlaceholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Preset date range options */\n    presets?: DateRangePreset[];\n\n    /** Allow typing in the inputs */\n    allowTextInput?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name prefix for forms (creates {name}_start and {name}_end) */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: DateRange | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n}\n\nexport default class DateRangePickerField extends Component<DateRangePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <DateRangePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @startPlaceholder={{@startPlaceholder}}\n        @endPlaceholder={{@endPlaceholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @presets={{@presets}}\n        @allowTextInput={{@allowTextInput}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-range-picker-field\n      />\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>\n  </template>\n}\n"],"names":["DateRangePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DateRangePicker"],"mappings":";;;;;;AAoGe,MAAMA,6BAA6BC,SAAA,CAAU;EAC1D,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,kuCAAA,EAoDA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"date-range-picker-field.js","sources":["../../src/form/date-range-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DateRangePicker, {\n  type DateFormat,\n  type DateRangePreset,\n  type DateRange,\n} from './date-range-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DateRangePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date range value */\n    value?: DateRange | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: DateRange | null;\n\n    /** Placeholder text for start date */\n    startPlaceholder?: string;\n\n    /** Placeholder text for end date */\n    endPlaceholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Preset date range options */\n    presets?: DateRangePreset[];\n\n    /** Allow typing in the inputs */\n    allowTextInput?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name prefix for forms (creates {name}_start and {name}_end) */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: DateRange | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class DateRangePickerField extends Component<DateRangePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <DateRangePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @startPlaceholder={{@startPlaceholder}}\n        @endPlaceholder={{@endPlaceholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @presets={{@presets}}\n        @allowTextInput={{@allowTextInput}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-range-picker-field\n      />\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>\n  </template>\n}\n"],"names":["DateRangePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DateRangePicker"],"mappings":";;;;;;AA2Ge,MAAMA,6BAA6BC,SAAA,CAAU;EAC1D,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,09CAAA,EA4DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/field.css

@@ -10,7 +10,7 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-text);
-  line-height: 1.25rem;
+  line-height: var(--line-height-normal);
 }
 
 .required_e77bb2bf4 {
@@ -28,14 +28,14 @@
 .helper-text_e77bb2bf4 {
   margin: 0;
   font-size: 0.8125rem;
-  line-height: 1.125rem;
+  line-height: var(--line-height-tight);
   color: var(--color-text-secondary);
 }
 
 .error-text_e77bb2bf4 {
   margin: 0;
   font-size: 0.8125rem;
-  line-height: 1.125rem;
+  line-height: var(--line-height-tight);
   color: var(--red-500);
 }
 

package/dist/form/fieldset.css

@@ -0,0 +1,65 @@
+/* src/form/fieldset.css */
+.fieldset_ef4a2e6ab {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Legend */
+.legend_ef4a2e6ab {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  line-height: var(--line-height-normal);
+  padding: 0;
+  margin-bottom: var(--spacing-3);
+}
+
+.fieldset_ef4a2e6ab[data-disabled="true"] .legend_ef4a2e6ab {
+  color: var(--color-text-disabled);
+}
+
+/* Description */
+.description_ef4a2e6ab {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+  margin-top: calc(-1 * var(--spacing-2));
+  margin-bottom: var(--spacing-3);
+}
+
+/* Content */
+.content_ef4a2e6ab {
+  display: flex;
+  flex-direction: column;
+}
+
+.content_ef4a2e6ab[data-gap="none"] {
+  gap: 0;
+}
+
+.content_ef4a2e6ab[data-gap="xs"] {
+  gap: var(--spacing-gap-xs);
+}
+
+.content_ef4a2e6ab[data-gap="sm"] {
+  gap: var(--spacing-gap-sm);
+}
+
+.content_ef4a2e6ab[data-gap="md"] {
+  gap: var(--spacing-gap-md);
+}
+
+.content_ef4a2e6ab[data-gap="lg"] {
+  gap: var(--spacing-gap-lg);
+}
+
+.content_ef4a2e6ab[data-gap="xl"] {
+  gap: var(--spacing-gap-xl);
+}

package/dist/form/fieldset.js

@@ -0,0 +1,20 @@
+import "./fieldset.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Fieldset extends Component {
+  get gap() {
+    return this.args.gap ?? 'md';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset class=\"fieldset_ef4a2e6ab\" data-disabled={{if @isDisabled \"true\"}} data-test-fieldset ...attributes>\n  {{#if @legend}}\n    <legend class=\"legend_ef4a2e6ab\" data-test-fieldset-legend>\n      {{@legend}}\n    </legend>\n  {{/if}}\n\n  {{#if @description}}\n    <p class=\"description_ef4a2e6ab\" data-test-fieldset-description>\n      {{@description}}\n    </p>\n  {{/if}}\n\n  <div class=\"content_ef4a2e6ab\" data-gap={{this.gap}} data-test-fieldset-content>\n    {{yield}}\n  </div>\n</fieldset>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Fieldset as default };
+//# sourceMappingURL=fieldset.js.map

package/dist/form/fieldset.js.map

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

package/dist/form/help-text.css

@@ -1,7 +1,7 @@
 /* src/form/help-text.css */
 .help-text_e4685b9e4 {
   display: block;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
 }

package/dist/form/index.js

@@ -10,6 +10,7 @@ export { default as DateRangePicker } from './date-range-picker.js';
 export { default as DateRangePickerField } from './date-range-picker-field.js';
 export { default as ErrorMessage } from './error-message.js';
 export { default as Field } from './field.js';
+export { default as Fieldset } from './fieldset.js';
 export { default as Form } from './form.js';
 export { default as HelpText } from './help-text.js';
 export { default as Input } from './input.js';

package/dist/form/index.js.map

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

package/dist/form/input.css

@@ -121,6 +121,7 @@
 .input-suffix_ef268a5e9 {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   padding: 0 var(--spacing-3);
   background-color: var(--color-bg-surface-sunken);
   border: var(--border-width-1) solid var(--color-border-control);

package/dist/form/label.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: baseline;
   gap: var(--spacing-1);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   color: var(--color-text);
   line-height: var(--line-height-tight);
 }
@@ -57,3 +57,17 @@
   font-weight: var(--font-weight-regular);
   font-style: italic;
 }
+
+/* Info tooltip trigger */
+.label-info-trigger_e7fa6e7a3 {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+  cursor: default;
+  position: relative;
+  top: 0.1em;
+}
+
+.label-info-trigger_e7fa6e7a3:hover {
+  color: var(--color-text);
+}

package/dist/form/label.js

@@ -1,5 +1,8 @@
 import "./label.css"
 import Component from '@glimmer/component';
+import { Info } from 'lucide';
+import Icon from '../media/icon.js';
+import Tooltip from '../overlay/tooltip.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -14,7 +17,6 @@ class Label extends Component {
       isRequired,
       requiredIndicator
     } = this.args;
-    // Show when required AND requiredIndicator is not explicitly false
     return isRequired === true && requiredIndicator !== false;
   }
   get requiredIndicatorText() {
@@ -31,7 +33,6 @@ class Label extends Component {
       isRequired,
       optionalIndicator
     } = this.args;
-    // Show when NOT required AND optionalIndicator is truthy
     return isRequired !== true && !!optionalIndicator;
   }
   get optionalIndicatorText() {
@@ -44,8 +45,13 @@ class Label extends Component {
     return '(optional)';
   }
   static {
-    setComponentTemplate(precompileTemplate("<label class=\"label_e7fa6e7a3\" for={{@for}} data-size={{this.size}} data-disabled={{if @isDisabled \"true\"}} data-visually-hidden={{if @isVisuallyHidden \"true\"}} data-test-form-label ...attributes>\n  <span class=\"label-text\" data-test-label-text>{{yield}}</span>\n  {{#if this.showRequiredIndicator}}\n    <span class=\"label-required_e7fa6e7a3\" data-test-label-required aria-hidden=\"true\">{{this.requiredIndicatorText}}</span>\n  {{/if}}\n  {{#if this.showOptionalIndicator}}\n    <span class=\"label-optional_e7fa6e7a3\" data-test-label-optional>{{this.optionalIndicatorText}}</span>\n  {{/if}}\n  {{#if @secondaryLabel}}\n    <span class=\"label-secondary_e7fa6e7a3\" data-test-label-secondary>{{@secondaryLabel}}</span>\n  {{/if}}\n</label>", {
-      strictMode: true
+    setComponentTemplate(precompileTemplate("<label class=\"label_e7fa6e7a3\" for={{@for}} data-size={{this.size}} data-disabled={{if @isDisabled \"true\"}} data-visually-hidden={{if @isVisuallyHidden \"true\"}} data-test-form-label ...attributes>\n  <span class=\"label-text\" data-test-label-text>{{yield}}</span>\n  {{#if this.showRequiredIndicator}}\n    <span class=\"label-required_e7fa6e7a3\" data-test-label-required aria-hidden=\"true\">{{this.requiredIndicatorText}}</span>\n  {{/if}}\n  {{#if this.showOptionalIndicator}}\n    <span class=\"label-optional_e7fa6e7a3\" data-test-label-optional>{{this.optionalIndicatorText}}</span>\n  {{/if}}\n  {{#if @secondaryLabel}}\n    <span class=\"label-secondary_e7fa6e7a3\" data-test-label-secondary>{{@secondaryLabel}}</span>\n  {{/if}}\n  {{#if (has-block \"info\")}}\n    <Tooltip @side=\"top\" @showArrow={{false}} data-test-label-info>\n      <:default>\n        <span class=\"label-info-trigger_e7fa6e7a3\">\n          <Icon @icon={{Info}} @size=\"xs\" @label=\"More information\" />\n        </span>\n      </:default>\n      <:content>\n        {{yield to=\"info\"}}\n      </:content>\n    </Tooltip>\n  {{else if @info}}\n    <Tooltip @content={{@info}} @side=\"top\" @showArrow={{false}} data-test-label-info>\n      <span class=\"label-info-trigger_e7fa6e7a3\">\n        <Icon @icon={{Info}} @size=\"xs\" @label=\"More information\" />\n      </span>\n    </Tooltip>\n  {{/if}}\n</label>", {
+      strictMode: true,
+      scope: () => ({
+        Tooltip,
+        Icon,
+        Info
+      })
     }), this);
   }
 }

package/dist/form/money-field.js

@@ -188,7 +188,7 @@ class MoneyField extends Component {
     n(this.prototype, "handleFocus", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} data-currency={{@currency}} data-test-money-field ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <ctrl.Input @prefix={{if this.showPrefix this.currencySymbol}} @suffix={{if this.showSuffix this.currencySymbol}} @inputMode=\"decimal\" @placeholder={{this.placeholder}} @name={{@name}} @value={{this.displayValue}} data-money-field {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage @errors={{array @error}} />\n  {{/if}}\n</Control>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} data-currency={{@currency}} data-test-money-field ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <ctrl.Input @prefix={{if this.showPrefix this.currencySymbol}} @suffix={{if this.showSuffix this.currencySymbol}} @inputMode=\"decimal\" @placeholder={{this.placeholder}} @name={{@name}} @value={{this.displayValue}} data-money-field {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage @errors={{array @error}} />\n  {{/if}}\n</Control>", {
       strictMode: true,
       scope: () => ({
         Control,

package/dist/form/multi-select.css

@@ -214,7 +214,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

package/dist/form/number-field.css

@@ -3,6 +3,7 @@
 .number-field-input-wrapper_e9ff3bd72 {
   display: flex;
   align-items: stretch;
+  box-sizing: border-box;
   height: var(--input-height-md);
   border: var(--border-width-1) solid var(--color-border-control);
   border-radius: var(--radius-md);

package/dist/form/number-field.js

@@ -167,7 +167,7 @@ class NumberField extends Component {
     }
   };
   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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} data-max-width={{@maxWidth}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\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,

package/dist/form/radio.css

@@ -132,17 +132,17 @@
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-regular);
   color: var(--color-text);
-  line-height: var(--spacing-5);
+  line-height: var(--line-height-20);
 }
 
 .radio-wrapper_e6dda4f5d[data-size="sm"] .radio-label_e6dda4f5d {
   font-size: var(--font-size-sm);
-  line-height: var(--spacing-4);
+  line-height: var(--line-height-16);
 }
 
 .radio-wrapper_e6dda4f5d[data-size="lg"] .radio-label_e6dda4f5d {
   font-size: var(--font-size-lg);
-  line-height: var(--spacing-6);
+  line-height: var(--line-height-24);
 }
 
 .radio-label_e6dda4f5d[data-visually-hidden="true"] {

package/dist/form/select-field.js

@@ -24,7 +24,7 @@ class SelectField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\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,

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/form/select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport Control from './control.gts';\nimport Select, { SelectOption, SelectOptionGroup } from './select.gts';\n\nimport './select.css';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface SelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: string) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Option: WithBoundArgs<typeof SelectOption, 'ctx'>;\n        OptionGroup: typeof SelectOptionGroup;\n      },\n    ];\n  };\n}\n\nexport default class SelectField extends Component<SelectFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <Select\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-select-field\n        as |select|\n      >\n        {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n      </Select>\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>\n  </template>\n}\n"],"names":["SelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","Select","hash"],"mappings":";;;;;;;AA4De,MAAMA,oBAAoBC,SAAA,CAAU;EACjD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,+yBAAA,EAsCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,MAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../src/form/select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport Control from './control.gts';\nimport Select, { SelectOption, SelectOptionGroup } from './select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface SelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: string) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Option: WithBoundArgs<typeof SelectOption, 'ctx'>;\n        OptionGroup: typeof SelectOptionGroup;\n      },\n    ];\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class SelectField extends Component<SelectFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <Select\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-select-field\n        as |select|\n      >\n        {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n      </Select>\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>\n  </template>\n}\n"],"names":["SelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","Select","hash"],"mappings":";;;;;;;AA+De,MAAMA,oBAAoBC,SAAA,CAAU;EACjD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,uiCAAA,EA8CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,MAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/select.css

@@ -127,7 +127,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

package/dist/form/{text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css → text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/form/text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css */
+/* <inline>/src/form/text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css */
 
   .text-field_e2680f9ba {
     display: flex;
@@ -29,3 +29,24 @@
   .text-field_e2680f9ba[data-over-limit="true"] .text-field-character-count_e2680f9ba {
     color: var(--color-text-critical);
   }
+
+  .text-field_e2680f9ba[data-monospace="true"] input,
+  .text-field_e2680f9ba[data-monospace="true"] textarea {
+    font-family: var(--font-family-mono);
+  }
+
+  .text-field_e2680f9ba[data-max-width="xs"] {
+    max-width: 120px;
+  }
+  .text-field_e2680f9ba[data-max-width="sm"] {
+    max-width: 200px;
+  }
+  .text-field_e2680f9ba[data-max-width="md"] {
+    max-width: 320px;
+  }
+  .text-field_e2680f9ba[data-max-width="lg"] {
+    max-width: 480px;
+  }
+  .text-field_e2680f9ba[data-max-width="xl"] {
+    max-width: 640px;
+  }