@bspk/ui 1.3.20 → 1.3.22

package/dist/components/InputField/InputField.d.ts

@@ -1,15 +1,15 @@
-import { FormFieldControlProps } from '-/components/FormField';
+import { FieldControlProps } from '-/components/Field';
 import { InputProps } from '-/components/Input';
-export type InputFieldProps = FormFieldControlProps<InputProps>;
+export type InputFieldProps = FieldControlProps<InputProps>;
 /**
  * A field wrapper for the Input component.
  *
  * This component takes properties from the FormField and Input components.
  *
  * @name InputField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export declare function InputField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputField/InputField.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from '../FormField';
+import { Field, propsWithAria } from '../Field';
 import { Input } from '../Input';
+import { useId } from '../../hooks/useId';
 /**
  * A field wrapper for the Input component.
  *
  * This component takes properties from the FormField and Input components.
  *
  * @name InputField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export function InputField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
-    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(Input, { ...controlProps }) }));
+export function InputField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }) {
+    const id = useId(idProp);
+    return (_jsx(Field, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(Input, { ...propsWithAria({ id, controlProps, errorMessage, helperText }) }) }));
 }
 //# sourceMappingURL=InputField.js.map

package/dist/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/components/InputField/InputField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AAIvD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACD;IACd,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,KAAK,OAAK,YAAY,GAAI,GACnB,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/components/InputField/InputField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAqB,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EACvB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,EAAE,EAAE,MAAM,EACV,GAAG,YAAY,EACD;IACd,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,KAAK,OAAK,aAAa,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAI,GACxE,CACX,CAAC;AACN,CAAC"}

package/dist/components/InputNumber/InputNumber.d.ts

@@ -35,24 +35,25 @@ export type InputNumberProps = CommonProps<'size'> & FieldControlProps<number> &
  * For a more complete example with field usage, see the InputNumberField component.
  *
  * @example
- *     import { InputNumber } from '@bspk/ui/InputNumber';
+ *     import { InputNumber } from '-/components/InputNumber';
  *
  *     () => {
  *         const [value, setValue] = useState<number | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Number</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-number"
+ *                     helperText="The input number allows you to increment or decrement a value."
+ *                     label="Example Input Number"
+ *                 >
  *                     <InputNumber
  *                         aria-label="Example aria-label"
+ *                         id="example-input-number"
  *                         name="example-name"
  *                         onChange={(nextValue) => setValue(nextValue)}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The input number allows you to increment or decrement a value.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -61,5 +62,5 @@ export type InputNumberProps = CommonProps<'size'> & FieldControlProps<number> &
  * @name InputNumber
  * @phase Stable
  */
-export declare function InputNumber({ value: valueProp, onChange, align, size, disabled, readOnly, name, id: idProp, 'aria-label': ariaLabel, max: maxProp, min, invalid: invalidProp, step, required, ...inputElementProps }: InputNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputNumber({ value: valueProp, onChange, align, size, disabled, readOnly, name, id: idProp, 'aria-label': ariaLabel, max: maxProp, min, invalid, step, required, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputElementProps }: InputNumberProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputNumber/InputNumber.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './input-number.css.js';
 import { useEffect, useRef } from 'react';
 import { IncrementButton } from './IncrementButton';
-import { useFieldInit } from '../Field';
 import { useId } from '../../hooks/useId';
 function isNumber(value, fallbackValue) {
     if (typeof value === 'number')
@@ -21,24 +20,25 @@ function isNumber(value, fallbackValue) {
  * For a more complete example with field usage, see the InputNumberField component.
  *
  * @example
- *     import { InputNumber } from '@bspk/ui/InputNumber';
+ *     import { InputNumber } from '.';
  *
  *     () => {
  *         const [value, setValue] = useState<number | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Number</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-number"
+ *                     helperText="The input number allows you to increment or decrement a value."
+ *                     label="Example Input Number"
+ *                 >
  *                     <InputNumber
  *                         aria-label="Example aria-label"
+ *                         id="example-input-number"
  *                         name="example-name"
  *                         onChange={(nextValue) => setValue(nextValue)}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The input number allows you to increment or decrement a value.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -47,17 +47,10 @@ function isNumber(value, fallbackValue) {
  * @name InputNumber
  * @phase Stable
  */
-export function InputNumber({ value: valueProp, onChange, align = 'center', size = 'medium', disabled = false, readOnly = false, name, id: idProp, 'aria-label': ariaLabel = 'Input number', max: maxProp, min = 0, invalid: invalidProp = false, step = 1, required = false, ...inputElementProps }) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+export function InputNumber({ value: valueProp, onChange, align = 'center', size = 'medium', disabled = false, readOnly = false, name, id: idProp, 'aria-label': ariaLabel = 'Input number', max: maxProp, min = 0, invalid = false, step = 1, required = false, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputElementProps }) {
+    const inputId = useId(idProp);
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
-    const inputId = useId(id);
     const value = isNumber(valueProp, min);
     const removeDisabled = disabled || value + step * -1 < min;
     const addDisabled = disabled || value + step > max;

package/dist/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputNumber/InputNumberExample.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { InputNumber } from './InputNumber';
-import { Field, FieldLabel, FieldDescription } from '../Field';
+import { Field } from '../Field';
 export const InputNumberExample = {
     defaultState: {
         'aria-label': 'input number aria-label',
@@ -13,6 +13,6 @@ export const InputNumberExample = {
 };
 export const Usage = () => {
     const [value, setValue] = useState();
-    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Example Input Number" }), _jsx(InputNumber, { "aria-label": "Example aria-label", name: "example-name", onChange: (nextValue) => setValue(nextValue), value: value }), _jsx(FieldDescription, { children: "The input number allows you to increment or decrement a value." })] }) }));
+    return (_jsx("div", { style: { width: 320 }, children: _jsx(Field, { controlId: "example-input-number", helperText: "The input number allows you to increment or decrement a value.", label: "Example Input Number", children: _jsx(InputNumber, { "aria-label": "Example aria-label", id: "example-input-number", name: "example-name", onChange: (nextValue) => setValue(nextValue), value: value }) }) }));
 };
 //# sourceMappingURL=InputNumberExample.js.map

package/dist/components/InputNumber/InputNumberExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumberExample.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumberExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,YAAY,EAAE;QACV,YAAY,EAAE,yBAAyB;KAC1C;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,uCAAkC,EAC7C,KAAC,WAAW,kBACG,oBAAoB,EAC/B,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,GACd,EACF,KAAC,gBAAgB,iFAAkF,IAC/F,GACN,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"InputNumberExample.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumberExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,YAAY,EAAE;QACV,YAAY,EAAE,yBAAyB;KAC1C;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,KAAC,KAAK,IACF,SAAS,EAAC,sBAAsB,EAChC,UAAU,EAAC,gEAAgE,EAC3E,KAAK,EAAC,sBAAsB,YAE5B,KAAC,WAAW,kBACG,oBAAoB,EAC/B,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,GACd,GACE,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/InputNumber/input-number.css

@@ -14,6 +14,7 @@
 }
 [data-bspk=input-number]:focus-within {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-bspk=input-number] [data-divider] {
   width: 1px;

package/dist/components/InputNumber/input-number.css.js

@@ -17,6 +17,7 @@ style.appendChild(document.createTextNode(`[data-bspk=input-number] {
 }
 [data-bspk=input-number]:focus-within {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-bspk=input-number] [data-divider] {
   width: 1px;

package/dist/components/InputNumberField/InputNumberField.d.ts

@@ -1,15 +1,15 @@
-import { FormFieldControlProps } from '-/components/FormField';
+import { FieldControlProps } from '-/components/Field';
 import { InputNumberProps } from '-/components/InputNumber';
-export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+export type InputNumberFieldProps = FieldControlProps<InputNumberProps>;
 /**
  * A field wrapper for the InputNumber component.
  *
  * This component takes properties from the FormField and InputNumber components.
  *
  * @name InputNumberField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export declare function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputNumberFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }: InputNumberFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputNumberField/InputNumberField.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from '../FormField';
+import { Field, propsWithAria } from '../Field';
 import { InputNumber } from '../InputNumber';
+import { useId } from '../../hooks/useId';
 /**
  * A field wrapper for the InputNumber component.
  *
  * This component takes properties from the FormField and InputNumber components.
  *
  * @name InputNumberField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
-    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputNumber, { ...controlProps }) }));
+export function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }) {
+    const id = useId(idProp);
+    return (_jsx(Field, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputNumber, { ...propsWithAria({ id, controlProps, errorMessage, helperText }) }) }));
 }
 //# sourceMappingURL=InputNumberField.js.map

package/dist/components/InputNumberField/InputNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumberField.js","sourceRoot":"","sources":["../../../src/components/InputNumberField/InputNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACK;IACpB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,WAAW,OAAK,YAAY,GAAI,GACzB,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"InputNumberField.js","sourceRoot":"","sources":["../../../src/components/InputNumberField/InputNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAqB,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,EAAE,EAAE,MAAM,EACV,GAAG,YAAY,EACK;IACpB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,WAAW,OAAK,aAAa,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAI,GAC9E,CACX,CAAC;AACN,CAAC"}

package/dist/components/InputPhone/InputPhone.d.ts

@@ -28,26 +28,26 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  * For a more complete example with field usage, see the InputPhoneField component.
  *
  * @example
- *     import { InputPhone } from '@bspk/ui/InputPhone';
- *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
+ *     import { InputPhone } from '-/components/InputPhone';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-phone"
+ *                     helperText="The phone input allows you to enter a phone number with country code."
+ *                     label="Example Input Phone"
+ *                 >
  *                     <InputPhone
  *                         aria-label="Phone Number"
+ *                         id="example-input-phone"
  *                         initialCountryCode="US"
  *                         name="example-name"
  *                         onChange={onChange}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The phone input allows you to enter a phone number with country code.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -56,5 +56,5 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  * @name InputPhone
  * @phase Stable
  */
-export declare function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid: invalidProp, required, size, inputRef, scrollLimit, 'aria-label': ariaLabel, }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid, required, size, inputRef, scrollLimit, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputPhone/InputPhone.js

@@ -5,12 +5,12 @@ import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
 import { useMemo, useRef, useState } from 'react';
 import { Button } from '../Button';
-import { useFieldInit } from '../Field';
-import { InputElement } from '../Input';
+import { Input } from '../Input';
 import { ListItem } from '../ListItem';
 import { Menu } from '../Menu';
 import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import { useFloating } from '../../hooks/useFloating';
+import { useId } from '../../hooks/useId';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { countryCodeData, countryCodes } from '../../utils/countryCodes';
 import { getElementById } from '../../utils/dom';
@@ -36,26 +36,26 @@ const SELECT_OPTIONS = countryCodes.map((code) => {
  * For a more complete example with field usage, see the InputPhoneField component.
  *
  * @example
- *     import { InputPhone } from '@bspk/ui/InputPhone';
- *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
+ *     import { InputPhone } from '.';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-phone"
+ *                     helperText="The phone input allows you to enter a phone number with country code."
+ *                     label="Example Input Phone"
+ *                 >
  *                     <InputPhone
  *                         aria-label="Phone Number"
+ *                         id="example-input-phone"
  *                         initialCountryCode="US"
  *                         name="example-name"
  *                         onChange={onChange}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The phone input allows you to enter a phone number with country code.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -64,14 +64,8 @@ const SELECT_OPTIONS = countryCodes.map((code) => {
  * @name InputPhone
  * @phase Stable
  */
-export function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid: invalidProp, required = false, size = 'medium', inputRef, scrollLimit = 5, 'aria-label': ariaLabel = 'Phone number input', }) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+export function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid = false, required = false, size = 'medium', inputRef, scrollLimit = 5, 'aria-label': ariaLabel = 'Phone number input', 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }) {
+    const id = useId(idProp);
     const menuId = useMemo(() => `${id}-menu`, [id]);
     const items = useIds(`input-phone-${id}`, SELECT_OPTIONS);
     const [countryCode, setCountryCode] = useState(initialCountryCode || guessUserCountryCode());
@@ -120,7 +114,7 @@ export function InputPhone({ value, onChange, disableFormatting, initialCountryC
                     Tab: () => {
                         //  if (open) closeMenu();
                     },
-                }), children: _jsx(InputElement, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputMode: "tel", inputRef: (node) => {
+                }), children: _jsx(Input, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputMode: "tel", inputRef: (node) => {
                         inputRef?.(node);
                         inputInternalRef.current = node;
                     }, invalid: invalid, leading: _jsxs(_Fragment, { children: [_jsxs(Button, { "aria-activedescendant": open ? activeElementId || undefined : undefined, "aria-controls": open ? menuId : undefined, "aria-disabled": disabled || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": "select country code", "aria-owns": menuId, "aria-readonly": readOnly || undefined, disabled: disabled || readOnly, label: "Open country code menu", name: `${name}-country-code`, onClick: (event) => {

package/dist/components/InputPhone/InputPhone.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhone.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhone.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputPhone.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhone.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputPhone/InputPhoneExample.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { InputPhone } from '.';
-import { Field, FieldDescription, FieldLabel } from '../Field';
+import { Field } from '../Field';
 export const presets = [];
 export const InputPhoneExample = {
     containerStyle: { width: 320, padding: 0 },
@@ -13,6 +13,6 @@ export const InputPhoneExample = {
 };
 export const Usage = () => {
     const [value, onChange] = useState();
-    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Example Input Phone" }), _jsx(InputPhone, { "aria-label": "Phone Number", initialCountryCode: "US", name: "example-name", onChange: onChange, value: value }), _jsx(FieldDescription, { children: "The phone input allows you to enter a phone number with country code." })] }) }));
+    return (_jsx("div", { style: { width: 320 }, children: _jsx(Field, { controlId: "example-input-phone", helperText: "The phone input allows you to enter a phone number with country code.", label: "Example Input Phone", children: _jsx(InputPhone, { "aria-label": "Phone Number", id: "example-input-phone", initialCountryCode: "US", name: "example-name", onChange: onChange, value: value }) }) }));
 };
 //# sourceMappingURL=InputPhoneExample.js.map

package/dist/components/InputPhone/InputPhoneExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhoneExample.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhoneExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,YAAY,EAAE,wBAAwB;KACzC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,IAAI;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,sCAAiC,EAC5C,KAAC,UAAU,kBACI,cAAc,EACzB,kBAAkB,EAAC,IAAI,EACvB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,EACF,KAAC,gBAAgB,wFAEE,IACf,GACN,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"InputPhoneExample.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhoneExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,YAAY,EAAE,wBAAwB;KACzC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,IAAI;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,KAAC,KAAK,IACF,SAAS,EAAC,qBAAqB,EAC/B,UAAU,EAAC,uEAAuE,EAClF,KAAK,EAAC,qBAAqB,YAE3B,KAAC,UAAU,kBACI,cAAc,EACzB,EAAE,EAAC,qBAAqB,EACxB,kBAAkB,EAAC,IAAI,EACvB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,GACE,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/InputPhone/input-phone.css

@@ -11,6 +11,7 @@
 }
 [data-bspk-owner=input-phone][data-bspk=input] input:focus-visible {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
   border-radius: var(--radius-sm);
 }
 [data-bspk-owner=input-phone][data-bspk=input] [data-bspk=divider] {

package/dist/components/InputPhone/input-phone.css.js

@@ -14,6 +14,7 @@ style.appendChild(document.createTextNode(`[data-bspk=input-phone] {
 }
 [data-bspk-owner=input-phone][data-bspk=input] input:focus-visible {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
   border-radius: var(--radius-sm);
 }
 [data-bspk-owner=input-phone][data-bspk=input] [data-bspk=divider] {

package/dist/components/InputPhoneField/InputPhoneField.d.ts

@@ -1,15 +1,15 @@
-import { FormFieldControlProps } from '-/components/FormField';
+import { FieldControlProps } from '-/components/Field';
 import { InputPhoneProps } from '-/components/InputPhone';
-export type InputPhoneFieldProps = FormFieldControlProps<InputPhoneProps>;
+export type InputPhoneFieldProps = FieldControlProps<InputPhoneProps>;
 /**
  * A field wrapper for the InputPhone component.
  *
  * This component takes properties from the FormField and InputPhone components.
  *
  * @name InputPhoneField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export declare function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputPhoneFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }: InputPhoneFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputPhoneField/InputPhoneField.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from '../FormField';
+import { Field, propsWithAria } from '../Field';
 import { InputPhone } from '../InputPhone';
+import { useId } from '../../hooks/useId';
 /**
  * A field wrapper for the InputPhone component.
  *
  * This component takes properties from the FormField and InputPhone components.
  *
  * @name InputPhoneField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
-    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputPhone, { ...controlProps }) }));
+export function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }) {
+    const id = useId(idProp);
+    return (_jsx(Field, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputPhone, { ...propsWithAria({ id, controlProps, errorMessage, helperText }) }) }));
 }
 //# sourceMappingURL=InputPhoneField.js.map

package/dist/components/InputPhoneField/InputPhoneField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhoneField.js","sourceRoot":"","sources":["../../../src/components/InputPhoneField/InputPhoneField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAItE;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACI;IACnB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,YAAY,GAAI,GACxB,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"InputPhoneField.js","sourceRoot":"","sources":["../../../src/components/InputPhoneField/InputPhoneField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAqB,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,EAAE,EAAE,MAAM,EACV,GAAG,YAAY,EACI;IACnB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,aAAa,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAI,GAC7E,CACX,CAAC;AACN,CAAC"}

package/dist/components/ListItem/list-item.css

@@ -21,6 +21,7 @@
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
   border-color: transparent;

package/dist/components/ListItem/list-item.css.js

@@ -24,6 +24,7 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
 }
 [data-pseudo=focus] [data-bspk=list-item], [data-bspk=list-item]:focus-visible, [data-bspk=list-item]:has(*:focus-visible) {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
   border-color: transparent;

package/dist/components/Modal/Modal.js

@@ -4,35 +4,28 @@ import { SvgClose } from '@bspk/icons/Close';
 import { useMemo, useRef } from 'react';
 import { Button } from '../Button';
 import { Dialog } from '../Dialog';
-import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useUIContext } from '../../hooks/useUIContext';
-// This hook is used to set the height of the modal based on the dialog box height.
-// It listens to the resize event and updates the modal height accordingly.
-function useDialogHeight() {
-    const onResize = () => {
-        const { dialogBox, modal } = modalRefs.current || {};
-        if (!dialogBox || !modal)
+function useMatchParentHeight() {
+    const elementRef = useRef(null);
+    const updateHeight = () => {
+        const element = elementRef.current;
+        const parentElement = element?.parentElement;
+        if (!element || !parentElement)
             return;
-        modal.style.height = `${dialogBox.offsetHeight}px`;
-        modal.style.visibility = '';
+        // Reset height to allow shrinking or growing
+        element.style.height = '';
+        // Apply new height on next frame
+        requestAnimationFrame(() => {
+            element.style.height = `${parentElement.clientHeight}px`;
+        });
     };
-    useEventListener('resize', useDebounceCallback(onResize, 100));
-    const modalRefs = useRef(null);
+    useEventListener('resize', updateHeight);
+    useEventListener('orientationchange', updateHeight);
     return {
-        setModalRefs: (node) => {
-            if (!node)
-                return;
-            const dialogBox = node.querySelector('[data-dialog-box]');
-            const modal = node.querySelector('[data-bspk="modal"]');
-            modalRefs.current = {
-                dialogBox,
-                modal,
-            };
-            if (!dialogBox || !modal)
-                return;
-            modal.style.height = `${dialogBox.offsetHeight}px`;
-            modal.style.visibility = '';
+        setElement: (el) => {
+            elementRef.current = el;
+            updateHeight();
         },
     };
 }
@@ -87,7 +80,10 @@ export function Modal({ header, description, children, callToAction, cancelButto
         }
         return nextButtons;
     }, [callToAction, cancelButton, dialogProps.onClose, isMobile]);
-    const { setModalRefs } = useDialogHeight();
-    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, disableFocusTrap: disableFocusTrap, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("div", { "data-modal-header": true, children: [_jsx("div", { "data-modal-title": true, children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: dialogProps.onClose, variant: "tertiary" })] }), _jsx("div", { "data-modal-main": true, children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("div", { "data-button-format": buttonFormat, "data-modal-footer": true, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small', width: buttonFormat === 'vertical' && isMobile ? 'fill' : 'hug' }, idx))) }))] }) }));
+    const { setElement } = useMatchParentHeight();
+    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, disableFocusTrap: disableFocusTrap, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => {
+                innerRef?.(node);
+                setElement(node);
+            }, children: [_jsxs("div", { "data-modal-header": true, children: [_jsx("div", { "data-modal-title": true, children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: dialogProps.onClose, size: isMobile ? 'medium' : 'small', variant: "tertiary" })] }), _jsx("div", { "data-modal-main": true, children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("div", { "data-button-format": buttonFormat, "data-modal-footer": true, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small', width: buttonFormat === 'vertical' && isMobile ? 'fill' : 'hug' }, idx))) }))] }) }));
 }
 //# sourceMappingURL=Modal.js.map