analytica-frontend-lib 1.0.34 → 1.0.36

package/dist/Radio/index.js

@@ -0,0 +1,299 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Radio/Radio.tsx
+var Radio_exports = {};
+__export(Radio_exports, {
+  default: () => Radio_default
+});
+module.exports = __toCommonJS(Radio_exports);
+var import_react = require("react");
+
+// src/components/Text/Text.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/Radio/Radio.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SIZE_CLASSES = {
+  small: {
+    radio: "w-5 h-5",
+    // 20px x 20px
+    textSize: "sm",
+    spacing: "gap-1.5",
+    // 6px
+    borderWidth: "border-2",
+    dotSize: "w-1.5 h-1.5",
+    // 6px inner dot
+    labelHeight: "h-5"
+  },
+  medium: {
+    radio: "w-6 h-6",
+    // 24px x 24px
+    textSize: "md",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    dotSize: "w-2 h-2",
+    // 8px inner dot
+    labelHeight: "h-6"
+  },
+  large: {
+    radio: "w-7 h-7",
+    // 28px x 28px
+    textSize: "lg",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-2.5 h-2.5",
+    // 10px inner dot
+    labelHeight: "h-7"
+  },
+  extraLarge: {
+    radio: "w-8 h-8",
+    // 32px x 32px (larger than large)
+    textSize: "xl",
+    spacing: "gap-3",
+    // 12px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-3 h-3",
+    // 12px inner dot
+    labelHeight: "h-8"
+  }
+};
+var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+var STATE_CLASSES = {
+  default: {
+    unchecked: "border-border-400 bg-background hover:border-border-500",
+    checked: "border-primary-950 bg-background hover:border-primary-800"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    // #8C8D8D hover state for unchecked
+    checked: "border-info-700 bg-background"
+    // Adjust checked border for hover
+  },
+  focused: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  invalid: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background cursor-not-allowed"
+    // #124393 for checked radio
+  }
+};
+var DOT_CLASSES = {
+  default: "bg-primary-950",
+  hovered: "bg-info-700",
+  // #1C61B2 hover state for checked dot
+  focused: "bg-primary-950",
+  // #124393 for focused checked dot
+  invalid: "bg-primary-950",
+  // #124393 for invalid checked dot
+  disabled: "bg-primary-950"
+  // #124393 for disabled checked dot
+};
+var Radio = (0, import_react.forwardRef)(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react.useId)();
+    const inputId = id ?? `radio-${generatedId}`;
+    const [internalChecked, setInternalChecked] = (0, import_react.useState)(defaultChecked);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      const newChecked = event.target.checked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES[size];
+    const actualRadioSize = sizeClasses.radio;
+    const actualDotSize = sizeClasses.dotSize;
+    const radioVariant = checked ? "checked" : "unchecked";
+    const stylingClasses = STATE_CLASSES[currentState][radioVariant];
+    const getBorderWidth = () => {
+      if (currentState === "focused") {
+        return "border-2";
+      }
+      return sizeClasses.borderWidth;
+    };
+    const borderWidthClass = getBorderWidth();
+    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
+    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
+    const getTextColor = () => {
+      if (currentState === "disabled") {
+        return checked ? "text-text-900" : "text-text-600";
+      }
+      if (currentState === "focused") {
+        return "text-text-900";
+      }
+      return checked ? "text-text-900" : "text-text-600";
+    };
+    const getCursorClass = () => {
+      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                ref,
+                type: "radio",
+                id: inputId,
+                checked,
+                disabled,
+                name,
+                value,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: dotClasses }) }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  Text_default,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    color: getTextColor(),
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+//# sourceMappingURL=index.js.map

package/dist/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5', // 20px x 20px\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5', // 6px\n    borderWidth: 'border-2',\n    dotSize: 'w-1.5 h-1.5', // 6px inner dot\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6', // 24px x 24px\n    textSize: 'md' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2',\n    dotSize: 'w-2 h-2', // 8px inner dot\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7', // 28px x 28px\n    textSize: 'lg' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-2.5 h-2.5', // 10px inner dot\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8', // 32px x 32px (larger than large)\n    textSize: 'xl' as const,\n    spacing: 'gap-3', // 12px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-3 h-3', // 12px inner dot\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background', // #8C8D8D hover state for unchecked\n    checked: 'border-info-700 bg-background', // Adjust checked border for hover\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background cursor-not-allowed', // #124393 for checked radio\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700', // #1C61B2 hover state for checked dot\n  focused: 'bg-primary-950', // #124393 for focused checked dot\n  invalid: 'bg-primary-950', // #124393 for invalid checked dot\n  disabled: 'bg-primary-950', // #124393 for disabled checked dot\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2'; // Consistent border for all focused radios inside wrapper\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info' // #5399EC for focused\n        : 'border-indicator-error'; // #B91C1C for invalid\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600'; // #262627 for disabled checked, #737373 for disabled unchecked\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900'; // #262627 for focused (both checked and unchecked)\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600'; // #262627 for checked, #737373 for unchecked\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` // Wrapper apenas para focused/invalid\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <label htmlFor={inputId} className={radioClasses}>\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </label>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight}`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/Radio/index.mjs

@@ -0,0 +1,283 @@
+"use client";
+
+// src/components/Radio/Radio.tsx
+import {
+  forwardRef,
+  useState,
+  useId
+} from "react";
+
+// src/components/Text/Text.tsx
+import { jsx } from "react/jsx-runtime";
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/Radio/Radio.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  small: {
+    radio: "w-5 h-5",
+    // 20px x 20px
+    textSize: "sm",
+    spacing: "gap-1.5",
+    // 6px
+    borderWidth: "border-2",
+    dotSize: "w-1.5 h-1.5",
+    // 6px inner dot
+    labelHeight: "h-5"
+  },
+  medium: {
+    radio: "w-6 h-6",
+    // 24px x 24px
+    textSize: "md",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    dotSize: "w-2 h-2",
+    // 8px inner dot
+    labelHeight: "h-6"
+  },
+  large: {
+    radio: "w-7 h-7",
+    // 28px x 28px
+    textSize: "lg",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-2.5 h-2.5",
+    // 10px inner dot
+    labelHeight: "h-7"
+  },
+  extraLarge: {
+    radio: "w-8 h-8",
+    // 32px x 32px (larger than large)
+    textSize: "xl",
+    spacing: "gap-3",
+    // 12px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-3 h-3",
+    // 12px inner dot
+    labelHeight: "h-8"
+  }
+};
+var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+var STATE_CLASSES = {
+  default: {
+    unchecked: "border-border-400 bg-background hover:border-border-500",
+    checked: "border-primary-950 bg-background hover:border-primary-800"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    // #8C8D8D hover state for unchecked
+    checked: "border-info-700 bg-background"
+    // Adjust checked border for hover
+  },
+  focused: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  invalid: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background cursor-not-allowed"
+    // #124393 for checked radio
+  }
+};
+var DOT_CLASSES = {
+  default: "bg-primary-950",
+  hovered: "bg-info-700",
+  // #1C61B2 hover state for checked dot
+  focused: "bg-primary-950",
+  // #124393 for focused checked dot
+  invalid: "bg-primary-950",
+  // #124393 for invalid checked dot
+  disabled: "bg-primary-950"
+  // #124393 for disabled checked dot
+};
+var Radio = forwardRef(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? `radio-${generatedId}`;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      const newChecked = event.target.checked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES[size];
+    const actualRadioSize = sizeClasses.radio;
+    const actualDotSize = sizeClasses.dotSize;
+    const radioVariant = checked ? "checked" : "unchecked";
+    const stylingClasses = STATE_CLASSES[currentState][radioVariant];
+    const getBorderWidth = () => {
+      if (currentState === "focused") {
+        return "border-2";
+      }
+      return sizeClasses.borderWidth;
+    };
+    const borderWidthClass = getBorderWidth();
+    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
+    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
+    const getTextColor = () => {
+      if (currentState === "disabled") {
+        return checked ? "text-text-900" : "text-text-600";
+      }
+      if (currentState === "focused") {
+        return "text-text-900";
+      }
+      return checked ? "text-text-900" : "text-text-600";
+    };
+    const getCursorClass = () => {
+      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref,
+                type: "radio",
+                id: inputId,
+                checked,
+                disabled,
+                name,
+                value,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ jsx2("div", { className: dotClasses }) }),
+            label && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ jsx2(
+                  Text_default,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    color: getTextColor(),
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx2(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsx2(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+export {
+  Radio_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Radio/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio/Radio.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * Radio size variants\n */\ntype RadioSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Radio visual state\n */\ntype RadioState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations using Tailwind classes\n */\nconst SIZE_CLASSES = {\n  small: {\n    radio: 'w-5 h-5', // 20px x 20px\n    textSize: 'sm' as const,\n    spacing: 'gap-1.5', // 6px\n    borderWidth: 'border-2',\n    dotSize: 'w-1.5 h-1.5', // 6px inner dot\n    labelHeight: 'h-5',\n  },\n  medium: {\n    radio: 'w-6 h-6', // 24px x 24px\n    textSize: 'md' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2',\n    dotSize: 'w-2 h-2', // 8px inner dot\n    labelHeight: 'h-6',\n  },\n  large: {\n    radio: 'w-7 h-7', // 28px x 28px\n    textSize: 'lg' as const,\n    spacing: 'gap-2', // 8px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-2.5 h-2.5', // 10px inner dot\n    labelHeight: 'h-7',\n  },\n  extraLarge: {\n    radio: 'w-8 h-8', // 32px x 32px (larger than large)\n    textSize: 'xl' as const,\n    spacing: 'gap-3', // 12px\n    borderWidth: 'border-2', // 2px border (consistent with others)\n    dotSize: 'w-3 h-3', // 12px inner dot\n    labelHeight: 'h-8',\n  },\n} as const;\n\n/**\n * Focused state maintains the same sizes as default state\n * Only adds wrapper styling, does not change radio/dot sizes\n */\n\n/**\n * Base radio styling classes using design system colors\n */\nconst BASE_RADIO_CLASSES =\n  'rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n  default: {\n    unchecked: 'border-border-400 bg-background hover:border-border-500',\n    checked: 'border-primary-950 bg-background hover:border-primary-800',\n  },\n  hovered: {\n    unchecked: 'border-border-500 bg-background', // #8C8D8D hover state for unchecked\n    checked: 'border-info-700 bg-background', // Adjust checked border for hover\n  },\n  focused: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  invalid: {\n    unchecked: 'border-border-400 bg-background', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background', // #124393 for checked radio\n  },\n  disabled: {\n    unchecked: 'border-border-400 bg-background cursor-not-allowed', // #A5A3A3 for unchecked radio\n    checked: 'border-primary-950 bg-background cursor-not-allowed', // #124393 for checked radio\n  },\n} as const;\n\n/**\n * Dot styling classes for the inner dot when checked\n */\nconst DOT_CLASSES = {\n  default: 'bg-primary-950',\n  hovered: 'bg-info-700', // #1C61B2 hover state for checked dot\n  focused: 'bg-primary-950', // #124393 for focused checked dot\n  invalid: 'bg-primary-950', // #124393 for invalid checked dot\n  disabled: 'bg-primary-950', // #124393 for disabled checked dot\n} as const;\n\n/**\n * Radio component props interface\n */\nexport type RadioProps = {\n  /** Label text to display next to the radio */\n  label?: ReactNode;\n  /** Size variant of the radio */\n  size?: RadioSize;\n  /** Visual state of the radio */\n  state?: RadioState;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label CSS classes */\n  labelClassName?: string;\n  /** Radio group name */\n  name?: string;\n  /** Radio value */\n  value?: string;\n  /** Default checked state for uncontrolled radios */\n  defaultChecked?: boolean;\n} & Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type' | 'defaultChecked'\n>;\n\n/**\n * Radio component for Analytica Ensino platforms\n *\n * A radio button component with essential states, sizes and themes.\n * Uses the Analytica Ensino Design System colors from styles.css with automatic\n * light/dark mode support. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic radio\n * <Radio name=\"option\" value=\"1\" label=\"Option 1\" />\n *\n * // Small size\n * <Radio size=\"small\" name=\"option\" value=\"2\" label=\"Small option\" />\n *\n * // Invalid state\n * <Radio state=\"invalid\" name=\"option\" value=\"3\" label=\"Required field\" />\n *\n * // Disabled state\n * <Radio disabled name=\"option\" value=\"4\" label=\"Disabled option\" />\n *\n * // Default checked (uncontrolled)\n * <Radio defaultChecked name=\"option\" value=\"5\" label=\"Initially checked\" />\n * ```\n */\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      label,\n      size = 'medium',\n      state = 'default',\n      errorMessage,\n      helperText,\n      className = '',\n      labelClassName = '',\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      id,\n      name,\n      value,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `radio-${generatedId}`;\n\n    // Handle controlled vs uncontrolled behavior\n    const [internalChecked, setInternalChecked] = useState(defaultChecked);\n    const isControlled = checkedProp !== undefined;\n    const checked = isControlled ? checkedProp : internalChecked;\n\n    // Handle change events\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const newChecked = event.target.checked;\n\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n\n      onChange?.(event);\n    };\n\n    // Determine current state based on props\n    const currentState = disabled ? 'disabled' : state;\n\n    // Get size classes\n    const sizeClasses = SIZE_CLASSES[size];\n\n    // Focused state maintains original sizes, only adds wrapper\n    const actualRadioSize = sizeClasses.radio;\n    const actualDotSize = sizeClasses.dotSize;\n\n    // Determine radio visual variant\n    const radioVariant = checked ? 'checked' : 'unchecked';\n\n    // Get styling classes\n    const stylingClasses = STATE_CLASSES[currentState][radioVariant];\n\n    // Border width logic - consistent across all states and sizes\n    const getBorderWidth = () => {\n      if (currentState === 'focused') {\n        return 'border-2'; // Consistent border for all focused radios inside wrapper\n      }\n      return sizeClasses.borderWidth;\n    };\n\n    const borderWidthClass = getBorderWidth();\n\n    // Get final radio classes\n    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;\n\n    // Get dot classes\n    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;\n\n    // Determine if wrapper is needed only for focused or invalid states\n    const isWrapperNeeded =\n      currentState === 'focused' || currentState === 'invalid';\n    const wrapperBorderColor =\n      currentState === 'focused'\n        ? 'border-indicator-info' // #5399EC for focused\n        : 'border-indicator-error'; // #B91C1C for invalid\n\n    // Determine text color based on state and checked status\n    const getTextColor = () => {\n      if (currentState === 'disabled') {\n        return checked ? 'text-text-900' : 'text-text-600'; // #262627 for disabled checked, #737373 for disabled unchecked\n      }\n\n      if (currentState === 'focused') {\n        return 'text-text-900'; // #262627 for focused (both checked and unchecked)\n      }\n\n      return checked ? 'text-text-900' : 'text-text-600'; // #262627 for checked, #737373 for unchecked\n    };\n\n    // Determine cursor class based on disabled state\n    const getCursorClass = () => {\n      return currentState === 'disabled'\n        ? 'cursor-not-allowed'\n        : 'cursor-pointer';\n    };\n\n    return (\n      <div className=\"flex flex-col\">\n        <div\n          className={`flex flex-row items-center ${\n            isWrapperNeeded\n              ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` // Wrapper apenas para focused/invalid\n              : sizeClasses.spacing\n          } ${disabled ? 'opacity-40' : ''}`}\n        >\n          {/* Hidden native input for accessibility and form submission */}\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            checked={checked}\n            disabled={disabled}\n            name={name}\n            value={value}\n            onChange={handleChange}\n            className=\"sr-only\"\n            {...props}\n          />\n\n          {/* Custom styled radio */}\n          <label htmlFor={inputId} className={radioClasses}>\n            {/* Show dot when checked */}\n            {checked && <div className={dotClasses} />}\n          </label>\n\n          {/* Label text */}\n          {label && (\n            <div\n              className={`flex flex-row items-center ${sizeClasses.labelHeight}`}\n            >\n              <Text\n                as=\"label\"\n                htmlFor={inputId}\n                size={sizeClasses.textSize}\n                weight=\"normal\"\n                className={`${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`}\n                color={getTextColor()}\n              >\n                {label}\n              </Text>\n            </div>\n          )}\n        </div>\n\n        {/* Error message */}\n        {errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-error-600\"\n          >\n            {errorMessage}\n          </Text>\n        )}\n\n        {/* Helper text */}\n        {helperText && !errorMessage && (\n          <Text\n            size=\"sm\"\n            weight=\"normal\"\n            className=\"mt-1.5\"\n            color=\"text-text-500\"\n          >\n            {helperText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx"]}