@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","useStopPropagation","jsxs","jsx"],"mappings":";;;;;;;AAYA,MAAMA,IAAqB,OAYdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,SAAAe,EAAmBd,GAAa,CAAC,cAAc,WAAW,CAAC,qBAGxD,OAAI,EAAA,WAAWY,EAAO,kBAAkB,eAAad,GAGpD,UAAA,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACTC,EAAO;AAAA,cACPA,EAAO,mCAAmC;AAAA,cAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,YACjE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACTC,EAAO;AAAA,cACPA,EAAO,oCAAoC;AAAA,cAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,YAClE;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAI,EAAC,OAAI,EAAA,KAAKd,EAAS,CAAA;AAAA,QAClBN;AAAA,QACD,gBAAAoB,EAAC,OAAI,EAAA,KAAKb,EAAU,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAExB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,qBAAqB;AAYd,MAAA,mBAA0E,CAAC,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;AAC9H,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,gBAAgB,aAAa,SAAS,GAAG,EAAE,MAAM,2CAAa,SAAS,YAAY,mBAAmB,GAAG,IAAI;AAC7G,QAAA,iBAAiB,aAAa,UAAU,GAAG,EAAE,MAAM,2CAAa,SAAS,YAAY,mBAAmB,GAAG,IAAI;AAC/G,QAAA,EAAE,OAAO,gBAAgB,MAAM,QAAQ,WAAW,KAAK,CAAC;AAE9D,QAAM,gBAAgB,aAAa;AACnC,QAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,sCAAsC,CAAC;AACrI,QAAM,oBAAoB,KAAK,YAAY,KAAK,KAAK,iBAAiB;AAEtE,qBAAmB,aAAa,CAAC,cAAc,WAAW,CAAC;AAE3D,6BACG,OAAI,EAAA,WAAW,OAAO,kBAAkB,eAAa,QAGpD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,KAAK;AAAA,MACL,UAAU,oBAAoB,IAAI;AAAA,MAClC,MAAM,oBAAoB,WAAW;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,mCAAmC;AAAA,cAC1C,CAAC,iBAAiB,OAAO,sCAAsC;AAAA,YAAA;AAAA,UACjE;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,oCAAoC;AAAA,cAC3C,CAAC,kBAAkB,OAAO,sCAAsC;AAAA,YAAA;AAAA,UAClE;AAAA,QACF;AAAA,QACA,oBAAC,OAAI,EAAA,KAAK,QAAS,CAAA;AAAA,QAClB;AAAA,QACD,oBAAC,OAAI,EAAA,KAAK,SAAU,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExB;AAEJ;"}

package/Icon.js

@@ -1,62 +1,74 @@
-import { jsxs as u, jsx as b } from "react/jsx-runtime";
-import f from "react";
-import y from "classnames";
-import { IconSize as l, AnalyticsId as v } from "./constants.js";
-import { useUuid as w } from "./hooks/useUuid.js";
-const z = ({
-  size: a,
-  isHovered: e,
-  normal: n,
-  normalHover: o,
-  xSmall: r,
-  xSmallHover: t,
-  xxSmall: i,
-  xxSmallHover: s
-}) => a <= l.XXSmall && i && s ? e ? s : i : a <= l.XSmall && r && t ? e ? t : r : e ? o : n, N = f.forwardRef((a, e) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { IconSize, AnalyticsId } from "./constants.js";
+import { useUuid } from "./hooks/useUuid.js";
+const getIcon = ({
+  size,
+  isHovered,
+  normal,
+  normalHover,
+  xSmall,
+  xSmallHover,
+  xxSmall,
+  xxSmallHover
+}) => {
+  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {
+    return isHovered ? xxSmallHover : xxSmall;
+  }
+  if (size <= IconSize.XSmall && xSmall && xSmallHover) {
+    return isHovered ? xSmallHover : xSmall;
+  }
+  return isHovered ? normalHover : normal;
+};
+const Icon = React.forwardRef((props, ref) => {
   const {
-    svgIcon: n,
-    ariaLabel: o,
-    className: r = "",
-    size: t = l.Small,
-    color: i = "black",
-    hoverColor: s = i || "black",
-    isHovered: c = !1,
-    onColor: h,
-    testId: I,
-    ...g
-  } = a, p = f.createElement(n, {
-    size: t,
-    isHovered: c,
-    onColor: h
-  }), d = w(), m = c ? s : i;
-  return /* @__PURE__ */ u(
+    svgIcon,
+    ariaLabel,
+    className = "",
+    size = IconSize.Small,
+    color = "black",
+    hoverColor = color || "black",
+    isHovered = false,
+    onColor,
+    testId,
+    ...other
+  } = props;
+  const svgRaw = React.createElement(svgIcon, {
+    size,
+    isHovered,
+    onColor
+  });
+  const titleId = useUuid();
+  const svgColor = isHovered ? hoverColor : color;
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
-      "data-testid": I,
-      "data-analyticsid": v.Icon,
-      ref: e,
-      className: y("hnds-style-icon", r),
-      role: o ? "img" : "presentation",
-      "aria-labelledby": o ? d : void 0,
-      focusable: !1,
-      "aria-hidden": o ? void 0 : !0,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Icon,
+      ref,
+      className: classNames(`hnds-style-icon`, className),
+      role: ariaLabel ? "img" : "presentation",
+      "aria-labelledby": ariaLabel ? titleId : void 0,
+      focusable: false,
+      "aria-hidden": ariaLabel ? void 0 : true,
       viewBox: "0 0 48 48",
-      style: { minWidth: t, minHeight: t },
-      width: t,
-      height: t,
-      fill: m,
-      color: m,
-      ...g,
+      style: { minWidth: size, minHeight: size },
+      width: size,
+      height: size,
+      fill: svgColor,
+      color: svgColor,
+      ...other,
       children: [
-        o && /* @__PURE__ */ b("title", { id: d, children: o }),
-        p
+        ariaLabel && /* @__PURE__ */ jsx("title", { id: titleId, children: ariaLabel }),
+        svgRaw
       ]
     }
   );
 });
-N.displayName = "Icon";
+Icon.displayName = "Icon";
 export {
-  N as I,
-  z as g
+  Icon as I,
+  getIcon as g
 };
 //# sourceMappingURL=Icon.js.map

package/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["getIcon","size","isHovered","normal","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","IconSize","Icon","React","props","ref","svgIcon","ariaLabel","className","color","hoverColor","onColor","testId","other","svgRaw","titleId","useUuid","svgColor","jsxs","AnalyticsId","classNames","jsx"],"mappings":";;;;;AAmDO,MAAMA,IAAU,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AACF,MACMP,KAAQQ,EAAS,WAAWF,KAAWC,IAClCN,IAAYM,IAAeD,IAEhCN,KAAQQ,EAAS,UAAUJ,KAAUC,IAChCJ,IAAYI,IAAcD,IAG5BH,IAAYE,IAAcD,GAGtBO,IAAOC,EAAM,WAAW,CAACC,GAAkBC,MAA2C;AAC3F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAf,IAAOQ,EAAS;AAAA,IAChB,OAAAQ,IAAQ;AAAA,IACR,YAAAC,IAAaD,KAAS;AAAA,IACtB,WAAAf,IAAY;AAAA,IACZ,SAAAiB;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAASX,EAAM,cAAcG,GAAS;AAAA,IAC1C,MAAAb;AAAA,IACA,WAAAC;AAAA,IACA,SAAAiB;AAAA,EAAA,CACD,GAEKI,IAAUC,KACVC,IAAWvB,IAAYgB,IAAaD;AAGxC,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaN;AAAA,MACb,oBAAkBO,EAAY;AAAA,MAC9B,KAAAd;AAAA,MACA,WAAWe,EAAW,mBAAmBZ,CAAS;AAAA,MAClD,MAAMD,IAAY,QAAQ;AAAA,MAC1B,mBAAiBA,IAAYQ,IAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAaR,IAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUd,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,MACR,MAAMwB;AAAA,MACN,OAAOA;AAAA,MACN,GAAGJ;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAc,gBAAAc,EAAA,SAAA,EAAM,IAAIN,GAAU,UAAUR,GAAA;AAAA,QAC5CO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDZ,EAAK,cAAc;"}
+{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;AAmDO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsC;AACpC,MAAI,QAAQ,SAAS,WAAW,WAAW,cAAc;AACvD,WAAO,YAAY,eAAe;AAAA,EAAA;AAEpC,MAAI,QAAQ,SAAS,UAAU,UAAU,aAAa;AACpD,WAAO,YAAY,cAAc;AAAA,EAAA;AAGnC,SAAO,YAAY,cAAc;AACnC;AAEO,MAAM,OAAO,MAAM,WAAW,CAAC,OAAkB,QAA2C;AAC3F,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,SAAS;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,SAAS;AAAA,IACtB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,SAAS,MAAM,cAAc,SAAS;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,UAAU,QAAQ;AAClB,QAAA,WAAW,YAAY,aAAa;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,MAAM,YAAY,QAAQ;AAAA,MAC1B,mBAAiB,YAAY,UAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAa,YAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,SAAA,EAAM,IAAI,SAAU,UAAU,WAAA;AAAA,QAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;AAED,KAAK,cAAc;"}

package/Illustration.js

@@ -1,41 +1,49 @@
-import { jsx as f } from "react/jsx-runtime";
-import r from "react";
-import { g as p } from "./utils.js";
-import { AnalyticsId as g } from "./constants.js";
-import { useUuid as h } from "./hooks/useUuid.js";
-var I = /* @__PURE__ */ ((e) => (e.Medium = "0 0 512 512", e.Small = "0 0 200 200", e))(I || {});
-const v = r.forwardRef((e, s) => {
-  const { illustration: o, ariaLabel: i, className: n = "", size: t = 512, color: a = "neutral", testId: m, ...d } = e, l = h(), c = p({
-    size: t,
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { g as getIllustration } from "./utils.js";
+import { AnalyticsId } from "./constants.js";
+import { useUuid } from "./hooks/useUuid.js";
+var ViewBoxSize = /* @__PURE__ */ ((ViewBoxSize2) => {
+  ViewBoxSize2["Medium"] = "0 0 512 512";
+  ViewBoxSize2["Small"] = "0 0 200 200";
+  return ViewBoxSize2;
+})(ViewBoxSize || {});
+const Illustration = React.forwardRef((props, ref) => {
+  const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ...other } = props;
+  const titleId = useUuid();
+  const viewBox = getIllustration({
+    size,
     medium: "0 0 512 512",
     small: "0 0 200 200"
     /* Small */
-  }), u = {
-    "data-testid": m,
-    "data-analyticsid": g.Illustration,
-    ref: s,
-    className: n,
-    role: i ? "img" : "presentation",
-    "aria-labelledby": i ? l : void 0,
-    focusable: !1,
-    "aria-hidden": i ? void 0 : !0,
-    viewBox: c,
-    style: { minWidth: t, minHeight: t },
-    width: t,
-    height: t,
-    fill: a,
-    ...d
+  });
+  const svgProperties = {
+    "data-testid": testId,
+    "data-analyticsid": AnalyticsId.Illustration,
+    ref,
+    className,
+    role: ariaLabel ? "img" : "presentation",
+    "aria-labelledby": ariaLabel ? titleId : void 0,
+    focusable: false,
+    "aria-hidden": ariaLabel ? void 0 : true,
+    viewBox,
+    style: { minWidth: size, minHeight: size },
+    width: size,
+    height: size,
+    fill: color,
+    ...other
   };
-  return r.createElement(o, {
-    size: t,
-    color: a,
-    svgProperties: u,
-    title: i && /* @__PURE__ */ f("title", { id: l, children: i })
+  const svgElement = React.createElement(illustration, {
+    size,
+    color,
+    svgProperties,
+    title: ariaLabel && /* @__PURE__ */ jsx("title", { id: titleId, children: ariaLabel })
   });
+  return svgElement;
 });
-v.displayName = "Illustration";
+Illustration.displayName = "Illustration";
 export {
-  v as I,
-  I as V
+  Illustration as I,
+  ViewBoxSize as V
 };
 //# sourceMappingURL=Illustration.js.map

package/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize","Illustration","React","props","ref","illustration","ariaLabel","className","size","color","testId","other","titleId","useUuid","viewBox","getIllustration","svgProperties","AnalyticsId","jsx"],"mappings":";;;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,eACTA,EAAA,QAAQ,eAFEA,IAAAA,KAAA,CAAA,CAAA;AAkCL,MAAMC,IAAeC,EAAM,WAA6C,CAACC,GAAOC,MAAQ;AAC7F,QAAM,EAAE,cAAAC,GAAc,WAAAC,GAAW,WAAAC,IAAY,IAAI,MAAAC,IAAO,KAAK,OAAAC,IAAQ,WAAW,QAAAC,GAAQ,GAAGC,EAAA,IAAUR,GAE/FS,IAAUC,KACVC,IAAUC,EAAgB;AAAA,IAAE,MAAAP;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB,GAExFQ,IAAgB;AAAA,IACpB,eAAeN;AAAA,IACf,oBAAoBO,EAAY;AAAA,IAChC,KAAAb;AAAA,IACA,WAAAG;AAAA,IACA,MAAMD,IAAY,QAAQ;AAAA,IAC1B,mBAAmBA,IAAYM,IAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAeN,IAAY,SAAY;AAAA,IACvC,SAAAQ;AAAA,IACA,OAAO,EAAE,UAAUN,GAAM,WAAWA,EAAK;AAAA,IACzC,OAAOA;AAAA,IACP,QAAQA;AAAA,IACR,MAAMC;AAAA,IACN,GAAGE;AAAA,EAAA;AAUE,SAPYT,EAAM,cAAcG,GAAc;AAAA,IACnD,MAAAG;AAAA,IACA,OAAAC;AAAA,IACA,eAAAO;AAAA,IACA,OAAOV,KAAa,gBAAAY,EAAC,SAAM,EAAA,IAAIN,GAAU,UAAUN,GAAA;AAAA,EAAA,CACpD;AAGH,CAAC;AAEDL,EAAa,cAAc;"}
+{"version":3,"file":"Illustration.js","sources":["../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize"],"mappings":";;;;;AAQY,IAAA,gCAAAA,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAkCL,MAAM,eAAe,MAAM,WAA6C,CAAC,OAAO,QAAQ;AAC7F,QAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,GAAG,MAAU,IAAA;AAErG,QAAM,UAAU,QAAQ;AAClB,QAAA,UAAU,gBAAgB;AAAA,IAAE;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB;AAE9F,QAAM,gBAAgB;AAAA,IACpB,eAAe;AAAA,IACf,oBAAoB,YAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,MAAM,YAAY,QAAQ;AAAA,IAC1B,mBAAmB,YAAY,UAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAe,YAAY,SAAY;AAAA,IACvC;AAAA,IACA,OAAO,EAAE,UAAU,MAAM,WAAW,KAAK;AAAA,IACzC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AAEM,QAAA,aAAa,MAAM,cAAc,cAAc;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,aAAa,oBAAC,SAAM,EAAA,IAAI,SAAU,UAAU,UAAA,CAAA;AAAA,EAAA,CACpD;AAEM,SAAA;AACT,CAAC;AAED,aAAa,cAAc;"}

package/Input.js

@@ -1,150 +1,208 @@
-import { jsx as s, jsxs as _ } from "react/jsx-runtime";
-import _e, { useRef as $, useState as L, useEffect as ye } from "react";
-import y from "classnames";
-import { FormOnColor as c, FormSize as Ne, IconSize as B, AnalyticsId as ke, AVERAGE_CHARACTER_WIDTH_PX as Ie } from "./constants.js";
-import { useBreakpoint as we, Breakpoint as Re } from "./hooks/useBreakpoint.js";
-import { useUuid as U } from "./hooks/useUuid.js";
-import { getColor as F } from "./theme/currys/color.js";
-import { getAriaDescribedBy as We } from "./utils/accessibility.js";
-import { mergeRefs as Se } from "./utils/refs.js";
-import { E as Ee } from "./ErrorWrapper.js";
-import { I as ze } from "./Icon.js";
-import { a as Ae } from "./Label.js";
-import { L as Ve } from "./LazyIcon.js";
-import { M as De } from "./MaxCharacters.js";
-import t from "./components/Input/styles.module.scss";
-var Ke = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Ke || {});
-const $e = (e, l, p) => {
-  const o = l ? "1.5rem" : "2rem", f = l ? `${p}px` : "0px";
-  return `calc(${e * Ie}px + ${o} + ${f} + 4px)`;
-}, Le = _e.forwardRef((e, l) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, IconSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getColor } from "./theme/currys/color.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { mergeRefs } from "./utils/refs.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { I as Icon } from "./Icon.js";
+import { a as renderLabel } from "./Label.js";
+import { L as LazyIcon } from "./LazyIcon.js";
+import { M as MaxCharacters } from "./MaxCharacters.js";
+import styles from "./components/Input/styles.module.scss";
+var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
+  InputTypes2["text"] = "text";
+  InputTypes2["number"] = "number";
+  InputTypes2["email"] = "email";
+  InputTypes2["password"] = "password";
+  InputTypes2["search"] = "search";
+  InputTypes2["tel"] = "tel";
+  InputTypes2["url"] = "url";
+  InputTypes2["date"] = "date";
+  InputTypes2["time"] = "time";
+  return InputTypes2;
+})(InputTypes || {});
+const getInputMaxWidth = (characters, hasIcon, iconSize) => {
+  const paddingWidth = hasIcon ? "1.5rem" : "2rem";
+  const iconWidth = hasIcon ? `${iconSize}px` : "0px";
+  const borderWidth = "4px";
+  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;
+};
+const Input = React.forwardRef((props, ref) => {
   const {
-    className: p,
-    defaultValue: o,
-    placeholder: f,
-    type: h = "text",
-    name: M,
-    transparent: O = !1,
-    icon: n,
-    iconRight: g,
-    inputId: P,
-    inputWrapperRef: j,
-    onColor: i = c.onwhite,
-    size: H,
-    baseIncrementValue: N,
-    label: X,
-    error: q,
-    errorText: k,
-    errorTextId: G,
-    errorWrapperClassName: J,
-    testId: Q,
-    disabled: u,
-    readOnly: T,
-    autoComplete: Y = "off",
-    afterInputChildren: Z,
-    rightOfInput: ee,
-    width: I,
-    required: te,
-    onChange: w,
-    onKeyDown: R,
-    autoFocus: re,
-    maxCharacters: d,
-    maxText: ne,
-    inputContainerRef: ae,
-    ...oe
-  } = e, ie = we(), m = $(null), W = U(P), [S, E] = L(o || ""), [se, ce] = L(void 0), b = $(!1), z = U(G), A = /^[0-9]$/;
-  ye(() => {
-    E(o || "");
-  }, [o]);
-  const le = i === c.ondark, ue = i === c.onblueberry, de = !!d && S.toString().length > d, C = i === c.oninvalid || !!k || !!q || de, x = H === Ne.large, me = O && i !== c.ondark && !C, pe = y(t["input-wrapper"], p), fe = y(t["input-container"], {
-    [t["input-container--transparent"]]: me,
-    [t["input-container--on-blueberry"]]: ue,
-    [t["input-container--on-dark"]]: le,
-    [t["input-container--invalid"]]: C,
-    [t["input-container--large"]]: x,
-    [t["input-container--disabled"]]: u,
-    [t["input-container--with-icon"]]: n
-  }), he = y(t["input-container__input"], {
-    [t["input-container__input--large"]]: x,
-    [t["input-container__input--disabled"]]: u
-  }), V = u ? F("neutral", 700) : F("black"), v = ie === Re.xs || !x ? B.XSmall : B.Small, D = () => {
-    if (n)
-      return typeof n == "string" ? /* @__PURE__ */ s(Ve, { className: t["input-container__input__icon"], color: V, size: v, iconName: n }) : /* @__PURE__ */ s(ze, { className: t["input-container__input__icon"], color: V, size: v, svgIcon: n });
-  }, ge = (r) => {
-    if (m && m.current && n) {
-      const a = g ? 0 : 1;
-      m.current.children[a].focus(), e.onClick && e.onClick(r);
+    className,
+    defaultValue,
+    placeholder,
+    type = "text",
+    name,
+    transparent = false,
+    icon,
+    iconRight,
+    inputId,
+    inputWrapperRef,
+    onColor = FormOnColor.onwhite,
+    size,
+    baseIncrementValue,
+    label,
+    error,
+    errorText,
+    errorTextId,
+    errorWrapperClassName,
+    testId,
+    disabled,
+    readOnly,
+    autoComplete = "off",
+    afterInputChildren,
+    rightOfInput,
+    width,
+    required,
+    onChange,
+    onKeyDown,
+    autoFocus,
+    maxCharacters,
+    maxText,
+    inputContainerRef,
+    ...rest
+  } = props;
+  const breakpoint = useBreakpoint();
+  const inputContainerRefLocal = useRef(null);
+  const inputIdState = useUuid(inputId);
+  const [input, setInput] = useState(defaultValue || "");
+  const [prevValue, setPrevValue] = useState(void 0);
+  const numKeyPressed = useRef(false);
+  const errorTextUuid = useUuid(errorTextId);
+  const numRegex = /^[0-9]$/;
+  useEffect(() => {
+    setInput(defaultValue || "");
+  }, [defaultValue]);
+  const onDark = onColor === FormOnColor.ondark;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;
+  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
+  const isLarge = size === FormSize.large;
+  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;
+  const inputWrapperClass = classNames(styles["input-wrapper"], className);
+  const inputContainer = classNames(styles["input-container"], {
+    [styles["input-container--transparent"]]: isTransparent,
+    [styles["input-container--on-blueberry"]]: onBlueberry,
+    [styles["input-container--on-dark"]]: onDark,
+    [styles["input-container--invalid"]]: onError,
+    [styles["input-container--large"]]: isLarge,
+    [styles["input-container--disabled"]]: disabled,
+    [styles["input-container--with-icon"]]: icon
+  });
+  const inputClass = classNames(styles["input-container__input"], {
+    [styles["input-container__input--large"]]: isLarge,
+    [styles["input-container__input--disabled"]]: disabled
+  });
+  const iconColor = disabled ? getColor("neutral", 700) : getColor("black");
+  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;
+  const renderIcon = () => {
+    if (!icon) {
+      return;
+    }
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx(LazyIcon, { className: styles["input-container__input__icon"], color: iconColor, size: iconSize, iconName: icon });
+    }
+    return /* @__PURE__ */ jsx(Icon, { className: styles["input-container__input__icon"], color: iconColor, size: iconSize, svgIcon: icon });
+  };
+  const handleClick = (e) => {
+    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {
+      const selectedChild = iconRight ? 0 : 1;
+      const input2 = inputContainerRefLocal.current.children[selectedChild];
+      input2.focus();
+      props.onClick && props.onClick(e);
+    }
+  };
+  const handleChange = (e) => {
+    const newValue = getIncrementValue(e);
+    if (onChange) {
+      onChange(e);
+    }
+    setInput(newValue);
+    setPrevValue(newValue);
+  };
+  const getIncrementValue = (e) => {
+    if (typeof baseIncrementValue === "undefined" || type !== "number") return e.target.value;
+    const valueAsNumber = Number(e.target.value);
+    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {
+      e.target.value = baseIncrementValue + "";
+    }
+    return e.target.value;
+  };
+  const handleKeyDown = (e) => {
+    if (numRegex.test(e.key)) {
+      numKeyPressed.current = true;
+    }
+    onKeyDown && onKeyDown(e);
+  };
+  const handleKeyUp = (e) => {
+    if (numRegex.test(e.key)) {
+      numKeyPressed.current = false;
     }
-  }, be = (r) => {
-    const a = Ce(r);
-    w && w(r), E(a), ce(a);
-  }, Ce = (r) => {
-    if (typeof N > "u" || h !== "number") return r.target.value;
-    const a = Number(r.target.value);
-    return !se && !b.current && (a === 1 || a === -1) && (r.target.value = N + ""), r.target.value;
-  }, xe = (r) => {
-    A.test(r.key) && (b.current = !0), R && R(r);
-  }, ve = (r) => {
-    A.test(r.key) && (b.current = !1);
-  }, K = I ? $e(I, !!n, v) : void 0;
-  return /* @__PURE__ */ s(Ee, { className: J, errorText: k, errorTextId: z, children: /* @__PURE__ */ _("div", { "data-testid": Q, "data-analyticsid": ke.Input, className: pe, ref: j, children: [
-    Ae(X, W, i),
-    /* @__PURE__ */ _("div", { className: t["content-wrapper"], children: [
-      /* @__PURE__ */ _(
+  };
+  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : void 0;
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Input, className: inputWrapperClass, ref: inputWrapperRef, children: [
+    renderLabel(label, inputIdState, onColor),
+    /* @__PURE__ */ jsxs("div", { className: styles["content-wrapper"], children: [
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: ge,
-          ref: Se([m, ae]),
-          className: fe,
-          style: { maxWidth: K },
+          onClick: handleClick,
+          ref: mergeRefs([inputContainerRefLocal, inputContainerRef]),
+          className: inputContainer,
+          style: { maxWidth },
           children: [
-            !g && D(),
-            /* @__PURE__ */ s(
+            !iconRight && renderIcon(),
+            /* @__PURE__ */ jsx(
               "input",
               {
-                onChange: be,
-                onKeyDown: xe,
-                onKeyUp: ve,
-                name: M,
-                type: h,
-                defaultValue: o,
-                id: W,
-                className: he,
-                ref: l,
-                "aria-labelledby": e["aria-labelledby"] ?? void 0,
-                "aria-describedby": We(e, z),
-                "aria-invalid": !!C,
-                disabled: u,
-                placeholder: f,
-                readOnly: T,
-                autoComplete: Y || "off",
-                required: te,
-                autoFocus: re,
-                ...oe
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                onKeyUp: handleKeyUp,
+                name,
+                type,
+                defaultValue,
+                id: inputIdState,
+                className: inputClass,
+                ref,
+                "aria-labelledby": props["aria-labelledby"] ?? void 0,
+                "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+                "aria-invalid": !!onError,
+                disabled,
+                placeholder,
+                readOnly,
+                autoComplete: autoComplete || "off",
+                required,
+                autoFocus,
+                ...rest
               }
             ),
-            g && D()
+            iconRight && renderIcon()
           ]
         }
       ),
-      /* @__PURE__ */ s("div", { className: t["content-wrapper__right-of-input"], children: ee })
+      /* @__PURE__ */ jsx("div", { className: styles["content-wrapper__right-of-input"], children: rightOfInput })
     ] }),
-    d && /* @__PURE__ */ s(
-      De,
+    maxCharacters && /* @__PURE__ */ jsx(
+      MaxCharacters,
       {
-        maxCharacters: d,
-        length: S.toString().length,
-        maxText: ne,
-        onColor: i,
-        maxWidth: K
+        maxCharacters,
+        length: input.toString().length,
+        maxText,
+        onColor,
+        maxWidth
       }
     ),
-    Z
+    afterInputChildren
   ] }) });
 });
-Le.displayName = "Input";
+Input.displayName = "Input";
 export {
-  Le as I,
-  Ke as a
+  Input as I,
+  InputTypes as a
 };
 //# sourceMappingURL=Input.js.map