@equinor/eds-core-react 0.24.0 → 0.26.0

package/dist/types/components/InputWrapper/InputWrapper.d.ts

@@ -0,0 +1,41 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { LabelProps } from '../Label';
+import { HelperTextProps } from './HelperText';
+import { Variants } from '../types';
+export declare type InputWrapperProps = {
+    /** Label */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read Only */
+    readOnly?: boolean;
+    /** Highlight color */
+    color?: Variants;
+    /** Label props */
+    labelProps?: LabelProps;
+    /** Helpertext props */
+    helperProps?: HelperTextProps;
+    /** Helper Icon */
+    helperIcon?: ReactNode;
+    /** Input or Textarea element */
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+/** InputWrapper is a internal skeleton component for structuring input elements  */
+export declare const InputWrapper: import("react").ForwardRefExoticComponent<{
+    /** Label */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read Only */
+    readOnly?: boolean;
+    /** Highlight color */
+    color?: Variants;
+    /** Label props */
+    labelProps?: LabelProps;
+    /** Helpertext props */
+    helperProps?: HelperTextProps;
+    /** Helper Icon */
+    helperIcon?: ReactNode;
+    /** Input or Textarea element */
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/InputWrapper/InputWrapper.tokens.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+export declare type InputToken = ComponentToken;
+export declare const input: InputToken;
+export declare const error: InputToken;
+export declare const warning: InputToken;
+export declare const success: InputToken;
+export declare const inputToken: {
+    input: ComponentToken;
+    error: ComponentToken;
+    warning: ComponentToken;
+    success: ComponentToken;
+};

package/dist/types/components/InputWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { InputWrapper } from './InputWrapper';
+export type { InputWrapperProps } from './InputWrapper';

package/dist/types/components/Popover/Popover.d.ts

@@ -9,6 +9,11 @@ export declare type PopoverProps = {
     anchorEl?: HTMLElement | null;
     /** Is Popover open */
     open: boolean;
+    /** initializes react portal for dropdown, default to false. */
+    withinPortal?: boolean;
+    /** Determines whether focus should be trapped within dropdown,
+     * default to false. */
+    trapFocus?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Popover: import("react").ForwardRefExoticComponent<{
     /**  Popover placement relative to anchor */
@@ -19,4 +24,9 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     anchorEl?: HTMLElement | null;
     /** Is Popover open */
     open: boolean;
+    /** initializes react portal for dropdown, default to false. */
+    withinPortal?: boolean;
+    /** Determines whether focus should be trapped within dropdown,
+     * default to false. */
+    trapFocus?: boolean;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Search/Search.d.ts

@@ -1,3 +1,3 @@
-import { InputHTMLAttributes, RefAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 export declare type SearchProps = InputHTMLAttributes<HTMLInputElement>;
-export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & RefAttributes<HTMLInputElement>>;
+export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/Select/commonStyles.d.ts

@@ -5,13 +5,7 @@ declare type StyledListItemType = {
     active?: string;
 };
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
-export declare const PaddedInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    placeholder?: string;
-    variant?: import("../TextField/types").Variants;
-    disabled?: boolean;
-    type?: string;
-    readOnly?: boolean;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const PaddedInput: import("styled-components").StyledComponent<import("@equinor/eds-utils").OverridableComponent<import("../Input").InputProps, HTMLInputElement>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     variant?: "bullet" | "numbered";
     start?: string;

package/dist/types/components/SideBar/SideBar.context.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export declare type State = {
+    isOpen: boolean;
+    onToggle: (state: boolean) => void;
+};
+declare type UseSidebarProps<T> = T & {
+    setIsOpen: (open: boolean) => void;
+    setOnToggle: (onToggle: (state: boolean) => void) => void;
+};
+declare type ProviderProps = {
+    children: ReactNode;
+};
+export declare const SideBarProvider: ({ children }: ProviderProps) => JSX.Element;
+export declare const useSideBar: () => UseSidebarProps<State>;
+export {};

package/dist/types/components/SideBar/SideBar.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare const SideBar: import("react").ForwardRefExoticComponent<{
+    open?: boolean;
+    onToggle?: (state: boolean) => void;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/SideBar/SideBar.tokens.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+export declare const sidebar: ComponentToken;

package/dist/types/components/SideBar/SideBarButton/index.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent } from 'react';
+import { ButtonProps } from '../../..';
+import { IconData } from '@equinor/eds-icons';
+export declare type SideBarButtonProps = {
+    label: string;
+    icon: IconData;
+} & Omit<ButtonProps, 'href' | 'type' | 'fullWidth' | 'variant'>;
+export declare const SideBarButton: ForwardRefExoticComponent<SideBarButtonProps>;

package/dist/types/components/SideBar/SideBarContent.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+declare type SideBarContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const SideBarContent: import("react").ForwardRefExoticComponent<SideBarContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/SideBar/SideBarFooter.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+declare type SideBarFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const SideBarFooter: import("react").ForwardRefExoticComponent<SideBarFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/SideBar/SideBarToggle.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefExoticComponent, HTMLAttributes } from 'react';
+declare type SideBarToggleProps = HTMLAttributes<HTMLDivElement>;
+export declare const SideBarToggle: ForwardRefExoticComponent<SideBarToggleProps>;
+export {};

package/dist/types/components/SideBar/SidebarLink/index.d.ts

@@ -0,0 +1,18 @@
+import { AnchorHTMLAttributes, ElementType } from 'react';
+import { OverridableComponent } from '@equinor/eds-utils';
+import { IconData } from '@equinor/eds-icons';
+declare type OverridableSubComponent = OverridableComponent<SidebarLinkProps, HTMLAnchorElement> & {
+    displayName?: string;
+};
+export declare type SidebarLinkProps = {
+    /** Icon*/
+    icon: IconData;
+    /** Label text */
+    label: string;
+    /** Active/current url */
+    active?: boolean;
+    onClick?: () => void;
+    as?: ElementType;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const SidebarLink: OverridableSubComponent;
+export {};

package/dist/types/components/SideBar/index.d.ts

@@ -0,0 +1,17 @@
+import { SideBar as BaseSideBar } from './SideBar';
+import { useSideBar } from './SideBar.context';
+import { SidebarLink, SidebarLinkProps } from './SidebarLink';
+import { SideBarContent } from './SideBarContent';
+import { SideBarFooter } from './SideBarFooter';
+import { SideBarToggle } from './SideBarToggle';
+import { SideBarButton } from './SideBarButton';
+declare type SidebarType = typeof BaseSideBar & {
+    Link: typeof SidebarLink;
+    Content: typeof SideBarContent;
+    Footer: typeof SideBarFooter;
+    Toggle: typeof SideBarToggle;
+    Button: typeof SideBarButton;
+};
+declare const SideBar: SidebarType;
+export { SideBar, useSideBar };
+export type { SidebarType, SidebarLinkProps };

package/dist/types/components/TextField/TextField.d.ts

@@ -1,11 +1,9 @@
-import { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, Ref } from 'react';
-import type { Variants } from './types';
-export declare type TextFieldProps = {
-    /** @ignore */
-    className?: string;
+import { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, ForwardedRef } from 'react';
+import type { Variants } from '../types';
+declare type SharedTextFieldProps = {
     /** Variants */
     variant?: Variants;
-    /** Input unique id */
+    /** Input unique id. This is required to ensure accesibility */
     id: string;
     /** Label text */
     label?: string;
@@ -15,23 +13,19 @@ export declare type TextFieldProps = {
     unit?: string;
     /** Helper text */
     helperText?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Disabled */
-    disabled?: boolean;
-    /** Multiline input */
-    multiline?: boolean;
-    /** Specifies max rows for multiline input */
-    rowsMax?: number;
-    /** Input ref */
-    inputRef?: Ref<HTMLInputElement> | Ref<HTMLTextAreaElement>;
     /** InputIcon */
     inputIcon?: ReactNode;
     /** HelperIcon */
     helperIcon?: ReactNode;
-    /** Value */
-    value?: string;
-    /** Read Only */
-    readOnly?: boolean;
-} & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
+    /**  Maximum number of rows if `multiline` is set to `true` */
+    rowsMax?: number;
+    /** Input ref */
+    inputRef?: ForwardedRef<HTMLInputElement>;
+    /** Textarea ref when multiline is set to `true` */
+    textareaRef?: ForwardedRef<HTMLTextAreaElement>;
+    /** If `true` a `textarea` is rendered for multiline support. Make sure to use `textareaRef` if you need to access reference element  */
+    multiline?: boolean;
+};
+export declare type TextFieldProps = SharedTextFieldProps & (TextareaHTMLAttributes<HTMLTextAreaElement> | InputHTMLAttributes<HTMLInputElement>);
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { TextareaHTMLAttributes } from 'react';
-import type { Variants } from '../TextField/types';
+import type { Variants } from '../types';
 export declare type TextareaProps = {
     /** Placeholder */
     placeholder?: string;
@@ -11,7 +11,7 @@ export declare type TextareaProps = {
     type?: string;
     /** Read Only */
     readOnly?: boolean;
-    /** Specifies max rows for multiline input */
+    /** Specifies max rows for multiline  */
     rowsMax?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const Textarea: import("react").ForwardRefExoticComponent<{
@@ -25,6 +25,6 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<{
     type?: string;
     /** Read Only */
     readOnly?: boolean;
-    /** Specifies max rows for multiline input */
+    /** Specifies max rows for multiline  */
     rowsMax?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/types.d.ts

@@ -0,0 +1 @@
+export declare type Variants = 'error' | 'warning' | 'success';

package/dist/types/index.d.ts

@@ -34,3 +34,5 @@ export * from './components/Switch';
 export * from './components/EdsProvider';
 export * from './components/Paper';
 export * from './components/Autocomplete';
+export * from './components/InputWrapper';
+export * from './components/SideBar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -80,8 +80,8 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@equinor/eds-icons": "0.15.0",
-    "@equinor/eds-tokens": "0.8.0",
-    "@equinor/eds-utils": "0.5.0",
+    "@equinor/eds-tokens": "0.9.0",
+    "@equinor/eds-utils": "0.7.0",
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "downshift": "^6.1.12"
   },

package/dist/esm/components/Search/Search.tokens.js

@@ -1,83 +0,0 @@
-import { tokens } from '@equinor/eds-tokens';
-
-var _tokens$colors = tokens.colors,
-    background = _tokens$colors.ui.background__light.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
-    primaryColor = _tokens$colors$intera.primary__resting.rgba,
-    placeholderColor = _tokens$colors.text.static_icons__tertiary.rgba,
-    small = tokens.spacings.comfortable.small,
-    typography = tokens.typography.input.text,
-    shape = tokens.shape;
-var search = {
-  background: background,
-  typography: typography,
-  height: '36px',
-  clickbound: {
-    offset: {
-      top: '6px'
-    },
-    height: '48px'
-  },
-  spacings: {
-    left: small,
-    right: small
-  },
-  border: {
-    type: 'border',
-    width: '1px',
-    style: 'solid',
-    color: 'transparent'
-  },
-  states: {
-    focus: {
-      border: {
-        type: 'border',
-        width: '1px',
-        style: 'solid',
-        color: primaryColor
-      }
-    }
-  },
-  entities: {
-    placeholder: {
-      typography: {
-        color: placeholderColor
-      }
-    },
-    icon: {
-      typography: {
-        color: placeholderColor
-      },
-      border: {
-        type: 'border',
-        radius: '50%'
-      },
-      states: {
-        hover: {
-          background: primaryHoverAlt
-        }
-      },
-      clickbound: {
-        offset: {
-          top: '6px'
-        },
-        height: '36px'
-      }
-    },
-    button: {
-      height: '24px',
-      width: '24px',
-      spacings: {
-        right: small
-      }
-    }
-  },
-  modes: {
-    compact: {
-      height: shape._modes.compact.straight.minHeight
-    }
-  }
-};
-
-export { search };

package/dist/esm/components/TextField/Field.js

@@ -1,151 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef } from 'react';
-import { useTextField } from './TextField.context.js';
-import styled, { css } from 'styled-components';
-import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
-import * as TextField_tokens from './TextField.tokens.js';
-import { textfield as textfield$1 } from './TextField.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Input } from '../Input/Input.js';
-import { Textarea } from '../Textarea/Textarea.js';
-import { Icon as InputIcon } from './Icon/Icon.js';
-import { useEds } from '../EdsProvider/eds.context.js';
-
-var _excluded = ["multiline", "variant", "disabled", "readOnly", "type", "unit", "inputIcon", "rowsMax", "onBlur", "onFocus"];
-var textfield = textfield$1;
-
-var Variation = function Variation(_ref) {
-  var _token$border, _token$border2, _token$border3, _token$border4;
-
-  var variant = _ref.variant,
-      isFocused = _ref.isFocused,
-      token = _ref.token;
-
-  if (!variant) {
-    return "";
-  }
-
-  return css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
-};
-
-var StrippedInput = styled(Input).withConfig({
-  displayName: "Field__StrippedInput",
-  componentId: "sc-455b88-0"
-})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-var StrippedTextarea = styled(Textarea).withConfig({
-  displayName: "Field__StrippedTextarea",
-  componentId: "sc-455b88-1"
-})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-var InputWrapper = styled.div.withConfig({
-  displayName: "Field__InputWrapper",
-  componentId: "sc-455b88-2"
-})(function (_ref2) {
-  var inputIcon = _ref2.inputIcon,
-      unit = _ref2.unit,
-      isDisabled = _ref2.isDisabled,
-      isReadOnly = _ref2.isReadOnly,
-      multiline = _ref2.multiline,
-      variant = _ref2.variant;
-  return css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"]));
-});
-var Unit = styled.span.withConfig({
-  displayName: "Field__Unit",
-  componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), function (_ref3) {
-  var isDisabled = _ref3.isDisabled;
-  return isDisabled && {
-    color: textfield.entities.unit.states.disabled.typography.color
-  };
-});
-var Adornments = styled.div.withConfig({
-  displayName: "Field__Adornments",
-  componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, function (_ref4) {
-  var multiline = _ref4.multiline,
-      theme = _ref4.theme;
-  return multiline && {
-    marginTop: theme.spacings.top,
-    alignSelf: 'start'
-  };
-});
-var Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
-  var multiline = _ref5.multiline,
-      variant = _ref5.variant,
-      disabled = _ref5.disabled,
-      readOnly = _ref5.readOnly,
-      type = _ref5.type,
-      unit = _ref5.unit,
-      inputIcon = _ref5.inputIcon,
-      rowsMax = _ref5.rowsMax,
-      onBlur = _ref5.onBlur,
-      onFocus = _ref5.onFocus,
-      other = _objectWithoutProperties(_ref5, _excluded);
-
-  var _useTextField = useTextField(),
-      handleFocus = _useTextField.handleFocus,
-      handleBlur = _useTextField.handleBlur,
-      isFocused = _useTextField.isFocused;
-
-  var _useEds = useEds(),
-      density = _useEds.density;
-
-  var iconSize = density === 'compact' ? 16 : 24;
-  var actualVariant = variant === 'default' ? 'textfield' : variant;
-  var inputVariant = TextField_tokens[actualVariant];
-  var isError = actualVariant === 'error';
-
-  var focusHandler = function focusHandler(e) {
-    handleFocus();
-    onFocus && onFocus(e);
-  };
-
-  var blurHandler = function blurHandler(e) {
-    handleBlur();
-    onBlur && onBlur(e);
-  };
-
-  var inputWrapperProps = {
-    isFocused: isFocused,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    variant: variant,
-    token: inputVariant,
-    inputIcon: inputIcon,
-    unit: unit,
-    multiline: multiline
-  };
-
-  var inputProps = _objectSpread({
-    ref: ref,
-    'aria-invalid': isError,
-    type: type,
-    disabled: disabled,
-    readOnly: readOnly,
-    variant: variant,
-    onBlur: blurHandler,
-    onFocus: focusHandler
-  }, other);
-
-  var textareaProps = _objectSpread(_objectSpread({}, inputProps), {}, {
-    rowsMax: rowsMax,
-    ref: ref
-  });
-
-  return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({}, inputWrapperProps), {}, {
-    children: [multiline ? /*#__PURE__*/jsx(StrippedTextarea, _objectSpread({}, textareaProps)) : /*#__PURE__*/jsx(StrippedInput, _objectSpread({}, inputProps)), (inputIcon || unit) && /*#__PURE__*/jsxs(Adornments, {
-      multiline: multiline,
-      children: [unit && /*#__PURE__*/jsx(Unit, {
-        isDisabled: disabled,
-        children: unit
-      }), inputIcon && /*#__PURE__*/jsx(InputIcon, {
-        isDisabled: disabled,
-        variant: variant,
-        size: iconSize,
-        children: inputIcon
-      })]
-    })]
-  }));
-});
-
-export { Field, InputWrapper };

package/dist/esm/components/TextField/HelperText/HelperText.js

@@ -1,89 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { typographyTemplate } from '@equinor/eds-utils';
-import { helperText } from './HelperText.token.js';
-import { useTextField } from '../TextField.context.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Icon as InputIcon } from '../Icon/Icon.js';
-
-var _excluded = ["helperText", "icon", "variant", "disabled"];
-
-var Variation = function Variation(_ref) {
-  var variant = _ref.variant,
-      isFocused = _ref.isFocused,
-      isDisabled = _ref.isDisabled;
-
-  if (!variant) {
-    return "";
-  }
-
-  var focusColor = variant.focusColor,
-      color = variant.color,
-      disabledColor = variant.disabledColor;
-
-  if (isDisabled) {
-    return css(["color:", ";"], disabledColor);
-  }
-
-  if (isFocused) {
-    return css(["color:", ";"], focusColor);
-  }
-
-  return css(["color:", ";"], color);
-};
-
-var Container = styled.div.withConfig({
-  displayName: "HelperText__Container",
-  componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], function (_ref2) {
-  var spacings = _ref2.spacings;
-  return spacings.top;
-});
-var Text = styled.p.withConfig({
-  displayName: "HelperText__Text",
-  componentId: "sc-1kfkyxg-1"
-})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), function (_ref3) {
-  var spacings = _ref3.spacings;
-  return spacings.left;
-}, Variation);
-var TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
-  var helperText$1 = _ref4.helperText,
-      icon = _ref4.icon,
-      _ref4$variant = _ref4.variant,
-      variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
-      isDisabled = _ref4.disabled,
-      rest = _objectWithoutProperties(_ref4, _excluded);
-
-  var helperVariant = helperText[variant];
-  var spacings = helperText.spacings.comfortable;
-
-  var _useTextField = useTextField(),
-      isFocused = _useTextField.isFocused;
-
-  var colors = {
-    color: helperVariant.color,
-    disabledColor: helperVariant.disabledColor,
-    focusColor: helperVariant.focusColor
-  };
-  return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({
-    ref: ref
-  }, rest), {}, {
-    spacings: spacings,
-    children: [icon && /*#__PURE__*/jsx(InputIcon, {
-      isDisabled: isDisabled,
-      colors: colors,
-      size: 16,
-      children: icon
-    }), /*#__PURE__*/jsx(Text, {
-      variant: helperVariant,
-      isFocused: isFocused,
-      isDisabled: isDisabled,
-      spacings: spacings,
-      children: helperText$1
-    })]
-  }));
-});
-
-export { TextfieldHelperText as HelperText };