@gnist/design-system 0.0.6

package/dist/components/inputs/textFields/TextArea.cjs

@@ -0,0 +1,73 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/typography/index.cjs");
+const React = require("react");
+const classNames = require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const dynamic = require("@vanilla-extract/dynamic");
+const iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
+const inputField_css = require("../shared-styles/inputField.css.cjs");
+const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
+const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
+const suffixPrefix_css = require("../shared-styles/suffixPrefix.css.cjs");
+const shared = require("../shared.cjs");
+const textArea_css = require("./textArea.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const TextArea = React.forwardRef(function TextArea2({ counterText, visibleLines: visibleLinesProp, ...props }, ref) {
+  var _a, _b;
+  const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
+  const { inputProps } = shared.getInputFieldProps(props);
+  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+    placement: "left",
+    density: wrapperProps.density
+  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type,
+    fieldType: "textArea"
+  }), style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.visibleLines]: (visibleLinesProp ?? 4).toString()
+    })
+  }, children: [jsxRuntime.jsx("textarea", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
+      [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
+    })
+  }, onFocus: (event) => {
+    var _a2, _b2;
+    if ((_a2 = event.target.value) == null ? void 0 : _a2.length) {
+      window.requestAnimationFrame(() => event.target.select());
+    }
+    (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
+  } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value,
+    disabled: props.disabled
+  }), style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsxRuntime.jsx("span", { style: { position: "relative" }, children: props.label }) }), jsxRuntime.jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsxRuntime.jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixPrefix_css.suffixStyle, children: props.suffix }), props.trailingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms_css_js.atoms({ paddingLeft: "xxs" }) })] }), counterText && jsxRuntime.jsx("span", { "aria-hidden": true, className: textArea_css.wordCounterStyle, children: counterText })] }), props.trailingIcon && shared.isClickableIcon(props.trailingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+    placement: "right",
+    density: wrapperProps.density
+  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+});
+const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
+const characterCount = (value, max) => `${value.trim().length}/${max}`;
+exports.TextArea = TextArea;
+exports.characterCount = characterCount;
+exports.wordCount = wordCount;

package/dist/components/inputs/textFields/TextArea.d.ts

@@ -0,0 +1,47 @@
+import { TextareaHTMLAttributes } from "react";
+import { TextInputProps } from "../shared.js";
+export type TextAreaProps = TextInputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "value"> & {
+    /**
+     * Text which shows e.g. a word or character count.
+     * `wordCount` and `characterCount` functions are available to generate this text.
+     *
+     * Accessibility note: The counter is hidden from screen readers, as live updates to the count tend to be "cut off"
+     * by the word being typed. If there is a max count it should also be communicated through helper text and
+     * validation.
+     */
+    counterText?: string;
+    /**
+     * Number of lines that should be visible without scrolling
+     * @default 4
+     */
+    visibleLines?: number;
+};
+/**
+Text areas are fixed-height fields that are taller than text fields and wrap overflow text onto a new line.
+They scroll vertically when the cursor reaches the bottom of the field.
+
+The large initial size indicates that longer responses are possible and encouraged.
+These should be used instead of multi-line fields on the web.
+
+_Accessibility note:_ The leading/trailing icon and counter text will not be read by screen readers.
+If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
+*/
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextInputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "placeholder"> & {
+    /**
+     * Text which shows e.g. a word or character count.
+     * `wordCount` and `characterCount` functions are available to generate this text.
+     *
+     * Accessibility note: The counter is hidden from screen readers, as live updates to the count tend to be "cut off"
+     * by the word being typed. If there is a max count it should also be communicated through helper text and
+     * validation.
+     */
+    counterText?: string;
+    /**
+     * Number of lines that should be visible without scrolling
+     * @default 4
+     */
+    visibleLines?: number;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const wordCount: (value: string, max: number) => string;
+export declare const characterCount: (value: string, max: number) => string;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/inputs/textFields/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN;;;;;;;;;EASE;AACF,eAAO,MAAM,QAAQ;IA1Bb;;;;;;;OAOG;kBACW,MAAM;IACpB;;;OAGG;mBACY,MAAM;mDA8J3B,CAAC;AAEH,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}

package/dist/components/inputs/textFields/TextArea.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../utilities/layout/Row.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import "../../../foundation/typography/index.js";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
+import { wrapperStyle, inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper } from "../shared-styles/inputField.css.js";
+import { visibleLines, preInputWidth, postInputWidth } from "../shared-styles/inputFieldConstants.css.js";
+import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
+import { useInputFieldLogic, isClickableIcon, getInputFieldProps } from "../shared.js";
+import { wordCounterStyle } from "./textArea.css.js";
+const TextArea = forwardRef(function TextArea2({ counterText, visibleLines: visibleLinesProp, ...props }, ref) {
+  var _a, _b;
+  const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
+  const { inputProps } = getInputFieldProps(props);
+  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+    placement: "left",
+    density: wrapperProps.density
+  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type,
+    fieldType: "textArea"
+  }), style: {
+    ...assignInlineVars({
+      [visibleLines]: (visibleLinesProp ?? 4).toString()
+    })
+  }, children: [jsx("textarea", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: {
+    ...assignInlineVars({
+      [preInputWidth]: wrapperProps.preInputWidth,
+      [postInputWidth]: wrapperProps.postInputWidth
+    })
+  }, onFocus: (event) => {
+    var _a2, _b2;
+    if ((_a2 = event.target.value) == null ? void 0 : _a2.length) {
+      window.requestAnimationFrame(() => event.target.select());
+    }
+    (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
+  } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value,
+    disabled: props.disabled
+  }), style: {
+    ...assignInlineVars({
+      [preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsx("span", { style: { position: "relative" }, children: props.label }) }), jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixStyle, children: props.suffix }), props.trailingIcon && jsx(Icon, { icon: isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms({ paddingLeft: "xxs" }) })] }), counterText && jsx("span", { "aria-hidden": true, className: wordCounterStyle, children: counterText })] }), props.trailingIcon && isClickableIcon(props.trailingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+    placement: "right",
+    density: wrapperProps.density
+  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+});
+const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
+const characterCount = (value, max) => `${value.trim().length}/${max}`;
+export {
+  TextArea,
+  characterCount,
+  wordCount
+};

package/dist/components/inputs/textFields/TextField.cjs

@@ -0,0 +1,59 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const dynamic = require("@vanilla-extract/dynamic");
+const classNames = require("classnames");
+const React = require("react");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
+const inputField_css = require("../shared-styles/inputField.css.cjs");
+const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
+const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
+const suffixPrefix_css = require("../shared-styles/suffixPrefix.css.cjs");
+const shared = require("../shared.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const TextField = React.forwardRef(function TextField2(props, ref) {
+  var _a, _b;
+  const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
+  const { inputProps } = shared.getInputFieldProps(props);
+  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+    placement: "left",
+    density: wrapperProps.density
+  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type
+  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
+    [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
+    [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
+  }), onFocus: (event) => {
+    var _a2, _b2;
+    if ((_a2 = event.target.value) == null ? void 0 : _a2.length) {
+      window.requestAnimationFrame(() => event.target.select());
+    }
+    (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
+  } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value || props.type === "date" || props.type === "time",
+    disabled: props.disabled
+  }), style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsxRuntime.jsx("span", { style: { position: "relative" }, children: props.label }) }), jsxRuntime.jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsxRuntime.jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixPrefix_css.suffixStyle, children: props.suffix }), props.trailingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms_css_js.atoms({ paddingLeft: "xxs" }) })] })] }), props.trailingIcon && shared.isClickableIcon(props.trailingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+    placement: "right",
+    density: wrapperProps.density
+  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+});
+exports.TextField = TextField;

package/dist/components/inputs/textFields/TextField.d.ts

@@ -0,0 +1,26 @@
+import { InputHTMLAttributes } from "react";
+import { TextInputProps } from "../shared.js";
+export type TextFieldProps = TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value" | "type"> & {
+    /**
+     * Input type
+     * @default text
+     */
+    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
+};
+/**
+A text field is an input that allows a user to write or edit text. Text fields typically appear in forms and dialogs.
+
+This single line variant displays only one line of text, and is used to allow the user to provide text input when the expected input is short. For longer input, use the multi-line text field or text area instead.
+
+In addition to the attributes listed here, it also accepts the [same attributes as the HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes).
+
+_Accessibility note:_ The leading/trailing icon and prefix/suffix text will not be read by screen readers. If they are used, you must ensure the label and helper text in combination adequately describe the field without them.
+*/
+export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "placeholder"> & {
+    /**
+     * Input type
+     * @default text
+     */
+    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
+} & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/components/inputs/textFields/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN;;;;;;;;EAQE;AACF,eAAO,MAAM,SAAS;IAzBd;;;OAGG;WAEG,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM;mDAoJlB,CAAC"}

package/dist/components/inputs/textFields/TextField.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../utilities/layout/Row.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
+import { wrapperStyle, inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper } from "../shared-styles/inputField.css.js";
+import { preInputWidth, postInputWidth } from "../shared-styles/inputFieldConstants.css.js";
+import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
+import { useInputFieldLogic, isClickableIcon, getInputFieldProps } from "../shared.js";
+const TextField = forwardRef(function TextField2(props, ref) {
+  var _a, _b;
+  const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
+  const { inputProps } = getInputFieldProps(props);
+  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+    placement: "left",
+    density: wrapperProps.density
+  }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type
+  }), children: [jsx("input", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
+    [preInputWidth]: wrapperProps.preInputWidth,
+    [postInputWidth]: wrapperProps.postInputWidth
+  }), onFocus: (event) => {
+    var _a2, _b2;
+    if ((_a2 = event.target.value) == null ? void 0 : _a2.length) {
+      window.requestAnimationFrame(() => event.target.select());
+    }
+    (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
+  } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value || props.type === "date" || props.type === "time",
+    disabled: props.disabled
+  }), style: {
+    ...assignInlineVars({
+      [preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsx("span", { style: { position: "relative" }, children: props.label }) }), jsx("span", { style: { flexGrow: "1" } }), props.suffix && jsx("span", { ref: contentProps.suffixRef, "aria-hidden": true, className: suffixStyle, children: props.suffix }), props.trailingIcon && jsx(Icon, { icon: isClickableIcon(props.trailingIcon) ? props.trailingIcon.icon : props.trailingIcon, className: atoms({ paddingLeft: "xxs" }) })] })] }), props.trailingIcon && isClickableIcon(props.trailingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+    placement: "right",
+    density: wrapperProps.density
+  }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
+});
+export {
+  TextField
+};

package/dist/components/inputs/textFields/index.cjs

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TextArea = require("./TextArea.cjs");
+const TextField = require("./TextField.cjs");
+exports.TextArea = TextArea.TextArea;
+exports.characterCount = TextArea.characterCount;
+exports.wordCount = TextArea.wordCount;
+exports.TextField = TextField.TextField;

package/dist/components/inputs/textFields/index.d.ts

@@ -0,0 +1,3 @@
+export { TextArea, characterCount, wordCount } from "./TextArea.js";
+export { TextField } from "./TextField.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/textFields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/inputs/textFields/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { TextArea, characterCount, wordCount } from "./TextArea.js";
+import { TextField } from "./TextField.js";
+export {
+  TextArea,
+  TextField,
+  characterCount,
+  wordCount
+};

package/dist/components/inputs/textFields/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/inputs/textFields/shared.d.ts

@@ -0,0 +1,40 @@
+import { InputFieldValidity } from "../../../building-blocks/inputs/types.js";
+export interface CommonInputProps<TVal> extends Label {
+    /**
+     * The field's value
+     */
+    value?: TVal;
+    /**
+     * Id of the field, necessary for correct accessibility.
+     *
+     * If not set, defaults to `label` with whitespace removed.
+     */
+    id?: string;
+    /**
+     * Disabled state of the field
+     */
+    disabled?: boolean;
+}
+export interface Label {
+    /**
+     * The displayed name of the field
+     */
+    label: string;
+}
+export interface Validity<TOptions extends {
+    errorMsgRequired: boolean;
+} = {
+    errorMsgRequired: true;
+}> {
+    /**
+     * Validation state of the contents of the field
+     */
+    validity?: InputFieldValidity<TOptions>;
+}
+export interface HelperText {
+    /**
+     * Helper text displayed below the field
+     */
+    helperText?: string;
+}
+//# sourceMappingURL=shared.d.ts.map

package/dist/components/inputs/textFields/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iDAA6D;AAE1F,MAAM,WAAW,gBAAgB,CAAC,IAAI,CAAE,SAAQ,KAAK;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ,CACrB,QAAQ,SAAS;IAAE,gBAAgB,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,gBAAgB,EAAE,IAAI,CAAA;CAAE;IAE3E;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/inputs/textFields/textArea.css.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const wordCounterStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    backgroundColor: "surface",
+    color: "text-variant",
+    justifyContent: "flex-end",
+    typography: "detail-medium",
+    paddingBottom: "xxs",
+    paddingTop: "base"
+  }),
+  {
+    zIndex: 2,
+    position: "absolute",
+    alignItems: "baseline",
+    boxSizing: "border-box",
+    bottom: 0,
+    left: tokens_css_js.tokens.spacing.s,
+    right: tokens_css_js.tokens.spacing.s,
+    overflow: "hidden"
+  }
+]);
+exports.wordCounterStyle = wordCounterStyle;

package/dist/components/inputs/textFields/textArea.css.d.ts

@@ -0,0 +1,2 @@
+export declare const wordCounterStyle: string;
+//# sourceMappingURL=textArea.css.d.ts.map

package/dist/components/inputs/textFields/textArea.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textArea.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/textArea.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAoB3B,CAAC"}

package/dist/components/inputs/textFields/textArea.css.js

@@ -0,0 +1,28 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+const wordCounterStyle = style([
+  atoms({
+    display: "flex",
+    backgroundColor: "surface",
+    color: "text-variant",
+    justifyContent: "flex-end",
+    typography: "detail-medium",
+    paddingBottom: "xxs",
+    paddingTop: "base"
+  }),
+  {
+    zIndex: 2,
+    position: "absolute",
+    alignItems: "baseline",
+    boxSizing: "border-box",
+    bottom: 0,
+    left: tokens.spacing.s,
+    right: tokens.spacing.s,
+    overflow: "hidden"
+  }
+]);
+export {
+  wordCounterStyle
+};

package/dist/components/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/progress/Spinner.cjs

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const componentUtils = require("@gnist/component-utils");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const spinner_css = require("./spinner.css.cjs");
+const SpinnerComponent = ({ textDescription, ...props }) => {
+  const borderColor = `${tokens_css_js.tokens.color[props.backgroundColor ?? "on-disabled"]}`;
+  return jsxRuntime.jsx("div", { ...props, "aria-label": textDescription, style: {
+    height: props.diameter,
+    width: props.diameter,
+    borderColor: `${borderColor} ${borderColor} transparent ${borderColor}`
+  } });
+};
+const Spinner = componentUtils.component("Spinner", spinner_css.spinnerRecipe, SpinnerComponent);
+exports.Spinner = Spinner;

package/dist/components/progress/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { tokens } from "@gnist/themes/tokens.css.js";
+interface SpinnerProps {
+    diameter: string;
+    textDescription: string;
+    backgroundColor?: keyof typeof tokens.color;
+}
+export declare const Spinner: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, ({ textDescription, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/progress/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/progress/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGrD,UAAU,YAAY;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAC/C;AAmBD,eAAO,MAAM,OAAO,iHAjBqC,YAAY,6CAiBO,CAAC"}

package/dist/components/progress/Spinner.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { component } from "@gnist/component-utils";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { spinnerRecipe } from "./spinner.css.js";
+const SpinnerComponent = ({ textDescription, ...props }) => {
+  const borderColor = `${tokens.color[props.backgroundColor ?? "on-disabled"]}`;
+  return jsx("div", { ...props, "aria-label": textDescription, style: {
+    height: props.diameter,
+    width: props.diameter,
+    borderColor: `${borderColor} ${borderColor} transparent ${borderColor}`
+  } });
+};
+const Spinner = component("Spinner", spinnerRecipe, SpinnerComponent);
+export {
+  Spinner
+};

package/dist/components/progress/index.cjs

@@ -0,0 +1,5 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Spinner = require("./Spinner.cjs");
+exports.Spinner = Spinner.Spinner;

package/dist/components/progress/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/progress/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Spinner } from "./Spinner.js";
+export {
+  Spinner
+};

package/dist/components/progress/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/progress/spinner.css.cjs

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const css = require("@vanilla-extract/css");
+const rotate360 = css.keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+const fadeIn = css.keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+const spinnerRecipe = css.style([
+  atoms_css_js.atoms({ borderWidth: "medium" }),
+  {
+    position: "absolute",
+    borderRadius: "50%",
+    background: "transparent",
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderBottomColor: "transparent",
+    animation: `${rotate360} 1s cubic-bezier(0.4, 0.5, 0.7, 0.8) infinite, ${fadeIn} ease 0.5s 1`,
+    animationFillMode: "forwards"
+  }
+]);
+exports.spinnerRecipe = spinnerRecipe;

package/dist/components/progress/spinner.css.d.ts

@@ -0,0 +1,2 @@
+export declare const spinnerRecipe: string;
+//# sourceMappingURL=spinner.css.d.ts.map

package/dist/components/progress/spinner.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,QAYxB,CAAC"}