@bspk/ui 1.3.10 → 1.3.16

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,55 @@
+import { CSSProperties, ElementType, ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
+import { SizingPixels } from '-/utils/sizing';
+export type FlexProps<As extends ElementType = ElementType> = {
+    /**
+     * The content of the Flex.
+     *
+     * @required
+     */
+    children?: ReactNode;
+    /** The gap between the children. */
+    gap?: SizingPixels | 'auto';
+    /**
+     * The element type to render as.
+     *
+     * @default div
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The align-items style to apply to the Flex.
+     *
+     * @default flex-start
+     */
+    align?: CSSProperties['alignItems'] | 'end' | 'start';
+    /**
+     * The justification style to apply to the Flex.
+     *
+     * @default flex-start
+     */
+    justify?: CSSProperties['justifyContent'];
+    /** The flex-wrap style to apply to the Flex. */
+    wrap?: CSSProperties['flexWrap'];
+    /** The flex-direction style to apply to the Flex. */
+    direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+    /** The padding to apply to the Flex. */
+    padding?: SizingPixels | SizingPixels[];
+};
+/**
+ * Utility component used within other components for layout purposes.
+ *
+ * @example
+ *     import { Flex } from '@bspk/ui/Flex';
+ *
+ *     <Flex gap="24" justify="center" style={{ width: '100%' }}>
+ *         <div>Alpha</div>
+ *         <div>Beta</div>
+ *         <div>Gamma</div>
+ *     </Flex>;
+ *
+ * @name Flex
+ * @phase Utility
+ */
+export declare function Flex<As extends ElementType = ElementType>({ children, gap, style, as, align, justify, wrap, direction, padding, ...props }: ElementProps<FlexProps<As>, As>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Flex/Flex.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToSizingVar } from '../../utils/sizing';
+/**
+ * Utility component used within other components for layout purposes.
+ *
+ * @example
+ *     import { Flex } from '@bspk/ui/Flex';
+ *
+ *     <Flex gap="24" justify="center" style={{ width: '100%' }}>
+ *         <div>Alpha</div>
+ *         <div>Beta</div>
+ *         <div>Gamma</div>
+ *     </Flex>;
+ *
+ * @name Flex
+ * @phase Utility
+ */
+export function Flex({ children, gap, style, as, align = 'flex-start', justify = 'flex-start', wrap, direction = 'row', padding, ...props }) {
+    const As = as || 'div';
+    const alignItems = align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align;
+    const paddingValue = getPaddingValue(padding);
+    return (_jsx(As, { ...props, "data-bspk-utility": "flex", style: {
+            display: 'flex',
+            flexDirection: direction,
+            gap: numToSizingVar(gap),
+            alignItems,
+            justifyContent: justify || 'flex-start',
+            flexWrap: wrap ? 'wrap' : 'nowrap',
+            padding: paddingValue,
+            ...style,
+        }, children: children }));
+}
+function getPaddingValue(padding) {
+    if (!padding)
+        return undefined;
+    return (!Array.isArray(padding) ? [padding] : padding).map((p) => numToSizingVar(p)).join(' ');
+}
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAsC9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,IAAI,CAAuC,EACvD,QAAQ,EACR,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3F,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAE9C,OAAO,CACH,KAAC,EAAE,OACK,KAAK,uBACS,MAAM,EACxB,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,SAAS;YACxB,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC;YACxB,UAAU;YACV,cAAc,EAAE,OAAO,IAAI,YAAY;YACvC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAClC,OAAO,EAAE,YAAY;YACrB,GAAG,KAAK;SACX,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,OAAuC;IAC5D,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAE/B,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACnG,CAAC"}

package/dist/components/Flex/FlexExample.d.ts

@@ -0,0 +1,5 @@
+import { FlexProps } from './Flex';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<FlexProps>[];
+export declare const FlexExample: ComponentExample<FlexProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Flex/FlexExample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from './Flex';
+export const presets = [];
+export const FlexExample = {
+    render: ({ props, Component }) => {
+        return (_jsxs(Component, { ...props, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
+    },
+    presets,
+};
+export const Usage = () => {
+    return (_jsxs(Flex, { gap: "24", justify: "center", style: { width: '100%' }, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
+};
+//# sourceMappingURL=FlexExample.js.map

package/dist/components/Flex/FlexExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexExample.js","sourceRoot":"","sources":["../../../src/components/Flex/FlexExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AAGzC,MAAM,CAAC,MAAM,OAAO,GAAwB,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACR,CACf,CAAC;IACN,CAAC;IACD,OAAO;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,OAAO,CACH,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aACpD,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACb,CACV,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from './Flex';

package/dist/components/Flex/index.js

@@ -0,0 +1,2 @@
+export * from './Flex';
+//# sourceMappingURL=index.js.map

package/dist/components/Flex/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/FormField/FormFieldExample.js

@@ -20,7 +20,6 @@ export const presets = [
     },
 ];
 export const FormFieldExample = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets: presets,

package/dist/components/FormField/FormFieldExample.js.map

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

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { SizingPixels } from '-/utils/sizing';
+export type GridProps = {
+    /**
+     * The content of the grid.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The number of columns in the grid or an array of column widths in fractions or other CSS units.
+     *
+     * Values may be "100px, auto, 2fr, 20%" for four columns with specific widths.
+     *
+     * @default 1
+     *
+     * @exampleType string
+     */
+    columns?: (number | string)[] | number;
+    /** The gap between the children. */
+    gap?: SizingPixels;
+    /** Additional styles for the grid container. */
+    style?: React.CSSProperties;
+    /**
+     * The minimum width of each column.
+     *
+     * @default auto
+     */
+    minColumnWidth?: string;
+};
+/**
+ * A utility component that arranges its children in a grid layout.
+ *
+ * @example
+ *     import { Grid } from '@bspk/ui/Grid';
+ *
+ *     <Grid columns={4} gap="8">
+ *         <ExamplePlaceholder label="Cell 1" />
+ *         <ExamplePlaceholder label="Cell 2" />
+ *         <ExamplePlaceholder label="Cell 3" />
+ *         <ExamplePlaceholder label="Cell 4" />
+ *     </Grid>;
+ *
+ * @name Grid
+ * @phase Utility
+ */
+export declare function Grid({ columns, children, gap, style, minColumnWidth }: GridProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Grid/Grid.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToSizingVar } from '../../utils/sizing';
+/**
+ * A utility component that arranges its children in a grid layout.
+ *
+ * @example
+ *     import { Grid } from '@bspk/ui/Grid';
+ *
+ *     <Grid columns={4} gap="8">
+ *         <ExamplePlaceholder label="Cell 1" />
+ *         <ExamplePlaceholder label="Cell 2" />
+ *         <ExamplePlaceholder label="Cell 3" />
+ *         <ExamplePlaceholder label="Cell 4" />
+ *     </Grid>;
+ *
+ * @name Grid
+ * @phase Utility
+ */
+export function Grid({ columns = 1, children, gap, style, minColumnWidth = 'auto' }) {
+    let gridTemplateColumns = `repeat(auto-fit, minmax(${minColumnWidth}, 1fr))`;
+    // If columns is an array, map it to a string of fractions
+    if (Array.isArray(columns))
+        gridTemplateColumns =
+            columns?.map((width) => (typeof width === 'string' ? width : `${width}fr`)).join(' ') || 'auto';
+    // If columns is not an array, use the default repeat pattern
+    else
+        gridTemplateColumns = `repeat(${columns}, minmax(${minColumnWidth}, 1fr))`;
+    return (_jsx("div", { "data-bspk-utility": "grid", style: {
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns,
+            gap: numToSizingVar(gap),
+            ...style,
+        }, children: children }));
+}
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA+B9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,GAAG,MAAM,EAAa;IAC1F,IAAI,mBAAmB,GAAG,2BAA2B,cAAc,SAAS,CAAC;IAE7E,0DAA0D;IAC1D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QACtB,mBAAmB;YACf,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC;IACxG,6DAA6D;;QACxD,mBAAmB,GAAG,UAAU,OAAO,YAAY,cAAc,SAAS,CAAC;IAEhF,OAAO,CACH,mCACsB,MAAM,EACxB,KAAK,EAAE;YACH,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,mBAAmB;YACnB,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC;YACxB,GAAG,KAAK;SACX,YAEA,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/Grid/GridExample.d.ts

@@ -0,0 +1,3 @@
+import { GridProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+export declare const GridExample: ComponentExample<GridProps>;

package/dist/components/Grid/GridExample.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExamplePlaceholder } from '../ExamplePlaceholder';
+export const GridExample = {
+    defaultState: {
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { children: "Cell 1" }), _jsx("div", { children: "Cell 2" })] })),
+        columns: [1, 2],
+    },
+    render: ({ Component, props }) => {
+        const columns = convertColumns(`${props.columns}`);
+        return (_jsx(Component, { ...props, columns: columns.value, children: [...Array(columns.count)].map((_, index) => (_jsxs(ExamplePlaceholder, { children: ["Cell ", index + 1] }, index))) }));
+    },
+};
+const convertColumns = (columns) => {
+    let value = 1;
+    if (columns.includes(','))
+        value = columns
+            .split(',')
+            .filter((col) => !!col.trim())
+            .map((col) => {
+            if (/^\d+$/.test(col.trim()))
+                return parseInt(col.trim(), 10) || 1;
+            return col.trim();
+        });
+    else
+        value = parseInt(columns, 10) || 1;
+    return { value, count: Array.isArray(value) ? value.length : value };
+};
+//# sourceMappingURL=GridExample.js.map

package/dist/components/Grid/GridExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridExample.js","sourceRoot":"","sources":["../../../src/components/Grid/GridExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,YAAY,EAAE;QACV,QAAQ,EAAE,CACN,8BACI,mCAAiB,EACjB,mCAAiB,IAClB,CACN;QACD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;KAClB;IACD,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QAEnD,OAAO,CACH,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,YACvC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,MAAC,kBAAkB,wBAAmB,KAAK,GAAG,CAAC,KAAtB,KAAK,CAAuC,CACxE,CAAC,GACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAe,EAA0D,EAAE;IAC/F,IAAI,KAAK,GAAiC,CAAC,CAAC;IAE5C,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC;QACrB,KAAK,GAAG,OAAO;aACV,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aAC7B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACT,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;gBAAE,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;YACnE,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;;QACN,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AACzE,CAAC,CAAC"}

package/dist/components/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from './Grid';

package/dist/components/Grid/index.js

@@ -0,0 +1,2 @@
+export * from './Grid';
+//# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/InlineAlert/InlineAlert.d.ts

@@ -27,7 +27,7 @@ export type InlineAlertProps = CommonProps<'owner'> & {
  *     <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *
  * @name InlineAlert
- * @phase UXReview
+ * @phase Stable
  */
 export declare function InlineAlert({ children, variant, id, owner }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InlineAlert/InlineAlert.js

@@ -15,7 +15,7 @@ import { Txt } from '../Txt';
  *     <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *
  * @name InlineAlert
- * @phase UXReview
+ * @phase Stable
  */
 export function InlineAlert({ children, variant = 'informational', id, owner }) {
     return (_jsxs("div", { "data-bspk": "inline-alert", "data-bspk-owner": owner || undefined, "data-variant": variant, id: id, role: "alert", children: [VARIANT_ICON[variant], _jsx(Txt, { variant: "body-small", children: children })] }));

package/dist/components/Input/Input.d.ts

@@ -10,23 +10,19 @@ export type InputProps = Omit<InputElementProps, 'ariaDescribedBy' | 'ariaErrorM
  * @example
  *     import { useState } from 'react';
  *     import { Input } from '@bspk/ui/Input';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *     import { Field, FieldLabel, FieldDescription } from '@bspk/ui/Field';
  *
  *     () => {
- *         const [value, setValue] = useState('');
+ *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
- *             <>
- *                 // standalone input example
- *                 <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />
- *                 <br />
- *                 // input used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Label</FieldLabel>
- *                     <Input name="example-name" onChange={setValue} value={value} />
+ *                     <Input name="example-name" onChange={setFieldDate} value={fieldDate} />
  *                     <FieldDescription>This is an example input field.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *

package/dist/components/Input/Input.js

@@ -10,23 +10,19 @@ import { useFieldInit } from '../Field';
  * @example
  *     import { useState } from 'react';
  *     import { Input } from '@bspk/ui/Input';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *     import { Field, FieldLabel, FieldDescription } from '@bspk/ui/Field';
  *
  *     () => {
- *         const [value, setValue] = useState('');
+ *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
- *             <>
- *                 // standalone input example
- *                 <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />
- *                 <br />
- *                 // input used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Label</FieldLabel>
- *                     <Input name="example-name" onChange={setValue} value={value} />
+ *                     <Input name="example-name" onChange={setFieldDate} value={fieldDate} />
  *                     <FieldDescription>This is an example input field.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,KAAK,CAAC,EAClB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,OAAO,EACjC,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,eAAe,EAAE,mBAAmB,GAAG,IAAI,EAC3C,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO;IACH,8DAA8D;IAC9D,KAAC,YAAY,OACL,KAAK,gBACG,SAAS,EACrB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,mBAAmB,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,KAAK,CAAC,EAClB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,OAAO,EACjC,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,eAAe,EAAE,mBAAmB,GAAG,IAAI,EAC3C,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO;IACH,8DAA8D;IAC9D,KAAC,YAAY,OACL,KAAK,gBACG,SAAS,EACrB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,mBAAmB,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}

package/dist/components/Input/InputElement.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './input.css.js';
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import { Button } from '../Button';
 import { useTimeout } from '../../hooks/useTimeout';
 export const DEFAULT = {
@@ -40,24 +40,21 @@ export const DEFAULT = {
  * @phase Utility
  */
 export function InputElement({ invalid, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel = 'Input', inputRef, required = false, placeholder, id, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, inputProps, ariaDescribedBy, ariaErrorMessage, ...props }) {
-    const [focused, setFocused] = useState(false);
-    const showClearButton = useMemo(() => !!(showClearButtonProp !== false && !readOnly && !disabled && value?.toString().length && focused), [showClearButtonProp, readOnly, disabled, value, focused]);
+    const showClearButton = useMemo(() => showClearButtonProp !== false && !readOnly && !disabled && !!value?.toString().length, [showClearButtonProp, readOnly, disabled, value]);
     const inputRefInternal = useRef(null);
     const focusTimeout = useTimeout();
     return (_jsxs("div", { ...props, "data-bspk": "input", "data-bspk-owner": owner || undefined, "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-show-clear-button": showClearButton || undefined, "data-size": size, ref: containerRef, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { ...inputProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, "data-main-input": true, disabled: disabled || undefined, id: id, name: name, onBlur: (event) => {
-                    focusTimeout.set(() => setFocused(false), 750);
                     inputProps?.onBlur?.(event);
                 }, onChange: (event) => {
                     onChange(event.target.value, event);
                 }, onFocus: (event) => {
-                    focusTimeout.set(() => setFocused(true), 0);
                     inputProps?.onFocus?.(event);
                 }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: (node) => {
                     if (!node)
                         return;
                     inputRef?.(node);
                     inputRefInternal.current = node;
-                }, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), showClearButton && (_jsx(Button, { icon: _jsx(SvgCancel, {}), iconOnly: true, label: "Clear", onClick: () => {
+                }, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), showClearButton && (_jsx(Button, { "data-clear-button": true, icon: _jsx(SvgCancel, {}), iconOnly: true, label: "Clear", onClick: () => {
                     onChange('');
                     inputRefInternal.current?.focus();
                 }, onFocus: () => {

package/dist/components/Input/InputElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputElement.js","sourceRoot":"","sources":["../../../src/components/Input/InputElement.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAqC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AA+CX;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,YAAY,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,OAAO,EACjC,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,EAAE,EACF,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,eAAe,EAAE,mBAAmB,GAAG,IAAI,EAC3C,KAAK,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,GAAG,KAAK,EAC6B;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,KAAK,KAAK,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,QAAQ,EAAE,CAAC,MAAM,IAAI,OAAO,CAAC,EACxG,CAAC,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAC5D,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE/D,MAAM,YAAY,GAAG,UAAU,EAAE,CAAC;IAElC,OAAO,CACH,kBACQ,KAAK,eACC,OAAO,qBACA,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,4BACZ,eAAe,IAAI,SAAS,eACzC,IAAI,EACf,GAAG,EAAE,YAAY,aAEhB,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAE/C,mBACQ,UAAU,sBACI,eAAe,IAAI,SAAS,uBAC3B,gBAAgB,IAAI,SAAS,kBAClC,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,2BAE1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;oBAC/C,UAAU,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC5C,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACjB,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,EAAE,GACpB,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EACjD,eAAe,IAAI,CAChB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE;oBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACb,gBAAgB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACtC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;oBACV,YAAY,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC,EACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,UAAU,GACpB,CACL,IACC,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"InputElement.js","sourceRoot":"","sources":["../../../src/components/Input/InputElement.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/InputExample.d.ts

@@ -5,3 +5,4 @@ export type InputExampleProps = InputProps & {
     description?: string;
 };
 export declare const InputExample: ComponentExample<InputExampleProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/InputExample.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Input } from '.';
+import { Field, FieldLabel, FieldDescription } from '../Field';
 export const InputExample = {
+    containerStyle: { width: 320, padding: 0 },
     defaultState: {
         label: 'Property Description',
         'aria-label': 'input aria-label',
@@ -51,5 +55,10 @@ export const InputExample = {
     variants: {
         type: false,
     },
+    sections: [],
+};
+export const Usage = () => {
+    const [fieldDate, setFieldDate] = useState();
+    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Example Label" }), _jsx(Input, { name: "example-name", onChange: setFieldDate, value: fieldDate }), _jsx(FieldDescription, { children: "This is an example input field." })] }) }));
 };
 //# sourceMappingURL=InputExample.js.map

package/dist/components/Input/InputExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputExample.js","sourceRoot":"","sources":["../../../src/components/Input/InputExample.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,MAAM,YAAY,GAAwC;IAC7D,YAAY,EAAE;QACV,KAAK,EAAE,sBAAsB;QAC7B,YAAY,EAAE,kBAAkB;QAChC,WAAW,EAAE,wCAAwC;QACrD,WAAW,EAAE,mCAAmC;KACnD;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO,EAAE;QACL;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,SAAS;gBACnB,WAAW,EAAE,MAAM;gBACnB,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,2BAA2B;aAC3C;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,GAAG;gBACb,WAAW,EAAE,GAAG;gBAChB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,gCAAgC;aAChD;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,GAAG;gBAChB,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,WAAW;gBAClB,WAAW,EAAE,4BAA4B;aAC5C;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;CACJ,CAAC"}
+{"version":3,"file":"InputExample.js","sourceRoot":"","sources":["../../../src/components/Input/InputExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,GAAG,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKzE,MAAM,CAAC,MAAM,YAAY,GAAwC;IAC7D,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,KAAK,EAAE,sBAAsB;QAC7B,YAAY,EAAE,kBAAkB;QAChC,WAAW,EAAE,wCAAwC;QACrD,WAAW,EAAE,mCAAmC;KACnD;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO,EAAE;QACL;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,SAAS;gBACnB,WAAW,EAAE,MAAM;gBACnB,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,2BAA2B;aAC3C;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,GAAG;gBACb,WAAW,EAAE,GAAG;gBAChB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,gCAAgC;aAChD;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,GAAG;gBAChB,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,WAAW;gBAClB,WAAW,EAAE,4BAA4B;aAC5C;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;IACD,QAAQ,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAC;IAErD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,gCAA2B,EACtC,KAAC,KAAK,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAI,EACvE,KAAC,gBAAgB,kDAAmD,IAChE,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Input/input.css

@@ -2,6 +2,8 @@
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
   background-color: var(--surface-neutral-t1-base);
   border: solid 1px var(--border-color);
   height: var(--field-height);
@@ -10,7 +12,7 @@
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
-[data-bspk=input][data-show-clear-button] {
+[data-bspk=input][data-show-clear-button]:focus-within {
   padding-right: 0;
 }
 [data-bspk=input] > * {
@@ -42,6 +44,9 @@
 [data-bspk=input][data-invalid] {
   --border-color: var(--status-error);
 }
+[data-bspk=input]:not(:focus-within) [data-clear-button] {
+  display: none;
+}
 [data-bspk=input]:focus-within {
   --border-color: var(--stroke-neutral-focus);
   outline: 1px solid var(--stroke-neutral-focus);

package/dist/components/Input/input.css.js

@@ -5,6 +5,8 @@ style.appendChild(document.createTextNode(`[data-bspk=input] {
   --border-color: var(--stroke-neutral-base);
   display: flex;
   flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
   background-color: var(--surface-neutral-t1-base);
   border: solid 1px var(--border-color);
   height: var(--field-height);
@@ -13,7 +15,7 @@ style.appendChild(document.createTextNode(`[data-bspk=input] {
   gap: var(--spacing-sizing-01);
   width: 100%;
 }
-[data-bspk=input][data-show-clear-button] {
+[data-bspk=input][data-show-clear-button]:focus-within {
   padding-right: 0;
 }
 [data-bspk=input] > * {
@@ -45,6 +47,9 @@ style.appendChild(document.createTextNode(`[data-bspk=input] {
 [data-bspk=input][data-invalid] {
   --border-color: var(--status-error);
 }
+[data-bspk=input]:not(:focus-within) [data-clear-button] {
+  display: none;
+}
 [data-bspk=input]:focus-within {
   --border-color: var(--stroke-neutral-focus);
   outline: 1px solid var(--stroke-neutral-focus);

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

@@ -7,7 +7,7 @@ export type InputFieldProps = FormFieldControlProps<InputProps>;
  * This component takes properties from the FormField and Input components.
  *
  * @name InputField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/InputField/InputField.js

@@ -7,7 +7,7 @@ import { Input } from '../Input';
  * This component takes properties from the FormField and Input components.
  *
  * @name InputField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */