@hopper-ui/components 1.0.13 → 1.1.0

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { GlobalIconListCssSelector, IconList, IconListProps } from './IconList/s
 export { IconListContext } from './IconList/src/IconListContext.js';
 export { GlobalInputGroupCssSelector, InputGroup, InputGroupProps } from './inputs/src/InputGroup.js';
 export { InputGroupContext } from './inputs/src/InputGroupContext.js';
+export { GlobalTextAreaCssSelector, ResizeMode, TextArea, TextAreaProps } from './inputs/src/TextArea.js';
+export { TextAreaContext } from './inputs/src/TextAreaContext.js';
 export { GlobalTextFieldCssSelector, TextField, TextFieldProps } from './inputs/src/TextField.js';
 export { TextFieldContext } from './inputs/src/TextFieldContext.js';
 export { GlobalPasswordFieldCssSelector, PasswordField, PasswordFieldProps } from './inputs/src/PasswordField.js';
@@ -97,8 +99,10 @@ export { Size, SizeAdapter } from './utils/src/sizeAdapter.js';
 export { BaseComponentProps, DOMProps, InteractionProps, RenderProps, RenderPropsHookOptions, StyleProps, StyleRenderProps } from './utils/src/types.js';
 export { isTextOnlyChildren } from './utils/src/isTextOnlyChildren.js';
 export { SlotProvider, SlotProviderProps } from './utils/src/SlotProvider.js';
+export { useFontFaceReady } from './utils/src/useFontFaceReady.js';
 export { Scale, useScale } from './utils/src/useScale.js';
 export { useSlot } from './utils/src/useSlot.js';
+export { useTruncatedText } from './utils/src/useTruncatedText.js';
 export { ClearContainerSlots, ClearProviders, ClearProvidersProps } from './utils/src/ClearSlots.js';
 export { useRenderProps } from './utils/src/useRenderProps.js';
 export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './utils/src/assertion.js';

package/dist/index.js

@@ -1,107 +1,111 @@
-export { Collection, GlobalPopoverCssSelector, GlobalTagCssSelector, _Popover as Popover, _Tag as Tag, $f86e6c1ec7da6ebb$export$bc3384a35de93d66 as useAsyncList } from './chunk-B42AJF74.js';
-export { PopoverContext } from './chunk-SC6ZK5ON.js';
+export { Collection, GlobalPopoverCssSelector, GlobalTagCssSelector, _Popover as Popover, _Tag as Tag, $f86e6c1ec7da6ebb$export$bc3384a35de93d66 as useAsyncList } from './chunk-BXPZ6HPC.js';
 export { PopoverTrigger } from './chunk-I4VPBQI7.js';
-export { GlobalTagGroupCssSelector, _TagGroup as TagGroup } from './chunk-MVWQVBTK.js';
+export { PopoverContext } from './chunk-SC6ZK5ON.js';
+export { GlobalTagGroupCssSelector, _TagGroup as TagGroup } from './chunk-CXCOSGTO.js';
 export { TagContext } from './chunk-EWMWQ2MC.js';
 export { TagGroupContext } from './chunk-LCAS3YQV.js';
 export { GlobalTagListCssSelector, _TagList as TagList } from './chunk-WWRB4K4M.js';
 export { TagListContext } from './chunk-XLKYXKWE.js';
-export { GlobalSwitchCssSelector, _Switch as Switch } from './chunk-QTV45NTY.js';
-export { GlobalSwitchFieldCssSelector, _SwitchField as SwitchField } from './chunk-IEE2HHGR.js';
+export { GlobalSwitchCssSelector, _Switch as Switch } from './chunk-KA6KVIVV.js';
+export { GlobalSwitchFieldCssSelector, _SwitchField as SwitchField } from './chunk-TKB5Q2WX.js';
 export { SwitchContext } from './chunk-YHBJAXUY.js';
 export { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+export { _Inline as Inline } from './chunk-Y7HUXUHX.js';
+export { _Stack as Stack } from './chunk-D6UTDI2K.js';
 export { fitContent, minmax, repeat } from './chunk-GFHBDUJD.js';
-export { GlobalRadioFieldCssSelector, _RadioField as RadioField } from './chunk-CXIH6I5X.js';
+export { GlobalRadioFieldCssSelector, _RadioField as RadioField } from './chunk-BLQ72S4U.js';
 export { _Content as Content, GlobalContentCssSelector } from './chunk-GXBVNCVP.js';
 export { ContentContext } from './chunk-IXB2WK56.js';
+export { _Flex as Flex } from './chunk-TVFC2MJ4.js';
 export { _Footer as Footer, GlobalFooterCssSelector } from './chunk-AQITZWYM.js';
 export { FooterContext } from './chunk-I67NHYK4.js';
 export { _Grid as Grid } from './chunk-N77LTZ4U.js';
-export { _Inline as Inline } from './chunk-Y7HUXUHX.js';
-export { _Stack as Stack } from './chunk-D6UTDI2K.js';
-export { _Flex as Flex } from './chunk-TVFC2MJ4.js';
-export { GlobalPasswordFieldCssSelector, _PasswordField as PasswordField } from './chunk-M4IVTAHY.js';
+export { GlobalPasswordFieldCssSelector, _PasswordField as PasswordField } from './chunk-GCJT5PQ4.js';
 export { PasswordFieldContext } from './chunk-QW45G6K4.js';
-export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from './chunk-TNVYVDLF.js';
+export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from './chunk-6K6W32Q7.js';
 export { SearchFieldContext } from './chunk-3NKF5TPD.js';
-export { GlobalTextFieldCssSelector, _TextField as TextField } from './chunk-44KY7MFF.js';
+export { GlobalTextAreaCssSelector, _TextArea as TextArea } from './chunk-XGI4LDIF.js';
+export { useFontFaceReady } from './chunk-IU6XMS2X.js';
+export { useTruncatedText } from './chunk-Z57VHYOF.js';
+export { TextAreaContext } from './chunk-MHQZXLKW.js';
+export { GlobalTextFieldCssSelector, _TextField as TextField } from './chunk-A7HLXFSP.js';
 export { TextFieldContext } from './chunk-O4XPUINW.js';
 export { _CheckboxList as CheckboxList, GlobalCheckboxListCssSelector } from './chunk-3LRBUQC2.js';
 export { useScale } from './chunk-MTDFS4CZ.js';
 import './chunk-LJXTJRSB.js';
-export { GlobalLabelCssSelector, _Label as Label } from './chunk-I2YZLGRE.js';
-export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading as Heading } from './chunk-ERE2XRQA.js';
+export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading as Heading } from './chunk-GXFFLWNF.js';
 export { HeadingContext } from './chunk-TXZ6BMFR.js';
-export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from './chunk-CCIVRIKG.js';
+export { GlobalLabelCssSelector, _Label as Label } from './chunk-7VS566A2.js';
+export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from './chunk-YRUBXLBX.js';
 export { InputGroupContext } from './chunk-6BFSSZCY.js';
-export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-WCLGYVXV.js';
-export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-2MUGMKNO.js';
+export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-UMD6RDUS.js';
+export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-FQO2QRSC.js';
 export { CheckboxListContext } from './chunk-WDUQUPTE.js';
 export { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 export { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
-export { _Button as Button, GlobalButtonCssSelector } from './chunk-723W7LGB.js';
+export { _Button as Button, GlobalButtonCssSelector } from './chunk-6CDXS774.js';
 export { useSlot } from './chunk-H5YTU3U7.js';
-export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-JLUFMLGV.js';
+export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-BQZQTNI6.js';
 export { ButtonContext } from './chunk-WMTWFKKP.js';
 export { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
-export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from './chunk-KARK64JC.js';
+export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from './chunk-SR3GAXY5.js';
 export { ClearButtonContext } from './chunk-DXVKHP4V.js';
-export { _EmbeddedButton as EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-ZXDN2IRM.js';
+export { _EmbeddedButton as EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-TGXZJJJA.js';
 export { EmbeddedButtonContext } from './chunk-O7IJYNVQ.js';
 export { GlobalSectionCssSelector, _Section as Section } from './chunk-O5PTD6IN.js';
-export { GlobalSpinnerCssSelector, _Spinner as Spinner } from './chunk-AMXRADUV.js';
+export { GlobalSpinnerCssSelector, _Spinner as Spinner } from './chunk-WAUGFWZA.js';
 export { SpinnerContext } from './chunk-4ZYV2XLW.js';
-export { GlobalLinkCssSelector, _Link as Link } from './chunk-LDORNYHF.js';
+export { GlobalLinkCssSelector, _Link as Link } from './chunk-I6OII2RA.js';
 export { LinkContext } from './chunk-4VVNSXIB.js';
-export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox as ListBox } from './chunk-CS2RAWQB.js';
+export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox as ListBox } from './chunk-XHZ4R2MB.js';
 export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './chunk-TIPN4VYD.js';
 import './chunk-JTNMFPM4.js';
 export { SectionContext } from './chunk-5H5AZJPQ.js';
 export { ListBoxContext } from './chunk-UIEP5BA5.js';
-export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem } from './chunk-SW7LHIQ2.js';
-export { GlobalRadioCssSelector, _Radio as Radio } from './chunk-SSMGKQ27.js';
-export { GlobalRadioGroupCssSelector, _RadioGroup as RadioGroup } from './chunk-NHM3MQI3.js';
-export { RadioContext } from './chunk-FU5CCPLP.js';
-export { RadioFieldContext } from './chunk-DGLAGYBD.js';
-export { RadioGroupContext } from './chunk-5MBJWRZD.js';
+export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem } from './chunk-RD6VCI72.js';
 export { GlobalRadioListCssSelector, _RadioList as RadioList } from './chunk-NKHMUPAP.js';
+export { GlobalRadioCssSelector, _Radio as Radio } from './chunk-TMWNNF4J.js';
+export { GlobalRadioGroupCssSelector, _RadioGroup as RadioGroup } from './chunk-VVY3ONWS.js';
+export { RadioGroupContext } from './chunk-5MBJWRZD.js';
 export { RadioListContext } from './chunk-A7TZHALP.js';
-export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from './chunk-W34MMJ2L.js';
+export { RadioContext } from './chunk-FU5CCPLP.js';
+export { RadioFieldContext } from './chunk-DGLAGYBD.js';
+export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from './chunk-ZNGSZW7M.js';
 export { LabelContext } from './chunk-QCA3ZR56.js';
 export { CheckboxContext } from './chunk-2EAZPH3M.js';
 import './chunk-YEYNRBMQ.js';
 export { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 export { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import './chunk-THQZBL4T.js';
+import './chunk-AT7ZY6GA.js';
 import './chunk-OKZYR4RF.js';
-export { GlobalHelperMessageCssSelector, _HelperMessage as HelperMessage } from './chunk-RGGVZKNN.js';
+export { GlobalHelperMessageCssSelector, _HelperMessage as HelperMessage } from './chunk-P7UUQGGF.js';
 export { HelperMessageContext } from './chunk-HZKFQ33E.js';
 export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from './chunk-NMKBUGSO.js';
-export { GlobalIconListCssSelector, _IconList as IconList } from './chunk-JN2FF2IX.js';
-export { _ErrorMessage as ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-UPR32DV5.js';
+export { GlobalIconListCssSelector, _IconList as IconList } from './chunk-BGRKDTCG.js';
+export { _ErrorMessage as ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-Q52NUBN7.js';
 export { useRenderProps } from './chunk-NH3IVMXB.js';
 export { ErrorMessageContext } from './chunk-FAE27DLF.js';
 export { GlobalHeaderCssSelector, _Header as Header } from './chunk-L5A2UTQV.js';
 export { HeaderContext } from './chunk-7JOGKC3W.js';
-export { _Badge as Badge, GlobalBadgeCssSelector } from './chunk-ESRYOELK.js';
-export { GlobalOverlineTextCssSelector, _OverlineText as OverlineText } from './chunk-5WWMVQI4.js';
-export { OverlineTextContext } from './chunk-WPNVVGFW.js';
-export { BadgeContext } from './chunk-CQDLZ42T.js';
-export { _Chip as Chip, GlobalChipCssSelector } from './chunk-RXZQB35O.js';
+export { _Chip as Chip, GlobalChipCssSelector } from './chunk-OETAIO6N.js';
 export { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 export { IconListContext } from './chunk-DHVVYSLB.js';
 export { ChipContext } from './chunk-632B5YBQ.js';
-export { _Divider as Divider, GlobalDividerCssSelector } from './chunk-DZHRELLA.js';
+export { _Badge as Badge, GlobalBadgeCssSelector } from './chunk-QY6U3R3W.js';
+export { GlobalOverlineTextCssSelector, _OverlineText as OverlineText } from './chunk-YE7RARJB.js';
+export { OverlineTextContext } from './chunk-WPNVVGFW.js';
+export { BadgeContext } from './chunk-CQDLZ42T.js';
+export { _Divider as Divider, GlobalDividerCssSelector } from './chunk-VFYGHX3N.js';
 export { DividerContext } from './chunk-FYIHMKHI.js';
-export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-GH5LAOQU.js';
-export { _Avatar as Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-UGHMX7QX.js';
+export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-TVV4RMFR.js';
+export { _Avatar as Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-PQV24MM4.js';
 import './chunk-NS3XVOQ7.js';
-export { GlobalTextCssSelector, _Text as Text } from './chunk-PAYZGXTT.js';
+export { GlobalTextCssSelector, _Text as Text } from './chunk-6MSRPPI6.js';
 export { TextContext } from './chunk-X6SER3TZ.js';
 export { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
-export { _DeletedAvatar as DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-SNWJJ3FF.js';
+export { _DeletedAvatar as DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-ICDMJUNE.js';
 export { AvatarContext } from './chunk-AES7QBQE.js';
-export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage as RichIconAvatarImage } from './chunk-AYPCLDGU.js';
+export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage as RichIconAvatarImage } from './chunk-6PH4IIEW.js';
 export { SlotProvider } from './chunk-M36KANKC.js';
 export { cssModule } from './chunk-KVDXQMWI.js';
 export { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';

package/dist/inputs/src/InputGroup.css

@@ -1,18 +1,33 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
-.InputGroup-module__hop-InputGroup___yPMIO {
+.InputGroup-module__hop-InputGroup___MpyEZ {
   --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);
@@ -23,6 +38,8 @@
   --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;
@@ -31,83 +48,105 @@
   --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: fit-content;
+  --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);
-}
-:where(.InputGroup-module__hop-InputGroup___yPMIO) {
+  --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: inline-flex;
-  gap: var(--hop-InputGroup-gap);
-  align-items: center;
+  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-inline: var(--hop-InputGroup-padding-inline);
+  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___SDrjN {
-  --inline-size: 100% ;
+.InputGroup-module__hop-InputGroup--fluid___nXqi6 {
+  --inline-size: 100%;
+  --input-inline-size: 100%;
 }
-.InputGroup-module__hop-InputGroup--sm___uk-A0 {
+.InputGroup-module__hop-InputGroup--sm___tvLAO {
   --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___yPMIO[data-hovered] {
+.InputGroup-module__hop-InputGroup___MpyEZ[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___MpyEZ[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___MpyEZ[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___yPMIO[data-focus-within] {
+.InputGroup-module__hop-InputGroup___MpyEZ[data-focus-within] {
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-invalid] {
+.InputGroup-module__hop-InputGroup___MpyEZ[data-invalid] {
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-disabled] {
+.InputGroup-module__hop-InputGroup___MpyEZ[data-disabled] {
   --background: var(--hop-InputGroup-background-disabled);
-  --border: 0.0625rem solid var(--hop-InputGroup-border-color-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___aerYh {
-  --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-placeholder-color: var(--hop-InputGroup-placeholder-color);
+.InputGroup-module__hop-InputGroup__input___lecEl,
+.InputGroup-module__hop-InputGroup__textarea___e89Dj {
   flex: 1 1 auto;
+  box-sizing: border-box;
   inline-size: var(--input-inline-size);
   min-inline-size: 0;
-  block-size: var(--input-block-size);
-  padding: 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(--hop-InputGroup-input-color);
+  color: var(--input-color);
   background: transparent;
   border: none;
   outline: none;
 }
-.InputGroup-module__hop-InputGroup--fluid___SDrjN .InputGroup-module__hop-InputGroup__input___aerYh {
-  --input-inline-size: 100%;
+.InputGroup-module__hop-InputGroup__input___lecEl {
+  block-size: var(--input-block-size);
+  padding: var(--hop-InputGroup-input-padding);
 }
-.InputGroup-module__hop-InputGroup--sm___uk-A0 .InputGroup-module__hop-InputGroup__input___aerYh {
-  --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__textarea___e89Dj {
+  padding: var(--hop-InputGroup-textarea-padding);
 }
-.InputGroup-module__hop-InputGroup__input___aerYh::placeholder {
+.InputGroup-module__hop-InputGroup__input___lecEl::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);
 }
-.InputGroup-module__hop-InputGroup__input___aerYh[data-disabled]::placeholder {
-  --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
-}

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

@@ -13,7 +13,15 @@ interface InputGroupProps extends StyledComponentProps<GroupProps> {
      * Whether or not the button takes up the width of its container.
      */
     isFluid?: ResponsiveProp<boolean>;
+    /**
+     * The class name of the input element.
+     */
     inputClassName?: string;
+    /**
+     * The type of the input element.
+     * @default "text"
+     */
+    inputType?: "text" | "password" | "search" | "number" | "textarea";
 }
 /**
  * An input group combines an input component with addons.

package/dist/inputs/src/InputGroup.js

@@ -1,4 +1,4 @@
-export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from '../../chunk-CCIVRIKG.js';
+export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from '../../chunk-YRUBXLBX.js';
 import '../../chunk-6BFSSZCY.js';
 import '../../chunk-65JPI4FL.js';
 import '../../chunk-M36KANKC.js';