@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/TextField/TextField.js

@@ -0,0 +1,357 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../Icons");
+const typos_1 = require("../../typos");
+const css_1 = require("../../utilities/css");
+const i18n_1 = require("../../utilities/i18n");
+const unique_id_1 = require("../../utilities/unique-id");
+const use_event_listener_1 = require("../../utilities/use-event-listener");
+const use_is_after_initial_mount_1 = require("../../utilities/use-is-after-initial-mount");
+const Connected_1 = require("../Connected");
+const Icon_1 = require("../Icon");
+const Labelled_1 = require("../Labelled");
+const Text_1 = require("../Text");
+const components_1 = require("./components");
+const TextField_styles_1 = __importDefault(require("./TextField.styles"));
+function TextField({ prefix, suffix, verticalContent, placeholder, value = '', helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, multiline, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, step, largeStep, autoComplete, max, maxLength, maxHeight, min, minLength, pattern, inputMode, spellCheck, ariaOwns, ariaControls, ariaExpanded, ariaActiveDescendant, ariaAutocomplete, showCharacterCount, align, requiredIndicator, monospaced, selectTextOnFocus, suggestion, onClearButtonClick, onChange, onSpinnerChange, onFocus, onBlur, borderless, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const [height, setHeight] = (0, react_1.useState)(null);
+    const [focus, setFocus] = (0, react_1.useState)(Boolean(focused));
+    const isAfterInitial = (0, use_is_after_initial_mount_1.useIsAfterInitialMount)();
+    const id = (0, unique_id_1.useUniqueId)('TextField', idProp);
+    const inputRef = (0, react_1.useRef)(null);
+    const textAreaRef = (0, react_1.useRef)(null);
+    const prefixRef = (0, react_1.useRef)(null);
+    const suffixRef = (0, react_1.useRef)(null);
+    const verticalContentRef = (0, react_1.useRef)(null);
+    const buttonPressTimer = (0, react_1.useRef)();
+    const spinnerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = multiline ? textAreaRef.current : inputRef.current;
+        if (!input || focused === undefined)
+            return;
+        focused ? input.focus() : input.blur();
+    }, [focused, verticalContent, multiline]);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        const isSupportedInputType = type === 'text' ||
+            type === 'tel' ||
+            type === 'search' ||
+            type === 'url' ||
+            type === 'password';
+        if (!input || !isSupportedInputType || !suggestion) {
+            return;
+        }
+        input.setSelectionRange(value.length, suggestion.length);
+    }, [focus, value, type, suggestion]);
+    const normalizedValue = suggestion ? suggestion : value;
+    const normalizedStep = step != null ? step : 1;
+    const normalizedMax = max != null ? max : Infinity;
+    const normalizedMin = min != null ? min : -Infinity;
+    const className = (0, css_1.classNames)(TextField_styles_1.default.TextField, Boolean(normalizedValue) && TextField_styles_1.default.hasValue, disabled && TextField_styles_1.default.disabled, readOnly && TextField_styles_1.default.readOnly, error && TextField_styles_1.default.error, multiline && TextField_styles_1.default.multiline, focus && TextField_styles_1.default.focus, borderless && TextField_styles_1.default.borderless);
+    const inputType = type === 'currency' ? 'text' : type;
+    const isNumericType = type === 'number' || type === 'integer';
+    const prefixMarkup = prefix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.Prefix, id: `${id}-Prefix`, ref: prefixRef, children: prefix })) : null;
+    const suffixMarkup = suffix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.Suffix, id: `${id}-Suffix`, ref: suffixRef, children: suffix })) : null;
+    let characterCountMarkup = null;
+    if (showCharacterCount) {
+        const characterCount = normalizedValue.length;
+        const characterCountLabel = maxLength
+            ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {
+                count: characterCount,
+                limit: maxLength,
+            })
+            : i18n.translate('Polaris.TextField.characterCount', {
+                count: characterCount,
+            });
+        const characterCountClassName = (0, css_1.classNames)(TextField_styles_1.default.CharacterCount, multiline && TextField_styles_1.default.AlignFieldBottom);
+        const characterCountText = !maxLength ? characterCount : `${characterCount}/${maxLength}`;
+        characterCountMarkup = ((0, jsx_runtime_1.jsx)("div", { id: `${id}-CharacterCounter`, className: characterCountClassName, "aria-label": characterCountLabel, "aria-live": focus ? 'polite' : 'off', "aria-atomic": 'true', onClick: handleClickChild, children: characterCountText }));
+    }
+    const clearButtonVisible = normalizedValue !== '';
+    const clearButtonMarkup = clearButton && clearButtonVisible ? ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: TextField_styles_1.default.ClearButton, onClick: handleClearButtonPress, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: i18n.translate('Polaris.Common.clear') }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle, color: 'base' })] })) : null;
+    const handleNumberChange = (0, react_1.useCallback)((steps, stepAmount = normalizedStep) => {
+        if (onChange == null && onSpinnerChange == null) {
+            return;
+        }
+        // Returns the length of decimal places in a number
+        const dpl = (num) => (num.toString().split('.')[1] || []).length;
+        const numericValue = value ? parseFloat(value) : 0;
+        if (isNaN(numericValue)) {
+            return;
+        }
+        // Making sure the new value has the same length of decimal places as the
+        // step / value has.
+        const decimalPlaces = type === 'integer' ? 0 : Math.max(dpl(numericValue), dpl(stepAmount));
+        const newValue = Math.min(Number(normalizedMax), Math.max(numericValue + steps * stepAmount, Number(normalizedMin)));
+        if (onSpinnerChange != null) {
+            onSpinnerChange(String(newValue.toFixed(decimalPlaces)), id);
+        }
+        else if (onChange != null) {
+            onChange(String(newValue.toFixed(decimalPlaces)), id);
+        }
+    }, [id, normalizedMax, normalizedMin, onChange, onSpinnerChange, normalizedStep, type, value]);
+    const handleButtonRelease = (0, react_1.useCallback)(() => {
+        clearTimeout(buttonPressTimer.current);
+    }, []);
+    const handleButtonPress = (0, react_1.useCallback)((onChange) => {
+        const minInterval = 50;
+        const decrementBy = 10;
+        let interval = 200;
+        const onChangeInterval = () => {
+            if (interval > minInterval)
+                interval -= decrementBy;
+            onChange(0);
+            buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
+        };
+        buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
+        document.addEventListener('mouseup', handleButtonRelease, {
+            once: true,
+        });
+    }, [handleButtonRelease]);
+    const spinnerMarkup = isNumericType && step !== 0 && !disabled && !readOnly ? ((0, jsx_runtime_1.jsx)(components_1.Spinner, { onClick: handleClickChild, onChange: handleNumberChange, onMouseDown: handleButtonPress, onMouseUp: handleButtonRelease, ref: spinnerRef, onBlur: handleOnBlur })) : null;
+    const style = multiline && height ? { height, maxHeight } : null;
+    const handleExpandingResize = (0, react_1.useCallback)((height) => {
+        setHeight(height);
+    }, []);
+    const resizer = multiline && isAfterInitial ? ((0, jsx_runtime_1.jsx)(components_1.Resizer, { contents: normalizedValue || placeholder, currentHeight: height, minimumLines: typeof multiline === 'number' ? multiline : 1, onHeightChange: handleExpandingResize })) : null;
+    const describedBy = [];
+    if (error) {
+        describedBy.push(`${id}Error`);
+    }
+    if (helpText) {
+        describedBy.push((0, Labelled_1.helpTextID)(id));
+    }
+    if (showCharacterCount) {
+        describedBy.push(`${id}-CharacterCounter`);
+    }
+    const labelledBy = [];
+    if (prefix) {
+        labelledBy.push(`${id}-Prefix`);
+    }
+    if (suffix) {
+        labelledBy.push(`${id}-Suffix`);
+    }
+    if (verticalContent) {
+        labelledBy.push(`${id}-VerticalContent`);
+    }
+    labelledBy.unshift((0, Labelled_1.labelID)(id));
+    const inputClassName = (0, css_1.classNames)(TextField_styles_1.default.Input, 
+    //@ts-expect-error string
+    align && TextField_styles_1.default[(0, css_1.variationName)('Input-align', align)], suffix && TextField_styles_1.default['Input-suffixed'], clearButton && TextField_styles_1.default['Input-hasClearButton'], monospaced && TextField_styles_1.default.monospaced, suggestion && TextField_styles_1.default.suggestion);
+    const handleOnFocus = (event) => {
+        setFocus(true);
+        if (selectTextOnFocus && !suggestion) {
+            const input = multiline ? textAreaRef.current : inputRef.current;
+            input === null || input === void 0 ? void 0 : input.select();
+        }
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    (0, use_event_listener_1.useEventListener)('wheel', handleOnWheel, inputRef);
+    function handleOnWheel(event) {
+        if (document.activeElement === event.target && isNumericType) {
+            event.stopPropagation();
+        }
+    }
+    const input = (0, react_1.createElement)(multiline ? 'textarea' : 'input', {
+        name,
+        id,
+        disabled,
+        readOnly,
+        role,
+        autoFocus,
+        value: normalizedValue,
+        placeholder,
+        style,
+        autoComplete,
+        className: inputClassName,
+        ref: multiline ? textAreaRef : inputRef,
+        min,
+        max,
+        step,
+        minLength,
+        maxLength,
+        spellCheck,
+        pattern,
+        inputMode,
+        type: inputType,
+        rows: getRows(multiline),
+        'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,
+        'aria-labelledby': labelledBy.join(' '),
+        'aria-invalid': Boolean(error),
+        'aria-owns': ariaOwns,
+        'aria-activedescendant': ariaActiveDescendant,
+        'aria-autocomplete': ariaAutocomplete,
+        'aria-controls': ariaControls,
+        'aria-expanded': ariaExpanded,
+        'aria-required': requiredIndicator,
+        ...normalizeAriaMultiline(multiline),
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        onClick: handleClickChild,
+        onKeyPress: handleKeyPress,
+        onKeyDown: handleKeyDown,
+        onChange: !suggestion ? handleChange : undefined,
+        onInput: suggestion ? handleChange : undefined,
+    });
+    const inputWithVerticalContentMarkup = verticalContent ? ((0, jsx_runtime_1.jsxs)("div", { className: TextField_styles_1.default.VerticalContent, id: `${id}-VerticalContent`, ref: verticalContentRef, onClick: handleClickChild, children: [verticalContent, input] })) : null;
+    const inputMarkup = verticalContent ? inputWithVerticalContentMarkup : input;
+    const backdropMarkup = ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(TextField_styles_1.default.Backdrop, connectedLeft && TextField_styles_1.default['Backdrop-connectedLeft'], connectedRight && TextField_styles_1.default['Backdrop-connectedRight']) }));
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: handleClick, children: [prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer, (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
+          .input-prefix {
+            margin-left: 0.75rem;
+            margin-right: 0.5rem;
+          }
+          .input-prefix,
+          .input-suffix {
+            color: black;
+            flex: 0 0 auto;
+            position: relative;
+            -webkit-user-select: none;
+            user-select: none;
+            z-index: 10;
+          }
+
+          .input-field {
+            -webkit-appearance: none;
+            appearance: none;
+            background: none;
+            display: block;
+            flex: 1 1;
+            letter-spacing: normal;
+            margin: 0;
+            min-height: 2.25rem;
+            min-width: 0;
+            padding: calc((2.25rem - 1.5rem - 0.125rem/2) 0.75rem;
+            position: relative; 
+            text-transform: none;
+            width: 100%;
+            z-index: var(--pc-text-field-contents);
+        }
+        ` })] }) }) }));
+    function handleChange(event) {
+        onChange && onChange(event.currentTarget.value, id);
+    }
+    function handleClick(event) {
+        var _a, _b, _c;
+        const { target } = event;
+        // For TextFields used with Combobox, focus needs to be set again even
+        // if the TextField is already focused to trigger the logic to open the
+        // Combobox activator
+        const inputRefRole = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('role');
+        if (target === inputRef.current && inputRefRole === 'combobox') {
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            handleOnFocus(event);
+            return;
+        }
+        if (isPrefixOrSuffix(target) ||
+            isVerticalContent(target) ||
+            isInput(target) ||
+            isSpinner(target) ||
+            focus) {
+            return;
+        }
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    function handleClickChild(event) {
+        if (!isSpinner(event.target) && !isInput(event.target)) {
+            event.stopPropagation();
+        }
+        if (isPrefixOrSuffix(event.target) ||
+            isVerticalContent(event.target) ||
+            isInput(event.target) ||
+            focus) {
+            return;
+        }
+        setFocus(true);
+    }
+    function handleClearButtonPress() {
+        onClearButtonClick && onClearButtonClick(id);
+    }
+    function handleKeyPress(event) {
+        const { key, which } = event;
+        const numbersSpec = /[\d.,eE+-]$/;
+        const integerSpec = /[\deE+-]$/;
+        if (!isNumericType ||
+            which === typos_1.Key.Enter ||
+            (type === 'number' && numbersSpec.test(key)) ||
+            (type === 'integer' && integerSpec.test(key))) {
+            return;
+        }
+        event.preventDefault();
+    }
+    function handleKeyDown(event) {
+        if (!isNumericType) {
+            return;
+        }
+        const { key, which } = event;
+        if ((which === typos_1.Key.Home || key === 'Home') && min !== undefined) {
+            if (onSpinnerChange != null) {
+                onSpinnerChange(String(min), id);
+            }
+            else if (onChange != null) {
+                onChange(String(min), id);
+            }
+        }
+        if ((which === typos_1.Key.End || key === 'End') && max !== undefined) {
+            if (onSpinnerChange != null) {
+                onSpinnerChange(String(max), id);
+            }
+            else if (onChange != null) {
+                onChange(String(max), id);
+            }
+        }
+        if ((which === typos_1.Key.PageUp || key === 'PageUp') && largeStep !== undefined) {
+            handleNumberChange(1, largeStep);
+        }
+        if ((which === typos_1.Key.PageDown || key === 'PageDown') && largeStep !== undefined) {
+            handleNumberChange(-1, largeStep);
+        }
+    }
+    function handleOnBlur(event) {
+        setFocus(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    }
+    function isInput(target) {
+        return (target instanceof HTMLElement &&
+            inputRef.current &&
+            (inputRef.current.contains(target) || inputRef.current.contains(document.activeElement)));
+    }
+    function isPrefixOrSuffix(target) {
+        return (target instanceof Element &&
+            ((prefixRef.current && prefixRef.current.contains(target)) ||
+                (suffixRef.current && suffixRef.current.contains(target))));
+    }
+    function isSpinner(target) {
+        return target instanceof Element && spinnerRef.current && spinnerRef.current.contains(target);
+    }
+    function isVerticalContent(target) {
+        return (target instanceof Element &&
+            verticalContentRef.current &&
+            (verticalContentRef.current.contains(target) ||
+                verticalContentRef.current.contains(document.activeElement)));
+    }
+}
+exports.TextField = TextField;
+function getRows(multiline) {
+    if (!multiline)
+        return undefined;
+    return typeof multiline === 'number' ? multiline : 1;
+}
+function normalizeAriaMultiline(multiline) {
+    if (!multiline)
+        return undefined;
+    return Boolean(multiline) || (typeof multiline === 'number' && multiline > 0)
+        ? { 'aria-multiline': true }
+        : undefined;
+}

package/dist/src/components/TextField/TextField.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    TextField: 'ml-1 text-field-root relative items-center cursor-text text-gray-800 flex ',
+    ClearButton: 'clear-button dhidden block opacity-90',
+    multiline: 'p-2 flex-wrap ',
+    hasValue: 'color-green-500 has-value',
+    error: 'bg-red-100  border border-red-400',
+    disabled: 'cursor-not-allowed',
+    Input: ' py-1.5 w-full pl-2 focus:outline-none ',
+    // ' group relative mt-1 px-4 flex w-full  items-center rounded dborder-[0.5px] border-gray-400  focus-within:border-gray-400  focus-within:ring focus-within:ring-gray-200 input-field  focus-within:ring-opacity-50 group-hover:!border-red-700 dark:bg-gray-600 dark:text-white md:text-sm ',
+    Prefix: 'pl-0 input-prefix',
+    Suffix: 'input-suffix',
+    readOnly: '',
+    focus: '',
+    borderless: '',
+    monospaced: '',
+    suggestion: '',
+    'Backdrop-connectedLeft': '',
+    'Backdrop-connectedRight': '',
+    Backdrop: 'Backdrop-class top-0 right-0 left-0 border solid ',
+    'Input-hasClearButton': 'appearance-none',
+    'Input-suffixed': 'Input-suffixed pr-0',
+    'Input-alignRight': 'Input-alignRight text-right',
+    'Input-alignLeft': 'Input-alignLeft text-left',
+    'Input-alignCenter': 'Input-alignCenter text-center',
+    VerticalContent: 'relative max-h-[140px] w-full max-h-[328px] overflow-scroll p-2 z-50',
+    CharacterCount: 'color-red-800 z-40 text-right mt-3 ',
+    AlignFieldBottom: 'w-full justify-end',
+    v: 'v-class my-2 z-50',
+    Spinner: 'flex w-14 cursor-pointer hidden focus:block bg-yellow-500 text-yellow-400 z-50 ',
+    SpinnerIcon: 'h-5 w-5',
+    Resizer: 'absolute bottom-0 h-0 right-0 overflow-hidden',
+    DummyInput: 'p-2 white-space-wrap ',
+    Segment: 'bg-[yellow] flex flex-basis justify-center items-center focus:outline-none active:bg-[red] last:border-b ',
+};
+exports.default = styles;

package/dist/src/components/TextField/components/Resizer/Resizer.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// eslint-disable-next-line import/no-deprecated
+const use_isomorphic_layout_effect_1 = require("../../../../utilities/use-isomorphic-layout-effect");
+const EventListener_1 = require("../../../EventListener");
+const TextField_styles_1 = __importDefault(require("../../TextField.styles"));
+function Resizer({ contents, currentHeight: currentHeightProp = null, minimumLines, onHeightChange, }) {
+    const contentNode = (0, react_1.useRef)(null);
+    const minimumLinesNode = (0, react_1.useRef)(null);
+    const animationFrame = (0, react_1.useRef)();
+    const currentHeight = (0, react_1.useRef)(currentHeightProp);
+    if (currentHeightProp !== currentHeight.current) {
+        currentHeight.current = currentHeightProp;
+    }
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (animationFrame.current) {
+                cancelAnimationFrame(animationFrame.current);
+            }
+        };
+    }, []);
+    const minimumLinesMarkup = minimumLines ? ((0, jsx_runtime_1.jsx)("div", { ref: minimumLinesNode, className: TextField_styles_1.default.DummyInput, dangerouslySetInnerHTML: {
+            __html: getContentsForMinimumLines(minimumLines),
+        } })) : null;
+    const handleHeightCheck = (0, react_1.useCallback)(() => {
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
+        }
+        animationFrame.current = requestAnimationFrame(() => {
+            if (!contentNode.current || !minimumLinesNode.current) {
+                return;
+            }
+            const newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);
+            if (newHeight !== currentHeight.current) {
+                onHeightChange(newHeight);
+            }
+        });
+    }, [onHeightChange]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
+        handleHeightCheck();
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": true, className: TextField_styles_1.default.Resizer, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: handleHeightCheck }), (0, jsx_runtime_1.jsx)("div", { ref: contentNode, className: TextField_styles_1.default.DummyInput, dangerouslySetInnerHTML: { __html: getFinalContents(contents) } }), minimumLinesMarkup] }));
+}
+exports.Resizer = Resizer;
+const ENTITIES_TO_REPLACE = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '\n': '<br>',
+    '\r': '',
+};
+const REPLACE_REGEX = new RegExp(`[${Object.keys(ENTITIES_TO_REPLACE).join()}]`, 'g');
+function replaceEntity(entity) {
+    return ENTITIES_TO_REPLACE[entity];
+}
+function getContentsForMinimumLines(minimumLines) {
+    let content = '';
+    for (let line = 0; line < minimumLines; line++) {
+        content += '<br>';
+    }
+    return content;
+}
+function getFinalContents(contents) {
+    return contents ? `${contents.replace(REPLACE_REGEX, replaceEntity)}<br>` : '<br>';
+}

package/dist/src/components/TextField/components/Resizer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Resizer"), exports);

package/dist/src/components/TextField/components/Spinner/Spinner.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const Icons_1 = require("../../../Icons");
+const Icon_1 = require("../../../Icon");
+const TextField_styles_1 = __importDefault(require("../../TextField.styles"));
+exports.Spinner = react_1.default.forwardRef(function Spinner({ onChange, onClick, onMouseDown, onMouseUp, onBlur }, ref) {
+    function handleStep(step) {
+        return () => onChange(step);
+    }
+    function handleMouseDown(onChange) {
+        return (event) => {
+            if (event.button !== 0)
+                return;
+            onMouseDown(onChange);
+        };
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_styles_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_styles_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMinus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_styles_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaRight }) }) })] }));
+});

package/dist/src/components/TextField/components/Spinner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Spinner"), exports);

package/dist/src/components/TextField/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Resizer"), exports);
+__exportStar(require("./Spinner"), exports);

package/dist/src/components/TextField/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TextField"), exports);

package/dist/src/components/Thumbnail/Thumbnail.classnames.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ThumbnailClassnames = {
+    "Thumbnail": "Thumbnail-Thumbnail",
+    "sizeExtraSmall": "Thumbnail-sizeExtraSmall",
+    "sizeSmall": "Thumbnail-sizeSmall",
+    "sizeMedium": "Thumbnail-sizeMedium",
+    "sizeLarge": "Thumbnail-sizeLarge",
+    "transparent": "Thumbnail-transparent"
+};
+exports.default = ThumbnailClassnames;

package/dist/src/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const Icon_1 = require("../Icon");
+const Image_1 = require("../Image");
+const Thumbnail_styles_1 = __importDefault(require("./Thumbnail.styles"));
+function Thumbnail({ source, alt, size = 'medium', transparent }) {
+    const className = (0, css_1.classNames)(Thumbnail_styles_1.default.Thumbnail, size && Thumbnail_styles_1.default[size], transparent && Thumbnail_styles_1.default.transparent);
+    const content = typeof source === 'string' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { alt: alt, source: source })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { accessibilityLabel: alt, source: source }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${className} thumbnail-container`, children: content }), (0, jsx_runtime_1.jsx)("style", { children: `
+      .thumbnail-container > * {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+        color: #87909b;
+        svg {
+          fill: currentColor;
+        }
+      }
+      ` })] }));
+}
+exports.Thumbnail = Thumbnail;

package/dist/src/components/Thumbnail/Thumbnail.styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Thumbnail: 'relative block overflow-hidden w-max min-w-[40px] rounded-md border border-subdued pb-full',
+    extraSmall: 'h-[24px] w-[24px]',
+    small: 'h-[40px] w-[40px]',
+    medium: 'h-[60px] w-[60px]',
+    large: 'h-[80px] w-[80px]',
+    transparent: 'bg-transparent',
+};
+exports.default = styles;

package/dist/src/components/Thumbnail/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Thumbnail"), exports);

package/dist/src/components/Toast/Toast.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const react_1 = require("react");
+const frame_1 = require("../../utilities/frame");
+const unique_id_1 = require("../../utilities/unique-id");
+const use_deep_effect_1 = require("../../utilities/use-deep-effect");
+exports.Toast = (0, react_1.memo)(function Toast(props) {
+    const id = (0, unique_id_1.useUniqueId)('Toast');
+    const { showToast, hideToast } = (0, frame_1.useFrame)();
+    (0, use_deep_effect_1.useDeepEffect)(() => {
+        showToast({ id, ...props });
+        return () => {
+            hideToast({ id });
+        };
+    }, [props]);
+    return null;
+});