@persona/design-system 0.1.5-pre.4

package/dist/Input-DHOsR4cl.cjs

@@ -0,0 +1,210 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_input = require("./mixins/input.cjs");
+const require_Text = require("./Text-DVz8erdF.cjs");
+const require_IconButton = require("./IconButton-B1ZL8BqW.cjs");
+require("./components/Button/index.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
+let _persona_icons_12px = require("@persona/icons/12px");
+//#region components/Input/Input.tsx
+const Container = styled_components.default.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+const LeftIcon = styled_components.default.div`
+  position: absolute;
+  left: ${_persona_design_tokens.Spacing[2]};
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  font-size: 0px;
+  color: ${_persona_design_tokens.Color.BorderIconSecondary};
+  height: ${({ $size }) => $size === "sm" ? "12px" : "16px"};
+  width: ${({ $size }) => $size === "sm" ? "12px" : "16px"};
+  pointer-events: none;
+
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+`;
+const InputButtonContainer = styled_components.default.div`
+  position: absolute;
+  display: flex;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  right: ${({ $size }) => $size === "sm" ? "3px" : _persona_design_tokens.Spacing[1]};
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  font-size: 0px;
+`;
+const ClearButton = (0, styled_components.default)(require_IconButton.Button).attrs({
+	width: "icon",
+	variant: "basic"
+})`
+  background-color: transparent;
+  padding: 0;
+  height: ${({ size }) => size === "sm" ? "18px" : "24px"};
+  width: ${({ size }) => size === "sm" ? "18px" : "24px"};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  color: ${_persona_design_tokens.Color.BorderIconSecondary};
+
+  ${({ disabled }) => disabled && styled_components.css`
+      color: ${_persona_design_tokens.Color.BorderIconDisabled};
+    `}
+
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: transparent;
+  }
+
+  svg {
+    height: ${({ size }) => size === "sm" ? "12px" : "16px"};
+    width: ${({ size }) => size === "sm" ? "12px" : "16px"};
+  }
+`;
+const SuffixTextContainer = styled_components.default.div`
+  position: absolute;
+  right: ${_persona_design_tokens.Spacing[2]};
+  top: ${({ $size }) => $size === "sm" ? "2px" : "6px"};
+`;
+const InputBase = styled_components.default.input`
+  ${require_mixins_input};
+  line-height: 1;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.color.text.secondary};
+  }
+
+  ${({ $size, $leftIcon, $hasRightItem }) => {
+	let btnSpacing;
+	switch ($size) {
+		default:
+		case "md":
+			btnSpacing = `calc(${_persona_design_tokens.Spacing[3]} + 16px + ${_persona_design_tokens.Spacing[1]})`;
+			return styled_components.css`
+          padding-right: ${$hasRightItem ? btnSpacing : _persona_design_tokens.Spacing[3]};
+          padding-left: ${$leftIcon ? btnSpacing : _persona_design_tokens.Spacing[3]};
+        `;
+		case "sm":
+			btnSpacing = `calc(${_persona_design_tokens.Spacing[2]} + 16px + ${_persona_design_tokens.Spacing[1]})`;
+			return styled_components.css`
+          padding-right: ${$hasRightItem ? btnSpacing : _persona_design_tokens.Spacing[2]};
+          padding-left: ${$leftIcon ? btnSpacing : _persona_design_tokens.Spacing[2]};
+        `;
+	}
+}}
+`;
+const Input = (0, react.forwardRef)(function Input({ size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props }, ref) {
+	const field = require_useFormField.useFormField({
+		hasWarning,
+		hasError,
+		disabled,
+		inputId: id,
+		maxLength
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputBase, {
+		$size: size,
+		$leftIcon: leftIcon,
+		$hasRightItem: hasRightItem,
+		ref,
+		id: field.inputId,
+		"aria-describedby": `${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ""}`,
+		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+		"aria-invalid": field.hasError,
+		hasWarning: field.hasWarning,
+		hasError: field.hasError,
+		disabled: field.disabled,
+		maxLength: field.maxLength,
+		...props,
+		size: props.inputSize
+	});
+});
+const InputGroup = (0, react.forwardRef)(function InputGroup({ size = "md", leftIcon, onClear, rightButton, children, disabled, hasWarning, hasError, suffix, ...props }, ref) {
+	const field = require_useFormField.useFormField({
+		hasWarning,
+		hasError,
+		disabled
+	});
+	const inputButtonContainerRef = (0, react.useRef)();
+	const [inputPaddingRight, setInputPaddingRight] = (0, react.useState)(null);
+	const suffixContainerRef = (0, react.useRef)(null);
+	const [suffixPaddingRight, setSuffixPaddingRight] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (rightButton && inputButtonContainerRef.current) setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);
+	}, [setInputPaddingRight]);
+	(0, react.useEffect)(() => {
+		if (suffix && suffixContainerRef.current) setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);
+	}, [suffix, setSuffixPaddingRight]);
+	const rightButtonStyles = size === "sm" ? { height: "18px" } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormField.FormControlContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+			ref,
+			...props,
+			children: [
+				leftIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftIcon, {
+					$size: size,
+					children: leftIcon
+				}),
+				(0, react.cloneElement)(children, {
+					size,
+					leftIcon,
+					...rightButton ? { rightButton } : {},
+					hasRightItem: onClear || suffix,
+					style: inputPaddingRight || suffixPaddingRight ? { paddingRight: inputPaddingRight || suffixPaddingRight } : {}
+				}),
+				suffix && !(onClear || rightButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuffixTextContainer, {
+					$size: size,
+					ref: suffixContainerRef,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+						size,
+						children: suffix
+					})
+				}),
+				(onClear || rightButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputButtonContainer, {
+					ref: inputButtonContainerRef,
+					$size: size,
+					children: [onClear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearButton, {
+						onClick: onClear,
+						disabled: field.disabled,
+						"aria-label": "Clear",
+						size,
+						children: size === "sm" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleXInverseIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleXInverseIcon, {})
+					}), rightButton && (0, react.cloneElement)(rightButton, {
+						size: "sm",
+						width: rightButton.props.width || "auto",
+						style: rightButtonStyles
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+Object.defineProperty(exports, "ClearButton", {
+	enumerable: true,
+	get: function() {
+		return ClearButton;
+	}
+});
+Object.defineProperty(exports, "Input", {
+	enumerable: true,
+	get: function() {
+		return Input;
+	}
+});
+Object.defineProperty(exports, "InputGroup", {
+	enumerable: true,
+	get: function() {
+		return InputGroup;
+	}
+});
+
+//# sourceMappingURL=Input-DHOsR4cl.cjs.map

package/dist/Input-DHOsR4cl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-DHOsR4cl.cjs","names":["Spacing","Color","Button","BorderRadius","isHovered","isNotDisabled","inputMixin","useFormField","FormControlContext","Paragraph","SmallCircleXInverseIcon","CircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n  FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  left: ${Spacing[2]};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n  color: ${Color.BorderIconSecondary};\n  height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  pointer-events: none;\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  display: flex;\n  gap: ${Spacing[2]};\n  right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  border-radius: ${BorderRadius.Md};\n  color: ${Color.BorderIconSecondary};\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      color: ${Color.BorderIconDisabled};\n    `}\n\n  &${isHovered}${isNotDisabled} {\n    background-color: transparent;\n  }\n\n  svg {\n    height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n    width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n  }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n  $leftIcon?: ReactNode;\n  $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * `size` HTML attr on `<input>`\n   */\n  inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n  leftIcon?: StyledInputProps['$leftIcon'];\n  hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n  ${inputMixin};\n  line-height: 1;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.secondary};\n  }\n\n  ${({ $size, $leftIcon, $hasRightItem }) => {\n    let btnSpacing: string;\n    switch ($size) {\n      default:\n      case 'md':\n        btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n        `;\n      case 'sm':\n        btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n        `;\n    }\n  }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n  return (\n    <InputBase\n      $size={size}\n      $leftIcon={leftIcon}\n      $hasRightItem={hasRightItem}\n      ref={ref}\n      id={field.inputId}\n      aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n      aria-errormessage={field.hasError ? field.errorTextId : undefined}\n      aria-invalid={field.hasError}\n      hasWarning={field.hasWarning}\n      hasError={field.hasError}\n      disabled={field.disabled}\n      maxLength={field.maxLength}\n      {...props}\n      size={props.inputSize}\n    />\n  );\n});\n\nexport interface InputGroupProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Input\n   */\n  children: ReactElement<InputProps>;\n\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * Icon to render to the left of the input field.\n   *\n   * Import icon from `@persona-id/icons`. Use 24px for `lg` input size.\n   */\n  leftIcon?: ReactNode;\n\n  /**\n   * Renders clear button to the right and calls function upon click.\n   */\n  onClear?: MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Button to be rendered to the right of the input\n   */\n  rightButton?: ReactElement<ButtonProps>;\n\n  /**\n   * Disabled prop will be passed down to `<Input>`\n   */\n  disabled?: boolean;\n\n  /**\n   * Suffix text to be shown to the right of the input (inside the input field)\n   */\n  suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    size = 'md',\n    leftIcon,\n    onClear,\n    rightButton,\n    children,\n    disabled,\n    hasWarning,\n    hasError,\n    suffix,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled });\n  const inputButtonContainerRef = useRef<HTMLDivElement>();\n  const [inputPaddingRight, setInputPaddingRight] = useState<string | null>(null);\n\n  const suffixContainerRef = useRef<HTMLDivElement | null>(null);\n  const [suffixPaddingRight, setSuffixPaddingRight] = useState<string | null>(null);\n\n  useEffect(() => {\n    // We only need to calculate padding in presence of the right button\n    if (rightButton && inputButtonContainerRef.current) {\n      setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n    }\n  }, [setInputPaddingRight]);\n\n  useEffect(() => {\n    if (suffix && suffixContainerRef.current) {\n      // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n      setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n    }\n  }, [suffix, setSuffixPaddingRight]);\n\n  const rightButtonStyles: CSSProperties =\n    size === 'sm'\n      ? {\n          height: '18px',\n        }\n      : {};\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container ref={ref} {...props}>\n        {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n        {cloneElement(children, {\n          size,\n          leftIcon: leftIcon,\n          ...(rightButton ? { rightButton } : {}),\n          hasRightItem: onClear || suffix,\n          style:\n            inputPaddingRight || suffixPaddingRight\n              ? {\n                  paddingRight: inputPaddingRight || suffixPaddingRight,\n                }\n              : {},\n        })}\n\n        {/* Renders only if there's a suffix and NO button */}\n        {/* At some point, this should be moved so that it's not absolutely positioned, and\n        these are both wrapped within an \"input\" container */}\n        {suffix && !(onClear || rightButton) && (\n          <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n            <Paragraph size={size}>{suffix}</Paragraph>\n          </SuffixTextContainer>\n        )}\n\n        {(onClear || rightButton) && ( // TODO: Render only if value is present\n          /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n          <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n            {onClear && (\n              <ClearButton\n                onClick={onClear}\n                disabled={field.disabled}\n                aria-label='Clear'\n                size={size}\n              >\n                {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n              </ClearButton>\n            )}\n            {rightButton &&\n              cloneElement(rightButton, {\n                size: 'sm',\n                width: rightButton.props.width || 'auto',\n                style: rightButtonStyles,\n              })}\n          </InputButtonContainer>\n        )}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/Input-XppkvfUf.d.cts

@@ -0,0 +1,65 @@
+import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
+import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Input/Input.d.ts
+declare const ClearButton: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
+  width: "icon";
+  variant: "basic";
+} & PseudoClassProps, "width" | "variant">;
+interface StyledInputProps extends InputMixinProps {
+  $leftIcon?: ReactNode;
+  $hasRightItem?: boolean;
+}
+interface InputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {
+  /**
+   * Size of the input. If you need the HTML size attr, use inputSize.
+   */
+  size?: InputSizes;
+  /**
+   * `size` HTML attr on `<input>`
+   */
+  inputSize?: ComponentPropsWithoutRef<'input'>['size'];
+  leftIcon?: StyledInputProps['$leftIcon'];
+  hasRightItem?: boolean;
+}
+declare const Input: _$react.ForwardRefExoticComponent<InputProps & _$react.RefAttributes<HTMLInputElement>>;
+interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {
+  /**
+   * Input
+   */
+  children: ReactElement<InputProps>;
+  /**
+   * Size of the input. If you need the HTML size attr, use inputSize.
+   */
+  size?: InputSizes;
+  /**
+   * Icon to render to the left of the input field.
+   *
+   * Import icon from `@persona-id/icons`. Use 24px for `lg` input size.
+   */
+  leftIcon?: ReactNode;
+  /**
+   * Renders clear button to the right and calls function upon click.
+   */
+  onClear?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Button to be rendered to the right of the input
+   */
+  rightButton?: ReactElement<ButtonProps>;
+  /**
+   * Disabled prop will be passed down to `<Input>`
+   */
+  disabled?: boolean;
+  /**
+   * Suffix text to be shown to the right of the input (inside the input field)
+   */
+  suffix?: string;
+}
+declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
+//# sourceMappingURL=Input-XppkvfUf.d.cts.map

package/dist/Input-eoFk39bE.mjs

@@ -0,0 +1,191 @@
+import { isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import inputMixin from "./mixins/input.mjs";
+import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { n as Button } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-eftOPiXj.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
+import { CircleXInverseIcon } from "@persona/icons";
+import { CircleXInverseIcon as CircleXInverseIcon$1 } from "@persona/icons/12px";
+//#region components/Input/Input.tsx
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+const LeftIcon = styled.div`
+  position: absolute;
+  left: ${Spacing[2]};
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  font-size: 0px;
+  color: ${Color.BorderIconSecondary};
+  height: ${({ $size }) => $size === "sm" ? "12px" : "16px"};
+  width: ${({ $size }) => $size === "sm" ? "12px" : "16px"};
+  pointer-events: none;
+
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+`;
+const InputButtonContainer = styled.div`
+  position: absolute;
+  display: flex;
+  gap: ${Spacing[2]};
+  right: ${({ $size }) => $size === "sm" ? "3px" : Spacing[1]};
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  font-size: 0px;
+`;
+const ClearButton = styled(Button).attrs({
+	width: "icon",
+	variant: "basic"
+})`
+  background-color: transparent;
+  padding: 0;
+  height: ${({ size }) => size === "sm" ? "18px" : "24px"};
+  width: ${({ size }) => size === "sm" ? "18px" : "24px"};
+  border-radius: ${BorderRadius.Md};
+  color: ${Color.BorderIconSecondary};
+
+  ${({ disabled }) => disabled && css`
+      color: ${Color.BorderIconDisabled};
+    `}
+
+  &${isHovered}${isNotDisabled} {
+    background-color: transparent;
+  }
+
+  svg {
+    height: ${({ size }) => size === "sm" ? "12px" : "16px"};
+    width: ${({ size }) => size === "sm" ? "12px" : "16px"};
+  }
+`;
+const SuffixTextContainer = styled.div`
+  position: absolute;
+  right: ${Spacing[2]};
+  top: ${({ $size }) => $size === "sm" ? "2px" : "6px"};
+`;
+const InputBase = styled.input`
+  ${inputMixin};
+  line-height: 1;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.color.text.secondary};
+  }
+
+  ${({ $size, $leftIcon, $hasRightItem }) => {
+	let btnSpacing;
+	switch ($size) {
+		default:
+		case "md":
+			btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;
+			return css`
+          padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};
+          padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};
+        `;
+		case "sm":
+			btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;
+			return css`
+          padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};
+          padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};
+        `;
+	}
+}}
+`;
+const Input = forwardRef(function Input({ size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props }, ref) {
+	const field = useFormField({
+		hasWarning,
+		hasError,
+		disabled,
+		inputId: id,
+		maxLength
+	});
+	return /* @__PURE__ */ jsx(InputBase, {
+		$size: size,
+		$leftIcon: leftIcon,
+		$hasRightItem: hasRightItem,
+		ref,
+		id: field.inputId,
+		"aria-describedby": `${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ""}`,
+		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+		"aria-invalid": field.hasError,
+		hasWarning: field.hasWarning,
+		hasError: field.hasError,
+		disabled: field.disabled,
+		maxLength: field.maxLength,
+		...props,
+		size: props.inputSize
+	});
+});
+const InputGroup = forwardRef(function InputGroup({ size = "md", leftIcon, onClear, rightButton, children, disabled, hasWarning, hasError, suffix, ...props }, ref) {
+	const field = useFormField({
+		hasWarning,
+		hasError,
+		disabled
+	});
+	const inputButtonContainerRef = useRef();
+	const [inputPaddingRight, setInputPaddingRight] = useState(null);
+	const suffixContainerRef = useRef(null);
+	const [suffixPaddingRight, setSuffixPaddingRight] = useState(null);
+	useEffect(() => {
+		if (rightButton && inputButtonContainerRef.current) setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);
+	}, [setInputPaddingRight]);
+	useEffect(() => {
+		if (suffix && suffixContainerRef.current) setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);
+	}, [suffix, setSuffixPaddingRight]);
+	const rightButtonStyles = size === "sm" ? { height: "18px" } : {};
+	return /* @__PURE__ */ jsx(FormControlContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ jsxs(Container, {
+			ref,
+			...props,
+			children: [
+				leftIcon && /* @__PURE__ */ jsx(LeftIcon, {
+					$size: size,
+					children: leftIcon
+				}),
+				cloneElement(children, {
+					size,
+					leftIcon,
+					...rightButton ? { rightButton } : {},
+					hasRightItem: onClear || suffix,
+					style: inputPaddingRight || suffixPaddingRight ? { paddingRight: inputPaddingRight || suffixPaddingRight } : {}
+				}),
+				suffix && !(onClear || rightButton) && /* @__PURE__ */ jsx(SuffixTextContainer, {
+					$size: size,
+					ref: suffixContainerRef,
+					children: /* @__PURE__ */ jsx(Paragraph, {
+						size,
+						children: suffix
+					})
+				}),
+				(onClear || rightButton) && /* @__PURE__ */ jsxs(InputButtonContainer, {
+					ref: inputButtonContainerRef,
+					$size: size,
+					children: [onClear && /* @__PURE__ */ jsx(ClearButton, {
+						onClick: onClear,
+						disabled: field.disabled,
+						"aria-label": "Clear",
+						size,
+						children: size === "sm" ? /* @__PURE__ */ jsx(CircleXInverseIcon$1, {}) : /* @__PURE__ */ jsx(CircleXInverseIcon, {})
+					}), rightButton && cloneElement(rightButton, {
+						size: "sm",
+						width: rightButton.props.width || "auto",
+						style: rightButtonStyles
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { Input as n, InputGroup as r, ClearButton as t };
+
+//# sourceMappingURL=Input-eoFk39bE.mjs.map

package/dist/Input-eoFk39bE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-eoFk39bE.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n  FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n  display: flex;\n  position: relative;\n  width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  left: ${Spacing[2]};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n  color: ${Color.BorderIconSecondary};\n  height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n  pointer-events: none;\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n  position: absolute;\n  display: flex;\n  gap: ${Spacing[2]};\n  right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0;\n  font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n  border-radius: ${BorderRadius.Md};\n  color: ${Color.BorderIconSecondary};\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      color: ${Color.BorderIconDisabled};\n    `}\n\n  &${isHovered}${isNotDisabled} {\n    background-color: transparent;\n  }\n\n  svg {\n    height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n    width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n  }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n  position: absolute;\n  right: ${Spacing[2]};\n  top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n  $leftIcon?: ReactNode;\n  $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * `size` HTML attr on `<input>`\n   */\n  inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n  leftIcon?: StyledInputProps['$leftIcon'];\n  hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n  ${inputMixin};\n  line-height: 1;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.secondary};\n  }\n\n  ${({ $size, $leftIcon, $hasRightItem }) => {\n    let btnSpacing: string;\n    switch ($size) {\n      default:\n      case 'md':\n        btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n        `;\n      case 'sm':\n        btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n        return css`\n          padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n          padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n        `;\n    }\n  }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n  return (\n    <InputBase\n      $size={size}\n      $leftIcon={leftIcon}\n      $hasRightItem={hasRightItem}\n      ref={ref}\n      id={field.inputId}\n      aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n      aria-errormessage={field.hasError ? field.errorTextId : undefined}\n      aria-invalid={field.hasError}\n      hasWarning={field.hasWarning}\n      hasError={field.hasError}\n      disabled={field.disabled}\n      maxLength={field.maxLength}\n      {...props}\n      size={props.inputSize}\n    />\n  );\n});\n\nexport interface InputGroupProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n  /**\n   * Input\n   */\n  children: ReactElement<InputProps>;\n\n  /**\n   * Size of the input. If you need the HTML size attr, use inputSize.\n   */\n  size?: InputSizes;\n\n  /**\n   * Icon to render to the left of the input field.\n   *\n   * Import icon from `@persona-id/icons`. Use 24px for `lg` input size.\n   */\n  leftIcon?: ReactNode;\n\n  /**\n   * Renders clear button to the right and calls function upon click.\n   */\n  onClear?: MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Button to be rendered to the right of the input\n   */\n  rightButton?: ReactElement<ButtonProps>;\n\n  /**\n   * Disabled prop will be passed down to `<Input>`\n   */\n  disabled?: boolean;\n\n  /**\n   * Suffix text to be shown to the right of the input (inside the input field)\n   */\n  suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    size = 'md',\n    leftIcon,\n    onClear,\n    rightButton,\n    children,\n    disabled,\n    hasWarning,\n    hasError,\n    suffix,\n    ...props\n  },\n  ref,\n) {\n  const field = useFormField({ hasWarning, hasError, disabled });\n  const inputButtonContainerRef = useRef<HTMLDivElement>();\n  const [inputPaddingRight, setInputPaddingRight] = useState<string | null>(null);\n\n  const suffixContainerRef = useRef<HTMLDivElement | null>(null);\n  const [suffixPaddingRight, setSuffixPaddingRight] = useState<string | null>(null);\n\n  useEffect(() => {\n    // We only need to calculate padding in presence of the right button\n    if (rightButton && inputButtonContainerRef.current) {\n      setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n    }\n  }, [setInputPaddingRight]);\n\n  useEffect(() => {\n    if (suffix && suffixContainerRef.current) {\n      // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n      setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n    }\n  }, [suffix, setSuffixPaddingRight]);\n\n  const rightButtonStyles: CSSProperties =\n    size === 'sm'\n      ? {\n          height: '18px',\n        }\n      : {};\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container ref={ref} {...props}>\n        {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n        {cloneElement(children, {\n          size,\n          leftIcon: leftIcon,\n          ...(rightButton ? { rightButton } : {}),\n          hasRightItem: onClear || suffix,\n          style:\n            inputPaddingRight || suffixPaddingRight\n              ? {\n                  paddingRight: inputPaddingRight || suffixPaddingRight,\n                }\n              : {},\n        })}\n\n        {/* Renders only if there's a suffix and NO button */}\n        {/* At some point, this should be moved so that it's not absolutely positioned, and\n        these are both wrapped within an \"input\" container */}\n        {suffix && !(onClear || rightButton) && (\n          <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n            <Paragraph size={size}>{suffix}</Paragraph>\n          </SuffixTextContainer>\n        )}\n\n        {(onClear || rightButton) && ( // TODO: Render only if value is present\n          /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n          <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n            {onClear && (\n              <ClearButton\n                onClick={onClear}\n                disabled={field.disabled}\n                aria-label='Clear'\n                size={size}\n              >\n                {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n              </ClearButton>\n            )}\n            {rightButton &&\n              cloneElement(rightButton, {\n                size: 'sm',\n                width: rightButton.props.width || 'auto',\n                style: rightButtonStyles,\n              })}\n          </InputButtonContainer>\n        )}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/Input.d.cts

@@ -0,0 +1,2 @@
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-XppkvfUf.cjs";
+export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/Input.d.mts

@@ -0,0 +1,2 @@
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-Cv5qieRg.mjs";
+export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/InputProps-BHu05fX0.d.mts

@@ -0,0 +1,16 @@
+import { n as InputSizes, t as InputMixinProps } from "./input-BCmP106-.mjs";
+
+//#region types/InputProps.d.ts
+interface InputProps extends Omit<InputMixinProps, '$size'> {
+  /**
+   * Size of the input. If you need the HTML size attr, use inputSize.
+   */
+  size?: InputSizes;
+  /**
+   * `size` HTML attr on `<input>`
+   */
+  inputSize?: React.ComponentPropsWithoutRef<'input'>['size'];
+}
+//#endregion
+export { InputProps as t };
+//# sourceMappingURL=InputProps-BHu05fX0.d.mts.map

package/dist/InputProps-CitGo8QA.d.cts

@@ -0,0 +1,16 @@
+import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
+
+//#region types/InputProps.d.ts
+interface InputProps extends Omit<InputMixinProps, '$size'> {
+  /**
+   * Size of the input. If you need the HTML size attr, use inputSize.
+   */
+  size?: InputSizes;
+  /**
+   * `size` HTML attr on `<input>`
+   */
+  inputSize?: React.ComponentPropsWithoutRef<'input'>['size'];
+}
+//#endregion
+export { InputProps as t };
+//# sourceMappingURL=InputProps-CitGo8QA.d.cts.map

package/dist/InputProps.d.cts

@@ -0,0 +1,2 @@
+import { t as InputProps } from "./InputProps-CitGo8QA.cjs";
+export { InputProps };

package/dist/InputProps.d.mts

@@ -0,0 +1,2 @@
+import { t as InputProps } from "./InputProps-BHu05fX0.mjs";
+export { InputProps };

package/dist/Link.d.cts

@@ -0,0 +1,43 @@
+import { AnchorHTMLAttributes, ReactNode } from "react";
+import { LinkProps as LinkProps$1 } from "react-router-dom";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Link/Link.d.ts
+type Target = '_blank' | '_self' | '_parent' | '_top';
+interface BaseLinkProps {
+  /**
+   * The content to display inside the link.
+   *
+   */
+  children?: ReactNode;
+  /**
+   * Provides an accessible name for the link when the visible text alone
+   * isn't descriptive enough for screen reader users
+   */
+  'aria-label'?: string;
+}
+interface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * The URL to navigate to. Can be internal (e.g., "/dashboard") or external (e.g., "https://example.com").
+   */
+  url: string;
+  /**
+   * Where to open the link. Use "_blank" for external links to open in a new tab.
+   */
+  target?: Target;
+}
+interface InternalLinkProps extends BaseLinkProps, Omit<LinkProps$1, 'to'> {
+  /**
+   * The URL to navigate to. Should be an internal route (e.g., "/dashboard").
+   */
+  url: string;
+}
+type LinkProps = ExternalLinkProps | InternalLinkProps;
+declare const Link: ({
+  children,
+  url,
+  ...props
+}: LinkProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Link, Link as default, LinkProps };
+//# sourceMappingURL=Link.d.cts.map

package/dist/Link.d.mts

@@ -0,0 +1,43 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+import { LinkProps as LinkProps$1 } from "react-router-dom";
+
+//#region components/Link/Link.d.ts
+type Target = '_blank' | '_self' | '_parent' | '_top';
+interface BaseLinkProps {
+  /**
+   * The content to display inside the link.
+   *
+   */
+  children?: ReactNode;
+  /**
+   * Provides an accessible name for the link when the visible text alone
+   * isn't descriptive enough for screen reader users
+   */
+  'aria-label'?: string;
+}
+interface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * The URL to navigate to. Can be internal (e.g., "/dashboard") or external (e.g., "https://example.com").
+   */
+  url: string;
+  /**
+   * Where to open the link. Use "_blank" for external links to open in a new tab.
+   */
+  target?: Target;
+}
+interface InternalLinkProps extends BaseLinkProps, Omit<LinkProps$1, 'to'> {
+  /**
+   * The URL to navigate to. Should be an internal route (e.g., "/dashboard").
+   */
+  url: string;
+}
+type LinkProps = ExternalLinkProps | InternalLinkProps;
+declare const Link: ({
+  children,
+  url,
+  ...props
+}: LinkProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Link, Link as default, LinkProps };
+//# sourceMappingURL=Link.d.mts.map