@ama-pt/agora-design-system 0.1.1

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.csf.d.ts

@@ -0,0 +1,177 @@
+export declare const parameters: {
+    actions: {
+        handles: string[];
+    };
+    design: {
+        type: string;
+        url: string;
+    };
+};
+export declare const argTypes: {
+    label: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    ariaLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+        };
+    };
+    hideLabel: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    placeholder: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    initialValue: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    feedbackText: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+    };
+    feedbackState: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    hasError: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    disabled: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    readOnly: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    showCharCounter: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+            defaultValue: {
+                summary: string;
+            };
+        };
+        defaultValue: boolean;
+        control: {
+            type: string;
+        };
+    };
+    maxChars: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: number;
+    };
+    isOptional: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: boolean;
+    };
+};

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.csf.js

@@ -0,0 +1,119 @@
+export const parameters = {
+    actions: {
+        handles: ['mouseenter', 'click', 'focusin', 'focusout']
+    },
+    design: {
+        type: 'zeroheight',
+        url: 'https://zeroheight.com/1be481dc2/p/489b41-buttons/b/026ea1'
+    }
+};
+export const argTypes = {
+    label: {
+        type: { name: 'string', required: true },
+        description: 'Label to display above input. ',
+        defaultValue: ''
+    },
+    ariaLabel: {
+        type: { name: 'string', required: false },
+        description: 'Descritive attribute that labels the checkbox in terms of accessibility',
+        defaultValue: '',
+        control: {
+            type: 'text'
+        }
+    },
+    hideLabel: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether to show/hide input field label',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    placeholder: {
+        type: { name: 'string', required: false },
+        description: 'Placeholder to display when no text.',
+        defaultValue: ''
+    },
+    initialValue: {
+        type: { name: 'string', required: false },
+        description: 'Default value.',
+        defaultValue: ''
+    },
+    feedbackText: {
+        type: { name: 'string', required: false },
+        description: 'Feedback to display',
+        defaultValue: ''
+    },
+    feedbackState: {
+        type: { name: 'string', required: false },
+        description: 'Feedback message state.',
+        defaultValue: 'info',
+        control: {
+            type: 'select',
+            options: ['info', 'success', 'danger', 'warning']
+        }
+    },
+    hasError: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input has any validation error',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    disabled: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input is disabled.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    readOnly: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Input is Read only.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    showCharCounter: {
+        type: { name: 'boolean', required: false },
+        description: 'Whether show char counter.',
+        table: {
+            type: {
+                summary: 'boolean'
+            },
+            defaultValue: { summary: 'false' }
+        },
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    maxChars: {
+        type: { name: 'number', required: false },
+        description: 'Maximum chars allowed.',
+        defaultValue: -1
+    },
+    isOptional: {
+        type: { name: 'boolean', required: false },
+        description: 'Decides if this field could be optional',
+        defaultValue: false
+    }
+};
+//# sourceMappingURL=input_textarea.csf.js.map

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.csf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_textarea.csf.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/input_textarea/input_textarea.csf.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC;KACxD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,4DAA4D;KAClE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;QACxC,WAAW,EAAE,gCAAgC;QAC7C,YAAY,EAAE,EAAE;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,yEAAyE;QACtF,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;SACb;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,wCAAwC;QACrD,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,SAAS;aACnB;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,WAAW,EAAE;QACX,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,sCAAsC;QACnD,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,gBAAgB;QAC7B,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,qBAAqB;QAClC,YAAY,EAAE,EAAE;KACjB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,yBAAyB;QACtC,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;SAClD;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,4CAA4C;QACzD,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,SAAS;aACnB;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,SAAS;aACnB;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,iCAAiC;QAC9C,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,SAAS;aACnB;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,eAAe,EAAE;QACf,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,4BAA4B;QACzC,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,SAAS;aACnB;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,wBAAwB;QACrC,YAAY,EAAE,CAAC,CAAC;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,yCAAyC;QACtD,YAAY,EAAE,KAAK;KACpB;CACF,CAAC"}

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import './input_textarea.scss';
+export interface InputTextAreaProps extends React.ComponentPropsWithRef<'textarea'> {
+    /**
+     * Input ID.
+     * @default ''
+     */
+    id: string;
+    /**
+     * Input descriptive label.
+     * @default 'Input Label'
+     */
+    label?: string;
+    /**
+     * Descritive attribute that labels the checkbox in terms of accessibility
+     * @default null
+     */
+    ariaLabel?: string;
+    /**
+     * Decides if display/hide label.
+     * @default false
+     */
+    hideLabel?: boolean | 'true' | 'false';
+    /**
+     * Text informative displayed below input text
+     * @default null
+     */
+    feedbackText?: string;
+    /**
+     * Intial value
+     * @default null
+     */
+    initialValue?: string;
+    /**
+     * Indicates the feedback state of feedback text.
+     * This param will change the left feedback icon and dye it.
+     */
+    feedbackState?: 'info' | 'danger' | 'success' | 'warning';
+    /**
+     * Hightlight the input indicating some error
+     * @default false
+     */
+    hasError?: boolean | 'true' | 'false';
+    /**
+     * Indicates that this input char length limitation.
+     * @default -1
+     */
+    maxChars?: number;
+    /**
+     * Allow to show/hide the char counter on right button corner.
+     * @default false
+     */
+    showCharCounter?: boolean | 'true' | 'false';
+    /**
+     * Allow to show/hide the char counter on right button corner.
+     * @default false
+     */
+    isOptional?: boolean | 'true' | 'false';
+}
+export declare const InputTextArea: React.FC<InputTextAreaProps>;

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.js

@@ -0,0 +1,88 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { stringToBoolean } from '../../../utils';
+import { Icon } from '../icon';
+import './input_textarea.scss';
+export const InputTextArea = (_a) => {
+    var { label = 'Input Label', ariaLabel, hideLabel, hasError, maxChars = -1, showCharCounter, disabled, readOnly, feedbackText, feedbackState = 'info', initialValue, className = '', isOptional, rows = 3, id } = _a, props = __rest(_a, ["label", "ariaLabel", "hideLabel", "hasError", "maxChars", "showCharCounter", "disabled", "readOnly", "feedbackText", "feedbackState", "initialValue", "className", "isOptional", "rows", "id"]);
+    const propsClone = Object.assign({}, props);
+    const { onChange } = propsClone;
+    const [currentValue, setCurrentValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
+    /**
+     * Local onChange event handler. This functions allow us
+     * set a limit for chars amount
+     * @param evt Event
+     */
+    const handleChangeEvent = (evt) => {
+        const { value } = evt.currentTarget;
+        if (maxChars === -1 || (value === null || value === void 0 ? void 0 : value.length) <= maxChars) {
+            setCurrentValue(value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(evt);
+    };
+    /**
+     * Dictionary of possible icons feedback.
+     * @var
+     */
+    const feedbackStateIconsMap = {
+        info: 'agora-solid-info',
+        danger: 'agora-solid-danger',
+        success: 'agora-solid-tick-circle',
+        warning: 'agora-solid-alert'
+    };
+    /**
+     * Builds main Classes for whole component
+     * @returns Object
+     */
+    const inputClassBuilder = () => {
+        return {
+            // main wrapper class
+            inputWrapperClasses: classNames('agora-input-textarea--wrapper', {
+                'input-disabled': disabled,
+                'input-has-error': stringToBoolean(hasError)
+            }),
+            // classes for above input sections [label and hint icon]
+            labelSectionClasses: classNames('input-label-wrapper', 'flex', 'items-end', {
+                'mb-8': label && !stringToBoolean(hideLabel),
+                'justify-end': !label || stringToBoolean(hideLabel),
+                'justify-between': label && !stringToBoolean(hideLabel)
+            }),
+            // text input component classes
+            inputClasses: classNames('agora-input-textarea', 'flex-1', {
+                'has-value': currentValue.length > 0
+            }, className)
+        };
+    };
+    const { inputWrapperClasses, labelSectionClasses, inputClasses } = inputClassBuilder();
+    if (stringToBoolean(isOptional)) {
+        delete propsClone.required;
+    }
+    else {
+        propsClone.required = true;
+    }
+    return (React.createElement("div", { className: inputWrapperClasses },
+        React.createElement("div", { className: labelSectionClasses },
+            React.createElement("label", { hidden: stringToBoolean(hideLabel), htmlFor: id, className: "text-primary-900 text-interaction-input-label" }, label)),
+        React.createElement("div", { className: "input-wrapper flex relative items-center" },
+            React.createElement("textarea", Object.assign({ rows: rows, id: id, value: currentValue, className: inputClasses, disabled: disabled, readOnly: readOnly, "aria-invalid": stringToBoolean(hasError), "aria-label": ariaLabel || label, "aria-required": !stringToBoolean(isOptional), onChange: handleChangeEvent }, propsClone))),
+        React.createElement("div", { className: "flex items-center justify-between" },
+            React.createElement("div", { className: "flex items-center input-feedback mt-8" },
+                feedbackText && (React.createElement("span", { className: `mr-8 feedback-icon-wrapper feedback-icon-wrapper--${feedbackState}` }, !stringToBoolean(hasError) ? (React.createElement(Icon, { icon: feedbackStateIconsMap[feedbackState], size: "s", alt: feedbackText })) : (React.createElement(Icon, { icon: "agora-solid-danger", size: "s", alt: feedbackText })))),
+                React.createElement("p", { className: "text-type-specs-caption text-neutral-700" }, feedbackText)),
+            stringToBoolean(showCharCounter) && (React.createElement("div", { className: "text-type-specs-caption text-neutral-700 mt-8 pl-16" },
+                currentValue.length,
+                " ",
+                maxChars !== -1 ? `/${maxChars}` : '')))));
+};
+//# sourceMappingURL=input_textarea.js.map

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.js.map

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

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.scss

@@ -0,0 +1,152 @@
+@mixin dyeLineIcon($colorClass) {
+  path {
+    fill: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+@mixin dyeSolidIcon($colorClass) {
+  path {
+    stroke: transparent;
+    @apply #{$colorClass} #{!important};
+  }
+}
+
+.agora-input-textarea--wrapper {
+  @apply flex flex-col relative;
+
+  // normal leading icons color on default status input text
+  .input-icon {
+    &.dye-as-solid {
+      @include dyeSolidIcon('fill-neutral-900 opacity-70');
+    }
+    &.dye-as-line {
+      @include dyeLineIcon('stroke-neutral-900 opacity-70');
+    }
+  }
+  //# end
+
+  & span.hint-icon-wrapper {
+    svg {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+  }
+
+  .feedback-icon-wrapper {
+    &--info {
+      path {
+        stroke: transparent;
+        @apply fill-informative-500;
+      }
+    }
+
+    &--success {
+      path {
+        stroke: transparent;
+        @apply fill-success-500;
+      }
+    }
+
+    &--danger {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500;
+      }
+    }
+
+    &--warning {
+      path {
+        stroke: transparent;
+        @apply fill-alert-700;
+      }
+    }
+  }
+
+  .input-leading--icon {
+    @apply right-0 bottom-24 left-16 absolute w-min;
+    top: 18px;
+  }
+
+  .agora-input-textarea {
+    @apply border-2 border-neutral-300 outline-none rounded-4 p-16 transition-all ease-in-out text-interaction-input-text text-neutral-900;
+
+    &.has-leading-icon {
+      @apply pl-56;
+    }
+
+    &:hover:not(:focus):not(:disabled):not(:read-only) {
+      @apply border-neutral-800;
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900 opacity-100');
+        }
+      }
+      //# end
+    }
+
+    // disabled
+    &:disabled,
+    &:read-only {
+      @apply border-neutral-100 cursor-not-allowed bg-neutral-100 #{!important};
+
+      &:focus:read-only {
+        @apply border-primary-600 #{!important}; // force border
+      }
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-neutral-900  opacity-70');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-neutral-900  opacity-70');
+        }
+      }
+      //# end
+    }
+
+    &.has-value {
+      @apply border-neutral-500;
+    }
+
+    &:not(:focus) {
+      @apply outline-0;
+    }
+
+    &:not(:disabled):focus {
+      @apply border-primary-600 outline outline-2 outline-offset-2 outline-primary-600;
+
+      // normal leading icons color on default status input text
+      & ~ .input-icon {
+        &.dye-as-solid {
+          @include dyeSolidIcon('fill-primary-600 opacity-100');
+        }
+        &.dye-as-line {
+          @include dyeLineIcon('stroke-primary-600  opacity-100');
+        }
+      }
+      //# end
+    }
+  }
+
+  &.input-has-error {
+    .input-feedback {
+      path {
+        stroke: transparent;
+        @apply fill-danger-500 #{!important};
+      }
+    }
+
+    .agora-input-textarea:not(:disabled):not(:read-only) {
+      @apply border-2 bg-danger-50 border-danger-500 #{!important};
+    }
+  }
+}

package/dist/esm/components/ui/atoms/input_textarea/input_textarea.stories.d.ts

@@ -0,0 +1,13 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+import { InputTextAreaProps } from './input_textarea';
+declare const _default: ComponentMeta<React.FC<InputTextAreaProps>>;
+export default _default;
+export declare const InputTextComp: Story<any>;
+export declare const InputTextFeedbackInfo: Story<any>;
+export declare const InputTextFeedbackSuccess: Story<any>;
+export declare const InputTextFeedbackWarning: Story<any>;
+export declare const InputTextFeedbackDanger: Story<any>;
+export declare const InputTextCompHasReadOnly: Story<any>;
+export declare const InputTextCompDisabled: Story<any>;
+export declare const InputTextCompHasError: Story<any>;