@telia/teddy 0.0.24 → 0.0.26

package/dist/components/icon/icon.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const iconsHref = require("../../assets/sprite.5636ec8e-teddy.svg");
+const clsx = require("clsx");
+const styles = {
+  "teddy-icon": "_teddy-icon_1rwgf_2",
+  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
+  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
+  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
+  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
+  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
+  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+};
+const rootClassName = "teddy-icon";
+const rootClassNameWithChildren = `${rootClassName}-with-children`;
+function Icon({ name, size = "font", className, children, ...props }) {
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx([styles[rootClassNameWithChildren]]), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { name, size, className, ...props }),
+      children
+    ] });
+  }
+  const classes = clsx([styles[rootClassName], styles[`${rootClassName}--${size}`]], className);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("use", { href: `${iconsHref}#${name}` }) });
+}
+exports.Icon = Icon;

package/dist/components/icon/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const iconsHref = require("../../assets/sprite.5636ec8e-teddy.svg");
+const components_icon_icon = require("./icon.cjs");
+const components_icon_AllIcons = require("./AllIcons.cjs");
+exports.iconsHref = iconsHref;
+exports.Icon = components_icon_icon.Icon;
+exports.AllIcons = components_icon_AllIcons;

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

@@ -1,5 +1,6 @@
 import { default as iconsHref } from '../../icons/sprite.svg';
 
 export { Icon } from './icon';
+export { default as AllIcons } from './AllIcons';
 export type { IconName, IconProps } from './icon';
 export { iconsHref };

package/dist/components/icon/index.js

@@ -1,6 +1,8 @@
 import { default as default2 } from "../../assets/sprite.5636ec8e-teddy.svg";
 import { Icon } from "./icon.js";
+import { default as default3 } from "./AllIcons.js";
 export {
+  default3 as AllIcons,
   Icon,
   default2 as iconsHref
 };

package/dist/components/image/image.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
+const styles = {
+  "teddy-image": "_teddy-image_oyxp8_1"
+};
+const rootClassName = "teddy-image";
+const Image = React.forwardRef((props, forwardRef) => {
+  const { className, ...rest } = utils_generateStyling_index.extractProps(props);
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { ...rest, ref: forwardRef, className: classes });
+});
+Image.displayName = "Image";
+exports.Image = Image;

package/dist/components/image/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_image_image = require("./image.cjs");
+exports.Image = components_image_image.Image;

package/dist/components/index.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_scrollArea_index = require("./scroll-area/index.cjs");
+const components_tabs_index = require("./tabs/index.cjs");
+const components_drawer_index = require("./drawer/index.cjs");
+const components_image_image = require("./image/image.cjs");
+const components_chip_index = require("./chip/index.cjs");
+const components_modal_modal = require("./modal/modal.cjs");
+const components_notification_notification = require("./notification/notification.cjs");
+const components_radioGroup_radioGroup = require("./radio-group/radio-group.cjs");
+const components_box_box = require("./box/box.cjs");
+const components_flex_flex = require("./flex/flex.cjs");
+const components_card_card = require("./card/card.cjs");
+const components_grid_grid = require("./grid/grid.cjs");
+const components_navigationMenu_navigationMenu = require("./navigation-menu/navigation-menu.cjs");
+const components_toggle_toggle = require("./toggle/toggle.cjs");
+const components_accordion_index = require("./accordion/index.cjs");
+const components_link_link = require("./link/link.cjs");
+const components_badge_badge = require("./badge/badge.cjs");
+const components_button_button = require("./button/button.cjs");
+const components_fieldErrorText_fieldErrorText = require("./field-error-text/field-error-text.cjs");
+const components_helperText_helperText = require("./helper-text/helper-text.cjs");
+const iconsHref = require("../assets/sprite.5636ec8e-teddy.svg");
+const components_icon_icon = require("./icon/icon.cjs");
+const components_icon_AllIcons = require("./icon/AllIcons.cjs");
+const components_input_index = require("./input/index.cjs");
+const components_label_label = require("./label/label.cjs");
+const components_spinner_spinner = require("./spinner/spinner.cjs");
+const components_text_text = require("./text/text.cjs");
+const components_textField_index = require("./text-field/index.cjs");
+const components_heading_heading = require("./heading/heading.cjs");
+const components_visuallyHidden_visuallyHidden = require("./visually-hidden/visually-hidden.cjs");
+const components_textSpacing_textSpacing = require("./text-spacing/text-spacing.cjs");
+const components_input_inputGroup = require("./input/input-group.cjs");
+exports.ScrollArea = components_scrollArea_index.ScrollArea;
+exports.Tabs = components_tabs_index.Tabs;
+exports.Drawer = components_drawer_index.Drawer;
+exports.Image = components_image_image.Image;
+exports.Chip = components_chip_index.Chip;
+exports.Modal = components_modal_modal.Modal;
+exports.Notification = components_notification_notification.Notification;
+exports.RadioGroup = components_radioGroup_radioGroup.RadioGroup;
+exports.Box = components_box_box.Box;
+exports.Flex = components_flex_flex.Flex;
+exports.Card = components_card_card.Card;
+exports.Grid = components_grid_grid.Grid;
+exports.NavigationMenu = components_navigationMenu_navigationMenu.NavigationMenu;
+exports.Toggle = components_toggle_toggle.Toggle;
+exports.Accordion = components_accordion_index.Accordion;
+exports.Link = components_link_link.Link;
+exports.Badge = components_badge_badge.Badge;
+exports.Button = components_button_button.Button;
+exports.FieldErrorText = components_fieldErrorText_fieldErrorText.FieldErrorText;
+exports.HelperText = components_helperText_helperText.HelperText;
+exports.iconsHref = iconsHref;
+exports.Icon = components_icon_icon.Icon;
+exports.AllIcons = components_icon_AllIcons;
+exports.InputGroup = components_input_index.InputGroup;
+exports.Label = components_label_label.Label;
+exports.Spinner = components_spinner_spinner.Spinner;
+exports.Text = components_text_text.Text;
+exports.TextField = components_textField_index.TextField;
+exports.Heading = components_heading_heading.Heading;
+exports.VisuallyHidden = components_visuallyHidden_visuallyHidden.VisuallyHidden;
+exports.TextSpacing = components_textSpacing_textSpacing.TextSpacing;
+exports.Input = components_input_inputGroup.Input;

package/dist/components/index.js

@@ -20,16 +20,19 @@ import { FieldErrorText } from "./field-error-text/field-error-text.js";
 import { HelperText } from "./helper-text/helper-text.js";
 import { default as default2 } from "../assets/sprite.5636ec8e-teddy.svg";
 import { Icon } from "./icon/icon.js";
-import { Input, InputGroup } from "./input/input.js";
+import { default as default3 } from "./icon/AllIcons.js";
+import { InputGroup } from "./input/index.js";
 import { Label } from "./label/label.js";
 import { Spinner } from "./spinner/spinner.js";
 import { Text } from "./text/text.js";
-import { TextField } from "./text-field/text-field.js";
+import { TextField } from "./text-field/index.js";
 import { Heading } from "./heading/heading.js";
 import { VisuallyHidden } from "./visually-hidden/visually-hidden.js";
 import { TextSpacing } from "./text-spacing/text-spacing.js";
+import { I } from "./input/input-group.js";
 export {
   Accordion,
+  default3 as AllIcons,
   Badge,
   Box,
   Button,
@@ -43,7 +46,7 @@ export {
   HelperText,
   Icon,
   Image,
-  Input,
+  I as Input,
   InputGroup,
   Label,
   Link,

package/dist/components/input/index.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_input_inputGroup = require("./input-group.cjs");
+const components_input_inputClearButton = require("./input-clear-button.cjs");
+components_input_inputGroup.Root.displayName = "InputGroup";
+components_input_inputGroup.Input.displayName = "InputGroup.Input";
+components_input_inputGroup.Indicator.displayName = "InputGroup.Indicator";
+const InputGroup = Object.assign(components_input_inputGroup.Root, {
+  Input: components_input_inputGroup.Input,
+  Indicator: components_input_inputGroup.Indicator,
+  ClearButton: components_input_inputClearButton.ClearButton
+});
+exports.Input = components_input_inputGroup.Input;
+exports.InputGroup = InputGroup;

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

@@ -1,2 +1,27 @@
-export { Input, InputGroup } from './input';
-export type { InputGroupProps, InputProps } from './input';
+import { Input, InputProps } from './input';
+import { InputIndicatorProps } from './input-indicator';
+import { InputGroupRootProps } from './input-group';
+import { ClearButtonProps } from './input-clear-button';
+
+declare const InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    frameClassName?: string | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Input: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
+        validationState?: ("invalid" | "valid") | undefined;
+        isLoading?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+    } & import('react').RefAttributes<HTMLInputElement>>;
+    Indicator: import('react').ForwardRefExoticComponent<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+        isValid?: boolean | undefined;
+        isLoading?: boolean | undefined;
+    } & import('react').RefAttributes<SVGSVGElement>>;
+    ClearButton: import('react').ForwardRefExoticComponent<ClearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+type InputGroupProps = {
+    Root: InputGroupRootProps;
+    Input: InputProps;
+    Indicator: InputIndicatorProps;
+    ClearButton: ClearButtonProps;
+};
+export { Input, InputGroup };
+export type { InputGroupProps, InputProps };

package/dist/components/input/index.js

@@ -1,4 +1,13 @@
-import { Input, InputGroup } from "./input.js";
+import { Root, I as Input, a as Indicator } from "./input-group.js";
+import { ClearButton } from "./input-clear-button.js";
+Root.displayName = "InputGroup";
+Input.displayName = "InputGroup.Input";
+Indicator.displayName = "InputGroup.Indicator";
+const InputGroup = Object.assign(Root, {
+  Input,
+  Indicator,
+  ClearButton
+});
 export {
   Input,
   InputGroup

package/dist/components/input/input-clear-button.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+require("../../assets/sprite.5636ec8e-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_button_button = require("../button/button.cjs");
+const clsx = require("clsx");
+const components_input_inputGroup = require("./input-group.cjs");
+const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
+const ClearButton = React.forwardRef(
+  ({ children, className, ...props }, forwardRef) => {
+    const groupContext = React.useContext(components_input_inputGroup.InputGroupContext);
+    const hidden = !(groupContext == null ? void 0 : groupContext.isDirty);
+    const classes = clsx([components_input_inputGroup.styles[`${components_input_inputGroup.rootClassName}__clear-button`]], className);
+    if (hidden) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_button_button.Button,
+      {
+        size: "sm",
+        variant: "tertiary-purple",
+        iconOnly: true,
+        "aria-label": "Slett",
+        type: "button",
+        ref: forwardRef,
+        onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
+          e.stopPropagation();
+          if (e.defaultPrevented || !(groupContext == null ? void 0 : groupContext.inputRef.current))
+            return;
+          groupContext.inputRef.current.value = "";
+          groupContext.inputRef.current.focus();
+        }),
+        ...props,
+        className: classes,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "ClearButton";
+exports.ClearButton = ClearButton;

package/dist/components/input/input-clear-button.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { Button } from '../button';
+
+export type ClearButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
+/** This is a button that is used to clear the input field  */
+export declare const ClearButton: React.ForwardRefExoticComponent<ClearButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/input/input-clear-button.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import "../../assets/sprite.5636ec8e-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { Button } from "../button/button.js";
+import clsx from "clsx";
+import { InputGroupContext, s as styles, r as rootClassName } from "./input-group.js";
+import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
+const ClearButton = React__default.forwardRef(
+  ({ children, className, ...props }, forwardRef) => {
+    const groupContext = React__default.useContext(InputGroupContext);
+    const hidden = !(groupContext == null ? void 0 : groupContext.isDirty);
+    const classes = clsx([styles[`${rootClassName}__clear-button`]], className);
+    if (hidden) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "tertiary-purple",
+        iconOnly: true,
+        "aria-label": "Slett",
+        type: "button",
+        ref: forwardRef,
+        onClick: composeEventHandlers(props.onClick, (e) => {
+          e.stopPropagation();
+          if (e.defaultPrevented || !(groupContext == null ? void 0 : groupContext.inputRef.current))
+            return;
+          groupContext.inputRef.current.value = "";
+          groupContext.inputRef.current.focus();
+        }),
+        ...props,
+        className: classes,
+        children: children || /* @__PURE__ */ jsx(Icon, { name: "close" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "ClearButton";
+export {
+  ClearButton
+};

package/dist/components/input/input-group.cjs

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+require("../../assets/sprite.5636ec8e-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_spinner_spinner = require("../spinner/spinner.cjs");
+const utils_composeRefs = require("../../utils/composeRefs.cjs");
+const fadeInAnimation = "_fadeInAnimation_5urff_1";
+const scaleInAnimation = "_scaleInAnimation_5urff_1";
+const styles = {
+  "teddy-input": "_teddy-input_5urff_18",
+  "teddy-input__frame": "_teddy-input__frame_5urff_27",
+  "teddy-input__clear-button": "_teddy-input__clear-button_5urff_35",
+  "teddy-input__input": "_teddy-input__input_5urff_38",
+  "teddy-input__input--valid": "_teddy-input__input--valid_5urff_79",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_5urff_79",
+  "teddy-input__indicator": "_teddy-input__indicator_5urff_85",
+  "teddy-input__input--error": "_teddy-input__input--error_5urff_88",
+  fadeInAnimation,
+  scaleInAnimation
+};
+function setCursorOnInput(e) {
+  const target = e == null ? void 0 : e.target;
+  if (target.closest("input, button, a"))
+    return;
+  const input = [...e.currentTarget.getElementsByTagName("input")].find((input2) => input2);
+  if (!input)
+    return;
+  const position = input.compareDocumentPosition(target);
+  const targetIsBeforeInput = (position & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+  const cursorPosition = targetIsBeforeInput ? 0 : input.value.length;
+  requestAnimationFrame(() => {
+    try {
+      input.setSelectionRange(cursorPosition, cursorPosition);
+    } finally {
+      input.focus();
+    }
+  });
+}
+const InputGroupContext = React.createContext(void 0);
+const Root = React.forwardRef(
+  ({ className, children, frameClassName, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    const inputRef = React.useRef(null);
+    const [isDirty, setIsDirty] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, onPointerDown: setCursorOnInput, ref: forwardRef, className: classes, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputGroupContext.Provider, { value: { isDirty, setIsDirty, inputRef }, children }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles[`${rootClassName}__frame`], frameClassName) })
+    ] });
+  }
+);
+Root.displayName = "Root";
+const Indicator = React.forwardRef(
+  ({ className, isLoading, isValid, ...props }, forwardRef) => {
+    if (!isValid && !isLoading)
+      return null;
+    if (!isValid && isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components_spinner_spinner.Spinner, { className, size: "xs", ...props, ref: forwardRef });
+    }
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { ...props, size: "md", name: "check-circle-filled", className: classes, ref: forwardRef });
+  }
+);
+Indicator.displayName = "Indicator";
+const rootClassName = "teddy-input";
+const Input = React.forwardRef(
+  ({ className, onValueChange, isLoading, validationState, ...props }, forwardRef) => {
+    const groupContext = React.useContext(InputGroupContext);
+    const composedRef = utils_composeRefs.useComposedRefs(forwardRef, groupContext == null ? void 0 : groupContext.inputRef);
+    const classes = clsx(
+      [
+        styles[`${rootClassName}__input`],
+        {
+          [styles[`${rootClassName}__input--valid`]]: validationState === "valid",
+          [styles[`${rootClassName}__input--error`]]: validationState === "invalid"
+        }
+      ],
+      className
+    );
+    React.useEffect(() => {
+      var _a, _b;
+      if (!groupContext)
+        return;
+      if ((_b = (_a = groupContext == null ? void 0 : groupContext.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.value.length) {
+        return groupContext.setIsDirty(true);
+      }
+      groupContext.setIsDirty(false);
+    }, [groupContext]);
+    const hasInputGroup = groupContext !== void 0;
+    function onChange(e) {
+      var _a;
+      onValueChange == null ? void 0 : onValueChange(e.target.value);
+      groupContext == null ? void 0 : groupContext.setIsDirty(((_a = e.target) == null ? void 0 : _a.value.length) > 0);
+      if (props.onChange)
+        props.onChange(e);
+    }
+    if (hasInputGroup) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "aria-invalid": validationState === "invalid",
+          ...props,
+          onChange,
+          className: classes,
+          ref: composedRef
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "aria-invalid": validationState === "invalid",
+          ...props,
+          onChange,
+          className: classes,
+          ref: composedRef
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Indicator, { isValid: validationState === "valid", isLoading })
+    ] });
+  }
+);
+Input.displayName = "Input";
+exports.Indicator = Indicator;
+exports.Input = Input;
+exports.InputGroupContext = InputGroupContext;
+exports.Root = Root;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

package/dist/components/input/input-group.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export type InputGroupRootProps = React.ComponentPropsWithoutRef<'div'> & {
+    frameClassName?: string;
+};
+type InputGroupContextValue = {
+    isDirty: boolean;
+    setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
+    inputRef: React.RefObject<HTMLInputElement>;
+};
+export declare const InputGroupContext: React.Context<InputGroupContextValue | undefined>;
+/** This is the element that wraps the input element gives the outline effect */
+export declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    frameClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/input/input-group.js

@@ -0,0 +1,132 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default, { useEffect } from "react";
+import "../../assets/sprite.5636ec8e-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { Spinner } from "../spinner/spinner.js";
+import { useComposedRefs } from "../../utils/composeRefs.js";
+const fadeInAnimation = "_fadeInAnimation_5urff_1";
+const scaleInAnimation = "_scaleInAnimation_5urff_1";
+const styles = {
+  "teddy-input": "_teddy-input_5urff_18",
+  "teddy-input__frame": "_teddy-input__frame_5urff_27",
+  "teddy-input__clear-button": "_teddy-input__clear-button_5urff_35",
+  "teddy-input__input": "_teddy-input__input_5urff_38",
+  "teddy-input__input--valid": "_teddy-input__input--valid_5urff_79",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_5urff_79",
+  "teddy-input__indicator": "_teddy-input__indicator_5urff_85",
+  "teddy-input__input--error": "_teddy-input__input--error_5urff_88",
+  fadeInAnimation,
+  scaleInAnimation
+};
+function setCursorOnInput(e) {
+  const target = e == null ? void 0 : e.target;
+  if (target.closest("input, button, a"))
+    return;
+  const input = [...e.currentTarget.getElementsByTagName("input")].find((input2) => input2);
+  if (!input)
+    return;
+  const position = input.compareDocumentPosition(target);
+  const targetIsBeforeInput = (position & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+  const cursorPosition = targetIsBeforeInput ? 0 : input.value.length;
+  requestAnimationFrame(() => {
+    try {
+      input.setSelectionRange(cursorPosition, cursorPosition);
+    } finally {
+      input.focus();
+    }
+  });
+}
+const InputGroupContext = React__default.createContext(void 0);
+const Root = React__default.forwardRef(
+  ({ className, children, frameClassName, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], className);
+    const inputRef = React__default.useRef(null);
+    const [isDirty, setIsDirty] = React__default.useState(false);
+    return /* @__PURE__ */ jsxs("div", { ...props, onPointerDown: setCursorOnInput, ref: forwardRef, className: classes, children: [
+      /* @__PURE__ */ jsx(InputGroupContext.Provider, { value: { isDirty, setIsDirty, inputRef }, children }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles[`${rootClassName}__frame`], frameClassName) })
+    ] });
+  }
+);
+Root.displayName = "Root";
+const Indicator = React__default.forwardRef(
+  ({ className, isLoading, isValid, ...props }, forwardRef) => {
+    if (!isValid && !isLoading)
+      return null;
+    if (!isValid && isLoading) {
+      return /* @__PURE__ */ jsx(Spinner, { className, size: "xs", ...props, ref: forwardRef });
+    }
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsx(Icon, { ...props, size: "md", name: "check-circle-filled", className: classes, ref: forwardRef });
+  }
+);
+Indicator.displayName = "Indicator";
+const rootClassName = "teddy-input";
+const Input = React__default.forwardRef(
+  ({ className, onValueChange, isLoading, validationState, ...props }, forwardRef) => {
+    const groupContext = React__default.useContext(InputGroupContext);
+    const composedRef = useComposedRefs(forwardRef, groupContext == null ? void 0 : groupContext.inputRef);
+    const classes = clsx(
+      [
+        styles[`${rootClassName}__input`],
+        {
+          [styles[`${rootClassName}__input--valid`]]: validationState === "valid",
+          [styles[`${rootClassName}__input--error`]]: validationState === "invalid"
+        }
+      ],
+      className
+    );
+    useEffect(() => {
+      var _a, _b;
+      if (!groupContext)
+        return;
+      if ((_b = (_a = groupContext == null ? void 0 : groupContext.inputRef) == null ? void 0 : _a.current) == null ? void 0 : _b.value.length) {
+        return groupContext.setIsDirty(true);
+      }
+      groupContext.setIsDirty(false);
+    }, [groupContext]);
+    const hasInputGroup = groupContext !== void 0;
+    function onChange(e) {
+      var _a;
+      onValueChange == null ? void 0 : onValueChange(e.target.value);
+      groupContext == null ? void 0 : groupContext.setIsDirty(((_a = e.target) == null ? void 0 : _a.value.length) > 0);
+      if (props.onChange)
+        props.onChange(e);
+    }
+    if (hasInputGroup) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-invalid": validationState === "invalid",
+          ...props,
+          onChange,
+          className: classes,
+          ref: composedRef
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Root, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-invalid": validationState === "invalid",
+          ...props,
+          onChange,
+          className: classes,
+          ref: composedRef
+        }
+      ),
+      /* @__PURE__ */ jsx(Indicator, { isValid: validationState === "valid", isLoading })
+    ] });
+  }
+);
+Input.displayName = "Input";
+export {
+  Input as I,
+  InputGroupContext,
+  Root,
+  Indicator as a,
+  rootClassName as r,
+  styles as s
+};

package/dist/components/input/input-indicator.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("react/jsx-runtime");
+require("clsx");
+require("react");
+require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../icon/icon.cjs");
+require("../spinner/spinner.cjs");
+const components_input_inputGroup = require("./input-group.cjs");
+exports.Indicator = components_input_inputGroup.Indicator;

package/dist/components/input/input-indicator.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+
+export type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Whether the input is invalid.
+     */
+    isValid?: boolean;
+    /**
+     * Whether the input is loading.
+     */
+    isLoading?: boolean;
+};
+/** This element displays the validation state, e.g. "valid", "loading" */
+export declare const Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    /**
+     * Whether the input is invalid.
+     */
+    isValid?: boolean | undefined;
+    /**
+     * Whether the input is loading.
+     */
+    isLoading?: boolean | undefined;
+} & React.RefAttributes<SVGSVGElement>>;