@equinor/eds-core-react 2.3.0 → 2.3.1

package/dist/index.next.cjs

@@ -1,49 +1,128 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var edsIcons = require('@equinor/eds-icons');
+var reactDom = require('react-dom');
+var styled = require('styled-components');
+var edsUtils = require('@equinor/eds-utils');
+var edsTokens = require('@equinor/eds-tokens');
+var react$1 = require('@floating-ui/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 /**
- * Placeholder component for testing the /next entry point.
- * This component should be removed once real EDS 2.0 components are added.
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
  */
-
-const Placeholder = ({
-  text = 'EDS 2.0 Placeholder'
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    "data-testid": "eds-placeholder",
-    children: text
+const TypographyNext = /*#__PURE__*/react.forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-font-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
   });
-};
-
-function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
-  var insertAt = ref.insertAt;
-  if (typeof document === 'undefined') {
-    return;
-  }
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
+});
+TypographyNext.displayName = 'TypographyNext';
 
-var css_248z = "/* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */\n.icon {\n  /*\n   * Set font-size first to establish the icon's size context.\n   * Then use 1em for width/height (relative to computed font-size).\n   * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).\n   */\n  font-size: var(--eds-typography-icon-size, 1.5em);\n  width: 1em;\n  height: 1em;\n\n  /* Negative margins for optical alignment with text baseline */\n  margin-block: -0.25em;\n  margin-inline: -0.1em;\n\n  flex-shrink: 0;\n}\n\n/* Explicit size: fixed size from design tokens, no margins */\n.icon[data-icon-size] {\n  --_explicit-size: var(--eds-sizing-icon-md); /* fallback */\n\n  width: var(--_explicit-size);\n  height: var(--_explicit-size);\n  margin: 0;\n  font-size: inherit;\n}\n\n.icon[data-icon-size='xs'] {\n  --_explicit-size: var(--eds-sizing-icon-xs);\n}\n.icon[data-icon-size='sm'] {\n  --_explicit-size: var(--eds-sizing-icon-sm);\n}\n.icon[data-icon-size='md'] {\n  --_explicit-size: var(--eds-sizing-icon-md);\n}\n.icon[data-icon-size='lg'] {\n  --_explicit-size: var(--eds-sizing-icon-lg);\n}\n.icon[data-icon-size='xl'] {\n  --_explicit-size: var(--eds-sizing-icon-xl);\n}\n.icon[data-icon-size='2xl'] {\n  --_explicit-size: var(--eds-sizing-icon-2xl);\n}\n.icon[data-icon-size='3xl'] {\n  --_explicit-size: var(--eds-sizing-icon-3xl);\n}\n.icon[data-icon-size='4xl'] {\n  --_explicit-size: var(--eds-sizing-icon-4xl);\n}\n.icon[data-icon-size='5xl'] {\n  --_explicit-size: var(--eds-sizing-icon-5xl);\n}\n.icon[data-icon-size='6xl'] {\n  --_explicit-size: var(--eds-sizing-icon-6xl);\n}\n";
-styleInject(css_248z);
+const SIZE_MAPPING = {
+  small: 'sm',
+  default: 'md',
+  large: 'lg'
+};
+const sizeToTypography = SIZE_MAPPING;
+const sizeToSelectableSpace = SIZE_MAPPING;
+const Button = /*#__PURE__*/react.forwardRef(function Button({
+  variant = 'primary',
+  size = 'default',
+  tone = 'accent',
+  icon = false,
+  round = false,
+  children,
+  className,
+  disabled,
+  type = 'button',
+  ...rest
+}, ref) {
+  const classes = ['eds-button', className].filter(Boolean).join(' ');
+  const typographySize = sizeToTypography[size];
+  const selectableSpace = sizeToSelectableSpace[size];
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: type,
+    className: classes,
+    disabled: disabled,
+    "data-variant": variant,
+    "data-selectable-space": selectableSpace,
+    "data-space-proportions": "squished",
+    "data-font-family": "ui",
+    "data-font-size": typographySize,
+    "data-line-height": "squished",
+    "data-color-appearance": disabled ? 'neutral' : tone,
+    "data-icon-only": icon || undefined,
+    "data-round": icon && round ? true : undefined,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+      family: "ui",
+      size: typographySize,
+      baseline: "center",
+      lineHeight: "squished",
+      children: children
+    })
+  });
+});
+Button.displayName = 'Button';
 
 const Icon = /*#__PURE__*/react.forwardRef(function Icon({
   data,
@@ -97,5 +176,712 @@ const Icon = /*#__PURE__*/react.forwardRef(function Icon({
   });
 });
 
+const FieldDescription = /*#__PURE__*/react.forwardRef(function FieldDescription({
+  children,
+  className,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    size: "sm",
+    baseline: "center",
+    lineHeight: "default",
+    tracking: "normal",
+    className: ['eds-field__description', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+FieldDescription.displayName = 'Field.Description';
+
+/**
+ * Field.HelperMessage provides contextual help or validation feedback for form fields.
+ *
+ * Use with `useFieldIds` hook to connect to form controls via `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * const { inputId, helperMessageId, getDescribedBy } = useFieldIds()
+ *
+ * <Field>
+ *   <Field.Label htmlFor={inputId}>Email</Field.Label>
+ *   <input id={inputId} aria-describedby={getDescribedBy()} />
+ *   <Field.HelperMessage id={helperMessageId}>We'll never share your email</Field.HelperMessage>
+ * </Field>
+ * ```
+ */
+const HelperMessage = /*#__PURE__*/react.forwardRef(function HelperMessage({
+  children,
+  className,
+  role,
+  id,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    id: id,
+    family: "ui",
+    size: "sm",
+    baseline: "grid",
+    lineHeight: "default",
+    tracking: "normal",
+    role: role,
+    className: ['eds-field__helper-message', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+HelperMessage.displayName = 'Field.HelperMessage';
+
+const FieldLabel = /*#__PURE__*/react.forwardRef(function FieldLabel({
+  children,
+  className,
+  indicator,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsxs(TypographyNext, {
+    ref: ref,
+    as: "label",
+    family: "ui",
+    size: "md",
+    baseline: "center",
+    lineHeight: "default",
+    weight: "normal",
+    tracking: "normal",
+    className: ['eds-field__label', className].filter(Boolean).join(' '),
+    ...rest,
+    children: [children, indicator && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "eds-field__indicator",
+      "data-font-size": "sm",
+      children: indicator
+    })]
+  });
+});
+FieldLabel.displayName = 'Field.Label';
+
+const FieldComponent = /*#__PURE__*/react.forwardRef(function Field({
+  disabled = false,
+  position,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: ['eds-field', className].filter(Boolean).join(' '),
+    "data-disabled": disabled || undefined,
+    "data-position": position,
+    ...rest,
+    children: children
+  });
+});
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Label = FieldLabel;
+Field.Description = FieldDescription;
+Field.HelperMessage = HelperMessage;
+
+/**
+ * Hook for generating consistent, accessible IDs for form field elements.
+ *
+ * @param providedId - Optional custom ID. If not provided, a unique ID will be generated.
+ * @returns Object containing IDs for input, label, description, and helper message,
+ *          plus a helper function to generate aria-describedby.
+ *
+ * @example
+ * ```tsx
+ * const ids = useFieldIds()
+ *
+ * <Field>
+ *   <Field.Label htmlFor={ids.inputId}>Username</Field.Label>
+ *   <Field.Description id={ids.descriptionId}>
+ *     Choose a unique username
+ *   </Field.Description>
+ *   <input
+ *     id={ids.inputId}
+ *     aria-describedby={ids.getDescribedBy({
+ *       hasDescription: true,
+ *       hasHelperMessage: hasError,
+ *     })}
+ *   />
+ *   {hasError && (
+ *     <HelperMessage id={ids.helperMessageId}>
+ *       Username is already taken
+ *     </HelperMessage>
+ *   )}
+ * </Field>
+ * ```
+ */
+function useFieldIds(providedId) {
+  const generatedId = react.useId();
+  const baseId = providedId ?? generatedId;
+  return {
+    inputId: `${baseId}-input`,
+    labelId: `${baseId}-label`,
+    descriptionId: `${baseId}-description`,
+    helperMessageId: `${baseId}-helper-message`,
+    getDescribedBy: (options = {}) => {
+      const {
+        hasDescription = true,
+        hasHelperMessage = false
+      } = options;
+      const ids = [];
+
+      // Description first, then helper message
+      if (hasDescription) ids.push(`${baseId}-description`);
+      if (hasHelperMessage) ids.push(`${baseId}-helper-message`);
+      return ids.length > 0 ? ids.join(' ') : undefined;
+    }
+  };
+}
+
+/* eslint camelcase: "off" */
+const classNames$1 = (...classes) => classes.filter(Boolean).join(' ');
+const Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox({
+  label,
+  disabled = false,
+  indeterminate = false,
+  indicator,
+  helperMessage,
+  id: providedId,
+  ...rest
+}, ref) {
+  const internalRef = react.useRef(null);
+  const inputRef = ref || internalRef;
+  const generatedId = react.useId();
+  const inputId = providedId ?? generatedId;
+  const helperMessageId = `${inputId}-helper`;
+  react.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, inputRef]);
+  const checkboxInput = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "checkbox",
+      id: inputId,
+      "aria-checked": indeterminate ? 'mixed' : undefined,
+      "aria-describedby": helperMessage ? helperMessageId : undefined,
+      className: "eds-checkbox__input",
+      disabled: disabled,
+      ref: inputRef,
+      "data-indeterminate": indeterminate,
+      ...rest
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "eds-checkbox__icon-wrapper",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.checkbox,
+        size: "lg",
+        className: "eds-checkbox__icon eds-checkbox__icon--checked"
+      }), /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.checkbox_outline,
+        size: "lg",
+        className: "eds-checkbox__icon eds-checkbox__icon--unchecked"
+      }), /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.checkbox_indeterminate,
+        size: "lg",
+        className: "eds-checkbox__icon eds-checkbox__icon--indeterminate"
+      })]
+    })]
+  });
+
+  // Use Field for layout when label is provided
+  if (label) {
+    return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+      position: "start",
+      disabled: disabled,
+      className: "eds-checkbox",
+      "data-color-appearance": disabled ? 'neutral' : 'accent',
+      "data-selectable-space": "md",
+      "data-space-proportions": "squished",
+      children: [checkboxInput, /*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        children: helperMessage
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: classNames$1('eds-checkbox', 'eds-checkbox--standalone'),
+    "data-color-appearance": disabled ? 'neutral' : 'accent',
+    "data-disabled": disabled || undefined,
+    children: checkboxInput
+  });
+});
+Checkbox.displayName = 'Checkbox';
+
+/* eslint camelcase: "off" */
+const classNames = (...classes) => classes.filter(Boolean).join(' ');
+const Radio = /*#__PURE__*/react.forwardRef(function Radio({
+  label,
+  disabled = false,
+  id: providedId,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = providedId ?? generatedId;
+  const radioInput = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "radio",
+      id: inputId,
+      className: "eds-radio__input",
+      disabled: disabled,
+      ref: ref,
+      ...rest
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "eds-radio__icon-wrapper",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.radio_button_selected,
+        size: "lg",
+        className: "eds-radio__icon eds-radio__icon--checked"
+      }), /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.radio_button_unselected,
+        size: "lg",
+        className: "eds-radio__icon eds-radio__icon--unchecked"
+      })]
+    })]
+  });
+
+  // Use Field for layout when label is provided
+  if (label) {
+    return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+      position: "start",
+      disabled: disabled,
+      className: "eds-radio",
+      "data-color-appearance": disabled ? 'neutral' : 'accent',
+      "data-selectable-space": "md",
+      "data-space-proportions": "squished",
+      children: [radioInput, /*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        htmlFor: inputId,
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: classNames('eds-radio', 'eds-radio--standalone'),
+    "data-color-appearance": disabled ? 'neutral' : 'accent',
+    "data-disabled": disabled || undefined,
+    children: radioInput
+  });
+});
+Radio.displayName = 'Radio';
+
+const Switch = /*#__PURE__*/react.forwardRef(function Switch({
+  label,
+  disabled,
+  className,
+  id,
+  checked: controlledChecked,
+  defaultChecked,
+  onChange,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = id ?? generatedId;
+
+  // Track checked state for dynamic color appearance
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = react.useState(defaultChecked ?? false);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleChange = react.useCallback(event => {
+    if (!isControlled) {
+      setInternalChecked(event.target.checked);
+    }
+    onChange?.(event);
+  }, [isControlled, onChange]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+    position: "start",
+    disabled: disabled,
+    className: ['eds-switch', className].filter(Boolean).join(' '),
+    "data-font-size": "md",
+    "data-selectable-space": "md",
+    "data-space-proportions": "squished",
+    "data-color-appearance": disabled ? 'neutral' : 'accent',
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "eds-switch__control",
+      "data-color-appearance": !disabled && isChecked ? 'accent' : 'neutral',
+      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+        type: "checkbox",
+        role: "switch",
+        id: inputId,
+        className: "eds-switch__input",
+        disabled: disabled,
+        ref: ref,
+        checked: isControlled ? controlledChecked : undefined,
+        defaultChecked: !isControlled ? defaultChecked : undefined,
+        onChange: handleChange,
+        ...rest
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "eds-switch__track",
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "eds-switch__handle"
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+      htmlFor: inputId,
+      children: label
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+const Input = /*#__PURE__*/react.forwardRef(function Input({
+  invalid = false,
+  disabled,
+  readOnly,
+  type = 'text',
+  startText,
+  startAdornment,
+  endText,
+  endAdornment,
+  containerClassName,
+  className,
+  as: Component = 'input',
+  ...inputProps
+}, ref) {
+  const tone = invalid && !disabled ? 'danger' : 'neutral';
+  const showErrorIcon = invalid && !disabled;
+  const hasStartAdornment = startText || startAdornment;
+  const hasEndAdornment = endText || endAdornment;
+  const containerClasses = ['eds-input-container', containerClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: containerClasses,
+    "data-color-appearance": tone,
+    "data-font-size": "md",
+    "data-selectable-space": "sm",
+    "data-space-proportions": "squished",
+    "data-disabled": disabled || undefined,
+    "data-readonly": readOnly || undefined,
+    "data-invalid": invalid || undefined,
+    children: [showErrorIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "eds-error-icon",
+      "data-font-size": "xs",
+      "data-font-family": "ui",
+      "data-baseline": "center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        data: edsIcons.error_filled
+      })
+    }), hasStartAdornment && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "eds-adornment",
+      "data-font-size": "xs",
+      children: [startText && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "eds-adornment__text",
+        "data-color-appearance": "neutral",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "data-baseline": "center",
+        children: startText
+      }), startAdornment && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "eds-adornment__adornment",
+        "data-font-size": "xs",
+        "data-font-family": "ui",
+        "data-baseline": "center",
+        children: startAdornment
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Component, {
+      ref: ref,
+      type: type,
+      disabled: disabled,
+      readOnly: readOnly,
+      className: ['eds-input', className].filter(Boolean).join(' '),
+      "data-color-appearance": "neutral",
+      "data-font-family": "ui",
+      "data-font-size": "md",
+      "data-line-height": "default",
+      ...inputProps,
+      "aria-invalid": invalid || undefined
+    }), hasEndAdornment && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "eds-adornment",
+      "data-font-size": "xs",
+      children: [endText && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "eds-adornment__text",
+        "data-color-appearance": "neutral",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "data-baseline": "center",
+        children: endText
+      }), endAdornment && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "eds-adornment__adornment",
+        "data-font-size": "xs",
+        "data-font-family": "ui",
+        "data-baseline": "center",
+        children: endAdornment
+      })]
+    })]
+  });
+});
+
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: white
+      }
+    },
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    }
+  },
+  typography: {
+    ui
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = edsTokens.tokens;
+const tooltip = {
+  typography: {
+    ...ui.tooltip,
+    color: white
+  },
+  background,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  entities: {
+    arrow: {
+      width: '6px',
+      height: spacingSmall}
+  },
+  spacings: {
+    left: spacingSmall,
+    right: spacingSmall,
+    top: spacingSmall,
+    bottom: spacingSmall
+  }
+};
+
+const initalState = {
+  /** Density for all components inside `EdsProvider` */
+  density: 'comfortable'
+};
+const EdsContext = /*#__PURE__*/react.createContext(initalState);
+const useEds = () => react.useContext(EdsContext);
+
+const StyledTooltip = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-m2im2p-0"
+})(["inset:unset;border:0;overflow:visible;", " ", " ", " background:", ";white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}&::backdrop{background-color:transparent;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
+const ArrowWrapper = styled__default.default.div.withConfig({
+  displayName: "Tooltip__ArrowWrapper",
+  componentId: "sc-m2im2p-1"
+})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+const TooltipArrow = styled__default.default.svg.withConfig({
+  displayName: "Tooltip__TooltipArrow",
+  componentId: "sc-m2im2p-2"
+})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
+const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip({
+  title,
+  placement = 'bottom',
+  children,
+  style,
+  enterDelay = 100,
+  disabled = false,
+  portalContainer,
+  ...rest
+}, ref) {
+  const arrowRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const {
+    rootElement
+  } = useEds();
+  const shouldOpen = Boolean(title) && typeof document !== 'undefined';
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement,
+    elements
+  } = react$1.useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [react$1.offset(14), react$1.flip(), react$1.shift({
+      padding: 8
+    }), react$1.arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: react$1.autoUpdate
+  });
+  const mergedAnchorRef = react.useMemo(() => edsUtils.mergeRefs(refs.setReference), [refs.setReference]);
+  const tooltipRef = react.useMemo(() => edsUtils.mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react$1.useInteractions([react$1.useHover(context, {
+    delay: {
+      open: enterDelay
+    }
+  }), react$1.useFocus(context), react$1.useRole(context, {
+    role: 'tooltip'
+  }), react$1.useDismiss(context)]);
+  react.useEffect(() => {
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[finalPlacement.split('-')[0]];
+    let arrowTransform = 'none';
+    switch (staticSide) {
+      case 'right':
+        arrowTransform = 'rotateY(180deg)';
+        break;
+      case 'left':
+        arrowTransform = 'none';
+        break;
+      case 'top':
+        arrowTransform = 'rotate(90deg)';
+        break;
+      case 'bottom':
+        arrowTransform = 'rotate(-90deg)';
+        break;
+    }
+    if (arrowRef.current) {
+      Object.assign(arrowRef.current.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-6px',
+        transform: arrowTransform
+      });
+    }
+  });
+  const updatedChildren = /*#__PURE__*/react.cloneElement(children,
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  {
+    ...getReferenceProps(children.props),
+    ref: edsUtils.mergeRefs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    children.props.ref, mergedAnchorRef)
+  });
+  react.useEffect(() => {
+    if (!elements.floating) return;
+    if (elements.floating.isConnected && shouldOpen && open) {
+      elements.floating.showPopover();
+    }
+  }, [open, shouldOpen, elements.floating]);
+  const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
+    popover: "manual",
+    ...rest,
+    ...getFloatingProps({
+      ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
+      style: {
+        ...style,
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
+    }),
+    children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
+      ref: arrowRef,
+      children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [updatedChildren, shouldOpen && open && !disabled && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body)]
+  });
+});
+
+const TextField = /*#__PURE__*/react.forwardRef(function TextField({
+  label,
+  labelInfo,
+  indicator,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid = false,
+  disabled = false,
+  ...inputProps
+}, ref) {
+  const {
+    inputId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  return /*#__PURE__*/jsxRuntime.jsxs(Field, {
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "eds-text-field__header",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          className: "eds-text-field__info",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            data: edsIcons.info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsxRuntime.jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: ref,
+      id: inputId,
+      disabled: disabled,
+      invalid: invalid,
+      "aria-describedby": getDescribedBy({
+        hasDescription: !!description,
+        hasHelperMessage: !!helperMessage
+      }),
+      ...inputProps
+    }), helperMessage && /*#__PURE__*/jsxRuntime.jsx(Field.HelperMessage, {
+      id: helperMessageId,
+      role: invalid ? 'alert' : undefined,
+      children: helperMessage
+    })]
+  });
+});
+
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.Field = Field;
 exports.Icon = Icon;
-exports.Placeholder = Placeholder;
+exports.Input = Input;
+exports.Radio = Radio;
+exports.Switch = Switch;
+exports.TextField = TextField;
+exports.useFieldIds = useFieldIds;