@gnist/design-system 0.0.6

package/dist/components/inputs/shared-styles/labelStyles.css.d.ts

@@ -0,0 +1,65 @@
+export declare const labelStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        default: {
+            selectors: {
+                [x: string]: {
+                    top: string;
+                };
+            };
+        };
+        compact: {
+            selectors: {
+                [x: string]: {
+                    top: string;
+                };
+            };
+        };
+    };
+    validityType: {
+        error: {
+            selectors: {
+                [x: string]: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        success: {
+            selectors: {
+                [x: string]: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        none: {};
+    };
+    disabled: {
+        true: string;
+        false: {};
+    };
+    isElevated: {
+        true: {
+            selectors: {
+                "&::before": {
+                    readonly position: "absolute";
+                    readonly backgroundColor: string;
+                    readonly content: "";
+                    readonly display: "block";
+                    readonly transitionProperty: "top";
+                    readonly transitionDuration: "250ms";
+                    readonly left: 0;
+                    readonly right: 0;
+                    readonly top: string;
+                    readonly height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            color: string;
+            lineHeight: "1em";
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            left: string;
+        };
+        false: {};
+    };
+}>;
+//# sourceMappingURL=labelStyles.css.d.ts.map

package/dist/components/inputs/shared-styles/labelStyles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelStyles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/labelStyles.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IrB,CAAC"}

package/dist/components/inputs/shared-styles/labelStyles.css.js

@@ -0,0 +1,170 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+import { inputFieldStyle } from "./inputField.css.js";
+import { transitionTime, preInputWidth } from "./inputFieldConstants.css.js";
+const elevatedLabel = (color) => ({
+  color: color || tokens.color["text-variant"],
+  lineHeight: "1em",
+  fontSize: tokens.typeface.size.base,
+  // TODO: check font size. replaced xs with 0.75rem
+  paddingLeft: tokens.spacing.base,
+  paddingRight: tokens.spacing.base,
+  left: calc(tokens.spacing.base).multiply(-1).subtract(preInputWidth).toString()
+});
+const elevatedLabelBackground = (backgroundColor) => ({
+  position: "absolute",
+  backgroundColor: backgroundColor || tokens.color.surface,
+  content: "",
+  display: "block",
+  transitionProperty: "top",
+  transitionDuration: transitionTime,
+  left: 0,
+  right: 0,
+  top: calc(tokens.spacing.xs).divide(2).toString(),
+  height: tokens.stroke.medium
+});
+const labelStyle = recipe({
+  base: {
+    zIndex: 10,
+    position: "relative",
+    transitionProperty: "color, top, left, font-size, padding",
+    transitionDuration: transitionTime,
+    top: 0,
+    left: 0,
+    cursor: "text",
+    pointerEvents: "none",
+    color: tokens.color["text-variant"],
+    selectors: {
+      [`${inputFieldStyle}:focus + span &`]: elevatedLabel(tokens.color.interactive),
+      [`${inputFieldStyle}:focus-within + span &`]: elevatedLabel(tokens.color.interactive),
+      [`${inputFieldStyle}:focus + span &::before`]: elevatedLabelBackground("")
+    }
+  },
+  variants: {
+    density: {
+      default: {
+        selectors: {
+          [`${inputFieldStyle}:focus + span &`]: {
+            top: calc(tokens.spacing.m).multiply(-1).toString()
+          }
+        }
+      },
+      compact: {
+        selectors: {
+          [`${inputFieldStyle}:focus + span &`]: {
+            top: calc(tokens.spacing.s).multiply(-1).toString()
+          }
+        }
+      }
+    },
+    validityType: {
+      error: {
+        selectors: {
+          [`${inputFieldStyle}:focus + span &`]: {
+            color: tokens.color.error
+          }
+        }
+      },
+      success: {
+        selectors: {
+          [`${inputFieldStyle}:focus + span &`]: {
+            color: tokens.color.success
+          }
+        }
+      },
+      none: {}
+    },
+    disabled: {
+      true: atoms({ color: "on-disabled" }),
+      false: {}
+    },
+    isElevated: {
+      true: {
+        ...elevatedLabel(),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { density: "default", isElevated: true },
+      style: {
+        top: calc(tokens.spacing.m).multiply(-1).toString()
+      }
+    },
+    {
+      variants: { density: "compact", isElevated: true },
+      style: {
+        top: calc(tokens.spacing.s).multiply(-1).toString()
+      }
+    },
+    {
+      variants: { disabled: true, isElevated: true },
+      style: {
+        ...elevatedLabel(tokens.color["on-disabled"]),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens.color.disabled)
+        }
+      }
+    },
+    {
+      variants: {
+        disabled: true,
+        isElevated: true,
+        validityType: "error"
+      },
+      style: {
+        ...elevatedLabel(tokens.color.error),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens.color.disabled)
+        }
+      }
+    },
+    {
+      variants: { validityType: "error", isElevated: true },
+      style: {
+        ...elevatedLabel(tokens.color.error),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      }
+    },
+    {
+      variants: { validityType: "success", isElevated: true },
+      style: {
+        ...elevatedLabel(tokens.color.success),
+        selectors: {
+          "&::before": elevatedLabelBackground("")
+        }
+      }
+    },
+    {
+      variants: {
+        disabled: true,
+        validityType: "success",
+        isElevated: true
+      },
+      style: {
+        ...elevatedLabel(tokens.color.success),
+        selectors: {
+          "&::before": elevatedLabelBackground(tokens.color.disabled)
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    density: "default",
+    validityType: "none",
+    isElevated: false,
+    disabled: false
+  }
+});
+export {
+  labelStyle
+};

package/dist/components/inputs/shared-styles/suffixPrefix.css.cjs

@@ -0,0 +1,13 @@
+"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 prefixStyle = css.style([
+  atoms_css_js.atoms({ color: "text-variant", paddingRight: "xxs" })
+]);
+const suffixStyle = css.style([
+  atoms_css_js.atoms({ color: "text-variant", paddingLeft: "xxs" })
+]);
+exports.prefixStyle = prefixStyle;
+exports.suffixStyle = suffixStyle;

package/dist/components/inputs/shared-styles/suffixPrefix.css.d.ts

@@ -0,0 +1,3 @@
+export declare const prefixStyle: string;
+export declare const suffixStyle: string;
+//# sourceMappingURL=suffixPrefix.css.d.ts.map

package/dist/components/inputs/shared-styles/suffixPrefix.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suffixPrefix.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/suffixPrefix.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC"}

package/dist/components/inputs/shared-styles/suffixPrefix.css.js

@@ -0,0 +1,13 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { style } from "@vanilla-extract/css";
+const prefixStyle = style([
+  atoms({ color: "text-variant", paddingRight: "xxs" })
+]);
+const suffixStyle = style([
+  atoms({ color: "text-variant", paddingLeft: "xxs" })
+]);
+export {
+  prefixStyle,
+  suffixStyle
+};

package/dist/components/inputs/shared.cjs

@@ -0,0 +1,119 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../../utilities/html/index.cjs");
+const React = require("react");
+function useIconAndExtraTextWidth(hasIcon) {
+  const iconWidth = hasIcon ? "var(--moller-spacing-xxs) + var(--moller-spacing-l)" : "0px";
+  const [textWidth, setTextWidth] = React.useState(0);
+  const textRef = (node) => {
+    var _a;
+    return setTextWidth(((_a = node == null ? void 0 : node.getBoundingClientRect()) == null ? void 0 : _a.width) ?? 0);
+  };
+  return {
+    textRef,
+    width: `calc(${textWidth}px + ${iconWidth})`
+  };
+}
+function isClickableIcon(icon) {
+  return icon.onClick !== void 0;
+}
+function useInputFieldLogic({ label, density: _density = "default", validity = { type: "none" }, id = index.createValidHtmlId(label), leadingIcon, trailingIcon, disabled, density, className }) {
+  const { textRef: prefixRef, width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+  const { textRef: suffixRef, width: postInputWidth } = useIconAndExtraTextWidth(!!trailingIcon);
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  return {
+    wrapperProps: {
+      preInputWidth,
+      postInputWidth,
+      validity,
+      disabled,
+      density,
+      className
+    },
+    contentProps: {
+      validity,
+      prefixRef,
+      suffixRef,
+      inputId,
+      labelId,
+      helperId
+    },
+    commonInputProps: {
+      ...validity.type === "error" && {
+        "aria-invalid": true,
+        "aria-errormessage": helperId
+      },
+      "aria-describedby": helperId,
+      id,
+      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
+      placeholder: " "
+    }
+  };
+}
+function useSelectInputLogic({ label, density: _density = "default", validity = { type: "none" }, id = index.createValidHtmlId(label), leadingIcon, disabled, density, className }) {
+  const { width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+  const { width: postInputWidth } = useIconAndExtraTextWidth(true);
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  return {
+    wrapperProps: {
+      preInputWidth,
+      postInputWidth,
+      validity,
+      disabled,
+      density,
+      className
+    },
+    contentProps: {
+      validity,
+      inputId,
+      labelId,
+      helperId
+    },
+    commonInputProps: {
+      ...validity.type === "error" && {
+        "aria-invalid": true,
+        "aria-errormessage": helperId
+      },
+      "aria-describedby": helperId,
+      id,
+      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
+      placeholder: " "
+    }
+  };
+}
+function getInputFieldProps({ label, density, prefix, suffix, leadingIcon, trailingIcon, helperText, reserveSpaceForMessage, ...inputProps }) {
+  return {
+    extraInformation: {
+      label,
+      density,
+      prefix,
+      suffix,
+      leadingIcon,
+      trailingIcon,
+      helperText,
+      reserveSpaceForMessage
+    },
+    inputProps
+  };
+}
+function getSelectInputProps({ label, density, leadingIcon, helperText, ...selectProps }) {
+  return {
+    extraInformation: {
+      label,
+      density,
+      leadingIcon,
+      helperText
+    },
+    selectProps
+  };
+}
+exports.getInputFieldProps = getInputFieldProps;
+exports.getSelectInputProps = getSelectInputProps;
+exports.isClickableIcon = isClickableIcon;
+exports.useInputFieldLogic = useInputFieldLogic;
+exports.useSelectInputLogic = useSelectInputLogic;

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

@@ -0,0 +1,156 @@
+import { AllowedIcons, DensitySizes } from "../../foundation";
+import { RefAttributes, RefCallback } from "react";
+import { CommonInputProps, HelperText, Label, Validity } from "./textFields/shared.js";
+export declare function isClickableIcon(icon: AllowedIcons | ClickableIcon): icon is ClickableIcon;
+export interface ClickableIcon {
+    icon: AllowedIcons;
+    title: string;
+    onClick: () => void;
+}
+export interface TextInputProps extends CommonInputProps<string>, Validity, HelperText, Label {
+    /**
+     * Density of the field
+     * @default default
+     */
+    density?: DensitySizes;
+    /**
+     * Icon displayed before the field. Hidden for screen readers.
+     */
+    leadingIcon?: AllowedIcons | ClickableIcon;
+    /**
+     * Icon displayed after the field. Hidden for screen readers.
+     */
+    trailingIcon?: AllowedIcons | ClickableIcon;
+    /**
+     * Short text displayed before the field. Hidden for screen readers.
+     */
+    prefix?: string;
+    /**
+     * Short text displayed after the field. Hidden for screen readers.
+     */
+    suffix?: string;
+    /**
+     * className for the wrapper element, e.g. for used with styled(TextField)
+     */
+    className?: string;
+    /**
+     * Whether space should be reserved for text even when there is no current validation message or helper text.
+     * This helps avoid layout changes if messages are conditional, but leads to a less tight layout.
+     */
+    reserveSpaceForMessage?: boolean;
+}
+export interface SelectBaseInputProps<TVal> extends RefAttributes<HTMLButtonElement>, CommonInputProps<TVal>, Validity, HelperText, Label {
+    /**
+     * Density of the field
+     * @default default
+     */
+    density?: DensitySizes;
+    /**
+     * Icon displayed before the field. Hidden for screen readers.
+     */
+    leadingIcon?: AllowedIcons;
+    /**
+     * className for the wrapper element, e.g. for used with styled(TextField)
+     */
+    className?: string;
+    /**
+     * onChange prop for setting value to selected options
+     */
+    onChange: (value: TVal) => void;
+}
+export declare function useInputFieldLogic({ label, density: _density, validity, id, leadingIcon, trailingIcon, disabled, density, className, }: TextInputProps): {
+    wrapperProps: {
+        preInputWidth: string;
+        postInputWidth: string;
+        validity: import("../../index.js").InputFieldValidity<{
+            errorMsgRequired: true;
+        }>;
+        disabled: boolean | undefined;
+        density: DensitySizes | undefined;
+        className: string | undefined;
+    };
+    contentProps: {
+        validity: import("../../index.js").InputFieldValidity<{
+            errorMsgRequired: true;
+        }>;
+        prefixRef: RefCallback<HTMLSpanElement>;
+        suffixRef: RefCallback<HTMLSpanElement>;
+        inputId: string;
+        labelId: string;
+        helperId: string;
+    };
+    commonInputProps: {
+        "aria-describedby": string;
+        id: string;
+        placeholder: string;
+        "aria-invalid"?: boolean | undefined;
+        "aria-errormessage"?: string | undefined;
+    };
+};
+export declare function useSelectInputLogic<T>({ label, density: _density, validity, id, leadingIcon, disabled, density, className, }: SelectBaseInputProps<T>): {
+    wrapperProps: {
+        preInputWidth: string;
+        postInputWidth: string;
+        validity: import("../../index.js").InputFieldValidity<{
+            errorMsgRequired: true;
+        }>;
+        disabled: boolean | undefined;
+        density: DensitySizes | undefined;
+        className: string | undefined;
+    };
+    contentProps: {
+        validity: import("../../index.js").InputFieldValidity<{
+            errorMsgRequired: true;
+        }>;
+        inputId: string;
+        labelId: string;
+        helperId: string;
+    };
+    commonInputProps: {
+        "aria-describedby": string;
+        id: string;
+        placeholder: string;
+        "aria-invalid"?: boolean | undefined;
+        "aria-errormessage"?: string | undefined;
+    };
+};
+export declare function getInputFieldProps<T>({ label, density, prefix, suffix, leadingIcon, trailingIcon, helperText, reserveSpaceForMessage, ...inputProps }: T & TextInputProps): {
+    extraInformation: {
+        label: string;
+        density: DensitySizes | undefined;
+        prefix: string | undefined;
+        suffix: string | undefined;
+        leadingIcon: AllowedIcons | ClickableIcon | undefined;
+        trailingIcon: AllowedIcons | ClickableIcon | undefined;
+        helperText: string | undefined;
+        reserveSpaceForMessage: boolean | undefined;
+    };
+    inputProps: Omit<T & TextInputProps, "label" | "prefix" | "helperText" | "reserveSpaceForMessage" | "density" | "leadingIcon" | "trailingIcon" | "suffix">;
+};
+export declare function getSelectInputProps<T>({ label, density, leadingIcon, helperText, ...selectProps }: SelectBaseInputProps<T>): {
+    extraInformation: {
+        label: string;
+        density: DensitySizes | undefined;
+        leadingIcon: AllowedIcons | undefined;
+        helperText: string | undefined;
+    };
+    selectProps: {
+        /**
+         * className for the wrapper element, e.g. for used with styled(TextField)
+         */
+        className?: string;
+        /**
+         * onChange prop for setting value to selected options
+         */
+        onChange: (value: T) => void;
+        ref?: import("react").Ref<HTMLButtonElement> | undefined;
+        key?: import("react").Key | null | undefined;
+        value?: T | undefined;
+        id?: string;
+        disabled?: boolean;
+        validity?: import("../../index.js").InputFieldValidity<{
+            errorMsgRequired: true;
+        }> | undefined;
+    };
+};
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,yBAAwC;AAE7E,OAAO,EAAE,aAAa,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC7D,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,QAAQ,EACX,MAAM,wBAAwB,CAAC;AAehC,wBAAgB,eAAe,CAC3B,IAAI,EAAE,YAAY,GAAG,aAAa,GACnC,IAAI,IAAI,aAAa,CAEvB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cACb,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,CACtC,SAAQ,aAAa,CAAC,iBAAiB,CAAC,EACpC,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwChB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,GAAG,UAAU,EAChB,EAAE,CAAC,GAAG,cAAc;;;;;;;;;;;;EAcpB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;QA7ItB;;WAEG;oBACS,MAAM;QAClB;;WAEG;gCACwB,IAAI;;;;;;;;;;EAgJlC"}

package/dist/components/inputs/shared.js

@@ -0,0 +1,119 @@
+"use client";
+import { createValidHtmlId } from "../../utilities/html/index.js";
+import { useState } from "react";
+function useIconAndExtraTextWidth(hasIcon) {
+  const iconWidth = hasIcon ? "var(--moller-spacing-xxs) + var(--moller-spacing-l)" : "0px";
+  const [textWidth, setTextWidth] = useState(0);
+  const textRef = (node) => {
+    var _a;
+    return setTextWidth(((_a = node == null ? void 0 : node.getBoundingClientRect()) == null ? void 0 : _a.width) ?? 0);
+  };
+  return {
+    textRef,
+    width: `calc(${textWidth}px + ${iconWidth})`
+  };
+}
+function isClickableIcon(icon) {
+  return icon.onClick !== void 0;
+}
+function useInputFieldLogic({ label, density: _density = "default", validity = { type: "none" }, id = createValidHtmlId(label), leadingIcon, trailingIcon, disabled, density, className }) {
+  const { textRef: prefixRef, width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+  const { textRef: suffixRef, width: postInputWidth } = useIconAndExtraTextWidth(!!trailingIcon);
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  return {
+    wrapperProps: {
+      preInputWidth,
+      postInputWidth,
+      validity,
+      disabled,
+      density,
+      className
+    },
+    contentProps: {
+      validity,
+      prefixRef,
+      suffixRef,
+      inputId,
+      labelId,
+      helperId
+    },
+    commonInputProps: {
+      ...validity.type === "error" && {
+        "aria-invalid": true,
+        "aria-errormessage": helperId
+      },
+      "aria-describedby": helperId,
+      id,
+      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
+      placeholder: " "
+    }
+  };
+}
+function useSelectInputLogic({ label, density: _density = "default", validity = { type: "none" }, id = createValidHtmlId(label), leadingIcon, disabled, density, className }) {
+  const { width: preInputWidth } = useIconAndExtraTextWidth(!!leadingIcon);
+  const { width: postInputWidth } = useIconAndExtraTextWidth(true);
+  const inputId = id;
+  const labelId = `${id}-label`;
+  const helperId = `${id}-helper`;
+  return {
+    wrapperProps: {
+      preInputWidth,
+      postInputWidth,
+      validity,
+      disabled,
+      density,
+      className
+    },
+    contentProps: {
+      validity,
+      inputId,
+      labelId,
+      helperId
+    },
+    commonInputProps: {
+      ...validity.type === "error" && {
+        "aria-invalid": true,
+        "aria-errormessage": helperId
+      },
+      "aria-describedby": helperId,
+      id,
+      // Placeholder must be whitespace to ensure :placeholder-shown triggers when field is empty
+      placeholder: " "
+    }
+  };
+}
+function getInputFieldProps({ label, density, prefix, suffix, leadingIcon, trailingIcon, helperText, reserveSpaceForMessage, ...inputProps }) {
+  return {
+    extraInformation: {
+      label,
+      density,
+      prefix,
+      suffix,
+      leadingIcon,
+      trailingIcon,
+      helperText,
+      reserveSpaceForMessage
+    },
+    inputProps
+  };
+}
+function getSelectInputProps({ label, density, leadingIcon, helperText, ...selectProps }) {
+  return {
+    extraInformation: {
+      label,
+      density,
+      leadingIcon,
+      helperText
+    },
+    selectProps
+  };
+}
+export {
+  getInputFieldProps,
+  getSelectInputProps,
+  isClickableIcon,
+  useInputFieldLogic,
+  useSelectInputLogic
+};