@hopper-ui/components 1.0.13 → 1.2.0

package/dist/inputs/src/SearchField.d.ts

@@ -21,6 +21,7 @@ interface SearchFieldProps extends StyledComponentProps<SearchFieldProps$1> {
     size?: ResponsiveProp<"sm" | "md">;
     /**
      * If `true`, the SearchField will take all available width.
+     * @default false
      */
     isFluid?: ResponsiveProp<boolean>;
     /**

package/dist/inputs/src/SearchField.js

@@ -1,23 +1,23 @@
-export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from '../../chunk-TNVYVDLF.js';
+export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from '../../chunk-S5CK32KM.js';
 import '../../chunk-3NKF5TPD.js';
 import '../../chunk-LJXTJRSB.js';
-import '../../chunk-I2YZLGRE.js';
-import '../../chunk-ERE2XRQA.js';
+import '../../chunk-PQXVL3YJ.js';
 import '../../chunk-TXZ6BMFR.js';
-import '../../chunk-CCIVRIKG.js';
+import '../../chunk-RWAVMW7T.js';
+import '../../chunk-Q63YLWI6.js';
 import '../../chunk-6BFSSZCY.js';
-import '../../chunk-KARK64JC.js';
+import '../../chunk-2XO5CZBO.js';
 import '../../chunk-DXVKHP4V.js';
-import '../../chunk-ZXDN2IRM.js';
+import '../../chunk-5IB23E3O.js';
 import '../../chunk-O7IJYNVQ.js';
 import '../../chunk-QCA3ZR56.js';
-import '../../chunk-YEYNRBMQ.js';
+import '../../chunk-F4H76S4H.js';
 import '../../chunk-65JPI4FL.js';
 import '../../chunk-HZKFQ33E.js';
-import '../../chunk-FAE27DLF.js';
-import '../../chunk-5WWMVQI4.js';
+import '../../chunk-CEUQHDEQ.js';
 import '../../chunk-WPNVVGFW.js';
-import '../../chunk-PAYZGXTT.js';
+import '../../chunk-FAE27DLF.js';
+import '../../chunk-XT2MZWEV.js';
 import '../../chunk-X6SER3TZ.js';
 import '../../chunk-HXI3MEEK.js';
 import '../../chunk-M36KANKC.js';

package/dist/inputs/src/TextArea.css

@@ -0,0 +1,469 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
+.Text-module__hop-Text___7s-NC {
+  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-Text-md-font-size: var(--hop-body-md-font-size);
+  --hop-Text-md-font-family: var(--hop-body-md-font-family);
+  --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-Text-md-line-height: var(--hop-body-md-line-height);
+  --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-Text-inherit-size-font-size: inherit;
+  --hop-Text-inherit-size-font-family: inherit;
+  --hop-Text-inherit-size-font-weight: inherit;
+  --hop-Text-inherit-size-line-height: inherit;
+}
+:where(.Text-module__hop-Text___7s-NC) {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Text-module__hop-Text--xs___uRZNm) {
+  --font-size: var(--hop-Text-xs-font-size);
+  --font-family: var(--hop-Text-xs-font-family);
+  --font-weight: var(--hop-Text-xs-font-weight);
+  --line-height: var(--hop-Text-xs-line-height);
+}
+:where(.Text-module__hop-Text--sm___LfDaA) {
+  --font-size: var(--hop-Text-sm-font-size);
+  --font-family: var(--hop-Text-sm-font-family);
+  --font-weight: var(--hop-Text-sm-font-weight);
+  --line-height: var(--hop-Text-sm-line-height);
+}
+:where(.Text-module__hop-Text--md___aGVbv) {
+  --font-size: var(--hop-Text-md-font-size);
+  --font-family: var(--hop-Text-md-font-family);
+  --font-weight: var(--hop-Text-md-font-weight);
+  --line-height: var(--hop-Text-md-line-height);
+}
+:where(.Text-module__hop-Text--lg___TgsRg) {
+  --font-size: var(--hop-Text-lg-font-size);
+  --font-family: var(--hop-Text-lg-font-family);
+  --font-weight: var(--hop-Text-lg-font-weight);
+  --line-height: var(--hop-Text-lg-line-height);
+}
+:where(.Text-module__hop-Text--xl___gAcxP) {
+  --font-size: var(--hop-Text-xl-font-size);
+  --font-family: var(--hop-Text-xl-font-family);
+  --font-weight: var(--hop-Text-xl-font-weight);
+  --line-height: var(--hop-Text-xl-line-height);
+}
+:where(.Text-module__hop-Text--2xl___n-9B9) {
+  --font-size: var(--hop-Text-2xl-font-size);
+  --font-family: var(--hop-Text-2xl-font-family);
+  --font-weight: var(--hop-Text-2xl-font-weight);
+  --line-height: var(--hop-Text-2xl-line-height);
+}
+:where(.Text-module__hop-Text--inherit___SEa0P) {
+  --font-size: var(--hop-Text-inherit-size-font-size);
+  --font-family: var(--hop-Text-inherit-size-font-family);
+  --font-weight: var(--hop-Text-inherit-size-font-weight);
+  --line-height: var(--hop-Text-inherit-size-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/ErrorMessage/src/ErrorMessage.module.css/#css-module-data */
+.ErrorMessage-module__hop-ErrorMessage___6qmlS {
+  --hop-ErrorMessage-color: var(--hop-danger-text-weak);
+  --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
+  --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
+  --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
+  --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
+  --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
+  display: flex;
+  column-gap: var(--hop-ErrorMessage-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  font-family: var(--hop-ErrorMessage-font-family);
+  font-size: var(--hop-ErrorMessage-font-size);
+  font-weight: var(--hop-ErrorMessage-font-weight);
+  line-height: var(--hop-ErrorMessage-line-height);
+  color: var(--hop-ErrorMessage-color);
+}
+.ErrorMessage-module__hop-ErrorMessage__icon___m4Mae {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/HelperMessage/src/HelperMessage.module.css/#css-module-data */
+.HelperMessage-module__hop-HelperMessage___KQaJ4 {
+  --hop-HelperMessage-color: var(--hop-neutral-text-weak);
+  --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
+  display: flex;
+  column-gap: var(--hop-HelperMessage-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--hop-HelperMessage-color);
+}
+.HelperMessage-module__hop-HelperMessage__icon___1a1jj {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
+.Heading-module__hop-Heading___FVhfN {
+  --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
+  --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
+  --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
+  --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
+  --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
+  --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
+  --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
+  --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
+  --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
+  --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
+  --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
+  --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
+  --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
+  --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
+  --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
+  --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
+  --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
+  --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
+  --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
+  --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
+  --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
+  --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
+  --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
+  --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
+  --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
+  --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
+  --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
+  --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
+  --hop-Heading-inherit-size-font-size: inherit;
+  --hop-Heading-inherit-size-font-family: inherit;
+  --hop-Heading-inherit-size-font-weight: inherit;
+  --hop-Heading-inherit-size-line-height: inherit;
+}
+:where(.Heading-module__hop-Heading___FVhfN) {
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Heading-module__hop-Heading--xs___t30s-) {
+  --font-size: var(--hop-Heading-xs-font-size);
+  --font-family: var(--hop-Heading-xs-font-family);
+  --font-weight: var(--hop-Heading-xs-font-weight);
+  --line-height: var(--hop-Heading-xs-line-height);
+}
+:where(.Heading-module__hop-Heading--sm___R6y6i) {
+  --font-size: var(--hop-Heading-sm-font-size);
+  --font-family: var(--hop-Heading-sm-font-family);
+  --font-weight: var(--hop-Heading-sm-font-weight);
+  --line-height: var(--hop-Heading-sm-line-height);
+}
+:where(.Heading-module__hop-Heading--md___d6d9m) {
+  --font-size: var(--hop-Heading-md-font-size);
+  --font-family: var(--hop-Heading-md-font-family);
+  --font-weight: var(--hop-Heading-md-font-weight);
+  --line-height: var(--hop-Heading-md-line-height);
+}
+:where(.Heading-module__hop-Heading--lg___yqjzy) {
+  --font-size: var(--hop-Heading-lg-font-size);
+  --font-family: var(--hop-Heading-lg-font-family);
+  --font-weight: var(--hop-Heading-lg-font-weight);
+  --line-height: var(--hop-Heading-lg-line-height);
+}
+:where(.Heading-module__hop-Heading--xl___U0Gfz) {
+  --font-size: var(--hop-Heading-xl-font-size);
+  --font-family: var(--hop-Heading-xl-font-family);
+  --font-weight: var(--hop-Heading-xl-font-weight);
+  --line-height: var(--hop-Heading-xl-line-height);
+}
+:where(.Heading-module__hop-Heading--2xl___B7lym) {
+  --font-size: var(--hop-Heading-2xl-font-size);
+  --font-family: var(--hop-Heading-2xl-font-family);
+  --font-weight: var(--hop-Heading-2xl-font-weight);
+  --line-height: var(--hop-Heading-2xl-line-height);
+}
+:where(.Heading-module__hop-Heading--3xl___P65x-) {
+  --font-size: var(--hop-Heading-3xl-font-size);
+  --font-family: var(--hop-Heading-3xl-font-family);
+  --font-weight: var(--hop-Heading-3xl-font-weight);
+  --line-height: var(--hop-Heading-3xl-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
+:where(.OverlineText-module__hop-OverlineText___kurkU) {
+  --hop-OverlineText-font-family: var(--hop-overline-font-family);
+  --hop-OverlineText-font-size: var(--hop-overline-font-size);
+  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
+  --hop-OverlineText-letter-spacing: 0.015rem;
+  --hop-OverlineText-line-height: var(--hop-overline-line-height);
+  --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
+  --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
+  --font-family: var(--hop-OverlineText-font-family);
+  --font-size: var(--hop-OverlineText-font-size);
+  --font-weight: var(--hop-OverlineText-font-weight);
+  --letter-spacing: var(--hop-OverlineText-letter-spacing);
+  --line-height: var(--hop-OverlineText-line-height);
+  --top-offset: var(--hop-OverlineText-top-offset);
+  --bottom-offset: var(--hop-OverlineText-bottom-offset);
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-feature-settings: "case";
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing);
+}
+.OverlineText-module__hop-OverlineText__text___7uNsa {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___7uNsa::before,
+.OverlineText-module__hop-OverlineText__text___7uNsa::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___7uNsa::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___7uNsa::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
+.Label-module__hop-Label___L4zrw {
+  --hop-Label-font-size: var(--hop-heading-xs-font-size);
+  --hop-Label-font-family: var(--hop-heading-xs-font-family);
+  --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
+  --hop-Label-line-height: var(--hop-heading-xs-line-height);
+  --hop-Label-color: var(--hop-neutral-text-weak);
+}
+:where(.Label-module__hop-Label___L4zrw) {
+  font-family: var(--hop-Label-font-family);
+  font-size: var(--hop-Label-font-size);
+  font-weight: var(--hop-Label-font-weight);
+  line-height: var(--hop-Label-line-height);
+  color: var(--hop-Label-color);
+}
+:where(.Label-module__hop-Label__indicator___mWy1n) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
+.InputGroup-module__hop-InputGroup___PiLz0 {
+  --hop-InputGroup-background: var(--hop-neutral-surface);
+  --hop-InputGroup-border-color: var(--hop-neutral-border);
+  --hop-InputGroup-border-width: 0.0625rem;
+  --hop-InputGroup-display: inline-flex;
+  --hop-InputGroup-display-number: grid;
+  --hop-InputGroup-gap: var(--hop-space-inline-sm);
+  --hop-InputGroup-gap-textarea: 0;
+  --hop-InputGroup-gap-number: 0;
+  --hop-InputGroup-flex-direction: row;
+  --hop-InputGroup-flex-direction-textarea: column;
+  --hop-InputGroup-align-items: center;
+  --hop-InputGroup-align-items-textarea: flex-end;
+  --hop-InputGroup-inline-size: fit-content;
+  --hop-InputGroup-inline-size-number: 100%;
+  --hop-InputGroup-sm-block-size: 2rem;
+  --hop-InputGroup-md-block-size: 2.5rem;
+  --hop-InputGroup-block-size-textarea: auto;
+  --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
+  --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
+  --hop-InputGroup-padding-block: 0;
+  --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
+  --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
+  --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
+  --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
+  --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
+  --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
+  --hop-InputGroup-input-color: var(--hop-neutral-text);
+  --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-InputGroup-input-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-InputGroup-input-sm-block-size: 1.5rem;
+  --hop-InputGroup-input-md-font-family: var(--hop-body-md-font-family);
+  --hop-InputGroup-input-md-font-size: var(--hop-body-md-font-size);
+  --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
+  --hop-InputGroup-input-md-block-size: 2rem;
+  --hop-InputGroup-input-padding: 0;
+  --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
+  --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
+  --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
+  --hop-InputGroup-placeholder-font-family: inherit;
+  --hop-InputGroup-placeholder-font-size: inherit;
+  --hop-InputGroup-placeholder-font-weight: inherit;
+  --hop-InputGroup-placeholder-line-height: inherit;
+  --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
+  --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
+  --inline-size: var(--hop-InputGroup-inline-size);
+  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
+  --background: var(--hop-InputGroup-background);
+  --block-size: var(--hop-InputGroup-md-block-size);
+  --display: var(--hop-InputGroup-display);
+  --gap: var(--hop-InputGroup-gap);
+  --flex-direction: var(--hop-InputGroup-flex-direction);
+  --align-items: var(--hop-InputGroup-align-items);
+  --padding-inline: var(--hop-InputGroup-padding-inline);
+  --padding-block: var(--hop-InputGroup-padding-block);
+  --input-font-family: var(--hop-InputGroup-input-md-font-family);
+  --input-font-size: var(--hop-InputGroup-input-md-font-size);
+  --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
+  --input-line-height: var(--hop-InputGroup-input-md-line-height);
+  --input-block-size: var(--hop-InputGroup-input-md-block-size);
+  --input-inline-size: initial;
+  --input-color: var(--hop-InputGroup-input-color);
+  --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
+  position: relative;
+  display: var(--display);
+  flex-direction: var(--flex-direction);
+  gap: var(--gap);
+  align-items: var(--align-items);
+  box-sizing: border-box;
+  inline-size: var(--inline-size);
+  block-size: var(--block-size);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  background: var(--background);
+  border: var(--border);
+  border-radius: var(--hop-InputGroup-border-radius);
+}
+.InputGroup-module__hop-InputGroup--fluid___Cp15- {
+  --inline-size: 100%;
+  --input-inline-size: 100%;
+}
+.InputGroup-module__hop-InputGroup--sm___ZeMr9 {
+  --block-size: var(--hop-InputGroup-sm-block-size);
+  --input-font-family: var(--hop-InputGroup-input-sm-font-family);
+  --input-font-size: var(--hop-InputGroup-input-sm-font-size);
+  --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
+  --input-line-height: var(--hop-InputGroup-input-sm-line-height);
+  --input-block-size: var(--hop-InputGroup-input-sm-block-size);
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-input-type=textarea] {
+  --gap: var(--hop-InputGroup-gap-textarea);
+  --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
+  --align-items: var(--hop-InputGroup-align-items-textarea);
+  --block-size: var(--hop-InputGroup-block-size-textarea);
+  --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
+  --padding-block: var(--hop-InputGroup-padding-block-textarea);
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-input-type=number] {
+  --display: var(--hop-InputGroup-display-number);
+  --gap: var(--hop-InputGroup-gap-number);
+  --inline-size: var(--hop-InputGroup-inline-size-number);
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-hovered] {
+  --background: var(--hop-InputGroup-background-hover);
+  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-focus-within] {
+  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-invalid] {
+  --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-disabled] {
+  --background: var(--hop-InputGroup-background-disabled);
+  --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
+  --input-color: var(--hop-InputGroup-input-color-disabled);
+  --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
+}
+.InputGroup-module__hop-InputGroup__input___xLgn9,
+.InputGroup-module__hop-InputGroup__textarea___6Go7N {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  inline-size: var(--input-inline-size);
+  min-inline-size: 0;
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  color: var(--input-color);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.InputGroup-module__hop-InputGroup__input___xLgn9 {
+  block-size: var(--input-block-size);
+  padding: var(--hop-InputGroup-input-padding);
+}
+.InputGroup-module__hop-InputGroup__textarea___6Go7N {
+  padding: var(--hop-InputGroup-textarea-padding);
+}
+.InputGroup-module__hop-InputGroup__input___xLgn9::placeholder {
+  font-family: var(--hop-InputGroup-placeholder-font-family);
+  font-size: var(--hop-InputGroup-placeholder-font-size);
+  font-weight: var(--hop-InputGroup-placeholder-font-weight);
+  line-height: var(--hop-InputGroup-placeholder-line-height);
+  color: var(--input-placeholder-color);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/TextArea.module.css/#css-module-data */
+.TextArea-module__hop-TextArea___Oqrhm {
+  --hop-TextArea-gap: var(--hop-space-stack-xs);
+  --hop-TextArea-inline-size: 20rem;
+  --hop-TextArea-prefix-color: var(--hop-neutral-text-weak);
+  --hop-TextArea-char-count-padding: 0 calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs)) var(--hop-space-inset-xs);
+  --hop-TextArea-char-count-color: var(--hop-neutral-text-weakest);
+  --hop-TextArea-char-count-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-TextArea-char-count-color-invalid: var(--hop-danger-text-weak);
+  --hop-TextArea-input-min-height: 2rem;
+  --inline-size: var(--hop-TextArea-inline-size);
+  --resize: none;
+  --char-count-color: var(--hop-TextArea-char-count-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hop-TextArea-gap);
+  inline-size: var(--inline-size);
+}
+.TextArea-module__hop-TextArea--fluid___2QsEG {
+  --inline-size: 100%;
+}
+.TextArea-module__hop-TextArea___Oqrhm[data-resize-mode=vertical] {
+  --resize: vertical;
+}
+.TextArea-module__hop-TextArea___Oqrhm[data-over-max-length] {
+  --char-count-color: var(--hop-TextArea-char-count-color-invalid);
+}
+.TextArea-module__hop-TextArea___Oqrhm[data-disabled] {
+  --char-count-color: var(--hop-TextArea-char-count-color-disabled);
+}
+.TextArea-module__hop-TextArea__Label___6uZvZ {
+  order: 0;
+}
+.TextArea-module__hop-TextArea__prefix___UGSsJ {
+  color: var(--hop-TextArea-prefix-color);
+}
+.TextArea-module__hop-TextArea__InputGroup___m2oHv {
+  order: 1;
+}
+.TextArea-module__hop-TextArea__textarea___-aEby {
+  resize: var(--resize);
+  min-block-size: var(--hop-TextArea-input-min-height);
+}
+.TextArea-module__hop-TextArea__char-count___-TDoe {
+  padding: var(--hop-TextArea-char-count-padding);
+  color: var(--char-count-color);
+}
+.TextArea-module__hop-TextArea__ErrorMessage___Gj-AJ,
+.TextArea-module__hop-TextArea__HelperMessage___FVgxx {
+  order: 3;
+}

package/dist/inputs/src/TextArea.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { MutableRefObject } from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { TextFieldProps } from 'react-aria-components';
+
+declare const GlobalTextAreaCssSelector = "hop-TextArea";
+type ResizeMode = "none" | "vertical";
+interface TextAreaProps extends StyledComponentProps<TextFieldProps> {
+    /**
+     * True to display the number of remaining allowed characters on the right of the input. Requires a valid value in the "maxLength" prop.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * The maximum number of visible text lines before displaying a scrollbar.
+     */
+    maxRows?: number;
+    /**
+     * The placeholder text when the TextArea is empty.
+     */
+    placeholder?: string;
+    /**
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows).
+     */
+    rows?: number;
+    /**
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols).
+     */
+    cols?: number;
+    /**
+     * The size of the TextArea.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"sm" | "md">;
+    /**
+     * If `true`, the TextArea will take all available width.
+     */
+    isFluid?: ResponsiveProp<boolean>;
+    /**
+     * This should only be used with the `showCharacterCount` prop.
+     * If `true`, the TextArea prevents the text from ever going over the max length.
+     * If `false`, the TextArea will allow the text to go over the max length, but it will add an error look tot he character count.
+     * @default true
+     */
+    restrictMaxLength?: boolean;
+    /**
+     * The resize mode value of the TextArea. It's equivalent to the CSS resize property.
+     * @default "none"
+     */
+    resizeMode?: ResponsiveProp<ResizeMode>;
+    /**
+     * A ref for the HTML textarea element.
+     */
+    inputRef?: MutableRefObject<HTMLTextAreaElement>;
+}
+/**
+ * A textarea field allows a user to enter a plain text value with a keyboard.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalTextAreaCssSelector, type ResizeMode, _TextArea as TextArea, type TextAreaProps };

package/dist/inputs/src/TextArea.js

@@ -0,0 +1,23 @@
+export { GlobalTextAreaCssSelector, _TextArea as TextArea } from '../../chunk-HCRWIU7V.js';
+import '../../chunk-IU6XMS2X.js';
+import '../../chunk-Z57VHYOF.js';
+import '../../chunk-MHQZXLKW.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-PQXVL3YJ.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-RWAVMW7T.js';
+import '../../chunk-Q63YLWI6.js';
+import '../../chunk-6BFSSZCY.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-F4H76S4H.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-HZKFQ33E.js';
+import '../../chunk-CEUQHDEQ.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-FAE27DLF.js';
+import '../../chunk-XT2MZWEV.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/inputs/src/TextAreaContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TextAreaProps } from './TextArea.js';
+import '@hopper-ui/styled-system';
+
+declare const TextAreaContext: react.Context<ContextValue<TextAreaProps, HTMLDivElement>>;
+
+export { TextAreaContext };

package/dist/inputs/src/TextAreaContext.js

@@ -0,0 +1,2 @@
+export { TextAreaContext } from '../../chunk-MHQZXLKW.js';
+import '../../chunk-JSBRDJBE.js';