analytica-frontend-lib 1.0.35 → 1.0.36

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"]}

package/dist/index.css

@@ -27,6 +27,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -62,6 +63,7 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-4xl: 2rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -88,6 +90,7 @@
     --color-background-50: #f6f6f6;
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
+    --color-background-300: #d5d4d4;
     --color-background-500: #8e8e8e;
     --color-background-800: #414040;
     --color-background-950: #121212;
@@ -342,6 +345,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -362,6 +368,9 @@
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -530,6 +539,9 @@
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -626,6 +638,9 @@
   .w-\[1em\] {
     width: 1em;
   }
+  .w-\[70px\] {
+    width: 70px;
+  }
   .w-\[288px\] {
     width: 288px;
   }
@@ -644,6 +659,9 @@
   .max-w-\[390px\] {
     max-width: 390px;
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -659,6 +677,12 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-none {
+    flex: none;
+  }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .caption-bottom {
     caption-side: bottom;
   }
@@ -760,6 +784,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -923,6 +954,9 @@
   .bg-background-100 {
     background-color: var(--color-background-100);
   }
+  .bg-background-300 {
+    background-color: var(--color-background-300);
+  }
   .bg-background-muted {
     background-color: var(--color-background-muted);
   }
@@ -965,6 +999,9 @@
   .bg-primary-600 {
     background-color: var(--color-primary-600);
   }
+  .bg-primary-700 {
+    background-color: var(--color-primary-700);
+  }
   .bg-primary-800 {
     background-color: var(--color-primary-800);
   }
@@ -974,6 +1011,9 @@
   .bg-success {
     background-color: var(--color-success);
   }
+  .bg-success-200 {
+    background-color: var(--color-success-200);
+  }
   .bg-success-500 {
     background-color: var(--color-success-500);
   }
@@ -1055,6 +1095,9 @@
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
+  .text-center {
+    text-align: center;
+  }
   .text-left {
     text-align: left;
   }
@@ -1203,6 +1246,9 @@
   .text-primary {
     color: var(--color-primary);
   }
+  .text-primary-500 {
+    color: var(--color-primary-500);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
@@ -1266,6 +1312,15 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow-hard-shadow-3 {
+    --tw-shadow: 2px 2px 8px var(--tw-shadow-color, rgba(38, 38, 38, 0.2));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1335,6 +1390,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1373,6 +1431,14 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2248,6 +2314,7 @@
 @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
 @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
+@property --tw-ease { syntax: "*"; inherits: false; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -2295,6 +2362,7 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }