@tosui/react 0.1.1 → 0.1.2

package/dist/components/Heading/Heading.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Text } from "../Text/Text.js";
+const defaultSizes = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "sm"
+};
+function Heading({
+  as,
+  level = 1,
+  size,
+  weight = "bold",
+  color,
+  children,
+  ...rest
+}) {
+  const headingElement = `h${level}`;
+  const defaultSize = defaultSizes[level];
+  const element = as ?? headingElement;
+  return (
+    // @ts-expect-error - Polymorphic component prop forwarding
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: element,
+        size: size ?? defaultSize,
+        weight,
+        color,
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Heading
+};
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { Text, type TextOwnProps } from \"../Text/Text\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\n\n// Import types from Box styleParts\ntype FontSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\";\ntype FontWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\ntype Color =\n  | \"foreground\"\n  | \"foreground-muted\"\n  | \"foreground-subtle\"\n  | \"accent\"\n  | \"accent-emphasis\"\n  | \"primary\"\n  | \"primary-emphasis\"\n  | \"success\"\n  | \"success-emphasis\"\n  | \"warning\"\n  | \"warning-emphasis\"\n  | \"error\"\n  | \"error-emphasis\";\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nconst defaultSizes: Record<HeadingLevel, FontSize> = {\n  1: \"3xl\",\n  2: \"2xl\",\n  3: \"xl\",\n  4: \"lg\",\n  5: \"md\",\n  6: \"sm\",\n};\n\ntype HeadingOwnProps = Omit<TextOwnProps, \"size\" | \"weight\" | \"color\"> & {\n  level?: HeadingLevel;\n  size?: FontSize;\n  weight?: FontWeight;\n  color?: Color;\n};\n\nexport type HeadingProps<T extends ElementType = \"h1\"> = Polymorphic<\n  T,\n  HeadingOwnProps\n>;\n\n/**\n * Heading - Semantic heading component with predefined sizes\n *\n * Built on top of Text with heading-specific defaults:\n * - level prop maps to h1-h6 elements (default: h1)\n * - Each level has a default font size\n * - Default font weight: bold\n * - Size can be overridden via size prop\n * - Can be changed to any element via `as` prop\n */\nexport function Heading<T extends ElementType = \"h1\">({\n  as,\n  level = 1,\n  size,\n  weight = \"bold\",\n  color,\n  children,\n  ...rest\n}: HeadingProps<T>) {\n  const headingElement = `h${level}` as const;\n  const defaultSize = defaultSizes[level];\n  const element = as ?? headingElement;\n\n  return (\n    // @ts-expect-error - Polymorphic component prop forwarding\n    <Text\n      as={element}\n      size={size ?? defaultSize}\n      weight={weight}\n      color={color}\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":[],"mappings":";;;AAwBA,MAAM,eAA+C;AAAA,EACnD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAwBO,SAAS,QAAsC;AAAA,EACpD;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,iBAAiB,IAAI,KAAK;AAChC,QAAM,cAAc,aAAa,KAAK;AACtC,QAAM,UAAU,MAAM;AAEtB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,MAAM,QAAQ;AAAA,QACd;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import styles from "./iconbutton.module.css.js";
+const sizeConfig = {
+  sm: { dimension: "28px", iconSize: "14px", fontSize: "sm" },
+  md: { dimension: "36px", iconSize: "18px", fontSize: "md" },
+  lg: { dimension: "44px", iconSize: "22px", fontSize: "lg" }
+};
+function getColorConfig(variant, colorScheme) {
+  switch (variant) {
+    case "solid":
+      return {
+        bg: `${colorScheme}-default`,
+        color: "foreground-inverted",
+        borderColor: void 0,
+        hoverBg: `var(--t-color-${colorScheme}-emphasis)`
+      };
+    case "outline":
+      return {
+        bg: "transparent",
+        color: colorScheme,
+        borderColor: colorScheme,
+        hoverBg: `var(--t-color-${colorScheme}-subtle)`
+      };
+    case "ghost":
+      return {
+        bg: "transparent",
+        color: colorScheme,
+        borderColor: void 0,
+        hoverBg: `var(--t-color-${colorScheme}-subtle)`
+      };
+  }
+}
+const variantBorderConfig = {
+  solid: "none",
+  outline: "thin",
+  ghost: "none"
+};
+const IconButton = forwardRef(
+  function IconButton2({
+    icon,
+    "aria-label": ariaLabel,
+    variant = "solid",
+    size = "md",
+    colorScheme = "primary",
+    disabled = false,
+    loading = false,
+    className,
+    onClick,
+    ...rest
+  }, ref) {
+    const isDisabled = disabled || loading;
+    const colorConfig = getColorConfig(variant, colorScheme);
+    const sizeProps = sizeConfig[size];
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "button",
+        ref,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        w: sizeProps.dimension,
+        h: sizeProps.dimension,
+        fontSize: sizeProps.fontSize,
+        rounded: "md",
+        bg: colorConfig.bg,
+        color: colorConfig.color,
+        border: variantBorderConfig[variant],
+        borderColor: colorConfig.borderColor,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        pointerEvents: isDisabled ? "none" : void 0,
+        opacity: isDisabled ? "faint" : void 0,
+        className: clsx(styles.iconButton, styles[variant], className),
+        style: { "--iconbutton-hover-bg": colorConfig.hoverBg },
+        "aria-label": ariaLabel,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        onClick,
+        ...rest,
+        children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Box, { as: "span", display: "inline-flex", alignItems: "center", "aria-hidden": "true", children: icon })
+      }
+    );
+  }
+);
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Spinner } from \"@/components/Spinner/Spinner\";\nimport styles from \"./iconbutton.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type IconButtonVariant = \"solid\" | \"outline\" | \"ghost\";\nexport type IconButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type IconButtonColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type IconButtonProps = {\n  /** The icon to display */\n  icon: ReactNode;\n  /** Accessible label (required for screen readers) */\n  \"aria-label\": string;\n  /** Visual variant */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Color scheme */\n  colorScheme?: IconButtonColorScheme;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Whether to show loading spinner */\n  loading?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { dimension: \"28px\", iconSize: \"14px\", fontSize: \"sm\" },\n  md: { dimension: \"36px\", iconSize: \"18px\", fontSize: \"md\" },\n  lg: { dimension: \"44px\", iconSize: \"22px\", fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n  borderColor: string | undefined;\n  hoverBg: string;\n};\n\nfunction getColorConfig(\n  variant: IconButtonVariant,\n  colorScheme: IconButtonColorScheme\n): ColorConfig {\n  switch (variant) {\n    case \"solid\":\n      return {\n        bg: `${colorScheme}-default`,\n        color: \"foreground-inverted\",\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-emphasis)`,\n      };\n    case \"outline\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: colorScheme,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n    case \"ghost\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n  }\n}\n\n// ============================================================================\n// Variant border configurations\n// ============================================================================\n\nconst variantBorderConfig = {\n  solid: \"none\",\n  outline: \"thin\",\n  ghost: \"none\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * IconButton - Icon-only button component\n *\n * A compact button for icons that provides:\n * - Square sizing for icon-only use\n * - All Button variants (solid, outline, ghost)\n * - All color schemes\n * - Loading state with spinner\n * - Required aria-label for accessibility\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      icon,\n      \"aria-label\": ariaLabel,\n      variant = \"solid\",\n      size = \"md\",\n      colorScheme = \"primary\",\n      disabled = false,\n      loading = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref\n  ) {\n    const isDisabled = disabled || loading;\n    const colorConfig = getColorConfig(variant, colorScheme);\n    const sizeProps = sizeConfig[size];\n\n    return (\n      <Box\n        as=\"button\"\n        ref={ref}\n        // Layout\n        display=\"inline-flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        // Size (square)\n        w={sizeProps.dimension}\n        h={sizeProps.dimension}\n        fontSize={sizeProps.fontSize}\n        rounded=\"md\"\n        // Colors (type assertions for computed values)\n        bg={colorConfig.bg as any}\n        color={colorConfig.color as any}\n        border={variantBorderConfig[variant]}\n        borderColor={colorConfig.borderColor as any}\n        // Interaction states\n        cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n        pointerEvents={isDisabled ? \"none\" : undefined}\n        opacity={isDisabled ? \"faint\" : undefined}\n        // CSS module styles\n        className={clsx(styles.iconButton, styles[variant], className)}\n        // Hover color via CSS variable\n        style={{ \"--iconbutton-hover-bg\": colorConfig.hoverBg } as CSSProperties}\n        // Accessibility\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        aria-disabled={isDisabled}\n        aria-busy={loading}\n        onClick={onClick}\n        {...rest}\n      >\n        {loading ? (\n          <Spinner size=\"sm\" aria-hidden=\"true\" />\n        ) : (\n          <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\" aria-hidden=\"true\">\n            {icon}\n          </Box>\n        )}\n      </Box>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;AA6CA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AACvD;AAaA,SAAS,eACP,SACA,aACa;AACb,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,QACL,IAAI,GAAG,WAAW;AAAA,QAClB,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,EACvC;AAEN;AAMA,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAgBO,MAAM,aAAa;AAAA,EACxB,SAASA,YACP;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,aAAa,YAAY;AAC/B,UAAM,cAAc,eAAe,SAAS,WAAW;AACvD,UAAM,YAAY,WAAW,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QAEA,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QAEf,GAAG,UAAU;AAAA,QACb,GAAG,UAAU;AAAA,QACb,UAAU,UAAU;AAAA,QACpB,SAAQ;AAAA,QAER,IAAI,YAAY;AAAA,QAChB,OAAO,YAAY;AAAA,QACnB,QAAQ,oBAAoB,OAAO;AAAA,QACnC,aAAa,YAAY;AAAA,QAEzB,QAAQ,aAAa,gBAAgB;AAAA,QACrC,eAAe,aAAa,SAAS;AAAA,QACrC,SAAS,aAAa,UAAU;AAAA,QAEhC,WAAW,KAAK,OAAO,YAAY,OAAO,OAAO,GAAG,SAAS;AAAA,QAE7D,OAAO,EAAE,yBAAyB,YAAY,QAAA;AAAA,QAE9C,cAAY;AAAA,QACZ,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH,oBACC,oBAAC,SAAA,EAAQ,MAAK,MAAK,eAAY,QAAO,IAEtC,oBAAC,KAAA,EAAI,IAAG,QAAO,SAAQ,eAAc,YAAW,UAAS,eAAY,QAClE,UAAA,KAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/IconButton/iconbutton.module.css

@@ -0,0 +1,18 @@
+._iconButton_1xb56_1 {
+  transition-duration: 150ms;
+  transition-property: background-color, border-color, opacity;
+  transition-timing-function: ease-in-out;
+  flex-shrink: 0;
+}
+
+._solid_1xb56_8:hover:not(:disabled) {
+  background-color: var(--iconbutton-hover-bg);
+}
+
+._outline_1xb56_12:hover:not(:disabled) {
+  background-color: var(--iconbutton-hover-bg);
+}
+
+._ghost_1xb56_16:hover:not(:disabled) {
+  background-color: var(--iconbutton-hover-bg);
+}

package/dist/components/IconButton/iconbutton.module.css.js

@@ -0,0 +1,18 @@
+const iconButton = "_iconButton_1xb56_1";
+const solid = "_solid_1xb56_8";
+const outline = "_outline_1xb56_12";
+const ghost = "_ghost_1xb56_16";
+const styles = {
+  iconButton,
+  solid,
+  outline,
+  ghost
+};
+export {
+  styles as default,
+  ghost,
+  iconButton,
+  outline,
+  solid
+};
+//# sourceMappingURL=iconbutton.module.css.js.map

package/dist/components/IconButton/iconbutton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconbutton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAOzE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,wBAAwB;IACxB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAG,EACH,CAAC,EACD,CAAC,EACD,SAAmB,EACnB,WAAW,EACX,OAAgB,EAChB,SAAS,GACV,EAAE,UAAU,2CA6EZ"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAOzE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,wBAAwB;IACxB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAG,EACH,CAAC,EACD,CAAC,EACD,SAAmB,EACnB,WAAW,EACX,OAAgB,EAChB,SAAS,GACV,EAAE,UAAU,2CA6EZ"}

package/dist/components/Image/Image.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import styles from "./image.module.css.js";
+function Image({
+  src,
+  alt,
+  w,
+  h,
+  objectFit = "cover",
+  fallbackSrc,
+  rounded = "none",
+  className
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const handleLoad = () => {
+    setIsLoading(false);
+  };
+  const handleError = () => {
+    if (fallbackSrc && currentSrc !== fallbackSrc) {
+      setCurrentSrc(fallbackSrc);
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+      setHasError(true);
+    }
+  };
+  const style = {
+    width: w,
+    height: h
+  };
+  if (hasError) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bg: "surface",
+        color: "foreground-muted",
+        rounded,
+        className: clsx(styles.placeholder, className),
+        style,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            className: styles.placeholderIcon,
+            children: /* @__PURE__ */ jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "relative",
+      display: "inline-block",
+      overflow: "hidden",
+      rounded,
+      className: clsx(styles.container, className),
+      style,
+      children: [
+        isLoading && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            w: "100%",
+            h: "100%",
+            rounded,
+            className: styles.skeleton
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: currentSrc,
+            alt,
+            onLoad: handleLoad,
+            onError: handleError,
+            className: clsx(
+              styles.image,
+              styles[objectFit],
+              isLoading && styles.hidden
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Image
+};
+//# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type CSSProperties } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Skeleton } from \"@/components/Skeleton/Skeleton\";\nimport type { RoundedValue } from \"@/components/Box/roundness/roundness\";\nimport styles from \"./image.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ImageObjectFit = \"cover\" | \"contain\" | \"fill\" | \"none\";\n\nexport type ImageProps = {\n  /** Image source URL */\n  src: string;\n  /** Alt text (required for accessibility) */\n  alt: string;\n  /** Width (CSS value) */\n  w?: string;\n  /** Height (CSS value) */\n  h?: string;\n  /** Object fit behavior */\n  objectFit?: ImageObjectFit;\n  /** Fallback source if main image fails */\n  fallbackSrc?: string;\n  /** Border radius */\n  rounded?: RoundedValue;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Image - Enhanced img element\n *\n * An image component with:\n * - Loading state with Skeleton placeholder\n * - Error fallback support\n * - Object-fit options\n * - Rounded corner variants\n */\nexport function Image({\n  src,\n  alt,\n  w,\n  h,\n  objectFit = \"cover\",\n  fallbackSrc,\n  rounded = \"none\",\n  className,\n}: ImageProps) {\n  const [isLoading, setIsLoading] = useState(true);\n  const [hasError, setHasError] = useState(false);\n  const [currentSrc, setCurrentSrc] = useState(src);\n\n  const handleLoad = () => {\n    setIsLoading(false);\n  };\n\n  const handleError = () => {\n    if (fallbackSrc && currentSrc !== fallbackSrc) {\n      setCurrentSrc(fallbackSrc);\n      setIsLoading(true);\n    } else {\n      setIsLoading(false);\n      setHasError(true);\n    }\n  };\n\n  const style: CSSProperties = {\n    width: w,\n    height: h,\n  };\n\n  if (hasError) {\n    return (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        bg=\"surface\"\n        color=\"foreground-muted\"\n        rounded={rounded}\n        className={clsx(styles.placeholder, className)}\n        style={style}\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          className={styles.placeholderIcon}\n        >\n          <path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\" />\n        </svg>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      position=\"relative\"\n      display=\"inline-block\"\n      overflow=\"hidden\"\n      rounded={rounded}\n      className={clsx(styles.container, className)}\n      style={style}\n    >\n      {isLoading && (\n        <Skeleton\n          w=\"100%\"\n          h=\"100%\"\n          rounded={rounded}\n          className={styles.skeleton}\n        />\n      )}\n      <img\n        src={currentSrc}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        className={clsx(\n          styles.image,\n          styles[objectFit],\n          isLoading && styles.hidden\n        )}\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA+CO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAe;AACb,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,GAAG;AAEhD,QAAM,aAAa,MAAM;AACvB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,eAAe,eAAe,aAAa;AAC7C,oBAAc,WAAW;AACzB,mBAAa,IAAI;AAAA,IACnB,OAAO;AACL,mBAAa,KAAK;AAClB,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,QAAuB;AAAA,IAC3B,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAGV,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,OAAM;AAAA,QACN;AAAA,QACA,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,QAC7C;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAW,OAAO;AAAA,YAElB,UAAA,oBAAC,QAAA,EAAK,GAAE,2HAAA,CAA2H;AAAA,UAAA;AAAA,QAAA;AAAA,MACrI;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,UAAS;AAAA,MACT;AAAA,MACA,WAAW,KAAK,OAAO,WAAW,SAAS;AAAA,MAC3C;AAAA,MAEC,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF;AAAA,YACA,WAAW,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,SAAS;AAAA,cAChB,aAAa,OAAO;AAAA,YAAA;AAAA,UACtB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Image/image.module.css

@@ -0,0 +1,44 @@
+._container_ctyvb_1 {
+  line-height: 0;
+}
+
+._skeleton_ctyvb_5 {
+  position: absolute;
+  inset: 0;
+}
+
+._image_ctyvb_10 {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+._hidden_ctyvb_16 {
+  opacity: 0;
+}
+
+._cover_ctyvb_20 {
+  object-fit: cover;
+}
+
+._contain_ctyvb_1 {
+  object-fit: contain;
+}
+
+._fill_ctyvb_28 {
+  object-fit: fill;
+}
+
+._none_ctyvb_32 {
+  object-fit: none;
+}
+
+._placeholder_ctyvb_36 {
+  min-height: 100px;
+}
+
+._placeholderIcon_ctyvb_40 {
+  width: 48px;
+  height: 48px;
+  opacity: 0.5;
+}

package/dist/components/Image/image.module.css.js

@@ -0,0 +1,36 @@
+const container = "_container_ctyvb_1";
+const skeleton = "_skeleton_ctyvb_5";
+const image = "_image_ctyvb_10";
+const hidden = "_hidden_ctyvb_16";
+const cover = "_cover_ctyvb_20";
+const contain = "_contain_ctyvb_1";
+const fill = "_fill_ctyvb_28";
+const none = "_none_ctyvb_32";
+const placeholder = "_placeholder_ctyvb_36";
+const placeholderIcon = "_placeholderIcon_ctyvb_40";
+const styles = {
+  container,
+  skeleton,
+  image,
+  hidden,
+  cover,
+  contain,
+  fill,
+  none,
+  placeholder,
+  placeholderIcon
+};
+export {
+  contain,
+  container,
+  cover,
+  styles as default,
+  fill,
+  hidden,
+  image,
+  none,
+  placeholder,
+  placeholderIcon,
+  skeleton
+};
+//# sourceMappingURL=image.module.css.js.map

package/dist/components/Image/image.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Input/Input.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./input.module.css.js";
+const sizeConfig = {
+  sm: { h: 8, px: 2, fontSize: "sm", rounded: "sm" },
+  md: { h: 10, px: 3, fontSize: "md", rounded: "md" },
+  lg: { h: 12, px: 4, fontSize: "lg", rounded: "md" }
+};
+function Input({
+  as,
+  size = "md",
+  variant = "outline",
+  disabled = false,
+  isInvalid = false,
+  className,
+  ...rest
+}) {
+  const Component = as || "input";
+  const sizeProps = sizeConfig[size];
+  const variantStyles = variant === "outline" ? {
+    bg: "transparent",
+    border: "thin",
+    borderColor: "border"
+  } : {
+    bg: "surface",
+    border: "thin",
+    borderColor: "border-muted"
+  };
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Component,
+        h: sizeProps.h,
+        px: sizeProps.px,
+        fontSize: sizeProps.fontSize,
+        rounded: sizeProps.rounded,
+        bg: variantStyles.bg,
+        border: variantStyles.border,
+        borderColor: variantStyles.borderColor,
+        w: "100%",
+        color: "foreground",
+        className: clsx(styles.input, isInvalid && styles.invalid, className),
+        disabled,
+        "aria-invalid": isInvalid || void 0,
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport clsx from \"clsx\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport styles from \"./input.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\nexport type InputVariant = \"outline\" | \"filled\";\n\nexport type InputOwnProps = Omit<\n  BoxOwnProps,\n  \"as\" | \"h\" | \"fontSize\" | \"rounded\" | \"border\" | \"borderColor\" | \"bg\"\n> & {\n  /** Input size affecting height and font size */\n  size?: InputSize;\n  /** Visual variant: outline (border) or filled (surface background) */\n  variant?: InputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether the input is in an invalid state */\n  isInvalid?: boolean;\n};\n\nexport type InputProps<T extends ElementType = \"input\"> = Polymorphic<\n  T,\n  InputOwnProps\n>;\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { h: 8, px: 2, fontSize: \"sm\", rounded: \"sm\" },\n  md: { h: 10, px: 3, fontSize: \"md\", rounded: \"md\" },\n  lg: { h: 12, px: 4, fontSize: \"lg\", rounded: \"md\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Input - Text input field component\n *\n * A polymorphic input component that provides:\n * - Default element: <input>\n * - Sizes: sm, md (default), lg\n * - Variants: outline (default), filled\n * - Disabled and invalid states\n * - Focus ring styling\n */\nexport function Input<T extends ElementType = \"input\">({\n  as,\n  size = \"md\",\n  variant = \"outline\",\n  disabled = false,\n  isInvalid = false,\n  className,\n  ...rest\n}: InputProps<T>) {\n  const Component = as || \"input\";\n  const sizeProps = sizeConfig[size];\n\n  // Variant-specific styling\n  const variantStyles =\n    variant === \"outline\"\n      ? {\n          bg: \"transparent\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border\" as const,\n        }\n      : {\n          bg: \"surface\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border-muted\" as const,\n        };\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      // Size props\n      h={sizeProps.h}\n      px={sizeProps.px}\n      fontSize={sizeProps.fontSize}\n      rounded={sizeProps.rounded}\n      // Variant props\n      bg={variantStyles.bg}\n      border={variantStyles.border}\n      borderColor={variantStyles.borderColor}\n      // Full width by default\n      w=\"100%\"\n      // Colors\n      color=\"foreground\"\n      // CSS module for states\n      className={clsx(styles.input, isInvalid && styles.invalid, className)}\n      // Native disabled\n      disabled={disabled}\n      aria-invalid={isInvalid || undefined}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,GAAG,GAAG,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EAC5C,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EAC7C,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAC/C;AAgBO,SAAS,MAAuC;AAAA,EACrD;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,WAAW,IAAI;AAGjC,QAAM,gBACJ,YAAY,YACR;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA;AAGrB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QAEJ,GAAG,UAAU;AAAA,QACb,IAAI,UAAU;AAAA,QACd,UAAU,UAAU;AAAA,QACpB,SAAS,UAAU;AAAA,QAEnB,IAAI,cAAc;AAAA,QAClB,QAAQ,cAAc;AAAA,QACtB,aAAa,cAAc;AAAA,QAE3B,GAAE;AAAA,QAEF,OAAM;AAAA,QAEN,WAAW,KAAK,OAAO,OAAO,aAAa,OAAO,SAAS,SAAS;AAAA,QAEpE;AAAA,QACA,gBAAc,aAAa;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Input/input.module.css

@@ -0,0 +1,29 @@
+._input_72e18_1 {
+  transition-duration: 150ms;
+  transition-property: border-color, background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+}
+
+._input_72e18_1::placeholder {
+  color: var(--t-color-foreground-subtle);
+}
+
+._input_72e18_1:focus-visible {
+  outline: none;
+  border-color: var(--t-color-primary-default);
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+._input_72e18_1:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+._input_72e18_1._invalid_72e18_22 {
+  border-color: var(--t-color-error-default);
+}
+
+._input_72e18_1._invalid_72e18_22:focus-visible {
+  border-color: var(--t-color-error-default);
+  box-shadow: 0 0 0 3px var(--t-color-error-subtle);
+}

package/dist/components/Input/input.module.css.js

@@ -0,0 +1,12 @@
+const input = "_input_72e18_1";
+const invalid = "_invalid_72e18_22";
+const styles = {
+  input,
+  invalid
+};
+export {
+  styles as default,
+  input,
+  invalid
+};
+//# sourceMappingURL=input.module.css.js.map

package/dist/components/Input/input.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Label/Label.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Label({
+  as,
+  size = "sm",
+  weight = "medium",
+  required = false,
+  children,
+  ...rest
+}) {
+  const Component = as || "label";
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: Component,
+        fontSize: size,
+        fontWeight: weight,
+        color: "foreground",
+        display: "inline-block",
+        mb: 1,
+        ...rest,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx(Box, { as: "span", color: "error", ml: 1, "aria-hidden": "true", children: "*" })
+        ]
+      }
+    )
+  );
+}
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype FontSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\ntype FontWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type LabelOwnProps = Omit<\n  BoxOwnProps,\n  \"as\" | \"fontSize\" | \"fontWeight\"\n> & {\n  /** Label text size */\n  size?: FontSize;\n  /** Label font weight */\n  weight?: FontWeight;\n  /** Show required asterisk */\n  required?: boolean;\n};\n\nexport type LabelProps<T extends ElementType = \"label\"> = Polymorphic<\n  T,\n  LabelOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Label - Form label component\n *\n * A polymorphic label component that provides:\n * - Default element: <label>\n * - Size and weight props for typography\n * - Required indicator (red asterisk)\n * - Passes through htmlFor for accessibility\n */\nexport function Label<T extends ElementType = \"label\">({\n  as,\n  size = \"sm\",\n  weight = \"medium\",\n  required = false,\n  children,\n  ...rest\n}: LabelProps<T>) {\n  const Component = as || \"label\";\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      fontSize={size}\n      fontWeight={weight}\n      color=\"foreground\"\n      display=\"inline-block\"\n      mb={1}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <Box as=\"span\" color=\"error\" ml={1} aria-hidden=\"true\">\n          *\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAyCO,SAAS,MAAuC;AAAA,EACrD;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,MAAM;AAExB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,IAAI;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,YACC,oBAAC,KAAA,EAAI,IAAG,QAAO,OAAM,SAAQ,IAAI,GAAG,eAAY,QAAO,UAAA,IAAA,CAEvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA;AAIR;"}

package/dist/components/Link/Link.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./link.module.css.js";
+function Link({
+  as,
+  variant = "default",
+  external = false,
+  children,
+  className,
+  ...rest
+}) {
+  const Component = as || "a";
+  const externalProps = external ? {
+    target: "_blank",
+    rel: "noopener noreferrer"
+  } : {};
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Component,
+        color: variant === "subtle" ? void 0 : "primary",
+        cursor: "pointer",
+        className: clsx(styles.link, styles[variant], className),
+        ...externalProps,
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Link
+};
+//# sourceMappingURL=Link.js.map

package/dist/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { type ElementType, type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport styles from \"./link.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type LinkVariant = \"default\" | \"underline\" | \"subtle\";\n\nexport type LinkOwnProps = Omit<BoxOwnProps, \"as\"> & {\n  /** Visual variant */\n  variant?: LinkVariant;\n  /** External link (opens in new tab) */\n  external?: boolean;\n  /** Link content */\n  children?: ReactNode;\n};\n\nexport type LinkProps<T extends ElementType = \"a\"> = Polymorphic<T, LinkOwnProps>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Link - Styled anchor element\n *\n * A polymorphic link component that provides:\n * - Default element: <a>\n * - Variants: default (underline on hover), underline (always), subtle (inherits color)\n * - External link support with target=\"_blank\"\n * - Router support via as prop\n */\nexport function Link<T extends ElementType = \"a\">({\n  as,\n  variant = \"default\",\n  external = false,\n  children,\n  className,\n  ...rest\n}: LinkProps<T>) {\n  const Component = as || \"a\";\n\n  const externalProps = external\n    ? {\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n      }\n    : {};\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      color={variant === \"subtle\" ? undefined : \"primary\"}\n      cursor=\"pointer\"\n      className={clsx(styles.link, styles[variant], className)}\n      {...externalProps}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCO,SAAS,KAAkC;AAAA,EAChD;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,YAAY,MAAM;AAExB,QAAM,gBAAgB,WAClB;AAAA,IACE,QAAQ;AAAA,IACR,KAAK;AAAA,EAAA,IAEP,CAAA;AAEJ;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,OAAO,YAAY,WAAW,SAAY;AAAA,QAC1C,QAAO;AAAA,QACP,WAAW,KAAK,OAAO,MAAM,OAAO,OAAO,GAAG,SAAS;AAAA,QACtD,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/Link/link.module.css

@@ -0,0 +1,28 @@
+._link_1xu5z_1 {
+  transition: color 0.15s ease, opacity 0.15s ease;
+}
+
+._link_1xu5z_1:hover {
+  opacity: 0.8;
+}
+
+._default_1xu5z_9 {
+  text-decoration: none;
+}
+
+._default_1xu5z_9:hover {
+  text-decoration: underline;
+}
+
+._underline_1xu5z_17 {
+  text-decoration: underline;
+}
+
+._subtle_1xu5z_21 {
+  text-decoration: none;
+  color: inherit;
+}
+
+._subtle_1xu5z_21:hover {
+  color: var(--t-color-primary-default);
+}