@norges-domstoler/dds-components 13.8.1 → 13.8.3

package/dist/components/Tabs/Tabs.tokens.d.ts

@@ -1,32 +0,0 @@
-export declare const tabsTokens: {
-    tabList: {
-        borderBottom: string;
-    };
-    tab: {
-        base: {
-            borderBottom: string;
-            color: string;
-            padding: string;
-        };
-        row: {
-            gap: string;
-        };
-        column: {
-            gap: string;
-        };
-        active: {
-            backgroundColor: string;
-            color: string;
-            boxShadow: string;
-            borderColor: string;
-        };
-        hover: {
-            color: string;
-            boxShadow: string;
-            borderColor: string;
-        };
-    };
-    panel: {
-        padding: string;
-    };
-};

package/dist/components/Tabs/Tabs.tokens.js

@@ -1,42 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var border = ddsBaseTokens.border,
-  spacing = ddsBaseTokens.spacing,
-  colors = ddsBaseTokens.colors;
-var tabList = {
-  borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(border.BordersDdsBorderStyleLightStroke)
-};
-var tab = {
-  base: {
-    borderBottom: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
-    color: colors.DdsColorNeutralsGray7,
-    padding: spacing.SizesDdsSpacingLocalX05
-  },
-  row: {
-    gap: spacing.SizesDdsSpacingLocalX05
-  },
-  column: {
-    gap: spacing.SizesDdsSpacingLocalX025
-  },
-  active: {
-    backgroundColor: colors.DdsColorInteractiveLightest,
-    color: colors.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors.DdsColorInteractiveDarker),
-    borderColor: colors.DdsColorInteractiveDarker
-  },
-  hover: {
-    color: colors.DdsColorInteractiveDarkest,
-    boxShadow: "inset 0 -2px 0 0 ".concat(colors.DdsColorInteractiveDarker),
-    borderColor: colors.DdsColorInteractiveDarker
-  }
-};
-var panel = {
-  padding: spacing.SizesDdsSpacingLocalX025
-};
-var tabsTokens = {
-  tabList: tabList,
-  tab: tab,
-  panel: panel
-};
-
-export { tabsTokens };

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

@@ -1,5 +0,0 @@
-export * from './Tabs';
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanel';
-export * from './TabPanels';

package/dist/components/Tag/Tag.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { BaseComponentProps } from '@norges-domstoler/dds-core';
-export type TagPurpose = 'success' | 'info' | 'danger' | 'warning' | 'default';
-export type TagProps = BaseComponentProps<HTMLSpanElement, {
-    /**Tekst som vises i `<Tag />.` */
-    text?: string;
-    /**Formål med status eller kategorisering. Påvirker styling. */
-    purpose?: TagPurpose;
-}>;
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
-    /**Tekst som vises i `<Tag />.` */
-    text?: string | undefined;
-    /**Formål med status eller kategorisering. Påvirker styling. */
-    purpose?: TagPurpose | undefined;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
-} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Tag/Tag.js

@@ -1,35 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { getBaseHTMLProps } from '@norges-domstoler/dds-core';
-import { TextOverflowEllipsisWrapper, getFontStyling, TextOverflowEllipsisInner } from '@norges-domstoler/dds-typography';
-import { typographyType, tagTokens } from './Tag.tokens.js';
-
-var wrapper = tagTokens.wrapper;
-var Wrapper = styled(TextOverflowEllipsisWrapper).withConfig({
-  displayName: "Tag__Wrapper",
-  componentId: "sc-rdxtch-0"
-})(["display:inline-flex;align-items:center;border:", ";border-radius:", ";padding:", ";", " ", ""], wrapper.border, wrapper.borderRadius, wrapper.padding, getFontStyling(typographyType), function (_ref) {
-  var purpose = _ref.purpose;
-  return css(["background-color:", ";border-color:", ";"], wrapper.purpose[purpose].backgroundColor, wrapper.purpose[purpose].borderColor);
-});
-var Tag = /*#__PURE__*/forwardRef(function (props, ref) {
-  var text = props.text,
-    _props$purpose = props.purpose,
-    purpose = _props$purpose === void 0 ? 'default' : _props$purpose,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = __rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
-  return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
-    ref: ref,
-    purpose: purpose,
-    children: jsx(TextOverflowEllipsisInner, {
-      children: text
-    })
-  }));
-});
-Tag.displayName = 'Tag';
-
-export { Tag };

package/dist/components/Tag/Tag.stories.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { TagProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLSpanElement>, "className" | "id"> & {
-        text?: string | undefined;
-        purpose?: import("./Tag").TagPurpose | undefined;
-    } & {
-        htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
-    } & import("react").RefAttributes<HTMLSpanElement>>;
-    argTypes: {
-        text: {
-            control: string;
-        };
-    };
-};
-export default _default;
-export declare const Overview: () => import("react/jsx-runtime").JSX.Element;
-export declare const Default: (args: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tag/Tag.tokens.d.ts

@@ -1,31 +0,0 @@
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-export declare const typographyType: StaticTypographyType;
-export declare const tagTokens: {
-    wrapper: {
-        border: string;
-        borderRadius: string;
-        padding: string;
-        purpose: {
-            default: {
-                backgroundColor: string;
-                borderColor: string;
-            };
-            success: {
-                borderColor: string;
-                backgroundColor: string;
-            };
-            danger: {
-                borderColor: string;
-                backgroundColor: string;
-            };
-            warning: {
-                borderColor: string;
-                backgroundColor: string;
-            };
-            info: {
-                borderColor: string;
-                backgroundColor: string;
-            };
-        };
-    };
-};

package/dist/components/Tag/Tag.tokens.js

@@ -1,27 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { localMessageTokens } from '../LocalMessage/LocalMessage.tokens.js';
-
-var colors = ddsBaseTokens.colors,
-  borderRadius = ddsBaseTokens.borderRadius,
-  spacing = ddsBaseTokens.spacing;
-var typographyType = 'bodySans01';
-var wrapper = {
-  border: '1px solid',
-  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-  padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
-  purpose: {
-    "default": {
-      backgroundColor: colors.DdsColorNeutralsGray1,
-      borderColor: colors.DdsColorNeutralsGray3
-    },
-    success: localMessageTokens.container.purpose.success,
-    danger: localMessageTokens.container.purpose.danger,
-    warning: localMessageTokens.container.purpose.warning,
-    info: localMessageTokens.container.purpose.info
-  }
-};
-var tagTokens = {
-  wrapper: wrapper
-};
-
-export { tagTokens, typographyType };

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

@@ -1 +0,0 @@
-export * from './Tag';

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

@@ -1,15 +0,0 @@
-import { TextareaHTMLAttributes } from 'react';
-import { CommonInputProps } from '@norges-domstoler/dds-form';
-export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("@norges-domstoler/dds-form").InputProps, "disabled" | "readOnly"> & {
-    hasErrorMessage: boolean;
-} & {
-    prefixLength?: number | undefined;
-    suffixLength?: number | undefined;
-} & Pick<import("@norges-domstoler/dds-form").InputProps, "componentSize"> & {
-    hasErrorMessage: boolean;
-} & {
-    prefixLength?: number | undefined;
-    suffixLength?: number | undefined;
-}, never>;
-export type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/TextArea.js

@@ -1,92 +0,0 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { useCombinedRef, derivativeIdGenerator, spaceSeparatedIdListGenerator } from '@norges-domstoler/dds-core';
-import { getFontStyling, Label } from '@norges-domstoler/dds-typography';
-import { StatefulInput, inputTypographyTypes, getDefaultText, OuterInputContainer } from '@norges-domstoler/dds-form';
-import '../ScrollableContainer/Scrollbar.js';
-import '../ScrollableContainer/ScrollableContainer.js';
-import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { textAreaTokens } from './TextArea.tokens.js';
-import { renderInputMessage } from '../../utils/renderInputMessage.js';
-
-var defaultWidth = '320px';
-var textarea = textAreaTokens.textarea;
-var StyledTextArea = styled(StatefulInput).withConfig({
-  displayName: "TextArea__StyledTextArea",
-  componentId: "sc-dg30pn-0"
-})(["", " ", " height:auto;resize:vertical;vertical-align:bottom;padding-bottom:", ";", ""], scrollbarStyling.webkit, scrollbarStyling.firefox, textarea.paddingBottom, getFontStyling(inputTypographyTypes.medium));
-var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
-  var id = props.id,
-    value = props.value,
-    defaultValue = props.defaultValue,
-    onChange = props.onChange,
-    errorMessage = props.errorMessage,
-    required = props.required,
-    disabled = props.disabled,
-    tip = props.tip,
-    label = props.label,
-    ariaRequired = props['aria-required'],
-    ariaDescribedby = props['aria-describedby'],
-    className = props.className,
-    style = props.style,
-    _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth : _props$width,
-    rest = __rest(props, ["id", "value", "defaultValue", "onChange", "errorMessage", "required", "disabled", "tip", "label", 'aria-required', 'aria-describedby', "className", "style", "width"]);
-  var generatedId = useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textArea");
-  var textAreaRef = useRef(null);
-  var multiRef = useCombinedRef(ref, textAreaRef);
-  var _useState = useState(getDefaultText(value, defaultValue)),
-    _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  useEffect(function () {
-    if (textAreaRef && textAreaRef.current) {
-      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
-    }
-  }, [text]);
-  var onChangeHandler = function onChangeHandler(event) {
-    setText(event.target.value);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  var hasErrorMessage = !!errorMessage;
-  var hasLabel = !!label;
-  var tipId = derivativeIdGenerator(uniqueId, 'tip');
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
-  var showRequiredStyling = required || !!ariaRequired;
-  var containerProps = {
-    width: width,
-    className: className,
-    style: style
-  };
-  var textAreaProps = Object.assign({
-    ref: multiRef,
-    onChange: onChangeHandler,
-    value: value,
-    defaultValue: defaultValue,
-    id: uniqueId,
-    disabled: disabled,
-    hasErrorMessage: hasErrorMessage,
-    required: required,
-    'aria-required': ariaRequired,
-    'aria-describedby': spaceSeparatedIdListGenerator([tip ? tipId : undefined, errorMessage ? errorMessageId : undefined, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
-  }, rest);
-  return jsxs(OuterInputContainer, Object.assign({}, containerProps, {
-    children: [hasLabel && jsx(Label, {
-      showRequiredStyling: showRequiredStyling,
-      htmlFor: uniqueId,
-      children: label
-    }), jsx(StyledTextArea, Object.assign({}, textAreaProps, {
-      as: "textarea"
-    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
-  }));
-});
-TextArea.displayName = 'TextArea';
-
-export { StyledTextArea, TextArea };

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-import { TextAreaProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("@norges-domstoler/dds-form").CommonInputProps & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
-    argTypes: {
-        label: {
-            control: {
-                type: string;
-            };
-        };
-        tip: {
-            control: {
-                type: string;
-            };
-        };
-        errorMessage: {
-            control: {
-                type: string;
-            };
-        };
-        width: {
-            control: {
-                type: string;
-            };
-        };
-        required: {
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        readOnly: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-    };
-};
-export default _default;
-export declare const Overview: (args: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Default: (args: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
-export declare const WithLabel: (args: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.tokens.d.ts

@@ -1,5 +0,0 @@
-export declare const textAreaTokens: {
-    textarea: {
-        paddingBottom: string;
-    };
-};

package/dist/components/TextArea/TextArea.tokens.js

@@ -1,11 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var spacing = ddsBaseTokens.spacing;
-var textarea = {
-  paddingBottom: spacing.SizesDdsSpacingLocalX05
-};
-var textAreaTokens = {
-  textarea: textarea
-};
-
-export { textAreaTokens };

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

@@ -1 +0,0 @@
-export * from './TextArea';

package/dist/components/TextInput/CharCounter.d.ts

@@ -1,7 +0,0 @@
-import { BaseComponentProps } from '@norges-domstoler/dds-core';
-type Props = BaseComponentProps<HTMLElement, {
-    current: number;
-    max: number;
-}>;
-declare function CharCounter(props: Props): import("react/jsx-runtime").JSX.Element;
-export default CharCounter;

package/dist/components/TextInput/CharCounter.js

@@ -1,29 +0,0 @@
-import { __rest } from 'tslib';
-import { jsxs } from 'react/jsx-runtime';
-import { useId } from 'react';
-import styled from 'styled-components';
-import { getBaseHTMLProps } from '@norges-domstoler/dds-core';
-import { Typography } from '@norges-domstoler/dds-typography';
-
-var Wrapper = styled(Typography).withConfig({
-  displayName: "CharCounter__Wrapper",
-  componentId: "sc-qty1z2-0"
-})(["margin-left:auto;"]);
-function CharCounter(props) {
-  var current = props.current,
-    max = props.max,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = __rest(props, ["current", "max", "id", "className", "htmlProps"]);
-  var generatedId = useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-characterCounter");
-  return jsxs(Wrapper, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
-    forwardedAs: "div",
-    typographyType: "supportingStyleHelperText01",
-    "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet"),
-    children: [current, "/", max]
-  }));
-}
-
-export { CharCounter as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { InputSize } from '@norges-domstoler/dds-form';
-export declare const TextInput: React.ForwardRefExoticComponent<import("@norges-domstoler/dds-form").CommonInputProps & {
-    componentSize?: InputSize | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & {
-    withCharacterCounter?: boolean | undefined;
-    icon?: import("@norges-domstoler/dds-icons").SvgIcon | undefined;
-    prefix?: string | undefined;
-    suffix?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/TextInput.js

@@ -1,187 +0,0 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useLayoutEffect, useId } from 'react';
-import { Label } from '@norges-domstoler/dds-typography';
-import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '@norges-domstoler/dds-core';
-import { getDefaultText, InputContainer, InputAffixContainer, StatefulInput, OuterInputContainer } from '@norges-domstoler/dds-form';
-import styled, { css } from 'styled-components';
-import { textInputTokens } from './TextInput.tokens.js';
-import { renderInputMessage } from '../../utils/renderInputMessage.js';
-import { getFormInputIconSize } from '../../utils/icon.js';
-import CharCounter from './CharCounter.js';
-import { StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js';
-
-var defaultWidth = '320px';
-var defaultTinyWidth = '210px';
-var getWidth = function getWidth(size, width) {
-  if (width) return width;
-  if (size === 'tiny') {
-    return defaultTinyWidth;
-  }
-  return defaultWidth;
-};
-var Affix = styled.span.withConfig({
-  displayName: "TextInput__Affix",
-  componentId: "sc-k8umq3-0"
-})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;"]);
-var Prefix = styled(Affix).withConfig({
-  displayName: "TextInput__Prefix",
-  componentId: "sc-k8umq3-1"
-})(["left:0;margin-left:8px;padding-right:8px;border-right:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref) {
-  var readOnly = _ref.readOnly;
-  return readOnly && css(["margin-left:0;padding-right:0.5ch;border-right:none;"]);
-});
-var Suffix = styled(Affix).withConfig({
-  displayName: "TextInput__Suffix",
-  componentId: "sc-k8umq3-2"
-})(["right:0;margin-right:8px;padding-left:8px;border-left:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref2) {
-  var readOnly = _ref2.readOnly;
-  return readOnly && css(["margin-right:0;padding-left:0.5ch;border-left:none;"]);
-});
-var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var label = _a.label,
-    disabled = _a.disabled,
-    readOnly = _a.readOnly,
-    errorMessage = _a.errorMessage,
-    tip = _a.tip,
-    required = _a.required,
-    maxLength = _a.maxLength,
-    onChange = _a.onChange,
-    id = _a.id,
-    width = _a.width,
-    _a$componentSize = _a.componentSize,
-    componentSize = _a$componentSize === void 0 ? 'medium' : _a$componentSize,
-    _a$type = _a.type,
-    type = _a$type === void 0 ? 'text' : _a$type,
-    _a$withCharacterCount = _a.withCharacterCounter,
-    withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
-    className = _a.className,
-    style = _a.style,
-    value = _a.value,
-    defaultValue = _a.defaultValue,
-    ariaRequired = _a['aria-required'],
-    ariaDescribedby = _a['aria-describedby'],
-    icon = _a.icon,
-    prefix = _a.prefix,
-    suffix = _a.suffix,
-    rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon", "prefix", "suffix"]);
-  var _useState = useState(getDefaultText(value, defaultValue)),
-    _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var prefixRef = useRef(null);
-  var suffixRef = useRef(null);
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prefixLength = _useState4[0],
-    setPrefixLength = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    suffixLength = _useState6[0],
-    setSuffixLength = _useState6[1];
-  useLayoutEffect(function () {
-    if (prefixRef.current) {
-      setPrefixLength(prefixRef.current.offsetWidth);
-    }
-    if (suffixRef.current) {
-      setSuffixLength(suffixRef.current.offsetWidth);
-    }
-  }, [prefix, suffix, readOnly]);
-  var onChangeHandler = function onChangeHandler(event) {
-    setText(event.target.value);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  var generatedId = useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-textInput");
-  var hasErrorMessage = !!errorMessage;
-  var hasTip = !!tip;
-  var hasLabel = !!label;
-  var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var hasIcon = !!icon;
-  var hasAffix = !!(prefix || suffix);
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
-  var tipId = derivativeIdGenerator(uniqueId, 'tip');
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
-  var generalInputProps = Object.assign({
-    id: uniqueId,
-    errorMessage: errorMessage,
-    hasErrorMessage: hasErrorMessage,
-    required: required,
-    disabled: disabled,
-    readOnly: readOnly,
-    tabIndex: readOnly ? -1 : 0,
-    maxLength: maxLength,
-    value: value,
-    defaultValue: defaultValue,
-    'aria-required': ariaRequired,
-    'aria-describedby': spaceSeparatedIdListGenerator([hasTip ? tipId : undefined, hasErrorMessage ? errorMessageId : undefined, maxLength && withCharacterCounter ? characterCounterId : undefined, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
-  }, rest);
-  var outerInputContainerProps = {
-    className: className,
-    style: style,
-    width: getWidth(componentSize, width)
-  };
-  var showRequiredStyling = !!(required || ariaRequired);
-  var extendedInput = null;
-  if (hasIcon) {
-    extendedInput = jsxs(InputContainer, {
-      children: [jsx(StyledIcon, {
-        icon: icon,
-        iconSize: getFormInputIconSize(componentSize),
-        size: componentSize
-      }), jsx(StyledInput, Object.assign({
-        ref: ref,
-        onChange: onChangeHandler,
-        type: type,
-        componentSize: componentSize,
-        hasIcon: hasIcon
-      }, generalInputProps))]
-    });
-  } else if (hasAffix) {
-    extendedInput = jsxs(InputAffixContainer, {
-      children: [prefix && jsx(Prefix, {
-        readOnly: readOnly,
-        ref: prefixRef,
-        "aria-hidden": true,
-        children: prefix
-      }), jsx(StatefulInput, Object.assign({
-        ref: ref,
-        onChange: onChangeHandler,
-        type: type,
-        componentSize: componentSize,
-        prefixLength: prefixLength,
-        suffixLength: suffixLength
-      }, generalInputProps)), suffix && jsx(Suffix, {
-        readOnly: readOnly,
-        ref: suffixRef,
-        "aria-hidden": true,
-        children: suffix
-      })]
-    });
-  }
-  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsx(Label, {
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling,
-      children: label
-    }), extendedInput ? extendedInput : jsx(StatefulInput, Object.assign({
-      ref: ref,
-      onChange: onChangeHandler,
-      type: type,
-      componentSize: componentSize
-    }, generalInputProps)), hasMessage && jsxs(MessageContainer, {
-      children: [renderInputMessage(tip, tipId, errorMessage, errorMessageId), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
-        id: characterCounterId,
-        current: text.length,
-        max: maxLength
-      })]
-    })]
-  }));
-});
-TextInput.displayName = 'TextInput';
-
-export { TextInput };