@dxos/react-ui 0.1.1 → 0.1.3

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

@@ -0,0 +1,310 @@
+import { CodeInput } from 'rci';
+import React, { ComponentProps } from 'react';
+import { InputProps } from './InputProps';
+export declare type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange'> & Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'>;
+export declare const BarePinInput: React.ForwardRefExoticComponent<Omit<InputProps, "label" | "ref" | "onChange"> & Pick<{
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    slot?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+    pattern?: string | undefined;
+    ref?: React.RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void) | null | undefined;
+    key?: React.Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "copy" | "link" | "none" | "execute" | "move" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "assertive" | "off" | "polite" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+    list?: string | undefined;
+    step?: string | number | undefined;
+    value?: string | number | readonly string[] | undefined;
+    size?: number | undefined;
+    accept?: string | undefined;
+    alt?: string | undefined;
+    autoComplete?: string | undefined;
+    autoFocus?: boolean | undefined;
+    capture?: boolean | "user" | "environment" | undefined;
+    checked?: boolean | undefined;
+    crossOrigin?: string | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    height?: string | number | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
+    minLength?: number | undefined;
+    multiple?: boolean | undefined;
+    name?: string | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    src?: string | undefined;
+    type?: React.HTMLInputTypeAttribute | undefined;
+    width?: string | number | undefined;
+} & {
+    inputRef: React.RefObject<HTMLInputElement>;
+    renderSegment: (segmentProps: import("rci").SegmentProps) => React.ReactNode;
+    length?: number | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    padding?: string | undefined;
+    paddingY?: string | undefined;
+    paddingX?: string | undefined;
+    spacing?: string | undefined;
+    characterWidth?: string | undefined;
+    segmentWidth?: string | undefined;
+    inputWidth?: string | undefined;
+    inputClassName?: string | undefined;
+    inputStyle?: React.CSSProperties | undefined;
+}, "onChange" | "length" | "value"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=BarePinInput.d.ts.map

package/dist/src/components/Input/BarePinInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarePinInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/BarePinInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAsB,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,oBAAY,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,OAAO,GAAG,UAAU,CAAC,GAC5E,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAG1E,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAuCxB,CAAC"}

package/dist/src/components/Input/BarePinInput.js

@@ -0,0 +1,62 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarePinInput = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const rci_1 = require("rci");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const input_1 = require("../../styles/input");
+const bareInputStyleProps = {
+    padding: '8px',
+    spacing: '8px',
+    fontFamily: ''
+};
+// TODO(thure): supplying a `value` prop to CodeInput does not yield correct controlled input interactivity; this may be an issue with RCI (filed as https://github.com/leonardodino/rci/issues/25).
+exports.BarePinInput = (0, react_1.forwardRef)(({ initialValue, size, validationMessage, validationValence, value, ...inputProps }, ref) => {
+    const width = (0, rci_1.getSegmentCssWidth)('13px');
+    const inputRef = (0, hooks_1.useForwardedRef)(ref);
+    const inputFocused = (0, hooks_1.useIsFocused)(inputRef);
+    const renderSegment = (0, react_1.useCallback)(({ state, index }) => (react_1.default.createElement("div", { key: index, className: (0, input_1.staticInput)({
+            focused: inputFocused && !!state,
+            disabled: inputProps.disabled,
+            ...(validationMessage && { validationValence })
+        }), "data-state": state, style: { width, height: '100%' } })), [inputFocused, validationValence, validationMessage, inputProps.disabled]);
+    return (react_1.default.createElement(rci_1.CodeInput, { ...{
+            spellCheck: false,
+            ...inputProps,
+            ...bareInputStyleProps,
+            inputRef,
+            className: (0, classnames_1.default)('font-mono selection:bg-transparent', inputProps.disabled && 'cursor-not-allowed', inputProps.className),
+            renderSegment
+        } }));
+});
+//# sourceMappingURL=BarePinInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarePinInput.js","sourceRoot":"","sources":["../../../../src/components/Input/BarePinInput.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,4DAA4B;AAC5B,6BAAoD;AACpD,+CAAuE;AAEvE,uCAA4D;AAC5D,8CAAiD;AAGjD,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,EAAE;CACf,CAAC;AAKF,oMAAoM;AACvL,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,IAAA,wBAAkB,EAAC,MAAM,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAA,uBAAe,EAAC,GAAG,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,IAAA,oBAAY,EAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACpB,uCACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,IAAA,mBAAW,EAAC;YACrB,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC,KAAK;YAChC,QAAQ,EAAE,UAAU,CAAC,QAAQ;YAC7B,GAAG,CAAC,iBAAiB,IAAI,EAAE,iBAAiB,EAAE,CAAC;SAChD,CAAC,gBACU,KAAK,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAChC,CACH,EACD,CAAC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,CAAC,QAAQ,CAAC,CAC1E,CAAC;IAEF,OAAO,CACL,8BAAC,eAAS,OACJ;YACF,UAAU,EAAE,KAAK;YACjB,GAAG,UAAU;YACb,GAAG,mBAAmB;YACtB,QAAQ;YACR,SAAS,EAAE,IAAA,oBAAE,EACX,oCAAoC,EACpC,UAAU,CAAC,QAAQ,IAAI,oBAAoB,EAC3C,UAAU,CAAC,SAAS,CACrB;YACD,aAAa;SACd,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { InputProps } from './InputProps';
+export declare type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange'> & Pick<ComponentProps<'input'>, 'onChange'>;
+export declare const BareTextInput: ({ validationValence, validationMessage, size, ...inputProps }: BareTextInputProps) => JSX.Element;
+//# sourceMappingURL=BareTextInput.d.ts.map

package/dist/src/components/Input/BareTextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BareTextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/BareTextInput.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAa,MAAM,cAAc,CAAC;AAQrD,oBAAY,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GACtF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5C,eAAO,MAAM,aAAa,kEAAmE,kBAAkB,gBAW9G,CAAC"}

package/dist/src/components/Input/BareTextInput.js

@@ -0,0 +1,22 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BareTextInput = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const input_1 = require("../../styles/input");
+const sizeMap = {
+    md: 'text-sm',
+    lg: 'text-base',
+    pin: ''
+};
+const BareTextInput = ({ validationValence, validationMessage, size, ...inputProps }) => {
+    return (react_1.default.createElement("input", { ...inputProps, className: (0, classnames_1.default)((0, input_1.defaultInput)({ disabled: inputProps.disabled, ...(validationMessage && { validationValence }) }), 'block w-full px-2.5 py-2', sizeMap[size !== null && size !== void 0 ? size : 'md']) }));
+};
+exports.BareTextInput = BareTextInput;
+//# sourceMappingURL=BareTextInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BareTextInput.js","sourceRoot":"","sources":["../../../../src/components/Input/BareTextInput.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAC5B,kDAA8C;AAE9C,8CAAkD;AAGlD,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,WAAW;IACf,GAAG,EAAE,EAAE;CACR,CAAC;AAKK,MAAM,aAAa,GAAG,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAsB,EAAE,EAAE;IACjH,OAAO,CACL,4CACM,UAAU,EACd,SAAS,EAAE,IAAA,oBAAE,EACX,IAAA,oBAAY,EAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAAE,GAAG,CAAC,iBAAiB,IAAI,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC,EAChG,0BAA0B,EAC1B,OAAO,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI,CAAC,CACtB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,aAAa,iBAWxB"}

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

@@ -1,17 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
-import { MessageValence } from '../../props';
-export declare type InputSize = 'md' | 'lg';
-export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size'> {
-    label: ReactNode;
-    labelVisuallyHidden?: boolean;
-    description?: ReactNode;
-    descriptionVisuallyHidden?: boolean;
-    initialValue?: string;
-    onChange?: (value: string) => void;
-    disabled?: boolean;
-    size?: InputSize;
-    validationMessage?: ReactNode;
-    validationValence?: MessageValence;
-}
-export declare const Input: ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, validationMessage, validationValence, ...inputProps }: InputProps) => JSX.Element;
+import { InputProps as NaturalInputProps } from './InputProps';
+export declare type InputProps = NaturalInputProps;
+export declare const Input: ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, length, validationMessage, validationValence, ...inputProps }: InputProps) => JSX.Element;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAe,cAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAG5G,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAW7C,oBAAY,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IAC9F,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,cAAc,CAAC;CACpC;AAOD,eAAO,MAAM,KAAK,0MAef,UAAU,gBA6EZ,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE/D,oBAAY,UAAU,GAAG,iBAAiB,CAAC;AAE3C,eAAO,MAAM,KAAK,kNAgBf,UAAU,gBA+EZ,CAAC"}

package/dist/src/components/Input/Input.js

@@ -34,14 +34,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const styles_1 = require("../../styles");
-const sizeMap = new Map([
-    ['md', ''],
-    ['lg', 'text-base']
-]);
-const Input = ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, validationMessage, validationValence, ...inputProps }) => {
+const BarePinInput_1 = require("./BarePinInput");
+const BareTextInput_1 = require("./BareTextInput");
+const Input = ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, length = 6, validationMessage, validationValence, ...inputProps }) => {
     const inputId = inputProps.id || (0, hooks_1.useId)('input');
     const descriptionId = (0, hooks_1.useId)('input-description');
     const validationId = (0, hooks_1.useId)('input-validation');
+    const isInvalid = !!validationMessage && validationValence === 'error';
     const [_isPending, startTransition] = (0, react_1.useTransition)();
     const [internalValue, setInternalValue] = (0, react_1.useState)((initialValue === null || initialValue === void 0 ? void 0 : initialValue.toString()) || '');
     const onInternalChange = (0, react_1.useCallback)((e) => {
@@ -53,13 +52,26 @@ const Input = ({ label, labelVisuallyHidden, placeholder, description, descripti
                 onChange(nextValue);
             });
     }, [onChange]);
-    const isInvalid = !!validationMessage && validationValence === 'error';
+    const bareInputBaseProps = {
+        ...inputProps,
+        id: inputId,
+        ...(required && { required: true }),
+        ...(disabled && { disabled: true }),
+        ...(description && { 'aria-describedby': descriptionId }),
+        ...(isInvalid && {
+            'aria-invalid': 'true',
+            'aria-errormessage': validationId
+        }),
+        ...(placeholder && { placeholder }),
+        value: internalValue,
+        onChange: onInternalChange,
+        validationMessage,
+        validationValence
+    };
+    const bareInput = size === 'pin' ? (react_1.default.createElement(BarePinInput_1.BarePinInput, { ...bareInputBaseProps, length: length })) : (react_1.default.createElement(BareTextInput_1.BareTextInput, { ...bareInputBaseProps, size: size }));
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('my-4', className), role: 'none' },
         react_1.default.createElement("label", { htmlFor: inputId, className: (0, classnames_1.default)('block mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100', labelVisuallyHidden && 'sr-only') }, label),
-        react_1.default.createElement("input", { id: inputId, ...inputProps, className: (0, classnames_1.default)(styles_1.defaultFocus, styles_1.defaultPlaceholder, (0, styles_1.defaultHover)({ disabled }), sizeMap.get(size !== null && size !== void 0 ? size : 'md'), 'bg-white/50 border text-neutral-900 text-sm rounded-lg block w-full px-2.5 py-2 dark:bg-neutral-700/50 dark:text-white', (0, styles_1.valenceInputBorder)(validationMessage ? validationValence : undefined), disabled && styles_1.defaultDisabled), ...(required && { required: true }), ...(disabled && { disabled: true }), ...(placeholder && { placeholder }), ...(description && { 'aria-describedby': descriptionId }), ...(isInvalid && {
-                'aria-invalid': 'true',
-                'aria-errormessage': validationId
-            }), value: internalValue, onChange: onInternalChange }),
+        bareInput,
         (description || validationMessage) && (react_1.default.createElement("p", { ...(!isInvalid && { id: descriptionId }), className: (0, classnames_1.default)(descriptionVisuallyHidden && !isInvalid && 'sr-only') },
             validationMessage && (react_1.default.createElement("span", { id: validationId, className: (0, styles_1.valenceColorText)(validationValence) },
                 validationMessage,

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

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

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

@@ -1,8 +1,7 @@
 import '@dxosTheme';
-import { InputProps } from './Input';
 declare const _default: {
     title: string;
-    component: ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, validationMessage, validationValence, ...inputProps }: InputProps) => JSX.Element;
+    component: ({ label, labelVisuallyHidden, placeholder, description, descriptionVisuallyHidden, required, initialValue, onChange, disabled, className, size, length, validationMessage, validationValence, ...inputProps }: import("./InputProps").InputProps) => JSX.Element;
     argTypes: {
         description: {
             control: string;
@@ -11,13 +10,18 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        size: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
-export declare const Default: import("@storybook/react").Story<InputProps>;
+export declare const Default: import("@storybook/react").Story<import("./InputProps").InputProps>;
 export declare const Disabled: () => JSX.Element;
 export declare const LabelVisuallyHidden: () => JSX.Element;
 export declare const InputWithDescription: () => JSX.Element;
 export declare const InputWithErrorAndDescription: () => JSX.Element;
 export declare const InputWithValidationAndDescription: () => JSX.Element;
+export declare const PinInput: () => JSX.Element;
 //# sourceMappingURL=Input.stories.d.ts.map

package/dist/src/components/Input/Input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAE5C,wBAUE;AAMF,eAAO,MAAM,OAAO,8CAAgD,CAAC;AAYrE,eAAO,MAAM,QAAQ,mBAQpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAQhC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAUxC,CAAC;AAEF,eAAO,MAAM,iCAAiC,mBAU7C,CAAC"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAMpB,wBAcE;AAMF,eAAO,MAAM,OAAO,qEAAgD,CAAC;AAarE,eAAO,MAAM,QAAQ,mBAQpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAQhC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAUxC,CAAC;AAEF,eAAO,MAAM,iCAAiC,mBAU7C,CAAC;AAEF,eAAO,MAAM,QAAQ,mBAUpB,CAAC"}

package/dist/src/components/Input/Input.stories.js

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputWithValidationAndDescription = exports.InputWithErrorAndDescription = exports.InputWithDescription = exports.LabelVisuallyHidden = exports.Disabled = exports.Default = void 0;
+exports.PinInput = exports.InputWithValidationAndDescription = exports.InputWithErrorAndDescription = exports.InputWithDescription = exports.LabelVisuallyHidden = exports.Disabled = exports.Default = void 0;
 require("@dxosTheme");
 const react_1 = __importDefault(require("react"));
 const testing_1 = require("../../testing");
@@ -19,6 +19,10 @@ exports.default = {
         validationValence: {
             control: 'select',
             options: ['success', 'info', 'warning', 'error']
+        },
+        size: {
+            control: 'select',
+            options: ['md', 'lg', 'pin']
         }
     }
 };
@@ -34,7 +38,8 @@ exports.Default.args = {
     labelVisuallyHidden: false,
     descriptionVisuallyHidden: false,
     validationMessage: '',
-    validationValence: undefined
+    validationValence: undefined,
+    length: 6
 };
 const Disabled = () => (react_1.default.createElement(Template, { ...{
         label: 'Disabled',
@@ -70,4 +75,12 @@ const InputWithValidationAndDescription = () => (react_1.default.createElement(T
         validationMessage: 'This validation message is really part of the description.'
     } }));
 exports.InputWithValidationAndDescription = InputWithValidationAndDescription;
+const PinInput = () => (react_1.default.createElement(Template, { ...{
+        label: 'This input is a PIN-style input',
+        size: 'pin',
+        length: 6,
+        description: 'Type in secret you received',
+        placeholder: '••••••'
+    } }));
+exports.PinInput = PinInput;
 //# sourceMappingURL=Input.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,mCAA4C;AAE5C,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAK;IAChB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,iBAAiB,EAAE;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC;SACjD;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,OAAO,8BAAC,aAAK,OAAK,KAAK,GAAI,CAAC;AAC9B,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACrE,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,SAAS;IACtB,mBAAmB,EAAE,KAAK;IAC1B,yBAAyB,EAAE,KAAK;IAChC,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,SAAS;CAC7B,CAAC;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE,IAAI;KACf,GACD,CACH,CAAC;AARW,QAAA,QAAQ,YAQnB;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACvC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,oEAAoE;KAClF,GACD,CACH,CAAC;AARW,QAAA,mBAAmB,uBAQ9B;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACxC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,0CAA0C;QACvD,WAAW,EAAE,2DAA2D;KACzE,GACD,CACH,CAAC;AARW,QAAA,oBAAoB,wBAQ/B;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE,CAAC,CAChD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,sEAAsE;QACnF,WAAW,EAAE,sEAAsE;QACnF,iBAAiB,EAAE,OAAO;QAC1B,iBAAiB,EAAE,yBAAyB;KAC7C,GACD,CACH,CAAC;AAVW,QAAA,4BAA4B,gCAUvC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yCAAyC;QAChD,WAAW,EAAE,sDAAsD;QACnE,WAAW,EAAE,4BAA4B;QACzC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,4DAA4D;KAChF,GACD,CACH,CAAC;AAVW,QAAA,iCAAiC,qCAU5C"}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,mCAA4C;AAE5C,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAK;IAChB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,iBAAiB,EAAE;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,OAAO,8BAAC,aAAK,OAAK,KAAK,GAAI,CAAC;AAC9B,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACrE,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,SAAS;IACtB,mBAAmB,EAAE,KAAK;IAC1B,yBAAyB,EAAE,KAAK;IAChC,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,SAAS;IAC5B,MAAM,EAAE,CAAC;CACV,CAAC;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE,IAAI;KACf,GACD,CACH,CAAC;AARW,QAAA,QAAQ,YAQnB;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACvC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,oEAAoE;KAClF,GACD,CACH,CAAC;AARW,QAAA,mBAAmB,uBAQ9B;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACxC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,0CAA0C;QACvD,WAAW,EAAE,2DAA2D;KACzE,GACD,CACH,CAAC;AARW,QAAA,oBAAoB,wBAQ/B;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE,CAAC,CAChD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,sEAAsE;QACnF,WAAW,EAAE,sEAAsE;QACnF,iBAAiB,EAAE,OAAO;QAC1B,iBAAiB,EAAE,yBAAyB;KAC7C,GACD,CACH,CAAC;AAVW,QAAA,4BAA4B,gCAUvC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yCAAyC;QAChD,WAAW,EAAE,sDAAsD;QACnE,WAAW,EAAE,4BAA4B;QACzC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,4DAA4D;KAChF,GACD,CACH,CAAC;AAVW,QAAA,iCAAiC,qCAU5C;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,CAAC;QACT,WAAW,EAAE,6BAA6B;QAC1C,WAAW,EAAE,QAAQ;KACtB,GACD,CACH,CAAC;AAVW,QAAA,QAAQ,YAUnB"}