@bspk/ui 1.1.32 → 1.1.34

package/dist/TextInput.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 0 0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:flex;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:not(:focus-within),[data-bspk=text-input][data-empty],[data-bspk=text-input][data-readonly],[data-bspk=text-input][data-disabled]{padding-right:var(--field-padding)}[data-bspk=text-input]:not(:focus-within) button[data-clear],[data-bspk=text-input][data-empty] button[data-clear],[data-bspk=text-input][data-readonly] button[data-clear],[data-bspk=text-input][data-disabled] button[data-clear]{display:none}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}`);;
-import { SvgCancel } from '@bspk/icons/Cancel';
-import { useId } from './hooks/useId';
-export const DEFAULT = {
-    size: 'medium',
-    value: '',
-    type: 'text',
-    autoComplete: 'off',
-};
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextInput } from '@bspk/ui/TextInput';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name TextInput
- */
-function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, errorMessage, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !readOnly && !disabled && invalidProp;
-    return (_jsxs("div", { "data-bspk": "text-input", "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, ref: containerRef, ...otherProps, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
-                    onChange(event.target.value, event);
-                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: _jsx(SvgCancel, {}) })] }));
-}
-TextInput.bspkName = 'TextInput';
-export { TextInput };
-//# sourceMappingURL=TextInput.js.map

package/dist/TextInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AAqCX;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,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,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Textarea.d.ts

@@ -1,83 +0,0 @@
-import './textarea.scss';
-import { ChangeEvent } from 'react';
-import { CommonProps, InvalidPropsLibrary, SetRef } from './';
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> & InvalidPropsLibrary & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The text size of the field.
-     *
-     * @default medium
-     */
-    textSize?: 'large' | 'medium' | 'small';
-    /**
-     * The value of the field.
-     *
-     * @type multiline
-     */
-    value?: string;
-    /**
-     * The textarea control name of the field.
-     *
-     * @required
-     */
-    name: string;
-    /** The ref of the field. */
-    innerRef?: SetRef<HTMLTextAreaElement>;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /**
-     * The maximum number of characters that the field will accept.
-     *
-     * @minimum 1
-     */
-    maxLength?: number;
-    /**
-     * The minimum number of rows that the textarea will show.
-     *
-     * @default 3
-     * @minimum 3
-     * @maximum 10
-     */
-    minRows?: number;
-    /**
-     * The maximum number of rows that the textarea will show.
-     *
-     * @default 10
-     * @minimum 3
-     * @maximum 10
-     */
-    maxRows?: number;
-};
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name Textarea
- */
-declare function Textarea({ invalid: invalidProp, onChange, textSize, value, name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp, maxRows: maxRowsProp, errorMessage, ...otherProps }: TextareaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Textarea {
-    var bspkName: string;
-}
-export { Textarea };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Textarea.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=textarea]{/*! 
---min-rows: is set via inline style 
---max-rows: is set via inline style
-*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden;overflow-y:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2);max-width:100%}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);text-wrap:break-word;resize:none;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=textarea] textarea:read-only{background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}`);;
-import { useId } from './hooks/useId';
-const DEFAULT = {
-    minRows: 3,
-    maxRows: 10,
-    textSize: 'medium',
-};
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name Textarea
- */
-function Textarea({ invalid: invalidProp, onChange, textSize = DEFAULT.textSize, value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = DEFAULT.minRows, maxRows: maxRowsProp = DEFAULT.maxRows, errorMessage, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
-    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
-    return (_jsxs("div", { "data-bspk": "textarea", "data-size": textSize, style: {
-            '--min-rows': minRows,
-            '--max-rows': maxRows,
-        }, children: [_jsx("textarea", { ...otherProps, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
-                    const target = event.target;
-                    target.scrollTop = 0;
-                }, onChange: (event) => onChange(event.target.value, event), onInput: (event) => {
-                    const target = event.target;
-                    // we know the textarea was resized, so we don't want to auto-size it
-                    if (target.style.height)
-                        return;
-                    target.nextSibling.innerText = `${target.value}\n`;
-                }, placeholder: placeholder, ref: innerRef, value: value, wrap: "hard" }), _jsx("div", { "aria-hidden": true, "data-replicated-value": true })] }));
-}
-Textarea.bspkName = 'Textarea';
-export { Textarea };
-//# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,OAAO,GAAG;IACZ,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;CACZ,CAAC;AAyDX;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAC3B,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,YAAY,EACZ,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,OAAO,CACH,4BACc,UAAU,eACT,QAAQ,EACnB,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,uBACK,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,GACb,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/TextareaField.d.ts

@@ -1,35 +0,0 @@
-import { FormFieldProps } from './FormField';
-import { TextareaProps } from './Textarea';
-export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label'> & TextareaProps;
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component takes properties from the FormField and Textarea components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextareaField
- */
-declare function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, ...textareaProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace TextareaField {
-    var bspkName: string;
-}
-export { TextareaField };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TextareaField.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from './FormField';
-import { Textarea } from './Textarea';
-import { Txt } from './Txt';
-import { tryIntParse } from './utils/tryIntPsrse';
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component takes properties from the FormField and Textarea components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextareaField
- */
-function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, ...textareaProps }) {
-    const maxLength = tryIntParse(maxLengthProp) || -1;
-    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
-    if (typeof onChange !== 'function')
-        return null;
-    return (_jsx(FormField, { controlId: id, "data-bspk": "textarea-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: _jsx(Txt, { style: {
-                color: 'var(--foreground-neutral-on-surface-variant-02)',
-            }, variant: "body-small", children: `${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}` }), required: required, children: (fieldProps) => (_jsx(Textarea, { ...textareaProps, ...fieldProps, "aria-label": textareaProps['aria-label'] || label, id: id, invalid: invalid, onChange: (next, event) => {
-                onChange(next, event);
-            }, required: required })) }));
-}
-TextareaField.bspkName = 'TextareaField';
-export { TextareaField };
-//# sourceMappingURL=TextareaField.js.map

package/dist/TextareaField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../src/TextareaField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,aAAa,EACC;IACjB,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE/E,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EACT,KAAC,GAAG,IACA,KAAK,EAAE;gBACH,KAAK,EAAE,iDAAiD;aAC3D,EACD,OAAO,EAAC,YAAY,YAEnB,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAC5E,EAEV,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OACD,aAAa,KACb,UAAU,gBACF,aAAa,CAAC,YAAY,CAAC,IAAI,KAAK,EAChD,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACtB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,QAAQ,EAAE,QAAQ,GACpB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/ToggleOption.d.ts

@@ -1,30 +0,0 @@
-import './toggle-option.scss';
-import { ReactElement } from 'react';
-export type ToggleOptionProps = {
-    /**
-     * The label of the option. Also used as the aria-label of the checkbox.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The description of the option.
-     *
-     * @type multiline
-     * @type multiline
-     */
-    description?: string;
-    /** The control element to use. */
-    children?: ReactElement;
-};
-/**
- * A utility component that wraps a checkbox, radio, and switch.
- *
- * @name ToggleOption
- */
-declare function ToggleOption({ label, description, children }: ToggleOptionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ToggleOption {
-    var bspkName: string;
-}
-export { ToggleOption };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/ToggleOption.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=toggle-option]{display:flex;width:100%;box-sizing:border-box;flex-direction:row;padding:0 var(--spacing-sizing-01) 0 0;gap:var(--spacing-sizing-02);user-select:none;background:unset;border:unset;cursor:pointer;min-height:var(--spacing-sizing-08);align-items:center}[data-bspk=toggle-option]:has([data-description]){align-items:unset}@media(any-pointer: coarse){[data-bspk=toggle-option]{min-height:var(--spacing-sizing-12)}}[data-bspk=toggle-option] [data-content]{display:flex;flex-direction:column;padding:2px 0}[data-bspk=toggle-option] [data-label]{color:var(--foreground-neutral-on-surface);font:var(--labels-base)}[data-bspk=toggle-option] [data-description]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=focus] [data-bspk=toggle-option]:not(:has(:disabled)),[data-bspk=toggle-option]:not(:has(:disabled)):focus-visible,[data-bspk=toggle-option]:not(:has(:disabled)):has(*:focus-visible){outline:var(--stroke-neutral-focus) 2px solid}[data-bspk=toggle-option]:has(:disabled) [data-label]{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=toggle-option]:has(:disabled) [data-description]{color:var(--foreground-neutral-disabled-on-surface)}`);;
-/**
- * A utility component that wraps a checkbox, radio, and switch.
- *
- * @name ToggleOption
- */
-function ToggleOption({ label, description, children }) {
-    return (_jsxs("label", { "data-bspk": "toggle-option", children: [_jsx("span", { "data-control": true, children: children }), _jsxs("span", { "data-content": true, children: [_jsx("span", { "data-label": true, children: label }), description && _jsx("span", { "data-description": true, children: description })] })] }));
-}
-ToggleOption.bspkName = 'ToggleOption';
-export { ToggleOption };
-//# sourceMappingURL=ToggleOption.js.map

package/dist/ToggleOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../src/ToggleOption.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAqB9B;;;;GAIG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAqB;IACrE,OAAO,CACH,8BAAiB,eAAe,aAC5B,+CAAoB,QAAQ,GAAQ,EACpC,iDACI,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACxD,IACH,CACX,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/Tooltip.d.ts

@@ -1,51 +0,0 @@
-import './tooltip.scss';
-import { ReactElement } from 'react';
-import { Placement } from './hooks/useFloating';
-export type TooltipProps = {
-    /**
-     * The placement of the tooltip.
-     *
-     * @default top
-     */
-    placement?: Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
-    /** The tooltip content. */
-    label: string;
-    /**
-     * A single element that will trigger the tooltip when hovered over.
-     *
-     * @type ReactElement
-     * @required
-     */
-    children: ReactElement;
-    /** Determines if the tooltip is disabled. */
-    disabled?: boolean;
-    /**
-     * Determines if the tooltip should hide the tail.
-     *
-     * @default true
-     */
-    showTail?: boolean;
-};
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { Tooltip } from '@bspk/ui/Tooltip';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
- *             </Tooltip>
- *         );
- *     }
- *
- * @name Tooltip
- */
-declare function Tooltip({ placement, label, children, disabled, showTail, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Tooltip {
-    var bspkName: string;
-}
-export { Tooltip };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Tooltip.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=tooltip]{position:fixed;pointer-events:none;z-index:var(--z-index-tooltip-popover);--arrow-size: var(--spacing-sizing-01);--arrow-offset: calc(var(--arrow-size) * -2);--arrow-color: var(--surface-neutral-inverse)}[data-bspk=tooltip] [data-text]{display:block;z-index:2;position:relative;background-color:var(--surface-neutral-inverse);border-radius:var(--radius-small);color:var(--foreground-neutral-on-inverse-surface);box-shadow:var(--drop-shadow-float);font:var(--labels-small);padding:var(--spacing-sizing-01) var(--spacing-sizing-02);border:none;transition:opacity .2s ease-in-out;width:max-content}[data-bspk=tooltip] [data-arrow]{display:block;z-index:1;position:absolute;width:0;height:0;border-style:solid;border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);border-color:rgba(0,0,0,0)}[data-bspk=tooltip][data-placement=bottom] [data-arrow]{top:var(--arrow-offset);border-bottom-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=top] [data-arrow]{border-top-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=right] [data-arrow]{margin-left:var(--arrow-offset);border-right-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=left] [data-arrow]{right:var(--arrow-offset);border-left-color:var(--arrow-color)}`);;
-import { cloneElement, useId, useMemo, useRef, useState } from 'react';
-import { Portal } from './Portal';
-import { useFloating } from './hooks/useFloating';
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-};
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { Tooltip } from '@bspk/ui/Tooltip';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
- *             </Tooltip>
- *         );
- *     }
- *
- * @name Tooltip
- */
-function Tooltip({ placement = DEFAULT.placement, label, children, disabled = DEFAULT.disabled, showTail = DEFAULT.showTail, }) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-    const child = useMemo(() => !disabled &&
-        children &&
-        cloneElement(children, {
-            onMouseOver: () => setShow(true),
-            onMouseLeave: () => setShow(false),
-            'aria-describedby': id,
-        }), [children, disabled, id]);
-    const arrowRef = useRef(null);
-    const { floatingStyles, middlewareData, elements } = useFloating({
-        placement,
-        strategy: 'fixed',
-        offsetOptions: showTail ? 8 : 4,
-        arrowRef,
-        hide: !show,
-    });
-    return disabled ? (children) : (_jsxs(_Fragment, { children: [child, label && (_jsx(Portal, { children: _jsxs("div", { "data-bspk": "tooltip", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
-                        elements.setFloating(node);
-                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
-                    }, role: "tooltip", style: floatingStyles, children: [_jsx("span", { "data-text": true, children: label }), _jsx("span", { "aria-hidden": true, "data-arrow": true, ref: (node) => {
-                                arrowRef.current = node;
-                            }, style: {
-                                zIndex: 1000,
-                                opacity: showTail ? 1 : 0,
-                                left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
-                                top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
-                            } })] }) }))] }));
-}
-Tooltip.bspkName = 'Tooltip';
-export { Tooltip };
-//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAgB,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,OAAO,GAAG;IACZ,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;CACT,CAAC;AA4BX;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,OAAO,CAAC,EACb,SAAS,GAAG,OAAO,CAAC,SAAS,EAC7B,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAC3B,QAAQ,GAAG,OAAO,CAAC,QAAQ,GAChB;IACX,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CACD,CAAC,QAAQ;QACT,QAAQ;QACR,YAAY,CAAC,QAAQ,EAAE;YACnB,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;YAChC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC;YAClC,kBAAkB,EAAE,EAAE;SACzB,CAAC,EACN,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,KAAK,EACL,KAAK,IAAI,CACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAc,sBAAsB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC3F,CAAC,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,aAErB,4CAAiB,KAAK,GAAQ,EAC9B,wDAGI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,MAAM,EAAE,IAAI;gCACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACzB,IAAI,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;gCAC3E,GAAG,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;6BAC7E,GACH,IACA,GACD,CACZ,IACF,CACN,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/TopNavigation.d.ts

@@ -1,16 +0,0 @@
-import './top-navigation.scss';
-export type TopNavigationProps = {
-    /** The content of the top navigation. */
-    children: string;
-};
-/**
- * Component description coming soon.
- *
- * @name TopNavigation
- */
-declare function TopNavigation({ children }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TopNavigation {
-    var bspkName: string;
-}
-export { TopNavigation };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TopNavigation.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=top-navigation]{display:flex}`);;
-/**
- * Component description coming soon.
- *
- * @name TopNavigation
- */
-function TopNavigation({ children }) {
-    return _jsx("div", { "data-bspk": "top-navigation", children: children });
-}
-TopNavigation.bspkName = 'TopNavigation';
-export { TopNavigation };
-//# sourceMappingURL=TopNavigation.js.map

package/dist/TopNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TopNavigation.js","sourceRoot":"","sources":["../src/TopNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAO/B;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsB;IACnD,OAAO,2BAAe,gBAAgB,YAAE,QAAQ,GAAO,CAAC;AAC5D,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/Txt.d.ts

@@ -1,45 +0,0 @@
-import { ElementType } from 'react';
-import { TxtVariant } from './utils/txtVariants';
-import { ElementProps } from './';
-export type TxtProps<As extends ElementType = 'span'> = {
-    /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content to render.
-     *
-     * @type string
-     * @required
-     */
-    children: unknown;
-    /**
-     * The variant to use.
-     *
-     * @default body-base
-     */
-    variant?: TxtVariant;
-    /** The id of the element. */
-    id?: string;
-};
-/**
- * A text component that applies the correct font styles based on the variant and size. variant
- *
- * @example
- *     import { Txt } from '@bspk/ui/Txt';
- *
- *     export function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
- *
- * @name Txt
- */
-declare function Txt<As extends ElementType = 'span'>({ children, as, variant, style: styleProp, ...containerProps }: ElementProps<TxtProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Txt {
-    var bspkName: string;
-}
-export { Txt };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Txt.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A text component that applies the correct font styles based on the variant and size. variant
- *
- * @example
- *     import { Txt } from '@bspk/ui/Txt';
- *
- *     export function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
- *
- * @name Txt
- */
-function Txt({ children, as, variant = 'body-base', style: styleProp, ...containerProps }) {
-    const content = children?.toString();
-    if (!content)
-        return null;
-    const As = as || 'span';
-    return (_jsx(As, { ...containerProps, "data-bspk": "txt", style: { ...styleProp, font: `var(--${variant})` }, children: content }));
-}
-Txt.bspkName = 'Txt';
-export { Txt };
-//# sourceMappingURL=Txt.js.map

package/dist/Txt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Txt.js","sourceRoot":"","sources":["../src/Txt.tsx"],"names":[],"mappings":";AA+BA;;;;;;;;;;;GAWG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,GAAG,cAAc,EACY;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,KAAC,EAAE,OAAK,cAAc,eAAY,KAAK,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,IAAI,EAAE,SAAS,OAAO,GAAG,EAAE,YACrF,OAAO,GACP,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/avatar-group.css

@@ -1 +0,0 @@
-[data-bspk=avatar-group]{width:100%}[data-bspk=avatar-group] [data-wrap]{width:100%;display:flex;flex-direction:row;align-items:end;justify-content:end;gap:var(--spacing-sizing-02);overflow:hidden}

package/dist/avatar.css

@@ -1 +0,0 @@
-[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:999px;background-color:var(--background);color:var(--foreground);font:var(--font)}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-09)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-17)}

package/dist/badge.css

@@ -1 +0,0 @@
-[data-bspk=badge]{--size: var(--spacing-sizing-06);--padding-x: var(--spacing-sizing-02);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);width:fit-content;padding:0 var(--padding-x);min-width:var(--size);font:var(--labels-x-small);color:var(--foreground-brand-on-primary);background:var(--surface-brand-primary)}[data-bspk=badge][data-size=x-small]{--size: var(--spacing-sizing-05);--padding-x: var(--spacing-sizing-01)}[data-bspk=badge][data-variant=secondary]{color:var(--foreground-brand-on-secondary);background:var(--surface-brand-secondary)}[data-bspk=badge][data-surface-border]{padding:0 calc(var(--padding-x) - 2px);border:2px solid var(--surface-neutral-t1-base)}[data-bspk=badge-wrapper]{display:inline-flex;align-items:center;justify-content:center;position:relative;width:fit-content;height:fit-content;flex-shrink:0}[data-bspk=badge-wrapper] [data-bspk=badge]{position:absolute;top:0;right:0;transform:scale(1) translate(50%, -50%);transform-origin:100% 0%;z-index:2}

package/dist/banner-alert.css

@@ -1 +0,0 @@
-[data-bspk=banner-alert]{--color: var(--status-information);--on-color: var(--status-on-information);display:flex;flex-direction:row;border:2px solid var(--color);border-radius:var(--radius-medium);box-sizing:border-box;background-color:var(--surface-neutral-t1-base);width:100%}[data-bspk=banner-alert][data-variant=error]{--color: var(--status-error);--on-color: var(--status-on-error)}[data-bspk=banner-alert][data-variant=success]{--color: var(--status-success);--on-color: var(--status-on-success)}[data-bspk=banner-alert][data-variant=warning]{--color: var(--status-warning);--on-color: var(--status-on-warning)}[data-bspk=banner-alert][data-elevated]{box-shadow:var(--drop-shadow-raise)}[data-bspk=banner-alert] [data-icon-bar]{flex:1;padding:var(--spacing-sizing-04) var(--spacing-sizing-03);background:var(--color);color:var(--on-color)}[data-bspk=banner-alert] [data-icon-bar] svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=banner-alert] [data-content]{flex:100%;display:flex;flex-direction:column;padding:var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=banner-alert] [data-content] header{display:flex;flex-direction:row;gap:var(--spacing-sizing-03);height:var(--spacing-sizing-12);align-items:center}[data-bspk=banner-alert] [data-content] header span{flex:1;display:flex;align-items:center;color:var(--foreground-neutral-on-surface);font:var(--heading-h6)}@media(any-pointer: coarse){[data-bspk=banner-alert] [data-content] header span{font:var(--heading-h6)}}[data-bspk=banner-alert] [data-content] header button{background:none;border:none;cursor:pointer;padding:0;margin:0 0 0 auto;color:var(--foreground-neutral-on-surface-variant-01);height:var(--spacing-sizing-08);width:var(--spacing-sizing-08)}@media(any-pointer: coarse){[data-bspk=banner-alert] [data-content] header button{height:var(--spacing-sizing-12);width:var(--spacing-sizing-12)}}[data-bspk=banner-alert] [data-content] header button svg{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=banner-alert] [data-content] [data-body]{display:flex;flex-direction:column;gap:var(--spacing-sizing-02);padding:0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0}[data-bspk=banner-alert] [data-content] [data-body] span{font:var(--body-base)}[data-bspk=banner-alert] [data-content] [data-body] button{margin-left:auto;background:none;border:none;cursor:pointer;padding:0 var(--spacing-sizing-03);height:var(--spacing-sizing-12);font:var(--labels-small)}

package/dist/button.css

@@ -1 +0,0 @@
-[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;font-family:var(--typeface);position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}

package/dist/card.css

@@ -1 +0,0 @@
-[data-bspk=card]{display:block;background:var(--surface-neutral-t1-base);padding:var(--spacing-sizing-03);border-radius:var(--radius-medium);overflow:hidden}[data-bspk=card][data-hide-padding]{padding:0}[data-bspk=card][data-variant=outlined]{border:solid 1px var(--stroke-neutral-low)}[data-bspk=card][data-variant=elevated]{box-shadow:0 1px 2px 0 var(--shadow-32),0 1px 3px 1px var(--shadow-15)}

package/dist/checkbox.css

@@ -1 +0,0 @@
-[data-bspk=checkbox]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=checkbox] input[type=checkbox]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=checkbox] span{--stroke: var(--stroke-neutral-base);--inner: none;--background: none;--color: var(--foreground-brand-on-primary);box-sizing:border-box;display:flex;width:20px;aspect-ratio:1/1;cursor:pointer;border-radius:2px;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;position:relative;background:var(--background);color:var(--color)}[data-bspk=checkbox] span svg[data-checked]{width:14px;display:none}[data-bspk=checkbox] span svg[data-indeterminate]{width:12px;display:none}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):hover+span{background-color:var(--interactions-neutral-hover-opacity)}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,:disabled):active+span{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=checkbox] input[type=checkbox]:checked+span svg[data-checked],[data-bspk=checkbox] input[type=checkbox]:indeterminate+span svg[data-indeterminate]{display:block}[data-bspk=checkbox] input[type=checkbox]:checked+span,[data-bspk=checkbox] input[type=checkbox]:indeterminate+span{--stroke: var(--stroke-brand-primary);--background: var(--surface-brand-primary)}[data-bspk=checkbox] input[type=checkbox]:disabled{pointer-events:none}[data-bspk=checkbox] input[type=checkbox]:disabled+span{--stroke: var(--stroke-neutral-interactions-disabled-light)}[data-bspk=checkbox] input[type=checkbox]:disabled:is(:checked,:indeterminate)+span{--stroke: transparent;--background: var(--interactions-disabled-opacity);--color: var(--foreground-neutral-disabled-on-surface)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):checked+span,[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled):indeterminate+span{--background: var(--status-error)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not(:disabled)+span{--stroke: var(--status-error)}

package/dist/chip.css

@@ -1 +0,0 @@
-[data-bspk=chip]{display:flex;flex-direction:column;justify-content:center;width:fit-content;height:var(--spacing-sizing-06);padding:0 var(--spacing-sizing-02);font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01);background-color:var(--surface-neutral-t1-base);border:1px solid var(--stroke-neutral-low);border-radius:var(--radius-small)}[data-bspk=chip]:not([data-flat]){box-shadow:var(--drop-shadow-raise)}[data-bspk=chip][data-variant=filter]{cursor:pointer}[data-bspk=chip][data-wrap]{height:auto}[data-bspk=chip][data-disabled]{color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed;border-color:var(--stroke-neutral-disabled-light);background-image:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):hover{background-image:linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):active{background-image:linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=chip]:not([data-disabled]):focus{outline:1px solid var(--stroke-neutral-focus);border-color:var(--stroke-neutral-focus)}[data-bspk=chip][data-selected]{background-color:var(--surface-brand-primary-highlight);border-color:var(--stroke-brand-primary)}